From 91b3015d7bc3db4e5b24e0ac589e429b78929f1b Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Mon, 20 Jul 2026 13:43:18 +0000 Subject: [PATCH] feat(ui): add explicit keyboard controls hint to Mario game canvas Added a visible, non-blocking controls hint (`pointer-events: none`) to the Mario game canvas instructing users to use "Space" or "Up Arrow" to jump. Also added a journal entry to `.Jules/palette.md` detailing this UX learning regarding explicit keyboard bindings for web widgets. Co-authored-by: EiJackGH <172181576+EiJackGH@users.noreply.github.com> --- .Jules/palette.md | 4 ++++ src/views/mario-game.njk | 3 +++ 2 files changed, 7 insertions(+) diff --git a/.Jules/palette.md b/.Jules/palette.md index 8ee612f..4d293fd 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-01-20 - Explicit Keyboard Instructions for Web Games +**Learning:** When building interactive HTML5 widgets or games with custom keyboard event bindings, always provide explicit, visible instructional text so users know the required inputs. +**Action:** Add a visible hint to web-based game canvases to display required keyboard bindings visually without blocking user interactions. diff --git a/src/views/mario-game.njk b/src/views/mario-game.njk index 67b6bd7..5073767 100644 --- a/src/views/mario-game.njk +++ b/src/views/mario-game.njk @@ -59,6 +59,9 @@
Score: 0
+
+ Press Space or ↑ to jump +