[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_291":292,"_293":294},"routes/_app.x.$handle.$name",{"_99":98,"_32":46,"_107":89,"_27":54,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":-5,"_119":-5,"_120":25,"_121":122,"_123":124,"_125":-5,"_126":-5,"_127":128},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":-5,"_58":25,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":25},"version",28,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","FRONTEND/game-tetris.ts","latestPath","fileId","5b2d27b4-1c19-11f1-b34b-42dde27851f2","name","game-tetris.ts","fileType","script","content","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\nexport class TetrisGame {\n private canvas: HTMLCanvasElement;\n private ctx: CanvasRenderingContext2D;\n private onScore: (score: number) => void;\n private onGameOver: (score: number) => 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\n constructor(\n canvas: HTMLCanvasElement,\n onScore: (score: number) => void,\n onGameOver: (score: number) => void,\n ) {\n this.canvas = canvas;\n this.ctx = canvas.getContext(\"2d\")!;\n this.onScore = onScore;\n this.onGameOver = onGameOver;\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 }\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 }\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 }\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 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 // 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","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","createdAt",["D",1773106107315],"branchVersion","branchId","2a8d98aa-1c19-11f1-b7f6-42dde27851f2","id","2a8d2064-1c19-11f1-b7f6-42dde27851f2","arcade-games",["D",1773102983877],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","1601447d-3c17-4580-a190-f6b82a1eb8e2","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","8789b31e-4477-4b2d-ae0d-cc5f2132061a","tursoName","2a8d20641c1911f1b7f642dde27851f2","tursoHostname","2a8d20641c1911f1b7f642dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789521041830],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_106":102},"org",{"_99":98,"_100":-5,"_101":102,"_18":56,"_103":104,"_105":25},"branch",{"_13":88,"_32":89,"_44":43,"_90":45,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":46,"_97":98},"isOwned",54,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","arfan","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJ3WWZ5Sm91SWx1eXRNRTZDazIwbnFiUVV4WiJ9","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_44":45,"_32":46,"_39":286,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":-5,"_58":25,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":287,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":288,"_83":289,"_85":290,"_87":25},"tree",[174,179,185,188],"files",[174,175,176,177,178,179,180,181,182,183,184,185,186,187,188],"counts",{"_164":62,"_165":155,"_166":62,"_167":168,"_169":170},"contents",[129,130,131,132],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_44":158,"_32":159,"_30":160,"_136":-5,"_42":43,"_41":161,"_138":124,"_39":162,"_13":62,"_34":150,"_36":-5,"_24":25,"_142":-5,"_27":163},{"_44":152,"_32":153,"_30":154,"_136":-5,"_42":43,"_41":155,"_138":124,"_39":156,"_13":62,"_34":150,"_36":-5,"_24":25,"_142":-5,"_27":157},{"_44":145,"_32":146,"_30":147,"_136":-5,"_42":43,"_41":148,"_138":124,"_39":149,"_13":62,"_34":150,"_36":-5,"_24":25,"_142":-5,"_27":151},{"_44":133,"_32":134,"_30":135,"_136":-5,"_42":43,"_41":137,"_138":124,"_39":139,"_13":62,"_34":140,"_36":141,"_24":25,"_142":143,"_27":144},"5b3a2522-1c19-11f1-9123-42dde27851f2","app.http.ts","5b3a25f4-1c19-11f1-9123-42dde27851f2","parentId",14,"latest",["D",1773103065469],"http","import { Hono } from \"npm:hono@4.11.5\";\nimport { oauthMiddleware } from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nimport { initializeUsersTable } from \"./BACKEND/db.users.ts\";\nimport { initializeScoresTable } from \"./BACKEND/db.scores.ts\";\nimport authRoutes from \"./BACKEND/routes.auth.ts\";\nimport apiRoutes from \"./BACKEND/routes.api.ts\";\n\nawait initializeUsersTable();\nawait initializeScoresTable();\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const url = new URL(\"./FRONTEND/index.html\", import.meta.url);\n const response = await fetch(url);\n const html = await response.text();\n return c.html(html);\n});\n\napp.get(\"/FRONTEND/*\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/Shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n\napp.route(\"/api\", apiRoutes);\napp.route(\"/auth\", authRoutes);\n\napp.onError((err: Error) => {\n throw err;\n});\n\nexport default oauthMiddleware(app.fetch);\n","label","arfan-arcade-games",[134],"5adcfc12-1c19-11f1-a014-42dde27851f2","Shared","5adcfcee-1c19-11f1-a014-42dde27851f2",3,["D",1773103064934],"directory",[146],"5ab24d14-1c19-11f1-9226-42dde27851f2","FRONTEND","5ab24e0e-1c19-11f1-9226-42dde27851f2",1,["D",1773103064650],[153],"5ac24412-1c19-11f1-9226-42dde27851f2","BACKEND","5ac244d0-1c19-11f1-9226-42dde27851f2",2,["D",1773103064759],[159],"pulls","branches","forks","envVars",{"_171":62,"_173":62},"connections",{"_171":62,"_172":62},"count","unfilledCount","emptyCount",{"_44":158,"_32":159,"_30":160,"_136":-5,"_42":43,"_41":161,"_138":124,"_39":283,"_13":62,"_34":150,"_36":-5,"_24":25,"_142":-5,"_190":284,"_27":285},{"_44":275,"_32":276,"_30":277,"_136":160,"_42":43,"_41":278,"_138":124,"_39":279,"_13":62,"_34":35,"_36":280,"_24":25,"_142":-5,"_190":281,"_27":282},{"_44":267,"_32":268,"_30":269,"_136":160,"_42":43,"_41":270,"_138":25,"_39":271,"_13":62,"_34":35,"_36":272,"_24":25,"_142":-5,"_190":273,"_27":274},{"_44":259,"_32":260,"_30":261,"_136":160,"_42":43,"_41":262,"_138":25,"_39":263,"_13":62,"_34":35,"_36":264,"_24":25,"_142":-5,"_190":265,"_27":266},{"_44":251,"_32":252,"_30":253,"_136":160,"_42":43,"_41":254,"_138":124,"_39":255,"_13":62,"_34":35,"_36":256,"_24":25,"_142":-5,"_190":257,"_27":258},{"_44":152,"_32":153,"_30":154,"_136":-5,"_42":43,"_41":155,"_138":124,"_39":248,"_13":62,"_34":150,"_36":-5,"_24":25,"_142":-5,"_190":249,"_27":250},{"_44":240,"_32":241,"_30":242,"_136":154,"_42":43,"_41":243,"_138":124,"_39":244,"_13":148,"_34":35,"_36":245,"_24":25,"_142":-5,"_190":246,"_27":247},{"_44":236,"_32":33,"_30":31,"_136":154,"_42":43,"_41":14,"_138":124,"_39":237,"_13":148,"_34":35,"_36":38,"_24":25,"_142":-5,"_190":238,"_27":239},{"_44":228,"_32":229,"_30":230,"_136":154,"_42":43,"_41":231,"_138":25,"_39":232,"_13":161,"_34":20,"_36":233,"_24":25,"_142":-5,"_190":234,"_27":235},{"_44":220,"_32":221,"_30":222,"_136":154,"_42":43,"_41":223,"_138":25,"_39":224,"_13":161,"_34":35,"_36":225,"_24":25,"_142":-5,"_190":226,"_27":227},{"_44":212,"_32":213,"_30":214,"_136":154,"_42":43,"_41":215,"_138":25,"_39":216,"_13":161,"_34":20,"_36":217,"_24":25,"_142":-5,"_190":218,"_27":219},{"_44":145,"_32":146,"_30":147,"_136":-5,"_42":43,"_41":148,"_138":124,"_39":209,"_13":62,"_34":150,"_36":-5,"_24":25,"_142":-5,"_190":210,"_27":211},{"_44":201,"_32":202,"_30":203,"_136":147,"_42":43,"_41":204,"_138":25,"_39":205,"_13":155,"_34":35,"_36":206,"_24":25,"_142":-5,"_190":207,"_27":208},{"_44":193,"_32":194,"_30":195,"_136":147,"_42":43,"_41":196,"_138":124,"_39":197,"_13":62,"_34":35,"_36":198,"_24":25,"_142":-5,"_190":199,"_27":200},{"_44":133,"_32":134,"_30":135,"_136":-5,"_42":43,"_41":137,"_138":124,"_39":189,"_13":62,"_34":140,"_36":141,"_24":25,"_142":143,"_190":191,"_27":192},["D",1773103065469],"children",[],[134],"5b1f457c-1c19-11f1-a014-42dde27851f2","types.ts","5b1f4626-1c19-11f1-a014-42dde27851f2",11,["D",1773103065332],"export interface UserInfo {\n email: string | null;\n username: string | null;\n profileImageUrl: string | null;\n}\n\nexport interface ScoreEntry {\n id: number;\n game: string;\n email: string;\n username: string | null;\n score: number;\n achievedAt: string;\n}\n\nexport interface PersonalBest {\n game: string;\n score: number;\n achievedAt: string;\n}\n\nexport interface SubmitScoreRequest {\n game: string;\n score: number;\n}\n",[],[146,194],"1155e7ee-1c1d-11f1-9b6c-42dde27851f2","config.ts","5b32af22-1c19-11f1-884f-42dde27851f2",24,["D",1773104659372],"export const APP_NAME = \"ARCADE\";\nexport const VERSION = \"1.0.0\";\nexport const USERS_TABLE = \"arcade_users_v1\";\nexport const SCORES_TABLE = \"arcade_scores_v1\";\nexport const VALID_GAMES = [\"snake\", \"tetris\"] as const;\nexport type GameName = (typeof VALID_GAMES)[number];\nexport const SLOW_TIME_DURATION = 4000;\nexport const SLOW_TIME_COOLDOWN = 15000;\nexport const SLOW_TIME_MULTIPLIER = 2.5;\n",[],[146,202],["D",1773103064934],[186,187],[146],"704539b4-1c20-11f1-bc7f-42dde27851f2","styles.css","5b5e8476-1c19-11f1-92d7-42dde27851f2",27,["D",1773106107235],":root {\n --bg-void: #050508;\n --bg-dark: #0a0a12;\n --bg-cabinet: #12121e;\n --bg-card: #16162a;\n --neon-pink: #ff2d95;\n --neon-blue: #00d4ff;\n --neon-green: #39ff14;\n --neon-yellow: #ffe600;\n --neon-purple: #bf00ff;\n --neon-orange: #ff6b00;\n --text-primary: #d0d0e0;\n --text-dim: #606080;\n --border-subtle: #1e1e3a;\n --font-pixel: \"Press Start 2P\", monospace;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml, body {\n width: 100%;\n min-height: 100vh;\n background: var(--bg-void);\n font-family: var(--font-pixel);\n color: var(--text-primary);\n font-size: 10px;\n line-height: 1.6;\n overflow-x: hidden;\n}\n\nbody {\n background:\n radial-gradient(ellipse at 50% 0%, rgba(0, 212, 255, 0.06) 0%, transparent 60%),\n radial-gradient(ellipse at 80% 100%, rgba(255, 45, 149, 0.04) 0%, transparent 50%),\n var(--bg-void);\n}\n\n/* CRT SCANLINE OVERLAY */\n.crt-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 9999;\n background: repeating-linear-gradient(\n 0deg,\n rgba(0, 0, 0, 0.12) 0px,\n rgba(0, 0, 0, 0.12) 1px,\n transparent 1px,\n transparent 3px\n );\n}\n\n/* APP CONTAINER */\n#app {\n max-width: 800px;\n margin: 0 auto;\n padding: 0 16px;\n}\n\n/* AUTH HEADER */\n#auth-header {\n padding: 20px 0;\n border-bottom: 1px solid var(--border-subtle);\n margin-bottom: 32px;\n}\n\n.header-inner {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n}\n\n.logo {\n font-size: 14px;\n color: var(--neon-pink);\n cursor: pointer;\n text-shadow:\n 0 0 8px var(--neon-pink),\n 0 0 20px rgba(255, 45, 149, 0.4);\n letter-spacing: 4px;\n transition: text-shadow 0.3s;\n}\n\n.logo:hover {\n text-shadow:\n 0 0 12px var(--neon-pink),\n 0 0 30px rgba(255, 45, 149, 0.6),\n 0 0 60px rgba(255, 45, 149, 0.3);\n}\n\n#auth-section {\n font-size: 8px;\n color: var(--text-dim);\n}\n\n#auth-section a {\n color: var(--neon-blue);\n text-decoration: none;\n transition: text-shadow 0.2s;\n}\n\n#auth-section a:hover {\n text-shadow: 0 0 8px var(--neon-blue);\n}\n\n.auth-user {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.auth-avatar {\n width: 28px;\n height: 28px;\n border-radius: 4px;\n border: 2px solid var(--neon-blue);\n box-shadow: 0 0 6px rgba(0, 212, 255, 0.3);\n}\n\n/* MARQUEE */\n.marquee {\n text-align: center;\n padding: 24px 0 40px;\n}\n\n.marquee-title {\n font-size: 28px;\n line-height: 1.4;\n color: var(--neon-yellow);\n text-shadow:\n 0 0 10px var(--neon-yellow),\n 0 0 30px rgba(255, 230, 0, 0.4),\n 0 0 60px rgba(255, 230, 0, 0.15);\n letter-spacing: 3px;\n animation: marquee-pulse 3s ease-in-out infinite;\n}\n\n@keyframes marquee-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.85; }\n}\n\n.marquee-sub {\n margin-top: 16px;\n font-size: 8px;\n color: var(--text-dim);\n letter-spacing: 3px;\n animation: blink-slow 2s step-end infinite;\n}\n\n@keyframes blink-slow {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0; }\n}\n\n/* GAME GRID */\n.game-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n margin-bottom: 48px;\n}\n\n@media (max-width: 500px) {\n .game-grid {\n grid-template-columns: 1fr;\n }\n}\n\n.game-card {\n background: var(--bg-card);\n border: 2px solid var(--border-subtle);\n border-radius: 4px;\n padding: 28px 20px;\n text-align: center;\n cursor: pointer;\n transition: all 0.25s ease;\n position: relative;\n overflow: hidden;\n}\n\n.game-card::before {\n content: \"\";\n position: absolute;\n inset: 0;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n.game-card--snake {\n border-color: rgba(57, 255, 20, 0.2);\n}\n\n.game-card--snake::before {\n background: radial-gradient(ellipse at center, rgba(57, 255, 20, 0.06) 0%, transparent 70%);\n}\n\n.game-card--snake:hover {\n border-color: var(--neon-green);\n box-shadow:\n 0 0 15px rgba(57, 255, 20, 0.15),\n inset 0 0 30px rgba(57, 255, 20, 0.03);\n transform: translateY(-2px);\n}\n\n.game-card--tetris {\n border-color: rgba(191, 0, 255, 0.2);\n}\n\n.game-card--tetris::before {\n background: radial-gradient(ellipse at center, rgba(191, 0, 255, 0.06) 0%, transparent 70%);\n}\n\n.game-card--tetris:hover {\n border-color: var(--neon-purple);\n box-shadow:\n 0 0 15px rgba(191, 0, 255, 0.15),\n inset 0 0 30px rgba(191, 0, 255, 0.03);\n transform: translateY(-2px);\n}\n\n.game-card:hover::before {\n opacity: 1;\n}\n\n.game-card__icon {\n font-size: 40px;\n margin-bottom: 16px;\n filter: saturate(1.2);\n}\n\n.game-card__title {\n font-size: 16px;\n margin-bottom: 12px;\n letter-spacing: 3px;\n}\n\n.game-card--snake .game-card__title {\n color: var(--neon-green);\n text-shadow: 0 0 8px rgba(57, 255, 20, 0.5);\n}\n\n.game-card--tetris .game-card__title {\n color: var(--neon-purple);\n text-shadow: 0 0 8px rgba(191, 0, 255, 0.5);\n}\n\n.game-card__desc {\n font-size: 7px;\n color: var(--text-dim);\n line-height: 2;\n margin-bottom: 20px;\n}\n\n.game-card__prompt {\n font-size: 7px;\n color: var(--text-dim);\n letter-spacing: 2px;\n animation: blink-slow 2s step-end infinite;\n}\n\n.game-card:hover .game-card__prompt {\n color: var(--text-primary);\n animation: none;\n}\n\n/* SECTION TITLE */\n.section-title {\n font-size: 12px;\n text-align: center;\n color: var(--neon-blue);\n text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);\n letter-spacing: 3px;\n margin-bottom: 20px;\n}\n\n/* LEADERBOARD TABS */\n.leaderboard-tabs {\n display: flex;\n justify-content: center;\n gap: 8px;\n margin-bottom: 16px;\n}\n\n.tab-btn {\n font-family: var(--font-pixel);\n font-size: 8px;\n padding: 8px 16px;\n background: var(--bg-cabinet);\n border: 1px solid var(--border-subtle);\n color: var(--text-dim);\n cursor: pointer;\n transition: all 0.2s;\n letter-spacing: 1px;\n}\n\n.tab-btn.active {\n color: var(--neon-blue);\n border-color: var(--neon-blue);\n box-shadow: 0 0 8px rgba(0, 212, 255, 0.2);\n}\n\n.tab-btn:hover {\n color: var(--text-primary);\n border-color: var(--text-dim);\n}\n\n/* LEADERBOARD TABLE */\n.leaderboard-preview {\n padding-bottom: 40px;\n}\n\n.lb-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 8px;\n}\n\n.lb-table th {\n color: var(--text-dim);\n text-align: left;\n padding: 8px 12px;\n border-bottom: 1px solid var(--border-subtle);\n font-weight: normal;\n letter-spacing: 1px;\n}\n\n.lb-table td {\n padding: 10px 12px;\n border-bottom: 1px solid rgba(30, 30, 58, 0.5);\n}\n\n.lb-table tr:hover td {\n background: rgba(255, 255, 255, 0.02);\n}\n\n.lb-rank {\n width: 40px;\n font-size: 10px;\n}\n\n.lb-rank--1 { color: var(--neon-yellow); text-shadow: 0 0 6px rgba(255, 230, 0, 0.5); }\n.lb-rank--2 { color: #c0c0c0; text-shadow: 0 0 6px rgba(192, 192, 192, 0.4); }\n.lb-rank--3 { color: var(--neon-orange); text-shadow: 0 0 6px rgba(255, 107, 0, 0.4); }\n\n.lb-score {\n text-align: right;\n color: var(--neon-green);\n font-size: 9px;\n}\n\n.lb-empty {\n text-align: center;\n color: var(--text-dim);\n padding: 24px;\n font-size: 8px;\n}\n\n.lb-self td {\n background: rgba(0, 212, 255, 0.05);\n}\n\n/* GAME VIEW */\n.game-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 0 16px;\n gap: 12px;\n}\n\n.btn-back {\n font-family: var(--font-pixel);\n font-size: 8px;\n padding: 8px 12px;\n background: none;\n border: 1px solid var(--border-subtle);\n color: var(--text-dim);\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.btn-back:hover {\n color: var(--text-primary);\n border-color: var(--text-dim);\n}\n\n.game-view-title {\n font-size: 14px;\n letter-spacing: 3px;\n}\n\n.game-header-stats {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 4px;\n}\n\n.game-score {\n font-size: 10px;\n color: var(--neon-green);\n text-shadow: 0 0 6px rgba(57, 255, 20, 0.4);\n min-width: 120px;\n text-align: right;\n}\n\n.game-speed {\n font-size: 8px;\n color: var(--neon-blue);\n text-shadow: 0 0 4px rgba(0, 212, 255, 0.4);\n}\n\n.game-slow-status {\n font-size: 7px;\n color: var(--text-dim);\n letter-spacing: 1px;\n}\n\n.game-slow-status--ready {\n color: var(--neon-green);\n text-shadow: 0 0 4px rgba(57, 255, 20, 0.4);\n}\n\n.game-slow-status--active {\n color: var(--neon-blue);\n text-shadow: 0 0 6px rgba(0, 212, 255, 0.6);\n animation: slow-pulse 0.6s ease-in-out infinite;\n}\n\n.game-slow-status--cooldown {\n color: var(--text-dim);\n}\n\n@keyframes slow-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n/* CANVAS */\n.game-arena {\n display: flex;\n justify-content: center;\n padding: 8px 0;\n}\n\n.canvas-bezel {\n background: #000;\n padding: 6px;\n border: 3px solid #1a1a30;\n border-radius: 2px;\n box-shadow:\n 0 0 20px rgba(0, 0, 0, 0.8),\n inset 0 0 10px rgba(0, 0, 0, 1),\n 0 0 40px rgba(0, 212, 255, 0.04);\n}\n\ncanvas {\n display: block;\n image-rendering: pixelated;\n}\n\n.controls-hint {\n text-align: center;\n font-size: 7px;\n color: var(--text-dim);\n padding: 16px 0;\n letter-spacing: 1px;\n}\n\n/* GAME OVER OVERLAY */\n.game-over-overlay {\n position: fixed;\n inset: 0;\n background: rgba(5, 5, 8, 0.85);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 100;\n animation: fade-in 0.3s ease;\n}\n\n@keyframes fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.game-over-box {\n background: var(--bg-dark);\n border: 2px solid var(--neon-pink);\n box-shadow: 0 0 30px rgba(255, 45, 149, 0.2);\n padding: 40px;\n text-align: center;\n max-width: 400px;\n width: 90%;\n}\n\n.game-over-title {\n font-size: 20px;\n color: var(--neon-pink);\n text-shadow:\n 0 0 10px var(--neon-pink),\n 0 0 30px rgba(255, 45, 149, 0.4);\n margin-bottom: 20px;\n letter-spacing: 4px;\n}\n\n.game-over-score {\n font-size: 14px;\n color: var(--neon-yellow);\n text-shadow: 0 0 8px rgba(255, 230, 0, 0.4);\n margin-bottom: 8px;\n}\n\n.game-over-best {\n font-size: 8px;\n color: var(--neon-green);\n margin-bottom: 28px;\n min-height: 16px;\n}\n\n.game-over-actions {\n display: flex;\n gap: 12px;\n justify-content: center;\n flex-wrap: wrap;\n}\n\n/* ARCADE BUTTONS */\n.btn-arcade {\n font-family: var(--font-pixel);\n font-size: 9px;\n padding: 12px 20px;\n background: var(--neon-pink);\n color: #fff;\n border: none;\n cursor: pointer;\n letter-spacing: 1px;\n transition: all 0.2s;\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);\n}\n\n.btn-arcade:hover {\n box-shadow: 0 0 15px rgba(255, 45, 149, 0.5);\n transform: translateY(-1px);\n}\n\n.btn-arcade--alt {\n background: transparent;\n border: 2px solid var(--neon-blue);\n color: var(--neon-blue);\n}\n\n.btn-arcade--alt:hover {\n box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);\n}\n\n/* FULL LEADERBOARD VIEW */\n.leaderboard-full {\n max-width: 600px;\n margin: 0 auto;\n padding: 16px 0 40px;\n}\n\n.personal-best-section {\n text-align: center;\n padding: 16px;\n margin-bottom: 20px;\n border: 1px solid var(--border-subtle);\n background: var(--bg-cabinet);\n font-size: 8px;\n}\n\n.personal-best-section .pb-label {\n color: var(--text-dim);\n margin-bottom: 4px;\n}\n\n.personal-best-section .pb-score {\n font-size: 14px;\n color: var(--neon-yellow);\n text-shadow: 0 0 8px rgba(255, 230, 0, 0.4);\n}\n\n/* LOADING / EMPTY */\n.loading-text {\n text-align: center;\n color: var(--text-dim);\n font-size: 8px;\n padding: 20px;\n animation: blink-slow 2s step-end infinite;\n}\n\n/* RESPONSIVE */\n@media (max-width: 500px) {\n .marquee-title {\n font-size: 18px;\n }\n\n .game-header {\n flex-wrap: wrap;\n }\n\n .game-score {\n order: -1;\n width: 100%;\n text-align: center;\n min-width: auto;\n }\n\n .game-over-box {\n padding: 24px 16px;\n }\n\n .canvas-bezel {\n max-width: calc(100vw - 50px);\n overflow: hidden;\n }\n\n canvas {\n max-width: 100%;\n height: auto !important;\n }\n}\n\n/* AVATAR MODAL */\n.auth-avatar--clickable {\n cursor: pointer;\n transition: box-shadow 0.2s;\n}\n\n.auth-avatar--clickable:hover {\n box-shadow: 0 0 12px rgba(0, 212, 255, 0.6);\n}\n\n.avatar-modal-box {\n max-width: 340px;\n}\n\n.avatar-preview-container {\n display: flex;\n justify-content: center;\n margin-bottom: 20px;\n}\n\n.avatar-preview {\n width: 80px;\n height: 80px;\n border-radius: 4px;\n border: 2px solid var(--neon-blue);\n box-shadow: 0 0 8px rgba(0, 212, 255, 0.3);\n object-fit: cover;\n}\n\n.arcade-input {\n font-family: var(--font-pixel);\n font-size: 8px;\n width: 100%;\n padding: 10px 12px;\n background: var(--bg-void);\n border: 2px solid var(--border-subtle);\n color: var(--text-primary);\n outline: none;\n margin-bottom: 20px;\n transition: border-color 0.2s;\n}\n\n.arcade-input:focus {\n border-color: var(--neon-blue);\n box-shadow: 0 0 8px rgba(0, 212, 255, 0.2);\n}\n\n.arcade-input::placeholder {\n color: var(--text-dim);\n}\n",[],[153,213],"113b3d18-1c1d-11f1-b780-42dde27851f2","script.ts","5aff238c-1c19-11f1-8ef6-42dde27851f2",21,["D",1773104659354],"import type { UserInfo, ScoreEntry, PersonalBest } from \"../Shared/types.ts\";\nimport type { GameName } from \"../Shared/config.ts\";\nimport { SnakeGame } from \"./game-snake.ts\";\nimport { TetrisGame } from \"./game-tetris.ts\";\n\n// State\nlet currentUser: UserInfo | null = null;\nlet currentGame: GameName | null = null;\nlet activeGameInstance: SnakeGame | TetrisGame | null = null;\nlet lobbyLeaderboardTab: GameName = \"snake\";\nlet lastGameOverScore = 0;\nlet scoreSaved = false;\n\n// DOM refs\nconst authSection = document.getElementById(\"auth-section\")!;\nconst viewLobby = document.getElementById(\"view-lobby\")!;\nconst viewGame = document.getElementById(\"view-game\")!;\nconst viewLeaderboard = document.getElementById(\"view-leaderboard\")!;\nconst gameCanvas = document.getElementById(\"game-canvas\") as HTMLCanvasElement;\nconst gameTitle = document.getElementById(\"game-title\")!;\nconst gameScoreDisplay = document.getElementById(\"game-score-display\")!;\nconst gameOverOverlay = document.getElementById(\"game-over-overlay\")!;\nconst gameOverScore = document.getElementById(\"game-over-score\")!;\nconst gameOverBest = document.getElementById(\"game-over-best\")!;\nconst gameOverActions = document.getElementById(\"game-over-actions\")!;\nconst gameSpeedDisplay = document.getElementById(\"game-speed-display\");\nconst lobbyLeaderboard = document.getElementById(\"lobby-leaderboard\")!;\nconst lbTitle = document.getElementById(\"lb-title\")!;\nconst lbPersonalBest = document.getElementById(\"lb-personal-best\")!;\nconst lbTableContainer = document.getElementById(\"lb-table-container\")!;\nconst controlsHint = document.getElementById(\"game-controls-hint\")!;\n\nfunction escapeHtml(text: string | null | undefined): string {\n if (!text) return \"\";\n const div = document.createElement(\"div\");\n div.textContent = text;\n return div.innerHTML;\n}\n\n// AUTH\nasync function fetchUser(): Promise {\n try {\n const res = await fetch(\"/auth/me\");\n const user = (await res.json()) as UserInfo;\n currentUser = user.email ? user : null;\n renderAuth();\n } catch {\n currentUser = null;\n renderAuth();\n }\n}\n\nfunction renderAuth(): void {\n if (currentUser?.email) {\n let html = '';\n if (currentUser.profileImageUrl) {\n html += ` $\"\"$ `;\n }\n html += `${escapeHtml(currentUser.username || currentUser.email)}`;\n html += ` LOGOUT`;\n authSection.innerHTML = html;\n } else {\n authSection.innerHTML = 'LOGIN WITH VAL TOWN';\n }\n}\n\n// VIEWS\nfunction showView(view: \"lobby\" | \"game\" | \"leaderboard\"): void {\n viewLobby.style.display = view === \"lobby\" ? \"\" : \"none\";\n viewGame.style.display = view === \"game\" ? \"\" : \"none\";\n viewLeaderboard.style.display = view === \"leaderboard\" ? \"\" : \"none\";\n gameOverOverlay.style.display = \"none\";\n}\n\nfunction showLobby(): void {\n if (activeGameInstance) {\n activeGameInstance.destroy();\n activeGameInstance = null;\n }\n currentGame = null;\n showView(\"lobby\");\n loadLobbyLeaderboard(lobbyLeaderboardTab);\n}\n\nfunction showGame(game: GameName): void {\n if (activeGameInstance) {\n activeGameInstance.destroy();\n activeGameInstance = null;\n }\n\n currentGame = game;\n gameTitle.textContent = game.toUpperCase();\n gameScoreDisplay.textContent = \"SCORE: 0\";\n showView(\"game\");\n\n if (game === \"snake\") {\n controlsHint.innerHTML = \"ARROW KEYS / WASD TO MOVE — C TO SLOW TIME — ESC TO EXIT\";\n gameCanvas.width = 400;\n gameCanvas.height = 400;\n if (gameSpeedDisplay) {\n gameSpeedDisplay.style.display = \"\";\n gameSpeedDisplay.textContent = \"\";\n }\n activeGameInstance = new SnakeGame(gameCanvas, onScoreUpdate, onGameOver, onSpeedUpdate);\n } else {\n controlsHint.innerHTML = \"ARROWS TO MOVE — UP TO ROTATE — SPACE TO DROP — C TO HOLD — Z TO SLOW — ESC TO EXIT\";\n gameCanvas.width = 320;\n gameCanvas.height = 500;\n if (gameSpeedDisplay) gameSpeedDisplay.style.display = \"none\";\n activeGameInstance = new TetrisGame(gameCanvas, onScoreUpdate, onGameOver);\n }\n}\n\nfunction onScoreUpdate(score: number): void {\n gameScoreDisplay.textContent = `SCORE: ${score}`;\n}\n\nfunction onSpeedUpdate(speed: number): void {\n if (gameSpeedDisplay) gameSpeedDisplay.textContent = `SPEED: ${speed}/s`;\n}\n\nfunction onGameOver(score: number): void {\n lastGameOverScore = score;\n scoreSaved = false;\n gameOverScore.textContent = `SCORE: ${score}`;\n gameOverBest.textContent = \"\";\n\n // Render game-over actions: Save Score button only when logged in and score > 0\n let actionsHtml = '';\n if (currentUser?.email && currentGame && score > 0) {\n actionsHtml += '';\n } else if (!currentUser?.email) {\n gameOverBest.textContent = \"LOGIN TO SAVE SCORES\";\n }\n actionsHtml += '';\n gameOverActions.innerHTML = actionsHtml;\n\n gameOverOverlay.style.display = \"\";\n}\n\nasync function saveScore(): Promise {\n if (!currentUser?.email || !currentGame || lastGameOverScore <= 0 || scoreSaved) return;\n\n const btn = document.getElementById(\"btn-save-score\") as HTMLButtonElement | null;\n if (btn) {\n btn.disabled = true;\n btn.textContent = \"SAVING...\";\n }\n\n try {\n await fetch(\"/api/scores\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ game: currentGame, score: lastGameOverScore }),\n });\n\n scoreSaved = true;\n if (btn) {\n btn.textContent = \"SAVED!\";\n }\n\n const bestRes = await fetch(`/api/scores/${currentGame}/me`);\n const best = (await bestRes.json()) as PersonalBest | null;\n if (best) {\n if (best.score === lastGameOverScore) {\n gameOverBest.textContent = \"★ NEW PERSONAL BEST! ★\";\n } else {\n gameOverBest.textContent = `PERSONAL BEST: ${best.score}`;\n }\n }\n } catch {\n if (btn) {\n btn.disabled = false;\n btn.textContent = \"SAVE SCORE\";\n }\n }\n}\n\nfunction restartGame(): void {\n if (currentGame) {\n showGame(currentGame);\n }\n}\n\nfunction showLeaderboard(game?: GameName): void {\n const g = game || currentGame || \"snake\";\n lbTitle.textContent = `${g.toUpperCase()} LEADERBOARD`;\n showView(\"leaderboard\");\n loadFullLeaderboard(g);\n}\n\n// LEADERBOARD\nfunction renderLeaderboardTable(entries: ScoreEntry[], container: HTMLElement, showEmpty = true): void {\n if (entries.length === 0) {\n container.innerHTML = showEmpty\n ? '

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\" && activeGameInstance) {\n showLobby();\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};\n\n// Init\nfetchUser();\nloadLobbyLeaderboard(\"snake\");\n",[],[153,221],"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",[],[153,229],"704af69c-1c20-11f1-8344-42dde27851f2",["D",1773106107315],[],[153,33],"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",[],[153,241],["D",1773103064650],[180,181,182,183,184],[153],"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",[],[159,252],"5b0b53f0-1c19-11f1-a014-42dde27851f2","routes.api.ts","5b0b54c2-1c19-11f1-a014-42dde27851f2",8,["D",1773103065236],"import { Hono } from \"npm:hono@4.11.5\";\nimport { getOAuthUserData } from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport { upsertUser } 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\nexport default app;\n",[],[159,260],"5b1a95fe-1c19-11f1-9123-42dde27851f2","db.users.ts","5b1a96ee-1c19-11f1-9123-42dde27851f2",10,["D",1773103065299],"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 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",[],[159,268],"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",[],[159,276],["D",1773103064759],[175,176,177,178],[159],["D",1773102983877],["D",1789521041830],{"_99":98,"_106":102},{"_99":98,"_100":-5,"_101":102,"_18":56,"_103":104,"_105":25},{"_13":88,"_32":89,"_44":43,"_90":45,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":46,"_97":98},"ctx",{"_81":-5,"_126":324,"_325":326,"_327":328,"_329":25,"_330":25,"_331":25,"_332":124,"_333":-5,"_334":-7,"_335":-7,"_336":62,"_337":25,"_338":25,"_339":-5,"_340":25,"_341":25,"_342":25,"_343":-5},"ENV",{"_295":296,"_297":298,"_299":89,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323},"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 · v28