Make right the front.

web/src/components/ArrangePhase.tsx

@@ -8,10 +8,11 @@ interface Props {
   send: (msg: ClientMessage) => void
 }
 
-// ArrangePhase lets the player order their deck for battle. Leftmost card
+// ArrangePhase lets the player order their deck for battle. Rightmost card
-// fights first; food cards buff the next pet to their right... i.e. foods
+// fights first; food cards buff the next pet to their left... i.e. foods
-// apply "down" to the next pet later in the order. Drag cards or use the
+// apply to the next pet later in the play order. Internally `order` stays in
-// arrow buttons to reorder, then lock in.
+// play order (index 0 fights first) to match the backend; we only reverse for
+// display. Drag cards or use the arrow buttons to reorder, then lock in.
 export function ArrangePhase({ view, you, send }: Props) {
   const [order, setOrder] = useState<Card[]>(you.deck ?? [])
   const dragIndex = useRef<number | null>(null)
@@ -79,55 +80,58 @@ export function ArrangePhase({ view, you, send }: Props) {
         <span className="status-hot">Arrange your battle line</span>
       </div>
       <p className="hint">
-        The <strong>leftmost</strong> card fights first. Food cards power up the
+        The <strong>rightmost</strong> card fights first. Food cards power up the
-        next pet to their <strong>right</strong>.
+        next pet to their <strong>left</strong>.
         {trailingFoods > 0 && (
           <span className="warn-text">
             {' '}
-            ⚠️ {trailingFoods} food card{trailingFoods > 1 ? 's' : ''} at the end
+            ⚠️ {trailingFoods} food card{trailingFoods > 1 ? 's' : ''} on the far
-            will be wasted!
+            left will be wasted!
           </span>
         )}
       </p>
 
       <div className="arrange-row">
-        <div className="arrange-marker">⚔️ first</div>
+        {order
-        {order.map((c, i) => (
+          .map((c, i) => ({ c, i }))
-          <div
+          .reverse()
-            key={c.id}
+          .map(({ c, i }) => (
-            className="arrange-card"
+            <div
-            draggable
+              key={c.id}
-            onDragStart={() => (dragIndex.current = i)}
+              className="arrange-card"
-            onDragOver={(e) => {
+              draggable
-              e.preventDefault()
+              onDragStart={() => (dragIndex.current = i)}
-              if (dragIndex.current !== null && dragIndex.current !== i) {
+              onDragOver={(e) => {
-                move(dragIndex.current, i)
+                e.preventDefault()
-                dragIndex.current = i
+                if (dragIndex.current !== null && dragIndex.current !== i) {
-              }
+                  move(dragIndex.current, i)
-            }}
+                  dragIndex.current = i
-            onDragEnd={() => (dragIndex.current = null)}
+                }
-          >
+              }}
-            <CardView card={c} bonus={bonuses.get(c.id) ?? 0} />
+              onDragEnd={() => (dragIndex.current = null)}
-            <div className="arrange-arrows">
+            >
-              <button
+              <CardView card={c} bonus={bonuses.get(c.id) ?? 0} />
-                className="btn btn-ghost btn-sm"
+              <div className="arrange-arrows">
-                disabled={i === 0}
+                <button
-                onClick={() => move(i, i - 1)}
+                  className="btn btn-ghost btn-sm"
-                aria-label="move earlier"
+                  disabled={i === order.length - 1}
-              >
+                  onClick={() => move(i, i + 1)}
-                ◀
+                  aria-label="move left"
-              </button>
+                >
-              <button
+                  ◀
-                className="btn btn-ghost btn-sm"
+                </button>
-                disabled={i === order.length - 1}
+                <button
-                onClick={() => move(i, i + 1)}
+                  className="btn btn-ghost btn-sm"
-                aria-label="move later"
+                  disabled={i === 0}
-              >
+                  onClick={() => move(i, i - 1)}
-                ▶
+                  aria-label="move right"
-              </button>
+                >
+                  ▶
+                </button>
+              </div>
             </div>
-          </div>
+          ))}
-        ))}
+        <div className="arrange-marker">⚔️ first</div>
       </div>
 
       <div className="actions">