@lichess-org/chessground 9.2.3

package/src/api.ts

@@ -0,0 +1,187 @@
+import { State } from './state.js';
+import * as board from './board.js';
+import { write as fenWrite } from './fen.js';
+import { Config, configure, applyAnimation } from './config.js';
+import { anim, render } from './anim.js';
+import { cancel as dragCancel, dragNewPiece } from './drag.js';
+import { DrawShape } from './draw.js';
+import { explosion } from './explosion.js';
+import * as cg from './types.js';
+
+export interface Api {
+  // reconfigure the instance. Accepts all config options, except for viewOnly & drawable.visible.
+  // board will be animated accordingly, if animations are enabled.
+  set(config: Config): void;
+
+  // read chessground state; write at your own risks.
+  state: State;
+
+  // get the position as a FEN string (only contains pieces, no flags)
+  // e.g. rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR
+  getFen(): cg.FEN;
+
+  // change the view angle
+  toggleOrientation(): void;
+
+  // perform a move programmatically
+  move(orig: cg.Key, dest: cg.Key): void;
+
+  // add and/or remove arbitrary pieces on the board
+  setPieces(pieces: cg.PiecesDiff): void;
+
+  // click a square programmatically
+  selectSquare(key: cg.Key | null, force?: boolean): void;
+
+  // put a new piece on the board
+  newPiece(piece: cg.Piece, key: cg.Key): void;
+
+  // play the current premove, if any; returns true if premove was played
+  playPremove(): boolean;
+
+  // cancel the current premove, if any
+  cancelPremove(): void;
+
+  // play the current predrop, if any; returns true if premove was played
+  playPredrop(validate: (drop: cg.Drop) => boolean): boolean;
+
+  // cancel the current predrop, if any
+  cancelPredrop(): void;
+
+  // cancel the current move being made
+  cancelMove(): void;
+
+  // cancel current move and prevent further ones
+  stop(): void;
+
+  // make squares explode (atomic chess)
+  explode(keys: cg.Key[]): void;
+
+  // programmatically draw user shapes
+  setShapes(shapes: DrawShape[]): void;
+
+  // programmatically draw auto shapes
+  setAutoShapes(shapes: DrawShape[]): void;
+
+  // square name at this DOM position (like "e4")
+  getKeyAtDomPos(pos: cg.NumberPair): cg.Key | undefined;
+
+  // only useful when CSS changes the board width/height ratio (for 3D)
+  redrawAll: cg.Redraw;
+
+  // for crazyhouse and board editors
+  dragNewPiece(piece: cg.Piece, event: cg.MouchEvent, force?: boolean): void;
+
+  // unbinds all events
+  // (important for document-wide events like scroll and mousemove)
+  destroy: cg.Unbind;
+}
+
+// see API types and documentations in dts/api.d.ts
+export function start(state: State, redrawAll: cg.Redraw): Api {
+  function toggleOrientation(): void {
+    board.toggleOrientation(state);
+    redrawAll();
+  }
+
+  return {
+    set(config): void {
+      if (config.orientation && config.orientation !== state.orientation) toggleOrientation();
+      applyAnimation(state, config);
+      (config.fen ? anim : render)(state => configure(state, config), state);
+    },
+
+    state,
+
+    getFen: () => fenWrite(state.pieces),
+
+    toggleOrientation,
+
+    setPieces(pieces): void {
+      anim(state => board.setPieces(state, pieces), state);
+    },
+
+    selectSquare(key, force): void {
+      if (key) anim(state => board.selectSquare(state, key, force), state);
+      else if (state.selected) {
+        board.unselect(state);
+        state.dom.redraw();
+      }
+    },
+
+    move(orig, dest): void {
+      anim(state => board.baseMove(state, orig, dest), state);
+    },
+
+    newPiece(piece, key): void {
+      anim(state => board.baseNewPiece(state, piece, key), state);
+    },
+
+    playPremove(): boolean {
+      if (state.premovable.current) {
+        if (anim(board.playPremove, state)) return true;
+        // if the premove couldn't be played, redraw to clear it up
+        state.dom.redraw();
+      }
+      return false;
+    },
+
+    playPredrop(validate): boolean {
+      if (state.predroppable.current) {
+        const result = board.playPredrop(state, validate);
+        state.dom.redraw();
+        return result;
+      }
+      return false;
+    },
+
+    cancelPremove(): void {
+      render(board.unsetPremove, state);
+    },
+
+    cancelPredrop(): void {
+      render(board.unsetPredrop, state);
+    },
+
+    cancelMove(): void {
+      render(state => {
+        board.cancelMove(state);
+        dragCancel(state);
+      }, state);
+    },
+
+    stop(): void {
+      render(state => {
+        board.stop(state);
+        dragCancel(state);
+      }, state);
+    },
+
+    explode(keys: cg.Key[]): void {
+      explosion(state, keys);
+    },
+
+    setAutoShapes(shapes: DrawShape[]): void {
+      render(state => (state.drawable.autoShapes = shapes), state);
+    },
+
+    setShapes(shapes: DrawShape[]): void {
+      render(state => (state.drawable.shapes = shapes.slice()), state);
+    },
+
+    getKeyAtDomPos(pos): cg.Key | undefined {
+      return board.getKeyAtDomPos(pos, board.whitePov(state), state.dom.bounds());
+    },
+
+    redrawAll,
+
+    dragNewPiece(piece, event, force): void {
+      dragNewPiece(state, piece, event, force);
+    },
+
+    destroy(): void {
+      board.stop(state);
+      state.dom.unbind && state.dom.unbind();
+      state.dom.destroyed = true;
+    },
+  };
+}

