56 lines
2.1 KiB
Markdown
56 lines
2.1 KiB
Markdown
# Customizable Deck Builder Layout
|
|
|
|
## Request
|
|
The user wants to customize the Deck Builder interface with the following features:
|
|
1. **Layout Modes**:
|
|
* **Vertical View (Default)**: The current 3-column layout ([Zoom] | [Pool] | [Deck + Lands]).
|
|
* **Horizontal View**: A new layout where Pool is above the Deck. Land Station should be to the left of the Card Pool in this mode.
|
|
2. **Land Station Updates**:
|
|
* Remove "(Unlimited)" text.
|
|
* Increase container height.
|
|
* Integrate proper Land Advisor into the Land Station container to save space.
|
|
|
|
## Design
|
|
### New Layout State
|
|
- State: `layout: 'vertical' | 'horizontal'`
|
|
- Toggle: A button group or switch to change layouts.
|
|
|
|
### Component Structure
|
|
I will extract the core sections into render functions or variables to move them around easily.
|
|
- `renderZoomSidebar()`
|
|
- `renderPool()`
|
|
- `renderDeck()`
|
|
- `renderLandStation()` (This will now include the Land Advisor inside it)
|
|
|
|
### Horizontal Layout Grid
|
|
Structure:
|
|
```
|
|
[Zoom Sidebar (Fixed Left)] | [Main Content (Flex Column)]
|
|
|
|
|
|-- [Top Row (Flex Row)]
|
|
| |-- [Land Station (width fixed or flex)]
|
|
| |-- [Pool (Flex 1)]
|
|
|
|
|
|-- [Bottom Row (Flex 1)]
|
|
|-- [Deck]
|
|
```
|
|
|
|
### Vertical Layout Grid (Current)
|
|
Structure:
|
|
```
|
|
[Zoom Sidebar] | [Pool] | [Deck + Land Station]
|
|
```
|
|
*Note: In current layout, Land Station is stacked vertically with Deck in the 3rd column. User is fine with "exactly how is it now" for vertical.*
|
|
|
|
### Land Station Refactoring
|
|
- Combine `Advice Panel` and `Land Station` div.
|
|
- Remove `(Unlimited)`.
|
|
- Increase height (e.g., `h-64` or `min-h-[200px]`).
|
|
|
|
## Implementation Steps
|
|
1. Read `DeckBuilderView.tsx` (already read).
|
|
2. Refactor to extract render helper functions for clear modularity.
|
|
3. Add `layout` state and toggle UI.
|
|
4. Implement CSS grids/flex layouts for both modes.
|
|
5. Modify Land Station to include Advisor and styling updates.
|