QOL code

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 (cancelCountdown(hoverNumber)) return false;
-            if (!hovering || hoverNumber != hoverCount) 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";