TAG! — Multiplayer

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_148":149,"_150":151},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_86":-7,"_87":88,"_29":-7,"_89":-5,"_15":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":-5,"_100":-5,"_101":-5,"_102":38,"_103":104,"_105":106,"_107":-5,"_108":-5,"_109":110},"routes/_app.x.$handle.$name.branches",{"_11":12,"_13":14,"_15":16,"_17":18},"handle","peopleeattoes","name","untitled-2420","project",{"_20":28,"_13":14,"_22":36,"_35":-5,"_37":38,"_39":40,"_41":40,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":38,"_48":-5,"_49":-5,"_50":51,"_52":53,"_54":-5,"_55":-5,"_56":-5,"_57":-5,"_58":59,"_60":59,"_61":62,"_63":62,"_64":62,"_65":59,"_66":59,"_67":68,"_69":70,"_71":72,"_73":38},"branches",[19],{"_20":21,"_22":23,"_24":25,"_13":26,"_27":28,"_29":30,"_31":-5,"_32":-5,"_33":34,"_35":-5},"id","c7b548c2-1411-11f1-85dd-42dde27851f2","createdAt",["D",1772220202265],"updatedAt",["D",1772220381889],"main","projectId","c7b4d2f2-1411-11f1-85dd-42dde27851f2","version",5,"forkedBranchId","forkedBranchVersion","lockfileKey","1772220389393-esm.town_v_peopleeattoes_untitled-2420@5-main","deletedAt",["D",1772220202265],"legacyEnvVars",false,"privacy","public","httpPrivacy","description","imageUrl","userId","019ca087-498a-778f-a6ff-f903af6eea80","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019ca087-498a-778f-a6ff-feed8f31f20f","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_85":81},"org",{"_11":12,"_79":-5,"_80":81,"_44":45,"_82":83,"_84":38},"branch",{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_74":-5,"_75":-5,"_76":-5,"_77":14,"_78":12},"isOwned","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzNBR1hCOENsY2tMa05FY25HdmpiZUtOckhxdSJ9","tier","free","canRestrictVals","profileImageUrl","branchName","path","","adoptOrgId",{"_20":28,"_13":14,"_22":144,"_35":-5,"_37":38,"_39":40,"_41":40,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":38,"_48":-5,"_49":-5,"_50":51,"_52":53,"_54":-5,"_55":-5,"_56":-5,"_57":-5,"_58":59,"_60":59,"_61":62,"_63":62,"_64":62,"_65":59,"_66":59,"_67":145,"_69":146,"_71":147,"_73":38},"tree",[139],"files",[139],"counts",{"_129":51,"_17":130,"_131":51,"_132":133,"_134":135},"contents",[111],"file","upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_20":112,"_13":113,"_114":115,"_116":-5,"_117":21,"_118":30,"_119":106,"_22":120,"_29":121,"_122":123,"_124":125,"_126":38,"_127":-5,"_87":128},"32c75628-1412-11f1-8834-42dde27851f2","main.ts","fileId","c7b8a88c-1411-11f1-85dd-42dde27851f2","parentId","branchId","branchVersion","latest",["D",1772220381889],4,"fileType","http","content","import { serve } from \"https://deno.land/std@0.208.0/http/server.ts\";\n\nconst HTML = `\n\n\n\n\n\nTAG! — Multiplayer\n\n\n\n\n

\n\n

TAG!

Real-time · Multiplayer · Mobile Ready

Your Name

\n \n

Room Code

\n \n

\n\n

Waiting Room

Share the code below

Room Code

----

Share with friends to play together

Players

\n \n

\n\n

Get Ready!

\n\n

IT: —

2:00

— players

\n \n

\n\n

