Show coordinates labels all 64 squares instead of the board edges

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#72 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
78/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
css, javascript
Domaine
frontend

Piste de recherche

Les règles des coordonnées se trouvent dans css/board.css, autour des lignes 14-104, où .square::before définit la lettre de colonne à partir de data-col et .square::after définit le numéro de rangée à partir de data-row pour chaque case. Lis js/board.js pour voir comment les cases et la classe .chess-board.flipped sont créées, puis restreins les étiquettes aux cases de bord, en inversant les bords sous .chess-board.flipped. C'est terminé quand 8 lettres de colonne et 8 numéros de rangée s'affichent avec les coordonnées activées, qu'ils suivent le bouton Flip board et qu'ils restent visibles sur les cases du dernier coup et sur les cases avec les points de coup. tests/unit/settings.test.js est le fichier de test concerné, à lancer avec npm test.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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

Langage dominant
JavaScript
Étoiles
4
Forks
2
Merge moyen
4 h 8 min
PR mergées (30 j)
1

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de TMHSDigital/Static_Chess

Toutes les issues de TMHSDigital/Static_Chess

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.