Merge pull request #61 from Mind-Sports-Games/pla-777-bg-multi-add-doubling-cube-action-sg-ui

Pla 777 bg multi add doubling cube action sg UI

Author: JamesHeppell

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chessground",
-  "version": "7.11.1-pstrat3.8",
+  "version": "7.11.1-pstrat3.9",
   "description": "playstrategy.org chess ui, forked from lichess.org",
   "type": "module",
   "module": "dist/chessground.js",

src/board.ts

@@ -672,7 +672,9 @@ export function areMyDiceAtDomPos(
   myPlayerIndex: cg.PlayerIndex,
   bounds: ClientRect,
   variant: cg.Variant = 'chess',
+  cubeActions: cg.CubeAction[] = [],
 ): boolean {
+  if (cubeActions && cubeActions.length > 0) return false;
   if (turnPlayerIndex !== myPlayerIndex) return false;
   const correctWidth =
     (orientation === 'p1' && turnPlayerIndex === 'p2') || (orientation === 'p1vflip' && turnPlayerIndex === 'p1')
@@ -683,22 +685,97 @@ export function areMyDiceAtDomPos(
   return (variant === 'backgammon' || variant === 'hyper' || variant === 'nackgammon') && correctWidth && correctHeight;
 }
 
-export function isButtonAtDomPos(
+function isButtonAtPos(
   pos: cg.NumberPair,
   orientation: cg.Orientation,
   turnPlayerIndex: cg.PlayerIndex,
-  myPlayerIndex: cg.PlayerIndex,
   bounds: ClientRect,
-  variant: cg.Variant = 'chess',
+  placement: 'left' | 'right',
 ): boolean {
-  if (turnPlayerIndex !== myPlayerIndex) return false;
+  const rightBound = placement === 'left' ? [9.875 / 15, 12.125 / 15] : [2.875 / 15, 5.125 / 15];
+  const leftBound = placement === 'left' ? [2.875 / 15, 5.125 / 15] : [9.875 / 15, 12.125 / 15];
   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;
+      ? (pos[0] - bounds.left) / bounds.width > rightBound[0] && (pos[0] - bounds.left) / bounds.width < rightBound[1]
+      : (pos[0] - bounds.left) / bounds.width > leftBound[0] && (pos[0] - bounds.left) / bounds.width < leftBound[1];
   const correctHeight =
-    (pos[1] - bounds.top) / bounds.height > 6.5 / 15 && (pos[1] - bounds.top) / bounds.height < 8.5 / 15;
-  return (variant === 'backgammon' || variant === 'hyper' || variant === 'nackgammon') && correctWidth && correctHeight;
+    (pos[1] - bounds.top) / bounds.height > 6.95 / 15 && (pos[1] - bounds.top) / bounds.height < 8.05 / 15;
+  return correctWidth && correctHeight;
+}
+
+export function isUndoButtonAtDomPos(
+  pos: cg.NumberPair,
+  orientation: cg.Orientation,
+  turnPlayerIndex: cg.PlayerIndex,
+  myPlayerIndex: cg.PlayerIndex,
+  bounds: ClientRect,
+  variant: cg.Variant = 'chess',
+  cubeActions: cg.CubeAction[] = [],
+): boolean {
+  if (cubeActions && cubeActions.length > 0) return false;
+  if (turnPlayerIndex !== myPlayerIndex) return false;
+  const correctPlacement = isButtonAtPos(pos, orientation, turnPlayerIndex, bounds, 'left');
+  return (variant === 'backgammon' || variant === 'hyper' || variant === 'nackgammon') && correctPlacement;
+}
+
+export function isDoubleButtonAtDomPos(
+  pos: cg.NumberPair,
+  orientation: cg.Orientation,
+  turnPlayerIndex: cg.PlayerIndex,
+  myPlayerIndex: cg.PlayerIndex,
+  bounds: ClientRect,
+  variant: cg.Variant = 'chess',
+  cubeActions: cg.CubeAction[] = [],
+): boolean {
+  if (!(cubeActions && cubeActions.includes('offer'))) return false;
+  if (turnPlayerIndex !== myPlayerIndex) return false;
+  const correctPlacement = isButtonAtPos(pos, orientation, turnPlayerIndex, bounds, 'left');
+  return (variant === 'backgammon' || variant === 'hyper' || variant === 'nackgammon') && correctPlacement;
+}
+
+export function isRollButtonAtDomPos(
+  pos: cg.NumberPair,
+  orientation: cg.Orientation,
+  turnPlayerIndex: cg.PlayerIndex,
+  myPlayerIndex: cg.PlayerIndex,
+  bounds: ClientRect,
+  variant: cg.Variant = 'chess',
+  cubeActions: cg.CubeAction[] = [],
+): boolean {
+  if (!(cubeActions && cubeActions.includes('offer'))) return false;
+  if (turnPlayerIndex !== myPlayerIndex) return false;
+  const correctPlacement = isButtonAtPos(pos, orientation, turnPlayerIndex, bounds, 'right');
+  return (variant === 'backgammon' || variant === 'hyper' || variant === 'nackgammon') && correctPlacement;
+}
+
+export function isDropButtonAtDomPos(
+  pos: cg.NumberPair,
+  orientation: cg.Orientation,
+  turnPlayerIndex: cg.PlayerIndex,
+  myPlayerIndex: cg.PlayerIndex,
+  bounds: ClientRect,
+  variant: cg.Variant = 'chess',
+  cubeActions: cg.CubeAction[] = [],
+): boolean {
+  if (!(cubeActions && cubeActions.includes('reject'))) return false;
+  if (turnPlayerIndex !== myPlayerIndex) return false;
+  const correctPlacement = isButtonAtPos(pos, orientation, turnPlayerIndex, bounds, 'left');
+  return (variant === 'backgammon' || variant === 'hyper' || variant === 'nackgammon') && correctPlacement;
+}
+
+export function isTakeButtonAtDomPos(
+  pos: cg.NumberPair,
+  orientation: cg.Orientation,
+  turnPlayerIndex: cg.PlayerIndex,
+  myPlayerIndex: cg.PlayerIndex,
+  bounds: ClientRect,
+  variant: cg.Variant = 'chess',
+  cubeActions: cg.CubeAction[] = [],
+): boolean {
+  if (!(cubeActions && cubeActions.includes('accept'))) return false;
+  if (turnPlayerIndex !== myPlayerIndex) return false;
+  const correctPlacement = isButtonAtPos(pos, orientation, turnPlayerIndex, bounds, 'right');
+  return (variant === 'backgammon' || variant === 'hyper' || variant === 'nackgammon') && correctPlacement;
 }
 
 export function isPocketAtDomPos(
@@ -711,8 +788,8 @@ export function isPocketAtDomPos(
   const correctWidth = (pos[0] - bounds.left) / bounds.width < 8 / 15 && (pos[0] - bounds.left) / bounds.width > 7 / 15;
   const correctHeight =
     (orientation === 'p1' && turnPlayerIndex === 'p1') || (orientation === 'p1vflip' && turnPlayerIndex === 'p2')
-      ? (pos[1] - bounds.top) / bounds.height > 2 / 15 && (pos[1] - bounds.top) / bounds.height < 7.4 / 15
-      : (pos[1] - bounds.top) / bounds.height > 7.6 / 15 && (pos[1] - bounds.top) / bounds.height < 13 / 15;
+      ? (pos[1] - bounds.top) / bounds.height > 1.6 / 15 && (pos[1] - bounds.top) / bounds.height < 7 / 15
+      : (pos[1] - bounds.top) / bounds.height > 8 / 15 && (pos[1] - bounds.top) / bounds.height < 13.4 / 15;
   return (variant === 'backgammon' || variant === 'hyper' || variant === 'nackgammon') && correctWidth && correctHeight;
 }
 
@@ -725,9 +802,9 @@ export function reorderDice(state: HeadlessState): void {
   }
 }
 
-export function undoButtonPressed(state: HeadlessState): void {
+export function buttonPressed(state: HeadlessState, button: cg.Button): void {
   if (state.gameButtonsActive) {
-    callUserFunction(state.events.undoButton);
+    callUserFunction(state.events.buttonClick, button);
   }
 }
 

src/config.ts

@@ -17,9 +17,12 @@ export interface Config {
   coordinates?: boolean; // include coords attributes
   boardScores?: boolean; //include board-scores attributes
   dice?: cg.Dice[]; // dice to display on the board
+  doublingCube?: cg.DoublingCube; // doubling cube to display on the board
+  cubeActions?: cg.CubeAction[]; // actions to display on the doubling cube related options
   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)
+  multiPointState?: cg.MultiPointState; // state of the multi-point game (e.g.  backgammon)
   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)
@@ -97,7 +100,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
+    buttonClick?: (button: cg.Button) => void; //when a game button has been selected (backgammon only atm)
   };
   dropmode?: {
     active?: boolean;
@@ -135,6 +138,8 @@ export function configure(state: HeadlessState, config: Config): void {
   if (config.dropmode?.dropDests) state.dropmode.dropDests = undefined;
   if (config.drawable?.autoShapes) state.drawable.autoShapes = [];
   if (config.dice) state.dice = [];
+  if (config.doublingCube) state.doublingCube = undefined;
+  if (config.cubeActions) state.cubeActions = [];
 
   merge(state, config);
 

src/events.ts

@@ -4,7 +4,18 @@ import * as draw from './draw';
 import { cancelDropMode, drop } from './drop';
 import { eventPosition, isRightButton, backgammonPosDiff } from './util';
 import * as cg from './types';
-import { areMyDiceAtDomPos, isButtonAtDomPos, userMove, userLift, reorderDice, undoButtonPressed } from './board';
+import {
+  areMyDiceAtDomPos,
+  isUndoButtonAtDomPos,
+  isDoubleButtonAtDomPos,
+  isRollButtonAtDomPos,
+  isDropButtonAtDomPos,
+  isTakeButtonAtDomPos,
+  userMove,
+  userLift,
+  reorderDice,
+  buttonPressed,
+} from './board';
 import { Piece } from './types';
 
 type MouchBind = (e: cg.MouchEvent) => void;
@@ -83,23 +94,85 @@ function startDragOrDraw(s: State): MouchBind {
             s.myPlayerIndex,
             s.dom.bounds(),
             s.variant,
+            s.cubeActions,
           )
         ) {
           reorderDice(s);
           stopProcessingClick(e);
           return;
         }
         if (
-          isButtonAtDomPos(
+          isUndoButtonAtDomPos(
             eventPosition(e)!,
             s.orientation,
             s.turnPlayerIndex,
             s.myPlayerIndex,
             s.dom.bounds(),
             s.variant,
+            s.cubeActions,
           )
         ) {
-          undoButtonPressed(s);
+          buttonPressed(s, 'undo');
+          stopProcessingClick(e);
+          return;
+        }
+        if (
+          isDoubleButtonAtDomPos(
+            eventPosition(e)!,
+            s.orientation,
+            s.turnPlayerIndex,
+            s.myPlayerIndex,
+            s.dom.bounds(),
+            s.variant,
+            s.cubeActions,
+          )
+        ) {
+          buttonPressed(s, 'double');
+          stopProcessingClick(e);
+          return;
+        }
+        if (
+          isRollButtonAtDomPos(
+            eventPosition(e)!,
+            s.orientation,
+            s.turnPlayerIndex,
+            s.myPlayerIndex,
+            s.dom.bounds(),
+            s.variant,
+            s.cubeActions,
+          )
+        ) {
+          buttonPressed(s, 'roll');
+          stopProcessingClick(e);
+          return;
+        }
+        if (
+          isDropButtonAtDomPos(
+            eventPosition(e)!,
+            s.orientation,
+            s.turnPlayerIndex,
+            s.myPlayerIndex,
+            s.dom.bounds(),
+            s.variant,
+            s.cubeActions,
+          )
+        ) {
+          buttonPressed(s, 'drop');
+          stopProcessingClick(e);
+          return;
+        }
+        if (
+          isTakeButtonAtDomPos(
+            eventPosition(e)!,
+            s.orientation,
+            s.turnPlayerIndex,
+            s.myPlayerIndex,
+            s.dom.bounds(),
+            s.variant,
+            s.cubeActions,
+          )
+        ) {
+          buttonPressed(s, 'take');
           stopProcessingClick(e);
           return;
         }

src/state.ts

@@ -24,9 +24,12 @@ export interface HeadlessState {
   coordinates: boolean; // include coords attributes
   boardScores: boolean; //include board-scores attributes
   dice: cg.Dice[]; // dice to display on the board
+  doublingCube?: cg.DoublingCube; // doubling cube to display on the board (backgammon)
+  cubeActions?: cg.CubeAction[]; // actions to display on the doubling cube related options (backgammon)
   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)
+  multiPointState?: cg.MultiPointState; // state of the multi-point game (e.g.  backgammon)
   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)
@@ -128,7 +131,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
+    buttonClick?: (button: cg.Button) => void; //when a game button has been selected (backgammon only atm)
   };
   drawable: Drawable;
   exploding?: cg.Exploding;

src/types.ts

@@ -314,6 +314,15 @@ export interface SimpleGoScores {
   p2: number;
 }
 
+export interface DoublingCube {
+  owner: PlayerIndex | 'both';
+  value: number;
+}
+
+export type CubeAction = 'offer' | 'accept' | 'reject';
+
+export type Button = 'undo' | 'double' | 'roll' | 'take' | 'drop';
+
 export interface Dice {
   value: number;
   isAvailable: boolean;
@@ -324,6 +333,12 @@ export interface BackgammonScores {
   p2: number;
 }
 
+export interface MultiPointState {
+  target: number;
+  p1: number;
+  p2: number;
+}
+
 export const shogiVariants: Variant[] = ['shogi', 'minishogi', 'kyotoshogi', 'dobutsu', 'gorogoro', 'torishogi'];
 export const xiangqiVariants: Variant[] = ['xiangqi', 'minixiangqi', 'manchu', 'janggi'];
 export const goVariants: Variant[] = ['go9x9', 'go13x13', 'go19x19'];