const [pid] = useState(() => {

const existing = localStorage.getItem("playerId");

if (existing) return existing;

const id = crypto.randomUUID();

localStorage.setItem("playerId", id);

return id;

});

return pid;

ok: true;

role: "w" | "b" | "spectator";

state: ServerState;

if (!state) return "Connecting to game...";

switch (state.status) {

case "waiting":

return "Waiting for players";

case "active":

return "In progress";

case "mate":

return state.winner === "w"

? "Checkmate · White wins"

: "Checkmate · Black wins";

case "draw":

return "Draw";

case "resigned":

return state.winner

? `${state.winner === "w" ? "White" : "Black"} wins by resignation`

: "Game ended by resignation";

default:

return state.status;

}

label: string;

playerId?: string;

isCurrent: boolean;

const connected = Boolean(playerId);

const highlight = isCurrent

? "rgba(37, 99, 235, 0.12)"

: connected

? "rgba(59, 130, 246, 0.1)"

: "rgba(15, 23, 42, 0.04)";

const border = isCurrent

? "1px solid rgba(37, 99, 235, 0.6)"

: "1px solid rgba(15, 23, 42, 0.12)";

return (

<div

style={{

width: "100%",

borderRadius: "12px",

padding: "12px 14px",

backgroundColor: highlight,

border

}}

>

<div style={{ fontWeight: 600, marginBottom: "4px" }}>{label}</div>

<div style={{ fontSize: "0.85rem", color: "#475569" }}>

{connected ? (

<>

{isCurrent ? "You" : "Player"} · <code>{playerId!.slice(-8)}</code>

</>

) : (

"Waiting for player"

)}

</div>

</div>

);

const widgetGameId =

typeof window.openai?.widgetState?.gameId === "string" &&

`${window.openai?.widgetState?.gameId === "string"}`.trim()

? `${window.openai?.widgetState?.gameId}`.trim()

: "";

const playerId = usePlayerId();

const [gameId, setGameId] = useState<string | null>(

widgetGameId ? widgetGameId : null

);

const [gameIdInput, setGameIdInput] = useState(widgetGameId);

const [menuError, setMenuError] = useState<string | null>(null);

const gameRef = useRef(new Chess());

const [fen, setFen] = useState(gameRef.current.fen());

const [myColor, setMyColor] = useState<"w" | "b" | "spectator">("spectator");

const [pending, setPending] = useState(false);

const [serverState, setServerState] = useState<ServerState | null>(null);

const [joined, setJoined] = useState(false);

useEffect(() => {

if (!gameId && widgetGameId) {

setGameId(widgetGameId);

}

if (!gameIdInput && widgetGameId) {

setGameIdInput(widgetGameId);

}

}, [widgetGameId, gameId, gameIdInput]);

function resetLocalGame() {

gameRef.current.reset();

setFen(gameRef.current.fen());

setPending(false);

setMyColor("spectator");

setServerState(null);

}

const activeGameName = gameId ?? "__lobby__";

const host = window.HOST ?? "http://localhost:5174/";

const { stub } = useAgent<ServerState>({

host,

name: activeGameName,

agent: "chess",

onStateUpdate: (s) => {

if (!gameId) return;

gameRef.current.load(s.board);

setFen(s.board);

setServerState(s);

}

});

useEffect(() => {

if (!gameId || joined) return;

(async () => {

try {

const res = (await stub.join({

playerId,

preferred: "any"

})) as JoinReply;

if (!res?.ok) return;

setMyColor(res.role);

gameRef.current.load(res.state.board);

setFen(res.state.board);

setServerState(res.state);

setJoined(true);

} catch (error) {

console.error("Failed to join game", error);

}

})();

}, [playerId, gameId, stub, joined]);

async function handleStartNewGame() {

const newId = crypto.randomUUID();

await window.openai?.setWidgetState({ gameId: newId });

resetLocalGame();

setMenuError(null);

setGameIdInput(newId);

setGameId(newId);

}

async function handleJoinGame() {

const trimmed = gameIdInput.trim();

if (!trimmed) {

setMenuError("Enter a game ID to join.");

return;

}

resetLocalGame();

setMenuError(null);

await window.openai?.setWidgetState({ gameId: trimmed });

setGameId(trimmed);

}

// Trigger a message on the ChatGPT conversation to help with the current board state

const handleHelpClick = () => {

window.openai?.sendFollowUpMessage?.({

prompt: `Help me with my chess game. I am playing as ${myColor} and the board is: ${fen}. Please only offer written advice as there are no tools for you to use.`

});

};

const handleResign = async () => {

await stub.resign();

};

// Local-then-server move with reconcile

function onPieceDrop({

sourceSquare,

targetSquare

}: PieceDropHandlerArgs): boolean {

if (!gameId || !sourceSquare || !targetSquare || pending) return false;

const game = gameRef.current;

// must be seated and your turn

if (myColor === "spectator") return false;

if (game.turn() !== myColor) return false;

// must be your piece

const piece = game.get(sourceSquare as Square);

if (!piece || piece.color !== myColor) return false;

const prevFen = game.fen();

try {

const local = game.move({

from: sourceSquare,

to: targetSquare,

promotion: "q"

});

if (!local) return false;

} catch {

return false;

}

const nextFen = game.fen();

setFen(nextFen);

setPending(true);

// reconcile with server

stub

.move({ from: sourceSquare, to: targetSquare, promotion: "q" }, prevFen)

.then((r: { ok: boolean; fen: string }) => {

if (!r.ok) {

// rollback to server position

game.load(r.fen);

setFen(r.fen);

}

})

.finally(() => setPending(false));

return true;

}

