@digilogiclabs/saas-factory-ui 1.16.1 → 1.16.3

package/dist/index.js

@@ -30304,44 +30304,53 @@ function simulateDice(arenaW, arenaH, diceSize, starts, numDice) {
   const collisionDist = diceSize * 1.05;
   const bodies = [];
   for (let i = 0; i < numDice; i++) {
-    const s = starts[i] ?? { x: arenaW / 2, y: arenaH / 2 };
+    const s = starts[i] ?? { x: arenaW / 2, y: minY };
     bodies.push({
-      x: clamp(s.x + (Math.random() - 0.5) * arenaW * 0.25, minX, maxX),
-      y: clamp(s.y + (Math.random() - 0.5) * arenaH * 0.25, minY, maxY),
-      // Minimum baseline velocity so small arenas still bounce visibly
-      // instead of drifting a few pixels. The `|| 1` guard makes sure
-      // we never get a near-zero initial velocity from `random - 0.5`.
-      vx: (Math.sign(Math.random() - 0.5) || 1) * (0.5 + Math.random() * 0.5) * arenaW * 1.4,
-      vy: (Math.sign(Math.random() - 0.5) || 1) * (0.5 + Math.random() * 0.5) * arenaH * 1.6
+      x: clamp(s.x + (Math.random() - 0.5) * arenaW * 0.2, minX, maxX),
+      y: clamp(minY + Math.random() * 8, minY, maxY),
+      vx: (Math.sign(Math.random() - 0.5) || 1) * (0.35 + Math.random() * 0.55) * arenaW * 1.2,
+      // Always downward initially — this is the "drop" feel.
+      vy: (0.25 + Math.random() * 0.4) * arenaH * 2.2
     });
   }
-  const steps = 32;
-  const dt = 2 / steps;
-  const friction = 0.9;
+  const steps = 40;
+  const dt = 2.4 / steps;
+  const friction = 0.93;
   const wallRestitution = -0.72;
   const diceRestitution = 0.8;
+  const gravity = arenaH * 0.9;
   const frames = [];
+  const bounceScaleX = new Array(numDice).fill(1);
+  const bounceScaleY = new Array(numDice).fill(1);
   for (let s = 0; s < steps; s++) {
     for (const b of bodies) {
+      b.vy += gravity * dt;
       b.x += b.vx * dt;
       b.y += b.vy * dt;
     }
-    for (const b of bodies) {
+    for (let i = 0; i < numDice; i++) {
+      const b = bodies[i];
       if (b.x <= minX) {
         b.x = minX;
         b.vx *= wallRestitution;
-      }
-      if (b.x >= maxX) {
+        bounceScaleX[i] = 0.78;
+        bounceScaleY[i] = 1.14;
+      } else if (b.x >= maxX) {
         b.x = maxX;
         b.vx *= wallRestitution;
+        bounceScaleX[i] = 0.78;
+        bounceScaleY[i] = 1.14;
       }
       if (b.y <= minY) {
         b.y = minY;
         b.vy *= wallRestitution;
-      }
-      if (b.y >= maxY) {
+        bounceScaleY[i] = 0.78;
+        bounceScaleX[i] = 1.14;
+      } else if (b.y >= maxY) {
         b.y = maxY;
         b.vy *= wallRestitution;
+        bounceScaleY[i] = 0.78;
+        bounceScaleX[i] = 1.14;
       }
     }
     for (let i = 0; i < numDice; i++) {
@@ -30367,6 +30376,10 @@ function simulateDice(arenaW, arenaH, diceSize, starts, numDice) {
             a.vy += impulse * ny;
             b.vx -= impulse * nx;
             b.vy -= impulse * ny;
+            bounceScaleX[i] = 0.88;
+            bounceScaleY[i] = 1.08;
+            bounceScaleX[j] = 0.88;
+            bounceScaleY[j] = 1.08;
           }
         }
       }
@@ -30379,7 +30392,18 @@ function simulateDice(arenaW, arenaH, diceSize, starts, numDice) {
       b.x = clamp(b.x, minX, maxX);
       b.y = clamp(b.y, minY, maxY);
     }
-    frames.push(bodies.map((b) => ({ x: b.x, y: b.y })));
+    for (let i = 0; i < numDice; i++) {
+      bounceScaleX[i] += (1 - bounceScaleX[i]) * 0.35;
+      bounceScaleY[i] += (1 - bounceScaleY[i]) * 0.35;
+    }
+    frames.push(
+      bodies.map((b, i) => ({
+        x: b.x,
+        y: b.y,
+        sx: bounceScaleX[i],
+        sy: bounceScaleY[i]
+      }))
+    );
   }
   return frames;
 }
