Spaces:
Running
Running
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;
});
|