Show coordinates labels all 64 squares instead of the board edges

Abierto Apto para principiantes
  • ¿Algo no está bien?
#72 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
78/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
css, javascript
Área
frontend

Línea de trabajo

Las reglas de las coordenadas están en css/board.css, alrededor de las líneas 14-104, donde .square::before establece la letra de la columna a partir de data-col y .square::after establece el número de la fila a partir de data-row para cada casilla. Lee js/board.js para ver cómo se crean las casillas y la clase .chess-board.flipped, y luego limita las etiquetas a las casillas del borde, invirtiendo los bordes bajo .chess-board.flipped. Está terminado cuando se muestran 8 letras de columna y 8 números de fila con las coordenadas activadas, siguen al botón Flip board y permanecen visibles en las casillas del último movimiento y en las de los puntos de movimiento. tests/unit/settings.test.js es el archivo de prueba relevante, que se ejecuta con npm test.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

enhancement good first issue severity: low

Summary

With "Show coordinates" on, every one of the 64 squares gets both a file letter and a rank number. The board fills with 126 small labels, where chess boards normally label only the bottom rank and one side file.

Where

  • css/board.css:14-104 (the .square::before and .square::after coordinate rules)

Details

The file letter is set by data-col and the rank number by data-row for all squares:

.square[data-col='0']::before {
    content: 'a';
}
/* ... */
.square[data-row='7']::after {
    content: '1';
}

The comment at line 98, "Hide file coordinate on a1 and rank coordinate on h8 for less clutter", suggests the labels were meant for the edges only, but no rule limits them to the edge squares.

Two side effects of using the squares' pseudo-elements for this:

  • The last-move tint uses ::before, so the file letter is not shown on the two squares of the last move.
  • The move dot uses ::after, so the rank number is not shown on squares a selected piece can move to.

Impact

Players who turn coordinates on, which is most useful to beginners and to anyone following along with notation. The labels are hard to scan and partly disappear during play.

Suggested fix

Show file letters only on the rank nearest the player and rank numbers only on one side file, following the board when it is flipped. For example, restrict the rules to .square[data-row='7']::before and .square[data-col='0']::after (and the opposite edges under .chess-board.flipped). Since those edge squares still share pseudo-elements with the last-move tint and the move dot, consider drawing coordinates in their own elements, or outside the board edge, so they never get replaced.

Acceptance criteria

  • With coordinates on, 8 file letters and 8 rank numbers are shown, on the edges nearest the player
  • They follow the board when "Flip board" is on
  • They stay visible on last-move squares and on squares showing a move dot

Getting started

  • Relevant files: css/board.css, js/board.js (how squares and the flipped class are created), tests/unit/settings.test.js
  • How to run tests: npm test

Filed by repo-audit/ui-rework at 0144de7. Severity: low. Effort: S. audit-key: enhancement|css/board.css|show-coords

Lenguaje dominante
JavaScript
Estrellas
4
Forks
2
Merge medio
4 h 8 min
PR fusionados (30 d)
1

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de TMHSDigital/Static_Chess

Todos los issues de TMHSDigital/Static_Chess

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.