feat: implement Phase 1b — Bi-Planetary game engine

packages/client/src/components/map/HexGrid.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useCallback } from "react";
+import React, { useMemo, useCallback } from "react";
 import { defineHex, Grid, rectangle, Orientation } from "honeycomb-grid";
 import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
 import type { HexData, HexEntry } from "@triplanetary/shared";
@@ -20,6 +20,8 @@ interface Props {
   rRange: [number, number];
   onHexClick: (q: number, r: number) => void;
   selectedHex?: string | null;
+  /** SVG elements rendered inside <svg> after the hex layer */
+  overlays?: React.ReactNode;
 }
 
 export function HexGrid({
@@ -28,6 +30,7 @@ export function HexGrid({
   rRange,
   onHexClick,
   selectedHex,
+  overlays,
 }: Props) {
   const [qMin, qMax] = qRange;
   const [rMin, rMax] = rRange;
@@ -144,6 +147,7 @@ export function HexGrid({
               );
             })}
           </g>
+          {overlays}
         </svg>
       </TransformComponent>
     </TransformWrapper>

packages/client/src/pages/game/Board.tsx

@@ -0,0 +1,225 @@
+import { useState, useMemo, useCallback } from 'react';
+import type { BoardProps as BgioBoardProps } from 'boardgame.io/react';
+import { defineHex, Grid, rectangle, Orientation } from 'honeycomb-grid';
+import {
+  getValidDestinations,
+  type TriplanetaryState,
+  type HexData,
+} from '@triplanetary/shared';
+import { HexGrid } from '../../components/map/HexGrid';
+import HUD from './HUD';
+
+const Q_RANGE: [number, number] = [-12, 14];
+const R_RANGE: [number, number] = [-10, 12];
+
+const FACTION_COLORS: Record<string, string> = {
+  mars: '#cc4444',
+  venus: '#44aacc',
+  terra: '#44cc44',
+  none: '#888888',
+};
+
+// Fallback empty map used when G.mapSnapshot is null
+const EMPTY_MAP: HexData = {
+  meta: { name: '', version: '1.0', hexSize: 30, orientation: 'pointy' },
+  bodies: {},
+  hexes: {},
+  bases: {},
+};
+
+type BoardProps = BgioBoardProps<TriplanetaryState>;
+
+export default function Board({ G, ctx, moves, playerID, isActive }: BoardProps) {
+  const typedMoves = moves as {
+    plotCourse: (dest: [number, number]) => void;
+    lockIn: () => void;
+  };
+  const [selectedShip, setSelectedShip] = useState<number | null>(null);
+  const [validDests, setValidDests] = useState<Set<string>>(new Set());
+
+  const mapData = G.mapSnapshot ?? EMPTY_MAP;
+  const hexSize = mapData.meta.hexSize;
+
+  // Build the same hex grid as HexGrid uses to look up pixel centers
+  const hexLookup = useMemo(() => {
+    const [qMin, qMax] = Q_RANGE;
+    const [rMin, rMax] = R_RANGE;
+    const ProtoHex = defineHex({
+      dimensions: hexSize,
+      orientation: Orientation.POINTY,
+      origin: 'topLeft',
+    });
+    const grid = new Grid(
+      ProtoHex,
+      rectangle({ width: qMax - qMin + 1, height: rMax - rMin + 1, start: { q: qMin, r: rMin } }),
+    );
+    const map = new Map<string, { x: number; y: number }>();
+    for (const hex of grid) {
+      map.set(`${hex.q},${hex.r}`, { x: hex.x, y: hex.y });
+    }
+    return map;
+  }, [hexSize]);
+
+  const center = useCallback(
+    (q: number, r: number) => hexLookup.get(`${q},${r}`) ?? { x: 0, y: 0 },
+    [hexLookup],
+  );
+
+  const handleHexClick = useCallback(
+    (q: number, r: number) => {
+      if (!isActive || !playerID || ctx.phase !== 'astrogation') return;
+      const key = `${q},${r}`;
+      const ownShipIdx = Number(playerID);
+
+      // If clicking own ship and haven't plotted yet, select it
+      if (
+        G.ships[ownShipIdx]?.position[0] === q &&
+        G.ships[ownShipIdx]?.position[1] === r &&
+        !G.plots[playerID ?? '']
+      ) {
+        setSelectedShip(ownShipIdx);
+        const ship = G.ships[ownShipIdx];
+        if (ship) {
+          setValidDests(getValidDestinations(ship, mapData.hexes));
+        }
+        return;
+      }
+
+      // If a ship is selected and this is a valid destination, plot
+      if (selectedShip !== null && validDests.has(key)) {
+        typedMoves.plotCourse([q, r]);
+        setSelectedShip(null);
+        setValidDests(new Set());
+      }
+    },
+    [isActive, ctx.phase, playerID, G.ships, G.plots, selectedShip, validDests, typedMoves, mapData.hexes],
+  );
+
+  const overlays = useMemo(() => {
+    const elements: React.ReactNode[] = [];
+    const r = 10; // ship counter radius
+
+    // Valid destination highlights
+    for (const key of validDests) {
+      const [qStr, rStr] = key.split(',');
+      const q = Number(qStr);
+      const rv = Number(rStr);
+      const c = center(q, rv);
+      // Hexagon highlight using 6 corners (same size as rendered hex)
+      const pts = [];
+      for (let i = 0; i < 6; i++) {
+        const angle = (Math.PI / 180) * (60 * i - 30);
+        pts.push(`${c.x + hexSize * Math.cos(angle)},${c.y + hexSize * Math.sin(angle)}`);
+      }
+      elements.push(
+        <polygon
+          key={`valid-${key}`}
+          points={pts.join(' ')}
+          fill="rgba(255,220,0,0.18)"
+          stroke="#ffcc00"
+          strokeWidth={1.5}
+          style={{ pointerEvents: 'none' }}
+        />,
+      );
+    }
+
+    for (let i = 0; i < G.ships.length; i++) {
+      const ship = G.ships[i];
+      if (!ship) continue;
+      const [sq, sr] = ship.position;
+      const c = center(sq, sr);
+      const color = FACTION_COLORS[ship.faction] ?? '#888';
+
+      // Vector arrow (from current pos toward predicted coast)
+      const [vq, vr] = ship.vector;
+      const grav = ship.pendingGravity ?? [0, 0];
+      const coastQ = sq + vq + grav[0];
+      const coastR = sr + vr + grav[1];
+      const tc = center(coastQ, coastR);
+      if (vq !== 0 || vr !== 0 || grav[0] !== 0 || grav[1] !== 0) {
+        elements.push(
+          <line
+            key={`vector-${ship.id}`}
+            x1={c.x}
+            y1={c.y}
+            x2={tc.x}
+            y2={tc.y}
+            stroke={color}
+            strokeWidth={2}
+            strokeDasharray="4 2"
+            style={{ pointerEvents: 'none' }}
+          />,
+        );
+      }
+
+      // Plot line (if a destination is plotted but not yet locked in)
+      const plot = G.plots[String(i)];
+      if (plot) {
+        const pc = center(plot.destination[0], plot.destination[1]);
+        elements.push(
+          <line
+            key={`plot-${ship.id}`}
+            x1={c.x}
+            y1={c.y}
+            x2={pc.x}
+            y2={pc.y}
+            stroke={color}
+            strokeWidth={1.5}
+            strokeDasharray="6 3"
+            opacity={0.7}
+            style={{ pointerEvents: 'none' }}
+          />,
+        );
+      }
+
+      // Ship counter
+      const isSelected = selectedShip === i;
+      elements.push(
+        <g key={`ship-${ship.id}`}>
+          <circle
+            cx={c.x}
+            cy={c.y}
+            r={r}
+            fill={color}
+            stroke={isSelected ? '#ffcc00' : '#fff'}
+            strokeWidth={isSelected ? 2.5 : 1}
+          />
+          <text
+            x={c.x}
+            y={c.y}
+            textAnchor="middle"
+            dominantBaseline="middle"
+            fontSize={8}
+            fill="#fff"
+            style={{ pointerEvents: 'none', userSelect: 'none' }}
+          >
+            {ship.faction.slice(0, 1).toUpperCase()}
+          </text>
+        </g>,
+      );
+    }
+
+    return <g>{elements}</g>;
+  }, [G.ships, G.plots, validDests, selectedShip, center, hexSize]);
+
+  return (
+    <div style={{ display: 'flex', height: '100vh' }}>
+      <div style={{ flex: 1, overflow: 'hidden' }}>
+        <HexGrid
+          data={mapData}
+          qRange={Q_RANGE}
+          rRange={R_RANGE}
+          onHexClick={handleHexClick}
+          overlays={overlays}
+        />
+      </div>
+      <HUD
+        G={G}
+        ctx={ctx}
+        playerID={playerID ?? ''}
+        isActive={isActive}
+        onLockIn={() => typedMoves.lockIn()}
+      />
+    </div>
+  );
+}

packages/client/src/pages/game/HUD.tsx

@@ -0,0 +1,46 @@
+import type { Ctx } from 'boardgame.io';
+import type { TriplanetaryState } from '@triplanetary/shared';
+
+interface Props {
+  G: TriplanetaryState;
+  ctx: Ctx;
+  playerID: string;
+  isActive: boolean;
+  onLockIn: () => void;
+}
+
+export default function HUD({ G, ctx, playerID, isActive, onLockIn }: Props) {
+  const shipIdx = Number(playerID);
+  const ship = G.ships[shipIdx];
+  const plot = G.plots[playerID];
+
+  return (
+    <div style={{ padding: '12px', background: '#111', color: '#eee', minWidth: 200 }}>
+      <p>
+        <strong>Turn {G.turnNumber}</strong> — {ctx.phase ?? 'astrogation'}
+      </p>
+
+      {ship && (
+        <p>
+          Fuel: {ship.fuel} / {ship.maxFuel}
+        </p>
+      )}
+
+      {G.winner !== null ? (
+        <p style={{ color: '#ffcc00', fontWeight: 'bold' }}>
+          {G.winner === playerID
+            ? 'You win!'
+            : G.winner === 'draw'
+              ? "It's a draw!"
+              : 'You lose.'}
+        </p>
+      ) : isActive && !plot ? (
+        <p>Select your ship, then click a destination to plot your course.</p>
+      ) : isActive && plot && !plot.locked ? (
+        <button onClick={onLockIn}>Lock In</button>
+      ) : plot?.locked ? (
+        <p>Waiting for opponent…</p>
+      ) : null}
+    </div>
+  );
+}

packages/client/src/pages/lobby/GameRoom.tsx

@@ -1,21 +1,48 @@
-import { useParams } from 'react-router-dom';
+import { useMemo } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { Client } from 'boardgame.io/react';
+import { SocketIO } from 'boardgame.io/multiplayer';
+import { TriplanetaryGame } from '@triplanetary/shared';
+import Board from '../game/Board';
 
-// Placeholder board component - Phase 1 will wire up boardgame.io Client
-function Board() {
-  return (
-    <div>
-      <p>Game board placeholder — Phase 1 will render the hex map here.</p>
-    </div>
-  );
+// Module-level singleton — avoids re-creating the client class on every render.
+const GameClient = Client({
+  game: TriplanetaryGame,
+  board: Board,
+  multiplayer: SocketIO({ server: '' }), // same origin — Vite proxies /socket.io → :8000
+  debug: false,
+});
+
+interface StoredSeat {
+  playerID: string;
+  credentials: string;
 }
 
 export default function GameRoom() {
   const { matchID } = useParams<{ matchID: string }>();
 
+  const stored = useMemo<StoredSeat | null>(() => {
+    if (!matchID) return null;
+    const raw = sessionStorage.getItem(`bgio-${matchID}`);
+    if (!raw) return null;
+    return JSON.parse(raw) as StoredSeat;
+  }, [matchID]);
+
+  if (!matchID) return <p>Missing match ID.</p>;
+
+  if (!stored) {
+    return (
+      <p>
+        No seat found for this match — <Link to="/lobby">return to lobby</Link>
+      </p>
+    );
+  }
+
   return (
-    <main>
-      <h1>Game {matchID}</h1>
-      <Board />
-    </main>
+    <GameClient
+      matchID={matchID}
+      playerID={stored.playerID}
+      credentials={stored.credentials}
+    />
   );
 }