NO SCORES YET. BE THE FIRST!

'\n : '

—

';\n return;\n }\n\n let html = '';\n html += '';\n html += \"\";\n\n entries.forEach((entry, i) => {\n const rank = i + 1;\n const rankClass = rank <= 3 ? ` lb-rank--${rank}` : \"\";\n const selfClass = currentUser?.email === entry.email ? \" lb-self\" : \"\";\n const name = escapeHtml(entry.username || entry.email.split(\"@\")[0]);\n html += ``;\n html += ``;\n html += ``;\n html += ``;\n html += \"\";\n });\n\n html += \"

#	PLAYER	SCORE
${rank}	${name}	${entry.score.toLocaleString()}

\";\n container.innerHTML = html;\n}\n\nasync function loadLobbyLeaderboard(game: GameName): Promise {\n lobbyLeaderboard.innerHTML = '

';\n try {\n const res = await fetch(`/api/scores/${game}`);\n const entries = (await res.json()) as ScoreEntry[];\n renderLeaderboardTable(entries, lobbyLeaderboard);\n } catch {\n lobbyLeaderboard.innerHTML = '

FAILED TO LOAD

';\n }\n}\n\nasync function loadFullLeaderboard(game: GameName): Promise {\n lbTableContainer.innerHTML = '

';\n lbPersonalBest.innerHTML = \"\";\n\n try {\n const res = await fetch(`/api/scores/${game}`);\n const entries = (await res.json()) as ScoreEntry[];\n renderLeaderboardTable(entries, lbTableContainer);\n } catch {\n lbTableContainer.innerHTML = '

FAILED TO LOAD

';\n }\n\n if (currentUser?.email) {\n try {\n const bestRes = await fetch(`/api/scores/${game}/me`);\n const best = (await bestRes.json()) as PersonalBest | null;\n if (best) {\n lbPersonalBest.innerHTML = `

YOUR BEST

${best.score.toLocaleString()}

