All files / src/ui quest-ui.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
export const QuestUI = {
  renderOverlay({
    icon,
    overlay,
    quests,
  }) {
    const questHTML = quests.map((quest) => {
      const { title, tasks } = quest;
      const completed = tasks.every((k) => k.hidden || k.done) ? '\u2705 ' : '';
      const taskHTML = tasks
        .filter((k) => !k.hidden)
        .map((k) => `<li class="${k.done ? 'task-done' : ''}">${k.description}</li>`)
        .join('');
      return `<input type="button" class="accordion-toggle" value="${completed}${title}">
              <div class="accordion-expandable"> <ol>${taskHTML}</ol> </div>`;
    })
      .join('');

    const cont = overlay.querySelector('.accordion-container');
    if (!cont) {
      /* eslint-disable no-param-reassign */
      overlay.innerHTML = `<div class="container">
                   <div class="overlay"></div>
                   <div class="accordion-container">
                          <h2>Quests</h2>
                          ${questHTML}
                   </div>
            </div>`;
      /* eslint-enable no-param-reassign */
      QuestUI.hide(overlay); // explicitly hide so it can be toggled

      const background = overlay.querySelector('.overlay');
      QuestUI.show(background);
      background.addEventListener('click', () => {
        QuestUI.hide(overlay);
      });

      icon.addEventListener('click', () => {
        QuestUI.toggle(overlay);
      });
    } else {
      cont.innerHTML = `
          <h2>Quests</h2>
          ${questHTML}
      `;
    }
    const toggles = overlay.querySelectorAll('.accordion-toggle');
    toggles.forEach((toggle) => {
      const sibling = toggle.nextElementSibling;
      QuestUI.hide(sibling);
      toggle.addEventListener('click', () => {
        QuestUI.toggle(sibling);
      });
    });
  },
  show(element) {
    element.style.display = 'block'; // eslint-disable-line no-param-reassign
  },
  hide(element) {
    element.style.display = 'none'; // eslint-disable-line no-param-reassign
  },
  toggle(element) {
    if (element.style.display === 'none') {
      QuestUI.show(element);
    } else {
      QuestUI.hide(element);
    }
  },
};