@lichess-org/chessground 9.2.3

package/src/fen.ts

@@ -0,0 +1,78 @@
+import { pos2key, invRanks } from './util.js';
+import * as cg from './types.js';
+
+export const initial: cg.FEN = 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR';
+
+const roles: { [letter: string]: cg.Role } = {
+  p: 'pawn',
+  r: 'rook',
+  n: 'knight',
+  b: 'bishop',
+  q: 'queen',
+  k: 'king',
+};
+
+const letters = {
+  pawn: 'p',
+  rook: 'r',
+  knight: 'n',
+  bishop: 'b',
+  queen: 'q',
+  king: 'k',
+};
+
+export function read(fen: cg.FEN): cg.Pieces {
+  if (fen === 'start') fen = initial;
+  const pieces: cg.Pieces = new Map();
+  let row = 7,
+    col = 0;
+  for (const c of fen) {
+    switch (c) {
+      case ' ':
+      case '[':
+        return pieces;
+      case '/':
+        --row;
+        if (row < 0) return pieces;
+        col = 0;
+        break;
+      case '~': {
+        const piece = pieces.get(pos2key([col - 1, row]));
+        if (piece) piece.promoted = true;
+        break;
+      }
+      default: {
+        const nb = c.charCodeAt(0);
+        if (nb < 57) col += nb - 48;
+        else {
+          const role = c.toLowerCase();
+          pieces.set(pos2key([col, row]), {
+            role: roles[role],
+            color: c === role ? 'black' : 'white',
+          });
+          ++col;
+        }
+      }
+    }
+  }
+  return pieces;
+}
+
+export function write(pieces: cg.Pieces): cg.FEN {
+  return invRanks
+    .map(y =>
+      cg.files
+        .map(x => {
+          const piece = pieces.get((x + y) as cg.Key);
+          if (piece) {
+            let p = letters[piece.role];
+            if (piece.color === 'white') p = p.toUpperCase();
+            if (piece.promoted) p += '~';
+            return p;
+          } else return '1';
+        })
+        .join(''),
+    )
+    .join('/')
+    .replace(/1{2,}/g, s => s.length.toString());
+}

package/src/premove.ts

@@ -0,0 +1,76 @@
+import * as util from './util.js';
+import * as cg from './types.js';
+
+type Mobility = (x1: number, y1: number, x2: number, y2: number) => boolean;
+
+const diff = (a: number, b: number): number => Math.abs(a - b);
+
+const pawn =
+  (color: cg.Color): Mobility =>
+  (x1, y1, x2, y2) =>
+    diff(x1, x2) < 2 &&
+    (color === 'white'
+      ? // allow 2 squares from first two ranks, for horde
+        y2 === y1 + 1 || (y1 <= 1 && y2 === y1 + 2 && x1 === x2)
+      : y2 === y1 - 1 || (y1 >= 6 && y2 === y1 - 2 && x1 === x2));
+
+export const knight: Mobility = (x1, y1, x2, y2) => {
+  const xd = diff(x1, x2);
+  const yd = diff(y1, y2);
+  return (xd === 1 && yd === 2) || (xd === 2 && yd === 1);
+};
+
+const bishop: Mobility = (x1, y1, x2, y2) => {
+  return diff(x1, x2) === diff(y1, y2);
+};
+
+const rook: Mobility = (x1, y1, x2, y2) => {
+  return x1 === x2 || y1 === y2;
+};
+
+export const queen: Mobility = (x1, y1, x2, y2) => {
+  return bishop(x1, y1, x2, y2) || rook(x1, y1, x2, y2);
+};
+
+const king =
+  (color: cg.Color, rookFiles: number[], canCastle: boolean): Mobility =>
+  (x1, y1, x2, y2) =>
+    (diff(x1, x2) < 2 && diff(y1, y2) < 2) ||
+    (canCastle &&
+      y1 === y2 &&
+      y1 === (color === 'white' ? 0 : 7) &&
+      ((x1 === 4 && ((x2 === 2 && rookFiles.includes(0)) || (x2 === 6 && rookFiles.includes(7)))) ||
+        rookFiles.includes(x2)));
+
+function rookFilesOf(pieces: cg.Pieces, color: cg.Color) {
+  const backrank = color === 'white' ? '1' : '8';
+  const files = [];
+  for (const [key, piece] of pieces) {
+    if (key[1] === backrank && piece.color === color && piece.role === 'rook') {
+      files.push(util.key2pos(key)[0]);
+    }
+  }
+  return files;
+}
+
+export function premove(pieces: cg.Pieces, key: cg.Key, canCastle: boolean): cg.Key[] {
+  const piece = pieces.get(key);
+  if (!piece) return [];
+  const pos = util.key2pos(key),
+    r = piece.role,
+    mobility: Mobility =
+      r === 'pawn'
+        ? pawn(piece.color)
+        : r === 'knight'
+          ? knight
+          : r === 'bishop'
+            ? bishop
+            : r === 'rook'
+              ? rook
+              : r === 'queen'
+                ? queen
+                : king(piece.color, rookFilesOf(pieces, piece.color), canCastle);
+  return util.allPos
+    .filter(pos2 => (pos[0] !== pos2[0] || pos[1] !== pos2[1]) && mobility(pos[0], pos[1], pos2[0], pos2[1]))
+    .map(util.pos2key);
+}

