diff --git a/.Jules/palette.md b/.Jules/palette.md index 8ee612f..48814b0 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-10-26 - Visible Instructions for Custom Key Bindings +**Learning:** When building interactive HTML5 widgets or games with custom keyboard event bindings (like "Space" or "ArrowUp" to jump), it's crucial to explicitly inform users of the expected controls. Users might not naturally assume standard keys and could get confused if controls aren't standard or visible. +**Action:** Always provide explicit, visible instructional text alongside interactive elements or games so users know the required inputs. diff --git a/requirements.txt b/requirements.txt index cfaa995..4ad1501 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1,4 +1,3 @@ numpy pandas requests -venv diff --git a/src/views/mario-game.njk b/src/views/mario-game.njk index 67b6bd7..ee6e7d3 100644 --- a/src/views/mario-game.njk +++ b/src/views/mario-game.njk @@ -52,13 +52,23 @@ font-size: 20px; font-family: Arial; } + + #instructions { + position: absolute; + top: 40px; + left: 10px; + color: rgba(255, 255, 255, 0.8); + font-size: 14px; + font-family: Arial; + }
-
Score: 0
+
Score: 0
+
Press Space or Up Arrow to jump