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; } } +
-
-
+
@@ -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";