feat(game-start): implementar inicio explícito del juego con botón Iniciar by ntolosa · Pull Request #4 · ntolosa/tetris

ntolosa · 2026-04-26T00:03:20Z

Descripción

El juego ya no inicia automáticamente al cargar la aplicación. En su lugar, muestra un tablero vacío con un botón "Iniciar" prominente. Los controles del juego permanecen ocultos hasta que el jugador decide comenzar.

Cambios principales

Refactor de estado: Reemplazo de isEndGame + isPaused (booleans) por una única variable gameStatus con valores 'idle' | 'playing' | 'paused' | 'gameover'
Generación diferida: Las piezas se generan al iniciar, no al cargar el módulo
Botón Iniciar: Visible solo en estado idle, oculto durante el juego
Controles ocultos: Los botones de movimiento, rotación, drop y pausa no son visibles hasta que el juego inicie
Preview oculta: La siguiente ficha no se muestra hasta que el juego inicie
Game Over → Idle: Después de game over, se muestra overlay y auto-transición al estado idle con botón Iniciar disponible
Estilos: Botón de inicio con estilos prominentes (verde, grande, centrado)
Tests: 6 tests cubriendo estado idle, inicio, controles y pausa

User Stories completadas

✅ US1: Iniciar el juego (P1) — botón Iniciar, estado idle
✅ US2: Feedback visual en estado idle (P2) — controles ocultos, tablero vacío
✅ US3: Reinicio después de game over (P2) — transición automática a idle

Cómo probar

Abrir la app → verificar tablero vacío con solo botón "Iniciar"
Verificar que no hay botones de movimiento, pausa ni preview de ficha
Click en "Iniciar" → el juego comienza, controles aparecen, preview visible
Presionar P o Escape → pausa funciona normalmente
Jugar hasta game over → se muestra "Game Over", luego vuelve al estado idle
Click en "Iniciar" de nuevo → nueva partida con tablero limpio

Tasks completadas

T001–T027 completadas según el plan de implementación.

…iciar - Reemplazar isEndGame/isPaused por variable única gameStatus ('idle'|'playing'|'paused'|'gameover') - Diferir generación de piezas al momento de iniciar (startGame callback) - Agregar botón 'Iniciar' visible solo en estado idle - Ocultar controles del juego (mover, rotar, drop, pausa) hasta que el juego inicie - Ocultar preview de siguiente ficha en estado idle - Agregar transición automática game over → idle (con overlay 'Game Over') - Agregar estilos para botón de inicio (.controls__start) - Actualizar tests para cubrir estado idle, inicio y controles - Agregar especificación, plan de implementación y tareas Closes: US1 (iniciar juego), US2 (feedback visual idle), US3 (reinicio post game over) Tasks: T001-T027 completadas

# Conflicts: # .specify/feature.json # AGENTS.md # src/components/tetris/tetris.js # src/components/tetris/tetris.spec.js

…t suite - Refactor changePosition to prevent calling setGameStatus inside state updater - Initialize missing start game sequences in spec files to prevent query crash - Force Math.random mock to return stable value to avoid random layout crashes

