[{"_1":2,"_182":-5,"_183":-5},"loaderData",{"_3":4,"_93":94},"root",{"_5":6,"_36":37,"_66":67},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":-5,"_32":33,"_34":20,"_35":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesChatPanelState","notificationCount",0,"flagDenols","isTeamOrgMember","ENV",{"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63,"_64":65},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","7c5bc882bceb0a55efc9fc584fee6b89303eee47","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","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","API_URL","https://api.val.town","clerkState",{"_68":69},"__internal_clerk_state",{"_70":71,"_72":47,"_73":74,"_75":74,"_76":20,"_77":74,"_78":74,"_79":74,"_80":74,"_81":82,"_91":20,"_92":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_83":20,"_19":20,"_84":74,"_85":86,"_87":74,"_88":47,"_89":20,"_90":74},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_95":96,"_97":98,"_99":100,"_101":102,"_156":157,"_179":180,"_181":-5},"handle","arfan","name","arcade-games","path","FRONTEND/game-snake.ts","project",{"_103":104,"_97":98,"_105":106,"_107":-5,"_108":20,"_109":110,"_111":74,"_112":-5,"_12":113,"_114":-5,"_115":20,"_116":-5,"_117":-5,"_118":33,"_14":119,"_120":121,"_122":123,"_124":-5,"_125":126,"_127":126,"_128":129,"_130":129,"_131":129,"_132":126,"_133":126,"_23":134,"_137":138,"_142":143,"_155":20},"id","2a8d2064-1c19-11f1-b7f6-42dde27851f2","createdAt",["D",1773102983877],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","1601447d-3c17-4580-a190-f6b82a1eb8e2","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","8789b31e-4477-4b2d-ae0d-cc5f2132061a","tursoName","2a8d20641c1911f1b7f642dde27851f2","tursoHostname","2a8d20641c1911f1b7f642dde27851f2-val-town.aws-us-east-2.turso.io","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_95":96,"_135":136},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJ3WWZ5Sm91SWx1eXRNRTZDazIwbnFiUVV4WiJ9","org",{"_95":96,"_139":136,"_12":113,"_140":141},"avatar","tier","pro","branch",{"_144":145,"_97":45,"_103":146,"_147":104,"_148":-5,"_149":-5,"_150":-5,"_151":-5,"_152":-5,"_153":98,"_154":96},"version",31,"2a8d98aa-1c19-11f1-b7f6-42dde27851f2","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_103":158,"_97":159,"_160":161,"_162":163,"_164":146,"_165":166,"_167":168,"_105":169,"_144":170,"_171":172,"_173":174,"_175":20,"_176":-5,"_99":177},"703dbefa-1c20-11f1-bed3-42dde27851f2","game-snake.ts","fileId","5afa7b52-1c19-11f1-884f-42dde27851f2","parentId","5ab24e0e-1c19-11f1-9226-42dde27851f2","branchId","branchVersion",26,"latest",true,["D",1773106107254],3,"fileType","script","content","import { SLOW_TIME_DURATION, SLOW_TIME_COOLDOWN, SLOW_TIME_MULTIPLIER } from \"../Shared/config.ts\";\n\ntype Direction = \"up\" | \"down\" | \"left\" | \"right\";\ntype Point = { x: number; y: number };\n\ninterface SlowTimeStatus {\n state: \"ready\" | \"active\" | \"cooldown\";\n remaining?: number;\n}\n\ninterface SlowParticle {\n x: number;\n y: number;\n vx: number;\n vy: number;\n alpha: number;\n size: number;\n}\n\nconst GRID = 20;\nconst COLS = 20;\nconst ROWS = 20;\nconst INITIAL_SPEED = 140;\nconst SPEED_STEP = 3;\nconst MIN_SPEED = 50;\nconst SCORE_PER_FOOD = 10;\n\nexport class SnakeGame {\n private canvas: HTMLCanvasElement;\n private ctx: CanvasRenderingContext2D;\n private onScore: (score: number) => void;\n private onGameOver: (score: number) => void;\n private onSpeedUpdate?: (speed: number) => void;\n private onSlowTimeStatus?: (status: SlowTimeStatus) => void;\n\n private snake: Point[] = [];\n private direction: Direction = \"right\";\n private nextDirection: Direction = \"right\";\n private food: Point = { x: 0, y: 0 };\n private score = 0;\n private speed: number;\n private isGameOver = false;\n private intervalId: number | null = null;\n private keyHandler: (e: KeyboardEvent) => void;\n private startTime = 0;\n private slowTimeEnd = 0;\n private slowTimeCooldownEnd = 0;\n private particles: SlowParticle[] = [];\n\n constructor(\n canvas: HTMLCanvasElement,\n onScore: (score: number) => void,\n onGameOver: (score: number) => void,\n onSpeedUpdate?: (speed: number) => void,\n onSlowTimeStatus?: (status: SlowTimeStatus) => void,\n ) {\n this.canvas = canvas;\n this.ctx = canvas.getContext(\"2d\")!;\n this.onScore = onScore;\n this.onGameOver = onGameOver;\n this.onSpeedUpdate = onSpeedUpdate;\n this.onSlowTimeStatus = onSlowTimeStatus;\n this.speed = INITIAL_SPEED;\n\n this.canvas.width = COLS * GRID;\n this.canvas.height = ROWS * GRID;\n\n // Init snake at center\n const cx = Math.floor(COLS / 2);\n const cy = Math.floor(ROWS / 2);\n this.snake = [\n { x: cx, y: cy },\n { x: cx - 1, y: cy },\n { x: cx - 2, y: cy },\n ];\n\n this.placeFood();\n\n this.keyHandler = (e: KeyboardEvent) => this.handleKey(e);\n document.addEventListener(\"keydown\", this.keyHandler);\n\n this.startTime = Date.now();\n this.startLoop();\n this.render();\n this.onSpeedUpdate?.(Math.round(1000 / this.speed));\n this.onSlowTimeStatus?.({ state: \"ready\" });\n }\n\n private getEffectiveSpeed(): number {\n const now = Date.now();\n if (now < this.slowTimeEnd) {\n return Math.ceil(this.speed * SLOW_TIME_MULTIPLIER);\n }\n return this.speed;\n }\n\n private startLoop(): void {\n if (this.intervalId !== null) clearInterval(this.intervalId);\n this.intervalId = setInterval(() => this.tick(), this.getEffectiveSpeed()) as unknown as number;\n }\n\n private handleKey(e: KeyboardEvent): void {\n if (this.isGameOver) return;\n\n const key = e.key.toLowerCase();\n const map: Record = {\n arrowup: \"up\", w: \"up\",\n arrowdown: \"down\", s: \"down\",\n arrowleft: \"left\", a: \"left\",\n arrowright: \"right\", d: \"right\",\n };\n\n const dir = map[key];\n if (dir) {\n // Prevent 180-degree turns\n const opposites: Record = {\n up: \"down\", down: \"up\", left: \"right\", right: \"left\",\n };\n if (opposites[dir] === this.direction) return;\n e.preventDefault();\n this.nextDirection = dir;\n return;\n }\n\n // Slow-time superpower (C key)\n if (key === \"c\") {\n const now = Date.now();\n if (now > this.slowTimeCooldownEnd) {\n this.slowTimeEnd = now + SLOW_TIME_DURATION;\n this.slowTimeCooldownEnd = now + SLOW_TIME_COOLDOWN;\n this.startLoop();\n this.onSpeedUpdate?.(Math.round(1000 / this.getEffectiveSpeed()));\n e.preventDefault();\n }\n }\n }\n\n private tick(): void {\n if (this.isGameOver) return;\n\n // Restart loop when slow time expires\n if (this.slowTimeEnd > 0 && Date.now() > this.slowTimeEnd) {\n this.slowTimeEnd = 0;\n this.startLoop();\n this.onSpeedUpdate?.(Math.round(1000 / this.speed));\n return;\n }\n\n this.direction = this.nextDirection;\n\n const head = { ...this.snake[0] };\n switch (this.direction) {\n case \"up\": head.y--; break;\n case \"down\": head.y++; break;\n case \"left\": head.x--; break;\n case \"right\": head.x++; break;\n }\n\n // Wall collision\n if (head.x < 0 || head.x >= COLS || head.y < 0 || head.y >= ROWS) {\n this.gameOver();\n return;\n }\n\n // Self collision\n if (this.snake.some((p) => p.x === head.x && p.y === head.y)) {\n this.gameOver();\n return;\n }\n\n this.snake.unshift(head);\n\n // Food check\n if (head.x === this.food.x && head.y === this.food.y) {\n this.score += SCORE_PER_FOOD;\n this.onScore(this.score);\n this.placeFood();\n\n // Speed up\n this.speed = Math.max(MIN_SPEED, this.speed - SPEED_STEP);\n this.onSpeedUpdate?.(Math.round(1000 / this.speed));\n this.startLoop();\n } else {\n this.snake.pop();\n }\n }\n\n private placeFood(): void {\n const occupied = new Set(this.snake.map((p) => `${p.x},${p.y}`));\n let attempts = 0;\n do {\n this.food = {\n x: Math.floor(Math.random() * COLS),\n y: Math.floor(Math.random() * ROWS),\n };\n attempts++;\n } while (occupied.has(`${this.food.x},${this.food.y}`) && attempts < 500);\n }\n\n private gameOver(): void {\n this.isGameOver = true;\n if (this.intervalId !== null) {\n clearInterval(this.intervalId);\n this.intervalId = null;\n }\n this.render();\n this.onGameOver(this.score);\n }\n\n private render(): void {\n const ctx = this.ctx;\n const w = this.canvas.width;\n const h = this.canvas.height;\n const now = Date.now();\n const isSlowTime = now < this.slowTimeEnd;\n\n // Report slow-time status every frame\n if (isSlowTime) {\n this.onSlowTimeStatus?.({ state: \"active\", remaining: Math.ceil((this.slowTimeEnd - now) / 1000) });\n } else if (now < this.slowTimeCooldownEnd) {\n this.onSlowTimeStatus?.({ state: \"cooldown\", remaining: Math.ceil((this.slowTimeCooldownEnd - now) / 1000) });\n } else {\n this.onSlowTimeStatus?.({ state: \"ready\" });\n }\n\n // Slow-time particles\n if (isSlowTime) {\n for (let i = 0; i < 2; i++) {\n this.particles.push({\n x: Math.random() * w,\n y: Math.random() * h,\n vx: (Math.random() - 0.5) * 0.5,\n vy: -Math.random() * 1.5 - 0.5,\n alpha: 0.8 + Math.random() * 0.2,\n size: Math.random() * 2 + 1,\n });\n }\n }\n for (let i = this.particles.length - 1; i >= 0; i--) {\n const p = this.particles[i];\n p.x += p.vx;\n p.y += p.vy;\n p.alpha -= 0.015;\n if (p.alpha <= 0) this.particles.splice(i, 1);\n }\n\n // Background\n ctx.fillStyle = \"#080810\";\n ctx.fillRect(0, 0, w, h);\n\n // Grid lines\n ctx.strokeStyle = \"rgba(30, 30, 60, 0.3)\";\n ctx.lineWidth = 0.5;\n for (let x = 0; x <= COLS; x++) {\n ctx.beginPath();\n ctx.moveTo(x * GRID, 0);\n ctx.lineTo(x * GRID, h);\n ctx.stroke();\n }\n for (let y = 0; y <= ROWS; y++) {\n ctx.beginPath();\n ctx.moveTo(0, y * GRID);\n ctx.lineTo(w, y * GRID);\n ctx.stroke();\n }\n\n // Snake body\n this.snake.forEach((p, i) => {\n const isHead = i === 0;\n const brightness = isHead ? 1.0 : Math.max(0.4, 1 - i * 0.03);\n\n if (isHead) {\n ctx.fillStyle = \"#50ff30\";\n ctx.shadowColor = \"#39ff14\";\n ctx.shadowBlur = 12;\n } else {\n const g = Math.round(255 * brightness);\n const r = Math.round(57 * brightness);\n ctx.fillStyle = `rgb(${r}, ${g}, 20)`;\n ctx.shadowColor = \"transparent\";\n ctx.shadowBlur = 0;\n }\n\n ctx.fillRect(p.x * GRID + 1, p.y * GRID + 1, GRID - 2, GRID - 2);\n });\n\n ctx.shadowColor = \"transparent\";\n ctx.shadowBlur = 0;\n\n // Food (pulsating)\n const pulse = Math.sin(now * 0.005) * 2 + 2;\n ctx.fillStyle = \"#ff2d95\";\n ctx.shadowColor = \"#ff2d95\";\n ctx.shadowBlur = 8 + pulse;\n ctx.fillRect(\n this.food.x * GRID + 2 - pulse / 2,\n this.food.y * GRID + 2 - pulse / 2,\n GRID - 4 + pulse,\n GRID - 4 + pulse,\n );\n ctx.shadowColor = \"transparent\";\n ctx.shadowBlur = 0;\n\n // Slow-time particles (rendered on top)\n for (const p of this.particles) {\n ctx.globalAlpha = p.alpha;\n ctx.fillStyle = \"#00d4ff\";\n ctx.shadowColor = \"#00d4ff\";\n ctx.shadowBlur = 6;\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);\n ctx.fill();\n }\n ctx.globalAlpha = 1;\n ctx.shadowColor = \"transparent\";\n ctx.shadowBlur = 0;\n\n // Constant redraw for food animation\n if (!this.isGameOver) {\n requestAnimationFrame(() => this.render());\n }\n }\n\n destroy(): void {\n this.isGameOver = true;\n if (this.intervalId !== null) {\n clearInterval(this.intervalId);\n this.intervalId = null;\n }\n document.removeEventListener(\"keydown\", this.keyHandler);\n }\n}\n","deleted","label",[178,159],"FRONTEND","permalink","https://www.val.town/x/arfan/arcade-games/code/FRONTEND/game-snake.ts","extension","actionData","errors"]