From eb3a4072d57ff7e78feeda7a627dd305f5021e74 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Sat, 21 Mar 2026 13:23:55 +0000 Subject: [PATCH] feat: improve mario game keyboard controls and accessibility - Added a visual keyboard hint ("Press Space to jump"). - Refined the `keydown` event listener to strictly trigger on `Space` or `ArrowUp` (previously any key). - Added `e.preventDefault()` for those keys to prevent the browser from naturally scrolling the page during gameplay. - Added `aria-live="polite"` to the score container for screen readers. Co-authored-by: EiJackGH <172181576+EiJackGH@users.noreply.github.com> --- .Jules/palette.md | 4 ++++ src/views/mario-game.njk | 20 ++++++++++++++++++-- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/.Jules/palette.md b/.Jules/palette.md index e565b3e..001587f 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -8,3 +8,7 @@ ## 2024-05-20 - Dynamic Progress Bar for Quiet CLI Tasks **Learning:** For long-running CLI processes that suppress verbose logging (e.g., `--quiet`), users lose system status visibility. **Action:** Implemented a dynamic progress bar using `\r` and `flush=True`, conditional on `sys.stdout.isatty()`, to provide status feedback without polluting non-interactive logs. + +## 2024-05-24 - Web Game Keyboard Controls UX +**Learning:** Using 'Space' or 'Arrow' keys to trigger interactions in web apps (like jumping in a game) without calling `e.preventDefault()` causes the browser to naturally scroll the page. This breaks the gameplay experience as the user is thrown out of context. +**Action:** Always capture and prevent default behavior on keyboard events that share bindings with native browser navigation (like Space/Arrow keys for scrolling) when implementing custom interactive widgets or games. diff --git a/src/views/mario-game.njk b/src/views/mario-game.njk index 45c251a..1996db8 100644 --- a/src/views/mario-game.njk +++ b/src/views/mario-game.njk @@ -52,13 +52,23 @@ font-size: 20px; font-family: Arial; } + + #hint { + position: absolute; + top: 35px; + left: 10px; + color: rgba(255, 255, 255, 0.8); + font-size: 14px; + font-family: Arial; + }
-
Score: 0
+
Score: 0
+
Press Space to jump
@@ -72,7 +82,13 @@ let score = 0; // Jump mechanic - document.addEventListener("keydown", () => { + document.addEventListener("keydown", (e) => { + if (e.code === "Space" || e.code === "ArrowUp") { + e.preventDefault(); // Prevent page scrolling + } else { + return; + } + if (jumping) return; jumping = true;