* draft version of matrix render * Feature/ficha rendering (#2) * draft version for item movement * adding logic to move ficha * adding logic to manually move an item --------- Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> * adding logic to flip ficha * adding logic to check coalitions * adding logic to remove completed lines * adding logic to display next item * adding some basic styles * adding logic to down key * bug fixing: fixing flip issue * adding some styles in controls * adding ficha colors * adding logic to finish game * adding unit test * fix: resolve matrix height reduction bug on multiple line clearing * Fix timer reset on piece movement by preventing stale closures * feat(pause): implementar pausa del juego con tecla P/Escape y botón (#3) * [Spec Kit] Add specification, implementation plan, and tasks for game-pause feature * feat(pause): implementar pausa del juego con tecla P/Escape y botón - Agregar estado isPaused y callback togglePause al componente Tetris - Detener gravedad (setInterval) cuando el juego está pausado - Bloquear inputs de teclado y botones durante la pausa - Ocultar contenido del tablero manteniendo el contorno visible - Mostrar overlay 'Pausado' centrado sobre el tablero - Ocultar preview de la siguiente ficha durante la pausa - Agregar botón Pausa/Reanudar con label dinámico - Agregar estilos para overlay y botón de pausa - Agregar tests para renderizado y comportamiento del botón - Actualizar .gitignore con patrones estándar de Node.js/CRA Closes: US1 (pausar), US2 (reanudar), US3 (feedback visual) Tasks: T001-T017 completadas --------- Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> * feat: add CI pipeline to run tests on PRs (#5) * ci: agregar GitHub Actions workflow para ejecutar tests en PRs - Crear workflow .github/workflows/test-on-pr.yml - Trigger: pull_request sobre branches develop y main - Runner: ubuntu-latest con timeout de 10 minutos - Steps: checkout, setup-node v16, npm ci, npm test (CI=true) - Cache de npm habilitado para acelerar ejecuciones subsiguientes - Agregar especificación, plan y tareas de la feature Refs: specs/003-ci-test-pr * fix: add @babel/plugin-proposal-private-property-in-object to devDependencies babel-preset-react-app (part of the unmaintained create-react-app) uses this plugin without declaring it as a dependency. Adding it explicitly to devDependencies prevents a potential breakage and silences the startup warning. * test: remove obsolete App.test.js * ci: enforce 80% test coverage threshold * test: add tests and fix bugs to increase test coverage above 80% * fix: revert extra bounds checks to restore branch coverage >80% --------- Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> * feat(game-start): implementar inicio explícito del juego con botón Iniciar (#4) * feat(game-start): implementar inicio explícito del juego con botón Iniciar - Reemplazar isEndGame/isPaused por variable única gameStatus ('idle'|'playing'|'paused'|'gameover') - Diferir generación de piezas al momento de iniciar (startGame callback) - Agregar botón 'Iniciar' visible solo en estado idle - Ocultar controles del juego (mover, rotar, drop, pausa) hasta que el juego inicie - Ocultar preview de siguiente ficha en estado idle - Agregar transición automática game over → idle (con overlay 'Game Over') - Agregar estilos para botón de inicio (.controls__start) - Actualizar tests para cubrir estado idle, inicio y controles - Agregar especificación, plan de implementación y tareas Closes: US1 (iniciar juego), US2 (feedback visual idle), US3 (reinicio post game over) Tasks: T001-T027 completadas * fix(test): resolve infinite loop and unhandled mock exceptions in test suite - Refactor changePosition to prevent calling setGameStatus inside state updater - Initialize missing start game sequences in spec files to prevent query crash - Force Math.random mock to return stable value to avoid random layout crashes --------- Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> * feat: Add GitHub Pages deployment workflow (#6) Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> --------- Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local>

* draft version of matrix render * Feature/ficha rendering (#2) * draft version for item movement * adding logic to move ficha * adding logic to manually move an item --------- Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> * adding logic to flip ficha * adding logic to check coalitions * adding logic to remove completed lines * adding logic to display next item * adding some basic styles * adding logic to down key * bug fixing: fixing flip issue * adding some styles in controls * adding ficha colors * adding logic to finish game * adding unit test * fix: resolve matrix height reduction bug on multiple line clearing * Fix timer reset on piece movement by preventing stale closures * feat(pause): implementar pausa del juego con tecla P/Escape y botón (#3) * [Spec Kit] Add specification, implementation plan, and tasks for game-pause feature * feat(pause): implementar pausa del juego con tecla P/Escape y botón - Agregar estado isPaused y callback togglePause al componente Tetris - Detener gravedad (setInterval) cuando el juego está pausado - Bloquear inputs de teclado y botones durante la pausa - Ocultar contenido del tablero manteniendo el contorno visible - Mostrar overlay 'Pausado' centrado sobre el tablero - Ocultar preview de la siguiente ficha durante la pausa - Agregar botón Pausa/Reanudar con label dinámico - Agregar estilos para overlay y botón de pausa - Agregar tests para renderizado y comportamiento del botón - Actualizar .gitignore con patrones estándar de Node.js/CRA Closes: US1 (pausar), US2 (reanudar), US3 (feedback visual) Tasks: T001-T017 completadas --------- Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> * feat: add CI pipeline to run tests on PRs (#5) * ci: agregar GitHub Actions workflow para ejecutar tests en PRs - Crear workflow .github/workflows/test-on-pr.yml - Trigger: pull_request sobre branches develop y main - Runner: ubuntu-latest con timeout de 10 minutos - Steps: checkout, setup-node v16, npm ci, npm test (CI=true) - Cache de npm habilitado para acelerar ejecuciones subsiguientes - Agregar especificación, plan y tareas de la feature Refs: specs/003-ci-test-pr * fix: add @babel/plugin-proposal-private-property-in-object to devDependencies babel-preset-react-app (part of the unmaintained create-react-app) uses this plugin without declaring it as a dependency. Adding it explicitly to devDependencies prevents a potential breakage and silences the startup warning. * test: remove obsolete App.test.js * ci: enforce 80% test coverage threshold * test: add tests and fix bugs to increase test coverage above 80% * fix: revert extra bounds checks to restore branch coverage >80% --------- Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> * feat(game-start): implementar inicio explícito del juego con botón Iniciar (#4) * feat(game-start): implementar inicio explícito del juego con botón Iniciar - Reemplazar isEndGame/isPaused por variable única gameStatus ('idle'|'playing'|'paused'|'gameover') - Diferir generación de piezas al momento de iniciar (startGame callback) - Agregar botón 'Iniciar' visible solo en estado idle - Ocultar controles del juego (mover, rotar, drop, pausa) hasta que el juego inicie - Ocultar preview de siguiente ficha en estado idle - Agregar transición automática game over → idle (con overlay 'Game Over') - Agregar estilos para botón de inicio (.controls__start) - Actualizar tests para cubrir estado idle, inicio y controles - Agregar especificación, plan de implementación y tareas Closes: US1 (iniciar juego), US2 (feedback visual idle), US3 (reinicio post game over) Tasks: T001-T027 completadas * fix(test): resolve infinite loop and unhandled mock exceptions in test suite - Refactor changePosition to prevent calling setGameStatus inside state updater - Initialize missing start game sequences in spec files to prevent query crash - Force Math.random mock to return stable value to avoid random layout crashes --------- Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> * feat: Add GitHub Pages deployment workflow (#6) Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> * fix branch name on yaml config (#8) Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> --------- Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local>

* draft version of matrix render * Feature/ficha rendering (#2) * draft version for item movement * adding logic to move ficha * adding logic to manually move an item --------- Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> * adding logic to flip ficha * adding logic to check coalitions * adding logic to remove completed lines * adding logic to display next item * adding some basic styles * adding logic to down key * bug fixing: fixing flip issue * adding some styles in controls * adding ficha colors * adding logic to finish game * adding unit test * fix: resolve matrix height reduction bug on multiple line clearing * Fix timer reset on piece movement by preventing stale closures * feat(pause): implementar pausa del juego con tecla P/Escape y botón (#3) * [Spec Kit] Add specification, implementation plan, and tasks for game-pause feature * feat(pause): implementar pausa del juego con tecla P/Escape y botón - Agregar estado isPaused y callback togglePause al componente Tetris - Detener gravedad (setInterval) cuando el juego está pausado - Bloquear inputs de teclado y botones durante la pausa - Ocultar contenido del tablero manteniendo el contorno visible - Mostrar overlay 'Pausado' centrado sobre el tablero - Ocultar preview de la siguiente ficha durante la pausa - Agregar botón Pausa/Reanudar con label dinámico - Agregar estilos para overlay y botón de pausa - Agregar tests para renderizado y comportamiento del botón - Actualizar .gitignore con patrones estándar de Node.js/CRA Closes: US1 (pausar), US2 (reanudar), US3 (feedback visual) Tasks: T001-T017 completadas --------- Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> * feat: add CI pipeline to run tests on PRs (#5) * ci: agregar GitHub Actions workflow para ejecutar tests en PRs - Crear workflow .github/workflows/test-on-pr.yml - Trigger: pull_request sobre branches develop y main - Runner: ubuntu-latest con timeout de 10 minutos - Steps: checkout, setup-node v16, npm ci, npm test (CI=true) - Cache de npm habilitado para acelerar ejecuciones subsiguientes - Agregar especificación, plan y tareas de la feature Refs: specs/003-ci-test-pr * fix: add @babel/plugin-proposal-private-property-in-object to devDependencies babel-preset-react-app (part of the unmaintained create-react-app) uses this plugin without declaring it as a dependency. Adding it explicitly to devDependencies prevents a potential breakage and silences the startup warning. * test: remove obsolete App.test.js * ci: enforce 80% test coverage threshold * test: add tests and fix bugs to increase test coverage above 80% * fix: revert extra bounds checks to restore branch coverage >80% --------- Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> * feat(game-start): implementar inicio explícito del juego con botón Iniciar (#4) * feat(game-start): implementar inicio explícito del juego con botón Iniciar - Reemplazar isEndGame/isPaused por variable única gameStatus ('idle'|'playing'|'paused'|'gameover') - Diferir generación de piezas al momento de iniciar (startGame callback) - Agregar botón 'Iniciar' visible solo en estado idle - Ocultar controles del juego (mover, rotar, drop, pausa) hasta que el juego inicie - Ocultar preview de siguiente ficha en estado idle - Agregar transición automática game over → idle (con overlay 'Game Over') - Agregar estilos para botón de inicio (.controls__start) - Actualizar tests para cubrir estado idle, inicio y controles - Agregar especificación, plan de implementación y tareas Closes: US1 (iniciar juego), US2 (feedback visual idle), US3 (reinicio post game over) Tasks: T001-T027 completadas * fix(test): resolve infinite loop and unhandled mock exceptions in test suite - Refactor changePosition to prevent calling setGameStatus inside state updater - Initialize missing start game sequences in spec files to prevent query crash - Force Math.random mock to return stable value to avoid random layout crashes --------- Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> * feat: Add GitHub Pages deployment workflow (#6) Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> * fix branch name on yaml config (#8) Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> * adding homepage (#10) Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> --------- Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local>

* draft version of matrix render * Feature/ficha rendering (#2) * draft version for item movement * adding logic to move ficha * adding logic to manually move an item --------- Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> * adding logic to flip ficha * adding logic to check coalitions * adding logic to remove completed lines * adding logic to display next item * adding some basic styles * adding logic to down key * bug fixing: fixing flip issue * adding some styles in controls * adding ficha colors * adding logic to finish game * adding unit test * fix: resolve matrix height reduction bug on multiple line clearing * Fix timer reset on piece movement by preventing stale closures * feat(pause): implementar pausa del juego con tecla P/Escape y botón (#3) * [Spec Kit] Add specification, implementation plan, and tasks for game-pause feature * feat(pause): implementar pausa del juego con tecla P/Escape y botón - Agregar estado isPaused y callback togglePause al componente Tetris - Detener gravedad (setInterval) cuando el juego está pausado - Bloquear inputs de teclado y botones durante la pausa - Ocultar contenido del tablero manteniendo el contorno visible - Mostrar overlay 'Pausado' centrado sobre el tablero - Ocultar preview de la siguiente ficha durante la pausa - Agregar botón Pausa/Reanudar con label dinámico - Agregar estilos para overlay y botón de pausa - Agregar tests para renderizado y comportamiento del botón - Actualizar .gitignore con patrones estándar de Node.js/CRA Closes: US1 (pausar), US2 (reanudar), US3 (feedback visual) Tasks: T001-T017 completadas --------- Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> * feat: add CI pipeline to run tests on PRs (#5) * ci: agregar GitHub Actions workflow para ejecutar tests en PRs - Crear workflow .github/workflows/test-on-pr.yml - Trigger: pull_request sobre branches develop y main - Runner: ubuntu-latest con timeout de 10 minutos - Steps: checkout, setup-node v16, npm ci, npm test (CI=true) - Cache de npm habilitado para acelerar ejecuciones subsiguientes - Agregar especificación, plan y tareas de la feature Refs: specs/003-ci-test-pr * fix: add @babel/plugin-proposal-private-property-in-object to devDependencies babel-preset-react-app (part of the unmaintained create-react-app) uses this plugin without declaring it as a dependency. Adding it explicitly to devDependencies prevents a potential breakage and silences the startup warning. * test: remove obsolete App.test.js * ci: enforce 80% test coverage threshold * test: add tests and fix bugs to increase test coverage above 80% * fix: revert extra bounds checks to restore branch coverage >80% --------- Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> * feat(game-start): implementar inicio explícito del juego con botón Iniciar (#4) * feat(game-start): implementar inicio explícito del juego con botón Iniciar - Reemplazar isEndGame/isPaused por variable única gameStatus ('idle'|'playing'|'paused'|'gameover') - Diferir generación de piezas al momento de iniciar (startGame callback) - Agregar botón 'Iniciar' visible solo en estado idle - Ocultar controles del juego (mover, rotar, drop, pausa) hasta que el juego inicie - Ocultar preview de siguiente ficha en estado idle - Agregar transición automática game over → idle (con overlay 'Game Over') - Agregar estilos para botón de inicio (.controls__start) - Actualizar tests para cubrir estado idle, inicio y controles - Agregar especificación, plan de implementación y tareas Closes: US1 (iniciar juego), US2 (feedback visual idle), US3 (reinicio post game over) Tasks: T001-T027 completadas * fix(test): resolve infinite loop and unhandled mock exceptions in test suite - Refactor changePosition to prevent calling setGameStatus inside state updater - Initialize missing start game sequences in spec files to prevent query crash - Force Math.random mock to return stable value to avoid random layout crashes --------- Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> * feat: Add GitHub Pages deployment workflow (#6) Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> * fix branch name on yaml config (#8) Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> * adding homepage (#10) Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> * feat(gameplay): implement wall kick rotation mechanics (#12) - Add simplified wall kick offsets algorithm to flipFicha - Ensure rotation works when piece is near bounds - Ensure rotation gracefully fails in confined spaces without crashing - Update checkCoalition usage to check against the temporarily rotated piece - Add unit tests for wall kick rotation and failure scenarios - Satisfy specs/005-wall-kick-rotation requirements Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local> --------- Co-authored-by: Nicolas Tolosa <ntolosa@MacBook-Pro-de-Nicolas.local>

Nicolas Tolosa added 3 commits April 25, 2026 21:02

Merge branch 'develop' into 002-game-start

a370ee0

# Conflicts: # .specify/feature.json # AGENTS.md # src/components/tetris/tetris.js # src/components/tetris/tetris.spec.js

ntolosa merged commit 1b9cbac into develop May 2, 2026
1 check passed

ntolosa deleted the 002-game-start branch May 2, 2026 04:03

Navigation Menu

feat(game-start): implementar inicio explícito del juego con botón Iniciar - #4

feat(game-start): implementar inicio explícito del juego con botón Iniciar#4
ntolosa merged 3 commits into
developfrom
002-game-start

ntolosa commented Apr 26, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

ntolosa commented Apr 26, 2026

Descripción

Cambios principales

User Stories completadas

Cómo probar

Tasks completadas

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant