@lichess-org/chessground 9.2.3

package/src/svg.ts

@@ -0,0 +1,441 @@
+import { State } from './state.js';
+import { key2pos } from './util.js';
+import { Drawable, DrawShape, DrawShapePiece, DrawBrush, DrawBrushes, DrawModifiers } from './draw.js';
+import { SyncableShape, Hash } from './sync.js';
+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
+type ArrowDests = Map<cg.Key | undefined, AngleSlots>; // angle slots per dest
+
+const hilites: { [name: string]: DrawBrush } = {
+  hilitePrimary: { key: 'hilitePrimary', color: '#3291ff', opacity: 1, lineWidth: 1 },
+  hiliteWhite: { key: 'hiliteWhite', color: '#ffffff', opacity: 1, lineWidth: 1 },
+};
+
+export { createElement, setAttributes };
+
+export function createDefs(): Element {
+  const defs = createElement('defs');
+  const filter = setAttributes(createElement('filter'), { id: 'cg-filter-blur' });
+  filter.appendChild(setAttributes(createElement('feGaussianBlur'), { stdDeviation: '0.019' }));
+  defs.appendChild(filter);
+  return defs;
+}
+
+export function renderSvg(state: State, shapesEl: SVGElement, customsEl: SVGElement): void {
+  const d = state.drawable,
+    curD = d.current,
+    cur = curD && curD.mouseSq ? (curD as DrawShape) : undefined,
+    dests: ArrowDests = new Map(),
+    bounds = state.dom.bounds(),
+    nonPieceAutoShapes = d.autoShapes.filter(autoShape => !autoShape.piece);
+
+  for (const s of d.shapes.concat(nonPieceAutoShapes).concat(cur ? [cur] : [])) {
+    if (!s.dest) continue;
+    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));
+    dests.set(s.dest, sources);
+  }
+  const shapes: SyncableShape[] = d.shapes.concat(nonPieceAutoShapes).map((s: DrawShape) => {
+    return {
+      shape: s,
+      current: false,
+      hash: shapeHash(s, isShort(s.dest, dests), false, bounds),
+    };
+  });
+  if (cur)
+    shapes.push({
+      shape: cur,
+      current: true,
+      hash: shapeHash(cur, isShort(cur.dest, dests), true, bounds),
+    });
+
+  const fullHash = shapes.map(sc => sc.hash).join(';');
+  if (fullHash === state.drawable.prevSvgHash) return;
+  state.drawable.prevSvgHash = fullHash;
+
+  /*
+    -- DOM hierarchy --
+    <svg class="cg-shapes">      (<= svg)
+      <defs>
+        ...(for brushes)...
+      </defs>
+      <g>
+        ...(for arrows and circles)...
+      </g>
+    </svg>
+    <svg class="cg-custom-svgs"> (<= customSvg)
+      <g>
+        ...(for custom svgs)...
+      </g>
+    </svg>
+  */
+
+  const defsEl = shapesEl.querySelector('defs') as SVGElement;
+
+  syncDefs(d, shapes, defsEl);
+  syncShapes(shapes, shapesEl.querySelector('g')!, customsEl.querySelector('g')!, s =>
+    renderShape(state, s, d.brushes, dests, bounds),
+  );
+}
+
+// append only. Don't try to update/remove.
+function syncDefs(d: Drawable, shapes: SyncableShape[], defsEl: SVGElement) {
+  const brushes: CustomBrushes = new Map();
+  let brush: DrawBrush;
+  for (const s of shapes.filter(s => s.shape.dest && s.shape.brush)) {
+    brush = makeCustomBrush(d.brushes[s.shape.brush!], s.shape.modifiers);
+    if (s.shape.modifiers?.hilite) brushes.set(hilite(brush).key, hilite(brush));
+    brushes.set(brush.key, brush);
+  }
+  const keysInDom = new Set();
+  let el: SVGElement | undefined = defsEl.firstElementChild as SVGElement;
+  while (el) {
+    keysInDom.add(el.getAttribute('cgKey'));
+    el = el.nextElementSibling as SVGElement | undefined;
+  }
+  for (const [key, brush] of brushes.entries()) {
+    if (!keysInDom.has(key)) defsEl.appendChild(renderMarker(brush));
+  }
+}
+
+function syncShapes(
+  syncables: SyncableShape[],
+  shapes: Element,
+  customs: Element,
+  renderShape: (shape: SyncableShape) => Svg[],
+): void {
+  const hashesInDom = new Map();
+
+  for (const sc of syncables) hashesInDom.set(sc.hash, false);
+  for (const root of [shapes, customs]) {
+    const toRemove: SVGElement[] = [];
+    let el: SVGElement | undefined = root.firstElementChild as SVGElement,
+      elHash: Hash | null;
+    while (el) {
+      elHash = el.getAttribute('cgHash') as Hash;
+      if (hashesInDom.has(elHash)) hashesInDom.set(elHash, true);
+      else toRemove.push(el);
+      el = el.nextElementSibling as SVGElement | undefined;
+    }
+    for (const el of toRemove) root.removeChild(el);
+  }
+  // insert shapes that are not yet in dom
+  for (const sc of syncables.filter(s => !hashesInDom.get(s.hash))) {
+    for (const svg of renderShape(sc)) {
+      if (svg.isCustom) customs.appendChild(svg.el);
+      else shapes.appendChild(svg.el);
+    }
+  }
+}
+
+function shapeHash(
+  { orig, dest, brush, piece, modifiers, customSvg, label }: DrawShape,
+  shorten: boolean,
+  current: boolean,
+  bounds: DOMRectReadOnly,
+): Hash {
+  // a shape and an overlay svg share a lifetime and have the same cgHash attribute
+  return [
+    bounds.width,
+    bounds.height,
+    current,
+    orig,
+    dest,
+    brush,
+    shorten && '-',
+    piece && pieceHash(piece),
+    modifiers && modifiersHash(modifiers),
+    customSvg && `custom-${textHash(customSvg.html)},${customSvg.center?.[0] ?? 'o'}`,
+    label && `label-${textHash(label.text)}`,
+  ]
+    .filter(x => x)
+    .join(',');
+}
+
+function pieceHash(piece: DrawShapePiece): Hash {
+  return [piece.color, piece.role, piece.scale].filter(x => x).join(',');
+}
+
+function modifiersHash(m: DrawModifiers): Hash {
+  return [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)
+  let h = 0;
+  for (let i = 0; i < s.length; i++) {
+    h = ((h << 5) - h + s.charCodeAt(i)) >>> 0;
+  }
+  return h.toString();
+}
+
+function renderShape(
+  state: State,
+  { shape, current, hash }: SyncableShape,
+  brushes: DrawBrushes,
+  dests: ArrowDests,
+  bounds: DOMRectReadOnly,
+): Svg[] {
+  const from = pos2user(orient(key2pos(shape.orig), state.orientation), bounds),
+    to = shape.dest ? pos2user(orient(key2pos(shape.dest), state.orientation), bounds) : from,
+    brush = shape.brush && makeCustomBrush(brushes[shape.brush], shape.modifiers),
+    slots = dests.get(shape.dest),
+    svgs: Svg[] = [];
+
+  if (brush) {
+    const el = setAttributes(createElement('g'), { cgHash: hash });
+    svgs.push({ el });
+
+    if (from[0] !== to[0] || from[1] !== to[1])
+      el.appendChild(renderArrow(shape, brush, from, to, current, isShort(shape.dest, dests)));
+    else el.appendChild(renderCircle(brushes[shape.brush!], from, current, bounds));
+  }
+  if (shape.label) {
+    const label = shape.label;
+    label.fill ??= shape.brush && brushes[shape.brush].color;
+    const corner = shape.brush ? undefined : 'tr';
+    svgs.push({ el: renderLabel(label, hash, from, to, slots, corner), isCustom: true });
+  }
+  if (shape.customSvg) {
+    const on = shape.customSvg.center ?? 'orig';
+    const [x, y] =
+      on === 'label' ? labelCoords(from, to, slots).map(c => c - 0.5) : on === 'dest' ? to : from;
+    const el = setAttributes(createElement('g'), { transform: `translate(${x},${y})`, cgHash: hash });
+    el.innerHTML = `<svg width="1" height="1" viewBox="0 0 100 100">${shape.customSvg.html}</svg>`;
+    svgs.push({ el, isCustom: true });
+  }
+  return svgs;
+}
+
+function renderCircle(
+  brush: DrawBrush,
+  at: cg.NumberPair,
+  current: boolean,
+  bounds: DOMRectReadOnly,
+): SVGElement {
+  const widths = circleWidth(),
+    radius = (bounds.width + bounds.height) / (4 * Math.max(bounds.width, bounds.height));
+  return setAttributes(createElement('circle'), {
+    stroke: brush.color,
+    'stroke-width': widths[current ? 0 : 1],
+    fill: 'none',
+    opacity: opacity(brush, current),
+    cx: at[0],
+    cy: at[1],
+    r: radius - widths[1] / 2,
+  });
+}
+
+function hilite(brush: DrawBrush): DrawBrush {
+  return ['#ffffff', '#fff', 'white'].includes(brush.color)
+    ? hilites['hilitePrimary']
+    : hilites['hiliteWhite'];
+}
+
+function renderArrow(
+  s: DrawShape,
+  brush: DrawBrush,
+  from: cg.NumberPair,
+  to: cg.NumberPair,
+  current: boolean,
+  shorten: boolean,
+): SVGElement {
+  function renderLine(isHilite: boolean) {
+    const m = arrowMargin(shorten && !current),
+      dx = to[0] - from[0],
+      dy = to[1] - from[1],
+      angle = Math.atan2(dy, dx),
+      xo = Math.cos(angle) * m,
+      yo = Math.sin(angle) * m;
+    return setAttributes(createElement('line'), {
+      stroke: isHilite ? hilite(brush).color : brush.color,
+      'stroke-width': lineWidth(brush, current) + (isHilite ? 0.04 : 0),
+      'stroke-linecap': 'round',
+      'marker-end': `url(#arrowhead-${isHilite ? hilite(brush).key : brush.key})`,
+      opacity: s.modifiers?.hilite ? 1 : opacity(brush, current),
+      x1: from[0],
+      y1: from[1],
+      x2: to[0] - xo,
+      y2: to[1] - yo,
+    });
+  }
+  if (!s.modifiers?.hilite) return renderLine(false);
+
+  const g = createElement('g');
+  const blurred = setAttributes(createElement('g'), { filter: 'url(#cg-filter-blur)' });
+  blurred.appendChild(filterBox(from, to));
+  blurred.appendChild(renderLine(true));
+  g.appendChild(blurred);
+  g.appendChild(renderLine(false));
+  return g;
+}
+
+function renderMarker(brush: DrawBrush): SVGElement {
+  const marker = setAttributes(createElement('marker'), {
+    id: 'arrowhead-' + brush.key,
+    orient: 'auto',
+    overflow: 'visible',
+    markerWidth: 4,
+    markerHeight: 4,
+    refX: brush.key.startsWith('hilite') ? 1.86 : 2.05,
+    refY: 2,
+  });
+  marker.appendChild(
+    setAttributes(createElement('path'), {
+      d: 'M0,0 V4 L3,2 Z',
+      fill: brush.color,
+    }),
+  );
+  marker.setAttribute('cgKey', brush.key);
+  return marker;
+}
+
+function renderLabel(
+  label: { text: string; fill?: string },
+  hash: string,
+  from: cg.NumberPair,
+  to: cg.NumberPair,
+  slots?: AngleSlots,
+  corner?: 'tr',
+): SVGElement {
+  const labelSize = 0.4,
+    fontSize = labelSize * 0.75 ** label.text.length,
+    at = labelCoords(from, to, slots),
+    cornerOff = corner === 'tr' ? 0.4 : 0,
+    g = setAttributes(createElement('g'), {
+      transform: `translate(${at[0] + cornerOff},${at[1] - cornerOff})`,
+      cgHash: hash,
+    });
+  g.appendChild(
+    setAttributes(createElement('circle'), {
+      r: labelSize / 2,
+      'fill-opacity': corner ? 1.0 : 0.8,
+      'stroke-opacity': corner ? 1.0 : 0.7,
+      'stroke-width': 0.03,
+      fill: label.fill ?? '#666',
+      stroke: 'white',
+    }),
+  );
+  const labelEl = setAttributes(createElement('text'), {
+    'font-size': fontSize,
+    'font-family': 'Noto Sans',
+    'text-anchor': 'middle',
+    fill: 'white',
+    y: 0.13 * 0.75 ** label.text.length,
+  });
+  labelEl.innerHTML = label.text;
+  g.appendChild(labelEl);
+  return g;
+}
+
+function orient(pos: cg.Pos, color: cg.Color): cg.Pos {
+  return 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);
+}
+
+function createElement(tagName: string): SVGElement {
+  return document.createElementNS('http://www.w3.org/2000/svg', tagName);
+}
+
+function setAttributes(el: SVGElement, attrs: { [key: string]: any }): SVGElement {
+  for (const key in attrs) {
+    if (Object.prototype.hasOwnProperty.call(attrs, key)) el.setAttribute(key, attrs[key]);
+  }
+  return el;
+}
+
+function makeCustomBrush(base: DrawBrush, modifiers: DrawModifiers | undefined): DrawBrush {
+  return !modifiers
+    ? base
+    : {
+        color: base.color,
+        opacity: Math.round(base.opacity * 10) / 10,
+        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];
+}
+
+function lineWidth(brush: DrawBrush, current: boolean): number {
+  return ((brush.lineWidth || 10) * (current ? 0.85 : 1)) / 64;
+}
+
+function opacity(brush: DrawBrush, current: boolean): number {
+  return (brush.opacity || 1) * (current ? 0.9 : 1);
+}
+
+function arrowMargin(shorten: boolean): number {
+  return (shorten ? 20 : 10) / 64;
+}
+
+function pos2user(pos: cg.Pos, bounds: DOMRectReadOnly): cg.NumberPair {
+  const xScale = Math.min(1, bounds.width / bounds.height);
+  const yScale = Math.min(1, bounds.height / bounds.width);
+  return [(pos[0] - 3.5) * xScale, (3.5 - pos[1]) * yScale];
+}
+
+function filterBox(from: cg.NumberPair, to: cg.NumberPair): SVGElement {
+  // lines/arrows are considered to be one dimensional for the purposes of SVG filters,
+  // so we add a transparent bounding box to ensure they apply to the 2nd dimension
+  const box = {
+    from: [Math.floor(Math.min(from[0], to[0])), Math.floor(Math.min(from[1], to[1]))],
+    to: [Math.ceil(Math.max(from[0], to[0])), Math.ceil(Math.max(from[1], to[1]))],
+  };
+  return setAttributes(createElement('rect'), {
+    x: box.from[0],
+    y: box.from[1],
+    width: box.to[0] - box.from[0],
+    height: box.to[1] - box.from[1],
+    fill: 'none',
+    stroke: 'none',
+  });
+}
+
+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;
+}
+
+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));
+}
+
+/*
+ try to place label at the junction of the destination shaft and arrowhead. if there's more than
+ 1 arrow pointing to a square, the arrow shortens by 10 / 64 units so the label must move as well. 
+ 
+ if the angle between two incoming arrows is pi / 8, such as when an adjacent knight and bishop
+ attack the same square, the knight's label is slid further down the shaft by an amount equal to
+ our label size to avoid collision
+*/
+
+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);
+  if (slots) {
+    mag -= 33 / 64; // reduce by arrowhead length
+    if (slots.size > 1) {
+      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.
+      }
+    }
+  }
+  return [from[0] - Math.cos(angle) * mag, from[1] - Math.sin(angle) * mag].map(
+    c => c + 0.5,
+  ) as cg.NumberPair;
+}

