feat: add @3d-dice/dice-box as visual overlay on dice roll

package.json

@@ -20,6 +20,7 @@
     "functions": "yarn workspace functions deploy"
   },
   "dependencies": {
+    "@3d-dice/dice-box": "^1.1.4",
     "@material-design-icons/svg": "^0.14.15",
     "@sentry/react": "^7.100.0",
     "canvas-confetti": "^1.9.4",

public/assets/dice-box/themes/default/theme.config.json

@@ -0,0 +1,20 @@
+{
+	"name": "Default Colors",
+	"systemName": "default",
+	"author": "Frank Ali",
+  "version": 0.2,
+  "meshFile": "default.json",
+	"material": {
+		"type": "color",
+		"diffuseTexture": {
+			"light": "diffuse-light.png",
+			"dark": "diffuse-dark.png"
+		},
+		"diffuseLevel": 1,
+		"bumpTexture": "normal.png",
+		"bumpLevel": 0.5,
+		"specularTexture": "specular.jpg",
+		"specularPower": 1
+	},
+	"diceAvailable": ["d4","d6","d8","d10","d12","d20","d100"]
+}

src/Board/DiceBox3D.css

@@ -0,0 +1,17 @@
+#dice-box-3d {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s;
+
+  &.visible {
+    opacity: 1;
+  }
+
+  canvas {
+    width: 100% !important;
+    height: 100% !important;
+  }
+}

src/Board/DiceBox3D.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useRef, useImperativeHandle, forwardRef, useState } from 'react';
+import DiceBox from '@3d-dice/dice-box';
+import './DiceBox3D.css';
+
+export type DiceBox3DHandle = {
+  roll: (values: number[]) => void;
+};
+
+const DiceBox3D = forwardRef<DiceBox3DHandle>(function DiceBox3D(_, ref) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const boxRef = useRef<InstanceType<typeof DiceBox> | null>(null);
+  const [visible, setVisible] = useState(false);
+  const hideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const box = new DiceBox('#dice-box-3d', {
+      assetPath: `${import.meta.env.BASE_URL}assets/dice-box/`,
+      gravity: 3,
+      mass: 1,
+      friction: 0.8,
+      restitution: 0,
+      angularDamping: 0.4,
+      linearDamping: 0.4,
+      spinForce: 6,
+      throwForce: 5,
+      startingHeight: 8,
+      settleTimeout: 5000,
+      offscreen: true,
+      delay: 10,
+      scale: 6,
+    });
+
+    box.init().then(() => {
+      box.onRollComplete = () => {
+        if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+        hideTimerRef.current = setTimeout(() => {
+          setVisible(false);
+          box.clear();
+        }, 600);
+      };
+      boxRef.current = box;
+    });
+
+    return () => {
+      if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+    };
+  }, []);
+
+  useImperativeHandle(ref, () => ({
+    roll(values: number[]) {
+      if (!boxRef.current) return;
+      const notation = `${values.length}d6`;
+      setVisible(true);
+      if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+      boxRef.current.roll(notation);
+    },
+  }));
+
+  return (
+    <div
+      id="dice-box-3d"
+      ref={containerRef}
+      className={`dice-box-3d${visible ? ' visible' : ''}`}
+    />
+  );
+});
+
+export default DiceBox3D;

src/index.tsx

@@ -14,6 +14,7 @@ import Point from './Board/Point';
 import Piece from './Board/Piece';
 import Toolbar from './Board/Toolbar';
 import MoveAnimation from './Board/MoveAnimation';
+import DiceBox3D, { type DiceBox3DHandle } from './Board/DiceBox3D';
 import './index.css'
 import './Board/Board.css';
 import './Board/Toolbar.css'
