Add card size modes and dynamic grid layout for deck builder - #48
Open
TimBest wants to merge 2 commits into
Open
Add card size modes and dynamic grid layout for deck builder#48TimBest wants to merge 2 commits into
TimBest wants to merge 2 commits into
Conversation
CardSvg previously sized every shape with a fixed 35-unit box on an implicit 3x3 grid, regardless of how many shapes a card had, wasting space on cards with fewer shapes. Adds a "Card Size" control to the Game Editor: "Full Size" sizes every card's shapes off the deck's largest shape count so sizing stays uniform across the deck (reduces to the original fixed layout when that max is 9, so existing decks render unchanged), and "Max Size" sizes each card independently off its own shape count. Both compute a non-overlapping grid via the new cardLayout module and persist with the saved deck. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YPLPk2pADJj4uStZuvu4Dy
✅ Deploy Preview for imaginative-dieffenbachia-3400e7 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Reduce the outer whitespace around each card's shapes (.card svg margin 20px -> 8px). Shape size itself is driven by max-height, so this only shrinks the surrounding padding, not the shapes. Also fix a Full Size edge case: a card with exactly one shape now always renders dead center, even when the deck's shared capacity grid (e.g. 5, a 2x3 grid) has no single cell centered on both axes. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YPLPk2pADJj4uStZuvu4Dy
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
2 participants
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
This PR introduces flexible card layout sizing and a new "Full Size" mode for the deck builder, allowing shapes to maintain uniform size across all cards in a deck. Previously, cards always sized shapes to fit their individual shape count. Now users can choose between "Full Size" (uniform sizing across the deck) and "Max Size" (each card sizes independently).
Key Changes
New
cardLayout.tsmodule: Implements dynamic grid layout computation that:CardSvg component enhancement:
capacityprop to decouple shape sizing from individual card shape countcapacityis provided, shapes size off that shared grid capacity instead of the card's own countnumbersvalue for backward compatibility ("Max Size" behavior)New CardSizeSelect UI component: Radio button control for choosing between "Full Size" and "Max Size" modes
GeometricDeckGenerator updates:
cardSizeModeproperty to track the selected sizing modefullSizeCapacityas the maximumnumbersvalue across all cards in the deckcapacityto CardSvg based on the selected modeType system: Added
CardSizeModetype ("full" | "max") and updatedDeckinterface to include optionalcardSizeModepropertyGameEditor integration: Wired up CardSizeSelect to control deck generation and persistence
Notable Implementation Details
https://claude.ai/code/session_01YPLPk2pADJj4uStZuvu4Dy