[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_153":154,"_155":156},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_116":-5,"_20":117,"_22":118,"_119":120,"_121":122,"_25":123,"_24":-5,"_124":-5,"_125":-5,"_126":53,"_127":128,"_129":44,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","Jin0421","name","Waribasi","branchName","main","version","path","","project",{"_33":61,"_13":14,"_45":62,"_63":-5,"_64":53,"_65":66,"_67":66,"_68":19,"_69":-5,"_70":71,"_72":-5,"_73":53,"_74":-5,"_75":-5,"_76":77,"_78":79,"_80":-5,"_81":-5,"_82":-5,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":94,"_95":96,"_97":98,"_99":53},"tree",[56],"file","contents",[32],"upstream","pull","ahead","behind","envVars",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_18":55},"id","335fa282-5b04-11f1-bcc5-ee650bb23af1","main.ts","fileId","46611ea6-5a50-11f1-881c-ee650bb23af1","parentId","branchId","465de024-5a50-11f1-881c-ee650bb23af1","branchVersion",37,"latest",true,"createdAt",["D",1780020902493],36,"fileType","http","content","import { blob } from \"https://esm.town/v/std/blob\";\n\ninterface FightState {\n players: {\n [id: string]: {\n hp: number;\n action: string | null;\n ready: boolean;\n wins: number;\n };\n };\n playerIds: string[];\n round: number;\n status: \"waiting\" | \"choosing\" | \"round_result\" | \"round_end\" | \"game_over\";\n lastResult: { p1: string; p2: string; d1: number; d2: number } | null;\n winner: string | null;\n updatedAt: number;\n}\n\nconst MAX_HP = 100;\n\nfunction getDamage(atk: string, def: string): number {\n if (def === \"guard\") return atk === \"jump\" ? 15 : 0;\n if (atk === \"punch\") return 20;\n if (atk === \"kick\") return 30;\n if (atk === \"jump\") return 10;\n return 0;\n}\n\nfunction json(data: unknown, status = 200) {\n return new Response(JSON.stringify(data), {\n status,\n headers: {\n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\",\n },\n });\n}\n\nasync function handleAPI(req: Request): Promise {\n const url = new URL(req.url);\n const path = url.pathname;\n if (req.method === \"OPTIONS\") {\n return new Response(null, {\n headers: {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"GET,POST\",\n \"Access-Control-Allow-Headers\": \"Content-Type\",\n },\n });\n }\n\n if (path === \"/api/create\" && req.method === \"POST\") {\n const roomId = Math.random().toString(36).substring(2, 7).toUpperCase();\n const pid = crypto.randomUUID();\n const state: FightState = {\n players: { [pid]: { hp: MAX_HP, action: null, ready: false, wins: 0 } },\n playerIds: [pid],\n round: 1,\n status: \"waiting\",\n lastResult: null,\n winner: null,\n updatedAt: Date.now(),\n };\n await blob.setJSON(`fighter_${roomId}`, state);\n return json({ roomId, playerId: pid });\n }\n\n if (path === \"/api/join\" && req.method === \"POST\") {\n const { roomId } = await req.json();\n const state: FightState | undefined = await blob.getJSON(\n `fighter_${roomId}`,\n );\n if (!state) return json({ error: \"ルームが見つかりません\" }, 404);\n if (state.status !== \"waiting\") {\n return json({ error: \"すでに対戦中です\" }, 400);\n }\n if (state.playerIds.length >= 2) return json({ error: \"満員です\" }, 400);\n const pid = crypto.randomUUID();\n state.playerIds.push(pid);\n state.players[pid] = { hp: MAX_HP, action: null, ready: false, wins: 0 };\n state.status = \"choosing\";\n state.updatedAt = Date.now();\n await blob.setJSON(`fighter_${roomId}`, state);\n return json({ playerId: pid });\n }\n\n if (path === \"/api/state\" && req.method === \"GET\") {\n const roomId = url.searchParams.get(\"roomId\");\n const pid = url.searchParams.get(\"playerId\");\n if (!roomId) return json({ error: \"roomId required\" }, 400);\n const state: FightState | undefined = await blob.getJSON(\n `fighter_${roomId}`,\n );\n if (!state) return json({ error: \"not found\" }, 404);\n const safe = JSON.parse(JSON.stringify(state)) as FightState;\n for (const id of safe.playerIds) {\n if (id !== pid && safe.status === \"choosing\") {\n safe.players[id].action = safe.players[id].ready ? \"ready\" : null;\n }\n }\n return json(safe);\n }\n\n if (path === \"/api/action\" && req.method === \"POST\") {\n const { roomId, playerId, action } = await req.json();\n if (![\"punch\", \"kick\", \"guard\", \"jump\"].includes(action)) {\n return json({ error: \"無効\" }, 400);\n }\n const state: FightState | undefined = await blob.getJSON(\n `fighter_${roomId}`,\n );\n if (!state) return json({ error: \"not found\" }, 404);\n if (state.status !== \"choosing\") {\n return json({ error: \"今は行動できません\" }, 400);\n }\n if (!state.players[playerId]) return json({ error: \"プレイヤーなし\" }, 400);\n if (state.players[playerId].ready) {\n return json({ error: \"すでに行動済みです\" }, 400);\n }\n\n state.players[playerId].action = action;\n state.players[playerId].ready = true;\n\n const [p1, p2] = state.playerIds;\n\n if (state.players[p1]?.ready && state.players[p2]?.ready) {\n const a1 = state.players[p1].action!;\n const a2 = state.players[p2].action!;\n const d1 = getDamage(a1, a2);\n const d2 = getDamage(a2, a1);\n state.players[p1].hp = Math.max(0, state.players[p1].hp - d2);\n state.players[p2].hp = Math.max(0, state.players[p2].hp - d1);\n state.lastResult = { p1: a1, p2: a2, d1, d2 };\n\n if (state.players[p1].hp <= 0 || state.players[p2].hp <= 0) {\n // ラウンド決着\n if (state.players[p1].hp > state.players[p2].hp) {\n state.players[p1].wins++;\n } else if (state.players[p2].hp > state.players[p1].hp) {\n state.players[p2].wins++;\n }\n const need = 2;\n if (state.players[p1].wins >= need || state.players[p2].wins >= need) {\n state.status = \"game_over\";\n state.winner = state.players[p1].wins >= need ? p1 : p2;\n } else {\n state.status = \"round_end\";\n state.round++;\n state.players[p1].ready = false;\n state.players[p2].ready = false;\n }\n } else {\n // ラウンド継続 — round_result で結果を一旦見せる\n state.status = \"round_result\";\n state.players[p1].ready = false;\n state.players[p2].ready = false;\n }\n }\n\n state.updatedAt = Date.now();\n await blob.setJSON(`fighter_${roomId}`, state);\n return json({ ok: true });\n }\n\n // round_result → choosing へ進む（両者がOKしたら）\n if (path === \"/api/next_turn\" && req.method === \"POST\") {\n const { roomId, playerId } = await req.json();\n const state: FightState | undefined = await blob.getJSON(\n `fighter_${roomId}`,\n );\n if (!state) return json({ error: \"not found\" }, 404);\n if (state.status !== \"round_result\") {\n return json({ error: \"今は使えません\" }, 400);\n }\n\n state.players[playerId].ready = true;\n const [p1, p2] = state.playerIds;\n\n if (state.players[p1].ready && state.players[p2].ready) {\n state.players[p1].action = null;\n state.players[p1].ready = false;\n state.players[p2].action = null;\n state.players[p2].ready = false;\n state.lastResult = null;\n state.status = \"choosing\";\n }\n\n state.updatedAt = Date.now();\n await blob.setJSON(`fighter_${roomId}`, state);\n return json({ ok: true });\n }\n\n if (path === \"/api/next_round\" && req.method === \"POST\") {\n const { roomId, playerId } = await req.json();\n const state: FightState | undefined = await blob.getJSON(\n `fighter_${roomId}`,\n );\n if (!state) return json({ error: \"not found\" }, 404);\n if (state.status !== \"round_end\") {\n return json({ error: \"ラウンド中ではありません\" }, 400);\n }\n\n state.players[playerId].ready = true;\n const [p1, p2] = state.playerIds;\n\n if (state.players[p1].ready && state.players[p2].ready) {\n for (const id of state.playerIds) {\n state.players[id].hp = MAX_HP;\n state.players[id].action = null;\n state.players[id].ready = false;\n }\n state.status = \"choosing\";\n state.lastResult = null;\n }\n\n state.updatedAt = Date.now();\n await blob.setJSON(`fighter_${roomId}`, state);\n return json({ ok: true });\n }\n\n return json({ error: \"not found\" }, 404);\n}\n\nfunction buildHTML(): string {\n const css = `\n@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');\n*{box-sizing:border-box;margin:0;padding:0;image-rendering:pixelated}\n:root{--bg:#0a0a14;--panel:#11112a;--border:#2a2a5a;--p1:#4fc3f7;--p2:#ef5350;--gold:#ffd54f;--green:#69f0ae;--white:#dde;--dim:#445}\nbody{background:var(--bg);color:var(--white);font-family:'Press Start 2P',monospace;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:16px 12px;font-size:10px;line-height:1.6}\na,button,input{font-family:'Press Start 2P',monospace}\nh1{font-size:clamp(16px,5vw,28px);color:var(--gold);text-shadow:3px 3px 0 #7a5800,6px 6px 0 #3a2800;letter-spacing:4px;margin-bottom:4px;text-align:center}\n.sub{color:var(--dim);font-size:7px;letter-spacing:3px;margin-bottom:20px;text-align:center}\n.box{background:var(--panel);border:3px solid var(--border);padding:18px;margin-bottom:12px;box-shadow:4px 4px 0 #000}\n.box-title{color:var(--gold);font-size:7px;letter-spacing:2px;margin-bottom:12px}\n.btn{display:block;width:100%;padding:11px;background:#0d0d22;border:3px solid var(--p1);color:var(--p1);font-size:8px;cursor:pointer;letter-spacing:1px;box-shadow:3px 3px 0 #000;margin-bottom:6px;transition:all .1s;text-align:center}\n.btn:hover:not(:disabled){background:var(--p1);color:#000;transform:translate(-1px,-1px);box-shadow:4px 4px 0 #000}\n.btn:active{transform:translate(1px,1px)!important;box-shadow:1px 1px 0 #000!important}\n.btn:disabled{opacity:.3;cursor:not-allowed;transform:none!important}\n.btn.red{border-color:var(--p2);color:var(--p2)}.btn.red:hover:not(:disabled){background:var(--p2);color:#fff}\n.btn.gold{border-color:var(--gold);color:var(--gold)}.btn.gold:hover:not(:disabled){background:var(--gold);color:#000}\n.btn.dim{border-color:var(--dim);color:var(--dim)}.btn.dim:hover:not(:disabled){background:var(--dim);color:#fff}\ninput[type=text]{width:100%;padding:10px;background:#07071a;border:3px solid var(--border);color:var(--white);font-size:10px;margin-bottom:10px;text-transform:uppercase;outline:none}\ninput:focus{border-color:var(--gold)}\n.err{color:var(--p2);font-size:7px;text-align:center;min-height:14px;margin-top:6px}\n.room-code{font-size:clamp(18px,6vw,30px);color:var(--gold);text-align:center;letter-spacing:10px;padding:8px 0;text-shadow:2px 2px 0 #7a5800}\n.howto{background:#07071e;border:2px solid var(--border);padding:12px;margin-bottom:12px;font-size:7px;line-height:2}\n.howto-title{color:var(--gold);font-size:8px;margin-bottom:10px;letter-spacing:2px}\n.howto-row{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}\n.howto-icon{font-size:14px;width:20px;flex-shrink:0}\n.howto-text{color:var(--white)}\n.howto-sub{color:var(--dim);font-size:6px}\n.chart{width:100%;border-collapse:collapse;margin-top:8px;font-size:6px}\n.chart th{color:var(--gold);padding:4px 6px;border:1px solid var(--border);text-align:center}\n.chart td{padding:4px 6px;border:1px solid var(--border);text-align:center;color:var(--white)}\n.chart td.hit{color:var(--green)}.chart td.block{color:var(--p2)}.chart td.partial{color:var(--gold)}\n#game{width:100%;max-width:500px;display:none}\n.hud{margin-bottom:8px}\n.hp-row{display:flex;align-items:center;gap:6px;margin-bottom:4px}\n.plabel{font-size:7px;width:20px;flex-shrink:0}\n.hp-track{flex:1;height:12px;background:#050510;border:2px solid var(--border);position:relative;overflow:hidden}\n.hp-fill{height:100%;position:absolute;top:0;transition:width .25s}\n.hp-fill.left{background:var(--p1);left:0}\n.hp-fill.right{background:var(--p2);right:0}\n.hp-nums{display:flex;justify-content:space-between;font-size:7px;margin-bottom:2px}\n.wins{display:flex;gap:4px;justify-content:center;margin-bottom:6px}\n.win-dot{width:8px;height:8px;border:2px solid var(--dim)}\n.win-dot.on{background:var(--gold);border-color:var(--gold)}\n.round-label{text-align:center;font-size:8px;color:var(--gold);letter-spacing:2px;margin-bottom:8px}\n#stage{width:100%;height:130px;background:linear-gradient(180deg,#080820 62%,#151506 62%);border:3px solid var(--border);position:relative;margin-bottom:8px;overflow:hidden}\n#stage::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:14px 14px}\ncanvas#fc{position:absolute;bottom:0;left:0;width:100%;height:100%}\n#flash{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;font-size:clamp(8px,2.5vw,12px);pointer-events:none;opacity:0;transition:opacity .2s;white-space:pre;text-shadow:2px 2px 0 #000;line-height:1.8;z-index:5}\n#flash.on{opacity:1}\n#status{text-align:center;font-size:7px;padding:8px;border:2px solid var(--border);background:var(--panel);margin-bottom:8px;min-height:26px;color:var(--green);letter-spacing:1px}\n#acts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}\n.abt{padding:12px 6px;background:#09091e;border:3px solid var(--border);color:var(--white);font-size:7px;cursor:pointer;text-align:center;line-height:1.8;transition:all .1s;box-shadow:2px 2px 0 #000}\n.abt .ai{font-size:20px;display:block;margin-bottom:2px}\n.abt .adesc{color:var(--dim);font-size:6px}\n.abt:hover:not(:disabled){border-color:var(--gold);color:var(--gold);transform:translate(-1px,-1px);box-shadow:3px 3px 0 #000}\n.abt.chosen{background:#1a1600;border-color:var(--gold);color:var(--gold)}\n.abt:disabled{opacity:.25;cursor:not-allowed;transform:none}\n#hint{color:var(--dim);font-size:7px;text-align:center;min-height:14px;margin-bottom:6px}\n#howto-toggle{font-size:7px;color:var(--dim);cursor:pointer;text-align:center;margin-bottom:10px;text-decoration:underline;background:none;border:none;width:auto;box-shadow:none;padding:0}\n#howto-toggle:hover{color:var(--white);transform:none;box-shadow:none}\n#howto-ingame{display:none;margin-bottom:10px}\n`;\n\n const js = `\nconst BASE = location.origin;\nlet roomId=null, myId=null, oppId=null, state=null;\nlet pollTimer=null, lastAt=0, picked=null, p1IsMe=false;\n\nasync function api(path, body) {\n try {\n const opts = body\n ? { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(body) }\n : { method:'GET' };\n const r = await fetch(BASE + path, opts);\n if (!r.ok) { const t = await r.text(); return { error: t || r.statusText }; }\n return await r.json();\n } catch(e) { return { error: String(e) }; }\n}\n\nfunction setErr(id, msg) { document.getElementById(id).textContent = msg || ''; }\n\nasync function createRoom() {\n document.getElementById('create-btn').disabled = true;\n const d = await api('/api/create', {});\n document.getElementById('create-btn').disabled = false;\n if (d.error) { setErr('lobby-err', 'エラー: ' + d.error); return; }\n roomId = d.roomId; myId = d.playerId;\n document.getElementById('room-code').textContent = d.roomId;\n document.getElementById('waiting-box').style.display = '';\n startPoll();\n}\n\nasync function joinRoom() {\n const code = document.getElementById('room-input').value.trim().toUpperCase();\n if (!code) { setErr('lobby-err', 'ルームIDを入力してください'); return; }\n document.getElementById('join-btn').disabled = true;\n const d = await api('/api/join', { roomId: code });\n document.getElementById('join-btn').disabled = false;\n if (d.error) { setErr('lobby-err', 'エラー: ' + d.error); return; }\n roomId = code; myId = d.playerId;\n showGame();\n startPoll();\n}\n\nfunction startPoll() {\n if (pollTimer) clearInterval(pollTimer);\n pollTimer = setInterval(poll, 700);\n poll();\n}\n\nasync function poll() {\n if (!roomId) return;\n const d = await api('/api/state?roomId=' + roomId + '&playerId=' + myId);\n if (d.error) return;\n if (d.updatedAt === lastAt && state) return;\n lastAt = d.updatedAt;\n const prevStatus = state ? state.status : null;\n state = d;\n oppId = state.playerIds.find(id => id !== myId) ?? null;\n p1IsMe = state.playerIds[0] === myId;\n if (prevStatus !== state.status) picked = null;\n render();\n}\n\nfunction showGame() {\n document.getElementById('lobby').style.display = 'none';\n document.getElementById('game').style.display = 'block';\n}\n\nasync function pick(action) {\n if (picked) return;\n picked = action;\n ['punch','kick','guard','jump'].forEach(a => {\n const b = document.getElementById('b-'+a);\n b.disabled = true;\n b.classList.toggle('chosen', a === action);\n });\n document.getElementById('hint').textContent = '相手の行動を待っています…';\n const d = await api('/api/action', { roomId, playerId: myId, action });\n if (d.error) {\n picked = null;\n enableActions();\n document.getElementById('hint').textContent = 'エラー: ' + d.error;\n return;\n }\n poll();\n}\n\nasync function nextTurn() {\n document.getElementById('next-btn').style.display = 'none';\n await api('/api/next_turn', { roomId, playerId: myId });\n poll();\n}\n\nasync function nextRound() {\n document.getElementById('next-btn').style.display = 'none';\n await api('/api/next_round', { roomId, playerId: myId });\n poll();\n}\n\nfunction enableActions() {\n ['punch','kick','guard','jump'].forEach(a => {\n const b = document.getElementById('b-'+a);\n b.disabled = false;\n b.classList.remove('chosen');\n });\n}\nfunction disableActions() {\n ['punch','kick','guard','jump'].forEach(a => document.getElementById('b-'+a).disabled = true);\n}\n\nfunction toggleHowto() {\n const el = document.getElementById('howto-ingame');\n const btn = document.getElementById('howto-toggle');\n const open = el.style.display === '';\n el.style.display = open ? 'none' : '';\n btn.textContent = open ? 'show how to play' : 'hide how to play';\n}\n\nfunction render() {\n if (!state) return;\n drawCanvas();\n\n if (state.status === 'waiting') return;\n showGame();\n\n if (!oppId) {\n document.getElementById('status').textContent = 'waiting for opponent...';\n document.getElementById('acts').style.visibility = 'hidden';\n return;\n }\n\n document.getElementById('acts').style.visibility = '';\n const myP = state.players[myId];\n const opP = state.players[oppId];\n document.getElementById('hp1bar').style.width = myP.hp + '%';\n document.getElementById('hp2bar').style.width = opP.hp + '%';\n document.getElementById('hp1num').textContent = myP.hp;\n document.getElementById('hp2num').textContent = opP.hp;\n renderDots('p1wins', myP.wins, 'var(--p1)');\n renderDots('p2wins', opP.wins, 'var(--p2)');\n document.getElementById('rlabel').textContent = 'ROUND ' + state.round;\n\n const st = document.getElementById('status');\n const nb = document.getElementById('next-btn');\n const hint = document.getElementById('hint');\n\n if (state.status === 'choosing') {\n nb.style.display = 'none';\n hideFlash();\n if (!picked) {\n st.textContent = 'choose your action!';\n enableActions();\n hint.textContent = 'pick a move';\n } else {\n st.textContent = 'waiting for opponent...';\n disableActions();\n }\n return;\n }\n\n // round_result / round_end / game_over — 結果表示\n disableActions();\n if (state.lastResult) {\n const r = state.lastResult;\n const myAct = p1IsMe ? r.p1 : r.p2;\n const opAct = p1IsMe ? r.p2 : r.p1;\n const myDmg = p1IsMe ? r.d1 : r.d2;\n const opDmg = p1IsMe ? r.d2 : r.d1;\n let line1 = myAct + ' vs ' + opAct;\n let line2 = '';\n if (myDmg > 0 && opDmg === 0) line2 = 'HIT! +' + myDmg;\n else if (opDmg > 0 && myDmg === 0) line2 = 'BLOCKED! -' + opDmg;\n else if (myDmg === 0 && opDmg === 0) line2 = 'DRAW';\n else line2 = 'CLASH! ' + myDmg + ' vs ' + opDmg;\n const col = myDmg > opDmg ? 'var(--green)' : myDmg < opDmg ? 'var(--p2)' : 'var(--gold)';\n showFlash(line1 + '\\\\n' + line2, col);\n st.textContent = line2;\n }\n\n if (state.status === 'round_result') {\n nb.style.display = '';\n nb.onclick = nextTurn;\n hint.textContent = 'both players confirm to continue';\n }\n if (state.status === 'round_end') {\n nb.style.display = '';\n nb.onclick = nextRound;\n hint.textContent = 'both players must press next';\n }\n if (state.status === 'game_over') {\n nb.style.display = 'none';\n clearInterval(pollTimer);\n const iWon = state.winner === myId;\n showFlash(iWon ? 'YOU WIN!' : 'YOU LOSE', iWon ? 'var(--gold)' : 'var(--p2)');\n st.textContent = iWon ? 'VICTORY!' : 'DEFEATED...';\n hint.textContent = '';\n }\n}\n\nfunction renderDots(id, n, color) {\n const el = document.getElementById(id);\n el.innerHTML = '';\n for (let i = 0; i < 2; i++) {\n const d = document.createElement('div');\n d.className = 'win-dot' + (i < n ? ' on' : '');\n d.style.borderColor = color;\n el.appendChild(d);\n }\n}\n\nfunction showFlash(msg, color) {\n const el = document.getElementById('flash');\n el.textContent = msg; el.style.color = color;\n el.style.whiteSpace = 'pre'; el.classList.add('on');\n}\nfunction hideFlash() { document.getElementById('flash').classList.remove('on'); }\n\nfunction drawCanvas() {\n const canvas = document.getElementById('fc');\n const W = canvas.offsetWidth, H = canvas.offsetHeight;\n if (!W || !H) return;\n canvas.width = W; canvas.height = H;\n const ctx = canvas.getContext('2d');\n ctx.clearRect(0, 0, W, H);\n if (!state || !oppId) return;\n const myHp = state.players[myId].hp;\n const opHp = state.players[oppId].hp;\n const myAct = state.players[myId].action;\n const opAct = state.players[oppId].action;\n drawChar(ctx, W * 0.2, H - 34, false, '#4fc3f7', myHp, myAct, state.status);\n drawChar(ctx, W * 0.8, H - 34, true, '#ef5350', opHp, opAct, state.status);\n}\n\nfunction drawChar(ctx, cx, cy, flip, color, hp, action, status) {\n ctx.save();\n ctx.globalAlpha = hp > 0 ? 1 : 0.3;\n if (flip) { ctx.translate(cx * 2, 0); ctx.scale(-1, 1); }\n const S = 4;\n const bob = hp > 0 ? Math.sin(Date.now() / 220) * 2 : 0;\n const x = cx - S * 2.5, y = cy + bob;\n function px(gx, gy, c) {\n ctx.fillStyle = c;\n ctx.fillRect(x + gx * S, y + gy * S, S, S);\n }\n const bc = color;\n const skin = '#f5c5a3';\n const dk = color === '#4fc3f7' ? '#0277bd' : '#b71c1c';\n [[1,0],[2,0],[3,0],[1,1],[2,1],[3,1],[1,2],[2,2],[3,2]].forEach(([gx,gy]) => px(gx,gy,skin));\n px(1,1,'#111'); px(3,1,'#111');\n [[0,3],[1,3],[2,3],[3,3],[4,3],[0,4],[1,4],[2,4],[3,4],[4,4]].forEach(([gx,gy]) => px(gx,gy,bc));\n if (action === 'punch' || action === 'ready') {\n px(-1,3,skin); px(-2,3,skin); px(5,3,skin);\n } else if (action === 'kick') {\n px(-1,4,skin); px(5,3,bc); px(6,3,bc);\n } else if (action === 'guard') {\n px(-1,3,dk); px(-1,4,dk); px(5,3,dk); px(5,4,dk);\n } else if (action === 'jump') {\n px(-1,2,skin); px(5,2,skin);\n } else {\n px(-1,4,skin); px(5,4,skin);\n }\n [[1,5],[2,5],[3,5]].forEach(([gx,gy]) => px(gx,gy,bc));\n px(1,6,dk); px(3,6,dk);\n ctx.restore();\n}\n\nsetInterval(() => { if (state) drawCanvas(); }, 80);\n\ndocument.addEventListener('DOMContentLoaded', () => {\n document.getElementById('create-btn').addEventListener('click', createRoom);\n document.getElementById('join-btn').addEventListener('click', joinRoom);\n document.getElementById('howto-toggle').addEventListener('click', toggleHowto);\n ['punch','kick','guard','jump'].forEach(a => {\n document.getElementById('b-'+a).addEventListener('click', () => pick(a));\n });\n});\n`;\n\n const styleOpen = \"<\" + \"style>\";\n const styleClose = \"<\" + \"/style>\";\n const scriptOpen = \"<\" + \"script>\";\n const scriptClose = \"<\" + \"/script>\";\n\n return `\n\n\n\n\nPIXEL FIGHT\n${styleOpen}${css}${styleClose}\n\n\n

