@digilogiclabs/saas-factory-ui 1.16.2 → 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;
 }
@@ -30505,6 +30529,33 @@ function DiceRoller({
   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);
@@ -30576,10 +30627,10 @@ function DiceRoller({
     []
   );
   const writeDiePosition = (0, import_react66.useCallback)(
-    (i, x, y) => {
+    (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)`;
+      el.style.transform = `translate3d(${x - half}px, ${y - half}px, 0) scale3d(${sx}, ${sy}, 1)`;
     },
     [half]
   );
@@ -30603,7 +30654,7 @@ function DiceRoller({
       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)`;
+        el.style.transform = `translate3d(${pos.x - half}px, ${pos.y - half}px, 0) scale3d(1, 1, 1)`;
       }
       const cube = cubeRefs.current[i];
       if (cube) {
@@ -30645,7 +30696,7 @@ function DiceRoller({
         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)`;
+          el.style.transform = `translate3d(${p.x - half}px, ${p.y - half}px, 0) scale3d(1, 1, 1)`;
         }
         const tgt = SHOW_ROT[vals[i]];
         writeCubeRotation(i, tgt.x, tgt.y, 0, true);
@@ -30690,9 +30741,12 @@ function DiceRoller({
       if (frame) {
         for (let i = 0; i < clampedCount; i++) {
           const p = frame[i];
-          if (p) writeDiePosition(i, p.x, p.y);
+          if (p) writeDiePosition(i, p.x, p.y, p.sx, p.sy);
         }
-        currentPositionsRef.current = frame.slice(0, clampedCount);
+        currentPositionsRef.current = frame.slice(0, clampedCount).map((f) => ({
+          x: f.x,
+          y: f.y
+        }));
       }
       if (progress < 1) {
         rafHandleRef.current = requestAnimationFrame(tick);
@@ -30794,9 +30848,7 @@ function DiceRoller({
               return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
                 "div",
                 {
-                  ref: (el) => {
-                    dieWrapperRefs.current[d] = el;
-                  },
+                  ref: getDieSetter(d),
                   style: {
                     position: "absolute",
                     left: 0,
@@ -30815,9 +30867,7 @@ function DiceRoller({
                     /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
                       "div",
                       {
-                        ref: (el) => {
-                          shadowRefs.current[d] = el;
-                        },
+                        ref: getShadowSetter(d),
                         style: {
                           position: "absolute",
                           bottom: -6,
@@ -30835,9 +30885,7 @@ function DiceRoller({
                     /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
                       "div",
                       {
-                        ref: (el) => {
-                          cubeRefs.current[d] = el;
-                        },
+                        ref: getCubeSetter(d),
                         style: {
                           width: "100%",
                           height: "100%",