Merge pull request #62 from Mind-Sports-Games/pla-1134-add-auto-roll-…

…button-to-cg

add autoroll button for backgammon multipoint

package.json

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

src/board.ts

@@ -692,8 +692,8 @@ function isButtonAtPos(
   bounds: ClientRect,
   placement: 'left' | 'right',
 ): boolean {
-  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 rightBound = placement === 'left' ? [9.625 / 15, 12.375 / 15] : [2.625 / 15, 5.375 / 15];
+  const leftBound = placement === 'left' ? [2.625 / 15, 5.375 / 15] : [9.625 / 15, 12.375 / 15];
   const correctWidth =
     (orientation === 'p1' && turnPlayerIndex === 'p2') || (orientation === 'p1vflip' && turnPlayerIndex === 'p1')
       ? (pos[0] - bounds.left) / bounds.width > rightBound[0] && (pos[0] - bounds.left) / bounds.width < rightBound[1]
@@ -778,6 +778,17 @@ export function isTakeButtonAtDomPos(
   return (variant === 'backgammon' || variant === 'hyper' || variant === 'nackgammon') && correctPlacement;
 }
 
+export function isAutoRollButtonAtDomPos(
+  pos: cg.NumberPair,
+  bounds: ClientRect,
+  variant: cg.Variant = 'chess',
+): boolean {
+  const correctWidth = (pos[0] - bounds.left) / bounds.width < 8 / 15 && (pos[0] - bounds.left) / bounds.width > 7 / 15;
+  const correctHeight =
+    (pos[1] - bounds.top) / bounds.height > 7.65 / 15 && (pos[1] - bounds.top) / bounds.height < 8.4 / 15;
+  return (variant === 'backgammon' || variant === 'hyper' || variant === 'nackgammon') && correctWidth && correctHeight;
+}
+
 export function isPocketAtDomPos(
   pos: cg.NumberPair,
   orientation: cg.Orientation,
@@ -788,8 +799,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 > 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;
+      ? (pos[1] - bounds.top) / bounds.height > 1.6 / 15 && (pos[1] - bounds.top) / bounds.height < 6.5 / 15
+      : (pos[1] - bounds.top) / bounds.height > 8.5 / 15 && (pos[1] - bounds.top) / bounds.height < 13.4 / 15;
   return (variant === 'backgammon' || variant === 'hyper' || variant === 'nackgammon') && correctWidth && correctHeight;
 }
 

src/config.ts

@@ -21,6 +21,7 @@ export interface Config {
   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
+  autoRoll?: boolean; // automatically roll the dice even if allowed to double (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

src/events.ts

@@ -11,6 +11,7 @@ import {
   isRollButtonAtDomPos,
   isDropButtonAtDomPos,
   isTakeButtonAtDomPos,
+  isAutoRollButtonAtDomPos,
   userMove,
   userLift,
   reorderDice,
@@ -101,6 +102,12 @@ function startDragOrDraw(s: State): MouchBind {
           stopProcessingClick(e);
           return;
         }
+        if (isAutoRollButtonAtDomPos(eventPosition(e)!, s.dom.bounds(), s.variant)) {
+          buttonPressed(s, 'autoroll');
+          s.autoRoll = !s.autoRoll;
+          stopProcessingClick(e);
+          return;
+        }
         if (
           isUndoButtonAtDomPos(
             eventPosition(e)!,

src/state.ts

@@ -28,6 +28,7 @@ export interface HeadlessState {
   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)
+  autoRoll?: boolean; // automatically roll the dice even if allowed to double (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

src/types.ts

@@ -321,7 +321,7 @@ export interface DoublingCube {
 
 export type CubeAction = 'offer' | 'accept' | 'reject';
 
-export type Button = 'undo' | 'double' | 'roll' | 'take' | 'drop';
+export type Button = 'undo' | 'double' | 'roll' | 'take' | 'drop' | 'autoroll';
 
 export interface Dice {
   value: number;

src/wrap.ts

@@ -245,6 +245,7 @@ export function renderWrap(element: HTMLElement, s: HeadlessState, relative: boo
       container.appendChild(renderMultiPointTarget(s.multiPointState.target));
       container.appendChild(renderMultiPointPlayerScore(s.multiPointState.p1, 'p1'));
       container.appendChild(renderMultiPointPlayerScore(s.multiPointState.p2, 'p2'));
+      if (s.autoRoll !== undefined) container.appendChild(renderAutoRollButton(s.autoRoll));
     }
   }
   if (s.dice.length > 0) {
@@ -319,6 +320,12 @@ function renderMultiPointTarget(target: number): HTMLElement {
   return el;
 }
 
+function renderAutoRollButton(autoRoll: boolean): HTMLElement {
+  const el = createEl('cg-autoroll-button', autoRoll ? 'on' : 'off');
+  el.textContent = 'AUTO ROLL';
+  return el;
+}
+
 function renderDoublingCube(dCube: DoublingCube, unavailable: boolean): HTMLElement {
   const el = createEl('cg-doubling-cube', dCube.owner);
   const doubeCubeClass = ['zero', 'one', 'two', 'three', 'four', 'five', 'six'];