[{"_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",{"_98":97,"_32":45,"_106":88,"_27":53,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":25,"_120":121,"_122":123,"_124":-5,"_125":-5,"_126":127},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",25,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":20,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":20,"_35":36},"deleted",false,"deletedHere","path","FRONTEND/index.html","latestPath","fileId","5af2be3a-1c19-11f1-a7d6-42dde27851f2","name","index.html","fileType","content","\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 \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","createdAt",["D",1773106107213],"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",{"_98":97,"_105":101},"org",{"_98":97,"_99":-5,"_100":101,"_18":55,"_102":103,"_104":25},"branch",{"_13":87,"_32":88,"_43":42,"_89":44,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":45,"_96":97},"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",{"_43":44,"_32":45,"_38":286,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":287,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":288,"_82":289,"_84":290,"_86":25},"tree",[173,178,184,187],"files",[173,174,175,176,177,178,179,180,181,182,183,184,185,186,187],"counts",{"_163":61,"_164":154,"_165":61,"_166":167,"_168":169},"contents",[128,129,130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_43":157,"_32":158,"_30":159,"_135":-5,"_41":42,"_40":160,"_137":123,"_38":161,"_13":61,"_34":149,"_35":-5,"_24":25,"_141":-5,"_27":162},{"_43":151,"_32":152,"_30":153,"_135":-5,"_41":42,"_40":154,"_137":123,"_38":155,"_13":61,"_34":149,"_35":-5,"_24":25,"_141":-5,"_27":156},{"_43":144,"_32":145,"_30":146,"_135":-5,"_41":42,"_40":147,"_137":123,"_38":148,"_13":61,"_34":149,"_35":-5,"_24":25,"_141":-5,"_27":150},{"_43":132,"_32":133,"_30":134,"_135":-5,"_41":42,"_40":136,"_137":123,"_38":138,"_13":61,"_34":139,"_35":140,"_24":25,"_141":142,"_27":143},"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",[133],"5adcfc12-1c19-11f1-a014-42dde27851f2","Shared","5adcfcee-1c19-11f1-a014-42dde27851f2",3,["D",1773103064934],"directory",[145],"5ab24d14-1c19-11f1-9226-42dde27851f2","FRONTEND","5ab24e0e-1c19-11f1-9226-42dde27851f2",1,["D",1773103064650],[152],"5ac24412-1c19-11f1-9226-42dde27851f2","BACKEND","5ac244d0-1c19-11f1-9226-42dde27851f2",2,["D",1773103064759],[158],"pulls","branches","forks","envVars",{"_170":61,"_172":61},"connections",{"_170":61,"_171":61},"count","unfilledCount","emptyCount",{"_43":157,"_32":158,"_30":159,"_135":-5,"_41":42,"_40":160,"_137":123,"_38":283,"_13":61,"_34":149,"_35":-5,"_24":25,"_141":-5,"_189":284,"_27":285},{"_43":275,"_32":276,"_30":277,"_135":159,"_41":42,"_40":278,"_137":123,"_38":279,"_13":61,"_34":197,"_35":280,"_24":25,"_141":-5,"_189":281,"_27":282},{"_43":267,"_32":268,"_30":269,"_135":159,"_41":42,"_40":270,"_137":25,"_38":271,"_13":61,"_34":197,"_35":272,"_24":25,"_141":-5,"_189":273,"_27":274},{"_43":259,"_32":260,"_30":261,"_135":159,"_41":42,"_40":262,"_137":25,"_38":263,"_13":61,"_34":197,"_35":264,"_24":25,"_141":-5,"_189":265,"_27":266},{"_43":251,"_32":252,"_30":253,"_135":159,"_41":42,"_40":254,"_137":123,"_38":255,"_13":61,"_34":197,"_35":256,"_24":25,"_141":-5,"_189":257,"_27":258},{"_43":151,"_32":152,"_30":153,"_135":-5,"_41":42,"_40":154,"_137":123,"_38":248,"_13":61,"_34":149,"_35":-5,"_24":25,"_141":-5,"_189":249,"_27":250},{"_43":240,"_32":241,"_30":242,"_135":153,"_41":42,"_40":243,"_137":25,"_38":244,"_13":160,"_34":197,"_35":245,"_24":25,"_141":-5,"_189":246,"_27":247},{"_43":232,"_32":233,"_30":234,"_135":153,"_41":42,"_40":235,"_137":25,"_38":236,"_13":160,"_34":197,"_35":237,"_24":25,"_141":-5,"_189":238,"_27":239},{"_43":228,"_32":33,"_30":31,"_135":153,"_41":42,"_40":14,"_137":25,"_38":229,"_13":160,"_34":20,"_35":37,"_24":25,"_141":-5,"_189":230,"_27":231},{"_43":220,"_32":221,"_30":222,"_135":153,"_41":42,"_40":223,"_137":25,"_38":224,"_13":160,"_34":197,"_35":225,"_24":25,"_141":-5,"_189":226,"_27":227},{"_43":212,"_32":213,"_30":214,"_135":153,"_41":42,"_40":215,"_137":25,"_38":216,"_13":154,"_34":20,"_35":217,"_24":25,"_141":-5,"_189":218,"_27":219},{"_43":144,"_32":145,"_30":146,"_135":-5,"_41":42,"_40":147,"_137":123,"_38":209,"_13":61,"_34":149,"_35":-5,"_24":25,"_141":-5,"_189":210,"_27":211},{"_43":201,"_32":202,"_30":203,"_135":146,"_41":42,"_40":204,"_137":25,"_38":205,"_13":154,"_34":197,"_35":206,"_24":25,"_141":-5,"_189":207,"_27":208},{"_43":192,"_32":193,"_30":194,"_135":146,"_41":42,"_40":195,"_137":123,"_38":196,"_13":61,"_34":197,"_35":198,"_24":25,"_141":-5,"_189":199,"_27":200},{"_43":132,"_32":133,"_30":134,"_135":-5,"_41":42,"_40":136,"_137":123,"_38":188,"_13":61,"_34":139,"_35":140,"_24":25,"_141":142,"_189":190,"_27":191},["D",1773103065469],"children",[],[133],"5b1f457c-1c19-11f1-a014-42dde27851f2","types.ts","5b1f4626-1c19-11f1-a014-42dde27851f2",11,["D",1773103065332],"script","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",[],[145,193],"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",[],[145,202],["D",1773103064934],[185,186],[145],"3088dd26-1c1b-11f1-b9dc-42dde27851f2","styles.css","5b5e8476-1c19-11f1-92d7-42dde27851f2",17,["D",1773103852869],":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/* 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",[],[152,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",[],[152,221],"7036877a-1c20-11f1-a23f-42dde27851f2",["D",1773106107213],[],[152,33],"114a6d38-1c1d-11f1-b3e2-42dde27851f2","game-tetris.ts","5b2d27b4-1c19-11f1-b34b-42dde27851f2",23,["D",1773104659385],"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",[],[152,233],"1142c326-1c1d-11f1-9d18-42dde27851f2","game-snake.ts","5afa7b52-1c19-11f1-884f-42dde27851f2",22,["D",1773104659402],"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\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\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\n constructor(\n canvas: HTMLCanvasElement,\n onScore: (score: number) => void,\n onGameOver: (score: number) => void,\n onSpeedUpdate?: (speed: number) => 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.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 }\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 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 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\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(Date.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 // 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,241],["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,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",[],[158,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",[],[158,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",[],[158,276],["D",1773103064759],[174,175,176,177],[158],["D",1773102983877],["D",1789521041830],{"_98":97,"_105":101},{"_98":97,"_99":-5,"_100":101,"_18":55,"_102":103,"_104":25},{"_13":87,"_32":88,"_43":42,"_89":44,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":45,"_96":97},"ctx",{"_80":-5,"_125":324,"_325":326,"_327":328,"_329":25,"_330":25,"_331":25,"_332":123,"_333":-5,"_334":-7,"_335":-7,"_336":61,"_337":25,"_338":25,"_339":-5,"_340":25,"_341":25,"_342":25,"_343":-5},"ENV",{"_295":296,"_297":298,"_299":88,"_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

SELECTYOUR GAME

HIGH SCORES

GAME OVER

CHANGE AVATAR

SELECT
YOUR GAME

SELECT
YOUR GAME

Diff · v25