Merge pull request #40 from Mind-Sports-Games/442-backgammon

442 backgammon support undo button

Author: JamesHeppell

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chessground",
-  "version": "7.11.1-pstrat2.40",
+  "version": "7.11.1-pstrat2.41",
   "description": "playstrategy.org chess ui, forked from lichess.org",
   "type": "commonjs",
   "main": "chessground.js",

src/board.ts

@@ -458,6 +458,7 @@ export function stop(state: HeadlessState): void {
     state.liftable.liftDests =
     state.animation.current =
       undefined;
+  state.gameButtonsActive = false;
   cancelMove(state);
 }
 
@@ -511,6 +512,24 @@ export function areMyDiceAtDomPos(
   return (variant === 'backgammon' || variant === 'nackgammon') && correctWidth && correctHeight;
 }
 
+export function isButtonAtDomPos(
+  pos: cg.NumberPair,
+  orientation: cg.Orientation,
+  turnPlayerIndex: cg.PlayerIndex,
+  myPlayerIndex: cg.PlayerIndex,
+  bounds: ClientRect,
+  variant: cg.Variant = 'chess'
+): boolean {
+  if (turnPlayerIndex !== myPlayerIndex) return false;
+  const correctWidth =
+    (orientation === 'p1' && turnPlayerIndex === 'p2') || (orientation === 'p1vflip' && turnPlayerIndex === 'p1')
+      ? (pos[0] - bounds.left) / bounds.width > 8 / 15 && (pos[0] - bounds.left) / bounds.width < 14 / 15
+      : (pos[0] - bounds.left) / bounds.width > 1 / 15 && (pos[0] - bounds.left) / bounds.width < 7 / 15;
+  const correctHeight =
+    (pos[1] - bounds.top) / bounds.height > 6.5 / 15 && (pos[1] - bounds.top) / bounds.height < 8.5 / 15;
+  return (variant === 'backgammon' || variant === 'nackgammon') && correctWidth && correctHeight;
+}
+
 export function isPocketAtDomPos(
   pos: cg.NumberPair,
   orientation: cg.Orientation,
@@ -527,10 +546,18 @@ export function isPocketAtDomPos(
 }
 
 export function reorderDice(state: HeadlessState): void {
-  if (state.dice.length === 2 && state.dice[0].isAvailable && state.dice[1].isAvailable) {
-    state.dice = [state.dice[1], state.dice[0]];
+  if (state.gameButtonsActive) {
+    if (state.dice.length === 2 && state.dice[0].isAvailable && state.dice[1].isAvailable) {
+      state.dice = [state.dice[1], state.dice[0]];
+    }
+    callUserFunction(state.events.selectDice, state.dice);
+  }
+}
+
+export function undoButtonPressed(state: HeadlessState): void {
+  if (state.gameButtonsActive) {
+    callUserFunction(state.events.undoButton);
   }
-  callUserFunction(state.events.selectDice, state.dice);
 }
 
 export function p1Pov(s: HeadlessState): boolean {

src/config.ts

@@ -15,6 +15,9 @@ export interface Config {
   coordinates?: boolean; // include coords attributes
   boardScores?: boolean; //include board-scores attributes
   dice?: cg.Dice[]; // dice to display on the board
+  canUndo?: boolean; // can user undo thier last action
+  showUndoButton?: boolean; //show the undo button
+  gameButtonsActive?: boolean; // can user process game buttons (e.g. swap dice, undo)
   autoCastle?: boolean; // immediately complete the castle by moving the rook after king move
   viewOnly?: boolean; // don't bind events: the user will never be able to move pieces around
   selectOnly?: boolean; // only allow user to select squares/pieces (multiple selection allowed)
@@ -92,6 +95,7 @@ export interface Config {
     select?: (key: cg.Key) => void; // called when a square is selected
     insert?: (elements: cg.Elements) => void; // when the board DOM has been (re)inserted
     selectDice?: (dice: cg.Dice[]) => void; //when the dice have been selected (to swap order)
+    undoButton?: () => void; //when the undo button hass been selected for backgammon
   };
   dropmode?: {
     active?: boolean;

src/events.ts

@@ -4,7 +4,15 @@ import * as draw from './draw';
 import { cancelDropMode, drop } from './drop';
 import { eventPosition, isRightButton, backgammonPosDiff } from './util';
 import * as cg from './types';
-import { areMyDiceAtDomPos, getKeyAtDomPos, userMove, userLift, reorderDice } from './board';
+import {
+  areMyDiceAtDomPos,
+  isButtonAtDomPos,
+  getKeyAtDomPos,
+  userMove,
+  userLift,
+  reorderDice,
+  undoButtonPressed,
+} from './board';
 import { Piece } from './types';
 
 type MouchBind = (e: cg.MouchEvent) => void;
@@ -89,6 +97,20 @@ function startDragOrDraw(s: State): MouchBind {
           stopProcessingClick(e);
           return;
         }
+        if (
+          isButtonAtDomPos(
+            eventPosition(e)!,
+            s.orientation,
+            s.turnPlayerIndex,
+            s.myPlayerIndex,
+            s.dom.bounds(),
+            s.variant
+          )
+        ) {
+          undoButtonPressed(s);
+          stopProcessingClick(e);
+          return;
+        }
         if (
           s.dropmode.active &&
           (undefined === squareOccupied(s, e) || s.variant === 'backgammon' || s.variant === 'nackgammon')

src/state.ts

@@ -20,6 +20,9 @@ export interface HeadlessState {
   coordinates: boolean; // include coords attributes
   boardScores: boolean; //include board-scores attributes
   dice: cg.Dice[]; // dice to display on the board
+  canUndo: boolean; // can user undo their last action (backgammon)
+  showUndoButton: boolean; // render the undo button (backgammon)
+  gameButtonsActive: boolean; // can user process game buttons (e.g. swap dice, undo)
   autoCastle: boolean; // immediately complete the castle by moving the rook after king move
   viewOnly: boolean; // don't bind events: the user will never be able to move pieces around
   selectOnly: boolean; // only allow user to select squares/pieces (multiple selection allowed)
@@ -121,6 +124,7 @@ export interface HeadlessState {
     select?: (key: cg.Key) => void; // called when a square is selected
     insert?: (elements: cg.Elements) => void; // when the board DOM has been (re)inserted
     selectDice?: (dice: cg.Dice[]) => void; //when the dice have been selected (to swap order)
+    undoButton?: () => void; //when the undo button hass been selected for backgammon
   };
   drawable: Drawable;
   exploding?: cg.Exploding;
@@ -149,6 +153,9 @@ export function defaults(): HeadlessState {
     coordinates: true,
     boardScores: false,
     dice: [],
+    canUndo: false,
+    showUndoButton: false,
+    gameButtonsActive: true,
     autoCastle: true,
     selectedPieces: new Map<cg.Key, cg.Piece>(),
     viewOnly: false,

src/wrap.ts

@@ -170,7 +170,12 @@ export function renderWrap(element: HTMLElement, s: HeadlessState, relative: boo
     }
   }
 
-  if (s.dice.length > 0) container.appendChild(renderDice(s.dice, s.turnPlayerIndex));
+  if (s.dice.length > 0) {
+    container.appendChild(renderDice(s.dice, s.turnPlayerIndex));
+    if (s.showUndoButton) {
+      container.appendChild(renderUndoButton(s.canUndo, s.turnPlayerIndex));
+    }
+  }
 
   let ghost: HTMLElement | undefined;
   if (s.draggable.showGhost && !relative) {
@@ -236,6 +241,14 @@ function renderDice(dice: Dice[], className: string): HTMLElement {
   return el;
 }
 
+function renderUndoButton(canUndo: boolean, className: string): HTMLElement {
+  const el = createEl('cg-buttons', className);
+  const d: HTMLElement = createEl('cg-button', 'undo ' + (canUndo ? 'available' : 'unavailable'));
+  d.textContent = 'UNDO';
+  el.appendChild(d);
+  return el;
+}
+
 function renderCoords(elems: readonly string[], className: string): HTMLElement {
   const el = createEl('coords', className);
   let f: HTMLElement;