Spaces:
Running
Running
File size: 3,556 Bytes
2d460b1 75496f8 2d460b1 1ac49a7 120da3b 9b7fc50 2d460b1 9b7fc50 2d460b1 9b7fc50 1ac49a7 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 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 |
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');
console.log({ card });
console.log(card.querySelector('img.picture'));
console.log(card.querySelector('img.picture').src);
let imageUrl = await toPng(card, {
width: 400,
height: 558,
backgroundColor: 'transparent',
style: {
transform: 'none',
},
});
imageUrl = await toPng(card, {
width: 400,
height: 558,
backgroundColor: 'transparent',
style: {
transform: 'none',
},
});
console.log(imageUrl);
return imageUrl;
};
export { durationTimer, updateCardName, initialiseCardRotation, setOutput, screenshotCard };
|