Connect4

{children}

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

{children}

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

\n New Match\n

\n Blue Player\n

\n \n \n Me\n \n
\n \n \n Agent\n \n
\n \n \n Dev Agent\n \n

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

\n Red Player\n

\n \n \n Me\n \n
\n \n \n Agent\n \n
\n \n \n Dev Agent\n \n

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

\n \n

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

Error calling Agent

{status.error.error_message}

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

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

{status.error.body}

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

Agent returned invalid json

{status.error.body}

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

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

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

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

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

Error on {error_player_color}'s Turn

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

{player_color}'s Turn

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

Waiting on {player_color}'s Turn

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

{winner_color} Wins!

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

It's a Tie!

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

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

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

Turn: {turn_number}

}\n \n

\n \n \n \n \n \n \n \n \n \n \n {controls}\n {[...Array(7)].map((_, col) => {\n const x = col * 100;\n return (\n \n );\n })}\n \n

\n \n

Turns

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

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

\n );\n}\n\nconst root = (\n

Play

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

Create An Agent

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

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

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

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

\n \n Create New Agent\n \n

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

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

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

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

{match_view(match, null)}

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

{match_view(match, Number(turn_number))}

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

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

Name	Url	Val
{agent_name}	\n Url\n	\n Val\n

,\n { req: c.req }\n );\n});\n\nasync function handler(request): Promise {\n track(\"saolsen.connect4-site\", request);\n return await app.fetch(request);\n}\nexport default traced_handler(handler);\n",["D",1704479443048],28,{"_132":133,"_134":135},"Play connect4. Write agents that play connect4. Battle your agents against other agents. It's fun.","latestEvaluation","saolsen/connect4_site",[193,197,201,205,209,213,217,221,225,229],{"_117":194,"_119":187,"_195":196},["D",1704479443048],"n","1",{"_117":198,"_119":199,"_195":200},["D",1703707670465],27,"2",{"_117":202,"_119":203,"_195":204},["D",1703707669737],26,"3",{"_117":206,"_119":207,"_195":208},["D",1703698814239],25,"4",{"_117":210,"_119":211,"_195":212},["D",1703698807455],24,"5",{"_117":214,"_119":215,"_195":216},["D",1703698795878],23,"6",{"_117":218,"_119":219,"_195":220},["D",1703698789087],22,"7",{"_117":222,"_119":223,"_195":224},["D",1703698788456],21,"8",{"_117":226,"_119":227,"_195":228},["D",1703282395584],20,"9",{"_117":230,"_119":231,"_195":232},["D",1703282375296],19,"10",{"_100":234,"_178":235},"168d1d2e-45e9-11ef-bdcf-de64eea55b61",{"_98":236,"_95":237,"_100":234,"_102":-5,"_104":-5,"_105":106,"_107":238,"_109":183,"_111":239,"_113":26,"_114":239,"_115":240,"_117":241,"_119":31,"_121":26,"_122":31,"_125":31,"_127":90,"_128":31,"_124":31,"_129":31,"_130":-5,"_20":242,"_136":245,"_137":-7,"_140":249,"_190":-5,"_138":250,"_142":251},"changes","e5615e9f-07dd-4d28-aaa1-9ee23a41135a","# View val changes as a diff.\nGo to /v/username/valname/version to see a diff between that version and the previous one.\nFor example https://saolsen-changes.web.val.run/v/saolsen/tracing/108","16b95b82-45e9-11ef-bdcf-de64eea55b61","/* @jsxImportSource https://esm.sh/hono/jsx */\nimport { Hono } from \"npm:hono\";\nimport { html } from \"npm:hono/html\";\n\nimport { track } from \"https://esm.town/v/saolsen/plausible?v=3\";\nimport {\n init,\n traced_fetch,\n traced_handler,\n} from \"https://esm.town/v/saolsen/tracing\";\ninit(\"changes\");\n\nconst app = new Hono();\n\napp.get(\"/\", (c) => {\n return c.html(\n

\n Go to `/v/:user/:val` to see the latest version of a val, or\n `/v/:user/:val/:version` to see a specific version. For example,{\" \"}\n /v/saolsen/tracing/108\n

\n );\n});\n\ntype Val = {\n user: string;\n val: string;\n version: number;\n body: string;\n};\n\nasync function get_val(\n user: string,\n val: string,\n version: number | null = null\n): Promise {\n let val_req_url = `https://esm.town/v/${user}/${val}`;\n if (version !== null) {\n val_req_url = `${val_req_url}?v=${version}`;\n }\n const val_resp: Response = await traced_fetch(val_req_url);\n const val_version = Number(val_resp.url.split(\"?v=\")[1]);\n const val_body: string = await val_resp.text();\n return {\n user,\n val,\n version: val_version,\n body: val_body,\n };\n}\n\nfunction show_val(\n latest_version: number,\n val: Val,\n prev_val: Val | null = null\n): HtmlEscapedString {\n return (\n \n \n \n \n \n \n \n

\n {prev_val !== null && (\n \n {\"<\"} v{prev_val.version}\n \n )}\n \n {val.user}/{val.val} v{val.version}\n \n {latest_version !== val.version && (\n \n v{val.version + 1} {\">\"}\n \n )}\n

\n {html`\n \n `}\n \n \n );\n}\n\napp.get(\"/v/:user/:val\", async (c) => {\n const val_user = c.req.param(\"user\");\n const val_name = c.req.param(\"val\");\n const val = await get_val(val_user, val_name);\n let prev_val = null;\n if (val.version > 1) {\n prev_val = await get_val(val_user, val_name, val.version - 1);\n }\n return c.html(show_val(val.version, val, prev_val));\n});\n\napp.get(\"/v/:user/:val/:version\", async (c) => {\n const val_user = c.req.param(\"user\");\n const val_name = c.req.param(\"val\");\n const val_version = Number(c.req.param(\"version\"));\n const current_val = await get_val(val_user, val_name);\n const version_val = await get_val(val_user, val_name, val_version);\n let prev_val = null;\n if (version_val.version > 1) {\n prev_val = await get_val(val_user, val_name, version_val.version - 1);\n }\n return c.html(show_val(current_val.version, version_val, prev_val));\n});\n\nasync function handler(req: Request): Promise {\n await track(\"saolsen.changes\", req);\n return await app.fetch(req);\n}\n\nexport default traced_handler(handler);\n",["D",1721405288268],{"_132":243,"_134":244},"willthereader","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJObXZ0bE1rbVBEMkhHNzR3SmVmMHc3eldBQiJ9",{"_114":246,"_132":133,"_98":236,"_119":247,"_248":-5},"4737a1f9-535a-42c7-9a32-91a17fac16b6",13,"prDisabledHint","View val changes as a diff. Go to /v/username/valname/version to see a diff between that version and the previous one.\nFor example https://saolsen-changes.web.val.run/v/saolsen/tracing/108","willthereader/changes",[252],{"_117":253,"_119":31,"_195":196},["D",1721405288268],{"_100":255,"_178":256},"fc9f84e9-0899-4d9c-9ecb-8d846c4ba5fc",{"_98":236,"_95":96,"_100":255,"_102":103,"_104":-5,"_105":106,"_107":238,"_109":183,"_111":246,"_113":26,"_114":246,"_115":240,"_117":257,"_119":247,"_121":26,"_122":151,"_125":31,"_127":90,"_128":90,"_124":123,"_129":31,"_130":-5,"_20":258,"_136":-5,"_137":-7,"_140":249,"_190":-5,"_138":259,"_142":260},["D",1703702092867],{"_132":133,"_134":135},"saolsen/changes",[261,263,266,269,272,275,278,281,283,285],{"_117":262,"_119":247,"_195":196},["D",1703702092867],{"_117":264,"_119":265,"_195":200},["D",1703702078144],12,{"_117":267,"_119":268,"_195":204},["D",1703702063534],11,{"_117":270,"_119":271,"_195":208},["D",1703702054232],10,{"_117":273,"_119":274,"_195":212},["D",1703702034794],9,{"_117":276,"_119":277,"_195":216},["D",1703702029200],8,{"_117":279,"_119":280,"_195":220},["D",1703702001729],7,{"_117":282,"_119":120,"_195":224},["D",1703702000414],{"_117":284,"_119":126,"_195":228},["D",1703697205038],{"_117":286,"_119":151,"_195":232},["D",1703697204564],"valname","page",{"_114":112,"_98":99,"_132":133,"_11":96,"_119":120,"_100":101,"_115":116,"_105":106,"_113":26,"_138":139},"routes/_app","actionData","errors"]