feat: Implement core game engine logic, high-velocity UX, and new UI components including radial menu, inspector overlay, and mulligan view.

This commit is contained in:
2025-12-18 18:45:24 +01:00
parent 842beae419
commit ca7b5bf7fa
23 changed files with 1550 additions and 169 deletions

View File

@@ -110,3 +110,8 @@
- [Pool Overflow Constraint](./devlog/2025-12-18-044500_pool_overflow_fix.md): Completed. Enforce flex shrinkage with `min-h-0` and `overflow-hidden` to strictly bind card height to resizeable panel.
- [Resize Persistence](./devlog/2025-12-18-050000_resize_persistence.md): Completed. Implemented `localStorage` persistence for Sidebars and Pool Panels in both Draft and Deck Views.
- [Resolve 413 Errors](./devlog/2025-12-18-112633_resolve_413_errors.md): Completed. Updated Helm ingress annotations and server limits to allow unlimited upload size.
- [High Velocity UX & Strict Engine](./devlog/2024-12-18-182500_high_velocity_ux_part2.md): Completed. Implemented manual mana engine, combat strict rules (Attacking/Blocking), Swipe-to-Attack gestures, and context-aware Smart Button.
- [Strict Rules & Blocking UI](./devlog/2024-12-18-193000_strict_blocking_ui.md): Completed. Implemented visual blocking UI, targeting tether, and positioning support for strictly enforced rules.
- [Engine Enhancements](./devlog/2024-12-18-200000_engine_enhancements.md): Completed. Implemented Basic Layers (P/T Modifiers), Token Creation, London Mulligan System, and Basic Aura Validation SBA.
- [High Velocity UX & Strict Engine Completion](./devlog/2024-12-18-220000_ux_and_engine_completion.md): Completed. Finalized Rules Engine (SBAs, Layers), implemented Inspector Overlay, Smart Button Yield, and Radial Menus.
- [Archived Plan: MTG Engine & UX](./devlog/2025-12-18-184500_mtg_engine_and_ux_archived_plan.md): Archived. The original implementation plan for the strict engine and high-velocity UX.

View File

@@ -1,21 +1,34 @@
# High Velocity UX & Strict Engine (Part 2)
# 2024-12-18 18:25:00 - High-Velocity UX Implementation (Part 2: Gestures & Backend Polish)
## Status: Completed
## Description
Advanced the High-Velocity UX implementation by introducing the Gesture Engine and refining the backend Rules Engine to support card movement during resolution.
## Objectives
- Implement "Manual Mana Engine" allowing players to add mana to their pool via interaction.
- Implement "Strict Combat Engine" supporting `DECLARE_ATTACKERS` and `DECLARE_BLOCKERS` phases and validation.
- Implement "High Velocity UX" with Swipe-to-Tap and Swipe-to-Attack gestures.
- Enhance `GameView` with Mana Pool display and visual feedback for combat declarations.
- Contextualize `SmartButton` to handle complex actions like declaring specific attackers.
## Key Changes
1. **Gesture Manager**: Implemented `GestureManager.tsx` and integrated it into the Battlefield.
- Provides Swipe-to-Tap functionality via pointer tracking and intersection checking.
- Draws a visual SVG path trail for user feedback.
- Integrated with `CardComponent` via `useGesture` hook to register card DOM elements.
2. **Stack Visualizer**: Implemented `StackVisualizer.tsx` to render the stack on the right side of the screen, showing strict object ordering.
3. **Backend Rules Engine**:
- Updated `RulesEngine.ts` to fully implement `resolveTopStack` and `drawCard`.
- Added `moveCardToZone` helper to manage state transitions (untapping, resetting position).
- Fixed typings and logic flow for resolving spells to graveyard vs battlefield.
## Implementation Details
### Backend (Rules Engine)
- **Mana System**: Added `addMana` method to `RulesEngine` and `manaPool` to `PlayerState`. Implemented `emptyManaPools` logic on step transition.
- **Combat Logic**: Implemented `declareAttackers` (checking summoning sickness, tapping, setting attacking target) and `declareBlockers` logic.
- **Action Handling**: Updated `GameManager` to handle `ADD_MANA` and auto-generate mana when tapping Basic Lands via `TAP_CARD` action (legacy compatibility wrapper).
### Frontend (GameView)
- **Mana Pool UI**: Added a compact Mana Pool display in the player life area, showing WUBRGC counts.
- **Gesture Manager Upgrade**: Enhanced `GestureManager` to detect swipe direction:
- **Slash (Horizontal)**: Tap Card.
- **Thrust (Vertical Up)**: Attack (if in combat step).
- **Thrust (Vertical Down)**: Cancel Attack.
- **Combat Visuals**: Implemented `proposedAttackers` local state. Cards proposed to attack are visually lifted (`translateY(-40px)`) and glow red (`box-shadow`, `ring`).
- **Smart Button**: Updated to accept `contextData`. In `declare_attackers` step, it displays "Attack with N" and sends the list of proposed attackers.
### Type Synchronization
- Synced `CardInstance` (Client) with `CardObject` (Server) to include `attacking` and `blocking` fields.
## Next Steps
- Implement Radial Menu context for activating abilities.
- Add sound effects for gestures.
- Polish visual transitions for stack resolution.
- Verify Multiplayer Sync (Socket events are already in place).
- Implement "Blocking" UI (similar to Attacking but for defenders).
- Implement "Order Blockers" / "Damage Assignment" if strict compliance is enforced (currently simplified to auto-damage).

