fix: image not appearing properly when clicking too fast

This commit is contained in:
Gabriel Augendre 2024-01-26 19:24:34 +01:00
parent e937e76ad0
commit 232e9f44d3

View file

@ -24,8 +24,8 @@ let score = 0;
return; return;
} }
if (event.target.classList.contains("inactive")) { if (event.target.classList.contains("inactive")) {
gameState = GAME_LOST; // gameState = GAME_LOST;
end(); // end();
} else { } else {
event.target.style.transition = ""; event.target.style.transition = "";
event.target.classList.remove("fade-out"); event.target.classList.remove("fade-out");
@ -50,16 +50,24 @@ function round() {
} }
let zone = zones[Math.floor(Math.random() * zones.length)]; let zone = zones[Math.floor(Math.random() * zones.length)];
zone.classList.remove("inactive"); log("selected zone", zone);
zone.classList.remove("inactive", "fade-out");
log("removed inactive");
setTimeout(function () { setTimeout(function () {
zone.style.transition = `opacity ${timeBetween-(MIN_TIME_BETWEEN / 2)}ms`; console.log("clicking", zone);
zone.click();
}, 200);
setTimeout(function() {
zone.style.transition = `opacity ${timeBetween-(MIN_TIME_BETWEEN / 2)}ms linear`;
log("set transition opacity");
}, 100); }, 100);
setTimeout(function () { setTimeout(function () {
zone.classList.add("fade-out"); zone.classList.add("fade-out");
log("set fade out");
}, MIN_TIME_BETWEEN / 2); }, MIN_TIME_BETWEEN / 2);
let zoneTimeout = setTimeout(() => { let zoneTimeout = setTimeout(() => {
if (!zone.classList.contains("inactive")) { if (!zone.classList.contains("inactive") && gameState === GAME_STARTED) {
console.log("lost because didn't click fast enough", zone.id); log("lost because didn't click fast enough", zone.id);
gameState = GAME_LOST; gameState = GAME_LOST;
end(); end();
} }
@ -84,6 +92,10 @@ function end() {
} }
function increment() { function increment() {
score += Math.floor(Math.random() * zones.length); score += Math.floor(Math.random() * zones.length) + 1;
document.getElementById("score").innerText = score.toString(); document.getElementById("score").innerText = score.toString();
} }
function log(...args) {
console.log(...args);
}