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;