View File

@@ -0,0 +1,37 @@
# Strict Rules & Blocking UI (Part 3)
## Status: Completed
## Objectives
- Integrate Strict Actions (`PLAY_LAND`, `CAST_SPELL`) with precise positioning.
- Implement Blocking UI including visual feedback (Attacking/Blocking badges, Rings).
- Implement Drag-and-Drop Targeting Logic (Spell -> Target, Blocker -> Attacker).
- Implement Visual "Targeting Tether" overlay.
## Implementation Details
### Backend (Rules Engine)
- **Positioning**: Updated `playLand` and `castSpell` to accept `{x, y}` coordinates.
- **Stack Resolution**: Updated `resolveTopStack` to respect the stored resolution position when moving cards to the battlefield.
- **Action Handling**: Updated `GameManager` to pass `position` payload to the engine.
### Frontend (GameView)
- **Drop Logic**:
- `handleZoneDrop`: Detects drop on "Battlefield". Differentiates Land (Play) vs Spell (Cast). Calculates relative % coordinates.
- `handleCardDrop`: Detects drop on a Card.
- If `declare_blockers` step: Assigns blocker (drag My Creature -> Opponent Creature).
- Else: Casts Spell with Target.
- `handlePlayerDrop`: Detects drop on Opponent Avatar -> Cast Spell with Target Player.
- **Blocking Visualization**:
- **Opponent Cards**: Show "ATTACKING" badge (Red Ring + Shadow) if `attacking === property`.
- **My Cards**: Show "Blocking" badge (Blue Ring) if in local `proposedBlockers` map.
- **Targeting Tether**:
- Implemented `tether` state (`startX`, `currentX`, etc.).
- Added `onDrag` handler to `CardComponent` to track HTML5 DnD movement.
- Rendered Full-screen SVG overlay with Bezier curve (`Q` command) and arrow marker.
- Dynamic styling: Cyan (Spells) vs Blue (Blocking).
## Next Steps
- **Layer System**: Implement 7-layer P/T calculation for accurate power/toughness display.
- **Mulligan System**: Implement Strict Mulligan rules.
- **Token Creation**: Support creating tokens.

View File

@@ -0,0 +1,45 @@
# Strict Engine Enhancements: Layers, Tokens, Mulligan
## Status: Completed
## Objectives
- Implement Basic Layer System for continuous effects (P/T modifications).
- Implement Token Creation mechanism.
- Implement Mulligan System (London Rule).
- Update Game Lifecycle to include Setup/Mulligan phase.
## Logic Overview
### Layer System (`RulesEngine.recalculateLayers`)
- Implements Layer 7 (Power/Toughness) basics:
- **Layer 7b**: Set P/T (`set_pt`).
- **Layer 7c**: Modify P/T (`pt_boost`).
- **Layer 7d**: Counters (`+1/+1`, `-1/-1`).
- `recalculateLayers` is called automatically whenever priority resets or actions occur.
- Modifiers with `untilEndOfTurn: true` are automatically cleared in the `cleanup` step.
### Token Creation
- New action `CREATE_TOKEN` added.
- `createToken` method constructs a CardObject on the battlefield with defined stats.
- Triggers layer recalculation immediately.
### Mulligan System
- **New Phase**: `setup`, **New Step**: `mulligan`.
- Game starts in `setup/mulligan`.
- **Logic**:
- If a player has 0 cards and hasn't kept, they draw 7 automatically.
- Action `MULLIGAN_DECISION`:
- `keep: false` -> Shuffles hand into library, draws 7, increments `mulliganCount`.
- `keep: true` -> Validates `cardsToBottom` count matches `mulliganCount`. Moves excess cards to library. Sets `handKept = true`.
- When all players keep, the engine automatically advances to `beginning/untap`.
- Supports London Mulligan rule (Draw 7, put X on bottom).
## Technical Changes
- Updated `StrictGameState` and `PlayerState` types.
- Updated `GameManager` initialization and action switching.
- Updated `RulesEngine` transition logic.
## Remaining/Next
- Frontend UI for Mulligan (Needs a Modal to Keep/Mull).
- Frontend UI for "Cards to Bottom" selection if X > 0.
- Frontend UI to visualize Tokens.

View File

