File size: 3,419 Bytes
2d460b1
79743a3
2d460b1
 
 
 
 
 
 
 
 
2d467fb
4ddace2
2d460b1
 
 
 
 
 
0ac023f
 
 
 
 
 
 
79743a3
0ac023f
2d460b1
0ac023f
8db1028
 
 
2d460b1
79743a3
9d0de4e
dbeba80
 
4ffd798
2d460b1
2d467fb
212b315
 
79743a3
2d460b1
79743a3
9421891
79743a3
2d460b1
79743a3
2d460b1
38e3cc4
 
 
99431c9
79743a3
 
 
 
 
2d460b1
8cf142f
 
 
 
 
 
2d460b1
 
0bae5c5
2d460b1
 
 
 
 
75496f8
2d460b1
 
 
 
 
 
79743a3
2d460b1
dbeba80
 
 
 
 
 
 
2d460b1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4ddace2
2d460b1
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import { cardHTML } from './card-html.js';
import { updateCardName, initialiseCardRotation, setOutput, screenshotCard } from './dom-manipulation.js';

const nameInput = document.querySelector('input[name="name"');
const nameToggle = document.querySelector('button.toggle-name');

let pokeName;
let trainerName;
let useTrainerName = true;
let generating = false;
let mousemoveHandlerForPreviousCard;
let pulls = 0;
let saved = 0;

const generate = async () => {
  if (generating) {
    return;
  }

  const scene = document.querySelector('.scene');
  const cardSlot = scene.querySelector('.card-slot');
  const actions = document.querySelector('.actions');

  scene.removeEventListener('mousemove', mousemoveHandlerForPreviousCard, true);
  cardSlot.innerHTML = '';
  generating = true;
  document.querySelector('.scene .booster').removeAttribute('title');
  setOutput('booster', 'generating');

  try {
    actions.style.opacity = '1';
    actions.setAttribute('aria-hidden', 'false');
    actions.querySelectorAll('button').forEach((button) => button.setAttribute('tabindex', '0'));

    if (window.innerWidth <= 920) {
      scene.scrollIntoView({ behavior: 'smooth', block: 'end' });
    }

    await new Promise((resolve) => setTimeout(resolve, 2_000));

    pulls += 1;

    const cardResponse = await fetch(`new_card?pull=${pulls}&saved=${saved}`);
    const card = await cardResponse.json();

    pokeName = card.details.name;

    generating = false;

    setOutput('booster', 'completed');

    await new Promise((resolve) =>
      setTimeout(resolve, window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 1_500 : 1_000)
    );

    cardSlot.innerHTML = cardHTML(card.details);
    document.querySelector('img.picture').src = card.image;

    mousemoveHandlerForPreviousCard = initialiseCardRotation(scene);

    setOutput('card', 'completed');

    const updateNameDuringAnimation = setInterval(() => updateCardName(trainerName, pokeName, useTrainerName), 100);

    setTimeout(() => {
      clearInterval(updateNameDuringAnimation);
    }, 500);
  } catch (err) {
    generating = false;
    setOutput('booster', 'failed');
    console.error(err);
  }
};

nameInput.addEventListener('input', (e) => {
  trainerName = [...e.target.value].filter((char) => char.match(/[\wÀ-ÿ '".,@&+#!?:/\\()_-]/g)?.length).join('');

  nameInput.value = trainerName;

  updateCardName(trainerName, pokeName, useTrainerName);
});

document.querySelector('form.name-form').addEventListener('submit', (e) => {
  e.preventDefault();

  if (document.querySelector('.output').dataset.state === 'completed') {
    if (!window.confirm('Generate new Pokémon?')) {
      return;
    }
  }

  generate();
});

nameToggle.addEventListener('click', () => {
  useTrainerName = !useTrainerName;

  updateCardName(trainerName, pokeName, useTrainerName);

  if (!useTrainerName) {
    nameToggle.classList.add('off');
  } else {
    nameToggle.classList.remove('off');
  }
});

document.querySelector('.booster').addEventListener('click', generate);

document.querySelector('button.generate-new').addEventListener('click', generate);

document.querySelector('button.save').addEventListener('click', async () => {
  const a = document.createElement('a');
  a.href = await screenshotCard();
  a.download = `${updateCardName(trainerName, pokeName, useTrainerName)} - This Pokémon Does Not Exist.png`;
  a.click();
  saved += 1;
});