@@ -51,6 +52,7 @@ export function App() {
   const hadMatchRef = useRef(false);
   const gameSnapshotRef = useRef<SnapshotOrNullType>(null);
   const boardRef = useRef<HTMLDivElement>(null);
+  const diceBox3DRef = useRef<DiceBox3DHandle>(null);
 
   const load = useCallback(async (friendId?: string | false, authUserUid?: string) => {
     if (friendId === 'PeaceInTheMiddleEast' || friendId === '__' || friendId === 'preview') return;
@@ -171,6 +173,7 @@ export function App() {
     navigator.vibrate?.(Vibrations.Dice);
     setUsedDice([]);
     setSelected(null);
+    diceBox3DRef.current?.roll(dice);
     // TODO: autoselect bar, but game.color is not set yet
     // setSelected(match && game.color && game.prison[game.color] ? -1 : null);
   }, [match, game, isMyTurn, user, friend, usedDice]);
@@ -450,6 +453,7 @@ export function App() {
       chats={chats}
       gameover={winner}
     >
+      <DiceBox3D ref={diceBox3DRef} />
       <div id="board" ref={boardRef} className={game.color}>
         <Toolbar friend={friendData} />
         <Dice

src/vite-env.d.ts

@@ -2,4 +2,47 @@
 /// <reference types="vite-plugin-pwa/client" />
 /// <reference types="vite-plugin-svgr/client" />
 
-declare const VITE_VERSION: string;
+declare const VITE_VERSION: string;
+
+declare module '@3d-dice/dice-box' {
+  interface DiceBoxConfig {
+    assetPath: string;
+    gravity?: number;
+    mass?: number;
+    friction?: number;
+    restitution?: number;
+    angularDamping?: number;
+    linearDamping?: number;
+    spinForce?: number;
+    throwForce?: number;
+    startingHeight?: number;
+    settleTimeout?: number;
+    offscreen?: boolean;
+    delay?: number;
+    scale?: number;
+    theme?: string;
+    themeColor?: string;
+    origin?: string;
+  }
+
+  interface DieResult {
+    value: number;
+    sides: number;
+  }
+
+  export default class DiceBox {
+    constructor(selector: string, config: DiceBoxConfig);
+    init(): Promise<void>;
+    roll(notation: string, options?: object): Promise<DieResult[]>;
+    add(notation: string | object, options?: object): Promise<DieResult[]>;
+    clear(): this;
+    onRollComplete: (results: DieResult[]) => void;
+    onDieComplete: (result: DieResult) => void;
+    onBeforeRoll: (notation: object) => void;
+    onRemoveComplete: (result: DieResult) => void;
+    onThemeConfigLoaded: (themeData: object) => void;
+    onThemeLoaded: (theme: string) => void;
+    updateConfig(config: Partial<DiceBoxConfig>): void;
+    getRollResults(): DieResult[];
+  }
+}

yarn.lock

@@ -2,6 +2,17 @@
 # yarn lockfile v1
 
 
+"@3d-dice/dice-box@^1.1.4":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@3d-dice/dice-box/-/dice-box-1.1.4.tgz#2e2b37a62fac4732083b7ba7ee85a84ca444ae68"
+  integrity sha512-W8evh0LlCx/sorPS00cGZJO+/3I8g5eMfDqFAKAIUXF+/XVTP06bhgHSNFOCvLzWbdbEJX5za9QxB0ulDvfxyA==
+  dependencies:
+    "@babylonjs/core" "5.57.1"
+    "@babylonjs/loaders" "5.57.1"
+    "@babylonjs/materials" "5.57.1"
+    copy-dir "^1.3.0"
+    node-abort-controller "^3.1.1"
+
 "@adobe/css-tools@^4.4.0":
   version "4.4.4"
   resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.4.4.tgz#2856c55443d3d461693f32d2b96fb6ea92e1ffa9"
@@ -972,6 +983,21 @@
     "@babel/helper-string-parser" "^7.27.1"
     "@babel/helper-validator-identifier" "^7.28.5"
 
+"@babylonjs/core@5.57.1":
+  version "5.57.1"
+  resolved "https://registry.yarnpkg.com/@babylonjs/core/-/core-5.57.1.tgz#c410b9f85f0b169ed03ac0b2ab135171e6e0c26f"
+  integrity sha512-k8U+SFPVGvHgeNr651nxZL26iVCmTzjmRrdbQa0BGas+lg8PIV/tfhN4uTeWWQeRFLvjbkcHA5qD8x/Xk3EpMQ==
+
+"@babylonjs/loaders@5.57.1":
+  version "5.57.1"
+  resolved "https://registry.yarnpkg.com/@babylonjs/loaders/-/loaders-5.57.1.tgz#7fe308074732f193836a8b7ddf66dddc01411dd8"
+  integrity sha512-DHk0iOwJgnTcj8vI+cQVzpiUvWGJvYqWyZxsf7nzhbeND+ZwNWSG0AelaGbGHpWTaDSd/DjUcoWVZuT4Cg6/Xg==
+
+"@babylonjs/materials@5.57.1":
+  version "5.57.1"
+  resolved "https://registry.yarnpkg.com/@babylonjs/materials/-/materials-5.57.1.tgz#ec216ba6ec07b6ca21870253e7387c4c8b631198"
+  integrity sha512-NLdR6eGUr+wFqie937HRWsnaWPeECpjOrYDGvjjYDg08VAcIC3YyctAuQxv8rId7BoDttkUd8Ey/IZ5d/9H7GA==
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -5374,6 +5400,11 @@ cookie@^0.7.1:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.7.2.tgz#556369c472a2ba910f2979891b526b3436237ed7"
   integrity sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==
 
+copy-dir@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/copy-dir/-/copy-dir-1.3.0.tgz#8c65130e11d8313a6ac2c0578e4c6c6f70b456ba"
+  integrity sha512-Q4+qBFnN4bwGwvtXXzbp4P/4iNk0MaiGAzvQ8OiMtlLjkIKjmNN689uVzShSM0908q7GoFHXIPx4zi75ocoaHw==
+
 core-js-compat@^3.43.0:
   version "3.46.0"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.46.0.tgz#0c87126a19a1af00371e12b02a2b088a40f3c6f7"
@@ -9208,6 +9239,11 @@ no-case@^3.0.4:
     lower-case "^2.0.2"
     tslib "^2.0.3"
 
+node-abort-controller@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/node-abort-controller/-/node-abort-controller-3.1.1.tgz#a94377e964a9a37ac3976d848cb5c765833b8548"
+  integrity sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ==
+
 node-addon-api@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-6.1.0.tgz#ac8470034e58e67d0c6f1204a18ae6995d9c0d76"