Show coordinates labels all 64 squares instead of the board edges

Aberta Para iniciantes
  • Algo errado?
#72 0 comentários 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
2/5
Tempo estimado
1-3 horas
Facilidade para iniciantes
78/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
css, javascript
Domínio
frontend

Direção de pesquisa

As regras de coordenadas estão em css/board.css, por volta das linhas 14-104, onde .square::before define a letra da coluna a partir de data-col e .square::after define o número da linha a partir de data-row para cada casa. Leia js/board.js para ver como as casas e a classe .chess-board.flipped são criadas, depois restrinja os rótulos às casas da borda, invertendo as bordas sob .chess-board.flipped. Está pronto quando aparecem 8 letras de coluna e 8 números de linha com as coordenadas ativadas, eles acompanham o botão Flip board e continuam visíveis nas casas do último lance e nas casas com os pontos de lance. tests/unit/settings.test.js é o arquivo de teste relevante, executado com npm test.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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

Linguagem predominante
JavaScript
Estrelas
4
Forks
2
Merge médio
4h 8min
PRs com merge (30d)
1

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de TMHSDigital/Static_Chess

Todas as issues de TMHSDigital/Static_Chess

Issues semelhantes

Mais issues de JavaScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.