MTG design system, bigger cards, onboarding overhaul, and reliability improvements#7
Merged
Merged
Conversation
…improvements
Design system:
- Replace flat gold (#e8b836) with MTG card-frame amber (#c9a84c / #e2c468)
- Add Cinzel display font (Beleren-adjacent) for logo via next/font
- Gold focus rings across the app (was purple)
- Glow vars: --glow-gold, --glow-keep, --glow-mull used on interactive elements
- MTG mana palette tokens (--mana-white/blue/black/red/green)
- Header gets 2px gold top border + gold active tab underline
- Card slot highlights use mana-green (playable) and mana-blue (castable)
- Keep/Mulligan/New Hand buttons glow with their semantic colors on hover
Onboarding (Phase 2):
- Quick-start CTA in DeckInput when textarea is empty ("Try demo deck →")
- Visible label added to random deck type selector
- Desktop input panel is now two-column: form + feature description sidebar
- Goldfish idle state now explains the mode instead of just gating access
- Removed ghost demoBtn; demo flow consolidated into DeckInput
Reliability (Phase 1):
- fetchCards onProgress wired: shows "Fetching cards… X/Y" during Scryfall fetch
- notFound warning truncated to 3 + "+N more" (was unlimited join)
- Status message cleared on successful load (was left at last progress state)
- Fallback warning more actionable: clarifies simulation still works
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Switch CardGrid and Goldfish zone grid from fixed column counts to auto-fill minmax, increasing card width from ~105px to ~160px on desktop. Cards now scale naturally with container width rather than being divided into too many narrow columns. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Footer: - Add Footer component with bg-root background, gold hover links - Privacy note, bug report, donate, and GitHub links - Sticky to bottom via flex column body layout SEO: - Expand meta description with mobile + no-account callouts - Add keywords array (MTG, Commander, goldfish, deck tester, Scryfall) - Add Twitter card metadata - Add robots index/follow README: - Rewrite to reflect Next.js 15 + React 19 + TypeScript stack (was describing the old vanilla JS version) - Add correct setup instructions (npm run dev, not static server) - Add project layout, import methods, reliability, and privacy sections - Link to live site Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Owner
Author
|
@copilot resolve the merge conflicts in this pull request |
Owner
Author
|
@copilot resolve the merge conflicts in this pull request |
Contributor
Merge conflicts are resolved in commit |
Copilot stopped work on behalf of
fuzmaster due to an error
May 31, 2026 02:41
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
#c9a84c) replacing flat yellow, gold focus rings, glow effects on interactive buttons, mana-color-coded card highlights (green = playable land, blue = castable spell)CardGridand Goldfish zone grids from fixed column counts (7–8 narrow cols) toauto-fill minmax(150px, 1fr), growing cards from ~105px to ~160px wide on desktopfetchCardsnow shows live progress (Fetching cards… X/Y) via the existingonProgresscallback;notFoundwarning truncated to 3 + "+N more"; status message cleared on successful loadFootercomponent withvar(--bg-root)background, privacy note, and utility links (bug report, donate, GitHub)What a reviewer should know
All changes are CSS/component-level — no changes to game logic (
engine.ts,metrics.ts,race.ts,goldfish.ts) or data fetching contracts. TypeScript passes cleanly with zero errors. Theauto-fillcard grid is fully backward compatible — on narrower containers cards just wrap to the next row rather than becoming tiny slivers.The
onProgresswiring inuseHandTest.tsuses the existing callback signature inscryfall.tsthat was never connected.🤖 Generated with Claude Code