feat: Implement draft and game phases with client views, dedicated managers, and server-side card image caching.

docs/development/CENTRAL.md

@@ -11,6 +11,10 @@ The project has successfully migrated from a .NET backend to a Node.js Modular M
 -   **[2025-12-14] UI Tweak**: Auto-configured generation mode based on source selection. [Link](./devlog/2025-12-14-212000_ui_simplification.md)
 -   **[2025-12-14] Multiplayer Game Plan**: Plan for Real Game & Online Multiplayer. [Link](./devlog/2025-12-14-212500_multiplayer_game_plan.md)
 -   **[2025-12-14] Bug Fix**: Fixed `crypto.randomUUID` error for non-secure contexts. [Link](./devlog/2025-12-14-214400_fix_uuid_error.md)
+-   **[2025-12-14] Game Interactions**: Implemented basic game loop, zone management, and drag-and-drop gameplay. [Link](./devlog/2025-12-14-220000_game_interactions.md)
+-   **[2025-12-14] Draft & Deck Builder**: Implemented full draft simulation (Pick/Pass) and Deck Construction with land station. [Link](./devlog/2025-12-14-223000_draft_and_deckbuilder.md)
+-   **[2025-12-14] Image Caching**: Implemented server-side image caching to ensure reliable card rendering. [Link](./devlog/2025-12-14-224500_image_caching.md)
+-   **[2025-12-14] Fix Draft Images**: Fixed image loading in Draft UI by adding proxy configuration and correcting property access. [Link](./devlog/2025-12-14-230000_fix_draft_images.md)
 
 ## Active Modules
 1.  **Cube Manager**: Fully functional (Parsing, Fetching, Pack Generation).

docs/development/devlog/2025-12-14-220000_game_interactions.md

@@ -0,0 +1,31 @@
+# Game Interactions Implementation
+
+## Objective
+Implement basic player interactions for the MTG game, including library, battlefield, and other game mechanics.
+
+## Changes
+1.  **Backend (`src/server/managers/GameManager.ts`)**:
+    *   Created `GameManager` class to handle game state.
+    *   Defined `GameState`, `PlayerState`, `CardInstance` interfaces.
+    *   Implemented `createGame`, `handleAction` (move, tap, draw, life).
+    *   Integrated with `socket.io` handlers in `server/index.ts`.
+
+2.  **Frontend (`src/client/src/modules/game`)**:
+    *   Created `GameView.tsx`: Main game board with drag-and-drop zones (Hand, Battlefield, Library, Graveyard).
+    *   Created `CardComponent.tsx`: Draggable card UI with tap state.
+    *   Updated `GameRoom.tsx`: Added game state handling and "Start Game (Test)" functionality.
+
+3.  **Socket Service**:
+    *   Identify `start_game` and `game_action` events.
+    *   Listen for `game_update` to sync state.
+
+## Status
+-   Basic sandbox gameplay is operational.
+-   Players can move cards between zones freely (DnD).
+-   Tap/Untap and Life counters implemented.
+-   Test deck (Mountain/Bolt) provided for quick testing.
+
+## Next Steps
+-   Implement actual rules enforcement (Stack, Priority).
+-   Implement Deck Builder / Draft Integration (load actual drafted decks).
+-   Improve UI/UX (animations, better card layout).

docs/development/devlog/2025-12-14-223000_draft_and_deckbuilder.md

@@ -0,0 +1,41 @@
+# Draft & Deck Building Phase
+
+## Objective
+Implement the "Draft Phase" (Pack Passing) and "Deck Building Phase" (Pool + Lands) logic and UI, bridging the gap between Lobby and Game.
+
+## Changes
+1.  **Backend - Draft Logic (`src/server/managers/DraftManager.ts`)**:
+    *   Implemented `DraftManager` class.
+    *   Handles pack distribution (3 packs per player).
+    *   Implements `pickCard` logic with queue-based passing (Left-Right-Left).
+    *   Manages pack rounds (Wait for everyone to finish Pack 1 before opening Pack 2).
+    *   Transitions to `deck_building` status upon completion.
+
+2.  **Server Integration (`src/server/index.ts`)**:
+    *   Added handlers for `start_draft` and `pick_card`.
+    *   Broadcasts `draft_update` events.
+
+3.  **Frontend - Draft UI (`src/client/src/modules/draft/DraftView.tsx`)**:
+    *   Displays active booster pack.
+    *   Timer (visual only for now).
+    *   Click-to-pick interaction.
+    *   Preview of drafted pool.
+
+4.  **Frontend - Deck Builder UI (`src/client/src/modules/draft/DeckBuilderView.tsx`)**:
+    *   **Split View**: Card Pool vs. Current Deck.
+    *   **Drag/Click**: Click card to move between pool and deck.
+    *   **Land Station**: Add basic lands (Plains, Island, Swamp, Mountain, Forest) with unlimited supply.
+    *   **Submit**: Sends deck to server (via `player_ready` - *Note: Server integration for deck storage pending final game start logic*).
+
+5.  **Integration (`GameRoom.tsx`)**:
+    *   Added routing based on room status: `waiting` -> `drafting` -> `deck_building` -> `game`.
+    *   Added "Start Real Draft" button to lobby.
+
+## Status
+-   **Drafting**: Fully functional loop. Players pick cards, pass packs, and proceed through 3 rounds.
+-   **Deck Building**: UI is ready. Players can filter, build, and add lands.
+-   **Next**: Need to finalize the "All players ready" logic in `deck_building` to trigger the actual `start_game` using the submitted decks. Currently, submitting triggers a placeholder event.
+
+## To Verify
+-   Check passing direction (Left/Right).
+-   Verify Basic Land addition works correctly in the final deck object.

