From 78d3a88714017e9445e8a2735b8e6a8629a31210 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 30 Jul 2026 13:24:37 +0000
Subject: [PATCH] feat(ui): add explicit keyboard instructions to mario game

- Adds an `#instructions` div to `src/views/mario-game.njk` to indicate that 'Space' or 'Up Arrow' can be used to jump.
- Styles the new instruction div to be visually distinct (white text, absolute positioning) and sets `pointer-events: none` to prevent it from interfering with user interactions on the game canvas.
- Appends a UX learning to `.Jules/palette.md` detailing the importance of explicit instructional text for custom keybindings in interactive web widgets.

Co-authored-by: EiJackGH <172181576+EiJackGH@users.noreply.github.com>
---
 .Jules/palette.md        |  4 ++++
 src/views/mario-game.njk | 10 ++++++++++
 2 files changed, 14 insertions(+)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 8ee612f..46a0b10 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.
+
+## 2024-07-30 - Keyboard Instructions
+**Learning:** Interactive HTML5 widgets with custom keybindings require explicit, visible instructional text so users know the required inputs.
+**Action:** Add explicit instructional text for custom keyboard bindings.
diff --git a/src/views/mario-game.njk b/src/views/mario-game.njk
index 67b6bd7..785a032 100644
--- a/src/views/mario-game.njk
+++ b/src/views/mario-game.njk
@@ -52,6 +52,15 @@
       font-size: 20px;
       font-family: Arial;
     }
+
+    #instructions {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      color: white;
+      font-family: Arial;
+      pointer-events: none;
+    }
   </style>
 </head>
 
@@ -59,6 +68,7 @@
 
 <div id="game">
   <div id="score">Score: 0</div>
+  <div id="instructions">Press Space or Up Arrow to jump</div>
   <div id="mario"></div>
   <div class="ground"></div>
 </div>