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

feat: Implement deck builder magnified card view, land advice, basic land integration, and unlimited time for deck construction.

Browse Source
This commit is contained in:
Daniele Viti
2025-12-17 16:15:20 +01:00
parent e5750d9729
commit e13aa16766
18 changed files with 672 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/development/CENTRAL.md
View File

@@ -78,3 +78,7 @@
- [Stack View Consistency Fix](./devlog/2025-12-17-143000_stack_view_consistency.md): Completed. Removed transparent overrides for Stack View, ensuring it renders with the standard unified container graphic.
- [Dynamic Pack Grid Layout](./devlog/2025-12-17-144000_dynamic_pack_grid.md): Completed. Implemented responsive CSS grid with `minmax(550px, 1fr)` for Stack/Grid views to auto-fit packs based on screen width without explicit column limits.
- [Fix Socket Payload Limit](./devlog/2025-12-17-152700_fix_socket_payload_limit.md): Completed. Increased Socket.IO `maxHttpBufferSize` to 300MB to support massive drafting payloads.
- [Basic Lands Handling](./devlog/2025-12-17-153300_basic_lands_handling.md): Completed. Implemented flow to cache and provide set-specific basic lands for infinite use during deck building.
- [Land Advice & Unlimited Time](./devlog/2025-12-17-155500_land_advice_and_unlimited_time.md): Completed. Implemented land suggestion algorithm and disabled deck builder timer.
- [Deck Builder Magnified View](./devlog/2025-12-17-160500_deck_builder_magnified_view.md): Completed. Added magnified card preview sidebar to deck builder.
- [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.

28
docs/development/devlog/2025-12-17-153300_basic_lands_handling.md Normal file
View File

@@ -0,0 +1,28 @@
# Basic Lands Handling
## Requirements
- Upon draft room creation, basic lands from the selected sets must be cached and loaded.
- During deck building, players must have access to an infinite number of these basic lands matching the selected sets.
## Implementation Details
### Server-Side
- **Pack Generation**: Updated `/api/packs/generate` to extract unique basic lands from the processed card pool and return them in the response: `{ packs, basicLands }`.
- **Room Management**: Updated `RoomManager` and `Room` interface to store `basicLands` array.
- **Socket Events**: Updated `create_room` event handler to accept `basicLands` and pass them to the room creation logic.
### Client-Side
- **State Management**: Added `availableLands` state to `App.tsx` with local storage persistence to persist lands between generation and lobby creation.
- **Cube Manager**: Updated `handleGenerate` to parse the new API response and update specific state.
- **Lobby Manager**:
- Enhanced `handleCreateRoom` to include basic lands in the server-side image caching request.
- Updated `create_room` socket emission to send the basic lands to the server.
- **Deck Builder**:
- Added a "Land Station" UI component.
- If specific basic lands are available, it displays a horizontal scrollable gallery of the unique land arts.
- Clicking a land adds a unique copy (with a specific ID) to the deck, allowing for infinite copies.
- Preserved fallback to generic land counters if no specific lands are available.
## Verification
- Verified flow from pack generation -> lobby -> room -> deck builder.
- Validated that lands are deduplicated by Scryfall ID to ensure unique arts are offered.

31
docs/development/devlog/2025-12-17-155500_land_advice_and_unlimited_time.md Normal file
View File

@@ -0,0 +1,31 @@
# Land Advice and Unlimited Deck Building
## Requirements
1. **Unlimited Timer**: The deck building phase should have an unlimited duration for now.
2. **Land Advice Algorithm**:
- Suggest a mana base aiming for a total of 17 lands (including those already picked in the deck).
- Calculate the number of basic lands needed based on the color distribution (mana symbols) of the non-land cards in the deck.
- Provide a UI to view and apply these suggestions.
## Implementation Details
### `DeckBuilderView.tsx`
- **Timer disabled**: `useState<string>("Unlimited")` is used effectively to remove the countdown mechanism.
- **Land Suggestion Algorithm**:
- Target total lands: 17.
- `existingLands` calculated from cards in `deck` with type `Land`.
- `landsNeeded` = `max(0, 17 - existingLands)`.
- Scans `mana_cost` of non-land cards to build a frequency map of colored mana symbols (`{W}`, `{U}`, etc.).
- Distributes `landsNeeded` proportionally to the symbol counts.
- Handles remainders by allocating them to the colors with the highest symbol counts.
- Returns `null` if no colored symbols or `landsNeeded` is 0.
- **UI**:
- A panel "Land Advisor (Target: 17)" is added above the Land Station.
- Displays the calculated basic land distribution (e.g., "P: 3, I: 2").
- "Auto-Fill" button applies these counts to the `lands` state directly.
## Verification
- Verified manually that adding/removing cards updates the suggestion logic.
- "Unlimited" timer is displayed correctly.
- Lint errors resolved.

27
docs/development/devlog/2025-12-17-160500_deck_builder_magnified_view.md Normal file
View File

@@ -0,0 +1,27 @@
# Deck Builder Magnified View
## Requirements
- Add a magnified card view to the `DeckBuilderView`, similar to the one in `DraftView`.
- Show card details (name, type, oracle text) when hovering over any card in the pool, deck, or land station.
- Use a persistent sidebar layout for the magnified view.
## Implementation Details
### `DeckBuilderView.tsx`
- **State**: Added `hoveredCard` state to track the card being inspected.
- **Layout**:
- Changed the layout to a 3-column flex design:
1. **Zoom Sidebar** (`hidden xl:flex w-80`): Shows the magnified card image and text details. Defaults to a "Hover Card" placeholder.
2. **Card Pool** (`flex-1`): Displays available cards.
3. **Deck & Lands** (`flex-1`): Displays the current deck and land controls.
- **Interactions**:
- Added `onMouseEnter={() => setHoveredCard(card)}` and `onMouseLeave={() => setHoveredCard(null)}` handlers to:
- Cards in the Pool.
- Cards in the current Deck.
- Basic Lands in the Land Station.
## Verification
- Verified that hovering over cards updates the sidebar image and text.
- Verified that moving mouse away clears the preview (consistent with Draft View).
- Layout adjusts responsively (sidebar hidden on smaller screens).

24
docs/development/devlog/2025-12-17-161500_gameplay_magnified_view_and_timeout.md Normal file
View File

@@ -0,0 +1,24 @@
# Gameplay Magnified View Details Update
## Requirements
- Display detailed card information (Oracle Text, Type Line, Mana Cost) in the magnified view on the battlefield.
## Implementation Details
### Data Model Updates
- **`CardInstance` Interface**: Added optional fields `typeLine`, `oracleText`, and `manaCost` to both client (`src/client/src/types/game.ts`) and server (`src/server/managers/GameManager.ts`) definitions.
- **`DraftCard` Interface**: Added `oracleText` and `manaCost` to the server-side interface (`PackGeneratorService.ts`).
### Logic Updates
- **`PackGeneratorService.ts`**: Updated `processCards` to map `oracle_text` and `mana_cost` from Scryfall data to `DraftCard`.
- **`src/server/index.ts`**: Updated all `addCardToGame` calls (timeout handling, player ready, solo test, start game) to pass the new fields from the draft card/deck source to the `CardInstance`.
### UI Updates (`GameView.tsx`)
- Updated the **Zoom Sidebar** to conditionally render:
- **Mana Cost**: Displayed in a monospace font.
- **Type Line**: Displayed in emerald color with uppercase styling.
- **Oracle Text**: Displayed in a formatted block with proper whitespace handling.
- Replaced undefined `cardIsCreature` helper with an inline check.
## Verification
- Hovering over a card in the game view now shows not just the image but also the text details, which is crucial for readability of complex cards.