ssb-chess-mithril 2.1.0 → 2.1.2

package/css/chessground-examples/rollup.config.mjs

@@ -0,0 +1,20 @@
+import typescript from "@rollup/plugin-typescript";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+
+export default {
+  input: "src/main.ts",
+  output: [
+    {
+      file: "dist/chessground-examples.js",
+      format: "iife",
+      name: "ChessgroundExamples",
+    },
+    // {
+    //   file: 'dist/chessground-examples.min.js',
+    //   format: 'iife',
+    //   name: 'ChessgroundExamples',
+    // },
+  ],
+  plugins: [resolve(), typescript(), commonjs()],
+};

package/css/chessground-examples/src/main.ts

@@ -1,15 +1,20 @@
-import { h, init } from 'snabbdom';
-import { VNode } from 'snabbdom/vnode';
-import { Api } from 'chessground/api';
-import klass from 'snabbdom/modules/class';
-import attributes from 'snabbdom/modules/attributes';
-import listeners from 'snabbdom/modules/eventlisteners';
-import * as page from 'page'
-import { Unit, list } from './units/unit'
+import {
+  h,
+  init,
+  VNode,
+  classModule,
+  attributesModule,
+  eventListenersModule,
+} from "snabbdom";
+import { Api } from "chessground/api";
+import page from "page";
+import { Unit, list } from "./units/unit";
 
 export function run(element: Element) {
+  const patch = init([classModule, attributesModule, eventListenersModule]);
 
-  const patch = init([klass, attributes, listeners]);
+  const lastZoom =
+    parseFloat(localStorage.getItem("lichess-dev.cge.zoom")!) || 100;
 
   let unit: Unit, cg: Api, vnode: VNode;
 
@@ -19,64 +24,92 @@ export function run(element: Element) {
 
   function runUnit(vnode: VNode) {
     const el = vnode.elm as HTMLElement;
-    el.className = 'cg-wrap';
+    el.className = "cg-wrap";
     cg = unit.run(el);
-    window['cg'] = cg; // for messing up with it from the browser console
+    window["cg"] = cg; // for messing up with it from the browser console
+    if (lastZoom !== 100) setZoom(lastZoom);
   }
 
   function setZoom(zoom: number) {
-    const el = document.querySelector('.cg-wrap') as HTMLElement;
+    const width = (zoom / 100) * 320;
+    const el = document.querySelector(".cg-wrap") as HTMLElement;
     if (el) {
-      const px = `${zoom / 100 * 320}px`;
-      el.style.width = px;
-      el.style.height = px;
-      document.body.dispatchEvent(new Event('chessground.resize'));
+      el.style.width = `${width}px`;
+      el.style.height = `${width}px`;
     }
+    const el3d = document.querySelector(".in3d .cg-wrap") as HTMLElement;
+    if (el3d) {
+      el3d.style.height = `${(width * 464.5) / 512}px`;
+    }
+    document.body.dispatchEvent(new Event("chessground.resize"));
   }
 
   function render() {
-    return h('div#chessground-examples', [
-      h('menu', list.map((ex, id) => {
-        return h('a', {
-          class: {
-            active: unit.name === ex.name
-          },
-          on: { click: () => page(`/${id}`) }
-        }, ex.name);
-      })),
-      h('section.blue.merida', [
-        h('div.cg-wrap', {
+    return h("div#chessground-examples", [
+      h(
+        "menu",
+        list.map((ex, id) => {
+          return h(
+            "a",
+            {
+              class: {
+                active: unit.name === ex.name,
+              },
+              on: { click: () => page(`/${id}`) },
+            },
+            ex.name,
+          );
+        }),
+      ),
+      h("section.blue.merida", [
+        h("div.cg-wrap", {
           hook: {
             insert: runUnit,
-            postpatch: runUnit
-          }
+            postpatch: runUnit,
+          },
         }),
-        h('p', unit.name)
+        h("p", unit.name),
       ]),
-      h('control', [
-        h('button', { on: { click() { cg.toggleOrientation(); }}}, 'Toggle orientation'),
-        h('label.zoom', [
-          'Zoom',
-          h('input', {
-            attrs: {
-              type: 'number',
-              value: 100
-            },
+      h("control", [
+        h(
+          "button",
+          {
             on: {
-              change(e) {
-                setZoom(parseFloat((e.target as HTMLInputElement).value));
-              }
-            }
-          }, 'Toggle orientation')
-        ])
-      ])
+              click() {
+                cg.toggleOrientation();
+              },
+            },
+          },
+          "Toggle orientation",
+        ),
+        h("label.zoom", [
+          "Zoom",
+          h(
+            "input",
+            {
+              attrs: {
+                type: "number",
+                value: lastZoom,
+              },
+              on: {
+                change(e) {
+                  const zoom = parseFloat((e.target as HTMLInputElement).value);
+                  localStorage.setItem("lichess-dev.cge.zoom", zoom.toString());
+                  setZoom(zoom);
+                },
+              },
+            },
+            "Toggle orientation",
+          ),
+        ]),
+      ]),
     ]);
   }
 
   page({ click: false, popstate: false, dispatch: false, hashbang: true });
-  page('/:id', ctx => {
+  page("/:id", (ctx) => {
     unit = list[parseInt(ctx.params.id) || 0];
     redraw();
   });
-  page(location.hash.slice(2) || '/0');
+  page(location.hash.slice(2) || "/0");
 }

package/css/chessground-examples/src/units/anim.ts

@@ -1,105 +1,126 @@
-import { Chessground }  from 'chessground';
-import { Unit } from './unit';
+import { Chessground } from "@lichess-org/chessground";
+import { Unit } from "./unit";
 
 export const conflictingAnim: Unit = {
-  name: 'Animation: conflict',
+  name: "Animation: conflict",
   run(el) {
     const cg = Chessground(el, {
       animation: {
-        duration: 500
+        duration: 500,
       },
-      fen: '8/8/5p2/4P3/4K3/8/8/8',
-      turnColor: 'black',
+      fen: "8/8/5p2/4P3/4K3/8/8/8",
+      turnColor: "black",
       movable: {
-        color: 'white',
-        free: false
-      }
+        color: "white",
+        free: false,
+      },
     });
     setTimeout(() => {
-      cg.move('f6', 'e5');
+      cg.move("f6", "e5");
       cg.set({
-        turnColor: 'white',
+        turnColor: "white",
         movable: {
-          dests: {e4: ['e5', 'd5', 'f5']}
-        }
+          dests: new Map([["e4", ["e5", "d5", "f5"]]]),
+        },
       });
       cg.playPremove();
     }, 2000);
     return cg;
-  }
+  },
 };
 
 export const withSameRole: Unit = {
-  name: 'Animation: same role',
+  name: "Animation: same role",
   run(el) {
     const cg = Chessground(el, {
       animation: {
-        duration: 2000
+        duration: 2000,
       },
       highlight: {
-        lastMove: false
+        lastMove: false,
       },
-      fen: '8/8/4p3/5p2/4B3/8/8/8',
-      turnColor: 'white',
+      fen: "8/8/4p3/5p2/4B3/8/8/8",
+      turnColor: "white",
     });
     setTimeout(() => {
-      cg.move('e4', 'f5');
+      cg.move("e4", "f5");
       setTimeout(() => {
-        cg.move('e6', 'f5');
+        cg.move("e6", "f5");
       }, 500);
     }, 200);
     return cg;
-  }
+  },
 };
 
 export const notSameRole: Unit = {
-  name: 'Animation: different role',
+  name: "Animation: different role",
   run(el) {
     const cg = Chessground(el, {
       animation: {
-        duration: 2000
+        duration: 2000,
       },
       highlight: {
-        lastMove: false
+        lastMove: false,
       },
-      fen: '8/8/4n3/5p2/4P3/8/8/8',
-      turnColor: 'white',
+      fen: "8/8/4n3/5p2/4P3/8/8/8",
+      turnColor: "white",
     });
     setTimeout(() => {
-      cg.move('e4', 'f5');
+      cg.move("e4", "f5");
       setTimeout(() => {
-        cg.move('e6', 'f5');
+        cg.move("e6", "f5");
       }, 500);
     }, 200);
     return cg;
-  }
+  },
 };
 
 export const whileHolding: Unit = {
-  name: 'Animation: while holding',
+  name: "Animation: while holding",
   run(el) {
     const cg = Chessground(el, {
-      fen: '8/8/5p2/4P3/4K3/8/8/8',
-      turnColor: 'black',
+      fen: "8/8/5p2/4P3/4K3/8/8/8",
+      turnColor: "black",
       animation: {
-        duration: 5000
+        duration: 5000,
       },
       movable: {
-        color: 'white',
+        color: "white",
         free: false,
-        showDests: false
-      }
+        showDests: false,
+      },
     });
     setTimeout(() => {
-      cg.move('f6', 'e5');
+      cg.move("f6", "e5");
       cg.set({
-        turnColor: 'white',
+        turnColor: "white",
         movable: {
-          dests: {e4: ['e5', 'd5', 'f5']}
-        }
+          dests: new Map([["e4", ["e5", "d5", "f5"]]]),
+        },
       });
       cg.playPremove();
     }, 3000);
     return cg;
-  }
+  },
+};
+
+export const enPassant: Unit = {
+  name: "Animation: en passant",
+  run(el) {
+    const cg = Chessground(el, {
+      animation: {
+        duration: 2000,
+      },
+      highlight: {
+        lastMove: false,
+      },
+      fen: "8/8/7p/2K1k1p1/5pP1/5P2/7P/8 b - g3 0 43",
+      turnColor: "black",
+      orientation: "black",
+    });
+    setTimeout(() => {
+      cg.set({ fen: "8/8/7p/2K1k1p1/8/5Pp1/7P/8 w - - 0 44" });
+    }, 500);
+    return cg;
+  },
 };