package/src/autoPieces.ts

@@ -0,0 +1,47 @@
+import { State } from './state.js';
+import { key2pos, createEl, posToTranslate as posToTranslateFromBounds, translateAndScale } from './util.js';
+import { whitePov } from './board.js';
+import * as cg from './types.js';
+import { DrawShape } from './draw.js';
+import { SyncableShape, Hash, syncShapes } from './sync.js';
+
+export function render(state: State, autoPieceEl: HTMLElement): void {
+  const autoPieces = state.drawable.autoShapes.filter(autoShape => autoShape.piece);
+  const autoPieceShapes: SyncableShape[] = autoPieces.map((s: DrawShape) => {
+    return {
+      shape: s,
+      hash: hash(s),
+      current: false,
+    };
+  });
+
+  syncShapes(autoPieceShapes, autoPieceEl, shape => renderShape(state, shape, state.dom.bounds()));
+}
+
+export function renderResized(state: State): void {
+  const asWhite: boolean = whitePov(state),
+    posToTranslate = posToTranslateFromBounds(state.dom.bounds());
+  let el = state.dom.elements.autoPieces?.firstChild as cg.PieceNode | undefined;
+  while (el) {
+    translateAndScale(el, posToTranslate(key2pos(el.cgKey), asWhite), el.cgScale);
+    el = el.nextSibling as cg.PieceNode | undefined;
+  }
+}
+
+function renderShape(state: State, { shape, hash }: SyncableShape, bounds: DOMRectReadOnly): cg.PieceNode {
+  const orig = shape.orig;
+  const role = shape.piece?.role;
+  const color = shape.piece?.color;
+  const scale = shape.piece?.scale;
+
+  const pieceEl = createEl('piece', `${role} ${color}`) as cg.PieceNode;
+  pieceEl.setAttribute('cgHash', hash);
+  pieceEl.cgKey = orig;
+  pieceEl.cgScale = scale;
+  translateAndScale(pieceEl, posToTranslateFromBounds(bounds)(key2pos(orig), whitePov(state)), scale);
+
+  return pieceEl;
+}
+
+const hash = (autoPiece: DrawShape): Hash =>
+  [autoPiece.orig, autoPiece.piece?.role, autoPiece.piece?.color, autoPiece.piece?.scale].join(',');

package/src/board.ts

