Skip to content

SP-008: Add Question Timer with Historical Tracking#3

Open
fikriauliya wants to merge 7 commits into
mainfrom
sp-008-question-timer
Open

SP-008: Add Question Timer with Historical Tracking#3
fikriauliya wants to merge 7 commits into
mainfrom
sp-008-question-timer

Conversation

@fikriauliya
Copy link
Copy Markdown
Owner

@fikriauliya fikriauliya commented Jun 28, 2025

Summary

Implements SP-008 question timer feature with historical tracking functionality:

  • ⏱️ Real-time timer: Displays in MM:SS format, starts automatically when new questions appear
  • 🎯 Smart tracking: Only records completion time on correct answers, continues during wrong attempts
  • 💾 Persistent storage: Saves completion times to localStorage with question metadata
  • 📊 Historical display: Shows recent completion times in GameController sidebar
  • 🧪 Comprehensive tests: Full E2E test coverage for all timer functionality

Changes Made

Core Implementation

  • GameContext.tsx: Added timer state management, localStorage integration, and completion time tracking
  • GameController.tsx: Added timer display and completion history UI components
  • Types: Added CompletionTime interface for structured time data storage

Testing & Quality

  • question-timer.spec.ts: Complete E2E test suite covering all acceptance criteria
  • Enhanced test data attributes: Added data-testid attributes for reliable test targeting
  • DraggableBead.tsx: Added test identifiers for bead interaction testing

Features Delivered

✅ Timer displays in MM:SS format and updates every second
✅ Timer starts when new question appears
✅ Timer stops and records time only on correct answers
✅ Completion times stored in localStorage
✅ Historical times displayed to user
✅ Timer continues running during incorrect attempts
✅ Data persists between browser sessions

Technical Details

The timer implementation follows the existing GameContext pattern:

  • Uses useEffect hooks for automatic timer management
  • Leverages setInterval for precise second-by-second updates
  • Integrates seamlessly with existing question flow and answer checking
  • Maintains clean separation of concerns with dedicated timer functions

🤖 Generated with Claude Code

fikriauliya and others added 7 commits June 28, 2025 10:20
Tests verify timer starts with new questions, displays MM:SS format,
continues during wrong answers, stops/records on correct answers,
and shows historical completion times with local storage persistence.

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

Co-Authored-By: Claude <noreply@anthropic.com>
- Add timer state management in GameContext with start/stop functionality
- Display current timer in MM:SS format during question solving
- Store completion times in local storage with question metadata
- Show recent completion times history in GameController
- Timer starts when new question appears and stops on correct answer
- Timer continues running during incorrect attempts
- Add comprehensive test coverage for all timer functionality
- Mark SP-008 as completed in TODOS.md

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

Co-Authored-By: Claude <noreply@anthropic.com>
Update hardcoded localhost:5174 to use VITE_PORT from environment,
ensuring tests run on the correct port configured in .env file.

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

Co-Authored-By: Claude <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant