updates for sync to laptop

1 files changed, 116 insertions, 27 deletions

diff --git a/quickdraw-game.html b/quickdraw-game.html
index fd8bb13..f5fff87 100644
--- a/quickdraw-game.html
+++ b/quickdraw-game.html
@@ -149,6 +149,7 @@
             @media screen and (max-width: 1024px) {
               html {
                 font-size: 32px;
+                overflow: hidden;
               }
               body {
                 padding: .5rem .25rem;
@@ -163,6 +164,9 @@
               #game-modes {
                 gap: .5rem;
               }
+              #normal-sub-modes, #countdown-sub-modes, #game-over-buttons {
+                gap: .5rem;
+              }
               #game-text {
                 font-size: .8rem;
               }
@@ -188,23 +192,23 @@
 
           <!-- gamemode menu buttons-->
           <div id="game-modes" class="button-container hidden fade">
-            <button id="normal" onclick="handleNormalMode()">normal</button>
-            <button id="countdown" onclick="handleCountdownMode()">countdown</button>
+            <button id="normal-mode">normal</button>
+            <button id="countdown-mode">countdown</button>
             <!-- <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>
+            <button id="normal-3-rounds">3 rounds</button>
+            <button id="normal-6-rounds">6 rounds</button>
+            <button id="normal-10-rounds">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>
+            <button id="countdown-15s">15 seconds</button>
+            <button id="countdown-30s">30 seconds</button>
+            <button id="countdown-60s">60 seconds</button>
           </div>
 
           <!-- pre-round text -->
@@ -212,8 +216,8 @@
 
           <!-- post game buttons -->
           <div id="game-over-buttons" class="button-container hidden fade">
-            <button id="play-again" onclick="handlePlayAgain()">play again</button>
-            <button id="reset-game" onclick="handleReset()">back to main menu</button>
+            <button id="play-again">play again</button>
+            <button id="reset-game">back to main menu</button>
           </div>
 
           <!-- countdown text -->
@@ -299,14 +303,16 @@
           // setup initialization
           window.addEventListener("load", initGame);
           async function initGame() {
-            // determine screen parameters + listen for changes
+            // begin listening for changes
+            addEventListeners();
+            
+            // determine screen parameters
             setParameters();
-            window.addEventListener("resize", handlePageResize);
 
+            // draw into animation
             center = generateTarget(xFrameAdjustment, yFrameAdjustment);
             center.id = "center";
             document.body.insertAdjacentElement("afterbegin", center);
-
             await drawCircle(2);
             if (needsResizeAdjustment) { 
               // auto-reset screen if page was resized during animation
@@ -315,6 +321,7 @@
 
             await fadeMainMenuIn();
 
+            // load saved high scores
             if (localStorage.getItem("normalBestTimes") != null) {
               normalBestTimes = JSON.parse(localStorage.getItem("normalBestTimes"));
             }
@@ -323,6 +330,83 @@
             }
           }
 
+          function addEventListeners() {
+            window.addEventListener("resize", handlePageResize);
+
+            // prevent mobile browsers from tweaking when pressing+holding on mobile
+            document.addEventListener('touchstart',  (e) => {e.preventDefault()}, {passive:false});
+            document.addEventListener('touchmove',   (e) => {e.preventDefault()}, {passive:false});
+            document.addEventListener('touchend',    (e) => {e.preventDefault()}, {passive:false});
+            document.addEventListener('touchcancel', (e) => {e.preventDefault()}, {passive:false});
+
+            // set each element's funtion.
+            // normal mode buttons
+            document.getElementById("normal-mode").addEventListener('click', (e) => {
+              e.preventDefault(); handleNormalMode();
+            }, { passive: false });
+            document.getElementById("normal-mode").addEventListener('touchend', (e) => {
+              e.preventDefault(); handleNormalMode();
+            }, { passive: false });
+            document.getElementById("normal-3-rounds").addEventListener('click', (e) => {
+              e.preventDefault(); setupNormalMode(3);
+            }, { passive: false });
+            document.getElementById("normal-3-rounds").addEventListener('touchend', (e) => {
+              e.preventDefault(); setupNormalMode(3);
+            }, { passive: false });
+            document.getElementById("normal-6-rounds").addEventListener('click', (e) => {
+              e.preventDefault(); setupNormalMode(6);
+            }, { passive: false });
+            document.getElementById("normal-6-rounds").addEventListener('touchend', (e) => {
+              e.preventDefault(); setupNormalMode(6);
+            }, { passive: false });
+            document.getElementById("normal-10-rounds").addEventListener('click', (e) => {
+              e.preventDefault(); setupNormalMode(10);
+            }, { passive: false });
+            document.getElementById("normal-10-rounds").addEventListener('touchend', (e) => {
+              e.preventDefault(); setupNormalMode(10);
+            }, { passive: false });
+
+            // countdown mode buttons
+            document.getElementById("countdown-mode").addEventListener('click', (e) => {
+              e.preventDefault(); handleCountdownMode();
+            }, { passive: false });
+            document.getElementById("countdown-mode").addEventListener('touchend', (e) => {
+              e.preventDefault(); handleCountdownMode();
+            }, { passive: false });
+            document.getElementById("countdown-15s").addEventListener('click', (e) => {
+              e.preventDefault(); setupCountdownMode(15);
+            }, { passive: false });
+            document.getElementById("countdown-15s").addEventListener('touchend', (e) => {
+              e.preventDefault(); setupCountdownMode(15);
+            }, { passive: false });
+            document.getElementById("countdown-30s").addEventListener('click', (e) => {
+              e.preventDefault(); setupCountdownMode(30);
+            }, { passive: false });
+            document.getElementById("countdown-30s").addEventListener('touchend', (e) => {
+              e.preventDefault(); setupCountdownMode(30);
+            }, { passive: false });
+            document.getElementById("countdown-60s").addEventListener('click', (e) => {
+              e.preventDefault(); setupCountdownMode(60);
+            }, { passive: false });
+            document.getElementById("countdown-60s").addEventListener('touchend', (e) => {
+              e.preventDefault(); setupCountdownMode(60);
+            }, { passive: false });
+
+            // gameover menu buttons
+            document.getElementById("play-again").addEventListener('click', (e) => {
+              e.preventDefault(); handlePlayAgain();
+            }, { passive: false });
+            document.getElementById("play-again").addEventListener('touchend', (e) => {
+              e.preventDefault(); handlePlayAgain();
+            }, { passive: false });
+            document.getElementById("reset-game").addEventListener('click', (e) => {
+              e.preventDefault(); handleReset();
+            }, { passive: false });
+            document.getElementById("reset-game").addEventListener('touchend', (e) => {
+              e.preventDefault(); handleReset();
+            }, { passive: false });
+          }
+
           // helper function to determine screen-size + ratios for rendering targets
           function setParameters(event) {
             pageHeight = window.innerHeight;
@@ -375,16 +459,17 @@
             }
 
             // 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.innerText = "hover on red circle to start the countdown, then click the targets as fast as possible!";
             gameText.style.opacity = "0";
             gameText.style.display = "inline";
             await sleep(500);
             gameText.style.opacity = "100";
 
             // enable player to start first round
