Multi RoundsPhase-based timer for TCG tournaments
A multi-timer web application built for Trading Card Game tournaments and structured time workflows. Run up to four independent timers simultaneously, each with its own phase sequence, configuration, and persistent state.
The Problem
Generic timers fail in real tournaments
- ×No concept of phases — setup, round, extra time
- ×Poor readability during live matches
- ×No support for multiple simultaneous games
- ×Friction when adjusting time mid-game
The Idea
A timer as a sequence of structured phases
Instead of a simple countdown, Multi Rounds models each timer as a flow that mirrors how real tournaments actually operate.
Setup
Preparation before the round
Main
Primary round duration
Extra
Overtime phase
Idle
Timer at rest
Key Features
Everything needed for live timing
Multi-Timer System
Up to 4 fully independent timers running simultaneously. Dynamic layout splits the screen automatically as timers are added.
Phase-Based Flow
Each timer follows Setup → Main → Extra → Idle. Phases transition automatically on completion, mirroring real tournament flow.
Inline Editing
Click to edit the timer name or adjust hours, minutes, and seconds directly — no modal interruptions during live use.
Persistent State
Configuration survives page reloads via localStorage. Each counter stores its own durations and title under a unique key.
Responsive Layout
UI adapts as more timers are added. Font sizes scale with container width to keep readability with 4 timers on screen.
Single-Screen Model
No navigation required. All controls are immediately accessible — designed for fast interaction under pressure.
Technical Approach
Architecture
useTcgCounter hook
Each timer is powered by a dedicated React hook that encapsulates state management, countdown logic, phase transitions, and persistence.
// Persisted state
title
phaseDurations
activePhase
// Runtime state
remainingTime
isRunning / isPaused
Persistence
Each timer stores its configuration under a unique key with safe fallbacks for malformed data.
key: multi-rounds:tcg:counter:<id>
// Defaults
Setup — 5 min
Main — 50 min
Extra — 5 min
Phase Sequencing
Start → Setup → Main → Extra → Idle
Design Decisions
Why it works this way
Phase-Based Model
Chosen to reflect real-world tournament flow rather than a generic countdown.
Independent Timer Instances
Each timer is isolated to avoid shared state complexity and ensure reliability.
Inline Editing
Removes friction and allows quick adjustments during live matches.
Local Persistence
Avoids login requirements while preserving user configurations between sessions.
Challenges
- —Managing multiple independent timers without state conflicts
- —Keeping UI readable across dynamic layouts
- —Designing a flexible yet simple phase system
- —Ensuring smooth transitions between phases
Outcome
- ✓Improves clarity and timing consistency during tournaments
- ✓Reduces manual overhead for organizers and players
- ✓Supports real-world multi-match workflows
- ✓Demonstrates product thinking and UX design under constraints
What's Next
Future improvements
Reflection
This project started as a personal need and evolved into a focused product. It highlights the importance of building from real use cases, designing for context, and keeping interfaces simple under pressure.
View live project →