Merge pull request #110 from EiJackGH/palette/mario-game-scrolling-fix-5245249649879977107

🎨 Palette: Prevent page scrolling when playing Mario game

Author: aidasofialily-cmd

.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.

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;