Как правильно организовать код?
 

Ниже по тексту идут долгие разъяснения о сути происходящего и ссылка ведет на код, в котором сперва можно заблудиться.
Я недавно закончил курс по javascript от этого сайта и в данный момент времени пытаюсь обобщить полученные данные, а так же выявить белые пятна, которые остались по завершению. Одна из проблем это явное неумение задать правильные имена методам и свойствам, но с этим я борюсь постепенно, а вот неумение правильно организовать код весьма мешает. Я пытаюсь создать веб-компонент, исключительно в учебных целях, в котором бы использовались основные темы, затронутые в курсе.
То, что имеется сейчас размещено в песочнице вот здесь. На данный момент это просто 2 кнопки. При нажатии на первую появляется div с картинкой, при нажатии на вторую div исчезает. Исчезновение не доработано, по причине того, что код уже раздулся и стал нечитаемым. Поэтому я притормозил и решил обратиться за помощью. Итоговая цель этой затеи создать компонент, разметка которого включается в страницу, к ней подключается наш скрипт собранный с помощью webpack и пропущенный через babel и стили нашей разметки. Наш компонент умеет отображать аватар по клику на кнопку, по зажатию кнопки мыши на картинке, справа будет появляться контейнер, куда мы можем перетащить наш аватар, после перетаскивания кнопка скрыть аватар становится недоступной. Генерация картинок осуществляется через запрос к серверу, где из полученного json файла выбирается рандомная картинка. Это то, что я хочу реализовать. Буду чрезмерно благодарен, если кто то дочитал до этого момента и уделит время чтоб посмотреть на то, что сейчас я имею и подскажет как вышеперечисленное грамотнее всего организовать.

karssen,
вопрос зачем две одинаковых функции анимации -- одна что не справится?

рони,
Да,эт я чего то передумал себя. Тогда еще 1 встречный вопрос, как лучше обозвать анимации, чтоб различать какая из них по завершению инициирует новое событие, а какая нет.

karssen,
добавить в функцию анимации stop и callback -- stop -- форсирование или остановка анимации и если есть callback вызываем в конце анимации

Если ты о грамотном проектировании, то вот тебе совет. Встань возле стены, и бейся об нее головой до тех пор, пока не забудешь все то, что прочитал в этом учебнике, кроме технических деталей стандарта языка, а так же жеквери. Далее, берешь литературу по реализации и семантике динамических ООП языков, таких как Io, Self, Smalltalk. Смотришь как устроены эти языки, как они работают, изучаешь код, паттерны, затем возвращаешься к жаваскрипту, начинаешь понимать как он работает, фильтруешь весь синтаксический мусор (~ 95 % языка) и начинаешь писать грамотный, взвешенный код, profit.

рони,

_animate(draw, duration, elem, callback) {
        let start = performance.now();

        requestAnimationFrame(function animate(time) {
        
          let timePassed = time - start;

          if (timePassed > duration) timePassed = duration;

          draw(timePassed);

          if (timePassed < duration) {
            requestAnimationFrame(animate);
          } else{
            if(!callback) return;

            callback(elem);
          }
        });
      }

Что то вроде такого? И в колбек передавать создание кастомного события? Не до конца понял как реализовать stop в этой функции.


pnpquest,
А без причинения себе физических увечий можно обойтись?)) Я собственно только технические детали и знаю. И то пока не на том уровне что хотелось бы. Можно грамотные советы по тому как сделать описанный выше веб компонент правильно исходя из ООП.

karssen,
Мне лень разбираться в твоем коде, извини. Можешь словами описать проблему, только кратко. Может че подскажу.

karssen,
как вариант

if (timePassed > duration || elem.stop) timePassed = duration;

рони,
Так получается нам уже проще сделать class Animation со своими методами и передавать в него набор опций при вызове?