@@ -0,0 +1,371 @@
+import { HeadlessState } from './state.js';
+import { pos2key, key2pos, opposite, distanceSq, allPos, computeSquareCenter } from './util.js';
+import { premove, queen, knight } from './premove.js';
+import * as cg from './types.js';
+
+export function callUserFunction<T extends (...args: any[]) => void>(
+  f: T | undefined,
+  ...args: Parameters<T>
+): void {
+  if (f) setTimeout(() => f(...args), 1);
+}
+
+export function toggleOrientation(state: HeadlessState): void {
+  state.orientation = opposite(state.orientation);
+  state.animation.current = state.draggable.current = state.selected = undefined;
+}
+
+export function reset(state: HeadlessState): void {
+  state.lastMove = undefined;
+  unselect(state);
+  unsetPremove(state);
+  unsetPredrop(state);
+}
+
+export function setPieces(state: HeadlessState, pieces: cg.PiecesDiff): void {
+  for (const [key, piece] of pieces) {
+    if (piece) state.pieces.set(key, piece);
+    else state.pieces.delete(key);
+  }
+}
+
+export function setCheck(state: HeadlessState, color: cg.Color | boolean): void {
+  state.check = undefined;
+  if (color === true) color = state.turnColor;
+  if (color)
+    for (const [k, p] of state.pieces) {
+      if (p.role === 'king' && p.color === color) {
+        state.check = k;
+      }
+    }
+}
+
+function setPremove(state: HeadlessState, orig: cg.Key, dest: cg.Key, meta: cg.SetPremoveMetadata): void {
+  unsetPredrop(state);
+  state.premovable.current = [orig, dest];
+  callUserFunction(state.premovable.events.set, orig, dest, meta);
+}
+
+export function unsetPremove(state: HeadlessState): void {
+  if (state.premovable.current) {
+    state.premovable.current = undefined;
+    callUserFunction(state.premovable.events.unset);
+  }
+}
+
+function setPredrop(state: HeadlessState, role: cg.Role, key: cg.Key): void {
+  unsetPremove(state);
+  state.predroppable.current = { role, key };
+  callUserFunction(state.predroppable.events.set, role, key);
+}
+
+export function unsetPredrop(state: HeadlessState): void {
+  const pd = state.predroppable;
+  if (pd.current) {
+    pd.current = undefined;
+    callUserFunction(pd.events.unset);
+  }
+}
+
+function tryAutoCastle(state: HeadlessState, orig: cg.Key, dest: cg.Key): boolean {
+  if (!state.autoCastle) return false;
+
+  const king = state.pieces.get(orig);
+  if (!king || king.role !== 'king') return false;
+
+  const origPos = key2pos(orig);
+  const destPos = key2pos(dest);
+  if ((origPos[1] !== 0 && origPos[1] !== 7) || origPos[1] !== destPos[1]) return false;
+  if (origPos[0] === 4 && !state.pieces.has(dest)) {
+    if (destPos[0] === 6) dest = pos2key([7, destPos[1]]);
+    else if (destPos[0] === 2) dest = pos2key([0, destPos[1]]);
+  }
+  const rook = state.pieces.get(dest);
+  if (!rook || rook.color !== king.color || rook.role !== 'rook') return false;
+
+  state.pieces.delete(orig);
+  state.pieces.delete(dest);
+
+  if (origPos[0] < destPos[0]) {
+    state.pieces.set(pos2key([6, destPos[1]]), king);
+    state.pieces.set(pos2key([5, destPos[1]]), rook);
+  } else {
+    state.pieces.set(pos2key([2, destPos[1]]), king);
+    state.pieces.set(pos2key([3, destPos[1]]), rook);
+  }
+  return true;
+}
+
+export function baseMove(state: HeadlessState, orig: cg.Key, dest: cg.Key): cg.Piece | boolean {
+  const origPiece = state.pieces.get(orig),
+    destPiece = state.pieces.get(dest);
+  if (orig === dest || !origPiece) return false;
+  const captured = destPiece && destPiece.color !== origPiece.color ? destPiece : undefined;
+  if (dest === state.selected) unselect(state);
+  callUserFunction(state.events.move, orig, dest, captured);
+  if (!tryAutoCastle(state, orig, dest)) {
+    state.pieces.set(dest, origPiece);
+    state.pieces.delete(orig);
+  }
+  state.lastMove = [orig, dest];
+  state.check = undefined;
+  callUserFunction(state.events.change);
+  return captured || true;
+}
+
+export function baseNewPiece(state: HeadlessState, piece: cg.Piece, key: cg.Key, force?: boolean): boolean {
+  if (state.pieces.has(key)) {
+    if (force) state.pieces.delete(key);
+    else return false;
+  }
+  callUserFunction(state.events.dropNewPiece, piece, key);
+  state.pieces.set(key, piece);
+  state.lastMove = [key];
+  state.check = undefined;
+  callUserFunction(state.events.change);
+  state.movable.dests = undefined;
+  state.turnColor = opposite(state.turnColor);
+  return true;
+}
+
+function baseUserMove(state: HeadlessState, orig: cg.Key, dest: cg.Key): cg.Piece | boolean {
+  const result = baseMove(state, orig, dest);
+  if (result) {
+    state.movable.dests = undefined;
+    state.turnColor = opposite(state.turnColor);
+    state.animation.current = undefined;
+  }
+  return result;
+}
+
+export function userMove(state: HeadlessState, orig: cg.Key, dest: cg.Key): boolean {
+  if (canMove(state, orig, dest)) {
+    const result = baseUserMove(state, orig, dest);
+    if (result) {
+      const holdTime = state.hold.stop();
+      unselect(state);
+      const metadata: cg.MoveMetadata = {
+        premove: false,
+        ctrlKey: state.stats.ctrlKey,
+        holdTime,
+      };
+      if (result !== true) metadata.captured = result;
+      callUserFunction(state.movable.events.after, orig, dest, metadata);
+      return true;
+    }
+  } else if (canPremove(state, orig, dest)) {
+    setPremove(state, orig, dest, {
+      ctrlKey: state.stats.ctrlKey,
+    });
+    unselect(state);
+    return true;
+  }
+  unselect(state);
+  return false;
+}
+
+export function dropNewPiece(state: HeadlessState, orig: cg.Key, dest: cg.Key, force?: boolean): void {
+  const piece = state.pieces.get(orig);
+  if (piece && (canDrop(state, orig, dest) || force)) {
+    state.pieces.delete(orig);
+    baseNewPiece(state, piece, dest, force);
+    callUserFunction(state.movable.events.afterNewPiece, piece.role, dest, {
+      premove: false,
+      predrop: false,
+    });
+  } else if (piece && canPredrop(state, orig, dest)) {
+    setPredrop(state, piece.role, dest);
+  } else {
+    unsetPremove(state);
+    unsetPredrop(state);
+  }
+  state.pieces.delete(orig);
+  unselect(state);
+}
+
+export function selectSquare(state: HeadlessState, key: cg.Key, force?: boolean): void {
+  callUserFunction(state.events.select, key);
+  if (state.selected) {
+    if (state.selected === key && !state.draggable.enabled) {
+      unselect(state);
+      state.hold.cancel();
+      return;
+    } else if ((state.selectable.enabled || force) && state.selected !== key) {
+      if (userMove(state, state.selected, key)) {
+        state.stats.dragged = false;
+        return;
+      }
+    }
+  }
+  if (
+    (state.selectable.enabled || state.draggable.enabled) &&
+    (isMovable(state, key) || isPremovable(state, key))
+  ) {
+    setSelected(state, key);
+    state.hold.start();
+  }
+}
+
+export function setSelected(state: HeadlessState, key: cg.Key): void {
+  state.selected = key;
+  if (isPremovable(state, key)) {
+    // calculate chess premoves if custom premoves are not passed
+    if (!state.premovable.customDests) {
+      state.premovable.dests = premove(state.pieces, key, state.premovable.castle);
+    }
+  } else state.premovable.dests = undefined;
+}
+
+export function unselect(state: HeadlessState): void {
+  state.selected = undefined;
+  state.premovable.dests = undefined;
+  state.hold.cancel();
+}
+
+function isMovable(state: HeadlessState, orig: cg.Key): boolean {
+  const piece = state.pieces.get(orig);
+  return (
+    !!piece &&
+    (state.movable.color === 'both' ||
+      (state.movable.color === piece.color && state.turnColor === piece.color))
+  );
+}
+
+export const canMove = (state: HeadlessState, orig: cg.Key, dest: cg.Key): boolean =>
+  orig !== dest &&
+  isMovable(state, orig) &&
+  (state.movable.free || !!state.movable.dests?.get(orig)?.includes(dest));
+
+function canDrop(state: HeadlessState, orig: cg.Key, dest: cg.Key): boolean {
+  const piece = state.pieces.get(orig);
+  return (
+    !!piece &&
+    (orig === dest || !state.pieces.has(dest)) &&
+    (state.movable.color === 'both' ||
+      (state.movable.color === piece.color && state.turnColor === piece.color))
+  );
+}
+
+function isPremovable(state: HeadlessState, orig: cg.Key): boolean {
+  const piece = state.pieces.get(orig);
+  return (
+    !!piece &&
+    state.premovable.enabled &&
+    state.movable.color === piece.color &&
+    state.turnColor !== piece.color
+  );
+}
+
+function canPremove(state: HeadlessState, orig: cg.Key, dest: cg.Key): boolean {
+  const validPremoves: cg.Key[] =
+    state.premovable.customDests?.get(orig) ?? premove(state.pieces, orig, state.premovable.castle);
+  return orig !== dest && isPremovable(state, orig) && validPremoves.includes(dest);
+}
+
+function canPredrop(state: HeadlessState, orig: cg.Key, dest: cg.Key): boolean {
+  const piece = state.pieces.get(orig);
+  const destPiece = state.pieces.get(dest);
+  return (
+    !!piece &&
+    (!destPiece || destPiece.color !== state.movable.color) &&
+    state.predroppable.enabled &&
+    (piece.role !== 'pawn' || (dest[1] !== '1' && dest[1] !== '8')) &&
+    state.movable.color === piece.color &&
+    state.turnColor !== piece.color
+  );
+}
+
+export function isDraggable(state: HeadlessState, orig: cg.Key): boolean {
+  const piece = state.pieces.get(orig);
+  return (
+    !!piece &&
+    state.draggable.enabled &&
+    (state.movable.color === 'both' ||
+      (state.movable.color === piece.color && (state.turnColor === piece.color || state.premovable.enabled)))
+  );
+}
+
+export function playPremove(state: HeadlessState): boolean {
+  const move = state.premovable.current;
+  if (!move) return false;
+  const orig = move[0],
+    dest = move[1];
+  let success = false;
+  if (canMove(state, orig, dest)) {
+    const result = baseUserMove(state, orig, dest);
+    if (result) {
+      const metadata: cg.MoveMetadata = { premove: true };
+      if (result !== true) metadata.captured = result;
+      callUserFunction(state.movable.events.after, orig, dest, metadata);
+      success = true;
+    }
+  }
+  unsetPremove(state);
+  return success;
+}
+
+export function playPredrop(state: HeadlessState, validate: (drop: cg.Drop) => boolean): boolean {
+  const drop = state.predroppable.current;
+  let success = false;
+  if (!drop) return false;
+  if (validate(drop)) {
+    const piece = {
+      role: drop.role,
+      color: state.movable.color,
+    } as cg.Piece;
+    if (baseNewPiece(state, piece, drop.key)) {
+      callUserFunction(state.movable.events.afterNewPiece, drop.role, drop.key, {
+        premove: false,
+        predrop: true,
+      });
+      success = true;
+    }
+  }
+  unsetPredrop(state);
+  return success;
+}
+
+export function cancelMove(state: HeadlessState): void {
+  unsetPremove(state);
+  unsetPredrop(state);
+  unselect(state);
+}
+
+export function stop(state: HeadlessState): void {
+  state.movable.color = state.movable.dests = state.animation.current = undefined;
+  cancelMove(state);
+}
+
+export function getKeyAtDomPos(
+  pos: cg.NumberPair,
+  asWhite: boolean,
+  bounds: DOMRectReadOnly,
+): cg.Key | undefined {
+  let file = Math.floor((8 * (pos[0] - bounds.left)) / bounds.width);
+  if (!asWhite) file = 7 - file;
+  let rank = 7 - Math.floor((8 * (pos[1] - bounds.top)) / bounds.height);
+  if (!asWhite) rank = 7 - rank;
+  return file >= 0 && file < 8 && rank >= 0 && rank < 8 ? pos2key([file, rank]) : undefined;
+}
+
+export function getSnappedKeyAtDomPos(
+  orig: cg.Key,
+  pos: cg.NumberPair,
+  asWhite: boolean,
+  bounds: DOMRectReadOnly,
+): cg.Key | undefined {
+  const origPos = key2pos(orig);
+  const validSnapPos = allPos.filter(
+    pos2 =>
+      queen(origPos[0], origPos[1], pos2[0], pos2[1]) || knight(origPos[0], origPos[1], pos2[0], pos2[1]),
+  );
+  const validSnapCenters = validSnapPos.map(pos2 => computeSquareCenter(pos2key(pos2), asWhite, bounds));
+  const validSnapDistances = validSnapCenters.map(pos2 => distanceSq(pos, pos2));
+  const [, closestSnapIndex] = validSnapDistances.reduce(
+    (a, b, index) => (a[0] < b ? a : [b, index]),
+    [validSnapDistances[0], 0],
+  );
+  return pos2key(validSnapPos[closestSnapIndex]);
+}
+
+export const whitePov = (s: HeadlessState): boolean => s.orientation === 'white';

