Multi RoundsTemporizador por fases para torneos de TCG
Una aplicación web de múltiples temporizadores diseñada para torneos de juegos de cartas coleccionables y flujos de trabajo con tiempo estructurado. Ejecuta hasta cuatro temporizadores independientes simultáneamente, cada uno con su propia secuencia de fases, configuración y estado persistente.
El Problema
Los temporizadores genéricos fallan en torneos reales
- ×Sin concepto de fases — configuración, ronda, tiempo extra
- ×Poca legibilidad durante partidas en vivo
- ×Sin soporte para múltiples partidas simultáneas
- ×Fricción al ajustar el tiempo durante el juego
La Idea
Un temporizador como una secuencia de fases estructuradas
En lugar de una cuenta regresiva simple, Multi Rounds modela cada temporizador como un flujo que refleja cómo operan realmente los torneos.
Configuración
Preparación antes de la ronda
Principal
Duración principal de la ronda
Tiempo Extra
Fase de prórroga
En Reposo
Temporizador en descanso
Características Clave
Todo lo necesario para el tiempo en vivo
Sistema Multi-Temporizador
Hasta 4 temporizadores completamente independientes en ejecución simultánea. El diseño dinámico divide la pantalla automáticamente a medida que se añaden temporizadores.
Flujo por Fases
Cada temporizador sigue Configuración → Principal → Extra → En Reposo. Las fases transicionan automáticamente al completarse, reflejando el flujo real de los torneos.
Edición en Línea
Haz clic para editar el nombre del temporizador o ajustar horas, minutos y segundos directamente — sin interrupciones modales durante el uso en vivo.
Estado Persistente
La configuración sobrevive a las recargas de página mediante localStorage. Cada contador almacena sus propias duraciones y título bajo una clave única.
Diseño Responsivo
La interfaz se adapta a medida que se añaden más temporizadores. Los tamaños de fuente escalan según el ancho del contenedor para mantener la legibilidad con 4 temporizadores en pantalla.
Modelo de Pantalla Única
No se requiere navegación. Todos los controles son inmediatamente accesibles — diseñado para interacción rápida bajo presión.
Enfoque Técnico
Arquitectura
Hook useTcgCounter
Cada temporizador está impulsado por un hook de React dedicado que encapsula la gestión de estado, la lógica de cuenta regresiva, las transiciones de fase y la persistencia.
// Estado persistido
title
phaseDurations
activePhase
// Estado en tiempo de ejecución
remainingTime
isRunning / isPaused
Persistencia
Cada temporizador almacena su configuración bajo una clave única con respaldos seguros para datos malformados.
clave: multi-rounds:tcg:counter:<id>
// Valores por defecto
Setup — 5 min
Main — 50 min
Extra — 5 min
Secuencia de Fases
Start → Setup → Main → Extra → Idle
Decisiones de Diseño
Por qué funciona así
Modelo por Fases
Elegido para reflejar el flujo real de los torneos en lugar de una cuenta regresiva genérica.
Instancias de Temporizador Independientes
Cada temporizador está aislado para evitar complejidad de estado compartido y garantizar fiabilidad.
Edición en Línea
Elimina la fricción y permite ajustes rápidos durante las partidas en vivo.
Persistencia Local
Evita requisitos de inicio de sesión mientras preserva las configuraciones del usuario entre sesiones.
Desafíos
- —Gestionar múltiples temporizadores independientes sin conflictos de estado
- —Mantener la interfaz legible en diseños dinámicos
- —Diseñar un sistema de fases flexible pero simple
- —Asegurar transiciones suaves entre fases
Resultado
- ✓Mejora la claridad y la consistencia del tiempo durante los torneos
- ✓Reduce la carga manual para organizadores y jugadores
- ✓Soporta flujos de trabajo de múltiples partidas en el mundo real
- ✓Demuestra pensamiento de producto y diseño UX bajo restricciones
¿Qué sigue?
Mejoras futuras
Reflexión
Este proyecto comenzó como una necesidad personal y evolucionó en un producto enfocado. Destaca la importancia de construir a partir de casos de uso reales, diseñar según el contexto y mantener las interfaces simples bajo presión.
Ver proyecto en vivo →