@lichess-org/pgn-viewer 0.0.0

package/scss/_lichess-pgn-viewer.lib.scss

@@ -0,0 +1,78 @@
+// in addition to scss overrides, all colors below may be overridden with css
+// variables defined as --c-lpv-accent, --c-lpv-accent-over, etc.
+
+$lpv-site-hue: 37 !default;
+$lpv-accent: hsl(88, 62%, 37%) !default;
+$lpv-accent-over: white !default;
+$lpv-bg: hsl($lpv-site-hue, 5%, 18%) !default;
+$lpv-fbt-hover: mix($lpv-accent, $lpv-bg, 75%) !default;
+$lpv-bg-player: $lpv-bg !default;
+$lpv-bg-controls: $lpv-bg !default;
+$lpv-bg-movelist: $lpv-bg !default;
+$lpv-bg-variation: hsl($lpv-site-hue, 5%, 15%) !default;
+$lpv-bg-pane: mix($lpv-accent, $lpv-bg, 15%) !default;
+$lpv-pgn-text: mix($lpv-bg-pane, $lpv-bg, 30%) !default;
+$lpv-font: #aaa !default;
+$lpv-font-shy: mix($lpv-font, $lpv-bg, 50%) !default;
+$lpv-past-moves: $lpv-font !default;
+$lpv-font-bg: mix($lpv-font, $lpv-bg, 20%) !default;
+$lpv-current-move: mix($lpv-accent, $lpv-bg, 70%) !default;
+$lpv-move-hover: mix($lpv-accent, $lpv-bg, 30%) !default;
+$lpv-border: hsl(0, 0%, 25%) !default;
+$lpv-side-border: hsl(37deg, 5%, 13%) !default;
+
+/* move highlights */
+$lpv-inaccuracy: hsl(202, 78%, 62%) !default;
+$lpv-mistake: hsl(41, 100%, 45%) !default;
+$lpv-blunder: hsl(0, 69%, 60%) !default;
+$lpv-good-move: hsl(130, 67%, 62%) !default;
+$lpv-brilliant: hsl(129, 71%, 45%) !default;
+$lpv-interesting: hsl(307, 80%, 70%) !default;
+$lpv-bg-inaccuracy-hover: mix($lpv-inaccuracy, $lpv-bg, 30%) !default;
+$lpv-bg-mistake-hover: mix($lpv-mistake, $lpv-bg, 30%) !default;
+$lpv-bg-blunder-hover: mix($lpv-blunder, $lpv-bg, 30%) !default;
+$lpv-bg-good-hover: mix($lpv-good-move, $lpv-bg, 30%) !default;
+$lpv-bg-brilliant-hover: mix($lpv-brilliant, $lpv-bg, 30%) !default;
+$lpv-bg-interesting-hover: mix($lpv-interesting, $lpv-bg, 30%) !default;
+
+@import './fbt';
+@import './util';
+@import './layout';
+@import './side';
+@import './player';
+@import './pane';
+@import './controls';
+@import './scrollbar';
+@import './font';
+
+.lpv {
+  border-radius: 5px;
+  box-shadow:
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+  background: var(--c-lpv-bg, $lpv-bg);
+  color: var(--c-lpv-font, $lpv-font);
+  box-sizing: border-box;
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+
+  &__board {
+    user-select: none;
+    .cg-wrap {
+      @extend %square;
+    }
+    cg-board {
+      box-shadow: none;
+    }
+  }
+
+  &:focus {
+    outline: auto 2px var(--c-lpv-accent, $lpv-accent);
+  }
+}

package/scss/_pane.scss

@@ -0,0 +1,31 @@
+.lpv {
+  &__pane {
+    z-index: 2;
+    border-bottom: 2px solid var(--c-lpv-accent, $lpv-accent);
+    background: var(--c-lpv-bg-pane, $lpv-bg-pane);
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    .lpv__fbt {
+      text-align: left;
+      padding: 0.8em 2.5em;
+      transition: none;
+      &::before {
+        color: var(--c-lpv-accent, $lpv-accent);
+        font-size: 2em;
+      }
+      &:hover::before {
+        color: var(--c-lpv-accent-over, $lpv-accent-over);
+      }
+    }
+  }
+
+  &__pgn {
+    &__text {
+      flex: 1 1 auto;
+      background: var(--c-lpv-pgn-text, $lpv-pgn-text);
+      color: var(--c-lpv-font, $lpv-font);
+      padding: 0.8em 1.3em;
+    }
+  }
+}

