diff --git a/.Jules/palette.md b/.Jules/palette.md index 8ee612f..b39b75a 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -1,14 +1,3 @@ -## 2024-05-23 - CLI UX Enhancement -**Learning:** Even in CLI apps, visual distinction (colors, emojis) significantly reduces cognitive load when scanning logs. -**Action:** Use ANSI colors and consistent emojis for key events (success/failure) in future CLI tools. - -## 2025-02-28 - Structured CLI Reports -**Learning:** Dense numerical data in CLI output is hard to parse. Using ASCII box-drawing characters and alignment to create a "dashboard" or "invoice" style summary significantly improves readability and perceived quality. -**Action:** When summarizing simulation or batch job results, always format the final report as a structured table or box rather than a list of print statements. -## 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. +## 2025-07-07 - Accessible Game Instructions +**Learning:** When adding dynamic status updates (like scores) to web UI elements like `src/views/mario-game.njk`, including `aria-live="polite"` and `aria-atomic="true"` maintains screen reader accessibility. However, static instructional text must not be placed inside an `aria-live` region, as it forces screen readers to unnecessarily repeat the static text every time the dynamic content updates. +**Action:** Extract static text into a separate sibling element when building interactive HTML5 widgets or games with custom keyboard event bindings, and always provide explicit, visible instructional text so users know the required inputs. diff --git a/src/views/mario-game.njk b/src/views/mario-game.njk index 67b6bd7..3a3ccb4 100644 --- a/src/views/mario-game.njk +++ b/src/views/mario-game.njk @@ -52,13 +52,24 @@ font-size: 20px; font-family: Arial; } + + #instructions { + position: absolute; + top: 35px; + left: 10px; + color: white; + font-size: 14px; + font-family: Arial; + opacity: 0.8; + }
-
Score: 0
+
Score: 0
+
Press Space or Up Arrow to jump!