Spaces:
Running
Running
File size: 3,419 Bytes
0fc5df9 |
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;
});
|