package/css/chessground-examples/src/units/basics.ts

@@ -1,32 +1,92 @@
-import { Chessground }  from 'chessground';
-import { Unit } from './unit';
+import { Chessground } from "@lichess-org/chessground";
+import { Unit } from "./unit";
 
 export const defaults: Unit = {
-  name: 'Default configuration',
+  name: "Default configuration",
   run(el) {
     return Chessground(el);
-  }
+  },
 };
 
 export const fromFen: Unit = {
-  name: 'From FEN, from black POV',
+  name: "From FEN, from black POV",
   run(el) {
     return Chessground(el, {
-      fen:'2r3k1/pp2Qpbp/4b1p1/3p4/3n1PP1/2N4P/Pq6/R2K1B1R w -',
-      orientation: 'black'
+      fen: "2r3k1/pp2Qpbp/4b1p1/3p4/3n1PP1/2N4P/Pq6/R2K1B1R w -",
+      orientation: "black",
     });
-  }
+  },
 };
 
 export const lastMoveCrazyhouse: Unit = {
-  name: 'Last move: crazyhouse',
+  name: "Last move: crazyhouse",
   run(el) {
     const cg = Chessground(el);
     setTimeout(() => {
-      cg.set({lastMove:['e2', 'e4']});
-      setTimeout(() => cg.set({lastMove:['g6']}), 1000);
-      setTimeout(() => cg.set({lastMove:['e1']}), 2000);
+      cg.set({ lastMove: ["e2", "e4"] });
+      setTimeout(() => cg.set({ lastMove: ["g6"] }), 1000);
+      setTimeout(() => cg.set({ lastMove: ["e1"] }), 2000);
     });
     return cg;
-  }
+  },
+};
+
+export const checkHighlight: Unit = {
+  name: "Highlight king in check",
+  run(el) {
+    const fen = "r1bqkbnr/1ppppBpp/p1n5/8/4P3/8/PPPP1PPP/RNBQK1NR b KQkq - 0 1";
+    const cg = Chessground(el, {
+      fen: fen,
+      turnColor: "black",
+      highlight: {
+        check: true,
+      },
+    });
+    cg.set({
+      check: true,
+    });
+    return cg;
+  },
+};
+
+export const unselectable: Unit = {
+  name: "Unselectable, undraggable pieces",
+  run(el) {
+    return Chessground(el, {
+      selectable: {
+        enabled: false,
+      },
+      draggable: {
+        enabled: false,
+      },
+    });
+  },
+};
+
+export const unselectableDraggable: Unit = {
+  name: "Unselectable but draggable pieces",
+  run(el) {
+    return Chessground(el, {
+      selectable: {
+        enabled: false,
+      },
+      draggable: {
+        enabled: true,
+      },
+    });
+  },
+};
+
+export const selectableUndraggable: Unit = {
+  name: "Selectable but undraggable pieces",
+  run(el) {
+    return Chessground(el, {
+      selectable: {
+        enabled: true,
+      },
+      draggable: {
+        enabled: false,
+      },
+    });
+  },
 };