PIXEL FIGHT

— ONLINE BATTLE —

\n\n

HOW TO PLAY

👊

PUNCH — 20 damage

Basic attack. Blocked by GUARD

🦵

KICK — 30 damage

Strong. Blocked by GUARD

🛡️

GUARD — blocks attacks

Blocks PUNCH/KICK. Weak to JUMP

🦘

JUMP — 15 damage (guard break)

Breaks GUARD. 10 vs unguarded

\n \n \n \n \n \n \n

You / Opp	PUNCH	KICK	GUARD	JUMP
PUNCH	clash 20	clash 20	20 hits!	take 10
KICK	clash 30	clash 30	30 hits!	take 10
GUARD	blocked	blocked	draw	take 15
JUMP	take 20	take 30	guard break!	clash 10

\n Both players choose simultaneously. First to win 2 rounds wins!\n

\n\n

NEW ROOM

\n \n

\n\n \n\n

JOIN ROOM

\n \n \n

\n\n

\n YOU\n

\n OPP\n

\n 100\n 100\n

\n \n

ROUND 1

Connecting...

\n \n \n \n \n

Choose your action

\n \n \n \n

HOW TO PLAY

👊

PUNCH 20dmg

blocked by GUARD

🦵

KICK 30dmg

blocked by GUARD

