diff --git a/src/games/battleship/BattleShipBoard.tsx b/src/games/battleship/BattleShipBoard.tsx index d58ba63..f7f4979 100644 --- a/src/games/battleship/BattleShipBoard.tsx +++ b/src/games/battleship/BattleShipBoard.tsx @@ -16,6 +16,15 @@ interface BattleBoardProps { metadata: Record; } +const Fleet: Record = { + carrier: 5, + battleship: 4, + cruiser: 3, + submarine: 3, + destroyer: 2, +}; +const FLEET_ORDER = ["carrier", "battleship", "cruiser", "submarine", "destroyer"]; + export default function BattleShipBoard({ boards, players, @@ -25,49 +34,55 @@ export default function BattleShipBoard({ gameOver, metadata, }: BattleBoardProps) { - const { matchId, sendMatchData } = useNakama(); + const { sendMatchData, matchId } = useNakama(); const myIndex = players.findIndex((p) => p.user_id === myUserId); const oppIndex = myIndex === 0 ? 1 : 0; - const phase = metadata["phase"] ?? "placement"; + console.log(metadata, "metadata"); + const phase = metadata["phase"] ?? "lobby"; const isMyTurn = phase === "battle" && turn === myIndex; - const myShips = boards[`p${myIndex}_ships`]?.grid ?? []; - const myShots = boards[`p${myIndex}_shots`]?.grid ?? []; + const myShips = boards[`p${myIndex}_ships`]?.grid ?? [[]]; + const myShots = boards[`p${myIndex}_shots`] ?.grid ?? [[]]; const placed = metadata[`p${myIndex}_placed`] ?? 0; - // ----------- SEND PLACE MESSAGE ----------- + const nextShip = FLEET_ORDER[placed] || null; + const nextShipSize = nextShip ? Fleet[nextShip] : null; + + // ------------------- PLACE SHIP ------------------- function handlePlace(ship: string, r: number, c: number, dir: "h" | "v") { - sendMatchData(matchId!, 2, { + sendMatchData(matchId!, 1, { action: "place", - ship, - row: r, - col: c, - dir, + data: { + ship: ship, + row: r, + col: c, + dir, + } }); } - // ----------- SEND SHOT MESSAGE ----------- + // ------------------- SHOOT ------------------- function handleShoot(r: number, c: number) { - sendMatchData(matchId!, 2, { + sendMatchData(matchId!, 1, { action: "shoot", row: r, col: c, }); - } - // ------------------- STATUS LINE --------------------- + // ------------------- STATUS LABEL ------------------- const status = useMemo(() => { - if (winner) return `Winner: Player ${winner}`; + if (phase === "lobby") return `In Lobby`; + if (winner !== null) return `Winner: Player ${winner}`; if (gameOver) return "Game over — draw"; - if (phase === "placement") return "Place your ships"; + if (phase === "placement") return `Place your ${nextShip ?? ""}`; if (myIndex === -1) return "Spectating"; - if (!isMyTurn) return "Opponent's turn"; + if (!isMyTurn) return "Opponent’s turn"; return "Your turn"; - }, [winner, gameOver, phase, isMyTurn, myIndex]); + }, [winner, gameOver, phase, isMyTurn, myIndex, nextShip]); return ( {status} {/* ---------------- PHASE 1: PLACEMENT ---------------- */} - {phase === "placement" && ( -
- -
+ {phase === "placement" && nextShip && ( + )} {/* ---------------- PHASE 2: BATTLE ---------------- */} {phase === "battle" && ( <>

Your Shots

+ Your Ships {}} /> )}