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