high scores now based on submode

1 files changed, 71 insertions, 35 deletions

diff --git a/quickdraw-game.html b/quickdraw-game.html
index 3aa4d21..01f4ce6 100644
--- a/quickdraw-game.html
+++ b/quickdraw-game.html
@@ -136,11 +136,12 @@
             }
             button:hover {
               cursor: pointer;
-              font-style: italic;
+              text-decoration: underline;
             }
             button:active {
               background-color: red;
               color: var(--bg);
+              font-style: italic;
             }
 
             @media screen and (max-width: 1024px) {
@@ -187,12 +188,20 @@
             <!-- <button id="infinite">infinite</button> -->
           </div>
 
+          <!-- normal mode sub-modes -->
           <div id="normal-sub-modes" class="button-container hidden fade">
             <button id="normal-3-rounds" onclick="setupNormalMode(3)">3 rounds</button>
             <button id="normal-6-rounds" onclick="setupNormalMode(6)">6 rounds</button>
             <button id="normal-10-rounds" onclick="setupNormalMode(10)">10 rounds</button>
           </div>
 
+          <!-- countdown mode sub-modes -->
+          <div id="countdown-sub-modes" class="button-container hidden fade">
+            <button id="countdown-15s" onclick="setupCountdownMode(15)">15 seconds</button>
+            <button id="countdown-30s" onclick="setupCountdownMode(30)">30 seconds</button>
+            <button id="countdown-60s" onclick="setupCountdownMode(60)">60 seconds</button>
+          </div>
+
           <!-- pre-round text -->
           <span id="game-text" class="hidden fade"></span>
 
@@ -236,12 +245,14 @@
           let needsResizeAdjustment = false;
           
           // GAME STATE VARIABLES
-          let gamemode = "";  // can be: "normal", "countdown", "infinite"          
+          let gamemode = "";  // can be: "normal" or "countdown"
+          let submode = "";
           let countingDown   = false;
           let hovering = false;
           let hoverCount = 0; // number of times the cursor has hovered over bullseye. used to cleanly handle round starting / cancelling
           
           // GAMEPLAY VARIABLES
+          let highScore = 0;
           let targetsClicked = 0;
           let numTargets     = 0;
           
@@ -252,13 +263,13 @@
           let roundSeconds    = 0.0;
           let roundTimeStart  = 0;
           let roundTimeEnd    = 0;
-          let bestNormalTime  = 0;
+          let normalBestTimes = {};
           let normalBullseyeNeeded = false;
 
           // "COUNTDOWN" MODE ONLY VARIABLES
           let countdownBullseyeNeeded = false;
           let countdownTime = 0;
-          let bestCountdownScore = 0;
+          let countdownHighScores = {};
 
           
           // menu / text elements
@@ -299,11 +310,11 @@
 
             await fadeMainMenuIn();
 
-            if (localStorage.getItem("bestNormalTime") != null) {
-              bestNormalTime = Number.parseFloat(localStorage.getItem("bestNormalTime"));
+            if (localStorage.getItem("normalBestTimes") != null) {
+              normalBestTimes = JSON.parse(localStorage.getItem("normalBestTimes"));
             }
-            if (localStorage.getItem("bestCountdownScore") != null) {
-              bestCountdownScore = Number.parseInt(localStorage.getItem("bestCountdownScore"));
+            if (localStorage.getItem("countdownHighScores") != null) {
+              countdownHighScores = JSON.parse(localStorage.getItem("countdownHighScores"));
             }
           }
 
@@ -339,7 +350,7 @@
             normalSubModes.style.opacity = "100";
           }
 
-          function setupNormalMode(numRounds) {
+          async function setupNormalMode(numRounds) {
             // fade buttons out
             normalSubModes.style.opacity = "0";
             sleep(500);
@@ -350,10 +361,14 @@
             maxNormalRounds = numRounds;
             totalTime = 0;
 
-            beginNormalMode();
-          }
+            submode = numRounds;
+            if (Object.keys(normalBestTimes).indexOf(submode.toString()) == -1) {
+              highScore = 0;
+            }
+            else {
+              highScore = normalBestTimes[submode];
+            }
 
-          async function beginNormalMode() {
             // set game instruction text + fade it in
             gameText.innerText = "hover on middle circle to start the countdown,\nthen click the targets as fast as possible!";
             gameText.style.opacity = "0";
@@ -415,20 +430,21 @@
 
             // GAME OVER STUFF
             if (roundNumber == maxNormalRounds) {
-              if (totalTime < bestNormalTime || bestNormalTime == 0) {
-                if (bestNormalTime == 0) {
-                  alert("NEW FASTEST TIME!!! congratulations cowboy.");
+              if (totalTime < highScore || highScore == 0) {
+                if (highScore == 0) {
+                  alert("high score set!");
                 }
                 else {
-                  alert("NEW FASTEST TIME!!! previous best: " + bestNormalTime.toFixed(3) + "s. congratulations cowboy.");
+                  alert("NEW FASTEST TIME!!! previous best: " + highScore.toFixed(3) + "s. congratulations cowboy.");
                 }
-                bestNormalTime = totalTime;
-                localStorage.setItem("bestNormalTime", bestNormalTime);
+                highScore = totalTime;
+                normalBestTimes[submode] = highScore;
+                localStorage.setItem("normalBestTimes", JSON.stringify(normalBestTimes));
               }
 
               gameText.innerText = "ROUND: " + roundSeconds.toFixed(3) + 
                 "s\nTOTAL:   " + totalTime.toFixed(3) + 
-                "s\nBEST SCORE: " + bestNormalTime.toFixed(3);
+                "s\nBEST " + submode.toString() + "-ROUND TIME: " + highScore.toFixed(3) + "s";
 
               numTargets = 0;
               targetsClicked =0;
@@ -459,11 +475,25 @@
             return;
           }
 
-          async function handleCountdownMode(e) {
-            gamemode = "countdown";
-            countdownBullseyeNeeded = true;
+          async function setupCountdownMode(gameDuration) {
+            // fade buttons out
+            countdownSubModes.style.opacity = "0";
+            sleep(500);
+            countdownSubModes.style.display = "none";
+
+            // [re]set game parameters
+            targetsClicked = 0;
+            numTargets = 0;
+            countdownTime = gameDuration;
+
+            submode = gameDuration;
+            if (Object.keys(countdownHighScores).indexOf(submode.toString()) == -1) {
+              highScore = 0;
+            }
+            else {
+              highScore = countdownHighScores[submode];
+            }
 
-            await fadeMainMenuOut();
             // set game instruction text + fade it in
             gameText.innerText = "hover on middle circle to start the countdown,\nthen click as many targets as possible!";
             gameText.style.opacity = "0";
@@ -474,7 +504,17 @@
             // enable player to start game
             center.addEventListener("mouseover", handleHoverStart);
             center.addEventListener("mouseleave", handleHoverEnd);
-            center.addEventListener("touchend", handleHoverEnd);
+            center.addEventListener("touchend", handleHoverEnd); 
+          }
+
+          async function handleCountdownMode(e) {
+            gamemode = "countdown";
+            countdownBullseyeNeeded = true;
+
+            await fadeMainMenuOut();
+
+            countdownSubModes.style.display = "flex";
+            countdownSubModes.style.opacity = "100";
           }
 
           async function handleHoverStart(e) {
@@ -505,11 +545,6 @@
               return;
             }
             
-            // setup mode parameters
-            targetsClicked = 0;
-            numTargets = 0;
-            countdownTime = 15.0;
-
             // clear screen + render countdown / score
             center.remove();
             gameText.innerText = countdownTime.toFixed(3) + "s\ntargets clicked: " + targetsClicked;
@@ -542,18 +577,19 @@
             frameElement.replaceChildren();
 
             // show end of round text. if high score, alert player and save
-            if (targetsClicked > bestCountdownScore || bestCountdownScore == 0) {
-              if (bestCountdownScore == 0) {
+            if (targetsClicked > highScore || highScore == 0) {
+              if (targetsClicked == 0) {
                 alert("NEW HIGHEST SCORE!!! congratulations cowboy.");
               }
               else { 
-                alert("NEW HIGHEST SCORE!!! previous best: " + bestCountdownScore + " targets. congratulations cowboy.");
+                alert("NEW HIGHEST SCORE!!! previous best: " + highScore + " targets. congratulations cowboy.");
               }
-              bestCountdownScore = targetsClicked;
-              localStorage.setItem("bestCountdownScore", bestCountdownScore);
+              highScore = targetsClicked;
+              countdownHighScores[submode] = highScore;
+              localStorage.setItem("countdownHighScores", JSON.stringify(countdownHighScores));
             }
             gameText.innerText = "TARGETS CLICKED: " + targetsClicked + 
-              "\nHIGH SCORE: " + bestCountdownScore;
+              "\n" + submode.toString() + "-SECOND HIGH SCORE: " + highScore;
 
             numTargets = 0;
             targetsClicked =0;