diff --git a/quickdraw-game.html b/quickdraw-game.html index 889e4ed..9bea4ad 100644 --- a/quickdraw-game.html +++ b/quickdraw-game.html @@ -152,14 +152,14 @@ overflow: hidden; } body { - padding: .5rem .25rem; + padding: 1rem .5rem; max-height: 80vh; } #target-frame { width: 90%; } #text-frame { - margin-top: 1.25rem; + margin-top: 3rem; } #game-modes { gap: .5rem; @@ -265,6 +265,7 @@ let highScore = 0; let targetsClicked = 0; let numTargets = 0; + let preRoundText = "hold still on the circle, then click targets as fast as possible!"; // "NORMAL" MODE ONLY VARIABLES let currentRound = 0; @@ -460,7 +461,7 @@ } // set game instruction text + fade it in - gameText.innerText = "hover on red circle to start the countdown, then click the targets as fast as possible!"; + gameText.innerText = preRoundText; gameText.style.opacity = "0"; gameText.style.display = "inline"; await sleep(500); @@ -591,7 +592,7 @@ } // set game instruction text + fade it in - gameText.innerText = "hover on red circle to start the countdown, then click as many targets as possible!"; + gameText.innerText = preRoundText; gameText.style.opacity = "0"; gameText.style.display = "inline"; await sleep(500); @@ -701,43 +702,47 @@ /** HELPER TO KICK-OFF COUNTDOWNS FROM HOVER */ + // this prevents countdown from continuing if user removes / reapplies hover while we're sleeping + function cancelCountdown(hoverNumber) { + return !hovering || (hoverNumber != hoverCount); + } + async function drawCountdown(hoverNumber) { gameText.style.display = "none"; countingDown = true; - // this if-check prevents countdown from continuing if user removes / reapplies hover while we're sleeping - if (!hovering || hoverNumber != hoverCount) return false; + if (cancelCountdown(hoverNumber)) return false; ready.style.display = "inline"; ready.style.opacity = "100"; await sleep(1000); - if (!hovering || hoverNumber != hoverCount) return false; + if (cancelCountdown(hoverNumber)) return false; ready.style.display = "none"; ready.style.opacity = "0"; - if (!hovering || hoverNumber != hoverCount) return false; + if (cancelCountdown(hoverNumber)) return false; one.style.opacity = "0"; two.style.opacity = "0"; three.style.opacity = "0"; - if (!hovering || hoverNumber != hoverCount) return false; + if (cancelCountdown(hoverNumber)) return false; one.style.display = "inline"; two.style.display = "inline"; three.style.display = "inline"; - if (!hovering || hoverNumber != hoverCount) return false; + if (cancelCountdown(hoverNumber)) return false; three.style.opacity = "100"; await sleep(500); - if (!hovering || hoverNumber != hoverCount) return false; + if (cancelCountdown(hoverNumber)) return false; two.style.opacity = "100"; await sleep(500); - if (!hovering || hoverNumber != hoverCount) return false; + if (cancelCountdown(hoverNumber)) return false; one.style.opacity = "100"; await sleep(500); - if (!hovering || hoverNumber != hoverCount) return false; + if (cancelCountdown(hoverNumber)) return false; one.style.display = "none"; two.style.display = "none"; three.style.display = "none"; @@ -755,7 +760,6 @@ return true; } - function handleHoverEnd(e) { hovering = false; @@ -775,7 +779,7 @@ if (gamemode == "normal") { if (currentRound == 1) { - gameText.innerText = "hover on red circle to start the countdown, then click the targets as fast as possible!"; + gameText.innerText = preRoundText; } else { gameText.innerText = "ROUND: " + roundSeconds.toFixed(3) + "s\nTOTAL: " + totalTime.toFixed(3) + "s\nhover on circle to start round " + currentRound; @@ -783,7 +787,7 @@ } else if (gamemode == "countdown") { - gameText.innerText = "hover on red circle to start the countdown, then click as many targets as possible!"; + gameText.innerText = preRoundText; } gameText.style.display = "inline";