package/css/chessground-examples/src/units/fen.ts

@@ -1,23 +1,26 @@
-import { Unit } from './unit';
-import { Chessground }  from 'chessground';
-import { Key } from 'chessground/types.d';
+import { Unit } from "./unit";
+import { Chessground } from "@lichess-org/chessground";
+import { Key } from "@lichess-org/chessground/types.d";
 
 export const autoSwitch: Unit = {
-  name: 'FEN: switch (puzzle bug)',
+  name: "FEN: switch (puzzle bug)",
   run(cont) {
-    const configs: Array<() => {fen: string; lastMove: Key[]}> = [() => {
-      return {
-        orientation: 'black',
-        fen: 'rnbqkb1r/pp1ppppp/5n2/8/3N1B2/8/PPP1PPPP/RN1QKB1R b KQkq - 0 4',
-        lastMove: ['f3', 'd4']
-      };
-    }, () => {
-      return {
-        orientation: 'white',
-        fen: '2r2rk1/4bp1p/pp2p1p1/4P3/4bP2/PqN1B2Q/1P3RPP/2R3K1 w - - 1 23',
-        lastMove: ['b4', 'b3']
-      };
-    }];
+    const configs: Array<() => { fen: string; lastMove: Key[] }> = [
+      () => {
+        return {
+          orientation: "black",
+          fen: "rnbqkb1r/pp1ppppp/5n2/8/3N1B2/8/PPP1PPPP/RN1QKB1R b KQkq - 0 4",
+          lastMove: ["f3", "d4"],
+        };
+      },
+      () => {
+        return {
+          orientation: "white",
+          fen: "2r2rk1/4bp1p/pp2p1p1/4P3/4bP2/PqN1B2Q/1P3RPP/2R3K1 w - - 1 23",
+          lastMove: ["b4", "b3"],
+        };
+      },
+    ];
     const cg = Chessground(cont, configs[0]());
     const delay = 2000;
     let it = 0;
@@ -28,5 +31,5 @@ export const autoSwitch: Unit = {
     }
     setTimeout(run, delay);
     return cg;
-  }
+  },
 };

