19 lines
1.3 KiB
Markdown
19 lines
1.3 KiB
Markdown
# Restructure Battlefield Layout
|
|
|
|
**Status:** Planned
|
|
**Date:** 2025-12-18
|
|
**Description:**
|
|
Restructure the battlefield view in `GameView.tsx` from a free-form absolute positioning system to a structured, 3-zone layout (Creatures, Non-Creatures, Lands) using Flex/Grid. This improves readability and organization of the board state.
|
|
|
|
**Technical Plan:**
|
|
1. **Categorization:** In `GameView.tsx`, split the `myBattlefield` array into three logical groups:
|
|
- **Creatures:** Any card with 'Creature' type (including Artifact Creatures and Land Creatures).
|
|
- **Lands:** Any card with 'Land' type that is NOT a creature.
|
|
- **Others:** Artifacts, Enchantments, Planeswalkers, Battles that are neither Creatures nor Lands.
|
|
2. **Layout:** Replace the absolute `div` rendering with a Flexbox column container (`h-full flex flex-col`).
|
|
- **Combat Zone (Top):** `flex-1` (takes remaining space). Used for Creatures. Layout: `flex-wrap`, centered.
|
|
- **Support Zone (Middle):** Fixed height or proportional. Used for Artifacts/Enchantments.
|
|
- **Mana Zone (Bottom):** Fixed height. Used for Lands.
|
|
3. **Action Logic:** Ensure drag-and-drop targeting and attacking/blocking selection still functions correctly within the new layout structure.
|
|
4. **Visuals:** Maintain the existing `perspective` and 3D transforms for card interaction (hover, attack state).
|