@lichess-org/pgn-viewer 0.0.0

package/src/pgn.ts

@@ -0,0 +1,141 @@
+import { Color, makeUci, Position } from 'chessops';
+import { scalachessCharPair } from 'chessops/compat';
+import { makeFen } from 'chessops/fen';
+import { parsePgn, parseComment, PgnNodeData, startingPosition, transform, Node } from 'chessops/pgn';
+import { makeSanAndPlay, parseSan } from 'chessops/san';
+import { Game } from './game';
+import { MoveData, Initial, Players, Player, Comments, Metadata, Clocks, Lichess } from './interfaces';
+import { Path } from './path';
+
+class State {
+  constructor(
+    readonly pos: Position,
+    public path: Path,
+    public clocks: Clocks,
+  ) {}
+  clone = () => new State(this.pos.clone(), this.path, { ...this.clocks });
+}
+
+export const parseComments = (strings: string[]): Comments => {
+  const comments = strings.map(parseComment);
+  const reduceTimes = (times: Array<number | undefined>) =>
+    times.reduce<number | undefined>((last, time) => (typeof time == undefined ? last : time), undefined);
+  return {
+    texts: comments.map(c => c.text).filter(t => !!t),
+    shapes: comments.flatMap(c => c.shapes),
+    clock: reduceTimes(comments.map(c => c.clock)),
+    emt: reduceTimes(comments.map(c => c.emt)),
+  };
+};
+
+export const makeGame = (pgn: string, lichess: Lichess = false): Game => {
+  const game = parsePgn(pgn)[0] || parsePgn('*')[0];
+  const start = startingPosition(game.headers).unwrap();
+  const fen = makeFen(start.toSetup());
+  const comments = parseComments(game.comments || []);
+  const headers = new Map(Array.from(game.headers, ([key, value]) => [key.toLowerCase(), value]));
+  const metadata = makeMetadata(headers, lichess);
+  const initial: Initial = {
+    fen,
+    turn: start.turn,
+    check: start.isCheck(),
+    pos: start.clone(),
+    comments: comments.texts,
+    shapes: comments.shapes,
+    clocks: {
+      white: metadata.timeControl?.initial || comments.clock,
+      black: metadata.timeControl?.initial || comments.clock,
+    },
+  };
+  const moves = makeMoves(start, game.moves, metadata);
+  const players = makePlayers(headers, metadata);
+  return new Game(initial, moves, players, metadata);
+};
+
+const makeMoves = (start: Position, moves: Node<PgnNodeData>, metadata: Metadata) =>
+  transform<PgnNodeData, MoveData, State>(moves, new State(start, Path.root, {}), (state, node, _index) => {
+    const move = parseSan(state.pos, node.san);
+    if (!move) return undefined;
+    const moveId = scalachessCharPair(move);
+    const path = state.path.append(moveId);
+    const san = makeSanAndPlay(state.pos, move);
+    state.path = path;
+    const setup = state.pos.toSetup();
+    const comments = parseComments(node.comments || []);
+    const startingComments = parseComments(node.startingComments || []);
+    const shapes = [...comments.shapes, ...startingComments.shapes];
+    const ply = (setup.fullmoves - 1) * 2 + (state.pos.turn === 'white' ? 0 : 1);
+    let clocks = (state.clocks = makeClocks(state.clocks, state.pos.turn, comments.clock));
+    if (ply < 2 && metadata.timeControl)
+      clocks = {
+        white: metadata.timeControl.initial,
+        black: metadata.timeControl.initial,
+        ...clocks,
+      };
+    const moveNode: MoveData = {
+      path,
+      ply,
+      move,
+      san,
+      uci: makeUci(move),
+      fen: makeFen(state.pos.toSetup()),
+      turn: state.pos.turn,
+      check: state.pos.isCheck(),
+      comments: comments.texts,
+      startingComments: startingComments.texts,
+      nags: node.nags || [],
+      shapes,
+      clocks,
+      emt: comments.emt,
+    };
+    return moveNode;
+  });
+
+const makeClocks = (prev: Clocks, turn: Color, clk?: number): Clocks =>
+  turn == 'white' ? { ...prev, black: clk } : { ...prev, white: clk };
+
+type Headers = Map<string, string>;
+
+function makePlayers(headers: Headers, metadata: Metadata): Players {
+  const get = (color: Color, field: string): string | undefined => {
+    const raw = headers.get(`${color}${field}`);
+    return raw == '?' || raw == '' ? undefined : raw;
+  };
+  const makePlayer = (color: Color): Player => {
+    const name = get(color, '');
+    return {
+      name,
+      title: get(color, 'title'),
+      rating: parseInt(get(color, 'elo') || '') || undefined,
+      isLichessUser: metadata.isLichess && !!name?.match(/^[a-z0-9][a-z0-9_-]{0,28}[a-z0-9]$/i),
+    };
+  };
+  return {
+    white: makePlayer('white'),
+    black: makePlayer('black'),
+  };
+}
+
+function makeMetadata(headers: Headers, lichess: Lichess): Metadata {
+  const site =
+    headers.get('chapterurl') || headers.get('gameurl') || headers.get('source') || headers.get('site');
+  const tcs = headers
+    .get('timecontrol')
+    ?.split('+')
+    .map(x => parseInt(x));
+  const timeControl =
+    tcs && tcs[0]
+      ? {
+          initial: tcs[0],
+          increment: tcs[1] || 0,
+        }
+      : undefined;
+  const orientation = headers.get('orientation');
+  return {
+    externalLink: site && site.match(/^https?:\/\//) ? site : undefined,
+    isLichess: !!(lichess && site?.startsWith(lichess)),
+    timeControl,
+    orientation: orientation === 'white' || orientation === 'black' ? orientation : undefined,
+    result: headers.get('result'),
+  };
+}

package/src/pgnViewer.ts

@@ -0,0 +1,114 @@
+import { Api as CgApi } from 'chessground/api';
+import { makeSquare, opposite } from 'chessops';
+import translator from './translation';
+import { GoTo, InitialOrMove, Opts, Translate } from './interfaces';
+import { Config as CgConfig } from 'chessground/config';
+import { uciToMove } from 'chessground/util';
+import { Path } from './path';
+import { AnyNode, Game, isMoveData } from './game';
+import { makeGame } from './pgn';
+
+export default class PgnViewer {
+  game: Game;
+  path: Path;
+  translate: Translate;
+  ground?: CgApi;
+  div?: HTMLElement;
+  flipped = false;
+  pane = 'board';
+  autoScrollRequested = false;
+
+  constructor(
+    readonly opts: Opts,
+    readonly redraw: () => void,
+  ) {
+    this.game = makeGame(opts.pgn, opts.lichess);
+    opts.orientation = opts.orientation || this.game.metadata.orientation;
+    this.translate = translator(opts.translate);
+    this.path = this.game.pathAtMainlinePly(opts.initialPly);
+  }
+
+  curNode = (): AnyNode => this.game.nodeAt(this.path) || this.game.moves;
+  curData = (): InitialOrMove => this.game.dataAt(this.path) || this.game.initial;
+
+  goTo = (to: GoTo, focus = true) => {
+    const path =
+      to == 'first'
+        ? Path.root
+        : to == 'prev'
+          ? this.path.init()
+          : to == 'next'
+            ? this.game.nodeAt(this.path)?.children[0]?.data.path
+            : this.game.pathAtMainlinePly('last');
+    this.toPath(path || this.path, focus);
+  };
+
+  canGoTo = (to: GoTo) => (to == 'prev' || to == 'first' ? !this.path.empty() : !!this.curNode().children[0]);
+
+  toPath = (path: Path, focus = true) => {
+    this.path = path;
+    this.pane = 'board';
+    this.autoScrollRequested = true;
+    this.redrawGround();
+    this.redraw();
+    if (focus) this.focus();
+  };
+
+  focus = () => this.div?.focus();
+
+  toggleMenu = () => {
+    this.pane = this.pane == 'board' ? 'menu' : 'board';
+    this.redraw();
+  };
+  togglePgn = () => {
+    this.pane = this.pane == 'pgn' ? 'board' : 'pgn';
+    this.redraw();
+  };
+
+  orientation = () => {
+    const base = this.opts.orientation || 'white';
+    return this.flipped ? opposite(base) : base;
+  };
+
+  flip = () => {
+    this.flipped = !this.flipped;
+    this.pane = 'board';
+    this.redrawGround();
+    this.redraw();
+  };
+
+  cgState = (): CgConfig => {
+    const data = this.curData();
+    const lastMove = isMoveData(data) ? uciToMove(data.uci) : this.opts.chessground?.lastMove;
+    return {
+      fen: data.fen,
+      orientation: this.orientation(),
+      check: data.check,
+      lastMove,
+      turnColor: data.turn,
+    };
+  };
+
+  analysisUrl = () =>
+    (this.game.metadata.isLichess && this.game.metadata.externalLink) ||
+    `https://lichess.org/analysis/${this.curData().fen.replace(' ', '_')}?color=${this.orientation()}`;
+  practiceUrl = () => `${this.analysisUrl()}#practice`;
+
+  setGround = (cg: CgApi) => {
+    this.ground = cg;
+    this.redrawGround();
+  };
+
+  private redrawGround = () =>
+    this.withGround(g => {
+      g.set(this.cgState());
+      g.setShapes(
+        this.curData().shapes.map(s => ({
+          orig: makeSquare(s.from),
+          dest: makeSquare(s.to),
+          brush: s.color,
+        })),
+      );
+    });
+  private withGround = (f: (cg: CgApi) => void) => this.ground && f(this.ground);
+}

package/src/translation.ts

@@ -0,0 +1,17 @@
+import { Translate } from './interfaces';
+
+export default function translate(translator?: Translate) {
+  return (key: string) => (translator && translator(key)) || defaultTranslator(key);
+}
+
+const defaultTranslator = (key: string) => defaultTranslations[key];
+
+const defaultTranslations: { [key: string]: string } = {
+  flipTheBoard: 'Flip the board',
+  analysisBoard: 'Analysis board',
+  practiceWithComputer: 'Practice with computer',
+  getPgn: 'Get PGN',
+  download: 'Download',
+  viewOnLichess: 'View on Lichess',
+  viewOnSite: 'View on site',
+};

package/src/view/glyph.ts

@@ -0,0 +1,113 @@
+import { h } from 'snabbdom';
+
+export const renderNag = (nag: number) => {
+  const glyph = glyphs[nag];
+  return glyph ? h('nag', { attrs: { title: glyph.name } }, glyph.symbol) : undefined;
+};
+
+type Glyph = {
+  symbol: string;
+  name: string;
+};
+interface Glyphs {
+  [key: number]: Glyph;
+}
+
+const glyphs: Glyphs = {
+  1: {
+    symbol: '!',
+    name: 'Good move',
+  },
+  2: {
+    symbol: '?',
+    name: 'Mistake',
+  },
+  3: {
+    symbol: '!!',
+    name: 'Brilliant move',
+  },
+  4: {
+    symbol: '??',
+    name: 'Blunder',
+  },
+  5: {
+    symbol: '!?',
+    name: 'Interesting move',
+  },
+  6: {
+    symbol: '?!',
+    name: 'Dubious move',
+  },
+  7: {
+    symbol: '□',
+    name: 'Only move',
+  },
+  22: {
+    symbol: '⨀',
+    name: 'Zugzwang',
+  },
+  10: {
+    symbol: '=',
+    name: 'Equal position',
+  },
+  13: {
+    symbol: '∞',
+    name: 'Unclear position',
+  },
+  14: {
+    symbol: '⩲',
+    name: 'White is slightly better',
+  },
+  15: {
+    symbol: '⩱',
+    name: 'Black is slightly better',
+  },
+  16: {
+    symbol: '±',
+    name: 'White is better',
+  },
+  17: {
+    symbol: '∓',
+    name: 'Black is better',
+  },
+  18: {
+    symbol: '+−',
+    name: 'White is winning',
+  },
+  19: {
+    symbol: '-+',
+    name: 'Black is winning',
+  },
+  146: {
+    symbol: 'N',
+    name: 'Novelty',
+  },
+  32: {
+    symbol: '↑↑',
+    name: 'Development',
+  },
+  36: {
+    symbol: '↑',
+    name: 'Initiative',
+  },
+  40: {
+    symbol: '→',
+    name: 'Attack',
+  },
+  132: {
+    symbol: '⇆',
+    name: 'Counterplay',
+  },
+  138: {
+    symbol: '⊕',
+    name: 'Time trouble',
+  },
+  44: {
+    symbol: '=∞',
+    name: 'With compensation',
+  },
+  140: {
+    symbol: '∆',
+    name: 'With the idea',
+  },
+};

package/src/view/main.ts

@@ -0,0 +1,99 @@
+import PgnViewer from '../pgnViewer';
+import { Chessground } from 'chessground';
+import { Config as CgConfig } from 'chessground/config';
+import { h, VNode } from 'snabbdom';
+import { onInsert } from './util';
+import { onKeyDown, stepwiseScroll } from '../events';
+import { renderMenu, renderControls } from './menu';
+import { renderMoves } from './side';
+import renderPlayer from './player';
+
+export default function view(ctrl: PgnViewer) {
+  const opts = ctrl.opts,
+    staticClasses = `lpv.lpv--moves-${opts.showMoves}.lpv--controls-${opts.showControls}${
+      opts.classes ? '.' + opts.classes.replace(' ', '.') : ''
+    }`;
+  const showPlayers = opts.showPlayers == 'auto' ? ctrl.game.hasPlayerName() : opts.showPlayers;
+  return h(
+    `div.${staticClasses}`,
+    {
+      class: {
+        'lpv--menu': ctrl.pane != 'board',
+        'lpv--players': showPlayers,
+      },
+      attrs: {
+        tabindex: 0,
+      },
+      hook: onInsert(el => {
+        ctrl.setGround(Chessground(el.querySelector('.cg-wrap') as HTMLElement, makeConfig(ctrl, el)));
+        if (opts.keyboardToMove) el.addEventListener('keydown', onKeyDown(ctrl));
+      }),
+    },
+    [
+      showPlayers ? renderPlayer(ctrl, 'top') : undefined,
+      renderBoard(ctrl),
+      showPlayers ? renderPlayer(ctrl, 'bottom') : undefined,
+      opts.showControls ? renderControls(ctrl) : undefined,
+      opts.showMoves ? renderMoves(ctrl) : undefined,
+      ctrl.pane == 'menu' ? renderMenu(ctrl) : ctrl.pane == 'pgn' ? renderPgnPane(ctrl) : undefined,
+    ],
+  );
+}
+
+const renderBoard = (ctrl: PgnViewer): VNode =>
+  h(
+    'div.lpv__board',
+    {
+      hook: onInsert(el => {
+        el.addEventListener('click', ctrl.focus);
+        if (ctrl.opts.scrollToMove && !('ontouchstart' in window))
+          el.addEventListener(
+            'wheel',
+            stepwiseScroll((e: WheelEvent, scroll: boolean) => {
+              e.preventDefault();
+              if (e.deltaY > 0 && scroll) ctrl.goTo('next', false);
+              else if (e.deltaY < 0 && scroll) ctrl.goTo('prev', false);
+            }),
+          );
+      }),
+    },
+    h('div.cg-wrap'),
+  );
+
+const renderPgnPane = (ctrl: PgnViewer): VNode => {
+  const blob = new Blob([ctrl.opts.pgn], { type: 'text/plain' });
+  return h('div.lpv__pgn.lpv__pane', [
+    h(
+      'a.lpv__pgn__download.lpv__fbt',
+      {
+        attrs: {
+          href: window.URL.createObjectURL(blob),
+          download: ctrl.opts.menu.getPgn.fileName || `${ctrl.game.title()}.pgn`,
+        },
+      },
+      ctrl.translate('download'),
+    ),
+    h('textarea.lpv__pgn__text', ctrl.opts.pgn),
+  ]);
+};
+
+export const makeConfig = (ctrl: PgnViewer, rootEl: HTMLElement): CgConfig => ({
+  viewOnly: !ctrl.opts.drawArrows,
+  addDimensionsCssVarsTo: rootEl,
+  drawable: {
+    enabled: ctrl.opts.drawArrows,
+    visible: true,
+  },
+  disableContextMenu: ctrl.opts.drawArrows,
+  ...(ctrl.opts.chessground || {}),
+  movable: {
+    free: false,
+  },
+  draggable: {
+    enabled: false,
+  },
+  selectable: {
+    enabled: false,
+  },
+  ...ctrl.cgState(),
+});

package/src/view/menu.ts

@@ -0,0 +1,92 @@
+import { h } from 'snabbdom';
+import PgnViewer from '../pgnViewer';
+import { GoTo } from '../interfaces';
+import { bind, bindMobileMousedown, onInsert } from './util';
+import { eventRepeater } from '../events';
+
+export const renderMenu = (ctrl: PgnViewer) =>
+  h('div.lpv__menu.lpv__pane', [
+    h(
+      'button.lpv__menu__entry.lpv__menu__flip.lpv__fbt',
+      {
+        hook: bind('click', ctrl.flip),
+      },
+      ctrl.translate('flipTheBoard'),
+    ),
+    ctrl.opts.menu.analysisBoard?.enabled
+      ? h(
+          'a.lpv__menu__entry.lpv__menu__analysis.lpv__fbt',
+          {
+            attrs: {
+              href: ctrl.analysisUrl(),
+              target: '_blank',
+            },
+          },
+          ctrl.translate('analysisBoard'),
+        )
+      : undefined,
+    ctrl.opts.menu.practiceWithComputer?.enabled
+      ? h(
+          'a.lpv__menu__entry.lpv__menu__practice.lpv__fbt',
+          {
+            attrs: {
+              href: ctrl.practiceUrl(),
+              target: '_blank',
+            },
+          },
+          ctrl.translate('practiceWithComputer'),
+        )
+      : undefined,
+    ctrl.opts.menu.getPgn.enabled
+      ? h(
+          'button.lpv__menu__entry.lpv__menu__pgn.lpv__fbt',
+          {
+            hook: bind('click', ctrl.togglePgn),
+          },
+          ctrl.translate('getPgn'),
+        )
+      : undefined,
+    renderExternalLink(ctrl),
+  ]);
+
+const renderExternalLink = (ctrl: PgnViewer) => {
+  const link = ctrl.game.metadata.externalLink;
+  return (
+    link &&
+    h(
+      'a.lpv__menu__entry.lpv__fbt',
+      {
+        attrs: {
+          href: link,
+          target: '_blank',
+        },
+      },
+      ctrl.translate(ctrl.game.metadata.isLichess ? 'viewOnLichess' : 'viewOnSite'),
+    )
+  );
+};
+
+export const renderControls = (ctrl: PgnViewer) =>
+  h('div.lpv__controls', [
+    ctrl.pane == 'board' ? undefined : dirButton(ctrl, 'first', 'step-backward'),
+    dirButton(ctrl, 'prev', 'left-open'),
+    h(
+      'button.lpv__fbt.lpv__controls__menu.lpv__icon',
+      {
+        class: {
+          active: ctrl.pane != 'board',
+          'lpv__icon-ellipsis-vert': ctrl.pane == 'board',
+        },
+        hook: bind('click', ctrl.toggleMenu),
+      },
+      ctrl.pane == 'board' ? undefined : 'X',
+    ),
+    dirButton(ctrl, 'next', 'right-open'),
+    ctrl.pane == 'board' ? undefined : dirButton(ctrl, 'last', 'step-forward'),
+  ]);
+
+const dirButton = (ctrl: PgnViewer, to: GoTo, icon: string) =>
+  h(`button.lpv__controls__goto.lpv__controls__goto--${to}.lpv__fbt.lpv__icon.lpv__icon-${icon}`, {
+    class: { disabled: ctrl.pane == 'board' && !ctrl.canGoTo(to) },
+    hook: onInsert(el => bindMobileMousedown(el, e => eventRepeater(() => ctrl.goTo(to), e))),
+  });

package/src/view/player.ts

@@ -0,0 +1,41 @@
+import { Color, opposite } from 'chessops';
+import { h, VNode } from 'snabbdom';
+import PgnViewer from '../pgnViewer';
+
+export default function renderPlayer(ctrl: PgnViewer, side: 'top' | 'bottom'): VNode {
+  const color = side == 'bottom' ? ctrl.orientation() : opposite(ctrl.orientation());
+  const player = ctrl.game.players[color];
+  const personEls = [
+    player.title ? h('span.lpv__player__title', player.title) : undefined,
+    h('span.lpv__player__name', player.name),
+    player.rating ? h('span.lpv__player__rating', ['(', player.rating, ')']) : undefined,
+  ];
+  return h(`div.lpv__player.lpv__player--${side}`, [
+    player.isLichessUser
+      ? h(
+          'a.lpv__player__person.ulpt.user-link',
+          { attrs: { href: `${ctrl.opts.lichess}/@/${player.name}` } },
+          personEls,
+        )
+      : h('span.lpv__player__person', personEls),
+    ctrl.opts.showClocks ? renderClock(ctrl, color) : undefined,
+  ]);
+}
+
+const renderClock = (ctrl: PgnViewer, color: Color): VNode | undefined => {
+  const move = ctrl.curData();
+  const clock = move.clocks && move.clocks[color];
+  return typeof clock == undefined
+    ? undefined
+    : h('div.lpv__player__clock', { class: { active: color == move.turn } }, clockContent(clock));
+};
+
+const clockContent = (seconds: number | undefined): string[] => {
+  if (!seconds && seconds !== 0) return ['-'];
+  const date = new Date(seconds * 1000),
+    sep = ':',
+    baseStr = pad2(date.getUTCMinutes()) + sep + pad2(date.getUTCSeconds());
+  return seconds >= 3600 ? [Math.floor(seconds / 3600) + sep + baseStr] : [baseStr];
+};
+
+const pad2 = (num: number): string => (num < 10 ? '0' : '') + num;