diff --git a/.Jules/palette.md b/.Jules/palette.md index 8ee612f..7ff9597 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. +## 2024-06-14 - Game Interaction and Accessibility +**Learning:** For web-based interactive games with dynamic scoring, combining custom keyboard listeners with ARIA attributes is tricky. Keypresses for games (like Space/Arrows) must explicitly call `e.preventDefault()` to stop unwanted page scrolling, while dynamic status updates (like score counters) need `aria-live="polite"` and `aria-atomic="true"`. However, static instructions should not be placed inside the `aria-live` region, as the screen reader will redundantly announce them on every score tick. +**Action:** Always extract static instructional text into a separate sibling element from dynamic status updates, and implement `e.preventDefault()` on game-bound keys. 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..edb73d7 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: 40px; + left: 10px; + color: white; + font-size: 16px; + font-family: Arial; + opacity: 0.8; + }
-
Score: 0
+
Score: 0
+
Press Space or Up Arrow to jump