simon/quickdraw-game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

much better mobile friendliness + button updates!

Browse Source
This commit is contained in:
simon-ec
2026-07-29 19:28:58 -04:00
parent c09a4dff6b
commit 5b98e9724c
1 changed files with 59 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
quickdraw-game.html
+59 -15
View File
@@ -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>
<div id="frame">
<!-- where the targets + bullseye are drawn -->
<div id="frame">
</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";