Customizable Deck Builder Layout

Request

The user wants to customize the Deck Builder interface with the following features:

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.
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

Read DeckBuilderView.tsx (already read).
Refactor to extract render helper functions for clear modularity.
Add layout state and toggle UI.
Implement CSS grids/flex layouts for both modes.
Modify Land Station to include Advisor and styling updates.

2.1 KiB Raw Blame History