feat: Implement manual game mode with 3D battlefield, custom context menu, and card actions including tokens and counters.
Some checks failed
Build and Deploy / build (push) Failing after 2m32s

This commit is contained in:
2025-12-14 23:53:41 +01:00
parent 6dc69dd22a
commit 2eea9b860e
8 changed files with 577 additions and 101 deletions

View File

@@ -1,29 +1,9 @@
# Development Central Log
# Development Status (Central)
## Status Overview
The project has successfully migrated from a .NET backend to a Node.js Modular Monolith. The core "Draft Preparation" and "Tournament Bracket" functionalities have been implemented in the frontend using React, adhering to the reference design.
## 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.
- [Game Context Menu & Immersion](./devlog/2025-12-14-235000_game_context_menu.md): Completed. Implemented custom right-click menus and game-feel enhancements.
## Recent Updates
- **[2025-12-14] Core Implementation**: Refactored `gemini-generated.js` into modular services and components. Implemented Cube Manager and Tournament Manager. [Link](./devlog/2025-12-14-194558_core_implementation.md)
- **[2025-12-14] Parser Robustness**: Improving `CardParserService` to handle formats without Scryfall IDs (e.g., Arena exports). [Link](./devlog/2025-12-14-210000_fix_parser_robustness.md)
- **[2025-12-14] Set Generation**: Implemented full set fetching and booster box generation (Completed). [Link](./devlog/2025-12-14-211000_set_based_generation.md)
- **[2025-12-14] Cleanup**: Removed Tournament Mode and simplified pack display as requested. [Link](./devlog/2025-12-14-211500_remove_tournament_mode.md)
- **[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)
- **[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)
- **[2025-12-14] Docker Containerization**: Created Dockerfile, fixed build errors, and verified monolithic build. [Link](./devlog/2025-12-14-235700_docker_containerization.md)
## Active Modules
1. **Cube Manager**: Fully functional (Parsing, Fetching, Pack Generation).
2. **Tournament Manager**: Basic Bracket generation implemented.
## Roadmap
1. **Backend Integration**: Connect frontend generation to backend via Socket.IO.
2. **Live Draft**: Implement the multiplayer drafting interface.
3. **User Session**: Handle host/player sessions.
## Recent Completions
- [Game Battlefield & Manual Mode](./devlog/2025-12-14-234500_game_battlefield_plan.md): Completed.
- [Helm Chart Config](./devlog/2025-12-14-214500_helm_config.md): Completed.

View File

@@ -0,0 +1,32 @@
# Game Battlefield & Manual Mode Implementation Plan
## Goal
Implement a 3D-style battlefield and manual game logic for the MTG Draft Maker. The system should allow players to drag and drop cards freely onto the battlefield, tap cards, and manage zones (Hand, Library, Graveyard, Exile) in a manual fashion typical of virtual tabletops.
## Status: Completed
## Implemented Features
- **3D Battlefield UI**:
- Used CSS `perspective: 1000px` and `rotateX` to create a depth effect.
- Cards are absolutely positioned on the battlefield based on percentage coordinates (0-100%).
- Shadows and gradients enhance the "tabletop" feel.
- **Manual Game Logic**:
- **Free Drag and Drop**: Players can move cards anywhere on the battlefield. Coordinates are calculated relative to the drop target.
- **Z-Index Management**: Backend tracks a `maxZ` counter. Every move or flip brings the card to the front (`z-index` increment).
- **Actions**:
- **Tap/Untap**: Click to toggle (rotate 90 degrees).
- **Flip**: Right-click to toggle face-up/face-down status.
- **Draw**: Click library to draw.
- **Life**: Buttons to increment/decrement life.
- **Multiplayer Synchronization**:
- All actions (`MOVE_CARD`, `TAP_CARD`, `FLIP_CARD`, `UPDATE_LIFE`) are broadcast via Socket.IO.
- Opponent's battlefield is rendered in a mirrored 3D perspective.
## Files Modified
- `src/client/src/modules/game/GameView.tsx`: Main UI logic.
- `src/client/src/modules/game/CardComponent.tsx`: Added context menu support.
- `src/server/managers/GameManager.ts`: Logic for actions and state management.
## Next Steps
- Test with real players to fine-tune the "feel" of dragging (maybe add grid snapping option later).
- Implement "Search Library" feature (currently just Draw).