package/scss/_player.scss

@@ -0,0 +1,39 @@
+.lpv {
+  &__player {
+    font-size: 0.8em;
+    background: var(--c-lpv-bg-player, $lpv-bg-player);
+    display: flex;
+    flex-flow: row nowrap;
+    padding: 0 1em;
+    // justify-content: stretch;
+    &--bottom {
+      border-bottom: 1px solid var(--c-lpv-border, $lpv-border);
+      .lpv--controls-false & {
+        border-bottom: none;
+      }
+    }
+    &__person {
+      flex: 1 1 auto;
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      gap: 1ch;
+      color: var(--c-lpv-font, $lpv-font);
+      text-decoration: none;
+    }
+    &__title {
+      font-weight: bold;
+    }
+    &__clock {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      font-family: monospace;
+      font-size: 1.4em;
+      font-weight: bold;
+      &.active {
+        color: var(--c-lpv-accent, $lpv-accent);
+      }
+    }
+  }
+}

package/scss/_scrollbar.scss

@@ -0,0 +1,16 @@
+.lpv {
+  *::-webkit-scrollbar,
+  *::-webkit-scrollbar-corner {
+    width: 0.5rem;
+    background: var(--c-lpv-bg, $lpv-bg);
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background: var(--c-lpv-font-bg, $lpv-font-bg);
+  }
+
+  *::-webkit-scrollbar-thumb:hover,
+  *::-webkit-scrollbar-thumb:active {
+    background: var(--c-lpv-font-shy, $lpv-font-shy);
+  }
+}

package/scss/_side.scss

@@ -0,0 +1,155 @@
+.lpv {
+  &__side {
+    overflow: hidden;
+    display: flex;
+    flex-flow: column;
+  }
+  &__moves {
+    position: relative; // required for autoscroll
+    flex: 1 1 0;
+    display: flex;
+    flex-flow: row wrap;
+    overflow-y: auto;
+    background: var(--c-lpv-bg-movelist, $lpv-bg-movelist);
+    align-items: center;
+    align-content: flex-start;
+    will-change: scroll-position;
+    user-select: none;
+    line-height: 1.7;
+    min-width: 20ch;
+    index {
+      color: var(--c-lpv-font-shy, $lpv-font-shy);
+    }
+    > index {
+      flex: 0 0 15%;
+      margin-right: 3%;
+      display: flex;
+      justify-content: flex-end;
+    }
+    move {
+      border-radius: 3px;
+      padding-left: 3%;
+      font-weight: bold;
+      white-space: nowrap;
+      &.empty {
+        color: var(--c-lpv-font-shy, $lpv-font-shy);
+      }
+      &:not(.empty):hover {
+        background: var(--c-lpv-move-hover, $lpv-move-hover);
+        color: var(--c-lpv-accent-over, $lpv-accent-over);
+        cursor: pointer;
+      }
+      &.ancestor {
+        color: var(--c-lpv-past-moves, $lpv-past-moves);
+      }
+      &.current {
+        background: var(--c-lpv-current-move, $lpv-current-move) !important;
+        color: var(--c-lpv-accent-over, $lpv-accent-over);
+      }
+      &.inaccuracy {
+        color: var(--c-lpv-inaccuracy, $lpv-inaccuracy);
+        &:hover {
+          background: var(--c-lpv-bg-inaccuracy-hover, $lpv-bg-inaccuracy-hover);
+        }
+      }
+      &.mistake {
+        color: var(--c-lpv-mistake, $lpv-mistake);
+        &:hover {
+          background: var(--c-lpv-bg-mistake-hover, $lpv-bg-mistake-hover);
+        }
+      }
+      &.blunder {
+        color: var(--c-lpv-blunder, $lpv-blunder);
+        &:hover {
+          background: var(--c-lpv-bg-blunder-hover, $lpv-bg-blunder-hover);
+        }
+      }
+      &.good {
+        color: var(--c-lpv-good-move, $lpv-good-move);
+        &:hover {
+          background: var(--c-lpv-bg-good-hover, $lpv-bg-good-hover);
+        }
+      }
+      &.brilliant {
+        color: var(--c-lpv-brilliant, $lpv-brilliant);
+        &:hover {
+          background: var(--c-lpv-bg-brilliant-hover, $lpv-bg-brilliant-hover);
+        }
+      }
+      &.interesting {
+        color: var(--c-lpv-interesting, $lpv-interesting);
+        &:hover {
+          background: var(--c-lpv-bg-interesting-hover, $lpv-bg-interesting-hover);
+        }
+      }
+    }
+    > move {
+      flex: 0 0 41%;
+      font-size: 1.1em;
+    }
+    comment {
+      user-select: text;
+      font-size: 0.9em;
+    }
+    comment.result {
+      text-align: center;
+      font-weight: bold;
+    }
+    > comment {
+      flex: 1 1 100%;
+      background: var(--c-lpv-bg-variation, $lpv-bg-variation);
+      border: 1px solid var(--c-lpv-side-border, $lpv-side-border);
+      border-width: 1px 0;
+      padding: 0.4em 1em;
+      line-height: 1.4;
+      overflow-wrap: break-word;
+      word-break: break-word;
+      + variation,
+      + comment {
+        border-top: none;
+      }
+    }
+    > variation {
+      flex: 1 1 100%;
+      display: block;
+      overflow: hidden;
+      font-size: 0.8em;
+      background: var(--c-lpv-bg-variation, $lpv-bg-variation);
+      border: 1px solid var(--c-lpv-side-border, $lpv-side-border);
+      border-width: 1px 0;
+      padding: 0em 0.6em;
+      + variation {
+        border-top: none;
+      }
+      move {
+        display: inline-block;
+        padding: 0.1em 0.2em;
+        min-width: 2.5ch;
+        text-align: center;
+        + index {
+          margin-left: 0.2em;
+        }
+      }
+      index {
+        margin: 0;
+        padding: 0.1em 0;
+        + move {
+          margin-left: 0.1em;
+        }
+      }
+      comment {
+        align-self: center;
+        margin: 0 0.3em;
+      }
+      paren {
+        color: var(--c-lpv-font-shy, $lpv-font-shy);
+        &.open {
+          margin: 0 0.1em 0 0.2em;
+        }
+        &.close {
+          margin: 0 0.2em 0 0.1em;
+        }
+      }
+    }
+  }
+}

