From bf4078466755718413af790d7ea0c55e34648634 Mon Sep 17 00:00:00 2001 From: dnviti Date: Wed, 17 Dec 2025 18:58:17 +0100 Subject: [PATCH] feat: Implement vertical and horizontal layout selection for Draft View and update development documentation. --- docs/development/CENTRAL.md | 1 + .../2025-12-17-185000_draft_view_layout.md | 19 ++ src/client/src/modules/draft/DraftView.tsx | 190 ++++++++++++------ 3 files changed, 150 insertions(+), 60 deletions(-) create mode 100644 docs/development/devlog/2025-12-17-185000_draft_view_layout.md diff --git a/docs/development/CENTRAL.md b/docs/development/CENTRAL.md index 1d91ef3..01a39d7 100644 --- a/docs/development/CENTRAL.md +++ b/docs/development/CENTRAL.md @@ -88,3 +88,4 @@ - [2025-12-17-183500_draft_ui_upgrade](./devlog/2025-12-17-183500_draft_ui_upgrade.md): Completed. Implemented 3D flip preview and consistent foil rendering in Draft View. - [2025-12-17-184000_fix_draft_pool_ui](./devlog/2025-12-17-184000_fix_draft_pool_ui.md): Completed. Fixed "Your Pool" resizing bugs and removed unwanted hover animation. - [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. +- [Draft View Layout Selection](./devlog/2025-12-17-185000_draft_view_layout.md): Completed. Implemented Vertical/Horizontal layout selection for Draft View to match Deck Builder, optimizing screen space and preventing overlap. diff --git a/docs/development/devlog/2025-12-17-185000_draft_view_layout.md b/docs/development/devlog/2025-12-17-185000_draft_view_layout.md new file mode 100644 index 0000000..a42de22 --- /dev/null +++ b/docs/development/devlog/2025-12-17-185000_draft_view_layout.md @@ -0,0 +1,19 @@ +# 2025-12-17 Draft View Layout Implementation + +## Objective +Implement vertical and horizontal layout selection for the Draft View "Your Pool" section, similar to the Deck Builder. Ensure the pool section does not overlap with the card preview sidebar and shares the width with the active pack section in vertical mode. + +## Changes +1. **Modified `src/client/src/modules/draft/DraftView.tsx`**: + * Added `layout` state ('vertical' | 'horizontal'). + * Added layout toggle buttons (`Columns`, `LayoutTemplate` icons) to the header toolbar. + * Refactored the main content area to utilize a `flex` container that wraps both the Active Pack and the Pool sections. + * **Vertical Layout**: Renders Pack and Pool side-by-side (50/50 split) within the content area, ensuring `Pool` is to the right of the `ZoomSidebar` and does not overlap. + * **Horizontal Layout**: Retains the original "Pool at Bottom" behavior but moves the Pool section *inside* the content area flex container to respect the sidebar boundary. + * Updated `PoolCardItem` to support a vertical grid layout style when in vertical mode. + +## Verification +* **Layout Switching**: Confirmed logic for switching between vertical (row) and horizontal (column) flex directions. +* **Sidebar Overlap**: The Pool section is now a sibling of the Pack section and both are children of the container adjacent to the fixed-width Sidebar. Use of `flex-1 flex overflow-hidden` ensures proper containment. +* **Resizing**: Preserved resize functionality for the horizontal layout (pool height). +* **Visual Consistency**: Used similar styling and icons as the Deck Builder. diff --git a/src/client/src/modules/draft/DraftView.tsx b/src/client/src/modules/draft/DraftView.tsx index b0b59ce..0b4aab4 100644 --- a/src/client/src/modules/draft/DraftView.tsx +++ b/src/client/src/modules/draft/DraftView.tsx @@ -1,7 +1,7 @@ import React, { useState, useEffect } from 'react'; import { socketService } from '../../services/SocketService'; -import { LogOut } from 'lucide-react'; +import { LogOut, Columns, LayoutTemplate } from 'lucide-react'; import { Modal } from '../../components/Modal'; import { FoilOverlay } from '../../components/CardPreview'; import { useCardTouch } from '../../utils/interaction'; @@ -54,6 +54,7 @@ export const DraftView: React.FC = ({ draftState, currentPlayerI return saved ? parseFloat(saved) : 0.7; }); + const [layout, setLayout] = useState<'vertical' | 'horizontal'>('horizontal'); const [isResizing, setIsResizing] = useState(false); // Persist settings @@ -128,6 +129,24 @@ export const DraftView: React.FC = ({ draftState, currentPlayerI Pick {pickedCards.length % 15 + 1} + {/* Layout Switcher */} +
+ + +
+ {/* Card Scalar */}
@@ -225,70 +244,121 @@ export const DraftView: React.FC = ({ draftState, currentPlayerI
- {/* Main Area: Current Pack OR Waiting State */} -
- {!activePack ? ( -
-
-
-
-
- {/* Just a placeholder icon or similar */} + {/* Main Content Area: Handles both Pack and Pool based on layout */} + {layout === 'vertical' ? ( +
+ {/* Left: Pack */} +
+ {!activePack ? ( +
+
+
+
+
+ +
+
+

Waiting...

+

Your neighbor is picking.

+
+ ) : ( +
+

Select a Card

+
+ {activePack.cards.map((rawCard: any) => ( + + ))} +
+
+ )} +
+ + {/* Right: Pool (Vertical Column) */} +
+
+

+ + Your Pool ({pickedCards.length}) +

+
+
+
+ {pickedCards.map((card: any, idx: number) => ( + + ))}
-

Waiting for next pack...

-

Your neighbor is selecting a card.

-
-
-
-
-
- ) : ( -
-

Select a Card

-
- {activePack.cards.map((rawCard: any) => ( - +
+ ) : ( +
+ {/* Top: Pack */} +
+ {!activePack ? ( +
+
+
+
+
+ +
+
+

Waiting...

+

Your neighbor is picking.

+
+ ) : ( +
+

Select a Card

+
+ {activePack.cards.map((rawCard: any) => ( + + ))} +
+
+ )} +
+ + {/* Resize Handle */} +
+
+
+ + {/* Bottom: Pool (Horizontal Strip) */} +
+
+

+ + Your Pool ({pickedCards.length}) +

+
+
+ {pickedCards.map((card: any, idx: number) => ( + ))}
- )} -
+
+ )}
- - {/* Resize Handle */} -
-
-
- - {/* Bottom Area: Drafted Pool Preview */} -
-
-

- - Your Pool ({pickedCards.length}) -

-
-
- {pickedCards.map((card: any, idx: number) => ( - - ))} -
-
setConfirmExitOpen(false)} @@ -335,12 +405,12 @@ const DraftCardItem = ({ rawCard, cardScale, handlePick, setHoveredCard }: any) ); }; -const PoolCardItem = ({ card, setHoveredCard }: any) => { +const PoolCardItem = ({ card, setHoveredCard, vertical = false }: any) => { const { onTouchStart, onTouchEnd, onTouchMove, onClick } = useCardTouch(setHoveredCard, () => { }, card); return (
setHoveredCard(card)} onMouseLeave={() => setHoveredCard(null)} onTouchStart={onTouchStart} @@ -351,7 +421,7 @@ const PoolCardItem = ({ card, setHoveredCard }: any) => { {card.name}
)