Repository navigation
Apply Claude Design visual pass (icons, palette, action tiles, win card) - #74
Conversation
…s, win card Icons become SVGs (emoji stripped from pack labels at runtime), region colours go through --reg with a per-cell dark tone, price becomes a badge, plus queen-drop/ripple, conflict pulse, solved ring and haptics. Keeps the cost badge inside its button and updates check-cost expectations to match. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HjTnVkUHVtQ9PjK9JyR5pE
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HjTnVkUHVtQ9PjK9JyR5pE
Matches the win card's tab; both now read plain "Global". Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HjTnVkUHVtQ9PjK9JyR5pE
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 1a9a8bb14b
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| padding: 20px 22px; | ||
| border: none; | ||
| position: relative; | ||
| overflow: hidden; |
There was a problem hiding this comment.
Keep the win card scrollable on short viewports
On short phones or split-screen windows, overflow: hidden clips the win card's lower controls once its fixed content exceeds calc(100dvh - 96px). This pass substantially increases that fixed height by stacking the two action buttons vertically and enlarging the score to 3rem, while the score list still has a 96px minimum; at heights such as 568px, personal-feedback/tab content can therefore make the new-game/settings controls overlap or disappear with no way to scroll to them. Allow the card itself to scroll vertically, or otherwise reduce/collapse its fixed-height content.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Confirmed, and it was slightly worse than described: the design's .win-card { position: relative } overrode .hint-card's position: fixed, so the card dropped into the page flow below the board. Fixed in the next push: the position override is gone and the card now has overflow-y: auto as a last resort (the score list still shrinks first). Checked at 320×568, 360×640 and 390×844 with every optional row shown; win-feedback now asserts the card is fixed and inside the viewport.
Generated by Claude Code
The design's .win-card { position: relative } overrode .hint-card's fixed, so
the card fell into the page flow below the board. Drop it, let the card scroll
as a last resort, and assert in win-feedback that it is fixed and on screen.
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HjTnVkUHVtQ9PjK9JyR5pE
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HjTnVkUHVtQ9PjK9JyR5pE
Summary
index.html,css/styles.css,js/main.js): line SVG icons instead of emoji (pack emoji are stripped at runtime bydecorateIcons, language packs untouched), a more saturated region palette with a per-cell dark tone via--reg+color-mix, action buttons as tiles with the price as a badge, queen-drop/ripple, conflict pulse, solved ring + light sweep, haptics, and a redesigned win card / podium colours.scrollWidthand failed the fit tests) and slightly tightens the action-tile type so "Zurücksetzen"/"Reset" is no longer ellipsised at 390 px.tests/browser/check-cost.mjsnow expects+8 sinstead of the old bracketed(+8 s).CLAUDE.mdgains a short "Visual language" section.Test plan
tests/logic/*all pass (incl.verify-i18n)check-cost,hint-cost,reset-timer,win-feedback,i18n-layout(6 languages),board-size-hint,touch-accuracy,voice-mode,leaderboard-period,leaderboard-cap,leaderboard-retry,qr-share,error-delay🤖 Generated with Claude Code
https://claude.ai/code/session_01HjTnVkUHVtQ9PjK9JyR5pE
Generated by Claude Code