services/mtg-online-drafter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement customizable vertical and horizontal deck builder layouts with a new layout switcher and associated rendering refactors.

Browse Source
This commit is contained in:
Daniele Viti
2025-12-17 17:03:41 +01:00
parent db785537c9
commit 845f83086f
3 changed files with 269 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/development/CENTRAL.md
View File

@@ -84,3 +84,4 @@
- [Gameplay Magnified View & Timeout](./devlog/2025-12-17-161500_gameplay_magnified_view_and_timeout.md): Completed. Added magnified view with full card details (Oracle text, type, mana) to gameplay and disabled timeout.
- [Test Deck Feature](./devlog/2025-12-17-162500_test_deck_feature.md): Completed. Implemented "Test Solo" button in Cube Manager to instantly start a solo game with a randomized deck from generated packs.
- [Update Deck Auto-Fill](./devlog/2025-12-17-165500_update_deck_autofill.md): Completed. Updated deck builder "Auto-Fill" to add lands as individual cards to the deck list for easier management.
- [Customizable Deck Builder Layout](./devlog/2025-12-17-170000_customizable_deck_builder.md): Completed. Implemented switchable Vertical (Side-by-Side) and Horizontal (Top-Bottom) layouts, with an integrated, improved Land Station.

55
docs/development/devlog/2025-12-17-170000_customizable_deck_builder.md Normal file
View File

@@ -0,0 +1,55 @@
# 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.