Show coordinates labels all 64 squares instead of the board edges

Aperta Adatta ai principianti
  • Qualcosa non va?
#72 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
78/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
css, javascript
Ambito
frontend

Direzione di ricerca

Le regole delle coordinate si trovano in css/board.css, intorno alle righe 14-104, dove .square::before imposta la lettera della colonna da data-col e .square::after imposta il numero della traversa da data-row per ogni casella. Leggi js/board.js per vedere come vengono create le caselle e la classe .chess-board.flipped, poi limita le etichette alle caselle del bordo, capovolgendo i bordi sotto .chess-board.flipped. Il lavoro è completo quando si mostrano 8 lettere di colonna e 8 numeri di traversa con le coordinate attive, seguono il pulsante Flip board e restano visibili sulle caselle dell'ultima mossa e su quelle con i punti di mossa. tests/unit/settings.test.js è il file di test pertinente, da eseguire con npm test.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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

Lingua principale
JavaScript
Stelle
4
Fork
2
Merge medio
4h 8m
PR unite (30g)
1

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di TMHSDigital/Static_Chess

Tutte le issue di TMHSDigital/Static_Chess

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.