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:
@@ -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.
|
||||
|
||||
@@ -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).
|
||||
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
Reference in New Issue
Block a user