@lichess-org/chessground 9.8.5 → 9.10.1

package/src/render.ts

@@ -1,5 +1,6 @@
 import { State } from './state.js';
 import { key2pos, createEl, posToTranslate as posToTranslateFromBounds, translate } from './util.js';
+import * as util from './util.js';
 import { whitePov } from './board.js';
 import { AnimCurrent, AnimVectors, AnimVector, AnimFadings } from './anim.js';
 import { DragCurrent } from './drag.js';
@@ -71,23 +72,15 @@ export function render(s: State): void {
           if (s.addPieceZIndex) el.style.zIndex = posZIndex(key2pos(k), asWhite);
         }
         // same piece: flag as same
-        if (elPieceName === pieceNameOf(pieceAtKey) && (!fading || !el.cgFading)) {
-          samePieces.add(k);
-        }
+        if (elPieceName === pieceNameOf(pieceAtKey) && (!fading || !el.cgFading)) samePieces.add(k);
         // different piece: flag as moved unless it is a fading piece
-        else {
-          if (fading && elPieceName === pieceNameOf(fading)) {
-            el.classList.add('fading');
-            el.cgFading = true;
-          } else {
-            appendValue(movedPieces, elPieceName, el);
-          }
-        }
+        else if (fading && elPieceName === pieceNameOf(fading)) {
+          el.classList.add('fading');
+          el.cgFading = true;
+        } else appendValue(movedPieces, elPieceName, el);
       }
       // no piece: flag as moved
