feat: Implement game restart, battlefield styling with art crops and tapped stacks, and initial draw fixes.
Some checks failed
Build and Deploy / build (push) Failing after 1m10s

This commit is contained in:
2025-12-18 20:26:42 +01:00
parent ca7b5bf7fa
commit bc5eda5e2a
35 changed files with 1337 additions and 634 deletions

View File

@@ -0,0 +1,24 @@
---
title: Battlefield Cutout Style & Tapped Stack
status: Completed
---
## Objectives
- Use "Cutout" (Art Crop) style for cards on the battlefield to save space.
- Implement a stacked view for Tapped Lands on the left of the lands area.
- Rotate tapped cards by 45 degrees instead of 90 degrees.
## Implementation Details
1. **CardComponent**:
- Added `viewMode` prop ('normal' | 'cutout').
- If `viewMode='cutout'`, uses `card.definition.image_uris.art_crop` as src.
- Changed rotation class from `rotate-90` to `rotate-45`.
2. **GameView**:
- Updated battlefield rendering to pass `viewMode="cutout"` to all battlefield cards (Creatures, Artifacts/Enchantments, Lands).
- Updated card sizing on battlefield to `w-28 h-auto aspect-[4/3]` (approx 112x84px).
- Split Lands zone into `tappedLands` and `untappedLands`.
- Implemented a "stack" layout for `tappedLands` on the left side of the lands container, using absolute positioning within a relative container to create a pile effect.
## Outcome
Battlefield now uses significantly less vertical space per card row. Tapped lands are grouped neatly, reducing horizontal sprawl. Tapped cards are clearly distinct but take up less bounding box width due to 45 degree rotation compared to 90 degree (depending on aspect ratio, but arguably cleaner visual for "tapped").