import { toPng } from 'https://cdn.skypack.dev/html-to-image'; const durationTimer = () => { const elapsedDisplay = document.querySelector('.elapsed'); let duration = 0.0; return () => { const startTime = performance.now(); const incrementSeconds = setInterval(() => { duration += 0.1; elapsedDisplay.textContent = duration.toFixed(1); }, 100); const updateDuration = (task) => { if (task?.status == 'completed') { duration = task.completed_at - task.created_at; return; } duration = Number(((performance.now() - startTime) / 1_000).toFixed(1)); }; window.addEventListener('focus', updateDuration); return { cleanup: (completedTask) => { updateDuration(completedTask); clearInterval(incrementSeconds); window.removeEventListener('focus', updateDuration); elapsedDisplay.textContent = duration.toFixed(1); }, }; }; }; const updateCardName = (trainerName, pokeName, useTrainerName) => { const cardName = document.querySelector('.pokecard .name'); if (!cardName) { return; } let trainerString = ''; if (trainerName && useTrainerName) { trainerName = [...trainerName].filter((char) => char.match(/[\wÀ-ÿ '".,&+#!?:/\\()_-]/g)?.length).join(''); trainerString = `${trainerName}${trainerName.match(/[sSzZ]$/g)?.length ? "' " : "'s "}`; } const fullName = `${trainerString}${pokeName}`; cardName.innerText = fullName; let nameWidth; let cardWidth = document.querySelector('.pokecard').getBoundingClientRect().width; let scale = 1.01; do { scale -= 0.01; cardName.style.transform = `scaleX(${scale})`; nameWidth = cardName.getBoundingClientRect().width; } while (nameWidth / cardWidth > 0.62); return fullName; }; const rotateCard = () => { const RANGE = 0.1; const INTERVAL = 13; // ~75 per second let previousTime = 0; // Throttle closure return (card, containerMouseEvent) => { const currentTime = performance.now(); if (currentTime - previousTime > INTERVAL) { previousTime = currentTime; const rect = card.getBoundingClientRect(); const rotateX = (containerMouseEvent.clientY - rect.y - rect.height / 2) * RANGE; const rotateY = -(containerMouseEvent.clientX - rect.x - rect.width / 2) * RANGE; card.style.setProperty('--card-rx', rotateX + 'deg'); card.style.setProperty('--card-ry', rotateY + 'deg'); } }; }; const initialiseCardRotation = (scene) => { const card = document.querySelector('.pokecard'); const mousemoveHandler = rotateCard().bind(null, card); scene.addEventListener('mousemove', mousemoveHandler, true); return mousemoveHandler; }; const setOutput = (mode, state) => { const output = document.querySelector('.output'); output.dataset.mode = mode; output.dataset.state = state; }; const screenshotCard = async () => { const card = document.querySelector('.pokecard'); const imageUrl = await toPng(card, { width: 400, height: 558, backgroundColor: 'transparent', style: { transform: 'none', }, }); return imageUrl; }; export { durationTimer, updateCardName, initialiseCardRotation, setOutput, screenshotCard };