-      else {
-        appendValue(movedPieces, elPieceName, el);
-      }
+      else appendValue(movedPieces, elPieceName, el);
     } else if (isSquareNode(el)) {
       const cn = el.className;
       if (squares.get(k) === cn) sameSquares.add(k);
@@ -205,32 +198,34 @@ function posZIndex(pos: cg.Pos, asWhite: boolean): string {
   const minZ = 3;
   const rank = pos[1];
   const z = asWhite ? minZ + 7 - rank : minZ + rank;
-
   return `${z}`;
 }
 
 const pieceNameOf = (piece: cg.Piece): string => `${piece.color} ${piece.role}`;
 
+const normalizeLastMoveStandardRookCastle = (s: State, k: cg.Key): cg.Key =>
+  !!s.lastMove?.[1] &&
+  !s.pieces.has(s.lastMove[1]) &&
+  s.lastMove[0][0] === 'e' &&
+  ['h', 'a'].includes(s.lastMove[1][0]) &&
+  s.lastMove[0][1] === s.lastMove[1][1] &&
+  util.squaresBetween(...key2pos(s.lastMove[0]), ...key2pos(s.lastMove[1])).some(sq => s.pieces.has(sq))
+    ? (((k > s.lastMove[0] ? 'g' : 'c') + k[1]) as cg.Key)
+    : k;
+
 function computeSquareClasses(s: State): cg.SquareClasses {
   const squares: cg.SquareClasses = new Map();
   if (s.lastMove && s.highlight.lastMove)
-    for (const k of s.lastMove) {
-      addSquare(squares, k, 'last-move');
-    }
+    for (const [i, k] of s.lastMove.entries())
+      addSquare(squares, i === 1 ? normalizeLastMoveStandardRookCastle(s, k) : k, 'last-move');
   if (s.check && s.highlight.check) addSquare(squares, s.check, 'check');
   if (s.selected) {
     addSquare(squares, s.selected, 'selected');
     if (s.movable.showDests) {
-      const dests = s.movable.dests?.get(s.selected);
-      if (dests)
-        for (const k of dests) {
-          addSquare(squares, k, 'move-dest' + (s.pieces.has(k) ? ' oc' : ''));
-        }
-      const pDests = s.premovable.customDests?.get(s.selected) ?? s.premovable.dests;
-      if (pDests)
-        for (const k of pDests) {
-          addSquare(squares, k, 'premove-dest' + (s.pieces.has(k) ? ' oc' : ''));
-        }
+      for (const k of s.movable.dests?.get(s.selected) ?? [])
+        addSquare(squares, k, 'move-dest' + (s.pieces.has(k) ? ' oc' : ''));
+      for (const k of s.premovable.customDests?.get(s.selected) ?? s.premovable.dests ?? [])
+        addSquare(squares, k, 'premove-dest' + (s.pieces.has(k) ? ' oc' : ''));
     }
   }
   const premove = s.premovable.current;

package/src/state.ts

@@ -10,7 +10,7 @@ export interface HeadlessState {
   orientation: cg.Color; // board orientation. white | black
   turnColor: cg.Color; // turn to play. white | black
   check?: cg.Key; // square currently in check "a2"
-  lastMove?: cg.Key[]; // squares part of the last move ["c3"; "c4"]
+  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
@@ -52,7 +52,6 @@ export interface HeadlessState {
     dests?: cg.Key[]; // premove destinations for the current selection
     customDests?: cg.Dests; // use custom valid premoves. {"a2" ["a3" "a4"] "b1" ["a3" "c3"]}
     current?: cg.KeyPair; // keys of the current saved premove ["e2" "e4"]
-    unrestrictedPremoves?: boolean; // if falsy, the positions of friendly pieces will be used to trim premove options
     additionalPremoveRequirements: cg.Mobility;
     events: {
       set?: (orig: cg.Key, dest: cg.Key, metadata?: cg.SetPremoveMetadata) => void; // called after the premove has been set

package/src/svg.ts

@@ -32,7 +32,9 @@ import * as cg from './types.js';
 
 type CustomBrushes = Map<string, DrawBrush>; // by hash
 type Svg = { el: SVGElement; isCustom?: boolean };
-type AngleSlots = Set<number>; // arrow angle slots for label positioning
+const angleSlotVals = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] as const;
+type AngleSlot = (typeof angleSlotVals)[number];
+type AngleSlots = Set<AngleSlot>; // arrow angle slots for label positioning
 type ArrowDests = Map<cg.Key | undefined, AngleSlots>; // angle slots per dest
 
 export { createElement, setAttributes };
@@ -58,7 +60,7 @@ export function renderSvg(state: State, els: cg.Elements): void {
     const sources = dests.get(s.dest) ?? new Set(),
       from = pos2user(orient(key2pos(s.orig), state.orientation), bounds),
       to = pos2user(orient(key2pos(s.dest), state.orientation), bounds);
-    sources.add(moveAngle(from, to));
+    sources.add(angleToSlot(moveAngle(from, to)));
     dests.set(s.dest, sources);
   }
   const shapes: SyncableShape[] = [];
@@ -71,14 +73,14 @@ export function renderSvg(state: State, els: cg.Elements): void {
       shape: s,
       current: false,
       pendingErase: isPendingErase,
-      hash: shapeHash(s, isShort(s.dest, dests), false, bounds, isPendingErase),
+      hash: shapeHash(s, isShort(s.dest, dests), false, bounds, isPendingErase, angleCount(s.dest, dests)),
     });
   }
   if (cur && pendingEraseIdx === -1)
     shapes.push({
       shape: cur,
       current: true,
-      hash: shapeHash(cur, isShort(cur.dest, dests), true, bounds, false),
+      hash: shapeHash(cur, isShort(cur.dest, dests), true, bounds, false, angleCount(cur.dest, dests)),
       pendingErase: false,
     });
 
@@ -156,6 +158,7 @@ function shapeHash(
   current: boolean,
   bounds: DOMRectReadOnly,
   pendingErase: boolean,
+  angleCountOfDest: number,
 ): Hash {
   // a shape and an overlay svg share a lifetime and have the same cgHash attribute
   return [
@@ -163,6 +166,7 @@ function shapeHash(
     bounds.height,
     current,
     pendingErase && 'pendingErase',
+    angleCountOfDest,
     orig,
     dest,
     brush,
@@ -177,13 +181,10 @@ function shapeHash(
     .join(',');
 }
 
-function pieceHash(piece: DrawShapePiece): Hash {
-  return [piece.color, piece.role, piece.scale].filter(x => x).join(',');
-}
+const pieceHash = (piece: DrawShapePiece): Hash =>
+  [piece.color, piece.role, piece.scale].filter(x => x).join(',');
 
-function modifiersHash(m: DrawModifiers): Hash {
-  return [m.lineWidth, m.hilite].filter(x => x).join(',');
-}
+const modifiersHash = (m: DrawModifiers): Hash => [m.lineWidth, m.hilite].filter(x => x).join(',');
 
 function textHash(s: string): Hash {
   // Rolling hash with base 31 (cf. https://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript)
@@ -350,17 +351,23 @@ function renderLabel(
   return g;
 }
 
-function orient(pos: cg.Pos, color: cg.Color): cg.Pos {
-  return color === 'white' ? pos : [7 - pos[0], 7 - pos[1]];
-}
+const orient = (pos: cg.Pos, color: cg.Color): cg.Pos => (color === 'white' ? pos : [7 - pos[0], 7 - pos[1]]);
 
-function isShort(dest: cg.Key | undefined, dests: ArrowDests) {
-  return true === (dest && dests.has(dest) && dests.get(dest)!.size > 1);
-}
+const mod = (n: number, m: number): number => ((n % m) + m) % m;
 
-function createElement(tagName: string): SVGElement {
-  return document.createElementNS('http://www.w3.org/2000/svg', tagName);
-}
+const rotateAngleSlot = (slot: AngleSlot, steps: number): AngleSlot => mod(slot + steps, 16) as AngleSlot;
+
+const anyTwoCloserThan90Degrees = (slots: AngleSlots): boolean =>
+  [...slots].some(slot => [-3, -2, -1, 1, 2, 3].some(i => slots.has(rotateAngleSlot(slot, i))));
+
+const isShort = (dest: cg.Key | undefined, dests: ArrowDests): boolean =>
+  !!dest && dests.has(dest) && anyTwoCloserThan90Degrees(dests.get(dest)!);
+
+const createElement = (tagName: string): SVGElement =>
+  document.createElementNS('http://www.w3.org/2000/svg', tagName);
+
+const angleCount = (dest: cg.Key | undefined, dests: ArrowDests): number =>
+  dest && dests.has(dest) ? dests.get(dest)!.size : 0;
 
 function setAttributes(el: SVGElement, attrs: { [key: string]: any }): SVGElement {
   for (const key in attrs) {
@@ -369,8 +376,8 @@ function setAttributes(el: SVGElement, attrs: { [key: string]: any }): SVGElemen
   return el;
 }
 
-function makeCustomBrush(base: DrawBrush, modifiers: DrawModifiers | undefined): DrawBrush {
-  return !modifiers
+const makeCustomBrush = (base: DrawBrush, modifiers: DrawModifiers | undefined): DrawBrush =>
+  !modifiers
     ? base
     : {
         color: base.color,
@@ -378,28 +385,21 @@ function makeCustomBrush(base: DrawBrush, modifiers: DrawModifiers | undefined):
         lineWidth: Math.round(modifiers.lineWidth || base.lineWidth),
         key: [base.key, modifiers.lineWidth].filter(x => x).join(''),
       };
-}
 
-function circleWidth(): [number, number] {
-  return [3 / 64, 4 / 64];
-}
+const circleWidth = (): [number, number] => [3 / 64, 4 / 64];
 
-function lineWidth(brush: DrawBrush, current: boolean): number {
-  return ((brush.lineWidth || 10) * (current ? 0.85 : 1)) / 64;
-}
+const lineWidth = (brush: DrawBrush, current: boolean): number =>
+  ((brush.lineWidth || 10) * (current ? 0.85 : 1)) / 64;
 
 function hiliteOf(shape: DrawShape): { key?: string; color?: string } {
   const hilite = shape.modifiers?.hilite;
   return { key: hilite && `hilite-${hilite.replace('#', '')}`, color: hilite };
 }
 
-function opacity(brush: DrawBrush, current: boolean, pendingErase: boolean): number {
-  return (brush.opacity || 1) * (pendingErase ? 0.6 : current ? 0.9 : 1);
-}
+const opacity = (brush: DrawBrush, current: boolean, pendingErase: boolean): number =>
+  (brush.opacity || 1) * (pendingErase ? 0.6 : current ? 0.9 : 1);
 
-function arrowMargin(shorten: boolean): number {
-  return (shorten ? 20 : 10) / 64;
-}
+const arrowMargin = (shorten: boolean): number => (shorten ? 20 : 10) / 64;
 
 function pos2user(pos: cg.Pos, bounds: DOMRectReadOnly): cg.NumberPair {
   const xScale = Math.min(1, bounds.width / bounds.height);
@@ -424,14 +424,13 @@ function filterBox(from: cg.NumberPair, to: cg.NumberPair): SVGElement {
   });
 }
 
-function moveAngle(from: cg.NumberPair, to: cg.NumberPair, asSlot = true) {
-  const angle = Math.atan2(to[1] - from[1], to[0] - from[0]) + Math.PI;
-  return asSlot ? (Math.round((angle * 8) / Math.PI) + 16) % 16 : angle;
-}
+const angleToSlot = (angle: number): AngleSlot => mod(Math.round((angle * 8) / Math.PI), 16) as AngleSlot;
 
-function dist(from: cg.NumberPair, to: cg.NumberPair): number {
-  return Math.sqrt([from[0] - to[0], from[1] - to[1]].reduce((acc, x) => acc + x * x, 0));
-}
+const moveAngle = (from: cg.NumberPair, to: cg.NumberPair): number =>
+  Math.atan2(to[1] - from[1], to[0] - from[0]) + Math.PI;
+
+const dist = (from: cg.NumberPair, to: cg.NumberPair): number =>
+  Math.sqrt([from[0] - to[0], from[1] - to[1]].reduce((acc, x) => acc + x * x, 0));
 
 /*
  try to place label at the junction of the destination shaft and arrowhead. if there's more than
@@ -445,16 +444,14 @@ function dist(from: cg.NumberPair, to: cg.NumberPair): number {
 function labelCoords(from: cg.NumberPair, to: cg.NumberPair, slots?: AngleSlots): cg.NumberPair {
   let mag = dist(from, to);
   //if (mag === 0) return [from[0], from[1]];
-  const angle = moveAngle(from, to, false);
+  const angle = moveAngle(from, to);
   if (slots) {
     mag -= 33 / 64; // reduce by arrowhead length
-    if (slots.size > 1) {
+    if (anyTwoCloserThan90Degrees(slots)) {
       mag -= 10 / 64; // reduce by shortening factor
-      const slot = moveAngle(from, to);
-      if (slots.has((slot + 1) % 16) || slots.has((slot + 15) % 16)) {
-        if (slot & 1) mag -= 0.4;
-        // and by label size for the knight if another arrow is within pi / 8.
-      }
+      const slot = angleToSlot(angle);
+      // reduce by label size for the knight if another arrow is within pi / 8:
+      if (slot & 1 && [-1, 1].some(s => slots.has(rotateAngleSlot(slot, s)))) mag -= 0.4;
     }
   }
   return [from[0] - Math.cos(angle) * mag, from[1] - Math.sin(angle) * mag].map(

package/src/types.ts

@@ -124,9 +124,7 @@ export type MobilityContext = {
   allPieces: Pieces;
   friendlies: Pieces;
   enemies: Pieces;
-  unrestrictedPremoves: boolean;
   color: Color;
-  canCastle: boolean;
   rookFilesFriendlies: number[];
   lastMove: Key[] | undefined;
 };

package/src/wrap.ts

@@ -1,6 +1,6 @@
 import { HeadlessState } from './state.js';
 import { setVisible, createEl } from './util.js';
-import { colors, files, ranks, Elements } from './types.js';
+import { colors, files, ranks, Elements, Color } from './types.js';
 import { createElement as createSVG, setAttributes, createDefs } from './svg.js';
 
 export function renderWrap(element: HTMLElement, s: HeadlessState): Elements {
@@ -64,12 +64,15 @@ export function renderWrap(element: HTMLElement, s: HeadlessState): Elements {
           renderCoords(
             ranks.map(r => f + r),
             'squares rank' + rankN(i) + orientClass + ranksPositionClass,
+            i % 2 === 0 ? 'black' : 'white',
           ),
         ),
       );
     } else {
-      container.appendChild(renderCoords(ranks, 'ranks' + orientClass + ranksPositionClass));
-      container.appendChild(renderCoords(files, 'files' + orientClass));
+      container.appendChild(
+        renderCoords(ranks, 'ranks' + ranksPositionClass, s.ranksPosition === 'right' ? 'white' : 'black'),
+      );
+      container.appendChild(renderCoords(files, 'files', 'black'));
     }
   }
 
@@ -94,13 +97,14 @@ function svgContainer(cls: string, isShapes: boolean) {
   return svg;
 }
 
-function renderCoords(elems: readonly string[], className: string): HTMLElement {
+function renderCoords(elems: readonly string[], className: string, firstColor: Color): HTMLElement {
   const el = createEl('coords', className);
   let f: HTMLElement;
-  for (const elem of elems) {
-    f = createEl('coord');
+  elems.forEach((elem, i) => {
+    const light = i % 2 === (firstColor === 'white' ? 0 : 1);
+    f = createEl('coord', `coord-${light ? 'light' : 'dark'}`);
     f.textContent = elem;
     el.appendChild(f);
-  }
+  });
   return el;
 }