Improve snappiness and add speed setting.

web/src/components/DiceRoll.tsx

@@ -3,7 +3,8 @@ import type { CSSProperties } from 'react'
 
 // How long the dice scramble before settling, and how fast the faces flicker
 // while they do. ROLL_MS is shared with BattlePhase so damage lands exactly
-// when the dice settle.
+// when the dice settle. Both are the base (1×) durations; the battle speed
+// multiplier divides them so the roll keeps pace with the rest of the replay.
 export const ROLL_MS = 650
 const TICK_MS = 70
 
@@ -12,19 +13,27 @@ const TICK_MS = 70
 // on the values the server actually rolled. Faces carry rock icons (0, 1, or
 // 2 rocks) — the same die the game uses, not a pip D6. Mount it with a `key`
 // that changes per rock event so the scramble replays every time.
-export function DiceRoll({ dice, side }: { dice: number[]; side: 'top' | 'bottom' }) {
+export function DiceRoll({
+  dice,
+  side,
+  speed = 1,
+}: {
+  dice: number[]
+  side: 'top' | 'bottom'
+  speed?: number
+}) {
   const [display, setDisplay] = useState<number[]>(dice)
   const [settled, setSettled] = useState(false)
 
   useEffect(() => {
     const flicker = window.setInterval(() => {
       setDisplay(dice.map(() => Math.floor(Math.random() * 3)))
-    }, TICK_MS)
+    }, TICK_MS / speed)
     const stop = window.setTimeout(() => {
       window.clearInterval(flicker)
       setDisplay(dice)
       setSettled(true)
-    }, ROLL_MS)
+    }, ROLL_MS / speed)
     return () => {
       window.clearInterval(flicker)
       window.clearTimeout(stop)