package/src/sync.ts

@@ -0,0 +1,36 @@
+import { DrawShape } from './draw';
+
+export interface SyncableShape {
+  shape: DrawShape;
+  current: boolean;
+  hash: Hash;
+}
+
+export type Hash = string;
+
+// append and remove only. No updates.
+export function syncShapes(
+  shapes: SyncableShape[],
+  root: HTMLElement | SVGElement,
+  renderShape: (shape: SyncableShape) => HTMLElement | SVGElement,
+): void {
+  const hashesInDom = new Map(), // by hash
+    toRemove: SVGElement[] = [];
+  for (const sc of shapes) hashesInDom.set(sc.hash, false);
+  let el: SVGElement | undefined = root.firstElementChild as SVGElement,
+    elHash: Hash | null;
+  while (el) {
+    elHash = el.getAttribute('cgHash') as Hash;
+    // found a shape element that's here to stay
+    if (hashesInDom.has(elHash)) hashesInDom.set(elHash, true);
+    // or remove it
+    else toRemove.push(el);
+    el = el.nextElementSibling as SVGElement | undefined;
+  }
+  // remove old shapes
+  for (const el of toRemove) root.removeChild(el);
+  // insert shapes that are not yet in dom
+  for (const sc of shapes) {
+    if (!hashesInDom.get(sc.hash)) root.appendChild(renderShape(sc));
+  }
+}

