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";