🛡️

GUARD blocks

broken by JUMP (take 15)

🦘

JUMP guard break

10dmg vs unguarded

\n\n${scriptOpen}${js}${scriptClose}\n\n`;\n}\n\nexport default async function handler(req: Request): Promise {\n const url = new URL(req.url);\n if (url.pathname.startsWith(\"/api/\")) return handleAPI(req);\n return new Response(buildHTML(), {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n}","deleted",false,"label",[35],{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_58":59,"_18":60},["D",1780020902493],"children",[],[35],"465d3912-5a50-11f1-881c-ee650bb23af1",["D",1779943624958],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","52bca2d0-0048-44cc-a16d-3372a12544cc","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019e6ce7-c91c-7652-809d-62eb8320538f","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_115":111},"org",{"_11":12,"_108":109,"_110":111,"_70":71,"_112":113,"_114":53},"branch",{"_17":42,"_13":16,"_33":40,"_100":61,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":14,"_107":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Jinsuke Hashimoto","avatar","https://lh3.googleusercontent.com/a/ACg8ocLSQcbqinv0_DKZS-v7ujKMabeGGBTIBIOUu56ENwpL2dUE7w=s96-c","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":61,"_13":14,"_45":149,"_63":-5,"_64":53,"_65":66,"_67":66,"_68":19,"_69":-5,"_70":71,"_72":-5,"_73":53,"_74":-5,"_75":-5,"_76":77,"_78":79,"_80":-5,"_81":-5,"_82":-5,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":150,"_95":151,"_97":152,"_99":53},[146],"files",[146],"counts",{"_136":77,"_137":138,"_139":77,"_31":140,"_141":142},[134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_18":135},[35],"pulls","branches",1,"forks",{"_143":77,"_145":77},"connections",{"_143":77,"_144":77},"count","unfilledCount","emptyCount",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_58":147,"_18":148},[],[35],["D",1779943624958],{"_11":12,"_115":111},{"_11":12,"_108":109,"_110":111,"_70":71,"_112":113,"_114":53},{"_17":42,"_13":16,"_33":40,"_100":61,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":14,"_107":12},"ctx",{"_93":-5,"_131":186,"_187":188,"_189":190,"_191":53,"_192":53,"_193":53,"_194":44,"_195":-5,"_196":-7,"_197":-7,"_198":77,"_199":53,"_200":53,"_201":-5,"_202":53,"_203":53,"_204":53,"_205":-5},"ENV",{"_157":158,"_159":160,"_161":16,"_162":163,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Code