Commit Graph

86 Commits

Author SHA1 Message Date
tiennm99 12e66bd2da chore: reset 2026-03-11 22:35:40 +07:00
tiennm99 1fad9a89a9 Archive v1.0 planning; finalize MVP docs
Archive and finalize v1.0 milestone and planning artifacts: add MILESTONES.md, milestone archives (v1.0-ROADMAP.md, v1.0-REQUIREMENTS.md), verification and phase artifacts, and update phase/roadmap/project state to mark v1.0 MVP as shipped. Tidy PROJECT and ROADMAP to reflect shipped features and next steps, remove the old REQUIREMENTS.md (moved to milestone archive), and update STATE.md to show milestone completion. Minor code change: expose GridManager.events as public readonly to allow external subscribers. Package metadata: normalize keywords formatting and add an optional dependency entry in package.json for rollup native binary support.
2026-03-11 21:54:55 +07:00
tiennm99 41961894c6 fix(06): connect GridManager events to Game match handler
Bug: Game was listening on its own events emitter for 'tilesSelected'
but GridManager emits on its own events emitter.
Fix: Changed listener from this.events to this.gridManager.events


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 14:18:03 +00:00
tiennm99 51567454de docs(06-04): complete responsive canvas scaling plan
- Enhanced setupCanvas() with viewport-based scaling
- Scale down only, never scales up
- CSS transform for display scaling (preserves coordinates
- Added comprehensive test coverage for responsive scaling behavior


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 14:01:16 +00:00
tiennm99 4509abc2c0 docs(06-04): complete responsive canvas scaling plan
- Enhanced setupCanvas() with viewport-based scaling
- Scale down only on scales to fit viewport on mobile devices
- CSS transform for display scaling (preserves coordinate mapping
- Added comprehensive test coverage for responsive scaling

- Verified coordinate mapping works correctly with CSS transform


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 13:58:53 +00:00
tiennm99 1fc2c45d4d docs(06-01): complete Tile Match Animations plan
- MatchAnimation class with easeOutBack easing for satisfying pop effect
- scale+fade transforms in renderTile()
- CONFIG.animation.matchDuration = 250ms
- All tests passing


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 13:54:18 +00:00
tiennm99 7babb6346f docs(06-02): complete path glow effect plan
- Created 06-02-SUMMARY.md with accomplishments, deviations, and metrics
- Updated STATE.md with plan completion and decisions
- Updated ROADMAP.md progress (3/4 summaries complete)
- Marked UX-01 requirement complete


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 13:53:56 +00:00
tiennm99 470ee9f1a9 docs(06-02): complete path glow effect plan
- Added shadowBlur glow effect to path visualization
- Wired animateMatch call for concurrent tile animations
- Auto-fixed missing MatchAnimation integration from plan 06-01


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 13:52:24 +00:00
tiennm99 085556c274 feat(06-01): integrate MatchAnimation into Renderer with animateMatch method
- Add animateMatch() method to start animations for matched tiles
- Apply scale/alpha transforms in renderTile() when animation exists
- Clean up completed animations from matchAnimations map
- Add tests for animateMatch integration


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 13:49:18 +00:00
tiennm99 d0b718a487 feat(06-02): wire animateMatch call to tilesMatched event
- Add animation.matchDuration=250 to CONFIG
- Add matchAnimations Map and animateMatch method to Renderer
- Apply scale+alpha transforms in renderTile for animating tiles
- Wire animateMatch call in Game.ts after drawPath

This completes the dependency from plan 06-01 (Rule 2 auto-fix for missing critical functionality)


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 13:49:11 +00:00
tiennm99 f6e0e6cc37 feat(06-01): add animation.matchDuration to CONFIG
- Add animation configuration object with matchDuration: 250ms
- Per CONTEXT.md recommendation (200-300ms range)


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 13:46:56 +00:00
tiennm99 4dfa4e2e02 feat(06-02): add glow effect to path line visualization
- Add shadowBlur=15 and shadowColor='#00ff00' for green glow
- Wrap path drawing in ctx.save()/ctx.restore() for state preservation
- Add tests for glow effect properties (shadowBlur, shadowColor, save/restore)


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 13:44:57 +00:00
tiennm99 c353f6d68f docs(06-03): complete mobile touch optimization plan
- SUMMARY.md with RippleAnimation implementation details
- STATE.md updated with Phase 6 position and decisions
- ROADMAP.md updated with plan progress
- REQUIREMENTS.md: UX-02 marked complete


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 13:44:31 +00:00
tiennm99 788892458c feat(06-03): trigger ripple effect on touch/click input
- Add renderer.addRipple(x, y) call in handleInput method
- Ripple appears at touch/click coordinates before tile selection
- Provides visual feedback for all input interactions


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 13:41:57 +00:00
tiennm99 059012f9ac feat(06-03): add RippleAnimation class for touch feedback
- Add RippleAnimation class with 300ms duration and 40px max radius
- Add rippleAnimations property to Renderer
- Add addRipple(x, y) method to trigger ripple effect
- Render ripples in main render loop with auto-cleanup
- Use selection color (rgba 233, 69, 96) for visual consistency


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 13:40:52 +00:00
tiennm99 933e8b6feb feat(06-03): add touch-action CSS for mobile optimization
- Add touch-action: none to canvas to prevent zoom/scroll
- Add overflow: hidden to body to prevent page scroll
- Mobile touch gestures now properly blocked during gameplay


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 13:34:53 +00:00
tiennm99 fb49a0412b fix(06): correct dependency for plan 06-02 on 06-01 2026-03-11 11:34:11 +00:00
tiennm99 d41c5d9e8a docs(06): add phase plans for Polish and UX 2026-03-11 11:18:34 +00:00
tiennm99 c0340cea07 docs(06): add research and validation strategy 2026-03-11 11:10:03 +00:00
tiennm99 0b43e3d6fc docs(06): research Phase 6 polish and UX domain 2026-03-11 11:08:59 +00:00
tiennm99 a42f9b3df9 docs(state): record phase 6 context session 2026-03-11 10:54:40 +00:00
tiennm99 dfdd4dc3ae docs(06): capture phase context for Polish and UX 2026-03-11 10:54:34 +00:00
tiennm99 ff3f3a7b9b Add game-state planning, NoMovesDetector & overlay
Update project planning and implement game-end components: tweak .gitignore entries, bump planning state progress, and add extensive Phase 04 artifacts (plans, summary, research, validation) plus Phase 05 initial plan. Deliverables include index.html overlay for game-over UI and modifications to src/game/Game.ts and src/models/Tile.ts to support win / no-moves detection and restart hooks; also add GameStateManager / NoMovesDetector integration notes and tests scaffolding in planning docs. Purpose: prepare and record implementation details for win/lose detection, game-over overlay, input blocking, reset/restart flow, and board-generation recovery.
2026-03-11 17:45:14 +07:00
tiennm99 ddb73c0a76 docs(05-01): complete Random Board Generation plan
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 10:12:37 +00:00
tiennm99 6f115539f6 docs(05-01): complete Random Board Generation plan
- Created SUMMARY.md with execution results
- Updated ROADMAP.md with plan progress
- Updated STATE.md with position and decisions, and session info

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 10:11:50 +00:00
tiennm99 fa397628c1 feat(05-01): implement random board generation with Fisher-Yates shuffle
- Add board:generated event to GameEvents interface
 - implement generateRandomGrid() method with solvability verification
 - Enhance initializeGrid() to use NoMovesDetector for verification
 - Add tests for random board generation
 - add import for NoMovesDetector

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 10:09:23 +00:00
tiennm99 18ae20eaeb feat(05-02): implement shuffleTiles() method with Fisher-Yates shuffle
- shuffleTiles() redistributes tile types while preserving positions
- Clears selection to prevent stale tile references
- Emits board:shuffling before and board:shuffled after
- Handles partially cleared boards correctly
- Added comprehensive test coverage for shuffle functionality


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 10:05:43 +00:00
tiennm99 a73f3edf1d test(05-02): add shuffle events to GameEvents interface
- Add board:shuffling event with tilesRemaining payload
- Add board:shuffled event with tilesRemaining payload
- These events enable UI feedback during tile shuffle recovery


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 10:02:14 +00:00
tiennm99 cc3aaced1b feat(04-04): wire up restart button click handler
- Added restart button click event listener in Game constructor
- Click handler calls restart() method to reset game
- Null check for restart button element (defensive programming)
- Tests verify click handler registration and restart() invocation
- Tests verify graceful handling of missing button element


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 08:29:09 +00:00
tiennm99 7a4cea2fbc feat(04-04): implement restart() method with score preservation
- Added previousScore property to Game class
- Implemented restart() method that stores previousScore, resets grid/score/state/UI
- Added updatePreviousScoreDisplay() helper method
- Added game:restart event type to GameEvents interface
- Restart resets grid via initializeGrid(), resets score to 0, transitions state to IDLE
- Previous score preserved and displayed, hidden if 0
- All tests passing for restart functionality


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 08:28:44 +00:00
tiennm99 f63bb9c8ed test(04-04): add previous score display tests and HTML element
- Added tests for previous-score-display element existence and styling
- Added previous-score-display div to HTML with score-container wrapper
- Element initially hidden with display: none
- Follows existing score-display pattern for consistency


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 08:28:07 +00:00
tiennm99 d9c0448a03 docs(04-02): complete Win/Lose Detection plan and update state
- Created 04-02-SUMMARY.md with implementation details
- NoMovesDetector with type-optimized algorithm (94% reduction in PathFinder calls)
- Game over overlay HTML with semi-transparent styling
- GameStateManager.reset() method (already implemented in 04-01)
- Updated STATE.md with progress and decisions
- Updated ROADMAP.md with phase 4 progress

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 08:23:27 +00:00
tiennm99 35c085d445 feat(04-02): add game over HTML overlay
- Added game-over-overlay div with fixed positioning and z-index 1000
- Added overlay-content div with semi-transparent background
- Added game-over-message h1 element for win/lose message
- Added restart-button button with hover effect
- Overlay hidden by default (display: none)
- Styling matches score overlay pattern

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 08:21:27 +00:00
tiennm99 5bee444a5c test(04-02): add failing test for NoMovesDetector
- Created comprehensive test suite with 10 test cases
- Tests cover valid/invalid move detection, type-optimization, edge cases
- Tests verify path detection with 0, 1, and 2 turns
- Tests verify cleared tiles are skipped and empty board handling

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 08:21:03 +00:00
tiennm99 155fd4acc8 docs(04-01): complete Game State Machine plan and update state
- Create SUMMARY.md with implementation details and technical decisions
- Update STATE.md to reflect plan 04-01 completion
- Update ROADMAP.md progress (1/5 plans complete in Phase 4)
- Document string enum decision and transition validation approach

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 08:17:16 +00:00
tiennm99 d70271878f feat(04-01): implement GameStateManager class with transition validation
- Add transition validation with validTransitions mapping
- Implement transitionTo() method with validation and event emission
- Add canSelectTile() helper method for input blocking
- Add reset() method for restart functionality
- Update tests to cover all state machine behavior (7 test cases)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 08:16:08 +00:00
tiennm99 83cba85f04 feat(04-01): add GameState enum and StateChangeEvent type
- Add GameState enum with 4 string values (IDLE, SELECTING, MATCHING, GAME_OVER)
- Add StateChangeEvent interface with from/to properties
- Add game:stateChange event to GameEvents interface
- Add tests for GameState enum values and types

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 08:14:41 +00:00
tiennm99 b00b438b1b docs(phase-3): add planning artifacts and update state for Phase 4
Add Phase 3 plan files (pathfinding, scoring, visual feedback),
update state tracking for Phase 4 context, and clean up gitignore.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-11 14:04:38 +07:00
tiennm99 a94c0c4ac3 docs(phase-3): complete Core Matching Mechanics phase and prepare Phase 4
Mark Phase 3 as completed in roadmap, add verification documentation,
and create Phase 4 context for Game State Management.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-11 14:03:31 +07:00
tiennm99 718590d0d3 docs(03-02): complete Match Engine and Scoring System plan
- Created 03-02-SUMMARY.md with comprehensive execution summary
- Updated STATE.md with position, decisions, and metrics
- Updated ROADMAP.md with phase 3 progress (2/3 plans complete)
- Marked requirements CORE-05, CORE-06, CORE-07, BOARD-02 as complete

Artifacts delivered:
- Scoring.calculate: Base score (100) + complexity bonus
- MatchEngine.validateMatch: Multi-stage validation pipeline
- GridManager.clearTiles: Tile clearing with event emission
- Game match handling: tilesSelected → validate → clear/score
- Score HTML overlay: Real-time score display

Duration: 2 minutes
Tasks: 5 completed
Files: 8 created/modified
Test coverage: 13 test cases


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 04:42:00 +00:00
tiennm99 0c74c254c2 feat(03-02): extend Game.ts with match handling and score display
- Added MatchEngine instantiation in Game constructor
- Implemented tilesSelected event handler with match validation
- Valid matches: emit tilesMatched event, clear tiles, update score display
- Failed matches: emit matchFailed event, deselect after 200ms delay
- Added private score property tracking current score
- Added updateScoreDisplay method to update HTML overlay
- Extended GameEvents interface with tilesMatched and matchFailed events

Event flow:
1. Player selects two tiles → tilesSelected event
2. MatchEngine validates match (type → position → path)
3. Success: clear tiles, add score, update display, emit tilesMatched
4. Failure: emit matchFailed, deselect tiles after 200ms


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 04:41:30 +00:00
tiennm99 5976d539ac feat(03-02): add score display HTML overlay
- Added div with id=\"score-display\" in top-right corner
- Semi-transparent background (rgba(26, 26, 70, 0.9))
- Large bold font (24px) with light text color (#eaeaea)
- Initial text shows \"Score: 0\"
- Positioned above canvas with z-index: 100


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 04:41:00 +00:00
tiennm99 10de5e4b6f feat(03-02): add clearTiles method to GridManager
- Added clearTiles method that marks tiles as cleared
- Emits tile:cleared event for each cleared tile
- Calls deselectAll() after clearing tiles
- Enables CORE-05 (connected tiles disappear) and CORE-07 (cleared tiles become passable)


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 04:40:30 +00:00
tiennm99 fd3b584fff feat(03-02): implement MatchEngine validation pipeline
- Implemented MatchEngine class with validateMatch method
- Multi-stage validation: type check → position check → pathfinding
- Type check happens before expensive pathfinding (fail-fast optimization)
- Returns MatchResult with valid flag, reason, path, turns, and score
- All 8 test cases covering all validation branches
- Score calculated using Scoring.calculate

Test coverage:
- Different tile types → valid=false, reason='different-type'
- Same tile ID → valid=false, reason='same-tile'
- Valid 0-turn path → valid=true, turns=0, score=150
- Valid 1-turn path → valid=true, turns=1, score=125
- Valid 2-turn path → valid=true, turns=2, score=100
- 3+ turn path → valid=false, reason='too-many-turns'
- No path (blocked) → valid=false, reason='no-path'
- Score calculation correct for valid matches


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 04:40:00 +00:00
tiennm99 6829c2f025 test(03-02): add failing test for Scoring system
- Created test suite with 5 test cases for score calculation
- Tests cover base score (100), 0-turn bonus (150), 1-turn bonus (125)
- Tests verify default to base score for invalid turn counts
- Tests verify integer scores (no floating point)


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 04:39:00 +00:00
tiennm99 3db7d69e56 docs(03-01): complete Path-Finding Algorithm plan
- Created SUMMARY.md with implementation details
- Updated STATE.md with progress, decisions, and metrics
- Updated ROADMAP.md with plan progress (1/3 complete)
- Marked CORE-04 requirement as complete
- Duration: 3 minutes
- Tasks: 2 (type definitions, BFS implementation)
- Files: 3 created/modified (PathFinder.ts, PathFinder.test.ts, types/index.ts)
- Test coverage: 15 test cases
- Deviations: Fixed npm cache and rollup dependency issue (Rule 3)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 04:37:00 +00:00
tiennm99 472f1529b9 feat(03-01): implement BFS pathfinding with turn counting
- Created PathFinder class with static findPath method
- Implements BFS algorithm with turn tracking (max 2 turns default)
- Direction encoding: -1=none/start, 0=up, 1=right, 2=down, 3=left
- Visited state tracking using 'row,col,direction' keys to avoid cycles
- Turn counting: only direction changes count, first move doesn't count
- Boundary checking using CONFIG.grid.rows and CONFIG.grid.cols
- Passable tile check: only cleared tiles are traversable
- Returns PathNode with path array and turn count, or null if no path
- Added 10 comprehensive test cases covering:
  * 0-turn paths (direct horizontal/vertical)
  * 1-turn L-shaped paths
  * 2-turn Z-shaped paths
  * 3+ turn rejection
  * Blocked path detection
  * Path inclusion of start/end positions
  * Correct turn counting behavior

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 04:36:00 +00:00
tiennm99 9fc8962dc7 test(03-01): add PathNode and MatchResult type definitions
- Added PathNode interface for BFS state tracking (row, col, direction, turns, path)
- Added MatchResult interface for match validation results (valid, reason, path, turns)
- Created test file with type import tests
- Direction encoding: -1=none/start, 0=up, 1=right, 2=down, 3=left

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 04:35:00 +00:00
tiennm99 acee40b83b chore: update .gitignore and add Phase 2 artifacts
- Add shell configs, IDE files, and local configs to .gitignore
- Add Phase 2 planning artifacts (CONTEXT, RESEARCH, VERIFICATION)
- Add GridManager test suite


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 03:09:45 +00:00
tiennm99 0af1a576ca docs(02-03): complete 02-03 plan summary and state updates
- Create 02-03-SUMMARY.md with implementation details
- Update STATE.md with Phase 2 complete status
- Update ROADMAP.md to mark Phase 2 as complete
- Record all task commits and decisions

Phase 2 (Grid and Input) is now 100% complete with all 4 plans finished.


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-11 02:58:19 +00:00