Add move list to puzzle nvui

ui/analyse/src/plugins/nvui.ts

@@ -10,6 +10,8 @@ import {
   renderSan,
   renderPieces,
   renderBoard,
+  renderMainline,
+  renderComments,
   styleSetting,
   pieceSetting,
   prefixSetting,
@@ -299,33 +301,6 @@ function requestAnalysisButton(ctrl: AnalyseController, inProgress: Prop<boolean
   );
 }
 
-function renderMainline(nodes: Tree.Node[], currentPath: Tree.Path, style: Style) {
-  const res: Array<string | VNode> = [];
-  let path: Tree.Path = '';
-  nodes.forEach(node => {
-    if (!node.san || !node.uci) return;
-    path += node.id;
-    const content: MaybeVNodes = [
-      node.ply & 1 ? moveView.plyToTurn(node.ply) + ' ' : null,
-      renderSan(node.san, node.uci, style),
-    ];
-    res.push(
-      h(
-        'move',
-        {
-          attrs: { p: path },
-          class: { active: path === currentPath },
-        },
-        content
-      )
-    );
-    res.push(renderComments(node, style));
-    res.push(', ');
-    if (node.ply % 2 === 0) res.push(h('br'));
-  });
-  return res;
-}
-
 function renderCurrentNode(node: Tree.Node, style: Style): string {
   if (!node.san || !node.uci) return 'Initial position';
   return [moveView.plyToTurn(node.ply), renderSan(node.san, node.uci, style), renderComments(node, style)]
@@ -333,17 +308,6 @@ function renderCurrentNode(node: Tree.Node, style: Style): string {
     .trim();
 }
 
-function renderComments(node: Tree.Node, style: Style): string {
-  if (!node.comments) return '';
-  return (node.comments || []).map(c => renderComment(c, style)).join('. ');
-}
-
-function renderComment(comment: Tree.Comment, style: Style): string {
-  return comment.by === 'lichess'
-    ? comment.text.replace(/Best move was (.+)\./, (_, san) => 'Best move was ' + renderSan(san, undefined, style))
-    : comment.text;
-}
-
 function renderPlayer(ctrl: AnalyseController, player: Player) {
   return player.ai ? ctrl.trans('aiNameLevelAiLevel', 'Stockfish', player.ai) : userHtml(ctrl, player);
 }

ui/nvui/src/chess.ts

@@ -1,4 +1,4 @@
-import { h, VNode } from 'snabbdom';
+import { h, VNode, VNodeChildren } from 'snabbdom';
 import { Dests, Pieces, Rank, File, files } from 'chessground/types';
 import { invRanks, allKeys } from 'chessground/util';
 import { Api } from 'chessground/api';
@@ -673,3 +673,43 @@ export function inputToLegalUci(input: string, fen: string, chessground: Api): s
   if (legalUcis.includes(uci.toLowerCase())) return uci + promotion;
   else return;
 }
+
+export function renderMainline(nodes: Tree.Node[], currentPath: Tree.Path, style: Style) {
+  const res: Array<string | VNode> = [];
+  let path: Tree.Path = '';
+  nodes.forEach(node => {
+    if (!node.san || !node.uci) return;
+    path += node.id;
+    const content: VNodeChildren = [
+      node.ply & 1 ? plyToTurn(node.ply) + ' ' : null,
+      renderSan(node.san, node.uci, style),
+    ];
+    res.push(
+      h(
+        'move',
+        {
+          attrs: { p: path },
+          class: { active: path === currentPath },
+        },
+        content
+      )
+    );
+    res.push(renderComments(node, style));
+    res.push(', ');
+    if (node.ply % 2 === 0) res.push(h('br'));
+  });
+  return res;
+}
+
+const plyToTurn = (ply: Ply): number => Math.floor((ply - 1) / 2) + 1;
+
+export function renderComments(node: Tree.Node, style: Style): string {
+  if (!node.comments) return '';
+  return (node.comments || []).map(c => renderComment(c, style)).join('. ');
+}
+
+function renderComment(comment: Tree.Comment, style: Style): string {
+  return comment.by === 'lichess'
+    ? comment.text.replace(/Best move was (.+)\./, (_, san) => 'Best move was ' + renderSan(san, undefined, style))
+    : comment.text;
+}

ui/puzzle/src/plugins/nvui.ts

@@ -2,7 +2,15 @@ import { h, VNode } from 'snabbdom';
 import { Controller, Redraw } from '../interfaces';
 import { puzzleBox, userBox } from '../view/side';
 import theme from '../view/theme';
-import { castlingFlavours, inputToLegalUci, renderPieces, renderSan, Style, styleSetting } from 'nvui/chess';
+import {
+  castlingFlavours,
+  inputToLegalUci,
+  renderMainline,
+  renderPieces,
+  renderSan,
+  Style,
+  styleSetting,
+} from 'nvui/chess';
 import { Chessground } from 'chessground';
 import { makeConfig } from '../view/chessground';
 import { renderSetting } from 'nvui/setting';
@@ -30,6 +38,17 @@ lichess.PuzzleNVUI = function (redraw: Redraw) {
             puzzleBox(ctrl),
             theme(ctrl),
             !ctrl.streak ? userBox(ctrl) : null,
+            h('h2', 'Moves'),
+            h(
+              'p.moves',
+              {
+                attrs: {
+                  role: 'log',
+                  'aria-live': 'off',
+                },
+              },
+              renderMainline(ctrl.vm.mainline, ctrl.vm.path, moveStyle.get())
+            ),
             h('h2', 'Pieces'),
             h('div.pieces', renderPieces(pieces, moveStyle.get())),
             h('h2', 'Puzzle status'),