diff --git a/.Jules/palette.md b/.Jules/palette.md index 8ee612f..ad1c828 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -12,3 +12,7 @@ ## 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. + +## 2025-07-10 - Explicit Game Controls and aria-live Separation +**Learning:** When building interactive HTML5 widgets or games with custom keyboard event bindings, users need explicit, visible instructional text so they know the required inputs. Furthermore, it's critical to keep static instructions outside of `aria-live` regions, otherwise screen readers will unnecessarily repeat the static text every time the dynamic content updates. +**Action:** Always provide explicit instructional text for custom controls. Extract static text into a separate sibling element away from any `aria-live` regions tracking dynamic updates like scores. diff --git a/src/views/mario-game.njk b/src/views/mario-game.njk index 67b6bd7..686c803 100644 --- a/src/views/mario-game.njk +++ b/src/views/mario-game.njk @@ -52,13 +52,26 @@ font-size: 20px; font-family: Arial; } + + #instructions { + position: absolute; + top: 40px; + left: 10px; + color: white; + font-size: 16px; + font-family: Arial; + background: rgba(0, 0, 0, 0.5); + padding: 5px 10px; + border-radius: 5px; + }
-
Score: 0
+
Score: 0
+
Press Space or Up Arrow to jump