package/scss/_util.scss

@@ -0,0 +1,7 @@
+%square {
+  position: relative;
+  display: block;
+  height: 0;
+  padding-bottom: 100%;
+  width: 100%;
+}

package/scss/lichess-pgn-viewer.scss

@@ -0,0 +1,4 @@
+@import './chessground.base';
+@import './chessground.transp';
+@import './chessground.cburnett';
+@import 'lichess-pgn-viewer.lib';

package/src/config.ts

@@ -0,0 +1,53 @@
+import { Opts } from './interfaces';
+
+const defaults: Opts = {
+  pgn: '*', // the PGN to render
+  fen: undefined, // initial FEN, will append [FEN "initial FEN"] to the PGN
+  showPlayers: 'auto', // show the players above and under the board
+  showClocks: true, // show the clocks alongside the players
+  showMoves: 'auto', // false | "right" | "bottom" | auto. "auto" uses media queries
+  showControls: true, // show the [prev, menu, next] buttons
+  scrollToMove: true, // enable scrolling through moves with a mouse wheel
+  keyboardToMove: true, // enable keyboard navigation through moves
+  orientation: undefined, // orientation of the board. Undefined to use the Orientation PGN tag.
+  initialPly: 0, // current position to display. Can be a number, or "last"
+  chessground: {}, // chessground configuration https://github.com/lichess-org/chessground/blob/master/src/config.ts#L7
+  drawArrows: true, // allow mouse users to draw volatile arrows on the board. Disable for little perf boost
+  menu: {
+    getPgn: {
+      enabled: true, // enable the "Get PGN" menu entry
+      fileName: undefined, // name of the file when user clicks "Download PGN". Leave empty for automatic name.
+    },
+    practiceWithComputer: {
+      enabled: true,
+    },
+    analysisBoard: {
+      enabled: true,
+    },
+  },
+  lichess: 'https://lichess.org', // support for Lichess games, with links to the game and players. Set to false to disable.
+  classes: undefined, // CSS classes to set on the root element. Defaults to the element classes before being replaced by LPV.
+};
+
+export default function (element: HTMLElement, cfg: Partial<Opts>) {
+  const opts = { ...defaults };
+  deepMerge(opts, cfg);
+  if (opts.fen) opts.pgn = `[FEN "${opts.fen}"]\n${opts.pgn}`;
+  if (!opts.classes) opts.classes = element.className;
+  return opts;
+}
+
+function deepMerge(base: any, extend: any): void {
+  for (const key in extend) {
+    if (typeof extend[key] !== 'undefined') {
+      if (isPlainObject(base[key]) && isPlainObject(extend[key])) deepMerge(base[key], extend[key]);
+      else base[key] = extend[key];
+    }
+  }
+}
+
+function isPlainObject(o: unknown): boolean {
+  if (typeof o !== 'object' || o === null) return false;
+  const proto = Object.getPrototypeOf(o);
+  return proto === Object.prototype || proto === null;
+}

