Connect4

/* @jsxImportSource https://esm.sh/hono/jsx */ import { track } from "https://esm.town/v/saolsen/plausible?v=3"; import { init, traced_fetch, traced_handler, traced, get_tracer } from "https://esm.town/v/saolsen/tracing?v=135"; import { trace } from "npm:@opentelemetry/api"; init("connect4_site"); const tracer = get_tracer("connect4_site"); import { blob } from "https://esm.town/v/std/blob"; import { customAlphabet } from "npm:nanoid"; import { z } from "npm:zod"; import { Hono } from "npm:hono"; import { html } from "npm:hono/html"; import { jsxRenderer, useRequestContext } from "npm:hono/jsx-renderer"; import * as connect4 from "https://esm.town/v/saolsen/connect4"; // TODO: // * htmx loading spinners const _nanoid = customAlphabet("123456789abcdefghijklmnopqrstuvwxyz", 10); const MatchId = z.string().startsWith("m_"); type MatchId = z.infer; function matchid(): MatchId { return `m_${_nanoid()}`; } type MePlayer = { kind: "me"; }; type AgentPlayer = { kind: "agent"; name: string; url: string; }; type Player = MePlayer | AgentPlayer; type AgentFetchError = { kind: "agent_fetch"; error_message: string; }; type AgentHTTPResponseError = { kind: "agent_http_response"; status: number; body: string; }; type AgentInvalidActionJsonError = { kind: "agent_invalid_json"; body: string; parse_error: string; }; type AgentInvalidActionError = { kind: "agent_invalid_action"; action: connect4.Action; error: string; }; type Error = | AgentFetchError | AgentHTTPResponseError | AgentInvalidActionJsonError | AgentInvalidActionError; type ErrorStatus = { status: "error"; error: Error; }; type StatusOrError = connect4.Status | ErrorStatus; type Turn = { number: number; status: StatusOrError; player: number | null; column: number | null; state: connect4.State; }; type Match = { id: MatchId; players: [Player, Player]; turns: Turn[]; }; async function get_match(id: MatchId): Promise { const span = tracer.startSpan("get_match"); span.setAttribute("match_id", id); const match = await blob.getJSON(`connect4_matches/${id}`); span.end(); if (match === undefined) { return null; } return match; } type MatchStatus = { id: MatchId; status: StatusOrError; }; async function save_match_record(match: Match): Promise { const span = tracer.startSpan("save_match_record"); span.setAttribute("match_id", match.id); const result = await blob.setJSON(`connect4_matches/${match.id}`, match); span.end(); return result; } async function save_match_status(match: Match): Promise { const span = tracer.startSpan("save_match_status"); span.setAttribute("match_id", match.id); const match_status = { id: match.id, status: match.turns[match.turns.length - 1].status, }; let result = await blob.setJSON( `connect4_match_status/${match.id}`, match_status ); span.end(); return result; } async function save_match(match: Match): Promise { await tracer.startActiveSpan("save_match", async (span) => { await save_match_record(match); await save_match_status(match); span.end(); }); } async function list_matches(): Promise { const match_keys = await blob.list(`connect4_match_status/`); const match_status_p = []; for (const match_key of match_keys) { match_status_p.push(blob.getJSON(match_key.key)); } const match_status = await Promise.all(match_status_p); return match_status; } function new_match(blue_player: Player, red_player: Player): Match { const id: MatchId = matchid(); const players: [Player, Player] = [blue_player, red_player]; const initial_turn: Turn = { number: 0, status: { status: "in_progress", next_player: 0 }, player: null, column: null, state: { next_player: 0, board: [ [null, null, null, null, null, null], [null, null, null, null, null, null], [null, null, null, null, null, null], [null, null, null, null, null, null], [null, null, null, null, null, null], [null, null, null, null, null, null], [null, null, null, null, null, null], ], }, }; const match: Match = { id, players, turns: [initial_turn], }; return match; } type TurnError = | "match_is_over" | "wrong_player" | "column_full" | "column_out_of_bounds"; function take_turn(match: Match, action: connect4.Action): Turn | TurnError { const last_turn = match.turns[match.turns.length - 1]; const last_status = last_turn.status; if (last_status.status === "over") { return "match_is_over"; } const check = connect4.check_action(last_turn.state, action); switch (check) { case "wrong_player": return "wrong_player"; case "column_full": return "column_full"; case "column_out_of_bounds": return "column_out_of_bounds"; case "ok": break; } const last_state = last_turn.state; const next_state = JSON.parse(JSON.stringify(last_state)); const next_status = connect4.apply_action(next_state, action); return { number: last_turn.number + 1, status: next_status, player: action.player, column: action.column, state: next_state, }; } function error_turn(match: Match, player: number, error: Error): Turn { const last_turn = match.turns[match.turns.length - 1]; const error_status = { status: "error", error, }; return { number: last_turn.number + 1, status: error_status, action: null, player: player, state: JSON.parse(JSON.stringify(last_turn.state)), }; } // test agents // TODO: let users create agents const agents: { string: any } = { saolsen_random: { name: "saolsen_random", url: "https://saolsen-random_agent_dev.web.val.run/", val: "https://www.val.town/v/saolsen/connect4_random_agent", }, saolsen_mcts: { name: "saolsen_mcts", url: "https://saolsen-connect4_mcts_agent.web.val.run/", val: "https://www.val.town/v/saolsen/connect4_mcts_agent", }, }; // Web Stuff const renderer = jsxRenderer(({ children, req }) => { const hx_target = req.header("Hx-Target"); if (hx_target === undefined) { return ( Connect4