\n\n\n\n`;\n\n// Game state\nconst rooms: Record = {};\nconst socketToRoom = new Map();\n\nconst GAME_DURATION = 120;\nconst TICK_MS = 50;\nconst PLAYER_SPEED = 3.8;\nconst IT_SPEED = 4.4;\nconst PLAYER_R = 18;\nconst TAG_DIST = PLAYER_R * 2 + 6;\nconst INVINCIBLE_MS = 2200;\nconst ARENA_PAD = 45;\nconst WORLD_W = 800;\nconst WORLD_H = 600;\nconst COLORS = [\n \"#00e5ff\",\n \"#ffe600\",\n \"#ff6cf7\",\n \"#39ff14\",\n \"#ff9500\",\n \"#c77dff\",\n \"#ff4757\",\n \"#ffffff\",\n];\n\nfunction genCode() {\n const w = [\n \"WOLF\",\n \"HAWK\",\n \"BEAR\",\n \"LION\",\n \"LYNX\",\n \"CROW\",\n \"PUMA\",\n \"BULL\",\n \"VIPER\",\n \"FOX\",\n ];\n return w[Math.floor(Math.random() * w.length)] +\n (10 + Math.floor(Math.random() * 90));\n}\nfunction pickColor(room: any) {\n const used = Object.values(room.players).map((p: any) => p.color);\n return COLORS.find((c) => !used.includes(c)) || \"#aaa\";\n}\nfunction bcast(room: any, data: any, exceptId?: string) {\n const msg = JSON.stringify(data);\n for (const id in room.sockets) {\n if (id === exceptId) continue;\n try {\n room.sockets[id].send(msg);\n } catch (e) {}\n }\n}\nfunction sendState(room: any) {\n bcast(room, {\n type: \"STATE\",\n players: room.players,\n phase: room.phase,\n timer: room.timer,\n });\n}\n\nfunction startGame(room: any) {\n room.phase = \"countdown\";\n const ids = Object.keys(room.players);\n const itId = ids[Math.floor(Math.random() * ids.length)];\n for (const id in room.players) room.players[id].isIt = false;\n room.players[itId].isIt = true;\n room.players[itId].invincibleUntil = Date.now() + INVINCIBLE_MS;\n ids.forEach((id, i) => {\n const angle = (i / ids.length) * Math.PI * 2;\n room.players[id].x = WORLD_W / 2 + Math.cos(angle) * 160;\n room.players[id].y = WORLD_H / 2 + Math.sin(angle) * 160;\n room.players[id].vx = room.players[id].vy = 0;\n room.players[id].score = 0;\n });\n let cd = 3;\n bcast(room, { type: \"COUNTDOWN\", val: cd });\n const cdIv = setInterval(() => {\n cd--;\n if (cd <= 0) {\n clearInterval(cdIv);\n room.phase = \"playing\";\n room.timer = GAME_DURATION;\n bcast(room, { type: \"COUNTDOWN\", val: 0 });\n let elapsed = 0;\n room.tickIv = setInterval(() => {\n elapsed += TICK_MS;\n if (elapsed >= 1000) {\n elapsed -= 1000;\n room.timer--;\n if (room.timer <= 0) {\n endGame(room);\n return;\n }\n }\n gameTick(room);\n sendState(room);\n }, TICK_MS);\n sendState(room);\n } else {\n bcast(room, { type: \"COUNTDOWN\", val: cd });\n }\n }, 1000);\n}\n\nfunction gameTick(room: any) {\n const now = Date.now();\n const dt = TICK_MS / (1000 / 60);\n for (const id in room.players) {\n const p = room.players[id];\n const speed = p.isIt ? IT_SPEED : PLAYER_SPEED;\n let vx = p.inputX || 0, vy = p.inputY || 0;\n const len = Math.sqrt(vx * vx + vy * vy);\n if (len > 1) {\n vx /= len;\n vy /= len;\n }\n p.x = Math.max(\n PLAYER_R + ARENA_PAD,\n Math.min(WORLD_W - PLAYER_R - ARENA_PAD, p.x + vx * speed * dt),\n );\n p.y = Math.max(\n PLAYER_R + ARENA_PAD,\n Math.min(WORLD_H - PLAYER_R - ARENA_PAD, p.y + vy * speed * dt),\n );\n }\n const it = Object.values(room.players).find((p: any) => p.isIt) as any;\n if (it && now > it.invincibleUntil) {\n for (const id in room.players) {\n const p = room.players[id];\n if (p.id === it.id || now < p.invincibleUntil) continue;\n const dx = p.x - it.x, dy = p.y - it.y;\n if (Math.sqrt(dx * dx + dy * dy) < TAG_DIST) {\n it.score++;\n it.isIt = false;\n p.isIt = true;\n p.invincibleUntil = now + INVINCIBLE_MS;\n bcast(room, { type: \"TAG\", taggerId: it.id, taggedId: p.id });\n break;\n }\n }\n }\n}\n\nfunction endGame(room: any) {\n if (room.tickIv) {\n clearInterval(room.tickIv);\n room.tickIv = null;\n }\n room.phase = \"ended\";\n const results = Object.values(room.players)\n .sort((a: any, b: any) => b.score - a.score)\n .map((p: any) => ({\n id: p.id,\n name: p.name,\n color: p.color,\n score: p.score,\n }));\n bcast(room, { type: \"GAMEOVER\", results });\n}\n\nfunction removePlayer(room: any, playerId: string) {\n delete room.players[playerId];\n delete room.sockets[playerId];\n if (Object.keys(room.players).length === 0) {\n if (room.tickIv) clearInterval(room.tickIv);\n delete rooms[room.code];\n return;\n }\n if (room.phase === \"playing\") {\n const hasIt = Object.values(room.players).some((p: any) => p.isIt);\n if (!hasIt) {\n const ids = Object.keys(room.players);\n room.players[ids[0]].isIt = true;\n room.players[ids[0]].invincibleUntil = Date.now() + INVINCIBLE_MS;\n }\n }\n bcast(room, { type: \"PLAYER_LEFT\", id: playerId, players: room.players });\n}\n\nfunction handleMsg(ws: WebSocket, msg: any) {\n if (msg.type === \"CREATE\") {\n let code = genCode();\n while (rooms[code]) code = genCode();\n const room = {\n code,\n players: {},\n sockets: {},\n phase: \"lobby\",\n timer: GAME_DURATION,\n tickIv: null,\n };\n rooms[code] = room;\n const color = pickColor(room);\n const player = {\n id: msg.id,\n name: msg.name,\n color,\n x: WORLD_W / 2,\n y: WORLD_H / 2,\n vx: 0,\n vy: 0,\n inputX: 0,\n inputY: 0,\n isIt: false,\n score: 0,\n invincibleUntil: 0,\n isHost: true,\n };\n room.players[msg.id] = player;\n room.sockets[msg.id] = ws;\n socketToRoom.set(ws, { code, playerId: msg.id });\n ws.send(\n JSON.stringify({ type: \"CREATED\", code, player, players: room.players }),\n );\n } else if (msg.type === \"JOIN\") {\n const room = rooms[msg.code?.toUpperCase()];\n if (!room) {\n ws.send(JSON.stringify({ type: \"ERROR\", msg: \"Room not found\" }));\n return;\n }\n if (room.phase !== \"lobby\") {\n ws.send(JSON.stringify({ type: \"ERROR\", msg: \"Game already started\" }));\n return;\n }\n if (Object.keys(room.players).length >= 8) {\n ws.send(JSON.stringify({ type: \"ERROR\", msg: \"Room is full\" }));\n return;\n }\n const color = pickColor(room);\n const player = {\n id: msg.id,\n name: msg.name,\n color,\n x: WORLD_W / 2 + (Math.random() - .5) * 200,\n y: WORLD_H / 2 + (Math.random() - .5) * 200,\n vx: 0,\n vy: 0,\n inputX: 0,\n inputY: 0,\n isIt: false,\n score: 0,\n invincibleUntil: 0,\n isHost: false,\n };\n room.players[msg.id] = player;\n room.sockets[msg.id] = ws;\n socketToRoom.set(ws, { code: msg.code.toUpperCase(), playerId: msg.id });\n ws.send(\n JSON.stringify({\n type: \"JOINED\",\n code: msg.code.toUpperCase(),\n player,\n players: room.players,\n }),\n );\n bcast(\n room,\n { type: \"PLAYER_JOINED\", player, players: room.players },\n msg.id,\n );\n } else if (msg.type === \"START\") {\n const info = socketToRoom.get(ws);\n if (!info) return;\n const room = rooms[info.code];\n if (!room || room.phase !== \"lobby\") return;\n if (!room.players[info.playerId]?.isHost) return;\n if (Object.keys(room.players).length < 2) {\n ws.send(\n JSON.stringify({ type: \"ERROR\", msg: \"Need at least 2 players!\" }),\n );\n return;\n }\n startGame(room);\n } else if (msg.type === \"INPUT\") {\n const info = socketToRoom.get(ws);\n if (!info) return;\n const room = rooms[info.code];\n if (!room || room.phase !== \"playing\") return;\n const p = room.players[info.playerId];\n if (p) {\n p.inputX = msg.x;\n p.inputY = msg.y;\n }\n } else if (msg.type === \"RESTART\") {\n const info = socketToRoom.get(ws);\n if (!info) return;\n const room = rooms[info.code];\n if (!room || room.phase !== \"ended\") return;\n if (!room.players[info.playerId]?.isHost) return;\n room.phase = \"lobby\";\n for (const id in room.players) {\n room.players[id].score = 0;\n room.players[id].isIt = false;\n }\n bcast(room, { type: \"RESTART\", players: room.players });\n }\n}\n\nserve((req) => {\n const upgrade = req.headers.get(\"upgrade\") || \"\";\n if (upgrade.toLowerCase() === \"websocket\") {\n const { socket, response } = Deno.upgradeWebSocket(req);\n socket.onmessage = (e) => {\n try {\n handleMsg(socket, JSON.parse(e.data));\n } catch (err) {}\n };\n socket.onclose = () => {\n const info = socketToRoom.get(socket);\n if (!info) return;\n socketToRoom.delete(socket);\n const room = rooms[info.code];\n if (room) removePlayer(room, info.playerId);\n };\n return response;\n }\n return new Response(HTML, {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n});","deleted","label",[113],"pulls",1,"forks","envVars",{"_136":51,"_138":51},"connections",{"_136":51,"_137":51},"count","unfilledCount","emptyCount",{"_20":112,"_13":113,"_114":115,"_116":-5,"_117":21,"_118":30,"_119":106,"_22":140,"_29":121,"_122":123,"_124":125,"_126":38,"_127":-5,"_141":142,"_87":143},["D",1772220381889],"children",[],[113],["D",1772220202265],{"_11":12,"_85":81},{"_11":12,"_79":-5,"_80":81,"_44":45,"_82":83,"_84":38},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_74":-5,"_75":-5,"_76":-5,"_77":14,"_78":12},"ctx",{"_67":-5,"_108":181,"_182":183,"_184":185,"_186":38,"_187":38,"_188":38,"_189":106,"_190":-5,"_191":-7,"_192":-7,"_193":51,"_194":38,"_195":38,"_196":-5,"_197":38,"_198":38,"_199":38,"_200":-5},"ENV",{"_152":153,"_154":155,"_156":26,"_157":158,"_159":160,"_161":162,"_163":164,"_165":166,"_167":168,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180},"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"]

Branches1

Branches
1