package/css/chessground-examples/src/units/in3d.ts

@@ -1,10 +1,10 @@
-import { Chessground }  from 'chessground';
-import { Chess } from 'chess.js';
-import { Unit } from './unit';
-import { toDests, aiPlay } from '../util'
+import { Chessground } from "@lichess-org/chessground";
+import { Chess } from "chess.js";
+import { Unit } from "./unit";
+import { toDests, aiPlay } from "../util";
 
 export const defaults: Unit = {
-  name: '3D theme',
+  name: "3D theme",
   run(cont) {
     const el = wrapped(cont);
     const cg = Chessground(el, {
@@ -12,52 +12,52 @@ export const defaults: Unit = {
     });
     cg.redrawAll();
     return cg;
-  }
-}
+  },
+};
 
 export const vsRandom: Unit = {
-  name: '3D theme: play vs random AI',
+  name: "3D theme: play vs random AI",
   run(cont) {
     const el = wrapped(cont);
     const chess = new Chess();
     const cg = Chessground(el, {
-      orientation: 'black',
+      orientation: "black",
       addPieceZIndex: true,
       movable: {
-        color: 'white',
+        color: "white",
         free: false,
-        dests: toDests(chess)
-      }
+        dests: toDests(chess),
+      },
     });
     cg.redrawAll();
     cg.set({
       movable: {
         events: {
-          after: aiPlay(cg, chess, 1000, false)
-        }
-      }
+          after: aiPlay(cg, chess, 1000, false),
+        },
+      },
     });
     return cg;
-  }
+  },
 };
 
 export const fullRandom: Unit = {
-  name: '3D theme: watch 2 random AIs',
+  name: "3D theme: watch 2 random AIs",
   run(cont) {
     const el = wrapped(cont);
     const chess = new Chess();
     const delay = 300;
     const cg = Chessground(el, {
-      orientation: 'black',
+      orientation: "black",
       addPieceZIndex: true,
       movable: {
-        free: false
-      }
+        free: false,
+      },
     });
     cg.redrawAll();
     function makeMove() {
       if (!cg.state.dom.elements.board.offsetParent) return;
-      const moves = chess.moves({verbose:true});
+      const moves = chess.moves({ verbose: true });
       const move = moves[Math.floor(Math.random() * moves.length)];
       chess.move(move.san);
       cg.move(move.from, move.to);
@@ -65,13 +65,13 @@ export const fullRandom: Unit = {
     }
     setTimeout(makeMove, delay);
     return cg;
-  }
-}
+  },
+};
 
 function wrapped(cont: HTMLElement) {
-  const el = document.createElement('div');
-  cont.className = 'in3d staunton';
-  cont.innerHTML = '';
+  const el = document.createElement("div");
+  cont.className = "in3d staunton";
+  cont.innerHTML = "";
   cont.appendChild(el);
   return el;
 }