Merge pull request #301 from unicolored/coordinatesOnSquares

Add option to display coordinate on every square
lichess-org · May 1, 2024 · d115014 · d115014 · unicolored · May 1, 2024
2 parents fad0543 + 7ad20b4
commit d115014
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 11 deletions.
diff --git a/assets/chessground.base.css b/assets/chessground.base.css
@@ -172,3 +172,53 @@ piece.fading {
 .cg-wrap coords.ranks coord {
   transform: translateY(39%);
 }
+
+.cg-wrap coords.squares {
+  bottom: 0;
+  left: 0;
+  text-transform: uppercase;
+  text-align: right;
+  flex-flow: column-reverse;
+  height: 100%;
+  width: 12.5%;
+}
+
+.cg-wrap coords.squares.black {
+  flex-flow: column;
+}
+
+.cg-wrap coords.squares.left {
+  text-align: left;
+}
+
+.cg-wrap coords.squares coord {
+  padding: 6% 4%;
+}
+
+.cg-wrap coords.squares.rank2 {
+  transform: translateX(100%);
+}
+
+.cg-wrap coords.squares.rank3 {
+  transform: translateX(200%);
+}
+
+.cg-wrap coords.squares.rank4 {
+  transform: translateX(300%);
+}
+
+.cg-wrap coords.squares.rank5 {
+  transform: translateX(400%);
+}
+
+.cg-wrap coords.squares.rank6 {
+  transform: translateX(500%);
+}
+
+.cg-wrap coords.squares.rank7 {
+  transform: translateX(600%);
+}
+
+.cg-wrap coords.squares.rank8 {
+  transform: translateX(700%);
+}
diff --git a/assets/chessground.brown.css b/assets/chessground.brown.css
@@ -42,17 +42,17 @@ cg-board square.current-premove {
   background-color: rgba(20, 30, 85, 0.5);
 }
 
-/** Alternating colors in rank/file labels */
-.cg-wrap.orientation-white coords.ranks coord:nth-child(2n),
-.cg-wrap.orientation-white coords.files coord:nth-child(2n),
-.cg-wrap.orientation-black coords.ranks coord:nth-child(2n + 1),
-.cg-wrap.orientation-black coords.files coord:nth-child(2n + 1) {
+/** Alternating colors in rank/file/square labels */
+.cg-wrap coords:nth-child(odd) coord:nth-child(even),
+.cg-wrap coords.squares:nth-child(even) coord:nth-child(odd),
+.cg-wrap.orientation-black coords.files:nth-child(even) coord:nth-child(odd),
+.cg-wrap coords.files:nth-child(even) coord:nth-child(even) {
   color: rgba(72, 72, 72, 0.8);
 }
 
-.cg-wrap.orientation-black coords.ranks coord:nth-child(2n),
-.cg-wrap.orientation-black coords.files coord:nth-child(2n),
-.cg-wrap.orientation-white coords.ranks coord:nth-child(2n + 1),
-.cg-wrap.orientation-white coords.files coord:nth-child(2n + 1) {
+.cg-wrap coords:nth-child(odd) coord:nth-child(odd),
+.cg-wrap coords.squares:nth-child(even) coord:nth-child(even),
+.cg-wrap.orientation-black coords.files:nth-child(even) coord:nth-child(even),
+.cg-wrap coords.files:nth-child(even) coord:nth-child(odd) {
   color: rgba(255, 255, 255, 0.8);
 }
diff --git a/demo.html b/demo.html
@@ -83,6 +83,15 @@
           ],
         },
       });
+      Chessground(document.getElementById('board-4'), {
+        orientation: 'black',
+        coordinatesOnSquares: true,
+        ranksPosition: 'left',
+      });
+      Chessground(document.getElementById('board-5'), {
+        orientation: 'white',
+        coordinatesOnSquares: true,
+      });
     </script>
   </head>
   <body>
@@ -98,5 +107,13 @@
       board with fixed arrows + labels
       <div class="chessground" id="board-3"></div>
     </div>
+    <div>
+      board with coordinates on-square, ranks position left
+      <div class="chessground" id="board-4"></div>
+    </div>
+    <div>
+      board with coordinates on-square
+      <div class="chessground" id="board-5"></div>
+    </div>
   </body>
 </html>
diff --git a/src/state.ts b/src/state.ts
@@ -13,6 +13,7 @@ export interface HeadlessState {
   lastMove?: cg.Key[]; // squares part of the last move ["c3"; "c4"]
   selected?: cg.Key; // square currently selected "a1"
   coordinates: boolean; // include coords attributes
+  coordinatesOnSquares: boolean; // include coords attributes on every square
   ranksPosition: cg.RanksPosition; // position ranks on either side. left | right
   autoCastle: boolean; // immediately complete the castle by moving the rook after king move
   viewOnly: boolean; // don't bind events: the user will never be able to move pieces around
@@ -113,6 +114,7 @@ export function defaults(): HeadlessState {
     orientation: 'white',
     turnColor: 'white',
     coordinates: true,
+    coordinatesOnSquares: false,
     ranksPosition: 'right',
     autoCastle: true,
     viewOnly: false,

diff --git a/src/wrap.ts b/src/wrap.ts
@@ -64,8 +64,21 @@ export function renderWrap(element: HTMLElement, s: HeadlessState): Elements {
   if (s.coordinates) {
     const orientClass = s.orientation === 'black' ? ' black' : '';
     const ranksPositionClass = s.ranksPosition === 'left' ? ' left' : '';
-    container.appendChild(renderCoords(ranks, 'ranks' + orientClass + ranksPositionClass));
-    container.appendChild(renderCoords(files, 'files' + orientClass));
+
+    if (s.coordinatesOnSquares) {
+      const rankN: (i: number) => number = s.orientation === 'white' ? i => i + 1 : i => 8 - i;
+      files.forEach((f, i) =>
+        container.appendChild(
+          renderCoords(
+            ranks.map(r => f + r),
+            'squares rank' + rankN(i) + orientClass + ranksPositionClass,
+          ),
+        ),
+      );
+    } else {
+      container.appendChild(renderCoords(ranks, 'ranks' + orientClass + ranksPositionClass));
+      container.appendChild(renderCoords(files, 'files' + orientClass));
+    }
   }
 
   let ghost: HTMLElement | undefined;