const chessboardOptions: ChessboardOptions = {

id: `pvp-${activeGameName}`,

position: fen,

onPieceDrop,

boardOrientation: myColor === "b" ? "black" : "white",

allowDragging: !pending && myColor !== "spectator"

};

const maxSize = window.openai?.maxHeight ?? 650;

const boardSize = Math.max(Math.min(maxSize - 120, 560), 320);

const statusText = describeGameStatus(serverState);

const whiteId = serverState?.players?.w;

const blackId = serverState?.players?.b;

return (

<div

style={{

padding: "20px 16px",

background: "linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%)",

minHeight: "100%",

boxSizing: "border-box"

}}

>

<div style={{ maxWidth: "960px", margin: "0 auto" }}>

{!gameId ? (

<div

style={{

maxWidth: "420px",

margin: "0 auto",

backgroundColor: "#ffffff",

borderRadius: "16px",

padding: "24px",

boxShadow: "0 12px 30px rgba(15, 23, 42, 0.12)",

display: "flex",

flexDirection: "column",

gap: "16px"

}}

>

<h1 style={{ fontSize: "1.5rem", margin: 0 }}>Ready to play?</h1>

<p style={{ margin: 0, color: "#475569", lineHeight: 1.4 }}>

Start a new match to generate a shareable game code or join an

existing game by pasting its ID below.

</p>

<button

type="button"

style={{

padding: "12px 16px",

borderRadius: "12px",

border: "none",

background: "#2563eb",

color: "#ffffff",

fontWeight: 600,

cursor: "pointer"

}}

onClick={handleStartNewGame}

>

Start a new game

</button>

<div

style={{ display: "flex", flexDirection: "column", gap: "8px" }}

>

<label

htmlFor="gameId"

style={{ fontSize: "0.85rem", color: "#475569" }}

>

Join with game ID

</label>

<div style={{ display: "flex", gap: "8px" }}>

<input

aria-label="Paste a game ID"

name="gameId"

style={{

flex: 1,

padding: "10px 12px",

borderRadius: "10px",

border: "1px solid rgba(15, 23, 42, 0.2)",

fontSize: "0.95rem"

}}

placeholder="Paste a game ID"

value={gameIdInput}

onChange={(event) => {

setGameIdInput(event.target.value);

if (menuError) setMenuError(null);

}}

/>

<button

type="button"

style={{

padding: "10px 16px",

borderRadius: "10px",

border: "none",

background: "#0f172a",

color: "#ffffff",

fontWeight: 600,

cursor: "pointer"

}}

onClick={handleJoinGame}

>

Join

</button>

</div>

{menuError ? (

<span style={{ color: "#b91c1c", fontSize: "0.8rem" }}>

{menuError}

</span>

) : null}

</div>

</div>

) : (

<div

style={{

display: "flex",

flexDirection: "column",

gap: "16px"

}}

>

<div

style={{

backgroundColor: "#ffffff",

padding: "18px 20px",

borderRadius: "16px",

boxShadow: "0 10px 24px rgba(15, 23, 42, 0.12)",

display: "flex",

flexWrap: "wrap",

gap: "16px",

justifyContent: "space-between",

alignItems: "center"

}}

>

<div>

<div style={{ fontSize: "1.1rem", fontWeight: 600 }}>

Game {gameId}

</div>

<div style={{ fontSize: "0.9rem", color: "#475569" }}>

{statusText}

</div>

<div style={{ fontSize: "0.9rem", color: "#475569" }}>

{myColor === "spectator"

? "You are watching as a spectator"

: playerId === serverState?.players[gameRef.current.turn()]

? "Your turn"

: `Waiting for ${myColor === "w" ? "Black" : "White"}`}

</div>

</div>

<div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>

<button

type="button"

style={{

padding: "10px 16px",

borderRadius: "10px",

border: "none",

background: "red",

color: "#ffffff",

fontWeight: 600,

cursor: "pointer"

}}

onClick={handleResign}

>

Resign

</button>

<button

type="button"

style={{

padding: "10px 16px",

borderRadius: "10px",

border: "none",

background: "#2563eb",

color: "#ffffff",

fontWeight: 600,

cursor: "pointer"

}}

onClick={handleHelpClick}

>

Ask for help

</button>

</div>

</div>

<div

style={{

backgroundColor: "#ffffff",

borderRadius: "16px",

padding: "16px",

boxShadow: "0 10px 24px rgba(15, 23, 42, 0.1)",

display: "flex",

flexDirection: "column",

gap: "12px"

}}

>

<div style={{ fontWeight: 600, fontSize: "1rem" }}>Players</div>

<div

style={{

display: "flex",

gap: "12px"

}}

>

<PlayerSlot

label="White"

playerId={whiteId}

isCurrent={whiteId === playerId}

/>

<PlayerSlot

label="Black"

playerId={blackId}

isCurrent={blackId === playerId}

/>

</div>

{myColor === "spectator" ? (

<div style={{ fontSize: "0.85rem", color: "#475569" }}>

You're observing for now. We'll seat you automatically if a

spot opens up.

</div>

) : null}

</div>

<div

style={{

display: "flex",

flexWrap: "wrap",

gap: "16px",

alignItems: "flex-start",

justifyContent: "center"

}}

>

<div

style={{

flex: "1 1 360px",

display: "flex",

justifyContent: "center",

backgroundColor: "#ffffff",

borderRadius: "16px",

padding: "16px",

boxShadow: "0 10px 24px rgba(15, 23, 42, 0.1)"

}}

>

<div

style={{

width: `${boardSize}px`,

height: `${boardSize}px`

}}

>

<Chessboard

options={{

...chessboardOptions,

id: `pvp-${gameId}-${myColor}`

}}

/>

</div>

</div>

</div>

</div>

)}

</div>

</div>

);