docs/development/devlog/2025-12-14-224500_image_caching.md

@@ -0,0 +1,37 @@
+# Image Caching Implementation
+
+## Objective
+Implement a robust image caching system that downloads card images to the server when creating a draft room, ensuring all players can see images reliably via local serving.
+
+## Changes
+1.  **Backend - Image Service (`src/server/services/CardService.ts`)**:
+    *   Created `CardService` class.
+    *   Implements `cacheImages` which downloads images from external URLs to `src/server/public/cards`.
+    *   Uses a concurrency limit (5) to avoid rate limiting.
+    *   Checks for existence before downloading to avoid redundant work.
+
+2.  **Backend - Server Setup (`src/server/index.ts`)**:
+    *   Enabled static file serving for `/cards` endpoint mapping to `src/server/public/cards`.
+    *   Added `POST /api/cards/cache` endpoint that accepts a list of cards and triggers cache logic.
+    *   Increased JSON body limit to 50mb to handle large set payloads.
+
+3.  **Frontend - Lobby Manager (`LobbyManager.tsx`)**:
+    *   Updated `handleCreateRoom` workflow.
+    *   **Pre-Creation**: Extracts all unique cards from generated packs.
+    *   **Cache Request**: Sends list to `/api/cards/cache`.
+    *   **Transformation**: Updates local pack data to point `image` property to the local server URL (`/cards/{scryfallId}.jpg`) instead of remote Scryfall URL.
+    *   This ensures that when `create_room` is emitted, the room state on the server (and thus all connected clients) contains valid local URLs.
+
+4.  **Fixes**:
+    *   Addressed `GameRoom.tsx` crash by replacing `require` with dynamic imports (or static if preloaded) and fixing clipboard access.
+    *   Fixed TS imports in server index.
+
+## Status
+-   **Image Caching**: Functional. Creating a room now triggers a download process on the terminal.
+-   **Local Serving**: Cards should now load instantly from the server for all peers.
+
+## How to Verify
+1.  Generate packs in Draft Management.
+2.  Create a Room. Watch server logs for "Cached image: ..." messages.
+3.  Join room.
+4.  Start Draft. Images should appear.

docs/development/devlog/2025-12-14-230000_fix_draft_images.md

@@ -0,0 +1,17 @@
+# Fix Draft Card Images
+
+## Issue
+Users reported that images were not showing in the Draft Card Selection UI.
+
+## Root Causes
+1.  **Missing Proxy**: The application was attempting to load cached images from `http://localhost:5173/cards/...`. Vite Dev Server (port 5173) was not configured to proxy these requests to the backend (port 3000), resulting in 404 errors for all local images.
+2.  **Incorrect Property Access**: `DraftView.tsx` (and `DeckBuilderView.tsx`) attempted to access `card.image_uris.normal`. However, the `DraftCard` object generated by `PackGeneratorService` and modified by `LobbyManager` stores the image URL in `card.image`. This property was being ignored.
+
+## Fixes
+1.  **Vite Config**: Added a proxy rule for `/cards` in `src/vite.config.ts` to forward requests to `http://localhost:3000`.
+2.  **Frontend Views**: Updated `DraftView.tsx` and `DeckBuilderView.tsx` to prioritize `card.image` when rendering card images.
+
+## Verification
+-   Start the draft.
+-   Images should now load correctly from the local cache (or fallback if configured).
+-   Inspect network tab to verify images are loaded from `/cards/...` with a 200 OK status.