Spaces:
Running
Running
File size: 3,347 Bytes
2d460b1 79743a3 2d460b1 2d467fb 2d460b1 0ac023f 79743a3 0ac023f 2d460b1 0ac023f 8db1028 2d460b1 79743a3 dbeba80 79743a3 2d460b1 2d467fb df36afa 79743a3 2d460b1 79743a3 9421891 79743a3 2d460b1 79743a3 2d460b1 38e3cc4 99431c9 79743a3 2d460b1 0bae5c5 2d460b1 75496f8 2d460b1 79743a3 2d460b1 dbeba80 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 |
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;
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: 'center' });
}
await new Promise((resolve) => setTimeout(resolve, 5_000));
pulls += 1;
const resolvedCardUrl = new URL(`new_card?pull=${pulls}`, document.location.origin + document.location.pathname).href;
const cardResponse = await fetch(resolvedCardUrl);
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);
updateCardName(trainerName, pokeName, useTrainerName);
document.querySelector('img.picture').src = card.image;
mousemoveHandlerForPreviousCard = initialiseCardRotation(scene);
setOutput('card', 'completed');
} 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();
});
|