package/src/events.ts

@@ -0,0 +1,42 @@
+import PgnViewer from './pgnViewer';
+
+export function stepwiseScroll(inner: (e: WheelEvent, scroll: boolean) => void): (e: WheelEvent) => void {
+  let scrollTotal = 0;
+  return (e: WheelEvent) => {
+    scrollTotal += e.deltaY * (e.deltaMode ? 40 : 1);
+    if (Math.abs(scrollTotal) >= 4) {
+      inner(e, true);
+      scrollTotal = 0;
+    } else {
+      inner(e, false);
+    }
+  };
+}
+
+export function eventRepeater(action: () => void, e: Event) {
+  const repeat = () => {
+    action();
+    delay = Math.max(100, delay - delay / 15);
+    timeout = setTimeout(repeat, delay);
+  };
+  let delay = 350;
+  let timeout = setTimeout(repeat, 500);
+  action();
+  const eventName = e.type == 'touchstart' ? 'touchend' : 'mouseup';
+  document.addEventListener(eventName, () => clearTimeout(timeout), { once: true });
+}
+
+const suppressKeyNavOn = (e: KeyboardEvent): boolean =>
+  e.altKey ||
+  e.ctrlKey ||
+  e.shiftKey ||
+  e.metaKey ||
+  document.activeElement instanceof HTMLInputElement ||
+  document.activeElement instanceof HTMLTextAreaElement;
+
+export const onKeyDown = (ctrl: PgnViewer) => (e: KeyboardEvent) => {
+  if (suppressKeyNavOn(e)) return;
+  else if (e.key == 'ArrowLeft') ctrl.goTo('prev');
+  else if (e.key == 'ArrowRight') ctrl.goTo('next');
+  else if (e.key == 'f') ctrl.flip();
+};

package/src/game.ts

@@ -0,0 +1,61 @@
+import { Node, ChildNode } from 'chessops/pgn';
+import { Id, Initial, InitialOrMove, Metadata, MoveData, Players, Ply } from './interfaces';
+import { Path } from './path';
+
+export type AnyNode = Node<MoveData>;
+export type MoveNode = ChildNode<MoveData>;
+
+// immutable
+export class Game {
+  mainline: MoveData[];
+
+  constructor(
+    readonly initial: Initial,
+    readonly moves: AnyNode,
+    readonly players: Players,
+    readonly metadata: Metadata,
+  ) {
+    this.mainline = Array.from(this.moves.mainline());
+  }
+
+  nodeAt = (path: Path): AnyNode | undefined => nodeAtPathFrom(this.moves, path);
+
+  dataAt = (path: Path): MoveData | Initial | undefined => {
+    const node = this.nodeAt(path);
+    return node ? (isMoveNode(node) ? node.data : this.initial) : undefined;
+  };
+
+  title = () =>
+    this.players.white.name
+      ? [
+          this.players.white.title,
+          this.players.white.name,
+          'vs',
+          this.players.black.title,
+          this.players.black.name,
+        ]
+          .filter(x => x && !!x.trim())
+          .join('_')
+          .replace(' ', '-')
+      : 'lichess-pgn-viewer';
+
+  pathAtMainlinePly = (ply: Ply | 'last') =>
+    ply == 0
+      ? Path.root
+      : this.mainline[Math.max(0, Math.min(this.mainline.length - 1, ply == 'last' ? 9999 : ply - 1))]
+          ?.path || Path.root;
+
+  hasPlayerName = () => !!(this.players.white?.name || this.players.black?.name);
+}
+
+const childById = (node: AnyNode, id: Id): MoveNode | undefined =>
+  node.children.find(c => c.data.path.last() == id);
+
+const nodeAtPathFrom = (node: AnyNode, path: Path): AnyNode | undefined => {
+  if (path.empty()) return node;
+  const child = childById(node, path.head());
+  return child ? nodeAtPathFrom(child, path.tail()) : undefined;
+};
+
+export const isMoveNode = (n: AnyNode): n is MoveNode => 'data' in n;
+export const isMoveData = (d: InitialOrMove): d is MoveData => 'uci' in d;

