Abalone

Author: vincentfrochot

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 dist/
+.env.local

README.md

@@ -91,40 +91,69 @@ More? Please make a pull request to include it here.
 Commands are listed in package.json.
 In case you want to see the possibilities from the console, run `pnpm run`
 
-Install build dependencies:
+### Install build dependencies:
 
 ```sh
 pnpm install
 ```
 
-Update deps:
+### Update deps:
 
 ```sh
 rm -rf node_modules pnpm-lock.yaml && pnpm store prune && pnpm install
 ```
 
-Build the node module:
+### Build the node module:
 
 ```sh
 pnpm prepare --watch
 ```
 
-Build the minified bundled dist files: (NOTE: from lila you will likely then need to restart the build as it does not watch for changes on the minified file):
+### Build the minified bundled dist files: (NOTE: from lila you will likely then need to restart the build as it does not watch for changes on the minified file):
 
 ```sh
 pnpm dist
 ```
 
-run tests:
+### Run tests:
 
 ```sh
 pnpm run test --watch
 pnpm run test fen --watch
 ```
 
-Before committing:
+### Before committing:
 
 ```sh
 pnpm run lint
 pnpm run format
 ```
+
+### Watch chessground changes from another project:
+
+In other project:
+
+- declare the link towards chessground (from project's `package.json`)
+
+```json
+  "dependencies": {
+    ...
+    "chessground": "link:/path/to/chessground",
+    ...
+  }
+```
+
+In chessground:
+
+- create `.env.local` file based on .env.local.default
+- link back:
+
+```sh
+    pnpm run link
+```
+
+- trigger compilation and generate minified file:
+
+```sh
+  pnpm run local-dist
+```

build.js

@@ -0,0 +1,21 @@
+import * as cps from 'node:child_process';
+import * as ps from 'node:process';
+
+const consumerRoot = process.env.CONSUMER_ROOT;
+const args = ps.argv.slice(2);
+
+if (args.includes('--link')) {
+  cps.execSync('pnpm link --dir ' + consumerRoot);
+  console.log('\x1b[36m%s\x1b[0m', 'Linked to ' + consumerRoot);
+}
+if (args.includes('--bundle')) {
+  cps.execSync(
+    'esbuild src/chessground.ts --bundle --format=esm --outfile=' +
+      consumerRoot +
+      '/node_modules/chessground/dist/chessground.min.js',
+  );
+  console.log(
+    '\x1b[32m%s\x1b[0m',
+    'Compiled and built ' + consumerRoot + '/node_modules/chessground/dist/chessground.min.js',
+  );
+}

package.json

@@ -49,6 +49,9 @@
     "check-format": "prettier --check .",
     "bundle": "esbuild src/chessground.ts --bundle --format=esm --outfile=dist/chessground.min.js --minify",
     "dist": "$npm_execpath run compile && $npm_execpath run bundle",
+    "link": "node --env-file=.env.local ./build.js --link",
+    "local-bundle": "node --env-file=.env.local ./build.js --bundle",
+    "local-dist": "$npm_execpath run compile && $npm_execpath run local-bundle",
     "postinstall": "$npm_execpath run bundle"
   },
   "files": [

src/api.ts

@@ -144,11 +144,11 @@ export function start(state: State, redrawAll: cg.Redraw): Api {
     },
 
     move(orig, dest): void {
-      anim(state => board.baseMove(state, orig, dest), state);
+      anim(state => state.baseMove(state, orig, dest), state);
     },
 
     moveNoAnim(orig, dest): void {
-      board.baseMove(state, orig, dest);
+      state.baseMove(state, orig, dest);
       state.dom.redraw();
     },
 

src/board.ts

@@ -23,8 +23,8 @@ import { premove, queen, knight } from './premove';
 import predrop from './predrop';
 import * as cg from './types';
 import * as T from './transformations';
+
 import { getKeyAtDomPos as abaloneGetKeyAtDomPos } from './variants/abalone/board';
-import { abaloneUpdatePiecesFromMove } from './variants/abalone/util';
 
 export function setOrientation(state: HeadlessState, o: cg.Orientation): void {
   state.orientation = o;
@@ -183,17 +183,15 @@ function updatePocketPieces(
   state.pocketPieces = newPocketPieces;
 }
 
-// returns false in case the move could not be processed
+/**
+ * called when a piece is moved from orig to dest
+ * @returns: false if the move is invalid, true if the move is valid but no capture happened, or the captured piece if a capture happened
+ */
 export function baseMove(state: HeadlessState, orig: cg.Key, dest: cg.Key): cg.Piece | boolean {
   const origPiece = state.pieces.get(orig),
     destPiece = state.pieces.get(dest);
   if ((orig === dest && state.variant !== 'togyzkumalak' && state.variant !== 'bestemshe') || !origPiece) return false;
-  let abalonePieces: cg.PiecesDiff = state.pieces, // because captures are computed in abaloneUpdatePiecesFromMove, it is better to store the updated pieces and the capture before the switch responsible of setPieces
-    abaloneCapture: boolean = false;
-  if (state.variant === 'abalone') {
-    [abalonePieces, abaloneCapture] = abaloneUpdatePiecesFromMove(state.pieces, orig, dest);
-  }
-  const captured = isCapture(state.variant, destPiece, origPiece) || abaloneCapture;
+  const captured = isCapture(state.variant, destPiece, origPiece);
   if (dest === state.selected) unselect(state);
   callUserFunction(state.events.move, orig, dest, captured);
 
@@ -216,9 +214,6 @@ export function baseMove(state: HeadlessState, orig: cg.Key, dest: cg.Key): cg.P
       }
       setPieces(state, backgammonUpdatePiecesFromMove(state.pieces, orig, dest));
       break;
-    case 'abalone':
-      setPieces(state, abalonePieces);
-      break;
     default:
       if (!tryAutoCastle(state, orig, dest)) {
         state.pieces.set(dest, origPiece);
@@ -246,7 +241,7 @@ function isCapture(variant: cg.Variant, destPiece: cg.Piece | undefined, origPie
       //TODO this is more complicated to calculate... (but its only used for sound in lila atm)
       return destPiece && destPiece.playerIndex !== origPiece.playerIndex ? destPiece : undefined;
     case 'abalone':
-      return undefined; // we compute it from abaloneUpdatePiecesFromMove instead
+      return undefined; // we compute it from Abalone namespace using HOF
     default:
       return destPiece && destPiece.playerIndex !== origPiece.playerIndex ? destPiece : undefined;
   }
@@ -276,7 +271,7 @@ export function baseNewPiece(state: HeadlessState, piece: cg.Piece, key: cg.Key,
 }
 
 function baseUserMove(state: HeadlessState, orig: cg.Key, dest: cg.Key): cg.Piece | boolean {
-  const result = baseMove(state, orig, dest);
+  const result = state.baseMove(state, orig, dest);
   if (result) {
     state.movable.dests = undefined;
     state.dropmode.dropDests = undefined;
@@ -638,7 +633,8 @@ export function stop(state: HeadlessState): void {
   cancelMove(state);
 }
 
-// triggered when we click on the svg area (a piece, a square or even an area outside the board drawn can be below the cursor)
+// triggered when we click on the svg area (a piece, a square or even an area outside the board drawn can be below the cursor).
+// @return the key of the square that was clicked, or undefined if the click was outside the board.
 export function getKeyAtDomPos(
   pos: cg.NumberPair,
   orientation: cg.Orientation,
@@ -647,7 +643,7 @@ export function getKeyAtDomPos(
   variant: cg.Variant = 'chess',
 ): cg.Key | undefined {
   if (variant === 'abalone') {
-    return abaloneGetKeyAtDomPos(pos, orientation, bounds, bd);
+    return abaloneGetKeyAtDomPos(pos, orientation, bounds);
   }
   const bgBorder = 1 / 15;
   const file =

src/chessground.ts

@@ -3,7 +3,7 @@ import { Config, configure } from './config';
 import { HeadlessState, State, defaults } from './state';
 import { renderWrap } from './wrap';
 import * as events from './events';
-import { render, updateBounds } from './render';
+import { updateBounds } from './render';
 import * as svg from './svg';
 import * as util from './util';
 
@@ -18,7 +18,7 @@ export function Chessground(element: HTMLElement, config?: Config): Api {
       elements = renderWrap(element, maybeState, relative),
       bounds = util.memo(() => elements.board.getBoundingClientRect()),
       redrawNow = (skipSvg?: boolean): void => {
-        render(state);
+        maybeState.render(state);
         if (!skipSvg && elements.svg) svg.renderSvg(state, elements.svg, elements.customSvg!);
       },
       boundsUpdated = (): void => {

src/config.ts

@@ -1,8 +1,10 @@
+import * as cg from './types';
 import { HeadlessState } from './state';
 import { setSelected, setGoScore } from './board';
 import { read as fenRead, readPocket as fenReadPocket } from './fen';
 import { DrawShape, DrawBrush } from './draw';
-import * as cg from './types';
+
+import { configure as abaloneConfigure } from './variants/abalone/config';
 
 export interface Config {
   fen?: cg.FEN; // chess position in Forsyth notation
@@ -181,6 +183,11 @@ export function configure(state: HeadlessState, config: Config): void {
       ),
     );
   }
+
+  // configure variants
+  if (state.variant === 'abalone') {
+    abaloneConfigure(state);
+  }
 }
 
 function setCheck(state: HeadlessState, playerIndex: cg.PlayerIndex | boolean): void {

src/drag.ts

@@ -152,7 +152,7 @@ export function dragNewPiece(s: State, piece: cg.Piece, e: cg.MouchEvent, force?
 
 function processDrag(s: State): void {
   requestAnimationFrame(() => {
-    if (s.variant === 'abalone') return abaloneProcessDrag(s);
+    if (s.variant === 'abalone') return abaloneProcessDrag(s); // "working" WIP: have to use HOF
     const cur = s.draggable.current;
     if (!cur) return;
     // cancel animations while dragging

src/fen.ts

@@ -26,7 +26,6 @@ export function read(fen: cg.FEN, dimensions: cg.BoardDimensions, variant: cg.Va
   let promoted = false;
   let num = 0;
 
-  // @TODO: try to refactor using Higher Order Functions with a default square board
   if (!commaFenVariants.includes(variant)) {
     let skipNext = false;
     for (let i = 0; i < fen.length; i++) {

src/render.ts

@@ -14,19 +14,12 @@ import { DragCurrent } from './drag';
 import * as cg from './types';
 import * as T from './transformations';
 
-import { render as renderAbalone } from './variants/abalone/render';
-
 export type PieceName = string; // `$playerIndex $role`
 export type SquareClasses = Map<cg.Key, string>;
 
 // ported from https://github.com/veloce/lichobile/blob/master/src/js/chessground/view.js
 // in case of bugs, blame @veloce
 export function render(s: State): void {
-  if (s.variant === 'abalone') {
-    renderAbalone(s);
-    return;
-  }
-
   const orientation = s.orientation,
     asP1: boolean = p1Pov(s),
     posToTranslate = s.dom.relative ? posToTranslateRel : posToTranslateAbs(s.dom.bounds(), s.dimensions, s.variant),

src/state.ts

@@ -1,7 +1,9 @@
 import * as fen from './fen';
 import { AnimCurrent } from './anim';
+import { baseMove } from './board';
 import { DragCurrent } from './drag';
 import { Drawable } from './draw';
+import { render } from './render';
 import { timer } from './util';
 import * as cg from './types';
 
@@ -136,6 +138,8 @@ export interface HeadlessState {
   notation: cg.Notation;
   onlyDropsVariant: boolean;
   singleClickMoveVariant: boolean;
+  baseMove: (state: HeadlessState, orig: cg.Key, dest: cg.Key) => cg.Piece | boolean;
+  render: (state: State) => void;
 }
 
 export interface State extends HeadlessState {
@@ -248,5 +252,7 @@ export function defaults(): HeadlessState {
     notation: cg.Notation.DEFAULT,
     onlyDropsVariant: false,
     singleClickMoveVariant: false,
+    baseMove,
+    render,
   };
 }

src/util.ts

@@ -1,10 +1,7 @@
 import * as cg from './types';
 import * as T from './transformations';
 
-import {
-  posToTranslateAbs as abalonePosToTranslateAbs,
-  posToTranslateRel as abalonePosToTranslateRel,
-} from './variants/abalone/util';
+import { posToTranslateRel as abalonePosToTranslateRel, posToTranslateBase2 } from './variants/abalone/util';
 
 export const playerIndexs: cg.PlayerIndex[] = ['p1', 'p2'];
 export const invRanks: readonly cg.Rank[] = [...cg.ranks19].reverse();
@@ -23,18 +20,6 @@ export function allKeys(bd: cg.BoardDimensions = { width: 8, height: 8 }) {
   return Array.prototype.concat(...files(bd.width).map(c => ranks(bd.height).map(r => c + r)));
 }
 
-// @TODO VFR: example of how pos2key could be rewritten
-// export const pos2key = (variant: cg.Variant, pos: cg.Pos): cg.Key => {
-//   switch(variant) {
-//     case "abalone": {
-//       return (cg.files[pos[0] - 1] + cg.ranks19[pos[1] - 1]) as cg.Key;
-//     }
-//     default: {
-//       return (cg.files[pos[0] - 1] + cg.ranks19[pos[1] - 1]) as cg.Key;
-//     }
-//   }
-// }
-
 export function pos2key(pos: cg.Pos): cg.Key {
   return (cg.files[pos[0] - 1] + cg.ranks19[pos[1] - 1]) as cg.Key;
 }
@@ -177,7 +162,8 @@ export const posToTranslateAbs = (
       (variant === 'backgammon' || variant === 'hyper' || variant === 'nackgammon' ? 0.8 : 1),
     yFactor = bounds.height / bt.height;
   if (variant === 'abalone') {
-    return (pos, orientation) => abalonePosToTranslateAbs(pos, orientation, xFactor, yFactor, bt);
+    // "working" WIP: have to use HOF
+    return (pos, orientation) => posToTranslateBase2(bounds, pos, orientation);
   }
   return (pos, orientation) => posToTranslateBase(pos, orientation, xFactor, yFactor, bt);
 };
@@ -189,7 +175,8 @@ export const posToTranslateRel = (
   v: cg.Variant,
 ): cg.NumberPair => {
   if (v === 'abalone') {
-    return abalonePosToTranslateRel(pos, orientation, bt);
+    // "working" WIP: have to use HOF
+    return abalonePosToTranslateRel(pos, orientation);
   }
   return posToTranslateBase(
     pos,
@@ -238,7 +225,6 @@ export const createEl = (tagName: string, className?: string): HTMLElement => {
   return el;
 };
 
-// @TODO VFR investigations: could be interesting to see if it can be used to move Abalone squares ??
 export function computeSquareCenter(
   key: cg.Key,
   orientation: cg.Orientation,