lichess-org · ornicar · May 3, 2024 · Mar 29, 2024 · Mar 29, 2024 · Mar 31, 2024
diff --git a/app/views/analyse/replay.scala b/app/views/analyse/replay.scala
@@ -115,6 +115,7 @@ object replay:
       .cssTag("analyse.round")
       .cssTag((pov.game.variant == Crazyhouse).option("analyse.zh"))
       .cssTag(ctx.blind.option("round.nvui"))
+      .cssTag(ctx.pref.hasKeyboardMove.option("keyboardMove"))
       .js(analyseNvuiTag)
       .js(
         bits.analyseModule(

diff --git a/app/views/study.scala b/app/views/study.scala
@@ -56,6 +56,7 @@ def show(
 )(using ctx: Context) =
   Page(s.name.value)
     .cssTag("analyse.study")
+    .cssTag(ctx.pref.hasKeyboardMove.option("keyboardMove"))
     .js(analyseNvuiTag)
     .js(
       PageModule(

diff --git a/modules/analyse/src/main/ui/AnalyseUi.scala b/modules/analyse/src/main/ui/AnalyseUi.scala
@@ -20,6 +20,7 @@ final class AnalyseUi(helpers: Helpers)(externalEngineEndpoint: String):
       .cssTag((pov.game.variant == Crazyhouse).option("analyse.zh"))
       .cssTag(withForecast.option("analyse.forecast"))
       .cssTag(ctx.blind.option("round.nvui"))
+      .cssTag(ctx.pref.hasKeyboardMove.option("keyboardMove"))
       .csp(csp.compose(_.withExternalAnalysisApis))
       .graph(
         title = "Chess analysis board",

diff --git a/modules/round/src/main/JsonView.scala b/modules/round/src/main/JsonView.scala
@@ -208,7 +208,8 @@ final class JsonView(
                 "coords"            -> pref.coords,
                 "resizeHandle"      -> pref.resizeHandle,
                 "replay"            -> pref.replay,
-                "clockTenths"       -> pref.clockTenths
+                "clockTenths"       -> pref.clockTenths,
+                "keyboardMove"      -> pref.hasKeyboardMove
               )
               .add("is3d" -> pref.is3d)
               .add("clockBar" -> pref.clockBar)
@@ -288,7 +289,8 @@ final class JsonView(
             "animationDuration" -> animationMillis(pov, pref),
             "coords"            -> pref.coords,
             "moveEvent"         -> pref.moveEvent,
-            "showCaptured"      -> pref.captured
+            "showCaptured"      -> pref.captured,
+            "keyboardMove"      -> pref.hasKeyboardMove
           )
           .add("rookCastle" -> (pref.rookCastle == Pref.RookCastle.YES))
           .add("is3d" -> pref.is3d)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/ui/analyse/css/_layout.scss b/ui/analyse/css/_layout.scss
@@ -63,6 +63,11 @@ body {
     display: none;
   }
 
+  .keyboard-move {
+    grid-area: kb-move;
+    margin: $analyse-block-gap;
+  }
+
   ---chat-height: fit-content(0);
   &--wiki {
     ---chat-height: 0;
@@ -72,8 +77,9 @@ body {
     margin: $analyse-block-gap 0 0 0;
   }
 
-  grid-template-rows: auto auto minmax(20em, 30vh);
+  grid-template-rows: auto auto auto minmax(20em, 30vh);
   grid-template-areas:
+    'kb-move'
     'board'
     'controls'
     'tools'
@@ -88,6 +94,7 @@ body {
     grid-template-rows: fit-content(0);
     grid-template-areas:
       'board      gauge tools'
+      'kb-move    .     controls'
       'under      .     controls'
       'under      .     round-training'
       'under      .     side'
@@ -109,6 +116,10 @@ body {
     .eval-gauge {
       display: block;
     }
+
+    .keyboard-move {
+      margin: calc($analyse-block-gap / 2) 0 0 0;
+    }
   }
 
   @include mq-is-col2-squeeze {
@@ -117,12 +128,13 @@ body {
 
   @include mq-at-least-col3 {
     grid-template-columns: $col3-uniboard-side $analyse-block-gap var(---col3-uniboard-width) $analyse-block-gap $col3-uniboard-table;
-    grid-template-rows: auto $chat-height 2.5em 1fr;
+    grid-template-rows: auto $chat-height auto 2.5em 1fr;
     grid-template-areas:
-      'side    . board gauge tools'
-      'chat    . board gauge tools'
-      'uchat   . under .     controls'
-      'uchat   . under .     round-training';
+      'side    . board   gauge tools'
+      'chat    . board   gauge tools'
+      'uchat   . kb-move .     controls'
+      'uchat   . under   .     controls'
+      'uchat   . under   .     round-training';
 
     &__side {
       margin-top: 0;

diff --git a/ui/analyse/css/_zh.scss b/ui/analyse/css/_zh.scss
@@ -23,6 +23,7 @@ $pocket-height: 60px;
     'pocket-top'
     'board'
     'pocket-bot'
+    'kb-move'
     'controls'
     'tools'
     'side'
@@ -37,6 +38,7 @@ $pocket-height: 60px;
       'board      gauge pocket-top'
       'board      gauge tools'
       'board      gauge pocket-bot'
+      'kb-move    .     controls'
       'under      .     controls'
       'under      .     round-training'
       'under      .     side'
@@ -47,12 +49,13 @@ $pocket-height: 60px;
   @include mq-at-least-col3 {
     grid-template-rows: $pocket-height auto auto $pocket-height;
     grid-template-areas:
-      'side    . board gauge pocket-top'
-      'side    . board gauge tools'
-      'chat    . board gauge tools'
-      'chat    . board gauge pocket-bot'
-      'uchat   . under .     controls'
-      'uchat   . under .     round-training';
+      'side    . board   gauge pocket-top'
+      'side    . board   gauge tools'
+      'chat    . board   gauge tools'
+      'chat    . board   gauge pocket-bot'
+      'uchat   . kb-move .     controls'
+      'uchat   . under   .     controls'
+      'uchat   . under   .     round-training';
   }
 }
 

diff --git a/ui/analyse/css/study/_layout.scss b/ui/analyse/css/study/_layout.scss
@@ -1,3 +1,8 @@
 .analyse__underboard {
   margin-top: calc($analyse-block-gap / 2);
 }
+
+.analyse .keyboard-move {
+  margin-top: calc($analyse-block-gap * 2);
+  margin-bottom: calc($analyse-block-gap * -1);
+}
diff --git a/ui/analyse/package.json b/ui/analyse/package.json
@@ -26,6 +26,7 @@
     "common": "workspace:*",
     "debounce-promise": "^3.1.2",
     "game": "workspace:*",
+    "keyboardMove": "workspace:*",
     "nvui": "workspace:*",
     "prop-types": "^15.8.1",
     "shepherd.js": "^11.2.0",

diff --git a/ui/analyse/src/ctrl.ts b/ui/analyse/src/ctrl.ts
@@ -51,6 +51,8 @@ import { uciToMove } from 'chessground/util';
 import Persistence from './persistence';
 import pgnImport from './pgnImport';
 import ForecastCtrl from './forecast/forecastCtrl';
+import { ArrowKey, KeyboardMove, ctrl as makeKeyboardMove } from 'keyboardMove';
+import * as control from './control';
 
 export default class AnalyseCtrl {
   data: AnalyseData;
@@ -123,6 +125,7 @@ export default class AnalyseCtrl {
   cgConfig: any; // latest chessground config (useful for revert)
   nvui?: NvuiPlugin;
   pvUciQueue: Uci[] = [];
+  keyboardMove?: KeyboardMove;
 
   constructor(
     readonly opts: AnalyseOpts,
@@ -359,6 +362,24 @@ export default class AnalyseCtrl {
     return config;
   }
 
+  setChessground = (cg: CgApi) => {
+    this.chessground = cg;
+
+    if (this.data.pref.keyboardMove) {
+      this.keyboardMove ??= makeKeyboardMove({
+        ...this,
+        data: { ...this.data, player: { color: 'both' } },
+        flipNow: this.flip,
+      });
+      this.keyboardMove.update({ fen: this.node.fen, canMove: true, cg });
+      requestAnimationFrame(() => this.redraw());
+    }
+
+    this.setAutoShapes();
+    if (this.node.shapes) this.chessground.setShapes(this.node.shapes as DrawShape[]);
+    this.cgVersion.dom = this.cgVersion.js;
+  };
+
   private onChange: () => void = throttle(300, () => {
     site.pubsub.emit('analysis.change', this.node.fen, this.path);
   });
@@ -398,6 +419,7 @@ export default class AnalyseCtrl {
     }
     site.pubsub.emit('ply', this.node.ply, this.tree.lastMainlineNode(this.path).ply === this.node.ply);
     this.showGround();
+    this.pluginUpdate(this.node.fen);
   }
 
   userJump = (path: Tree.Path): void => {
@@ -418,12 +440,12 @@ export default class AnalyseCtrl {
     if (this.canJumpTo(path)) this.userJump(path);
   }
 
-  mainlinePathToPly(ply: Ply): Tree.Path {
+  mainlinePlyToPath(ply: Ply): Tree.Path {
     return treeOps.takePathWhile(this.mainline, n => n.ply <= ply);
   }
 
   jumpToMain = (ply: Ply): void => {
-    this.userJump(this.mainlinePathToPly(ply));
+    this.userJump(this.mainlinePlyToPath(ply));
   };
 
   jumpToIndex = (index: number): void => {
@@ -455,7 +477,7 @@ export default class AnalyseCtrl {
       } as AnalyseData;
       if (andReload) {
         this.reloadData(data, false);
-        this.userJump(this.mainlinePathToPly(this.tree.lastPly()));
+        this.userJump(this.mainlinePlyToPath(this.tree.lastPly()));
         this.redraw();
       }
       return data;
@@ -474,6 +496,21 @@ export default class AnalyseCtrl {
       encodeURIComponent(fen).replace(/%20/g, '_').replace(/%2F/g, '/');
   }
 
+  crazyValid = (role: cg.Role, key: cg.Key): boolean => {
+    const color = this.chessground.state.movable.color;
+    return (
+      (color === 'white' || color === 'black') &&
+      crazyValid(this.chessground, this.node.drops, { color, role }, key)
+    );
+  };
+
+  getCrazyhousePockets = () => this.node.crazy?.pockets;
+
+  sendNewPiece = (role: cg.Role, key: cg.Key): void => {
+    const color = this.chessground.state.movable.color;
+    if (color === 'white' || color === 'black') this.userNewPiece({ color, role }, key);
+  };
+
   userNewPiece = (piece: cg.Piece, pos: Key): void => {
     if (crazyValid(this.chessground, this.node.drops, piece, pos)) {
       this.justPlayed = roleToChar(piece.role).toUpperCase() + '@' + pos;
@@ -555,6 +592,7 @@ export default class AnalyseCtrl {
     this.tree.addDests(dests, path);
     if (path === this.path) {
       this.showGround();
+      this.pluginUpdate(this.node.fen);
       if (this.outcome()) this.ceval.stop();
     }
     this.withCg(cg => cg.playPremove());
@@ -947,4 +985,29 @@ export default class AnalyseCtrl {
 
   withCg = <A>(f: (cg: ChessgroundApi) => A): A | undefined =>
     this.chessground && this.cgVersion.js === this.cgVersion.dom ? f(this.chessground) : undefined;
+
+  handleArrowKey = (arrowKey: ArrowKey) => {
+    if (arrowKey === 'ArrowUp') {
+      if (this.fork.prev()) this.setAutoShapes();
+      else control.first(this);
+    } else if (arrowKey === 'ArrowDown') {
+      if (this.fork.next()) this.setAutoShapes();
+      else control.last(this);
+    } else if (arrowKey === 'ArrowLeft') control.prev(this);
+    else if (arrowKey === 'ArrowRight') control.next(this);
+    this.redraw();
+  };
+
+  pluginMove = (orig: cg.Key, dest: cg.Key, prom: cg.Role | undefined) => {
+    const capture = this.chessground.state.pieces.get(dest);
+    this.sendMove(orig, dest, capture, prom);
+  };
+
+  pluginUpdate = (fen: string) => {
+    // if controller and chessground board state differ, ignore this update. once the chessground
+    // state is updated to match, pluginUpdate will be called again.
+    if (!fen.startsWith(this.chessground?.getFen())) return;
+
+    this.keyboardMove?.update({ fen, canMove: true });
+  };
 }
diff --git a/ui/analyse/src/ground.ts b/ui/analyse/src/ground.ts
@@ -2,20 +2,14 @@ import { h, VNode } from 'snabbdom';
 import { Api as CgApi } from 'chessground/api';
 import { Config as CgConfig } from 'chessground/config';
 import * as cg from 'chessground/types';
-import { DrawShape } from 'chessground/draw';
 import resizeHandle from 'common/resize';
 import AnalyseCtrl from './ctrl';
 import * as Prefs from 'common/prefs';
 
 export const render = (ctrl: AnalyseCtrl): VNode =>
   h('div.cg-wrap.cgv' + ctrl.cgVersion.js, {
     hook: {
-      insert: vnode => {
-        ctrl.chessground = site.makeChessground(vnode.elm as HTMLElement, makeConfig(ctrl));
-        ctrl.setAutoShapes();
-        if (ctrl.node.shapes) ctrl.chessground.setShapes(ctrl.node.shapes as DrawShape[]);
-        ctrl.cgVersion.dom = ctrl.cgVersion.js;
-      },
+      insert: vnode => ctrl.setChessground(site.makeChessground(vnode.elm as HTMLElement, makeConfig(ctrl))),
       destroy: _ => ctrl.chessground.destroy(),
     },
   });

diff --git a/ui/analyse/src/interfaces.ts b/ui/analyse/src/interfaces.ts
@@ -65,6 +65,7 @@ export interface AnalysePref {
   highlight?: boolean;
   showCaptured?: boolean;
   animationDuration?: number;
+  keyboardMove: boolean;
   moveEvent: Prefs.MoveEvent;
 }
 

diff --git a/ui/analyse/src/retrospect/retroCtrl.ts b/ui/analyse/src/retrospect/retroCtrl.ts
@@ -78,7 +78,7 @@ export function make(root: AnalyseCtrl, color: Color): RetroCtrl {
     }
     const fault = {
       node,
-      path: root.mainlinePathToPly(node.ply),
+      path: root.mainlinePlyToPath(node.ply),
     };
     const prevPath = treePath.init(fault.path);
     const prev = {

diff --git a/ui/analyse/src/view/main.ts b/ui/analyse/src/view/main.ts
@@ -9,6 +9,7 @@ import crazyView from '../crazy/crazyView';
 import AnalyseCtrl from '../ctrl';
 import forecastView from '../forecast/forecastView';
 import { view as keyboardView } from '../keyboard';
+import { render as renderKeyboardMove } from 'keyboardMove';
 import type * as studyDeps from '../study/studyDeps';
 import { relayView } from '../study/relay/relayView';
 import {
@@ -42,6 +43,7 @@ function analyseView(ctrl: AnalyseCtrl, deps?: typeof studyDeps): VNode {
     !menuIsOpen && crazyView(ctrl, ctrl.bottomColor(), 'bottom'),
     !gamebookPlayView && renderControls(ctrl),
     renderUnderboard(ctx),
+    ctrl.keyboardMove && renderKeyboardMove(ctrl.keyboardMove),
     trainingView(ctrl),
     ctrl.studyPractice
       ? deps?.studyPracticeView.side(study!)

diff --git a/ui/analyse/tsconfig.json b/ui/analyse/tsconfig.json
@@ -11,6 +11,7 @@
     { "path": "../chess/tsconfig.json" },
     { "path": "../common/tsconfig.json" },
     { "path": "../game/tsconfig.json" },
+    { "path": "../keyboardMove/tsconfig.json" },
     { "path": "../nvui/tsconfig.json" },
     { "path": "../tree/tsconfig.json" }
   ],

diff --git a/ui/ceval/src/view/main.ts b/ui/ceval/src/view/main.ts
@@ -1,7 +1,7 @@
 import * as winningChances from '../winningChances';
 import * as licon from 'common/licon';
 import { stepwiseScroll } from 'common/scroll';
-import { bind, LooseVNodes, looseH as h } from 'common/snabbdom';
+import { onInsert, bind, LooseVNodes, looseH as h } from 'common/snabbdom';
 import { defined, notNull } from 'common';
 import { ParentCtrl, NodeEvals, CevalState } from '../types';
 import { VNode } from 'snabbdom';
@@ -236,7 +236,10 @@ export function renderCeval(ctrl: ParentCtrl): LooseVNodes {
     h('div.switch', { attrs: { title: trans.noarg('toggleLocalEvaluation') + ' (L)' } }, [
       h('input#analyse-toggle-ceval.cmn-toggle.cmn-toggle--subtle', {
         attrs: { type: 'checkbox', checked: enabled, disabled: !ceval.analysable },
-        hook: bind('change', ctrl.toggleCeval),
+        hook: onInsert((el: HTMLInputElement) => {
+          el.addEventListener('keydown', e => (e.key === 'Enter' || e.key === ' ') && ctrl.toggleCeval());
+          el.addEventListener('change', () => ctrl.toggleCeval());
+        }),
       }),
       h('label', { attrs: { for: 'analyse-toggle-ceval' } }),
     ]);

diff --git a/ui/chess/src/moveRootCtrl.ts b/ui/chess/src/moveRootCtrl.ts
@@ -1,7 +1,7 @@
 import * as cg from 'chessground/types';
 
 export interface MoveRootCtrl {
-  auxMove: (orig: cg.Key, dest: cg.Key, prom: cg.Role | undefined) => void;
+  pluginMove: (orig: cg.Key, dest: cg.Key, prom: cg.Role | undefined) => void;
   redraw: () => void;
   flipNow: () => void;
   offerDraw?: (v: boolean, immediately?: boolean) => void;