@@ -30500,10 +30524,38 @@ function DiceRoller({
   const [rolling, setRolling] = (0, import_react66.useState)(false);
   const [results, setResults] = (0, import_react66.useState)(null);
   const [history, setHistory] = (0, import_react66.useState)([]);
-  const [rotations, setRotations] = (0, import_react66.useState)(
-    () => Array.from({ length: MAX_COUNT }, () => ({ x: 0, y: 0, z: 0, tr: true }))
-  );
-  const [positions, setPositions] = (0, import_react66.useState)(null);
+  const dieWrapperRefs = (0, import_react66.useRef)([]);
+  const cubeRefs = (0, import_react66.useRef)([]);
+  const shadowRefs = (0, import_react66.useRef)([]);
+  const currentPositionsRef = (0, import_react66.useRef)(null);
+  const rollingRef = (0, import_react66.useRef)(false);
+  const dieSetters = (0, import_react66.useRef)([]);
+  const cubeSetters = (0, import_react66.useRef)([]);
+  const shadowSetters = (0, import_react66.useRef)([]);
+  const getDieSetter = (i) => {
+    if (!dieSetters.current[i]) {
+      dieSetters.current[i] = (el) => {
+        dieWrapperRefs.current[i] = el;
+      };
+    }
+    return dieSetters.current[i];
+  };
+  const getCubeSetter = (i) => {
+    if (!cubeSetters.current[i]) {
+      cubeSetters.current[i] = (el) => {
+        cubeRefs.current[i] = el;
+      };
+    }
+    return cubeSetters.current[i];
+  };
+  const getShadowSetter = (i) => {
+    if (!shadowSetters.current[i]) {
+      shadowSetters.current[i] = (el) => {
+        shadowRefs.current[i] = el;
+      };
+    }
+    return shadowSetters.current[i];
+  };
   const timersRef = (0, import_react66.useRef)([]);
   const rafHandleRef = (0, import_react66.useRef)(null);
   const arenaRef = (0, import_react66.useRef)(null);
@@ -30574,15 +30626,54 @@ function DiceRoller({
     })),
     []
   );
