Show coordinates labels all 64 squares instead of the board edges

Open Beginner friendly
  • Is something wrong?
#72 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
css, javascript
Domain
frontend

Research direction

The coordinate rules are in css/board.css around lines 14-104, where .square::before sets the file letter from data-col and .square::after sets the rank number from data-row for every square. Read js/board.js to see how squares and the flipped class are created, then restrict the labels to the edge squares, flipping the edges under .chess-board.flipped. Done means 8 file letters and 8 rank numbers show with coordinates on, they follow Flip board, and they stay visible on last-move and move-dot squares; tests/unit/settings.test.js is the relevant test file, run with npm test.

Written by the indexing model from the issue text.

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

Dominant language
JavaScript
Stars
4
Forks
2
Avg merge
4h 8m
Merged PRs (30d)
1

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from TMHSDigital/Static_Chess

All issues in TMHSDigital/Static_Chess

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.