View File

@@ -0,0 +1,39 @@
# Game Context Menu & Immersion Update Plan
## Goal
Implement a robust, video-game-style context menu for the battlefield and cards. This menu will allow players to perform advanced manual actions required for MTG, such as creating tokens and managing counters, while eliminating "browser-like" feel.
## Status: Completed
## Implemented Features
- **Custom Game Context Menu**:
- Replaces default browser context menu.
- Dark, video-game themed UI with glassmorphism.
- Animated entrance (fade/zoom).
- **Functionality**:
- **Global (Background)**:
- "Create Token" (Default 1/1, 2/2, Treasure).
- **Card Specific**:
- "Tap / Untap"
- "Flip Face Up / Down"
- "Add Counter" (Submenu: +1/+1, -1/-1, Loyalty)
- "Clone (Copy)" (Creates an exact token copy of the card)
- "Delete Object" (Removing tokens or cards)
- **Backend Logic**:
- `GameManager` now handles:
- `ADD_COUNTER`: Adds/removes counters logic.
- `CREATE_TOKEN`: Generates new token instances with specific stats/art.
- `DELETE_CARD`: Removes objects from the game.
- **Frontend Integration**:
- `GameView` manages menu state (position, target).
- `CardComponent` triggers menu only on itself, bubbling prevented.
- Hand cards also support right-click menus.
## Files Modified
- `src/client/src/modules/game/GameContextMenu.tsx`: New component.
- `src/client/src/modules/game/GameView.tsx`: Integrated menu.
- `src/server/managers/GameManager.ts`: Added token/counter handlers.
## Next Steps
- Add sounds for menu open/click.
- Add more token types or a token editor.

View File

@@ -0,0 +1,41 @@
# Enhancement Plan: True 3D Game Area
The goal is to transform the game area into a "really 3D game" experience using CSS 3D transforms.
## Objectives
1. **Immersive 3D Table**: Create a convincing 3D perspective of a table where cards are placed.
2. **Card Physics Simulation**: Visuals should simulate cards having weight, thickness, and position in 3D space.
3. **Dynamic Camera/View**: Fix the viewing angle to be consistent with a player sitting at a table.
## Implementation Steps
### 1. Scene Setup (GameView.tsx)
- Create a "Scene" container with high `perspective` (e.g., `1200px` to `2000px`).
- Create a "World" container that holds the table and other elements, allowing for global rotation if needed.
- Implement a "TableSurface" div that is rotated `rotateX(40-60deg)` to simulate a flat surface viewed from an angle.
### 2. Battlefield Enchancement
- The player's battlefield should be the bottom half of the table.
- The opponent's battlefield should be the top half.
- Use `transform-style: preserve-3d` extensively.
- Add a grid/mat texture to the table surface to enhance the depth perception.
### 3. Card 3D Component (CardComponent.tsx)
- Refactor `CardComponent` to use a 3D structure.
- Add a container for 3D positioning (`translate3d`).
- Add a visual "lift" when dragging or hovering (`translateZ`).
- Enhance the shadow to be on the "table" surface, separating from the card when lifting.
- *Implementation Note*: The shadow might need to be a separate element `after` the card or a separate div to stay on the table plane while the card lifts.
### 4. Lighting and Atmosphere
- Add a "Light Source" effect (radial gradient overlay).
- Adjust colors to be darker/moodier, fitting the "Dark Gaming UI" aesthetic.
## Tech Stack
- CSS via Tailwind + Inline Styles for dynamic coordinates.
- React for state/rendering.
## Execution Order
1. Refactor `GameView.tsx` layout to standard CSS 3D Scene structure.
2. Update `CardComponent.tsx` to handle 3D props (tilt, lift).
3. Fine-tune values for perspective and rotation.