Skip to content

Apply Claude Design visual pass (icons, palette, action tiles, win card) - #74

Merged
IlianP merged 5 commits into
mainfrom
claude/evaluate-design-zip-c7koxm
Oct 3, 2026
Merged

IlianP merged 5 commits into
mainfrom
claude/evaluate-design-zip-c7koxm

Conversation

@IlianP

@IlianP IlianP commented Oct 1, 2026

Copy link
Copy Markdown
Owner

Summary

  • Applies the Claude Design handoff (index.html, css/styles.css, js/main.js): line SVG icons instead of emoji (pack emoji are stripped at runtime by decorateIcons, 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.
  • Keeps the price badge inside its button box (a negative offset inflated scrollWidth and failed the fit tests) and slightly tightens the action-tile type so "Zurücksetzen"/"Reset" is no longer ellipsised at 390 px.
  • German reset button label is now "Reset".
  • The Bestenliste "Global" tab drops its 🌐 to match the win card.
  • tests/browser/check-cost.mjs now expects +8 s instead of the old bracketed (+8 s).
  • CLAUDE.md gains a short "Visual language" section.

Test plan

  • tests/logic/* all pass (incl. verify-i18n)
  • Browser: 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
  • Screenshots at 390 px in light and dark checked
  • Try on a phone (touch feel, 13×13 palette: lime vs. 13th colour are close, ΔE ≈ 15.7)

🤖 Generated with Claude Code

https://claude.ai/code/session_01HjTnVkUHVtQ9PjK9JyR5pE


Generated by Claude Code

…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

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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".

Comment thread css/styles.css Outdated
padding: 20px 22px;
border: none;
position: relative;
overflow: hidden;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge 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 👍 / 👎.

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

claude added 2 commits October 1, 2026 06:36
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
@IlianP
IlianP merged commit e911e19 into main Oct 3, 2026
1 check passed
@IlianP
IlianP deleted the claude/evaluate-design-zip-c7koxm branch October 3, 2026 09:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants