add option to show multiple games from a PGN

lichess-org · Oct 23, 2023 · 70869d8 · 70869d8
1 parent 10a59f0
commit 70869d8
Show file tree

Hide file tree

Showing 9 changed files with 176 additions and 93 deletions.
diff --git a/scss/_layout.scss b/scss/_layout.scss
@@ -13,109 +13,124 @@ $board-min-width: 200px !default;
 
   --controls-height: #{$controls-height};
   &--controls-false {
-    --controls-height: 0em;
+    --controls-height: 0;
+  }
+
+  --select-height: 0;
+  &--select {
+    --select-height: $player-height;
   }
 
   &--moves-false {
-    grid-template-areas:
-      'board'
-      'controls';
-    grid-template-columns: minmax(200px, calc(100vh - var(--controls-height)));
-    grid-template-rows: auto var(--controls-height);
+    grid-template:
+      'select' var(--select-height)
+      'board' auto
+      'controls' var(--controls-height)
+      / minmax(200px, calc(100vh - var(--controls-height)));
   }
 
   &--moves-right {
-    grid-template-areas:
-      'board      side'
-      'controls   side';
-    grid-template-columns: auto $grid-side-column;
-    grid-template-rows: auto var(--controls-height);
+    grid-template:
+      'board      select' var(--select-height)
+      'board      side' auto
+      'controls   side' var(--controls-height)
+      / auto $grid-side-column;
   }
 
   &--moves-bottom {
-    grid-template-areas:
-      'board'
-      'controls'
-      'side';
-    grid-template-rows: auto var(--controls-height);
+    grid-template:
+      'select' var(--select-height)
+      'board' auto
+      'controls' var(--controls-height)
+      'side' auto
+      / auto;
     .lpv__controls {
       border-bottom: 1px solid $lpv-border;
     }
   }
 
   &--moves-auto {
-    grid-template-areas:
-      'board      side'
-      'controls   side';
-    grid-template-columns: minmax($board-min-width, calc(100vh - var(--controls-height))) $grid-side-column-full-screen;
-    grid-template-rows: auto var(--controls-height);
+    grid-template:
+      'board      select' var(--select-height)
+      'board      side' auto
+      'controls   side' var(--controls-height)
+      / minmax($board-min-width, calc(100vh - var(--controls-height))) $grid-side-column-full-screen;
     @media (max-width: #{$moves-auto-to-right}) {
-      grid-template-areas:
-        'board'
-        'controls'
-        'side';
-      grid-template-columns: minmax(
-        $board-min-width,
-        calc(100vh - var(--controls-height) - #{$grid-side-row})
-      );
-      grid-template-rows: auto var(--controls-height);
+      grid-template:
+        'select' var(--select-height)
+        'board' auto
+        'controls' var(--controls-height)
+        'side' auto
+        / minmax($board-min-width, calc(100vh - var(--controls-height) - #{$grid-side-row}));
     }
   }
 
   &--players {
     &.lpv--moves-false {
-      grid-template-areas:
-        'player-top'
-        'board'
-        'player-bot'
-        'controls';
-      grid-template-rows: $player-height auto $player-height var(--controls-height);
+      grid-template:
+        'select' var(--select-height)
+        'player-top' $player-height
+        'board' auto
+        'player-bot' $player-height
+        'controls' var(--controls-height)
+        / auto;
     }
 
     &.lpv--moves-right {
-      grid-template-areas:
-        'player-top side'
-        'board      side'
-        'player-bot side'
-        'controls   side';
-      grid-template-rows: $player-height auto $player-height var(--controls-height);
+      grid-template:
+        'player-top side' $player-height
+        'board      side' auto
+        'player-bot side' $player-height
+        'controls   side' var(--controls-height)
+        / auto auto;
+
+      &.lpv--select {
+        grid-template-areas:
+          'player-top select'
+          'board      side'
+          'player-bot side'
+          'controls   side';
+      }
     }
 
     &.lpv--moves-bottom {
-      grid-template-areas:
-        'player-top'
-        'board'
-        'player-bot'
-        'controls'
-        'side';
-      grid-template-rows: $player-height auto $player-height var(--controls-height);
+      grid-template:
+        'select' var(--select-height)
+        'player-top' $player-height
+        'board' auto
+        'player-bot' $player-height
+        'controls' var(--controls-height)
+        'side' auto
+        / auto;
       .lpv__controls {
         border-bottom: 1px solid $lpv-border;
       }
     }
 
     &.lpv--moves-auto {
-      grid-template-areas:
-        'player-top side'
-        'board      side'
-        'player-bot side'
-        'controls   side';
-      grid-template-columns:
-        minmax($board-min-width, calc(100vh - 2 * #{$player-height} - var(--controls-height)))
-        $grid-side-column-full-screen;
-      grid-template-rows: $player-height auto $player-height var(--controls-height);
-      @media (max-width: #{$moves-auto-to-right}) {
+      grid-template:
+        'player-top side' $player-height
+        'board      side' auto
+        'player-bot side' $player-height
+        'controls   side' var(--controls-height)
+        / minmax($board-min-width, calc(100vh - 2 * #{$player-height} - var(--controls-height)))
+          $grid-side-column-full-screen;
+      &.lpv--select {
         grid-template-areas:
-          'player-top'
-          'board'
-          'player-bot'
-          'controls'
-          'side';
-        grid-template-columns: minmax(
-          $board-min-width,
-          calc(100vh - 2 * #{$player-height} - var(--controls-height) - #{$grid-side-row})
-        );
-        grid-template-rows: $player-height auto $player-height var(--controls-height);
+          'player-top select'
+          'board      side'
+          'player-bot side'
+          'controls   side';
+      }
+      @media (max-width: #{$moves-auto-to-right}) {
+        grid-template:
+          'select' var(--select-height)
+          'player-top' $player-height
+          'board' auto
+          'player-bot' $player-height
+          'controls' var(--controls-height)
+          'side' auto
+          / minmax($board-min-width, calc(100vh - 2 * #{$player-height} - var(--controls-height) - #{$grid-side-row}));
       }
     }
   }
@@ -135,6 +150,9 @@ $board-min-width: 200px !default;
   &__controls {
     grid-area: controls;
   }
+  &__select {
+    grid-area: select;
+  }
   &__menu,
   &__pgn {
     grid-area: 1 / 1 / 2 / 2;

diff --git a/scss/_lichess-pgn-viewer.lib.scss b/scss/_lichess-pgn-viewer.lib.scss
@@ -28,6 +28,7 @@ $lpv-interesting: hsl(307, 80%, 70%) !default;
 @import './controls';
 @import './scrollbar';
 @import './font';
+@import './select';
 
 .lpv {
   border-radius: 5px;

diff --git a/scss/_select.scss b/scss/_select.scss
@@ -0,0 +1,8 @@
+.lpv__select {
+  background: inherit;
+  font: inherit;
+  color: inherit;
+  border: none;
+  padding: 0 16px;
+  cursor: pointer;
+}
diff --git a/src/config.ts b/src/config.ts
@@ -2,7 +2,6 @@ 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
@@ -25,7 +24,6 @@ const defaults: Opts = {
 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;
 }

diff --git a/src/interfaces.ts b/src/interfaces.ts
@@ -48,6 +48,7 @@ export interface Metadata {
     increment: number;
   };
   orientation?: Color;
+  name: string;
 }
 
 export interface Player {
@@ -78,7 +79,6 @@ export type Lichess = string | false;
 
 export interface Opts {
   pgn: string;
-  fen?: string;
   chessground: CgConfig;
   orientation?: Color;
   showPlayers: ShowPlayers;

diff --git a/src/pgn.test.ts b/src/pgn.test.ts
@@ -1,6 +1,9 @@
 import { expect, test } from '@jest/globals';
 import { isNormal, parseSquare } from 'chessops';
-import { makeGame } from './pgn';
+import { makeGame as makeGameFromPgnGame } from './pgn';
+import { parsePgn } from 'chessops/pgn';
+
+const makeGame = (pgn: string) => makeGameFromPgnGame(parsePgn(pgn)[0] ?? parsePgn('*'));
 
 test('single move pgn', () => {
   const lastMove = makeGame('e4')!.moves.children[0].data;
@@ -35,7 +38,7 @@ test('longer mainline', () => {
   expect(lastMove.path.path).toBe('/?UE)8\\M.>E>8>aP$5WG>DVN%ISKD3TD5F`WIPWP-5_b3-PI+;D;,4;4->4,>M,c');
 });
 test('initial position', () => {
-  expect(makeGame('').initial.pos.fullmoves).toBe(1);
+  expect(makeGame('*').initial.pos.fullmoves).toBe(1);
   expect(makeGame('1. e4 c5 2. Nf3').initial.pos.fullmoves).toBe(1);
   expect(
     makeGame('[FEN "rnbqkbnr/pppp1ppp/8/4p3/2B1P3/8/PPPP1PPP/RNBQK1NR b KQkq - 1 2"]').initial.pos.fullmoves,

diff --git a/src/pgn.ts b/src/pgn.ts
@@ -1,7 +1,7 @@
 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 { parseComment, PgnNodeData, startingPosition, transform, Node, Game as PgnGame } from 'chessops/pgn';
 import { makeSanAndPlay, parseSan } from 'chessops/san';
 import { Game } from './game';
 import { MoveData, Initial, Players, Player, Comments, Metadata, Clocks, Lichess } from './interfaces';
@@ -28,8 +28,7 @@ export const parseComments = (strings: string[]): Comments => {
   };
 };
 
-export const makeGame = (pgn: string, lichess: Lichess = false): Game => {
-  const game = parsePgn(pgn)[0] || parsePgn('*')[0];
+export const makeGame = (game: PgnGame<PgnNodeData>, lichess: Lichess = false): Game => {
   const start = startingPosition(game.headers).unwrap();
   const fen = makeFen(start.toSetup());
   const comments = parseComments(game.comments || []);
@@ -118,6 +117,7 @@ function makePlayers(headers: Headers, metadata: Metadata): Players {
 
 function makeMetadata(headers: Headers, lichess: Lichess): Metadata {
   const site = headers.get('source') || headers.get('site');
+  const event = headers.get('event');
   const tcs = headers
     .get('timecontrol')
     ?.split('+')
@@ -135,5 +135,6 @@ function makeMetadata(headers: Headers, lichess: Lichess): Metadata {
     isLichess: !!(lichess && site?.startsWith(lichess)),
     timeControl,
     orientation: orientation === 'white' || orientation === 'black' ? orientation : undefined,
+    name: event ?? '?',
   };
 }