TAG! — Multiplayer

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_143":144,"_145":146},"routes/_app.x.$handle.$name",{"_16":17,"_20":21,"_81":64,"_82":83,"_62":-7,"_84":-5,"_13":85,"_86":87,"_11":88,"_89":90,"_91":92,"_93":-5,"_94":-5,"_95":-5,"_96":26,"_97":98,"_99":100,"_101":-5,"_102":-5,"_103":104},"routes/_app.x.$handle.$name.search.$(branch)",{"_11":12,"_13":14,"_15":-5,"_16":17},"files",[],"project",{"_18":19,"_20":21,"_22":23,"_24":-5,"_25":26,"_27":28,"_29":28,"_30":-5,"_31":-5,"_32":33,"_34":-5,"_35":26,"_36":-5,"_37":-5,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":-5,"_45":-5,"_46":47,"_48":47,"_49":50,"_51":50,"_52":50,"_53":47,"_54":47,"_55":56,"_57":58,"_59":60,"_61":26},"query","handle","peopleeattoes","id","c7b4d2f2-1411-11f1-85dd-42dde27851f2","name","untitled-2420","createdAt",["D",1772220202265],"deletedAt","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",{"_16":17,"_80":76},"org",{"_16":17,"_74":-5,"_75":76,"_32":33,"_77":78,"_79":26},"branch",{"_62":63,"_20":64,"_18":65,"_66":19,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":21,"_73":17},"isOwned","version",5,"main","c7b548c2-1411-11f1-85dd-42dde27851f2","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzNBR1hCOENsY2tMa05FY25HdmpiZUtOckhxdSJ9","tier","free","canRestrictVals","profileImageUrl","branchName","path","","adoptOrgId",{"_18":19,"_20":21,"_22":139,"_24":-5,"_25":26,"_27":28,"_29":28,"_30":-5,"_31":-5,"_32":33,"_34":-5,"_35":26,"_36":-5,"_37":-5,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":-5,"_45":-5,"_46":47,"_48":47,"_49":50,"_51":50,"_52":50,"_53":47,"_54":47,"_55":140,"_57":141,"_59":142,"_61":26},"tree",[134],[134],"counts",{"_123":39,"_124":125,"_126":39,"_127":128,"_129":130},"contents",[105],"file","upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_18":106,"_20":107,"_108":109,"_110":-5,"_111":65,"_112":63,"_113":100,"_22":114,"_62":115,"_116":117,"_118":119,"_120":26,"_121":-5,"_82":122},"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",[107],"pulls","branches",1,"forks","envVars",{"_131":39,"_133":39},"connections",{"_131":39,"_132":39},"count","unfilledCount","emptyCount",{"_18":106,"_20":107,"_108":109,"_110":-5,"_111":65,"_112":63,"_113":100,"_22":135,"_62":115,"_116":117,"_118":119,"_120":26,"_121":-5,"_136":137,"_82":138},["D",1772220381889],"children",[],[107],["D",1772220202265],{"_16":17,"_80":76},{"_16":17,"_74":-5,"_75":76,"_32":33,"_77":78,"_79":26},{"_62":63,"_20":64,"_18":65,"_66":19,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":21,"_73":17},"ctx",{"_55":-5,"_102":176,"_177":178,"_179":180,"_181":26,"_182":26,"_183":26,"_184":100,"_185":-5,"_186":-7,"_187":-7,"_188":39,"_189":26,"_190":26,"_191":-5,"_192":26,"_193":26,"_194":26,"_195":-5},"ENV",{"_147":148,"_149":150,"_151":64,"_152":153,"_154":155,"_156":157,"_158":159,"_160":161,"_162":163,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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"]

Search