package/src/chessground.ts

@@ -0,0 +1,67 @@
+import { Api, start } from './api.js';
+import { Config, configure } from './config.js';
+import { HeadlessState, State, defaults } from './state.js';
+
+import { renderWrap } from './wrap.js';
+import * as events from './events.js';
+import { render, renderResized, updateBounds } from './render.js';
+import * as autoPieces from './autoPieces.js';
+import * as svg from './svg.js';
+import * as util from './util.js';
+
+export function initModule({ el, config }: { el: HTMLElement; config?: Config }): Api {
+  return Chessground(el, config);
+}
+
+export function Chessground(element: HTMLElement, config?: Config): Api {
+  const maybeState: State | HeadlessState = defaults();
+
+  configure(maybeState, config || {});
+
+  function redrawAll(): State {
+    const prevUnbind = 'dom' in maybeState ? maybeState.dom.unbind : undefined;
+    // compute bounds from existing board element if possible
+    // this allows non-square boards from CSS to be handled (for 3D)
+    const elements = renderWrap(element, maybeState),
+      bounds = util.memo(() => elements.board.getBoundingClientRect()),
+      redrawNow = (skipSvg?: boolean): void => {
+        render(state);
+        if (elements.autoPieces) autoPieces.render(state, elements.autoPieces);
+        if (!skipSvg && elements.svg) svg.renderSvg(state, elements.svg, elements.customSvg!);
+      },
+      onResize = (): void => {
+        updateBounds(state);
+        renderResized(state);
+        if (elements.autoPieces) autoPieces.renderResized(state);
+      };
+    const state = maybeState as State;
+    state.dom = {
+      elements,
+      bounds,
+      redraw: debounceRedraw(redrawNow),
+      redrawNow,
+      unbind: prevUnbind,
+    };
+    state.drawable.prevSvgHash = '';
+    updateBounds(state);
+    redrawNow(false);
+    events.bindBoard(state, onResize);
+    if (!prevUnbind) state.dom.unbind = events.bindDocument(state, onResize);
+    state.events.insert && state.events.insert(elements);
+    return state;
+  }
+
+  return start(redrawAll(), redrawAll);
+}
+
+function debounceRedraw(redrawNow: (skipSvg?: boolean) => void): () => void {
+  let redrawing = false;
+  return () => {
+    if (redrawing) return;
+    redrawing = true;
+    requestAnimationFrame(() => {
+      redrawNow();
+      redrawing = false;
+    });
+  };
+}