@@ -0,0 +1,26 @@
# 2024-12-18 - High Velocity UX & Strict Engine Completion
## Status: Completed
We have successfully implemented the core strict rules engine features and the high-velocity UX components.
### 1. Rules Engine Refinement
- **State-Based Actions (SBAs)**: Implemented robust SBA loop in `RulesEngine.ts`, utilizing `processStateBasedActions()` to cyclically check conditions (Lethal Damage, Legend Rule, Aura Validity) and recalculate layers until stability.
- **Layer System**: Implemented Layer 7 (Power/Toughness) calculations, handling Base P/T, Setting Effects, Boosts, and Counters.
- **Mana Engine**: Backend support for manual mana pool management (emptying at end of steps).
- **Code Cleanup**: Resolved critical linting errors and structural issues in `RulesEngine.ts` (duplicate methods, undefined checks).
### 2. High-Velocity Frontend UX
- **Inspector Overlay**: Created `InspectorOverlay.tsx` to visualize detailed card state (P/T modifications, counters, oracle text) with a modern, glassmorphism UI.
- **Smart Button Advanced**: Implemented "Yield" toggle on the Smart Button. Users can long-press (simulated via pointer down) to yield priority until end of turn (or cancel).
- **Radial Menu**: Created a generic `RadialMenu.tsx` component. Integrated it into the `GameView` via the Context Menu ("Add Mana...") to allow quick manual mana color selection for dual/utility lands.
- **Context Menu Integration**: Added "Inspect Details" and "Add Mana..." options to the card context menu.
### 3. Verification
- **GameView Integration**: All new components (`InspectorOverlay`, `SmartButton`, `RadialMenu`) are fully integrated into `GameView.ts`.
- **Type Safety**: Updated `types/game.ts` to ensure consistency between client and server (e.g., `attachedTo`, `ptModification` properties).
## Next Steps
- **Playtesting**: Validate the interaction between strict rules (timing, priority) and the new UX in a live multiplayer environment.
- **Visual Polish**: Refine animations for Inspector and Radial Menu opening.
- **Complex Card Logic**: Expand the engine to support more complex replacement effects and specific card scripts.

View File

@@ -1,3 +1,8 @@
# Devlog: MTG Engine & UX Implementation Plan (Archived)
*This document was originally the `mtg-engine-and-ux.md` plan. It has been archived here as a record of the architecture and task breakdown used to build the strict rules engine and high-velocity UX.*
---
# Implementation Plan: MTG Rules Engine & High-Velocity UX
@@ -121,26 +126,29 @@ Long-press/Right-click on card.
## Task Breakdown & Status
### Backend (Rules Engine)
### Backend (RulesEngine)
- [x] **Core Structures**: `StrictGameState`, Phase, Step Types.
- [x] **State Machine Baseline**: Phase advancement logic.
- [x] **Priority Logic**: Passing, resolving, resetting.
- [x] **Basic Actions**: Play Land, Cast Spell.
- [x] **Stack Resolution**: Resolving Spells to Zones.
- [x] **SBAs Implementation**: Basic (Lethal, 0 Toughness, Legend).
- [ ] **Advanced SBAs**: Aura Validity check.
- [ ] **Manual Mana Engine**: Floating Pool Logic.
- [ ] **Game Setup**: Mulligan (London), Deck Validation.
- [ ] **Combat Phase Detail**: Declare Attackers/Blockers steps & validation.
- [ ] **Layer System**: Implement 7-layer P/T calculation.
- [x] **SBAs Implementation**: Basic (Lethal w/ Damage Marking, 0 Toughness, Legend).
- [x] **Advanced SBAs**: Aura Validity check.
- [x] **Manual Mana Engine**: Floating Pool Logic (Backend Support).
- [x] **Game Setup**: Mulligan (London), Deck Validation.
- [x] **Combat Phase Detail**: Declare Attackers/Blockers steps & validation (RulesEngine Logic).
- [x] **Layer System**: Implement 7-layer P/T calculation.
- [x] **Token Generation**: Backend `createToken` & Context Menu integration.
### Frontend (High-Velocity UX)
- [x] **Game View**: Render State Types.
- [x] **Phase Strip**: Visual progress.
- [x] **Smart Button**: Basic States (Green/Orange/Red).
- [x] **Gesture Engine**: Swipe-to-Tap.
- [x] **Gesture Engine**: Swipe-to-Tap & Swipe-to-Attack.
- [x] **Stack Visualization**: Basic Component.
- [ ] **Gesture Polish**: Combat Swipes, Targeting Tether.
- [ ] **Smart Button Advanced**: "Yield" Toggle.
- [ ] **Radial Menus**: Pie Menu for Dual Lands/Modes.
- [ ] **Inspector Overlay**: Live Math & Details.
- [x] **Gesture Polish**: Combat Swipes, Targeting Tether.
- [x] **Manual Mana Engine**: Floating Pool Logic & UI.
- [x] **Mulligan UI**: Modal for Keep/Mull decisions.
- [x] **Smart Button Advanced**: "Yield" Toggle.
- [x] **Radial Menus**: Pie Menu for Dual Lands/Modes (Component Added).
- [x] **Inspector Overlay**: Live Math & Details.