Vishesh 'ironeagle' Bangotra
fe1cacb5ed
- 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
88 lines
2.2 KiB
TypeScript
88 lines
2.2 KiB
TypeScript
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>
|
|
);
|
|
}
|