Improve some animations.

web/src/components/ArrangePhase.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import type { Card, ClientMessage, GameView, PlayerView } from '../types'
 import { CardView } from './CardView'
+import { useCardAnimations } from '../anim'
 
 interface Props {
   view: GameView
@@ -26,6 +27,11 @@ export function ArrangePhase({ view, you, send }: Props) {
   // play order across the wrap, arrowhead landing on the next pet to fight.
   const trayRef = useRef<HTMLDivElement>(null)
   const cardRefs = useRef<(HTMLDivElement | null)[]>([])
+
+  // The arrow buttons reorder `order` and the cards glide to their new slot.
+  // Drag-and-drop reorders instantly instead: a drag fires continuously, so
+  // animating every crossing looks frantic — we suppress it while dragging.
+  const arrangeAnim = useCardAnimations(order, (c) => c.id, !dragging)
   const [connectors, setConnectors] = useState<string[]>([])
   const [svgSize, setSvgSize] = useState({ w: 0, h: 0 })
 
@@ -44,8 +50,11 @@ export function ArrangePhase({ view, you, send }: Props) {
   }, [you.deck])
 
   // Measure the laid-out cards and recompute the inter-row connector paths.
-  // Runs whenever the order changes and whenever the tray resizes (which is
-  // what actually moves the wrap points), so the arrows track the real layout.
+  // The arrows connect fixed slot positions, not specific cards: reordering
+  // swaps which card sits in a slot but never moves the slots, so we only
+  // remeasure when the card count changes or the tray resizes (which is what
+  // actually moves the wrap points). Recomputing on every reorder would also
+  // read cards mid-glide and make the arrows jump around.
   useLayoutEffect(() => {
     const tray = trayRef.current
     if (!tray) return
@@ -131,7 +140,8 @@ export function ArrangePhase({ view, you, send }: Props) {
     const ro = new ResizeObserver(measure)
     ro.observe(tray)
     return () => ro.disconnect()
-  }, [order])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [order.length])
 
   function move(from: number, to: number) {
     if (to < 0 || to >= order.length) return
@@ -192,12 +202,19 @@ export function ArrangePhase({ view, you, send }: Props) {
         )}
       </p>
 
-      <div className="arrange-row" ref={trayRef}>
+      <div
+        className="arrange-row"
+        ref={(el) => {
+          trayRef.current = el
+          arrangeAnim.containerRef.current = el
+        }}
+      >
         <div className="arrange-marker">⚔️ first</div>
         {order.map((c, i) => (
           <div
             key={c.id}
             className="arrange-card"
+            data-flip-key={c.id}
             ref={(el) => {
               cardRefs.current[i] = el
             }}