package/src/interfaces.ts

@@ -0,0 +1,108 @@
+import { Color, Move, Position } from 'chessops';
+import { Config as CgConfig } from 'chessground/config';
+import { FEN } from 'chessground/types';
+import { Path } from './path';
+import { CommentShape } from 'chessops/pgn';
+
+export type Id = string;
+export type San = string;
+export type Uci = string;
+export type Ply = number;
+
+export type Translate = (key: string) => string | undefined;
+
+export type Clocks = {
+  white?: number;
+  black?: number;
+};
+
+export interface InitialOrMove {
+  fen: FEN;
+  turn: Color;
+  check: boolean;
+  comments: string[];
+  shapes: CommentShape[];
+  clocks: Clocks;
+}
+
+export interface Initial extends InitialOrMove {
+  pos: Position;
+}
+
+export interface MoveData extends InitialOrMove {
+  path: Path;
+  ply: number;
+  move: Move;
+  san: San;
+  uci: Uci;
+  startingComments: string[];
+  nags: number[];
+  emt?: number;
+}
+
+export interface Metadata {
+  externalLink?: string;
+  isLichess: boolean;
+  timeControl?: {
+    initial: number;
+    increment: number;
+  };
+  orientation?: Color;
+  result?: string;
+}
+
+export interface Player {
+  name?: string;
+  title?: string;
+  rating?: number;
+  isLichessUser: boolean;
+}
+export interface Players {
+  white: Player;
+  black: Player;
+}
+
+export type Pane = 'board' | 'menu' | 'pgn';
+
+export interface Comments {
+  texts: string[];
+  shapes: CommentShape[];
+  clock?: number;
+  emt?: number;
+}
+
+export type GoTo = 'first' | 'prev' | 'next' | 'last';
+
+export type ShowMoves = false | 'right' | 'bottom' | 'auto';
+export type ShowPlayers = true | false | 'auto';
+export type Lichess = string | false;
+
+export interface Opts {
+  pgn: string;
+  fen?: string;
+  chessground: CgConfig;
+  orientation?: Color;
+  showPlayers: ShowPlayers;
+  showMoves: ShowMoves;
+  showClocks: boolean;
+  showControls: boolean;
+  initialPly: Ply | 'last';
+  scrollToMove: boolean;
+  keyboardToMove: boolean;
+  drawArrows: boolean;
+  menu: {
+    getPgn: {
+      enabled?: boolean;
+      fileName?: string;
+    };
+    practiceWithComputer?: {
+      enabled?: boolean;
+    };
+    analysisBoard?: {
+      enabled?: boolean;
+    };
+  };
+  lichess: Lichess;
+  classes?: string;
+  translate?: Translate;
+}

package/src/main.ts

@@ -0,0 +1,24 @@
+import PgnViewer from './pgnViewer';
+import view from './view/main';
+import { init, attributesModule, classModule } from 'snabbdom';
+import { Opts } from './interfaces';
+import config from './config';
+
+export default function start(element: HTMLElement, cfg: Partial<Opts>): PgnViewer {
+  const patch = init([classModule, attributesModule]);
+
+  const opts = config(element, cfg);
+
+  const ctrl = new PgnViewer(opts, redraw);
+
+  const blueprint = view(ctrl);
+  element.innerHTML = '';
+  let vnode = patch(element, blueprint);
+  ctrl.div = vnode.elm as HTMLElement;
+
+  function redraw() {
+    vnode = patch(vnode, view(ctrl));
+  }
+
+  return ctrl;
+}

package/src/path.ts

@@ -0,0 +1,28 @@
+import { Id } from './interfaces';
+
+export class Path {
+  constructor(readonly path: string) {}
+
+  size = () => this.path.length / 2;
+
+  head = (): Id => this.path.slice(0, 2);
+
+  // returns an invalid path doesn't starting from root
+  tail = (): Path => new Path(this.path.slice(2));
+
+  init = (): Path => new Path(this.path.slice(0, -2));
+
+  last = (): Id => this.path.slice(-2);
+
+  empty = () => this.path == '';
+
+  contains = (other: Path): boolean => this.path.startsWith(other.path);
+
+  isChildOf = (parent: Path): boolean => this.init() === parent;
+
+  append = (id: Id) => new Path(this.path + id);
+
+  equals = (other: Path) => this.path == other.path;
+
+  static root = new Path('');
+}