much better mobile friendliness + button updates!

1 files changed, 59 insertions, 15 deletions

diff --git a/quickdraw-game.html b/quickdraw-game.html
index bdb8737..77bc631 100644
--- a/quickdraw-game.html
+++ b/quickdraw-game.html
@@ -27,6 +27,7 @@
                 justify-content: center;
                 height: 100vh;
                 width: 100vw;
+                padding: 1rem;
             }
             #frame {
                 width: 60%;
@@ -73,47 +74,87 @@
               display: flex;
               flex-direction: row;
               width: 100%;
-              gap: 2rem;
+              gap: 1rem;
             }
 
-            #text-box {
+            #text-container {
                 display: flex;
                 flex-direction: column;
-                align-content: end;
-                justify-content: space-evenly;
+                justify-content: flex-end;
                 gap: 1rem;
-                text-align: center;
-                color: red;
+
+                min-height: 15%;
                 width: 100%;
-                min-height: 2rem;
+
+                color: red;
+                text-align: center;
                 line-height: 1rem;
+
                 margin-top: 2rem;
             }
 
+            #game-modes {
+              display: flex;
+              align-content: center;
+              justify-content: center;
+              width: 100%;
+              gap: 1rem;
+            }
+
             #game-over-buttons {
               gap: 2rem;
               align-items: center;
               justify-content: center;
             }
 
-            @media screen and (max-width: 750px) {
+            button {
+              background-color: var(--bg);
+              color: red;
+              padding: 12px 12px;
+              border: 2px solid red;
+              border-radius: 1rem;
+              font-size: .75rem;
+              font-weight: bold;
+            }
+            button:hover {
+              cursor: pointer;
+              font-style: italic;
+            }
+            button:active {
+              background-color: red;
+              color: var(--bg);
+            }
+
+            @media screen and (max-width: 1024px) {
               html {
                 font-size: 32px;
               }
-              .text  { font-size: .5rem; }
-              .title { font-size: 2rem; }
+              body {
+                padding: .75rem .25rem;
+              }
+              #frame {
+                width: 100%;
+              }
+              #game-modes {
+                gap: .5rem;
+              }
+              #game-text {
+                font-size: .8rem;
+              }
+              .title { font-size: 1.5rem; }
+              button { font-size: .75rem; }
             }
 
         </style>
     </head>
     <body>
 
+        <!-- where the targets + bullseye are drawn -->
         <div id="frame">
-          <!-- where the targets + bullseye are drawn -->
         </div>
 
         <!-- where we place text + buttons -->
-        <div id="text-box">
+        <div id="text-container">
           
           <!-- intro related -->
            <div id="title-container">
@@ -211,7 +252,6 @@
 
           // setup initialization
           window.addEventListener("load", initGame);
-
           async function initGame() {
             // determine screen parameters + listen for changes
             setParameters();
@@ -221,7 +261,7 @@
             center.id = "center";
             document.body.insertAdjacentElement("afterbegin", center);
 
-            await drawTargetsInCircle(2);
+            await drawTargetsInCircle();
             if (needsResizeAdjustment) { 
               // auto-reset screen if page was resized during animation
               handlePageResize();
@@ -302,6 +342,7 @@
             // enable player to start first round
             center.addEventListener("mouseover", handleHoverStart);
             center.addEventListener("mouseleave", handleHoverEnd);
+            center.addEventListener("touchend", handleHoverEnd);
           }
 
           async function handleCountdownMode(e) {
@@ -319,6 +360,7 @@
             // enable player to start game
             center.addEventListener("mouseover", handleHoverStart);
             center.addEventListener("mouseleave", handleHoverEnd);
+            center.addEventListener("touchend", handleHoverEnd);
           }
 
           async function handleReset(e) {
@@ -519,6 +561,7 @@
 
               center.addEventListener("mouseover", handleHoverStart);
               center.addEventListener("mouseleave", handleHoverEnd);
+              center.addEventListener("touchend", handleHoverEnd);
             }
 
             gameText.style.display = "inline";
@@ -653,6 +696,7 @@
               document.body.insertAdjacentElement("afterbegin", center); 
               center.addEventListener("mouseover", handleHoverStart);
               center.addEventListener("mouseleave", handleHoverEnd);
+              center.addEventListener("touchend", handleHoverEnd);
             }
             else if (gamemode == "normal" && currentRound == 4) {
               center.remove();
@@ -698,7 +742,7 @@
             titleContainer.style.display = "flex";
             title1.style.display = "inline";
             title2.style.display = "inline";
-            gameModes.style.display = "inline";
+            gameModes.style.display = "flex";
 
             // make title elements actually visible
             title1.style.opacity = "100";