Skip to content

Divide game.css por secciones y limita los archivos a 1000 líneas - #29

Open
enlike21 wants to merge 2 commits into
mainfrom
refactor/split-game-css
Open

enlike21 wants to merge 2 commits into
mainfrom
refactor/split-game-css

Conversation

@enlike21

@enlike21 enlike21 commented Oct 24, 2026 •

Copy link
Copy Markdown
Owner

Qué cambia

1. game.css dividido por secciones (Closes #17). El archivo tenía ~1400 líneas; ahora son seis en public/styles/pages/game/:

Archivo Qué contiene
base.css variables de la página, contenedor, layout, prefers-reduced-motion
hero.css cabecera de la página
box.css la caja del juego: HUD, canvas, etiqueta de modo
overlays.css pantallas de inicio, pausa y fin de partida, leyenda
sidebar.css panel lateral (récords, ranking, controles)
route.css bloque de la vía

Cada archivo lleva sus propias reglas responsive, así que todo lo de una sección está en un sitio. La plantilla los carga en orden.

2. Regla nueva: ningún archivo de más de 1000 líneas. bin/check-file-length corre en el job quality de la CI. Excluye los archivos generados (lock files, config/reference.php…). Los que ya eran demasiado largos tienen un tope temporal para que no sigan creciendo, cada uno con su issue: render.js (#15), main.js (#16), main.css y saved_routes.css (#18). Explicado en CONTRIBUTING.

Cómo lo he comprobado

  • Las 205 reglas CSS son las mismas que antes.
  • Los estilos calculados de los 334 elementos de la página (y sus pseudo-elementos) son idénticos al archivo antiguo, a 1280 px y a 375 px, en las pantallas de inicio, pausa y fin de partida.
  • bin/check-file-length pasa, y falla con un archivo de prueba de 1001 líneas.

Revisión

Me gustaría que este lo revisarais alguno de vosotros: @LetMeSleep8h @RanaKhan77 @Aaqibhafeezkhan. Abrid /juego con la rama en local y mirad si veis algo distinto, o comentad si la regla de las 1000 líneas os parece bien. Cualquier comentario es bienvenido 🙌

@Aaqibhafeezkhan: tu PR #27 hace crecer main.js unas 36 líneas; sigue cabiendo dentro del tope temporal, así que no te afecta.

game.css had grown to ~1400 lines. It is now six files under
public/styles/pages/game/ (base, hero, box, overlays, sidebar, route),
each with its own responsive rules, loaded in order by the game template.
The rules are the same: the computed styles of every element match the
old file at desktop and phone widths, in the start, pause and game-over
states.

Closes #17
bin/check-file-length runs in the CI quality job and fails on any
tracked file over 1000 lines, apart from generated ones (lock files,
config/reference.php...). Files that were already too long get a
temporary cap so they can't keep growing, each tied to the issue that
splits it (#15, #16, #18). Documented in CONTRIBUTING.
@enlike21 enlike21 added the refactor Reorganizar código sin cambiar su comportamiento label Oct 24, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

refactor Reorganizar código sin cambiar su comportamiento

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Refactor: dividir game.css por secciones

1 participant