feat(battleship): add complete Battleship game UI with placement & battle phases

- Implement BattleshipBoard with phase-based rendering (placement/battle)
- Add PlacementGrid for ship placement interaction
- Add ShotGrid for firing UI with turn validation
- Integrate match metadata (pX_placed, pX_ready, phase)
- Connect UI to Nakama sendMatchData (place + shoot actions)
- Add real-time board rendering for ships and shots
- Add status line, turn handling, and winner display
- Ensure compatibility with new backend ApplyMove/ApplyPlacement logic

src/games/battleship/components/ShipSelector.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+interface ShipSelectorProps {
+  remainingShips: string[]; // ex: ["carrier", "battleship", ...]
+  selectedShip: string | null;
+  orientation: "h" | "v";
+  onSelectShip: (ship: string) => void;
+  onToggleOrientation: () => void;
+}
+
+export default function ShipSelector({
+  remainingShips,
+  selectedShip,
+  orientation,
+  onSelectShip,
+  onToggleOrientation,
+}: ShipSelectorProps) {
+  return (
+    <div style={{ marginTop: 12, textAlign: "center" }}>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 0.9 }}
+        style={{
+          marginBottom: 10,
+          fontSize: 16,
+          color: "#ddd",
+        }}
+      >
+        Select ship & orientation
+      </motion.div>
+
+      {/* SHIP BUTTONS */}
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          gap: "10px",
+          flexWrap: "wrap",
+          marginBottom: 14,
+        }}
+      >
+        {remainingShips.map((ship) => {
+          const active = ship === selectedShip;
+
+          return (
+            <motion.button
+              key={ship}
+              onClick={() => onSelectShip(ship)}
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.92 }}
+              style={{
+                padding: "8px 14px",
+                borderRadius: 8,
+                background: active ? "#f1c40f" : "#333",
+                color: active ? "#000" : "#fff",
+                border: "2px solid #444",
+                cursor: "pointer",
+                fontSize: 14,
+              }}
+            >
+              {ship.toUpperCase()}
+            </motion.button>
+          );
+        })}
+      </div>
+
+      {/* ORIENTATION BUTTON */}
+      <motion.button
+        whileHover={{ scale: 1.05 }}
+        whileTap={{ scale: 0.92 }}
+        onClick={onToggleOrientation}
+        style={{
+          padding: "8px 14px",
+          borderRadius: 8,
+          background: "#222",
+          color: "white",
+          border: "2px solid #444",
+          cursor: "pointer",
+          fontSize: 14,
+        }}
+      >
+        Orientation: <strong>{orientation === "h" ? "Horizontal" : "Vertical"}</strong>
+      </motion.button>
+    </div>
+  );
+}