diff --git a/docs/development/CENTRAL.md b/docs/development/CENTRAL.md index bec3d7c..997c8ec 100644 --- a/docs/development/CENTRAL.md +++ b/docs/development/CENTRAL.md @@ -2,6 +2,7 @@ ## Active Plans - [Enhance 3D Game View](./devlog/2025-12-14-235500_enhance_3d_game_view.md): Active. Transforming the battlefield into a fully immersive 3D environment. +- [Deck Tester Feature](./devlog/2025-12-15-002500_deck_tester_feature.md): Completed. Implemented a dedicated view to parse custom decks and instantly launch the 3D game sandbox. - [Game Context Menu & Immersion](./devlog/2025-12-14-235000_game_context_menu.md): Completed. Implemented custom right-click menus and game-feel enhancements. ## Recent Completions diff --git a/docs/development/devlog/2025-12-15-002500_deck_tester_feature.md b/docs/development/devlog/2025-12-15-002500_deck_tester_feature.md new file mode 100644 index 0000000..b2c7add --- /dev/null +++ b/docs/development/devlog/2025-12-15-002500_deck_tester_feature.md @@ -0,0 +1,32 @@ +# Deck Tester Feature Implementation + +## Objective +Create a way to add a cards list to generate a deck and directly enter the game ui to test the imported deck, using the same exact game and battlefield of the draft. + +## Implementation Details + +### Frontend +1. **DeckTester Component (`src/client/src/modules/tester/DeckTester.tsx`)**: + - Created a new component that allows users to input a deck list (text area or file upload). + - Reused `CardParserService` and `ScryfallService` to parse the list and fetch card data. + - Implemented image caching logic (sending to `/api/cards/cache`). + - Connects to socket and emits `start_solo_test`. + - Upon success, switches view to `GameRoom` with the received `room` and `game` state. + +2. **App Integration (`src/client/src/App.tsx`)**: + - Added a new "Deck Tester" tab to the main navigation. + - Uses the `Play` icon from lucide-react. + +3. **GameRoom Enhancement (`src/client/src/modules/lobby/GameRoom.tsx`)**: + - Added `initialGameState` prop to allow initializing the `GameView` immediately without waiting for a socket update (handling potential race conditions or state sync delays). + +### Backend +1. **Socket Event (`src/server/index.ts`)**: + - Added `start_solo_test` event handler. + - Creates a room with status `playing`. + - Initializes a game instance. + - Adds cards from the provided deck list to the game (library zone). + - Emits `room_update` and `game_update` to the client. + +## Outcome +The user can now navigate to "Deck Tester", paste a deck list, and immediately enter the 3D Game View to test interactions on the battlefield. This reuses the entire Draft Game infrastructure, ensuring consistency. diff --git a/src/client/src/App.tsx b/src/client/src/App.tsx index 96d4cf9..c311100 100644 --- a/src/client/src/App.tsx +++ b/src/client/src/App.tsx @@ -1,12 +1,13 @@ import React, { useState } from 'react'; -import { Layers, Box, Trophy, Users } from 'lucide-react'; +import { Layers, Box, Trophy, Users, Play } from 'lucide-react'; import { CubeManager } from './modules/cube/CubeManager'; import { TournamentManager } from './modules/tournament/TournamentManager'; import { LobbyManager } from './modules/lobby/LobbyManager'; +import { DeckTester } from './modules/tester/DeckTester'; import { Pack } from './services/PackGeneratorService'; export const App: React.FC = () => { - const [activeTab, setActiveTab] = useState<'draft' | 'bracket' | 'lobby'>('draft'); + const [activeTab, setActiveTab] = useState<'draft' | 'bracket' | 'lobby' | 'tester'>('draft'); const [generatedPacks, setGeneratedPacks] = useState([]); return ( @@ -34,6 +35,12 @@ export const App: React.FC = () => { > Online Lobby +