@digilogiclabs/saas-factory-ui 1.16.3 → 1.16.4

package/dist/index.js

@@ -30685,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;
@@ -30728,40 +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, p.sx, p.sy);
+          if (!p) continue;
+          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";
+        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++) {