+  const writeDiePosition = (0, import_react66.useCallback)(
+    (i, x, y, sx = 1, sy = 1) => {
+      const el = dieWrapperRefs.current[i];
+      if (!el) return;
+      el.style.transform = `translate3d(${x - half}px, ${y - half}px, 0) scale3d(${sx}, ${sy}, 1)`;
+    },
+    [half]
+  );
+  const writeCubeRotation = (0, import_react66.useCallback)(
+    (i, rx, ry, rz, withTransition) => {
+      const el = cubeRefs.current[i];
+      if (!el) return;
+      el.style.transition = withTransition ? "transform 0.95s cubic-bezier(0.12,0.8,0.22,1)" : "none";
+      el.style.transform = `rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${rz}deg)`;
+    },
+    []
+  );
   (0, import_react66.useEffect)(() => {
+    const w = arenaRef.current?.offsetWidth ?? arena.w;
+    const h = arenaRef.current?.offsetHeight ?? arenaHeight;
+    if (w === 0 || h === 0) return;
+    const initial = defaultPositions(w, h, clampedCount);
+    currentPositionsRef.current = initial;
+    for (let i = 0; i < clampedCount; i++) {
+      const pos = initial[i];
+      const el = dieWrapperRefs.current[i];
+      if (el) {
+        el.style.transition = "transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94)";
+        el.style.transform = `translate3d(${pos.x - half}px, ${pos.y - half}px, 0) scale3d(1, 1, 1)`;
+      }
+      const cube = cubeRefs.current[i];
+      if (cube) {
+        cube.style.transition = "none";
+        cube.style.transform = "rotateX(0deg) rotateY(0deg) rotateZ(0deg)";
+      }
+    }
     setResults(null);
-    setPositions(null);
-    setRotations(
-      Array.from({ length: MAX_COUNT }, () => ({ x: 0, y: 0, z: 0, tr: true }))
-    );
-  }, [clampedCount, effectiveSize]);
+  }, [
+    clampedCount,
+    effectiveSize,
+    arena.w,
+    arenaHeight,
+    defaultPositions,
+    half
+  ]);
   const roll = (0, import_react66.useCallback)(() => {
-    if (rolling) return;
+    if (rollingRef.current) return;
+    rollingRef.current = true;
     setRolling(true);
     const vals = Array.from(
       { length: clampedCount },
@@ -30590,21 +30681,29 @@ function DiceRoller({
     );
     timersRef.current.forEach((t) => clearTimeout(t));
     timersRef.current = [];
+    if (rafHandleRef.current != null) {
+      cancelAnimationFrame(rafHandleRef.current);
+      rafHandleRef.current = null;
+    }
     const w = arenaRef.current?.offsetWidth ?? 400;
     const h = arenaRef.current?.offsetHeight ?? 260;
-    const starts = positions ?? defaultPositions(w, h, clampedCount);
+    const starts = currentPositionsRef.current ?? defaultPositions(w, h, clampedCount);
     if (reducedMotion) {
-      setPositions(defaultPositions(w, h, clampedCount));
-      setRotations((prev) => {
-        const n = [...prev];
-        for (let i = 0; i < clampedCount; i++) {
-          const tgt = SHOW_ROT[vals[i]];
-          n[i] = { x: tgt.x, y: tgt.y, z: 0, tr: false };
+      const final = defaultPositions(w, h, clampedCount);
+      currentPositionsRef.current = final;
+      for (let i = 0; i < clampedCount; i++) {
+        const p = final[i];
+        const el = dieWrapperRefs.current[i];
+        if (el) {
+          el.style.transition = "transform 0.2s ease-out";
+          el.style.transform = `translate3d(${p.x - half}px, ${p.y - half}px, 0) scale3d(1, 1, 1)`;
         }
-        return n;
-      });
+        const tgt = SHOW_ROT[vals[i]];
+        writeCubeRotation(i, tgt.x, tgt.y, 0, true);
+      }
       setResults(vals);
       setRolling(false);
+      rollingRef.current = false;
       const total2 = vals.reduce((a, b) => a + b, 0);
       onRoll?.(vals, total2);
       if (showHistory) {
@@ -30613,24 +30712,24 @@ function DiceRoller({
       return;
     }
     const frames = simulateDice(w, h, effectiveSize, starts, clampedCount);
-    setRotations((prev) => {
-      const n = [...prev];
-      for (let i = 0; i < clampedCount; i++) {
-        n[i] = {
-          x: (Math.random() - 0.5) * 720,
-          y: (Math.random() - 0.5) * 720,
-          z: (Math.random() - 0.5) * 720,
-          tr: false
-        };
-      }
-      return n;
-    });
+    for (let i = 0; i < clampedCount; i++) {
+      writeCubeRotation(
+        i,
+        (Math.random() - 0.5) * 720,
+        (Math.random() - 0.5) * 720,
+        (Math.random() - 0.5) * 720,
+        false
+      );
+      const el = dieWrapperRefs.current[i];
+      if (el) el.style.transition = "none";
+      const shadow = shadowRefs.current[i];
+      if (shadow) shadow.style.opacity = "0.2";
+    }
+    if (dieWrapperRefs.current[0]) {
+      dieWrapperRefs.current[0].offsetHeight;
+    }
     const playbackMs = TUMBLE_MS;
     const startTime = typeof performance !== "undefined" ? performance.now() : Date.now();
-    if (rafHandleRef.current != null) {
-      cancelAnimationFrame(rafHandleRef.current);
-      rafHandleRef.current = null;
-    }
     const tick = (now) => {
       const elapsed = now - startTime;
       const progress = Math.max(0, Math.min(1, elapsed / playbackMs));
@@ -30638,34 +30737,46 @@ function DiceRoller({
         frames.length - 1,
         Math.floor(progress * frames.length)
       );
-      setPositions(frames[idx].slice(0, clampedCount));
+      const frame = frames[idx];
+      if (frame) {
+        for (let i = 0; i < clampedCount; i++) {
+          const p = frame[i];
+          if (p) writeDiePosition(i, p.x, p.y, p.sx, p.sy);
+        }
+        currentPositionsRef.current = frame.slice(0, clampedCount).map((f) => ({
+          x: f.x,
+          y: f.y
+        }));
+      }
       if (progress < 1) {
         rafHandleRef.current = requestAnimationFrame(tick);
       } else {
         rafHandleRef.current = null;
+        for (let i = 0; i < clampedCount; i++) {
+          const el = dieWrapperRefs.current[i];
+          if (el)
+            el.style.transition = "transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94)";
+          const shadow = shadowRefs.current[i];
+          if (shadow) shadow.style.opacity = "0.85";
+        }
       }
     };
     rafHandleRef.current = requestAnimationFrame(tick);
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
-        setRotations((prev) => {
-          const n = [...prev];
-          for (let i = 0; i < clampedCount; i++) {
-            const tgt = SHOW_ROT[vals[i]];
-            n[i] = {
-              x: tgt.x + (Math.random() > 0.5 ? 720 : -720),
-              y: tgt.y,
-              z: (Math.random() > 0.5 ? 1 : -1) * 360,
-              tr: true
-            };
-          }
-          return n;
-        });
+        for (let i = 0; i < clampedCount; i++) {
+          const tgt = SHOW_ROT[vals[i]];
+          const lx = tgt.x + (Math.random() > 0.5 ? 720 : -720);
+          const ly = tgt.y;
+          const lz = (Math.random() > 0.5 ? 1 : -1) * 360;
+          writeCubeRotation(i, lx, ly, lz, true);
+        }
       });
     });
     const settleTimer = setTimeout(() => {
       setResults(vals);
       setRolling(false);
+      rollingRef.current = false;
       const total2 = vals.reduce((a, b) => a + b, 0);
       onRoll?.(vals, total2);
       if (showHistory) {
@@ -30674,13 +30785,14 @@ function DiceRoller({
     }, SETTLE_MS);
     timersRef.current.push(settleTimer);
   }, [
-    rolling,
     clampedCount,
-    positions,
     defaultPositions,
     effectiveSize,
+    half,
     reducedMotion,
     onRoll,
+    writeCubeRotation,
+    writeDiePosition,
     showHistory,
     historyMax
   ]);
@@ -30706,7 +30818,6 @@ function DiceRoller({
     },
     []
   );
-  const activePositions = positions ?? defaultPositions(arena.w, arenaHeight, clampedCount);
   const total = results ? results.reduce((a, b) => a + b, 0) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
     "div",
@@ -30734,27 +30845,20 @@ function DiceRoller({
               cursor: trigger === "click" ? "pointer" : void 0
             },
             children: Array.from({ length: clampedCount }, (_, d) => {
-              const rot = rotations[d] ?? { x: 0, y: 0, z: 0, tr: true };
-              const pos = activePositions[d] ?? {
-                x: arena.w / 2,
-                y: arenaHeight / 2
-              };
-              const translate = `translate3d(${pos.x - half}px, ${pos.y - half}px, 0)`;
               return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
                 "div",
                 {
+                  ref: getDieSetter(d),
                   style: {
                     position: "absolute",
                     left: 0,
                     top: 0,
                     width: effectiveSize,
                     height: effectiveSize,
-                    transform: translate,
                     // Parent must preserve 3D so the inner cube's rotateX/Y/Z
                     // still renders with depth — otherwise adding a transform
                     // to the wrapper would flatten its children into 2D.
                     transformStyle: "preserve-3d",
-                    transition: rolling ? "transform 0.04s linear" : "transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94)",
                     willChange: "transform",
                     zIndex: 2,
                     perspective: 700
@@ -30763,6 +30867,7 @@ function DiceRoller({
                     /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
                       "div",
                       {
+                        ref: getShadowSetter(d),
                         style: {
                           position: "absolute",
                           bottom: -6,
@@ -30772,7 +30877,7 @@ function DiceRoller({
                           background: `radial-gradient(ellipse,${colors.shadow} 0%,transparent 70%)`,
                           borderRadius: "50%",
                           pointerEvents: "none",
-                          opacity: rolling ? 0.2 : 0.85,
+                          opacity: 0.85,
                           transition: "opacity 0.3s"
                         }
                       }
@@ -30780,13 +30885,12 @@ function DiceRoller({
                     /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
                       "div",
                       {
+                        ref: getCubeSetter(d),
                         style: {
                           width: "100%",
                           height: "100%",
                           position: "relative",
                           transformStyle: "preserve-3d",
-                          transition: rot.tr ? "transform 0.95s cubic-bezier(0.12,0.8,0.22,1)" : "none",
-                          transform: `rotateX(${rot.x}deg) rotateY(${rot.y}deg) rotateZ(${rot.z}deg)`,
                           willChange: "transform"
                         },
                         children: [1, 2, 3, 4, 5, 6].map((val, fi) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(