`;\n } else {\n lbPersonalBest.innerHTML = '

NO SCORES YET — GO PLAY!

';\n }\n } catch {\n // ignore\n }\n } else {\n lbPersonalBest.innerHTML = '

';\n }\n}\n\nfunction switchLeaderboardTab(game: GameName): void {\n lobbyLeaderboardTab = game;\n document.querySelectorAll(\".tab-btn\").forEach((btn) => {\n btn.classList.toggle(\"active\", (btn as HTMLElement).dataset.game === game);\n });\n loadLobbyLeaderboard(game);\n}\n\n// ESC key handler\ndocument.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Escape\") {\n if (avatarModal.style.display !== \"none\") {\n closeAvatarModal();\n } else if (activeGameInstance) {\n showLobby();\n }\n }\n});\n\n// Expose to HTML onclick handlers\n(window as any).__arcade = {\n showLobby,\n showGame,\n showLeaderboard,\n restartGame,\n switchLeaderboardTab,\n saveScore,\n openAvatarModal,\n closeAvatarModal,\n saveAvatar,\n};\n\n// Init\nfetchUser();\nloadLobbyLeaderboard(\"snake\");\n",[],[152,225],"7036877a-1c20-11f1-a23f-42dde27851f2","index.html","5af2be3a-1c19-11f1-a7d6-42dde27851f2",25,["D",1773106107213],"\n\n \n \n \n ARCADE\n \n \n \n \n \n \n \n

\n\n

\n \n

ARCADE

\n\n \n

SELECT
YOUR GAME

INSERT COIN TO PLAY

\n\n

🐍

SNAKE

Classic serpent action.
Eat. Grow. Survive.

PRESS TO PLAY

🧱

TETRIS

Stack the blocks.
Clear the lines.

PRESS TO PLAY

\n\n

HIGH SCORES

\n \n \n

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

\n\n \n \n\n",[],[152,233],"704af69c-1c20-11f1-8344-42dde27851f2","game-tetris.ts","5b2d27b4-1c19-11f1-b34b-42dde27851f2",28,["D",1773106107315],"import { SLOW_TIME_DURATION, SLOW_TIME_COOLDOWN, SLOW_TIME_MULTIPLIER } from \"../Shared/config.ts\";\n\nconst COLS = 10;\nconst ROWS = 20;\nconst CELL = 25;\nconst SIDEBAR = 70;\nconst INITIAL_DROP = 800;\nconst LEVEL_SPEED_DROP = 60;\nconst MIN_DROP = 80;\nconst SIDEBAR_PAD_X = 10;\nconst SIDEBAR_PREVIEW_INSET = 14;\nconst PREVIEW_CELL = 12;\nconst SIDEBAR_NEXT_LABEL_Y = 24;\nconst SIDEBAR_NEXT_PREVIEW_Y = 36;\nconst SIDEBAR_HOLD_LABEL_Y = 82;\nconst SIDEBAR_HOLD_PREVIEW_Y = 94;\nconst SIDEBAR_LEVEL_LABEL_Y = 150;\nconst SIDEBAR_LEVEL_VALUE_Y = 168;\nconst SIDEBAR_LINES_LABEL_Y = 200;\nconst SIDEBAR_LINES_VALUE_Y = 218;\n\n// Tetromino shapes: each is array of rotations, each rotation is array of [row, col] offsets\nconst SHAPES: number[][][][] = [\n // I\n [[[0,0],[0,1],[0,2],[0,3]], [[0,0],[1,0],[2,0],[3,0]]],\n // O\n [[[0,0],[0,1],[1,0],[1,1]]],\n // T\n [[[0,0],[0,1],[0,2],[1,1]], [[0,0],[1,0],[2,0],[1,1]], [[0,1],[1,0],[1,1],[1,2]], [[0,0],[1,0],[2,0],[1,-1]]],\n // S\n [[[0,1],[0,2],[1,0],[1,1]], [[0,0],[1,0],[1,1],[2,1]]],\n // Z\n [[[0,0],[0,1],[1,1],[1,2]], [[0,1],[1,0],[1,1],[2,0]]],\n // J\n [[[0,0],[1,0],[1,1],[1,2]], [[0,0],[0,1],[1,0],[2,0]], [[0,0],[0,1],[0,2],[1,2]], [[0,0],[1,0],[2,0],[2,-1]]],\n // L\n [[[0,2],[1,0],[1,1],[1,2]], [[0,0],[1,0],[2,0],[2,1]], [[0,0],[0,1],[0,2],[1,0]], [[0,0],[0,1],[1,1],[2,1]]],\n];\n\nconst COLORS = [\n \"#00d4ff\", // I - cyan\n \"#ffe600\", // O - yellow\n \"#bf00ff\", // T - purple\n \"#39ff14\", // S - green\n \"#ff2d95\", // Z - pink\n \"#3366ff\", // J - blue\n \"#ff6b00\", // L - orange\n];\n\nconst GLOW_COLORS = [\n \"rgba(0,212,255,0.4)\",\n \"rgba(255,230,0,0.4)\",\n \"rgba(191,0,255,0.4)\",\n \"rgba(57,255,20,0.4)\",\n \"rgba(255,45,149,0.4)\",\n \"rgba(51,102,255,0.4)\",\n \"rgba(255,107,0,0.4)\",\n];\n\ninterface Piece {\n type: number;\n rotation: number;\n x: number;\n y: number;\n}\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\nexport class TetrisGame {\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 board: number[][] = [];\n private current: Piece = { type: 0, rotation: 0, x: 0, y: 0 };\n private next: Piece = { type: 0, rotation: 0, x: 0, y: 0 };\n private score = 0;\n private level = 1;\n private lines = 0;\n private dropInterval: number;\n private lastDrop = 0;\n private isGameOver = false;\n private animFrameId: number | null = null;\n private keyHandler: (e: KeyboardEvent) => void;\n private heldPiece: { type: number; rotation: number } | null = null;\n private canHold = true;\n private slowTimeEnd = 0;\n private slowTimeCooldownEnd = 0;\n private wasSlowTime = false;\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.dropInterval = INITIAL_DROP;\n\n this.canvas.width = COLS * CELL + SIDEBAR;\n this.canvas.height = ROWS * CELL;\n\n // Init board\n this.board = Array.from({ length: ROWS }, () => Array(COLS).fill(-1));\n\n this.next = this.randomPiece();\n this.spawnPiece();\n\n this.keyHandler = (e: KeyboardEvent) => this.handleKey(e);\n document.addEventListener(\"keydown\", this.keyHandler);\n\n this.lastDrop = performance.now();\n this.loop(performance.now());\n this.onSpeedUpdate?.(Math.round(1000 / this.dropInterval));\n this.onSlowTimeStatus?.({ state: \"ready\" });\n }\n\n private randomPiece(): Piece {\n return {\n type: Math.floor(Math.random() * SHAPES.length),\n rotation: 0,\n x: Math.floor(COLS / 2) - 1,\n y: 0,\n };\n }\n\n private spawnPiece(): void {\n this.canHold = true;\n this.current = { ...this.next };\n this.next = this.randomPiece();\n this.current.x = Math.floor(COLS / 2) - 1;\n this.current.y = 0;\n\n if (!this.isValid(this.current)) {\n this.isGameOver = true;\n this.onGameOver(this.score);\n }\n }\n\n private getCells(piece: Piece): [number, number][] {\n const shape = SHAPES[piece.type];\n const rot = shape[piece.rotation % shape.length];\n return rot.map(([r, c]) => [piece.y + r, piece.x + c]);\n }\n\n private isValid(piece: Piece): boolean {\n for (const [r, c] of this.getCells(piece)) {\n if (c < 0 || c >= COLS || r >= ROWS) return false;\n if (r >= 0 && this.board[r][c] !== -1) return false;\n }\n return true;\n }\n\n private lock(): void {\n for (const [r, c] of this.getCells(this.current)) {\n if (r >= 0 && r < ROWS && c >= 0 && c < COLS) {\n this.board[r][c] = this.current.type;\n }\n }\n this.clearLines();\n this.spawnPiece();\n }\n\n private clearLines(): void {\n let cleared = 0;\n for (let r = ROWS - 1; r >= 0; r--) {\n if (this.board[r].every((c) => c !== -1)) {\n this.board.splice(r, 1);\n this.board.unshift(Array(COLS).fill(-1));\n cleared++;\n r++; // re-check same row\n }\n }\n\n if (cleared > 0) {\n const multipliers = [0, 100, 300, 500, 800];\n this.score += (multipliers[cleared] || 800) * this.level;\n this.lines += cleared;\n this.onScore(this.score);\n\n const newLevel = Math.floor(this.lines / 10) + 1;\n if (newLevel !== this.level) {\n this.level = newLevel;\n this.dropInterval = Math.max(MIN_DROP, INITIAL_DROP - (this.level - 1) * LEVEL_SPEED_DROP);\n this.onSpeedUpdate?.(Math.round(1000 / this.getEffectiveDropInterval()));\n }\n }\n }\n\n private getGhostY(): number {\n let ghostY = this.current.y;\n const test = { ...this.current };\n while (true) {\n test.y = ghostY + 1;\n if (!this.isValid(test)) break;\n ghostY++;\n }\n return ghostY;\n }\n\n private holdPiece(): void {\n if (!this.canHold) return;\n\n const spawnX = Math.floor(COLS / 2) - 1;\n\n if (this.heldPiece === null) {\n this.heldPiece = { type: this.current.type, rotation: this.current.rotation };\n this.current = { ...this.next, x: spawnX, y: 0 };\n this.next = this.randomPiece();\n } else {\n const temp = this.heldPiece;\n this.heldPiece = { type: this.current.type, rotation: this.current.rotation };\n this.current = {\n type: temp.type,\n rotation: temp.rotation,\n x: spawnX,\n y: 0,\n };\n }\n this.canHold = false;\n this.lastDrop = performance.now();\n }\n\n private handleKey(e: KeyboardEvent): void {\n if (this.isGameOver) return;\n\n const key = e.key.toLowerCase();\n let handled = true;\n\n if (key === \"arrowleft\" || key === \"a\") {\n this.tryMove(-1, 0);\n } else if (key === \"arrowright\" || key === \"d\") {\n this.tryMove(1, 0);\n } else if (key === \"arrowdown\" || key === \"s\") {\n this.tryMove(0, 1);\n this.lastDrop = performance.now();\n } else if (key === \"arrowup\" || key === \"w\") {\n this.tryRotate();\n } else if (key === \" \") {\n this.hardDrop();\n } else if (key === \"c\") {\n this.holdPiece();\n } else if (key === \"z\") {\n const now = performance.now();\n if (now > this.slowTimeCooldownEnd) {\n this.slowTimeEnd = now + SLOW_TIME_DURATION;\n this.slowTimeCooldownEnd = now + SLOW_TIME_COOLDOWN;\n this.wasSlowTime = true;\n this.onSpeedUpdate?.(Math.round(1000 / this.getEffectiveDropInterval()));\n }\n e.preventDefault();\n } else {\n handled = false;\n }\n\n if (handled) e.preventDefault();\n }\n\n private tryMove(dx: number, dy: number): boolean {\n const test = { ...this.current, x: this.current.x + dx, y: this.current.y + dy };\n if (this.isValid(test)) {\n this.current = test;\n return true;\n }\n return false;\n }\n\n private tryRotate(): void {\n const shape = SHAPES[this.current.type];\n const nextRot = (this.current.rotation + 1) % shape.length;\n const test = { ...this.current, rotation: nextRot };\n\n // Try basic rotation\n if (this.isValid(test)) {\n this.current = test;\n return;\n }\n\n // Wall kick attempts\n for (const dx of [-1, 1, -2, 2]) {\n const kicked = { ...test, x: test.x + dx };\n if (this.isValid(kicked)) {\n this.current = kicked;\n return;\n }\n }\n }\n\n private hardDrop(): void {\n this.current.y = this.getGhostY();\n this.lock();\n this.lastDrop = performance.now();\n }\n\n private getEffectiveDropInterval(): number {\n const now = performance.now();\n if (now < this.slowTimeEnd) {\n return Math.ceil(this.dropInterval * SLOW_TIME_MULTIPLIER);\n }\n return this.dropInterval;\n }\n\n private loop(now: number): void {\n if (this.isGameOver) return;\n\n // Detect slow-time state transitions\n const isSlowTime = now < this.slowTimeEnd;\n if (this.wasSlowTime && !isSlowTime) {\n this.wasSlowTime = false;\n this.onSpeedUpdate?.(Math.round(1000 / this.dropInterval));\n }\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 const bw = COLS * CELL;\n const h = ROWS * CELL;\n if (isSlowTime) {\n for (let i = 0; i < 2; i++) {\n this.particles.push({\n x: Math.random() * bw,\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 const effectiveInterval = this.getEffectiveDropInterval();\n if (now - this.lastDrop >= effectiveInterval) {\n if (!this.tryMove(0, 1)) {\n this.lock();\n }\n this.lastDrop = now;\n }\n\n this.render();\n this.animFrameId = requestAnimationFrame((t) => this.loop(t));\n }\n\n private render(): void {\n const ctx = this.ctx;\n const bw = COLS * CELL;\n const h = ROWS * CELL;\n const totalW = bw + SIDEBAR;\n\n // Background\n ctx.fillStyle = \"#080810\";\n ctx.fillRect(0, 0, totalW, h);\n\n // Grid\n ctx.strokeStyle = \"rgba(30, 30, 60, 0.25)\";\n ctx.lineWidth = 0.5;\n for (let x = 0; x <= COLS; x++) {\n ctx.beginPath();\n ctx.moveTo(x * CELL, 0);\n ctx.lineTo(x * CELL, h);\n ctx.stroke();\n }\n for (let y = 0; y <= ROWS; y++) {\n ctx.beginPath();\n ctx.moveTo(0, y * CELL);\n ctx.lineTo(bw, y * CELL);\n ctx.stroke();\n }\n\n // Locked blocks\n for (let r = 0; r < ROWS; r++) {\n for (let c = 0; c < COLS; c++) {\n if (this.board[r][c] !== -1) {\n this.drawCell(c, r, this.board[r][c], 1.0);\n }\n }\n }\n\n // Ghost piece\n const ghostY = this.getGhostY();\n const ghostPiece = { ...this.current, y: ghostY };\n for (const [r, c] of this.getCells(ghostPiece)) {\n if (r >= 0) {\n this.drawCell(c, r, this.current.type, 0.15);\n }\n }\n\n // Current piece\n for (const [r, c] of this.getCells(this.current)) {\n if (r >= 0) {\n this.drawCell(c, r, this.current.type, 1.0);\n }\n }\n\n // Slow-time particles\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 // Sidebar separator\n ctx.fillStyle = \"#1a1a30\";\n ctx.fillRect(bw, 0, 1, h);\n\n // Sidebar background\n ctx.fillStyle = \"#0a0a14\";\n ctx.fillRect(bw + 1, 0, SIDEBAR - 1, h);\n\n // Next piece label\n ctx.fillStyle = \"#606080\";\n ctx.font = \"7px 'Press Start 2P'\";\n ctx.fillText(\"NEXT\", bw + SIDEBAR_PAD_X, SIDEBAR_NEXT_LABEL_Y);\n\n // Next piece preview\n const nextShape = SHAPES[this.next.type][0];\n const previewX = bw + SIDEBAR_PREVIEW_INSET;\n for (const [r, c] of nextShape) {\n ctx.fillStyle = COLORS[this.next.type];\n ctx.fillRect(\n previewX + c * PREVIEW_CELL,\n SIDEBAR_NEXT_PREVIEW_Y + r * PREVIEW_CELL,\n PREVIEW_CELL - 1,\n PREVIEW_CELL - 1,\n );\n }\n\n // Hold piece label and preview\n ctx.fillStyle = \"#606080\";\n ctx.font = \"7px 'Press Start 2P'\";\n ctx.fillText(\"HOLD\", bw + SIDEBAR_PAD_X, SIDEBAR_HOLD_LABEL_Y);\n if (this.heldPiece !== null) {\n const holdShape = SHAPES[this.heldPiece.type][this.heldPiece.rotation % SHAPES[this.heldPiece.type].length];\n const holdPreviewX = bw + SIDEBAR_PREVIEW_INSET;\n for (const [r, c] of holdShape) {\n ctx.fillStyle = COLORS[this.heldPiece.type];\n ctx.fillRect(\n holdPreviewX + c * PREVIEW_CELL,\n SIDEBAR_HOLD_PREVIEW_Y + r * PREVIEW_CELL,\n PREVIEW_CELL - 1,\n PREVIEW_CELL - 1,\n );\n }\n }\n\n // Level\n ctx.fillStyle = \"#606080\";\n ctx.font = \"6px 'Press Start 2P'\";\n ctx.fillText(\"LEVEL\", bw + SIDEBAR_PAD_X, SIDEBAR_LEVEL_LABEL_Y);\n ctx.fillStyle = \"#00d4ff\";\n ctx.font = \"10px 'Press Start 2P'\";\n ctx.fillText(`${this.level}`, bw + SIDEBAR_PAD_X, SIDEBAR_LEVEL_VALUE_Y);\n\n // Lines\n ctx.fillStyle = \"#606080\";\n ctx.font = \"6px 'Press Start 2P'\";\n ctx.fillText(\"LINES\", bw + SIDEBAR_PAD_X, SIDEBAR_LINES_LABEL_Y);\n ctx.fillStyle = \"#bf00ff\";\n ctx.font = \"10px 'Press Start 2P'\";\n ctx.fillText(`${this.lines}`, bw + SIDEBAR_PAD_X, SIDEBAR_LINES_VALUE_Y);\n }\n\n private drawCell(col: number, row: number, type: number, alpha: number): void {\n const ctx = this.ctx;\n const x = col * CELL;\n const y = row * CELL;\n\n if (alpha < 1) {\n ctx.globalAlpha = alpha;\n }\n\n ctx.fillStyle = COLORS[type];\n ctx.fillRect(x + 1, y + 1, CELL - 2, CELL - 2);\n\n // Inner highlight\n ctx.fillStyle = `rgba(255,255,255,${0.15 * alpha})`;\n ctx.fillRect(x + 1, y + 1, CELL - 2, 2);\n ctx.fillRect(x + 1, y + 1, 2, CELL - 2);\n\n // Inner shadow\n ctx.fillStyle = `rgba(0,0,0,${0.2 * alpha})`;\n ctx.fillRect(x + 1, y + CELL - 3, CELL - 2, 2);\n ctx.fillRect(x + CELL - 3, y + 1, 2, CELL - 2);\n\n if (alpha < 1) {\n ctx.globalAlpha = 1;\n }\n }\n\n destroy(): void {\n this.isGameOver = true;\n if (this.animFrameId !== null) {\n cancelAnimationFrame(this.animFrameId);\n this.animFrameId = null;\n }\n document.removeEventListener(\"keydown\", this.keyHandler);\n }\n}\n",[],[152,241],"703dbefa-1c20-11f1-bed3-42dde27851f2","game-snake.ts","5afa7b52-1c19-11f1-884f-42dde27851f2",26,["D",1773106107254],"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",[],[152,249],["D",1773103064650],[179,180,181,182,183],[152],"5b0694aa-1c19-11f1-8838-42dde27851f2","routes.auth.ts","5b06955e-1c19-11f1-8838-42dde27851f2",7,["D",1773103065205],"import { Hono } from \"npm:hono@4.11.5\";\nimport { getOAuthUserData } from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport type { UserInfo } from \"../Shared/types.ts\";\n\nconst app = new Hono();\n\napp.get(\"/me\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n const user: UserInfo = {\n email: session?.user?.email ?? null,\n username: session?.user?.username ?? null,\n profileImageUrl: session?.user?.profileImageUrl ?? null,\n };\n return c.json(user);\n});\n\nexport default app;\n",[],[158,260],"705d36b8-1c20-11f1-91dd-42dde27851f2","routes.api.ts","5b0b54c2-1c19-11f1-a014-42dde27851f2",31,["D",1773106107435],"import { Hono } from \"npm:hono@4.11.5\";\nimport { getOAuthUserData } from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport { upsertUser, updateProfileImage } from \"./db.users.ts\";\nimport { saveScore, getLeaderboard, getPersonalBest } from \"./db.scores.ts\";\nimport { VALID_GAMES } from \"../Shared/config.ts\";\nimport type { SubmitScoreRequest } from \"../Shared/types.ts\";\n\nconst app = new Hono();\n\nconst MAX_SCORES: Record = {\n snake: 10000,\n tetris: 999999,\n};\n\napp.get(\"/scores/:game\", async (c) => {\n const game = c.req.param(\"game\");\n if (!VALID_GAMES.includes(game as any)) {\n return c.json({ error: \"Invalid game\" }, 400);\n }\n const leaderboard = await getLeaderboard(game);\n return c.json(leaderboard);\n});\n\napp.get(\"/scores/:game/me\", async (c) => {\n const game = c.req.param(\"game\");\n if (!VALID_GAMES.includes(game as any)) {\n return c.json({ error: \"Invalid game\" }, 400);\n }\n const session = await getOAuthUserData(c.req.raw);\n const email = session?.user?.email;\n if (!email) {\n return c.json({ error: \"Unauthorized\" }, 401);\n }\n const best = await getPersonalBest(game, email);\n return c.json(best);\n});\n\napp.post(\"/scores\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n const email = session?.user?.email;\n const username = session?.user?.username ?? null;\n const profileImageUrl = session?.user?.profileImageUrl ?? null;\n if (!email) {\n return c.json({ error: \"Unauthorized\" }, 401);\n }\n\n const body = (await c.req.json()) as SubmitScoreRequest;\n const { game, score } = body;\n\n if (!VALID_GAMES.includes(game as any)) {\n return c.json({ error: \"Invalid game\" }, 400);\n }\n if (typeof score !== \"number\" || score < 0 || !Number.isInteger(score)) {\n return c.json({ error: \"Invalid score\" }, 400);\n }\n const maxScore = MAX_SCORES[game] ?? 999999;\n if (score > maxScore) {\n return c.json({ error: \"Score exceeds maximum\" }, 400);\n }\n\n await upsertUser(email, username, profileImageUrl);\n await saveScore(game, email, username, score);\n\n return c.json({ success: true });\n});\n\napp.put(\"/profile/image\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n const email = session?.user?.email;\n if (!email) {\n return c.json({ error: \"Unauthorized\" }, 401);\n }\n\n const body = (await c.req.json()) as { profileImageUrl: string };\n const { profileImageUrl } = body;\n\n if (\n typeof profileImageUrl !== \"string\" ||\n (!profileImageUrl.startsWith(\"http://\") && !profileImageUrl.startsWith(\"https://\"))\n ) {\n return c.json({ error: \"Invalid URL\" }, 400);\n }\n\n await updateProfileImage(email, profileImageUrl);\n return c.json({ success: true });\n});\n\nexport default app;\n",[],[158,268],"7057e7ee-1c20-11f1-8344-42dde27851f2","db.users.ts","5b1a96ee-1c19-11f1-9123-42dde27851f2",30,["D",1773106107426],"import sqlite from \"https://esm.town/v/std/db/main.ts\";\nimport type { UserInfo } from \"../Shared/types.ts\";\nimport { USERS_TABLE } from \"../Shared/config.ts\";\n\nexport async function initializeUsersTable(): Promise {\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS ${USERS_TABLE} (\n email TEXT PRIMARY KEY,\n username TEXT,\n profileImageUrl TEXT\n )`);\n}\n\nexport async function upsertUser(\n email: string,\n username: string | null,\n profileImageUrl: string | null,\n): Promise {\n await sqlite.execute(\n `INSERT INTO ${USERS_TABLE} (email, username, profileImageUrl)\n VALUES (?, ?, ?)\n ON CONFLICT(email) DO UPDATE SET\n username = excluded.username,\n profileImageUrl = excluded.profileImageUrl`,\n [email, username, profileImageUrl],\n );\n}\n\nexport async function updateProfileImage(\n email: string,\n profileImageUrl: string,\n): Promise {\n await sqlite.execute(\n `UPDATE ${USERS_TABLE} SET profileImageUrl = ? WHERE email = ?`,\n [profileImageUrl, email],\n );\n}\n\nexport async function getUser(email: string): Promise {\n const result = await sqlite.execute(\n `SELECT * FROM ${USERS_TABLE} WHERE email = ?`,\n [email],\n );\n\n if (result.rows.length === 0) {\n return null;\n }\n\n const row = result.rows[0] as any;\n return {\n email: row.email,\n username: row.username,\n profileImageUrl: row.profileImageUrl,\n };\n}\n",[],[158,276],"5b131a22-1c19-11f1-884f-42dde27851f2","db.scores.ts","5b131b08-1c19-11f1-884f-42dde27851f2",9,["D",1773103065285],"import sqlite from \"https://esm.town/v/std/db/main.ts\";\nimport type { ScoreEntry, PersonalBest } from \"../Shared/types.ts\";\nimport { SCORES_TABLE } from \"../Shared/config.ts\";\n\nexport async function initializeScoresTable(): Promise {\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS ${SCORES_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n game TEXT NOT NULL,\n email TEXT NOT NULL,\n username TEXT,\n score INTEGER NOT NULL,\n achieved_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`);\n}\n\nexport async function saveScore(\n game: string,\n email: string,\n username: string | null,\n score: number,\n): Promise {\n await sqlite.execute(\n `INSERT INTO ${SCORES_TABLE} (game, email, username, score) VALUES (?, ?, ?, ?)`,\n [game, email, username, score],\n );\n}\n\nexport async function getLeaderboard(\n game: string,\n limit: number = 10,\n): Promise {\n const result = await sqlite.execute(\n `SELECT id, game, email, username, score, achieved_at FROM ${SCORES_TABLE}\n WHERE game = ?\n ORDER BY score DESC\n LIMIT ?`,\n [game, limit],\n );\n\n return result.rows.map((row: any) => ({\n id: row.id,\n game: row.game,\n email: row.email,\n username: row.username,\n score: row.score,\n achievedAt: row.achieved_at,\n }));\n}\n\nexport async function getPersonalBest(\n game: string,\n email: string,\n): Promise {\n const result = await sqlite.execute(\n `SELECT game, score, achieved_at FROM ${SCORES_TABLE}\n WHERE game = ? AND email = ?\n ORDER BY score DESC\n LIMIT 1`,\n [game, email],\n );\n\n if (result.rows.length === 0) {\n return null;\n }\n\n const row = result.rows[0] as any;\n return {\n game: row.game,\n score: row.score,\n achievedAt: row.achieved_at,\n };\n}\n",[],[158,284],["D",1773103064759],[174,175,176,177],[158],["D",1773102983877],["D",1789521041830],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":52,"_99":100,"_101":24},{"_13":84,"_31":85,"_40":39,"_86":41,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":42,"_93":94},"ctx",{"_77":-5,"_122":332,"_333":334,"_335":336,"_337":24,"_338":24,"_339":24,"_340":120,"_341":-5,"_342":-7,"_343":-7,"_344":58,"_345":24,"_346":24,"_347":-5,"_348":24,"_349":24,"_350":24,"_351":-5},"ENV",{"_303":304,"_305":306,"_307":85,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331},"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"]

SELECTYOUR GAME

HIGH SCORES

GAME OVER

CHANGE AVATAR

SELECT
YOUR GAME

Diff · v32