package/src/render.ts

@@ -0,0 +1,262 @@
+import { State } from './state.js';
+import { key2pos, createEl, posToTranslate as posToTranslateFromBounds, translate } from './util.js';
+import { whitePov } from './board.js';
+import { AnimCurrent, AnimVectors, AnimVector, AnimFadings } from './anim.js';
+import { DragCurrent } from './drag.js';
+import * as cg from './types.js';
+
+type PieceName = string; // `$color $role`
+
+// ported from https://github.com/lichess-org/lichobile/blob/master/src/chessground/render.ts
+// in case of bugs, blame @veloce
+export function render(s: State): void {
+  const asWhite: boolean = whitePov(s),
+    posToTranslate = posToTranslateFromBounds(s.dom.bounds()),
+    boardEl: HTMLElement = s.dom.elements.board,
+    pieces: cg.Pieces = s.pieces,
+    curAnim: AnimCurrent | undefined = s.animation.current,
+    anims: AnimVectors = curAnim ? curAnim.plan.anims : new Map(),
+    fadings: AnimFadings = curAnim ? curAnim.plan.fadings : new Map(),
+    curDrag: DragCurrent | undefined = s.draggable.current,
+    squares: cg.SquareClasses = computeSquareClasses(s),
+    samePieces: Set<cg.Key> = new Set(),
+    sameSquares: Set<cg.Key> = new Set(),
+    movedPieces: Map<PieceName, cg.PieceNode[]> = new Map(),
+    movedSquares: Map<string, cg.SquareNode[]> = new Map(); // by class name
+  let k: cg.Key,
+    el: cg.PieceNode | cg.SquareNode | undefined,
+    pieceAtKey: cg.Piece | undefined,
+    elPieceName: PieceName,
+    anim: AnimVector | undefined,
+    fading: cg.Piece | undefined,
+    pMvdset: cg.PieceNode[] | undefined,
+    pMvd: cg.PieceNode | undefined,
+    sMvdset: cg.SquareNode[] | undefined,
+    sMvd: cg.SquareNode | undefined;
+
+  // walk over all board dom elements, apply animations and flag moved pieces
+  el = boardEl.firstChild as cg.PieceNode | cg.SquareNode | undefined;
+  while (el) {
+    k = el.cgKey;
+    if (isPieceNode(el)) {
+      pieceAtKey = pieces.get(k);
+      anim = anims.get(k);
+      fading = fadings.get(k);
+      elPieceName = el.cgPiece;
+      // if piece not being dragged anymore, remove dragging style
+      if (el.cgDragging && (!curDrag || curDrag.orig !== k)) {
+        el.classList.remove('dragging');
+        translate(el, posToTranslate(key2pos(k), asWhite));
+        el.cgDragging = false;
+      }
+      // remove fading class if it still remains
+      if (!fading && el.cgFading) {
+        el.cgFading = false;
+        el.classList.remove('fading');
+      }
+      // there is now a piece at this dom key
+      if (pieceAtKey) {
+        // continue animation if already animating and same piece
+        // (otherwise it could animate a captured piece)
+        if (anim && el.cgAnimating && elPieceName === pieceNameOf(pieceAtKey)) {
+          const pos = key2pos(k);
+          pos[0] += anim[2];
+          pos[1] += anim[3];
+          el.classList.add('anim');
+          translate(el, posToTranslate(pos, asWhite));
+        } else if (el.cgAnimating) {
+          el.cgAnimating = false;
+          el.classList.remove('anim');
+          translate(el, posToTranslate(key2pos(k), asWhite));
+          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);
+        }
+        // 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);
+          }
+        }
+      }
+      // no piece: flag as moved
+      else {
+        appendValue(movedPieces, elPieceName, el);
+      }
+    } else if (isSquareNode(el)) {
+      const cn = el.className;
+      if (squares.get(k) === cn) sameSquares.add(k);
+      else appendValue(movedSquares, cn, el);
+    }
+    el = el.nextSibling as cg.PieceNode | cg.SquareNode | undefined;
+  }
+
+  // walk over all squares in current set, apply dom changes to moved squares
+  // or append new squares
+  for (const [sk, className] of squares) {
+    if (!sameSquares.has(sk)) {
+      sMvdset = movedSquares.get(className);
+      sMvd = sMvdset && sMvdset.pop();
+      const translation = posToTranslate(key2pos(sk), asWhite);
+      if (sMvd) {
+        sMvd.cgKey = sk;
+        translate(sMvd, translation);
+      } else {
+        const squareNode = createEl('square', className) as cg.SquareNode;
+        squareNode.cgKey = sk;
+        translate(squareNode, translation);
+        boardEl.insertBefore(squareNode, boardEl.firstChild);
+      }
+    }
+  }
+
+  // walk over all pieces in current set, apply dom changes to moved pieces
+  // or append new pieces
+  for (const [k, p] of pieces) {
+    anim = anims.get(k);
+    if (!samePieces.has(k)) {
+      pMvdset = movedPieces.get(pieceNameOf(p));
+      pMvd = pMvdset && pMvdset.pop();
+      // a same piece was moved
+      if (pMvd) {
+        // apply dom changes
+        pMvd.cgKey = k;
+        if (pMvd.cgFading) {
+          pMvd.classList.remove('fading');
+          pMvd.cgFading = false;
+        }
+        const pos = key2pos(k);
+        if (s.addPieceZIndex) pMvd.style.zIndex = posZIndex(pos, asWhite);
+        if (anim) {
+          pMvd.cgAnimating = true;
+          pMvd.classList.add('anim');
+          pos[0] += anim[2];
+          pos[1] += anim[3];
+        }
+        translate(pMvd, posToTranslate(pos, asWhite));
+      }
+      // no piece in moved obj: insert the new piece
+      // assumes the new piece is not being dragged
+      else {
+        const pieceName = pieceNameOf(p),
+          pieceNode = createEl('piece', pieceName) as cg.PieceNode,
+          pos = key2pos(k);
+
+        pieceNode.cgPiece = pieceName;
+        pieceNode.cgKey = k;
+        if (anim) {
+          pieceNode.cgAnimating = true;
+          pos[0] += anim[2];
+          pos[1] += anim[3];
+        }
+        translate(pieceNode, posToTranslate(pos, asWhite));
+
+        if (s.addPieceZIndex) pieceNode.style.zIndex = posZIndex(pos, asWhite);
+
+        boardEl.appendChild(pieceNode);
+      }
+    }
+  }
+
+  // remove any element that remains in the moved sets
+  for (const nodes of movedPieces.values()) removeNodes(s, nodes);
+  for (const nodes of movedSquares.values()) removeNodes(s, nodes);
+}
+
+export function renderResized(s: State): void {
+  const asWhite: boolean = whitePov(s),
+    posToTranslate = posToTranslateFromBounds(s.dom.bounds());
+  let el = s.dom.elements.board.firstChild as cg.PieceNode | cg.SquareNode | undefined;
+  while (el) {
+    if ((isPieceNode(el) && !el.cgAnimating) || isSquareNode(el)) {
+      translate(el, posToTranslate(key2pos(el.cgKey), asWhite));
+    }
+    el = el.nextSibling as cg.PieceNode | cg.SquareNode | undefined;
+  }
+}
+
+export function updateBounds(s: State): void {
+  const bounds = s.dom.elements.wrap.getBoundingClientRect();
+  const container = s.dom.elements.container;
+  const ratio = bounds.height / bounds.width;
+  const width = (Math.floor((bounds.width * window.devicePixelRatio) / 8) * 8) / window.devicePixelRatio;
+  const height = width * ratio;
+  container.style.width = width + 'px';
+  container.style.height = height + 'px';
+  s.dom.bounds.clear();
+
+  s.addDimensionsCssVarsTo?.style.setProperty('---cg-width', width + 'px');
+  s.addDimensionsCssVarsTo?.style.setProperty('---cg-height', height + 'px');
+}
+
+const isPieceNode = (el: cg.PieceNode | cg.SquareNode): el is cg.PieceNode => el.tagName === 'PIECE';
+const isSquareNode = (el: cg.PieceNode | cg.SquareNode): el is cg.SquareNode => el.tagName === 'SQUARE';
+
+function removeNodes(s: State, nodes: HTMLElement[]): void {
+  for (const node of nodes) s.dom.elements.board.removeChild(node);
+}
+
+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}`;
+
+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');
+    }
+  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' : ''));
+        }
+    }
+  }
+  const premove = s.premovable.current;
+  if (premove) for (const k of premove) addSquare(squares, k, 'current-premove');
+  else if (s.predroppable.current) addSquare(squares, s.predroppable.current.key, 'current-premove');
+
+  const o = s.exploding;
+  if (o) for (const k of o.keys) addSquare(squares, k, 'exploding' + o.stage);
+
+  if (s.highlight.custom) {
+    s.highlight.custom.forEach((v: string, k: cg.Key) => {
+      addSquare(squares, k, v);
+    });
+  }
+
+  return squares;
+}
+
+function addSquare(squares: cg.SquareClasses, key: cg.Key, klass: string): void {
+  const classes = squares.get(key);
+  if (classes) squares.set(key, `${classes} ${klass}`);
+  else squares.set(key, klass);
+}
+
+function appendValue<K, V>(map: Map<K, V[]>, key: K, value: V): void {
+  const arr = map.get(key);
+  if (arr) arr.push(value);
+  else map.set(key, [value]);
+}

package/src/state.ts

@@ -0,0 +1,199 @@
+import * as fen from './fen.js';
+import { AnimCurrent } from './anim.js';
+import { DragCurrent } from './drag.js';
+import { Drawable } from './draw.js';
+import { timer } from './util.js';
+import * as cg from './types.js';
+
+export interface HeadlessState {
+  pieces: cg.Pieces;
+  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"]
+  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
+  disableContextMenu: boolean; // because who needs a context menu on a chessboard
+  addPieceZIndex: boolean; // adds z-index values to pieces (for 3D)
+  addDimensionsCssVarsTo?: HTMLElement; // add ---cg-width and ---cg-height CSS vars containing the board's dimensions to this element
+  blockTouchScroll: boolean; // block scrolling via touch dragging on the board, e.g. for coordinate training
+  pieceKey: boolean; // add a data-key attribute to piece elements
+  trustAllEvents?: boolean; // disable checking for human only input (e.isTrusted)
+  highlight: {
+    lastMove: boolean; // add last-move class to squares
+    check: boolean; // add check class to squares
+    custom?: cg.SquareClasses; // add custom classes to custom squares
+  };
+  animation: {
+    enabled: boolean;
+    duration: number;
+    current?: AnimCurrent;
+  };
+  movable: {
+    free: boolean; // all moves are valid - board editor
+    color?: cg.Color | 'both'; // color that can move. white | black | both
+    dests?: cg.Dests; // valid moves. {"a2" ["a3" "a4"] "b1" ["a3" "c3"]}
+    showDests: boolean; // whether to add the move-dest class on squares
+    events: {
+      after?: (orig: cg.Key, dest: cg.Key, metadata: cg.MoveMetadata) => void; // called after the move has been played
+      afterNewPiece?: (role: cg.Role, key: cg.Key, metadata: cg.MoveMetadata) => void; // called after a new piece is dropped on the board
+    };
+    rookCastle: boolean; // castle by moving the king to the rook
+  };
+  premovable: {
+    enabled: boolean; // allow premoves for color that can not move
+    showDests: boolean; // whether to add the premove-dest class on squares
+    castle: boolean; // whether to allow king castle premoves
+    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"]
+    events: {
+      set?: (orig: cg.Key, dest: cg.Key, metadata?: cg.SetPremoveMetadata) => void; // called after the premove has been set
+      unset?: () => void; // called after the premove has been unset
+    };
+  };
+  predroppable: {
+    enabled: boolean; // allow predrops for color that can not move
+    current?: {
+      // current saved predrop {role: 'knight'; key: 'e4'}
+      role: cg.Role;
+      key: cg.Key;
+    };
+    events: {
+      set?: (role: cg.Role, key: cg.Key) => void; // called after the predrop has been set
+      unset?: () => void; // called after the predrop has been unset
+    };
+  };
+  draggable: {
+    enabled: boolean; // allow moves & premoves to use drag'n drop
+    distance: number; // minimum distance to initiate a drag; in pixels
+    autoDistance: boolean; // lets chessground set distance to zero when user drags pieces
+    showGhost: boolean; // show ghost of piece being dragged
+    deleteOnDropOff: boolean; // delete a piece when it is dropped off the board
+    current?: DragCurrent;
+  };
+  dropmode: {
+    active: boolean;
+    piece?: cg.Piece;
+  };
+  selectable: {
+    // disable to enforce dragging over click-click move
+    enabled: boolean;
+  };
+  stats: {
+    // was last piece dragged or clicked?
+    // needs default to false for touch
+    dragged: boolean;
+    ctrlKey?: boolean;
+  };
+  events: {
+    change?: () => void; // called after the situation changes on the board
+    // called after a piece has been moved.
+    // capturedPiece is undefined or like {color: 'white'; 'role': 'queen'}
+    move?: (orig: cg.Key, dest: cg.Key, capturedPiece?: cg.Piece) => void;
+    dropNewPiece?: (piece: cg.Piece, key: cg.Key) => void;
+    select?: (key: cg.Key) => void; // called when a square is selected
+    insert?: (elements: cg.Elements) => void; // when the board DOM has been (re)inserted
+  };
+  drawable: Drawable;
+  exploding?: cg.Exploding;
+  hold: cg.Timer;
+}
+
+export interface State extends HeadlessState {
+  dom: cg.Dom;
+}
+
+export function defaults(): HeadlessState {
+  return {
+    pieces: fen.read(fen.initial),
+    orientation: 'white',
+    turnColor: 'white',
+    coordinates: true,
+    coordinatesOnSquares: false,
+    ranksPosition: 'right',
+    autoCastle: true,
+    viewOnly: false,
+    disableContextMenu: false,
+    addPieceZIndex: false,
+    blockTouchScroll: false,
+    pieceKey: false,
+    trustAllEvents: false,
+    highlight: {
+      lastMove: true,
+      check: true,
+    },
+    animation: {
+      enabled: true,
+      duration: 200,
+    },
+    movable: {
+      free: true,
+      color: 'both',
+      showDests: true,
+      events: {},
+      rookCastle: true,
+    },
+    premovable: {
+      enabled: true,
+      showDests: true,
+      castle: true,
+      events: {},
+    },
+    predroppable: {
+      enabled: false,
+      events: {},
+    },
+    draggable: {
+      enabled: true,
+      distance: 3,
+      autoDistance: true,
+      showGhost: true,
+      deleteOnDropOff: false,
+    },
+    dropmode: {
+      active: false,
+    },
+    selectable: {
+      enabled: true,
+    },
+    stats: {
+      // on touchscreen, default to "tap-tap" moves
+      // instead of drag
+      dragged: !('ontouchstart' in window),
+    },
+    events: {},
+    drawable: {
+      enabled: true, // can draw
+      visible: true, // can view
+      defaultSnapToValidMove: true,
+      eraseOnClick: true,
+      shapes: [],
+      autoShapes: [],
+      brushes: {
+        green: { key: 'g', color: '#15781B', opacity: 1, lineWidth: 10 },
+        red: { key: 'r', color: '#882020', opacity: 1, lineWidth: 10 },
+        blue: { key: 'b', color: '#003088', opacity: 1, lineWidth: 10 },
+        yellow: { key: 'y', color: '#e68f00', opacity: 1, lineWidth: 10 },
+        paleBlue: { key: 'pb', color: '#003088', opacity: 0.4, lineWidth: 15 },
+        paleGreen: { key: 'pg', color: '#15781B', opacity: 0.4, lineWidth: 15 },
+        paleRed: { key: 'pr', color: '#882020', opacity: 0.4, lineWidth: 15 },
+        paleGrey: {
+          key: 'pgr',
+          color: '#4a4a4a',
+          opacity: 0.35,
+          lineWidth: 15,
+        },
+        purple: { key: 'purple', color: '#68217a', opacity: 0.65, lineWidth: 10 },
+        pink: { key: 'pink', color: '#ee2080', opacity: 0.5, lineWidth: 10 },
+        white: { key: 'white', color: 'white', opacity: 1, lineWidth: 10 },
+      },
+      prevSvgHash: '',
+    },
+    hold: timer(),
+  };
+}