fix: Resolve React hooks violation, implement player waiting screen, and auto-start game upon deck submission.

This commit is contained in:
2025-12-14 22:41:26 +01:00
parent 9ff305f1ba
commit 65824a52d9
7 changed files with 190 additions and 53 deletions

View File

@@ -15,6 +15,8 @@ The project has successfully migrated from a .NET backend to a Node.js Modular M
- **[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)
- **[2025-12-14] Fix Submit Deck**: Implemented `player_ready` handler and state transition to auto-start game when deck is submitted. [Link](./devlog/2025-12-14-233000_fix_submit_deck.md)
- **[2025-12-14] Fix Hooks & Waiting State**: Resolved React hook violation crash and added proper waiting screen for ready players. [Link](./devlog/2025-12-14-234500_fix_hooks_and_waiting_state.md)
## Active Modules
1. **Cube Manager**: Fully functional (Parsing, Fetching, Pack Generation).

View File

@@ -0,0 +1,28 @@
# Fix Submit Deck Button
## Issue
Users reported that "Submit Deck" button was not working.
## Root Causes
1. **Missing Event Handler**: The server was not listening for the `player_ready` event emitted by the client.
2. **Incomplete Payload**: The client was sending `{ roomId, deck }` but the server needed `playerId` to identify who was ready, which was missing from the payload.
3. **Missing State Logic**: The `RoomManager` did not have a concept of "Ready" state or "Playing" status, meaning the transition from Deck Building to Game was not fully implemented.
## Fixes
1. **Client (`DeckBuilderView.tsx`)**: Updated `player_ready` emission to include `playerId`.
2. **Server (`RoomManager.ts`)**:
- Added `ready` and `deck` properties to `Player` interface.
- Added `playing` to `Room` status.
- Implemented `setPlayerReady` method.
3. **Server (`index.ts`)**:
- Implemented `player_ready` socket handler.
- Added logic to check if *all* active players are ready.
- If all ready, automatically transitions room status to `playing` and initializes the game using `GameManager`, loading the submitted decks.
- ensured deck loading uses cached images (`card.image`) if available.
## Verification
1. Draft cards.
2. Build deck.
3. Click "Submit Deck".
4. Server logs should show "All players ready...".
5. Client should automatically switch to `GameView` (Battlefield).

View File

@@ -0,0 +1,22 @@
# Fix Hooks Violation and Implement Waiting State
## Issue
1. **React Hook Error**: Users encountered "Rendered fewer hooks than expected" when the game started. This was caused by conditional returns in `GameRoom.tsx` appearing *before* hook declarations (`useState`, `useEffect`).
2. **UX Issue**: Players who submitted their decks remained in the Deck Builder view, able to modify their decks, instead of seeing a waiting screen.
## Fixes
1. **Refactored `GameRoom.tsx`**:
- Moved all `useState` and `useEffect` hooks to the top level of the component, ensuring they are always called regardless of the render logic.
- Encapsulated the view switching logic into a helper function `renderContent()`, which is called inside the main return statement.
2. **Implemented Waiting Screen**:
- Inside `renderContent`, checking if the room is in `deck_building` status AND if the current player has `ready: true`.
- If ready, displays a "Deck Submitted" screen with a list of other players and their readiness status.
- Updated the sidebar player list to show a "• Ready" indicator.
## Verification
1. Start a draft with multiple users (or simulate it).
2. Complete draft and enter deck building.
3. Submit deck as one player.
4. Verify that the view changes to "Deck Submitted" / Waiting screen.
5. Submit deck as the final player.
6. Verify that the game starts automatically for everyone without crashing (React Error).