@digilogiclabs/saas-factory-ui 1.16.2 → 1.16.4

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) {
@@ -30634,9 +30685,24 @@ function DiceRoller({
       cancelAnimationFrame(rafHandleRef.current);
       rafHandleRef.current = null;
     }
-    const w = arenaRef.current?.offsetWidth ?? 400;
-    const h = arenaRef.current?.offsetHeight ?? 260;
+    const rawW = arenaRef.current?.offsetWidth ?? 0;
+    const rawH = arenaRef.current?.offsetHeight ?? 0;
+    const w = rawW > 20 ? rawW : 400;
+    const h = rawH > 20 ? rawH : 260;
     const starts = currentPositionsRef.current ?? defaultPositions(w, h, clampedCount);
+    if (typeof console !== "undefined") {
+      console.log("[DiceRoller] roll()", {
+        rawArena: { w: rawW, h: rawH },
+        physicsArena: { w, h },
+        clampedCount,
+        effectiveSize,
+        starts,
+        refs: {
+          die: dieWrapperRefs.current.map((el) => !!el),
+          cube: cubeRefs.current.map((el) => !!el)
+        }
+      });
+    }
     if (reducedMotion) {
       const final = defaultPositions(w, h, clampedCount);
       currentPositionsRef.current = final;
@@ -30645,7 +30711,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);
@@ -30677,37 +30743,38 @@ function DiceRoller({
     if (dieWrapperRefs.current[0]) {
       dieWrapperRefs.current[0].offsetHeight;
     }
-    const playbackMs = TUMBLE_MS;
-    const startTime = typeof performance !== "undefined" ? performance.now() : Date.now();
-    const tick = (now) => {
-      const elapsed = now - startTime;
-      const progress = Math.max(0, Math.min(1, elapsed / playbackMs));
-      const idx = Math.min(
-        frames.length - 1,
-        Math.floor(progress * frames.length)
-      );
-      const frame = frames[idx];
-      if (frame) {
+    const stepMs = Math.max(20, Math.floor(TUMBLE_MS / frames.length));
+    for (let s = 0; s < frames.length; s++) {
+      const capturedStep = s;
+      const timer = setTimeout(() => {
+        const frame = frames[capturedStep];
+        if (!frame) return;
         for (let i = 0; i < clampedCount; i++) {
           const p = frame[i];
-          if (p) writeDiePosition(i, p.x, p.y);
+          if (!p) continue;
+          writeDiePosition(i, p.x, p.y, p.sx, p.sy);
         }
-        currentPositionsRef.current = frame.slice(0, clampedCount);
-      }
-      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";
+        if (capturedStep === 0 && typeof console !== "undefined") {
+          const el0 = dieWrapperRefs.current[0];
+          console.log("[DiceRoller] first frame written", {
+            frame0: frame,
+            el0transform: el0?.style.transform,
+            el0bounds: el0 ? { w: el0.offsetWidth, h: el0.offsetHeight } : null
+          });
         }
-      }
-    };
-    rafHandleRef.current = requestAnimationFrame(tick);
+        currentPositionsRef.current = frame.slice(0, clampedCount).map((f) => ({ x: f.x, y: f.y }));
+        if (capturedStep === frames.length - 1) {
+          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";
+          }
+        }
+      }, capturedStep * stepMs);
+      timersRef.current.push(timer);
+    }
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
         for (let i = 0; i < clampedCount; i++) {
@@ -30794,9 +30861,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 +30880,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 +30898,7 @@ function DiceRoller({
                     /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
                       "div",
                       {
-                        ref: (el) => {
-                          cubeRefs.current[d] = el;
-                        },
+                        ref: getCubeSetter(d),
                         style: {
                           width: "100%",
                           height: "100%",