diff --git a/.Jules/palette.md b/.Jules/palette.md index e565b3e..8ee612f 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. + +## 2025-03-23 - Game Key Scrolling +**Learning:** Browsers natively scroll the page when users press Space or Arrow keys. When building a web-based game, this creates a frustrating UX where the game viewport jumps around while playing. +**Action:** Always call `e.preventDefault()` on keydown events for typical game controls ("Space", "ArrowUp", etc.) when the focus is on a game container or the body. diff --git a/src/views/mario-game.njk b/src/views/mario-game.njk index 45c251a..8a3c1fd 100644 --- a/src/views/mario-game.njk +++ b/src/views/mario-game.njk @@ -72,7 +72,15 @@ let score = 0; // Jump mechanic - document.addEventListener("keydown", () => { + document.addEventListener("keydown", (e) => { + // Prevent default page scrolling for typical game keys + if (["Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.code)) { + e.preventDefault(); + } + + // Only jump on Space or Up Arrow + if (e.code !== "Space" && e.code !== "ArrowUp") return; + if (jumping) return; jumping = true;