-            center.addEventListener("mouseover", handleHoverStart);
-            center.addEventListener("mouseleave", handleHoverEnd);
-            center.addEventListener("touchend", handleHoverEnd);
+            center.addEventListener("mouseover", handleHoverStart, {passive:false});
+            center.addEventListener("mouseleave", handleHoverEnd, {passive:false});
+            center.addEventListener("touchstart", handleHoverEnd, {passive:false});
+            center.addEventListener("touchend", handleHoverEnd, {passive:false}); 
           }
 
           async function startNormalRound(roundNumber) {
@@ -466,10 +551,11 @@
               console.log("ROUND: " + roundSeconds.toFixed(3) + "s\nTOTAL:   " + totalTime.toFixed(3) + "\nhover on circle to start round " + currentRound);
               gameText.innerText = "ROUND: " + roundSeconds.toFixed(3) + "s\nTOTAL:   " + totalTime.toFixed(3) + "s\nhover on circle to start round " + currentRound;
 
-              center.addEventListener("mouseover", handleHoverStart);
-              center.addEventListener("mouseleave", handleHoverEnd);
-              center.addEventListener("touchend", handleHoverEnd);
-
+              center.addEventListener("mouseover", handleHoverStart, {passive:false});
+              center.addEventListener("mouseleave", handleHoverEnd, {passive:false});
+              center.addEventListener("touchstart", handleHoverEnd, {passive:false});
+              center.addEventListener("touchend", handleHoverEnd, {passive:false}); 
+            
               normalBullseyeNeeded = true;
               currentRound++;
             }
@@ -500,16 +586,17 @@
             }
 
             // 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.innerText = "hover on red circle to start the countdown, then click as many targets as possible!";
             gameText.style.opacity = "0";
             gameText.style.display = "inline";
             await sleep(500);
             gameText.style.opacity = "100";
 
             // enable player to start game
-            center.addEventListener("mouseover", handleHoverStart);
-            center.addEventListener("mouseleave", handleHoverEnd);
-            center.addEventListener("touchend", handleHoverEnd); 
+            center.addEventListener("mouseover", handleHoverStart(), {passive:false});
+            center.addEventListener("mouseleave", handleHoverEnd(), {passive:false});
+            center.addEventListener("touchstart", handleHoverEnd(), {passive:false});
+            center.addEventListener("touchend", handleHoverEnd(), {passive:false}); 
           }
 
           async function handleCountdownMode(e) {
@@ -523,6 +610,7 @@
           }
 
           async function handleHoverStart(e) {
+            e.preventDefault();
             hovering = true;
             hoverCount++;
 
@@ -680,7 +768,7 @@
 
               if (gamemode == "normal") {
                 if (currentRound == 1) {
-                  gameText.innerText = "hover on middle circle to start the countdown,\nthen click the targets as fast as possible!";
+                  gameText.innerText = "hover on red circle to start the countdown, then click the targets as fast as possible!";
                 }
                 else {
                   gameText.innerText = "ROUND: " + roundSeconds.toFixed(3) + "s\nTOTAL:   " + totalTime.toFixed(3) + "s\nhover on circle to start round " + currentRound;
@@ -688,7 +776,7 @@
               }
 
               else if (gamemode == "countdown") {
-                  gameText.innerText = "hover on middle circle to start the countdown,\nthen click as many targets as possible!";
+                  gameText.innerText = "hover on red circle to start the countdown, then click as many targets as possible!";
               }
 
               gameText.style.display = "inline";
@@ -872,6 +960,7 @@
               target = generateTarget(x, y);
               target.classList.add("target");
               target.addEventListener("click", handleTargetClick);
+              target.addEventListener("touchend", handleTargetClick);
               document.getElementById("frame").insertAdjacentElement("afterbegin", target);
             }
           }