{children}

); } else if (hx_target === "main") { return

{children}

; } else { return children; } }); const PlayerType = z.enum(["me", "agent", "dev_agent"]); type PlayerType = z.infer; const CreateMatch = z.object({ blue_player_type: PlayerType.default("me"), blue_player_name: z.string().default("me"), red_player_type: PlayerType.default("me"), red_player_name: z.string().default("me"), }); type CreateMatch = z.infer; function create_match_form(create_match: CreateMatch) { return (

New Match

Blue Player

Me
Agent
Dev Agent

{create_match.blue_player_type === "me" && ( )} {create_match.blue_player_type === "agent" && ( )} {create_match.blue_player_type === "dev_agent" && ( <> Url )}

Red Player

Me
Agent
Dev Agent

{create_match.red_player_type === "me" && ( )} {create_match.red_player_type === "agent" && ( )} {create_match.red_player_type === "dev_agent" && ( <> Url )}

); } function match_view(match: Match, turn_number: number | null) { if (turn_number === null) { turn_number = match.turns.length - 1; } let turn = match.turns[turn_number]; let latest_turn = turn_number === match.turns.length - 1; let my_turn = false; let next_player_i; let header; const status = turn.status; switch (status.status) { case "error": let error_player_message; switch (status.error.kind) { case "agent_fetch": error_player_message = (

Error calling Agent

{status.error.error_message}

); break; case "agent_http_response": error_player_message = (

Agent returned an error: {status.error.status}

{status.error.body}

); break; case "agent_invalid_json": error_player_message = (

Agent returned invalid json

{status.error.body}

{JSON.stringify(status.error.parse_error)}

); break; case "agent_invalid_action": error_player_message = (

Agent returned an invalid action: {status.error.error}

{JSON.stringify(status.error.action)}

); break; } let error_player_color; if (turn.player === 0) { error_player_color = "Blue"; } else { error_player_color = "Red"; } header = ( <>

Error on {error_player_color}'s Turn

{error_player_message} ); break; case "in_progress": next_player_i = status.next_player; let player_color; if (next_player_i === 0) { player_color = "Blue"; } else { player_color = "Red"; } const next_player = match.players[next_player_i]; switch (next_player.kind) { case "me": my_turn = true; header = ( <>

{player_color}'s Turn

"That's You! ); break; case "agent": header = ( <>

Waiting on {player_color}'s Turn

Agent: {next_player.name}

); break; } break; case "over": const result = status.result; switch (result.kind) { case "winner": let winner_color; if (result.winner === 0) { winner_color = "Blue"; } else { winner_color = "Red"; } header = ( <>

{winner_color} Wins!

); break; case "draw": header = ( <>

It's a Tie!

); break; } break; } let controls = <>; if (my_turn) { controls = ( ); } return (

{/* Build the board with svg. code based on https://codepen.io/rossta/pen/eyrgJe */}

<> {latest_turn && header} {!latest_turn &&

Turn: {turn_number}

}

Turns

{match.turns.map((turn) => { return ( ); })}

Number	Player	Column
{turn.number.toString()}	{turn.player === 0 ? "Blue" : turn.player === 1 ? "Red" : ""}	{turn.column?.toString()}

); } const root = (

Play

{create_match_form(CreateMatch.parse({}))}

Create An Agent

Agents are HTTP services that accept the game state and return an action.

They must be publically accessible so we can call them when it's their turn.

The easiest way to make one is to make a val.

Create an HTTP val using the button below, make sure it's set to public or unlisted and put the HTTP URL in as a Dev Agent to play against it in a match.

Create New Agent

); const app = new Hono(); app.use("*", renderer); app.get("/", (c) => c.render(root, { req: c.req })); app.get("/matches", async (c) => { const match_status = await list_matches(); return c.render(

{match_status.map((match_status) => { const id = match_status.id; const status = match_status.status; let details; switch (status.status) { case "in_progress": let c; if (status.next_player === 0) { c = "Blue"; } else { c = "Red"; } details = {c}'s Turn; break; case "over": switch (status.result.kind) { case "winner": let w; if (status.result.winner === 0) { w = "Blue"; } else { w = "Red"; } details = {w} Wins!; break; case "draw": details = It's a Tie!; break; } break; case "error": details = {status.error.kind} error; break; } return ( ); })}

Id	Status	Details
{id}	{status.status}	{details}

, { req: c.req } ); }); app.get("/matches/create_match", (c) => { const parsed = CreateMatch.safeParse(c.req.query()); if (!parsed.success) { return c.json({ error: parsed.error }, 400); } const create_match = parsed.data; // HACK to not prefill the url with "me" if ( create_match.blue_player_type != "me" && create_match.blue_player_name == "me" ) { create_match.blue_player_name = ""; } if ( create_match.red_player_type != "me" && create_match.red_player_name == "me" ) { create_match.red_player_name = ""; } return c.render(create_match_form(create_match), { req: c.req }); }); app.post("/matches/create_match", async (c) => { const body = await c.req.parseBody(); const parsed = CreateMatch.safeParse(body); if (!parsed.success) { return c.json({ error: parsed.error }, 400); } const create_match = parsed.data; // TODO: Validate the form. // If there is an error, we render the form with an error. const error = null; if (error) { // If there is an error, we render the form with an error. // TODO: Add the error to the form. return c.render(create_match_form(create_match), { req: c.req }); } let blue_player; switch (create_match.blue_player_type) { case "me": blue_player = { kind: "me" }; break; case "agent": let blue_player_agent = agents[create_match.blue_player_name]; blue_player = { kind: "agent", name: blue_player_agent.name, url: blue_player_agent.url, }; break; case "dev_agent": blue_player = { kind: "agent", name: create_match.blue_player_name, url: create_match.blue_player_name, }; break; } let red_player; switch (create_match.red_player_type) { case "me": red_player = { kind: "me" }; break; case "agent": let red_player_agent = agents[create_match.red_player_name]; red_player = { kind: "agent", name: red_player_agent.name, url: red_player_agent.url, }; break; case "dev_agent": red_player = { kind: "agent", name: create_match.red_player_name, url: create_match.red_player_name, }; break; } const match = new_match(blue_player, red_player); await save_match(match); const url = `/matches/${match.id}`; const redirect = { path: url, target: "#main", }; c.header("Hx-Location", JSON.stringify(redirect)); return c.render(`Created match, redirectting to ${url}`, { req: c.req }); }); app.get("/matches/:match_id", async (c) => { const parsed_id = MatchId.safeParse(c.req.param("match_id")); if (!parsed_id.success) { return c.json({ error: parsed_id.error }, 400); } const match_id = parsed_id.data; const match = await get_match(match_id); if (match === null) { return c.render("Invalid match id", { req: c.req }); } return c.render(

{match_view(match, null)}

, { req: c.req, }); }); app.get("/matches/:match_id/turns/:turn_number", async (c) => { const parsed_id = MatchId.safeParse(c.req.param("match_id")); if (!parsed_id.success) { return c.json({ error: parsed_id.error }, 400); } const match_id = parsed_id.data; const match = await get_match(match_id); if (match === null) { return c.render("Invalid match id", { req: c.req }); } const turn_number = c.req.param("turn_number"); return c.render(

{match_view(match, Number(turn_number))}

, { req: c.req, } ); }); app.post("/matches/:match_id/turns", async (c) => { const parsed_id = MatchId.safeParse(c.req.param("match_id")); if (!parsed_id.success) { return c.json({ error: parsed_id.error }, 400); } const match_id = parsed_id.data; const match = await get_match(match_id); if (match === null) { return c.render("Invalid match id", { req: c.req }); } const body = await c.req.parseBody(); const parsed_action = connect4.Action.safeParse(body); if (!parsed_action.success) { return c.json({ error: parsed_action.error }, 400); } const action = parsed_action.data; const new_turn = take_turn(match, action); switch (new_turn) { case "match_is_over": return c.render("match is over", { req: c.req }); case "wrong_player": return c.render("wrong player", { req: c.req }); case "column_full": return c.render("column full", { req: c.req }); case "column_out_of_bounds": return c.render("column out of bounds", { req: c.req }); } match.turns.push(new_turn); await save_match(match); return c.render(match_view(match, null), { req: c.req }); }); // This is a little hack to give us a background task. // When the match page loads, if it's the agent's turn // htmx will make a request to this endpoint. // There are concurrency issues with this, turns could get // evaluated twice and overwrite each other, but future steve // can handle that with a real database. app.post("/matches/:match_id/agent_turn", async (c) => { const parsed_id = MatchId.safeParse(c.req.param("match_id")); if (!parsed_id.success) { return c.json({ error: parsed_id.error }, 400); } const match_id = parsed_id.data; const match = await get_match(match_id); if (match === null) { return c.render("Invalid match id", { req: c.req }); } const turn = match.turns[match.turns.length - 1]; const status = turn.status; if (status.status !== "in_progress") { // Match is over. return c.render(match_view(match, null), { req: c.req }); } const next_player_i = status.next_player; const next_player = match.players[next_player_i]; if (next_player.kind !== "agent") { // Not an agent's turn return c.render(match_view(match, null), { req: c.req }); } // todo: handle the invalid url case in the form. const agent_url = next_player.url; let action_json; try { const resp = await traced_fetch(agent_url, { method: "POST", body: JSON.stringify(turn.state), }); if (!resp.ok) { const text = await resp.text(); const error = { kind: "agent_http_response", status: resp.status, body: text, }; const next_turn = error_turn(match, next_player_i, error); match.turns.push(next_turn); await save_match(match); return c.render(match_view(match, null), { req: c.req }); } action_json = await resp.json(); } catch (e) { const error = { kind: "agent_fetch", error_message: e.message, }; const next_turn = error_turn(match, next_player_i, error); match.turns.push(next_turn); await save_match(match); return c.render(match_view(match, null), { req: c.req }); } const parsed_action = connect4.Action.safeParse(action_json); if (!parsed_action.success) { // Invalid action response from agent // TODO: Error out the match. const error = { kind: "agent_invalid_json", body: JSON.stringify(action_json), parse_error: parsed_action.error, }; const next_turn = error_turn(match, next_player_i, error); match.turns.push(next_turn); await save_match(match); return c.render(match_view(match, null), { req: c.req }); } const action = parsed_action.data; const new_turn = take_turn(match, action); if (typeof new_turn === "string") { const error = { kind: "agent_invalid_action", action: action, error: new_turn, }; const next_turn = error_turn(match, next_player_i, error); match.turns.push(next_turn); await save_match(match); return c.render(match_view(match, null), { req: c.req }); } match.turns.push(new_turn); await save_match(match); return c.render(match_view(match, null), { req: c.req }); }); app.get("/agents", async (c) => { return c.render(

{Object.keys(agents).map((agent_name) => { const agent = agents[agent_name]; return ( ); })}

Name	Url	Val
{agent_name}	Url	Val

, { req: c.req } ); }); async function handler(request): Promise { track("saolsen.connect4-site", request); return await app.fetch(request); } export default traced_handler(handler);