package/src/types.ts

@@ -0,0 +1,110 @@
+export type Color = (typeof colors)[number];
+export type Role = (typeof roles)[number];
+export type File = (typeof files)[number];
+export type Rank = (typeof ranks)[number];
+export type Key = 'a0' | `${File}${Rank}`;
+export type FEN = string;
+export type Pos = [number, number];
+export interface Piece {
+  role: Role;
+  color: Color;
+  promoted?: boolean;
+}
+export interface Drop {
+  role: Role;
+  key: Key;
+}
+export type Pieces = Map<Key, Piece>;
+export type PiecesDiff = Map<Key, Piece | undefined>;
+
+export type KeyPair = [Key, Key];
+
+export type NumberPair = [number, number];
+
+export type NumberQuad = [number, number, number, number];
+
+export interface Rect {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+export type Dests = Map<Key, Key[]>;
+
+export interface Elements {
+  board: HTMLElement;
+  wrap: HTMLElement;
+  container: HTMLElement;
+  ghost?: HTMLElement;
+  svg?: SVGElement;
+  customSvg?: SVGElement;
+  autoPieces?: HTMLElement;
+}
+export interface Dom {
+  elements: Elements;
+  bounds: Memo<DOMRectReadOnly>;
+  redraw: () => void;
+  redrawNow: (skipSvg?: boolean) => void;
+  unbind?: Unbind;
+  destroyed?: boolean;
+}
+export interface Exploding {
+  stage: number;
+  keys: readonly Key[];
+}
+
+export interface MoveMetadata {
+  premove: boolean;
+  ctrlKey?: boolean;
+  holdTime?: number;
+  captured?: Piece;
+  predrop?: boolean;
+}
+export interface SetPremoveMetadata {
+  ctrlKey?: boolean;
+}
+
+export type MouchEvent = Event & Partial<MouseEvent & TouchEvent>;
+
+export interface KeyedNode extends HTMLElement {
+  cgKey: Key;
+}
+export interface PieceNode extends KeyedNode {
+  tagName: 'PIECE';
+  cgPiece: string;
+  cgAnimating?: boolean;
+  cgFading?: boolean;
+  cgDragging?: boolean;
+  cgScale?: number;
+}
+export interface SquareNode extends KeyedNode {
+  tagName: 'SQUARE';
+}
+
+export interface Memo<A> {
+  (): A;
+  clear: () => void;
+}
+
+export interface Timer {
+  start: () => void;
+  cancel: () => void;
+  stop: () => number;
+}
+
+export type Redraw = () => void;
+export type Unbind = () => void;
+export type Milliseconds = number;
+export type KHz = number;
+
+export const colors = ['white', 'black'] as const;
+export const roles = ['pawn', 'knight', 'bishop', 'rook', 'queen', 'king'] as const;
+export const files = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'] as const;
+export const ranks = ['1', '2', '3', '4', '5', '6', '7', '8'] as const;
+
+export type RanksPosition = 'left' | 'right';
+
+export type BrushColor = 'green' | 'red' | 'blue' | 'yellow';
+
+export type SquareClasses = Map<Key, string>;

package/src/util.ts

@@ -0,0 +1,105 @@
+import * as cg from './types.js';
+
+export const invRanks: readonly cg.Rank[] = [...cg.ranks].reverse();
+
+export const allKeys: readonly cg.Key[] = Array.prototype.concat(
+  ...cg.files.map(c => cg.ranks.map(r => c + r)),
+);
+
+export const pos2key = (pos: cg.Pos): cg.Key => allKeys[8 * pos[0] + pos[1]];
+
+export const key2pos = (k: cg.Key): cg.Pos => [k.charCodeAt(0) - 97, k.charCodeAt(1) - 49];
+
+export const uciToMove = (uci: string | undefined): cg.Key[] | undefined => {
+  if (!uci) return undefined;
+  if (uci[1] === '@') return [uci.slice(2, 4) as cg.Key];
+  return [uci.slice(0, 2), uci.slice(2, 4)] as cg.Key[];
+};
+
+export const allPos: readonly cg.Pos[] = allKeys.map(key2pos);
+
+export function memo<A>(f: () => A): cg.Memo<A> {
+  let v: A | undefined;
+  const ret = (): A => {
+    if (v === undefined) v = f();
+    return v;
+  };
+  ret.clear = () => {
+    v = undefined;
+  };
+  return ret;
+}
+
+export const timer = (): cg.Timer => {
+  let startAt: number | undefined;
+  return {
+    start() {
+      startAt = performance.now();
+    },
+    cancel() {
+      startAt = undefined;
+    },
+    stop() {
+      if (!startAt) return 0;
+      const time = performance.now() - startAt;
+      startAt = undefined;
+      return time;
+    },
+  };
+};
+
+export const opposite = (c: cg.Color): cg.Color => (c === 'white' ? 'black' : 'white');
+
+export const distanceSq = (pos1: cg.Pos, pos2: cg.Pos): number => {
+  const dx = pos1[0] - pos2[0],
+    dy = pos1[1] - pos2[1];
+  return dx * dx + dy * dy;
+};
+
+export const samePiece = (p1: cg.Piece, p2: cg.Piece): boolean =>
+  p1.role === p2.role && p1.color === p2.color;
+
+export const posToTranslate =
+  (bounds: DOMRectReadOnly): ((pos: cg.Pos, asWhite: boolean) => cg.NumberPair) =>
+  (pos, asWhite) => [
+    ((asWhite ? pos[0] : 7 - pos[0]) * bounds.width) / 8,
+    ((asWhite ? 7 - pos[1] : pos[1]) * bounds.height) / 8,
+  ];
+
+export const translate = (el: HTMLElement, pos: cg.NumberPair): void => {
+  el.style.transform = `translate(${pos[0]}px,${pos[1]}px)`;
+};
+
+export const translateAndScale = (el: HTMLElement, pos: cg.NumberPair, scale = 1): void => {
+  el.style.transform = `translate(${pos[0]}px,${pos[1]}px) scale(${scale})`;
+};
+
+export const setVisible = (el: HTMLElement, v: boolean): void => {
+  el.style.visibility = v ? 'visible' : 'hidden';
+};
+
+export const eventPosition = (e: cg.MouchEvent): cg.NumberPair | undefined => {
+  if (e.clientX || e.clientX === 0) return [e.clientX, e.clientY!];
+  if (e.targetTouches?.[0]) return [e.targetTouches[0].clientX, e.targetTouches[0].clientY];
+  return; // touchend has no position!
+};
+
+export const isRightButton = (e: cg.MouchEvent): boolean => e.button === 2;
+
+export const createEl = (tagName: string, className?: string): HTMLElement => {
+  const el = document.createElement(tagName);
+  if (className) el.className = className;
+  return el;
+};
+
+export function computeSquareCenter(key: cg.Key, asWhite: boolean, bounds: DOMRectReadOnly): cg.NumberPair {
+  const pos = key2pos(key);
+  if (!asWhite) {
+    pos[0] = 7 - pos[0];
+    pos[1] = 7 - pos[1];
+  }
+  return [
+    bounds.left + (bounds.width * pos[0]) / 8 + bounds.width / 16,
+    bounds.top + (bounds.height * (7 - pos[1])) / 8 + bounds.height / 16,
+  ];
+}