[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_361":362,"_363":364},"routes/_app.x.$handle.$name",{"_96":95,"_31":43,"_104":86,"_26":51,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":24,"_118":119,"_120":121,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_41":42,"_31":43,"_36":44,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":-5,"_55":24,"_56":-5,"_57":-5,"_58":59,"_60":61,"_62":63,"_64":65,"_66":67,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":24},"version",39,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":20,"_34":35,"_36":37,"_38":14,"_39":40,"_23":24},"previous","deleted",false,"deletedHere","path","tmp/NEON-DEFENDER/NEON-DEFENDER.html","latestPath","fileId","03d05d9e-4714-11f1-b0bd-42b51c65c3df","name","NEON-DEFENDER.html","fileType","content","\n\n \n \n \n Cyber-Neon: Hardcore & Responsive\n \n \n\n \n

Score: 0

\n HP: 100%\n

\n\n \n

COMBO: 0

\n 1.0x MULTIPLIER\n

\n\n \n \n WAVE: 1\n

\n\n \n \n SINGLE\n \n \n \n \n 🎮 CYBER-NEON\n \n\n \n \n 📊 LIVE STATS\n \n\n

Score:

\n \n 0\n

\n\n

Wave:

\n \n 1\n \n\n

Enemies Killed:

\n\n

Current Combo:

\n\n

Best Combo:

\n 0\n

\n\n

Weapon:

\n \n SINGLE\n \n\n

Health:

\n 100\n

\n\n

Time Survived:

\n 0:00\n

\n\n

Active Power-ups:

\n None\n

\n \n\n

\n \n

High Score:

\n \n \n\n

\n \n \n 🎮 START\n \n \n \n ▶️ RESUME\n \n \n \n 🔄 RESTART\n \n

\n\n

Press ESC to resume

\n \n\n

\n \n WASTED\n \n

Overwhelmed

Final Score: 0

\n \n

\n High Score: 0\n

\n \n

\n\n

WASD / Touch to Move

\n \n\n \n \n \n\n","createdAt",["D",1777828671357],"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",{"_96":95,"_103":99},"org",{"_96":95,"_97":-5,"_98":99,"_18":53,"_100":101,"_102":24},"branch",{"_13":85,"_31":86,"_41":40,"_87":42,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":43,"_94":95},"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",{"_41":42,"_31":43,"_36":356,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":-5,"_55":24,"_56":-5,"_57":-5,"_58":59,"_60":61,"_62":63,"_64":65,"_66":357,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":358,"_80":359,"_82":360,"_84":24},"tree",[178,183,189,192,200],"files",[178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200],"counts",{"_168":59,"_169":159,"_170":59,"_171":172,"_173":174},"contents",[126,127,128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_41":162,"_31":163,"_29":164,"_134":-5,"_39":40,"_38":165,"_136":121,"_36":166,"_13":59,"_33":148,"_34":-5,"_23":24,"_140":-5,"_26":167},{"_41":156,"_31":157,"_29":158,"_134":-5,"_39":40,"_38":159,"_136":121,"_36":160,"_13":59,"_33":148,"_34":-5,"_23":24,"_140":-5,"_26":161},{"_41":150,"_31":151,"_29":152,"_134":-5,"_39":40,"_38":153,"_136":121,"_36":154,"_13":59,"_33":148,"_34":-5,"_23":24,"_140":-5,"_26":155},{"_41":143,"_31":144,"_29":145,"_134":-5,"_39":40,"_38":146,"_136":121,"_36":147,"_13":59,"_33":148,"_34":-5,"_23":24,"_140":-5,"_26":149},{"_41":131,"_31":132,"_29":133,"_134":-5,"_39":40,"_38":135,"_136":121,"_36":137,"_13":59,"_33":138,"_34":139,"_23":24,"_140":141,"_26":142},"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",[132],"0379c808-4714-11f1-b2ab-42b51c65c3df","tmp","0379c8d0-4714-11f1-b2ab-42b51c65c3df",32,["D",1777828670819],"directory",[144],"5adcfc12-1c19-11f1-a014-42dde27851f2","Shared","5adcfcee-1c19-11f1-a014-42dde27851f2",3,["D",1773103064934],[151],"5ab24d14-1c19-11f1-9226-42dde27851f2","FRONTEND","5ab24e0e-1c19-11f1-9226-42dde27851f2",1,["D",1773103064650],[157],"5ac24412-1c19-11f1-9226-42dde27851f2","BACKEND","5ac244d0-1c19-11f1-9226-42dde27851f2",2,["D",1773103064759],[163],"pulls","branches","forks","envVars",{"_175":59,"_177":59},"connections",{"_175":59,"_176":59},"count","unfilledCount","emptyCount",{"_41":162,"_31":163,"_29":164,"_134":-5,"_39":40,"_38":165,"_136":121,"_36":353,"_13":59,"_33":148,"_34":-5,"_23":24,"_140":-5,"_202":354,"_26":355},{"_41":345,"_31":346,"_29":347,"_134":164,"_39":40,"_38":348,"_136":121,"_36":349,"_13":59,"_33":230,"_34":350,"_23":24,"_140":-5,"_202":351,"_26":352},{"_41":337,"_31":338,"_29":339,"_134":164,"_39":40,"_38":340,"_136":121,"_36":341,"_13":159,"_33":230,"_34":342,"_23":24,"_140":-5,"_202":343,"_26":344},{"_41":329,"_31":330,"_29":331,"_134":164,"_39":40,"_38":332,"_136":24,"_36":333,"_13":159,"_33":230,"_34":334,"_23":24,"_140":-5,"_202":335,"_26":336},{"_41":321,"_31":322,"_29":323,"_134":164,"_39":40,"_38":324,"_136":121,"_36":325,"_13":59,"_33":230,"_34":326,"_23":24,"_140":-5,"_202":327,"_26":328},{"_41":156,"_31":157,"_29":158,"_134":-5,"_39":40,"_38":159,"_136":121,"_36":318,"_13":59,"_33":148,"_34":-5,"_23":24,"_140":-5,"_202":319,"_26":320},{"_41":310,"_31":311,"_29":312,"_134":158,"_39":40,"_38":313,"_136":121,"_36":314,"_13":153,"_33":230,"_34":315,"_23":24,"_140":-5,"_202":316,"_26":317},{"_41":302,"_31":303,"_29":304,"_134":158,"_39":40,"_38":305,"_136":121,"_36":306,"_13":153,"_33":230,"_34":307,"_23":24,"_140":-5,"_202":308,"_26":309},{"_41":294,"_31":295,"_29":296,"_134":158,"_39":40,"_38":297,"_136":24,"_36":298,"_13":165,"_33":20,"_34":299,"_23":24,"_140":-5,"_202":300,"_26":301},{"_41":286,"_31":287,"_29":288,"_134":158,"_39":40,"_38":289,"_136":24,"_36":290,"_13":153,"_33":230,"_34":291,"_23":24,"_140":-5,"_202":292,"_26":293},{"_41":278,"_31":279,"_29":280,"_134":158,"_39":40,"_38":281,"_136":24,"_36":282,"_13":165,"_33":20,"_34":283,"_23":24,"_140":-5,"_202":284,"_26":285},{"_41":150,"_31":151,"_29":152,"_134":-5,"_39":40,"_38":153,"_136":121,"_36":275,"_13":59,"_33":148,"_34":-5,"_23":24,"_140":-5,"_202":276,"_26":277},{"_41":267,"_31":268,"_29":269,"_134":152,"_39":40,"_38":270,"_136":24,"_36":271,"_13":159,"_33":230,"_34":272,"_23":24,"_140":-5,"_202":273,"_26":274},{"_41":259,"_31":260,"_29":261,"_134":152,"_39":40,"_38":262,"_136":121,"_36":263,"_13":59,"_33":230,"_34":264,"_23":24,"_140":-5,"_202":265,"_26":266},{"_41":143,"_31":144,"_29":145,"_134":-5,"_39":40,"_38":146,"_136":121,"_36":256,"_13":59,"_33":148,"_34":-5,"_23":24,"_140":-5,"_202":257,"_26":258},{"_41":251,"_31":234,"_29":227,"_134":145,"_39":40,"_38":252,"_136":121,"_36":253,"_13":59,"_33":148,"_34":-5,"_23":24,"_140":-5,"_202":254,"_26":255},{"_41":243,"_31":244,"_29":245,"_134":227,"_39":40,"_38":246,"_136":121,"_36":247,"_13":59,"_33":20,"_34":248,"_23":24,"_140":-5,"_202":249,"_26":250},{"_41":235,"_31":236,"_29":237,"_134":227,"_39":40,"_38":238,"_136":121,"_36":239,"_13":59,"_33":20,"_34":240,"_23":24,"_140":-5,"_202":241,"_26":242},{"_41":224,"_31":225,"_29":226,"_134":227,"_39":40,"_38":228,"_136":121,"_36":229,"_13":59,"_33":230,"_34":231,"_23":24,"_140":-5,"_202":232,"_26":233},{"_41":219,"_31":210,"_29":206,"_134":145,"_39":40,"_38":220,"_136":121,"_36":221,"_13":59,"_33":148,"_34":-5,"_23":24,"_140":-5,"_202":222,"_26":223},{"_41":211,"_31":212,"_29":213,"_134":206,"_39":40,"_38":214,"_136":121,"_36":215,"_13":59,"_33":20,"_34":216,"_23":24,"_140":-5,"_202":217,"_26":218},{"_41":205,"_31":32,"_29":30,"_134":206,"_39":40,"_38":14,"_136":121,"_36":207,"_13":59,"_33":20,"_34":35,"_23":24,"_140":-5,"_202":208,"_26":209},{"_41":131,"_31":132,"_29":133,"_134":-5,"_39":40,"_38":135,"_136":121,"_36":201,"_13":59,"_33":138,"_34":139,"_23":24,"_140":141,"_202":203,"_26":204},["D",1773103065469],"children",[],[132],"03d05ccc-4714-11f1-b0bd-42b51c65c3df","0398b920-4714-11f1-9a5c-42b51c65c3df",["D",1777828671357],[],[144,210,32],"NEON-DEFENDER","03b5aefe-4714-11f1-9a5c-42b51c65c3df","NEON-DEFENDER.css","03b5af9e-4714-11f1-9a5c-42b51c65c3df",36,["D",1777828671227]," :root {\n --neon-blue: #00f3ff;\n --neon-pink: #ff00ff;\n --neon-green: #00ff66;\n --neon-red: #ff3333;\n --bg-dark: #050505;\n }\n\n body {\n margin: 0;\n padding: 0;\n overflow: hidden;\n background-color: var(--bg-dark);\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n color: white;\n user-select: none;\n touch-action: none;\n }\n\n #game-container {\n position: relative;\n width: 100vw;\n height: 100vh;\n background: #000;\n overflow: hidden;\n }\n\n canvas {\n display: block;\n background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);\n }\n\n #ui-layer {\n position: absolute;\n top: 20px;\n left: 20px;\n pointer-events: none;\n z-index: 10;\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n .stat-box {\n background: rgba(5, 5, 10, 0.9);\n padding: 10px 20px;\n border-left: 4px solid var(--neon-blue);\n font-size: 1rem;\n text-transform: uppercase;\n font-weight: bold;\n letter-spacing: 1px;\n display: flex;\n align-items: center;\n border-radius: 0 8px 8px 0;\n backdrop-filter: blur(5px);\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);\n width: fit-content;\n }\n\n .critical-hp {\n border-left-color: var(--neon-red) !important;\n color: var(--neon-red);\n animation: pulse 0.5s infinite alternate;\n }\n\n @keyframes pulse {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0.5;\n }\n }\n\n #game-over {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: none;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n background: rgba(0, 0, 0, 0.95);\n z-index: 100;\n }\n\n button {\n background: transparent;\n color: var(--neon-blue);\n border: 2px solid var(--neon-blue);\n padding: 15px 50px;\n font-size: 1.5rem;\n cursor: pointer;\n text-transform: uppercase;\n font-weight: 800;\n border-radius: 4px;\n margin-top: 20px;\n transition: 0.2s;\n }\n\n button:hover {\n background: var(--neon-blue);\n color: black;\n box-shadow: 0 0 30px var(--neon-blue);\n }\n\n .controls-hint {\n position: absolute;\n bottom: 20px;\n width: 100%;\n text-align: center;\n color: rgba(255, 255, 255, 0.3);\n font-size: 0.8rem;\n pointer-events: none;\n }\n\n /* PHASE 2: Combo UI */\n #combo-display {\n position: absolute;\n top: 20px;\n right: 20px;\n background: rgba(5, 5, 10, 0.9);\n padding: 10px 20px;\n border-right: 4px solid var(--neon-pink);\n font-size: 1.2rem;\n text-transform: uppercase;\n font-weight: bold;\n letter-spacing: 1px;\n border-radius: 8px 0 0 8px;\n backdrop-filter: blur(5px);\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);\n display: none;\n }\n\n #combo-display.active {\n display: block;\n animation: pulse 0.5s infinite alternate;\n }\n",[],[144,210,212],"0398b88a-4714-11f1-9a5c-42b51c65c3df",34,["D",1777828671036],[198,199],[144,210],"03c6a092-4714-11f1-bdc4-42b51c65c3df","MIDNIGHT-RACING.js","03c6a132-4714-11f1-bdc4-42b51c65c3df","0389895a-4714-11f1-b2ab-42b51c65c3df",38,["D",1777828671232],"script"," let scene, camera, renderer, clock;\n let playerCar,\n playerSpeed = 0,\n playerLane = 0;\n let roadWidth = 12,\n laneWidth = 4;\n let buildings = [],\n trafficCars = [],\n roadSegments = [];\n let particles = [];\n let gameRunning = false,\n gameOver = false;\n let distance = 0,\n score = 0,\n avoided = 0;\n let keys = {};\n let time = 0;\n let roadMarkings = [];\n let streetLights = [];\n let trees = [];\n let rainDrops = [];\n let puddles = [];\n\n const LANE_POSITIONS = [-4, 0, 4];\n const TRAFFIC_LANES = [-4, -2, 0, 2, 4];\n\n function init() {\n scene = new THREE.Scene();\n scene.fog = new THREE.FogExp2(0x000510, 0.008);\n scene.background = new THREE.Color(0x000510);\n\n camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.5, 500);\n camera.position.set(0, 3.5, 8);\n camera.lookAt(0, 2, -30);\n\n renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });\n renderer.setSize(window.innerWidth, window.innerHeight);\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n renderer.shadowMap.enabled = true;\n renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n renderer.toneMapping = THREE.ACESFilmicToneMapping;\n renderer.toneMappingExposure = 1.2;\n document.body.appendChild(renderer.domElement);\n\n clock = new THREE.Clock();\n\n // Ambient light\n const ambient = new THREE.AmbientLight(0x111133, 0.3);\n scene.add(ambient);\n\n // Moon light\n const moonLight = new THREE.DirectionalLight(0x334466, 0.4);\n moonLight.position.set(30, 50, -20);\n scene.add(moonLight);\n\n // Hemisphere light\n const hemi = new THREE.HemisphereLight(0x222244, 0x111111, 0.3);\n scene.add(hemi);\n\n createPlayerCar();\n createRoad();\n createBuildings();\n createTraffic();\n createStreetLights();\n createTrees();\n createRain();\n createPuddles();\n\n window.addEventListener(\"keydown\", (e) => {\n keys[e.key.toLowerCase()] = true;\n });\n window.addEventListener(\"keyup\", (e) => {\n keys[e.key.toLowerCase()] = false;\n });\n window.addEventListener(\"resize\", onResize);\n }\n\n function createPlayerCar() {\n playerCar = new THREE.Group();\n\n // Car body\n const bodyGeo = new THREE.BoxGeometry(2, 0.8, 4.2);\n const bodyMat = new THREE.MeshPhongMaterial({\n color: 0x0044aa,\n emissive: 0x001133,\n shininess: 120,\n });\n const body = new THREE.Mesh(bodyGeo, bodyMat);\n body.position.y = 0.6;\n body.castShadow = true;\n playerCar.add(body);\n\n // Cabin\n const cabinGeo = new THREE.BoxGeometry(1.8, 0.7, 2);\n const cabinMat = new THREE.MeshPhongMaterial({\n color: 0x111122,\n emissive: 0x000011,\n shininess: 150,\n transparent: true,\n opacity: 0.85,\n });\n const cabin = new THREE.Mesh(cabinGeo, cabinMat);\n cabin.position.set(0, 1.25, -0.3);\n playerCar.add(cabin);\n\n // Windshield\n const windshieldGeo = new THREE.PlaneGeometry(1.7, 0.65);\n const windshieldMat = new THREE.MeshPhongMaterial({\n color: 0x4488ff,\n emissive: 0x2244aa,\n transparent: true,\n opacity: 0.4,\n side: THREE.DoubleSide,\n });\n const windshield = new THREE.Mesh(windshieldGeo, windshieldMat);\n windshield.position.set(0, 1.2, -1.3);\n windshield.rotation.x = 0.15;\n playerCar.add(windshield);\n\n // Rear window\n const rearGeo = new THREE.PlaneGeometry(1.7, 0.6);\n const rearWin = new THREE.Mesh(rearGeo, windshieldMat);\n rearWin.position.set(0, 1.2, 0.7);\n rearWin.rotation.x = -0.15;\n playerCar.add(rearWin);\n\n // Headlights\n const hlGeo = new THREE.SphereGeometry(0.15, 8, 8);\n const hlMat = new THREE.MeshPhongMaterial({ emissive: 0xffffcc, color: 0xffffcc });\n const hl1 = new THREE.Mesh(hlGeo, hlMat);\n hl1.position.set(-0.7, 0.6, -2.1);\n playerCar.add(hl1);\n const hl2 = new THREE.Mesh(hlGeo, hlMat);\n hl2.position.set(0.7, 0.6, -2.1);\n playerCar.add(hl2);\n\n // Headlight beams\n const beamGeo = new THREE.CylinderGeometry(0.3, 2, 15, 8, 1, true);\n const beamMat = new THREE.MeshBasicMaterial({\n color: 0xffffaa,\n transparent: true,\n opacity: 0.03,\n side: THREE.DoubleSide,\n });\n const beam1 = new THREE.Mesh(beamGeo, beamMat);\n beam1.position.set(-0.7, 0.5, -9);\n beam1.rotation.x = Math.PI / 2;\n playerCar.add(beam1);\n const beam2 = new THREE.Mesh(beamGeo, beamMat);\n beam2.position.set(0.7, 0.5, -9);\n beam2.rotation.x = Math.PI / 2;\n playerCar.add(beam2);\n\n // Headlight spotlights\n const spot1 = new THREE.SpotLight(0xffffcc, 2, 30, Math.PI / 6, 0.5, 1);\n spot1.position.set(-0.7, 0.6, -2);\n spot1.target.position.set(-0.7, 0, -15);\n playerCar.add(spot1);\n playerCar.add(spot1.target);\n\n const spot2 = new THREE.SpotLight(0xffffcc, 2, 30, Math.PI / 6, 0.5, 1);\n spot2.position.set(0.7, 0.6, -2);\n spot2.target.position.set(0.7, 0, -15);\n playerCar.add(spot2);\n playerCar.add(spot2.target);\n\n // Taillights\n const tlGeo = new THREE.BoxGeometry(0.3, 0.15, 0.05);\n const tlMat = new THREE.MeshPhongMaterial({ emissive: 0xff0000, color: 0xff0000 });\n const tl1 = new THREE.Mesh(tlGeo, tlMat);\n tl1.position.set(-0.7, 0.6, 2.1);\n playerCar.add(tl1);\n const tl2 = new THREE.Mesh(tlGeo, tlMat);\n tl2.position.set(0.7, 0.6, 2.1);\n playerCar.add(tl2);\n\n // Taillight glow\n const tlGlow1 = new THREE.PointLight(0xff0000, 1, 8);\n tlGlow1.position.set(-0.7, 0.6, 2.3);\n playerCar.add(tlGlow1);\n const tlGlow2 = new THREE.PointLight(0xff0000, 1, 8);\n tlGlow2.position.set(0.7, 0.6, 2.3);\n playerCar.add(tlGlow2);\n\n // Spoiler\n const spoilerGeo = new THREE.BoxGeometry(1.8, 0.08, 0.4);\n const spoilerMat = new THREE.MeshPhongMaterial({ color: 0x003388, emissive: 0x001144 });\n const spoiler = new THREE.Mesh(spoilerGeo, spoilerMat);\n spoiler.position.set(0, 1.15, 1.8);\n playerCar.add(spoiler);\n const spoilerLeg1 = new THREE.Mesh(new THREE.BoxGeometry(0.08, 0.3, 0.08), spoilerMat);\n spoilerLeg1.position.set(-0.6, 0.95, 1.8);\n playerCar.add(spoilerLeg1);\n const spoilerLeg2 = new THREE.Mesh(new THREE.BoxGeometry(0.08, 0.3, 0.08), spoilerMat);\n spoilerLeg2.position.set(0.6, 0.95, 1.8);\n playerCar.add(spoilerLeg2);\n\n // Wheels\n const wheelGeo = new THREE.CylinderGeometry(0.35, 0.35, 0.25, 12);\n const wheelMat = new THREE.MeshPhongMaterial({ color: 0x111111 });\n const wheelPositions = [\n [-1, 0.35, -1.3],\n [1, 0.35, -1.3],\n [-1, 0.35, 1.3],\n [1, 0.35, 1.3],\n ];\n playerCar.wheels = [];\n wheelPositions.forEach((pos) => {\n const wheel = new THREE.Mesh(wheelGeo, wheelMat);\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(...pos);\n playerCar.add(wheel);\n playerCar.wheels.push(wheel);\n\n // Hubcap\n const hubGeo = new THREE.CylinderGeometry(0.2, 0.2, 0.26, 8);\n const hubMat = new THREE.MeshPhongMaterial({ color: 0x888888, shininess: 80 });\n const hub = new THREE.Mesh(hubGeo, hubMat);\n hub.rotation.z = Math.PI / 2;\n hub.position.set(pos[0] * 1.05, pos[1], pos[2]);\n playerCar.add(hub);\n });\n\n // Side skirts\n const skirtGeo = new THREE.BoxGeometry(0.05, 0.15, 3.8);\n const skirtMat = new THREE.MeshPhongMaterial({ color: 0x002266 });\n const skirtL = new THREE.Mesh(skirtGeo, skirtMat);\n skirtL.position.set(-1.05, 0.4, 0);\n playerCar.add(skirtL);\n const skirtR = new THREE.Mesh(skirtGeo, skirtMat);\n skirtR.position.set(1.05, 0.4, 0);\n playerCar.add(skirtR);\n\n // License plate\n const plateGeo = new THREE.PlaneGeometry(0.5, 0.25);\n const plateMat = new THREE.MeshPhongMaterial({ color: 0xffffcc, emissive: 0x888844 });\n const plate = new THREE.Mesh(plateGeo, plateMat);\n plate.position.set(0, 0.4, 2.12);\n playerCar.add(plate);\n\n playerCar.position.set(0, 0, 0);\n scene.add(playerCar);\n }\n\n function createRoad() {\n // Main road surface\n const roadGeo = new THREE.PlaneGeometry(roadWidth, 2000);\n const roadMat = new THREE.MeshPhongMaterial({\n color: 0x1a1a2e,\n shininess: 60,\n specular: 0x111122,\n });\n const road = new THREE.Mesh(roadGeo, roadMat);\n road.rotation.x = -Math.PI / 2;\n road.position.set(0, 0, -500);\n scene.add(road);\n\n // Sidewalks\n const swGeo = new THREE.PlaneGeometry(4, 2000);\n const swMat = new THREE.MeshPhongMaterial({ color: 0x222233 });\n const swL = new THREE.Mesh(swGeo, swMat);\n swL.rotation.x = -Math.PI / 2;\n swL.position.set(-8, 0.02, -500);\n scene.add(swL);\n const swR = new THREE.Mesh(swGeo, swMat);\n swR.rotation.x = -Math.PI / 2;\n swR.position.set(8, 0.02, -500);\n scene.add(swR);\n\n // Road edges (curbs)\n const curbGeo = new THREE.BoxGeometry(0.3, 0.2, 2000);\n const curbMat = new THREE.MeshPhongMaterial({ color: 0x333344 });\n const curbL = new THREE.Mesh(curbGeo, curbMat);\n curbL.position.set(-6.15, 0.1, -500);\n scene.add(curbL);\n const curbR = new THREE.Mesh(curbGeo, curbMat);\n curbR.position.set(6.15, 0.1, -500);\n scene.add(curbR);\n\n // Lane markings\n for (let i = 0; i < 200; i++) {\n for (let lane = -1; lane <= 1; lane++) {\n const markingGeo = new THREE.PlaneGeometry(0.15, 2);\n const markingMat = new THREE.MeshBasicMaterial({\n color: 0x444455,\n transparent: true,\n opacity: 0.8,\n });\n const marking = new THREE.Mesh(markingGeo, markingMat);\n marking.rotation.x = -Math.PI / 2;\n marking.position.set(lane * 4, 0.015, -i * 10);\n scene.add(marking);\n roadMarkings.push(marking);\n }\n }\n\n // Center line (double yellow)\n for (let i = 0; i < 200; i++) {\n const lineGeo = new THREE.PlaneGeometry(0.1, 1.5);\n const lineMat = new THREE.MeshBasicMaterial({ color: 0x666633 });\n const line1 = new THREE.Mesh(lineGeo, lineMat);\n line1.rotation.x = -Math.PI / 2;\n line1.position.set(-0.3, 0.015, -i * 10);\n scene.add(line1);\n roadMarkings.push(line1);\n\n const line2 = new THREE.Mesh(lineGeo, lineMat);\n line2.rotation.x = -Math.PI / 2;\n line2.position.set(0.3, 0.015, -i * 10);\n scene.add(line2);\n roadMarkings.push(line2);\n }\n\n // Edge lines\n for (let i = 0; i < 200; i++) {\n const lineGeo = new THREE.PlaneGeometry(0.15, 1.5);\n const lineMat = new THREE.MeshBasicMaterial({ color: 0x888888 });\n const line1 = new THREE.Mesh(lineGeo, lineMat);\n line1.rotation.x = -Math.PI / 2;\n line1.position.set(-5.8, 0.015, -i * 10);\n scene.add(line1);\n roadMarkings.push(line1);\n\n const line2 = new THREE.Mesh(lineGeo, lineMat);\n line2.rotation.x = -Math.PI / 2;\n line2.position.set(5.8, 0.015, -i * 10);\n scene.add(line2);\n roadMarkings.push(line2);\n }\n }\n\n function createBuilding(x, z, type) {\n const group = new THREE.Group();\n\n const height = 15 + Math.random() * 35;\n const width = 3 + Math.random() * 4;\n const depth = 3 + Math.random() * 5;\n\n // Main building body\n const bodyGeo = new THREE.BoxGeometry(width, height, depth);\n const hue = Math.random() * 0.15 + 0.55;\n const bodyMat = new THREE.MeshPhongMaterial({\n color: new THREE.Color().setHSL(hue, 0.1, 0.08 + Math.random() * 0.05),\n emissive: new THREE.Color().setHSL(hue, 0.1, 0.02),\n shininess: 30,\n });\n const body = new THREE.Mesh(bodyGeo, bodyMat);\n body.position.y = height / 2;\n body.castShadow = true;\n group.add(body);\n\n // Roof details\n const roofGeo = new THREE.BoxGeometry(width + 0.5, 0.8, depth + 0.5);\n const roofMat = new THREE.MeshPhongMaterial({ color: 0x222233 });\n const roof = new THREE.Mesh(roofGeo, roofMat);\n roof.position.y = height + 0.4;\n group.add(roof);\n\n // AC units on roof\n if (Math.random() > 0.5) {\n const acGeo = new THREE.BoxGeometry(0.8, 0.6, 0.8);\n const acMat = new THREE.MeshPhongMaterial({ color: 0x333344 });\n const ac = new THREE.Mesh(acGeo, acMat);\n ac.position.set(width * 0.3, height + 1, depth * 0.2);\n group.add(ac);\n }\n\n // Windows\n const windowRows = Math.floor(height / 3);\n const windowCols = Math.floor(width / 2);\n\n for (let row = 0; row < windowRows; row++) {\n for (let col = 0; col < windowCols; col++) {\n if (Math.random() > 0.3) {\n const winGeo = new THREE.PlaneGeometry(1.2, 1.5);\n const isLit = Math.random() > 0.4;\n let winColor = isLit\n ? new THREE.Color().setHSL(\n 0.15 + Math.random() * 0.1,\n 0.6,\n 0.6 + Math.random() * 0.3,\n )\n : 0x111122;\n const winMat = new THREE.MeshBasicMaterial({\n color: winColor,\n transparent: true,\n opacity: isLit ? 0.8 : 0.5,\n });\n const win = new THREE.Mesh(winGeo, winMat);\n\n const wy = 2 + row * 3;\n const wx = (col - (windowCols - 1) / 2) * 1.8;\n\n // Front face\n const winFront = new THREE.Mesh(winGeo, winMat);\n winFront.position.set(wx, wy, depth / 2 + 0.01);\n group.add(winFront);\n\n // Back face\n const winBack = new THREE.Mesh(winGeo, winMat);\n winBack.position.set(wx, wy, -depth / 2 - 0.01);\n winBack.rotation.y = Math.PI;\n group.add(winBack);\n }\n }\n }\n\n // Building accent lines (horizontal bands)\n for (let b = 0; b < 3; b++) {\n const bandGeo = new THREE.BoxGeometry(width + 0.1, 0.15, depth + 0.1);\n const bandMat = new THREE.MeshPhongMaterial({ color: 0x2a2a3a });\n const band = new THREE.Mesh(bandGeo, bandMat);\n band.position.y = height * (0.3 + b * 0.3);\n group.add(band);\n }\n\n // Ground floor entrance\n const entranceGeo = new THREE.BoxGeometry(1.5, 2.5, 0.1);\n const entranceMat = new THREE.MeshPhongMaterial({\n color: 0x444466,\n emissive: 0x222233,\n });\n const entrance = new THREE.Mesh(entranceGeo, entranceMat);\n entrance.position.set(0, 1.25, depth / 2 + 0.05);\n group.add(entrance);\n\n // Awning\n const awningGeo = new THREE.BoxGeometry(2.5, 0.1, 1.5);\n const awningMat = new THREE.MeshPhongMaterial({ color: 0x332244 });\n const awning = new THREE.Mesh(awningGeo, awningMat);\n awning.position.set(0, 2.6, depth / 2 + 0.7);\n group.add(awning);\n\n // Neon sign (random)\n if (Math.random() > 0.7) {\n const signGeo = new THREE.BoxGeometry(width * 0.6, 0.6, 0.1);\n const signColor = Math.random() > 0.5 ? 0xff0066 : 0x00ff88;\n const signMat = new THREE.MeshPhongMaterial({\n color: signColor,\n emissive: signColor,\n emissiveIntensity: 0.5,\n });\n const sign = new THREE.Mesh(signGeo, signMat);\n sign.position.set(0, height * 0.7, depth / 2 + 0.06);\n group.add(sign);\n\n const signLight = new THREE.PointLight(signColor, 1, 15);\n signLight.position.set(0, height * 0.7, depth / 2 + 1);\n group.add(signLight);\n }\n\n // Satellite dish\n if (Math.random() > 0.6) {\n const dishGeo = new THREE.SphereGeometry(0.4, 8, 4, 0, Math.PI * 2, 0, Math.PI / 3);\n const dishMat = new THREE.MeshPhongMaterial({ color: 0x555566 });\n const dish = new THREE.Mesh(dishGeo, dishMat);\n dish.position.set(width * 0.3, height + 0.5, depth * 0.3);\n dish.rotation.x = Math.PI;\n group.add(dish);\n }\n\n group.position.set(x, 0, z);\n scene.add(group);\n buildings.push({ mesh: group, x: x, z: z, width: width, depth: depth, height: height });\n }\n\n function createBuildings() {\n for (let i = 0; i < 100; i++) {\n const z = -i * 15;\n const side = Math.random() > 0.5 ? 1 : -1;\n const x = side * (9 + Math.random() * 8);\n const type = Math.floor(Math.random() * 4);\n createBuilding(x, z, type);\n }\n }\n\n function createTrafficCar(type) {\n const group = new THREE.Group();\n\n const colors = [\n 0xcc2222, 0x2244aa, 0x888888, 0xddaa33, 0x222222, 0xffffff, 0x44aa44, 0xaa4444,\n ];\n const color = colors[Math.floor(Math.random() * colors.length)];\n\n // Body\n const bodyGeo = new THREE.BoxGeometry(1.8, 0.75, 4);\n const bodyMat = new THREE.MeshPhongMaterial({\n color: color,\n emissive: 0x111111,\n shininess: 80,\n });\n const body = new THREE.Mesh(bodyGeo, bodyMat);\n body.position.y = 0.55;\n body.castShadow = true;\n group.add(body);\n\n // Cabin\n const cabGeo = new THREE.BoxGeometry(1.6, 0.65, 2);\n const cabMat = new THREE.MeshPhongMaterial({\n color: 0x111122,\n transparent: true,\n opacity: 0.7,\n });\n const cab = new THREE.Mesh(cabGeo, cabMat);\n cab.position.set(0, 1.15, -0.2);\n group.add(cab);\n\n // Windshield\n const wsGeo = new THREE.PlaneGeometry(1.5, 0.6);\n const wsMat = new THREE.MeshPhongMaterial({\n color: 0x4488ff,\n transparent: true,\n opacity: 0.3,\n side: THREE.DoubleSide,\n });\n const ws = new THREE.Mesh(wsGeo, wsMat);\n ws.position.set(0, 1.1, -1.15);\n ws.rotation.x = 0.1;\n group.add(ws);\n\n // Wheels\n const wGeo = new THREE.CylinderGeometry(0.3, 0.3, 0.2, 8);\n const wMat = new THREE.MeshPhongMaterial({ color: 0x111111 });\n [\n [-0.9, 0.3, -1.2],\n [0.9, 0.3, -1.2],\n [-0.9, 0.3, 1.2],\n [0.9, 0.3, 1.2],\n ].forEach((p) => {\n const w = new THREE.Mesh(wGeo, wMat);\n w.rotation.z = Math.PI / 2;\n w.position.set(...p);\n group.add(w);\n });\n\n // Headlights\n const hlGeo = new THREE.SphereGeometry(0.12, 6, 6);\n const hlMat = new THREE.MeshPhongMaterial({ emissive: 0xffffcc, color: 0xffffcc });\n const hl1 = new THREE.Mesh(hlGeo, hlMat);\n hl1.position.set(-0.6, 0.5, -2.05);\n group.add(hl1);\n const hl2 = new THREE.Mesh(hlGeo, hlMat);\n hl2.position.set(0.6, 0.5, -2.05);\n group.add(hl2);\n\n // Taillights\n const tlGeo = new THREE.BoxGeometry(0.25, 0.12, 0.05);\n const tlMat = new THREE.MeshPhongMaterial({ emissive: 0xff0000, color: 0xff0000 });\n const tl1 = new THREE.Mesh(tlGeo, tlMat);\n tl1.position.set(-0.6, 0.5, 2.05);\n group.add(tl1);\n const tl2 = new THREE.Mesh(tlGeo, tlMat);\n tl2.position.set(0.6, 0.5, 2.05);\n group.add(tl2);\n\n // Truck variant\n if (type === 2) {\n // Truck bed\n const bedGeo = new THREE.BoxGeometry(2, 1.5, 2.5);\n const bedMat = new THREE.MeshPhongMaterial({ color: 0x555555 });\n const bed = new THREE.Mesh(bedGeo, bedMat);\n bed.position.set(0, 1.2, 1.2);\n group.add(bed);\n body.scale.set(1, 1.5, 1);\n body.position.y = 0.75;\n }\n\n group.position.y = 0;\n scene.add(group);\n return group;\n }\n\n function createTraffic() {\n for (let i = 0; i < 30; i++) {\n const laneIdx = Math.floor(Math.random() * 5);\n const lane = TRAFFIC_LANES[laneIdx];\n const z = -Math.random() * 300 - 20;\n const type = Math.random() > 0.8 ? 2 : Math.random() > 0.5 ? 1 : 0;\n const car = createTrafficCar(type);\n car.position.set(lane, 0, z);\n car.userData = {\n lane: laneIdx,\n speed: 0.15 + Math.random() * 0.25,\n type: type,\n z: z,\n laneX: lane,\n swayAmount: Math.random() * 0.3,\n swaySpeed: 0.5 + Math.random() * 1.5,\n swayPhase: Math.random() * Math.PI * 2,\n };\n trafficCars.push(car);\n }\n }\n\n function createStreetLights() {\n for (let i = 0; i < 50; i++) {\n const group = new THREE.Group();\n\n // Pole\n const poleGeo = new THREE.CylinderGeometry(0.08, 0.1, 8, 6);\n const poleMat = new THREE.MeshPhongMaterial({ color: 0x333344 });\n const pole = new THREE.Mesh(poleGeo, poleMat);\n pole.position.y = 4;\n group.add(pole);\n\n // Arm\n const armGeo = new THREE.BoxGeometry(2, 0.08, 0.08);\n const arm = new THREE.Mesh(armGeo, poleMat);\n arm.position.set(-0.8, 8, 0);\n group.add(arm);\n\n // Light fixture\n const fixGeo = new THREE.BoxGeometry(0.6, 0.15, 0.3);\n const fixMat = new THREE.MeshPhongMaterial({\n color: 0xffffcc,\n emissive: 0xffdd88,\n emissiveIntensity: 0.3,\n });\n const fix = new THREE.Mesh(fixGeo, fixMat);\n fix.position.set(-1.7, 7.95, 0);\n group.add(fix);\n\n // Light glow\n const glowGeo = new THREE.SphereGeometry(0.3, 6, 6);\n const glowMat = new THREE.MeshBasicMaterial({\n color: 0xffdd88,\n transparent: true,\n opacity: 0.1,\n });\n const glow = new THREE.Mesh(glowGeo, glowMat);\n glow.position.set(-1.7, 7.8, 0);\n group.add(glow);\n\n // Point light\n const pl = new THREE.PointLight(0xffdd88, 0.8, 20, 2);\n pl.position.set(-1.7, 7.5, 0);\n group.add(pl);\n\n const side = i % 2 === 0 ? 1 : -1;\n const z = -i * 20;\n group.position.set(side * 7, 0, z);\n scene.add(group);\n streetLights.push(group);\n }\n }\n\n function createTrees() {\n for (let i = 0; i < 60; i++) {\n const group = new THREE.Group();\n\n // Trunk\n const trunkGeo = new THREE.CylinderGeometry(0.15, 0.2, 3, 6);\n const trunkMat = new THREE.MeshPhongMaterial({ color: 0x2a1a0a });\n const trunk = new THREE.Mesh(trunkGeo, trunkMat);\n trunk.position.y = 1.5;\n group.add(trunk);\n\n // Foliage layers\n const sizes = [1.5, 1.2, 0.8];\n sizes.forEach((s, idx) => {\n const fGeo = new THREE.ConeGeometry(s, 1.5, 6);\n const fMat = new THREE.MeshPhongMaterial({\n color: new THREE.Color().setHSL(0.3 + Math.random() * 0.05, 0.3, 0.1 + idx * 0.02),\n });\n const foliage = new THREE.Mesh(fGeo, fMat);\n foliage.position.y = 3 + idx * 1;\n group.add(foliage);\n });\n\n const side = i % 2 === 0 ? 1 : -1;\n const x = side * (7.5 + Math.random() * 3);\n const z = -i * 12;\n group.position.set(x, 0, z);\n scene.add(group);\n trees.push(group);\n }\n }\n\n function createRain() {\n const rainGeo = new THREE.BufferGeometry();\n const count = 3000;\n const positions = new Float32Array(count * 3);\n for (let i = 0; i < count; i++) {\n positions[i * 3] = (Math.random() - 0.5) * 40;\n positions[i * 3 + 1] = Math.random() * 30;\n positions[i * 3 + 2] = (Math.random() - 0.5) * 100;\n }\n rainGeo.setAttribute(\"position\", new THREE.BufferAttribute(positions, 3));\n const rainMat = new THREE.PointsMaterial({\n color: 0x4466aa,\n size: 0.05,\n transparent: true,\n opacity: 0.3,\n });\n const rain = new THREE.Points(rainGeo, rainMat);\n rain.userData = { positions: positions };\n scene.add(rain);\n rainDrops.push(rain);\n }\n\n function createPuddles() {\n for (let i = 0; i < 20; i++) {\n const puddleGeo = new THREE.CircleGeometry(0.5 + Math.random() * 1.5, 8);\n const puddleMat = new THREE.MeshPhongMaterial({\n color: 0x222244,\n transparent: true,\n opacity: 0.4,\n shininess: 100,\n });\n const puddle = new THREE.Mesh(puddleGeo, puddleMat);\n puddle.rotation.x = -Math.PI / 2;\n puddle.position.set((Math.random() - 0.5) * roadWidth, 0.01, -Math.random() * 300);\n scene.add(puddle);\n puddles.push(puddle);\n }\n }\n\n function updatePlayer(dt) {\n const accel = keys[\"w\"] ? 15 : 5;\n const brakeForce = 12;\n const maxSpeed = keys[\"w\"] ? 25 : 15;\n const steerSpeed = 8;\n\n // Acceleration\n if (keys[\"w\"]) {\n playerSpeed = Math.min(playerSpeed + accel * dt, maxSpeed);\n } else if (keys[\"s\"]) {\n playerSpeed = Math.max(playerSpeed - brakeForce * dt, 0);\n } else {\n playerSpeed = Math.max(playerSpeed - 3 * dt, 0);\n }\n\n // Steering\n if (keys[\"a\"]) {\n playerLane = Math.max(playerLane - steerSpeed * dt, -4);\n }\n if (keys[\"d\"]) {\n playerLane = Math.min(playerLane + steerSpeed * dt, 4);\n }\n\n // Smooth lane transition\n const targetX = playerLane;\n playerCar.position.x += (targetX - playerCar.position.x) * 8 * dt;\n\n // Car tilt\n if (keys[\"a\"]) {\n playerCar.rotation.z = Math.min(playerCar.rotation.z + dt * 0.5, 0.15);\n } else if (keys[\"d\"]) {\n playerCar.rotation.z = Math.max(playerCar.rotation.z - dt * 0.5, -0.15);\n } else {\n playerCar.rotation.z *= 0.9;\n }\n\n // Speed-based visual effects\n const speedFactor = playerSpeed / 25;\n camera.position.y = 3.5 + speedFactor * 0.5;\n camera.fov = 65 + speedFactor * 10;\n camera.updateProjectionMatrix();\n\n // Camera shake at high speed\n if (playerSpeed > 15) {\n const shake = (playerSpeed - 15) * 0.002;\n camera.position.x += (Math.random() - 0.5) * shake;\n camera.position.y += (Math.random() - 0.5) * shake;\n }\n\n // Distance tracking\n distance += playerSpeed * dt * 3;\n score = Math.floor(distance * 10 + avoided * 50);\n\n // Update HUD\n document.getElementById(\"distance\").textContent = Math.floor(distance);\n document.getElementById(\"score\").textContent = score;\n document.getElementById(\"avoided\").textContent = avoided;\n document.getElementById(\"speedVal\").textContent = Math.floor(playerSpeed * 4);\n\n // Wheel rotation\n const wheelRot = playerSpeed * dt * 5;\n playerCar.wheels.forEach((w) => {\n w.rotation.x += wheelRot;\n });\n\n // Headlight flicker at low speed\n if (playerSpeed < 2) {\n playerCar.children.forEach((c) => {\n if (c.isSpotLight) {\n c.intensity = 1 + Math.sin(time * 10) * 0.5;\n }\n });\n }\n }\n\n function updateTraffic(dt) {\n trafficCars.forEach((car) => {\n const ud = car.userData;\n // Move traffic toward player (relative movement)\n const relSpeed = playerSpeed - ud.speed * 3;\n ud.z += relSpeed * dt;\n\n // Sway\n const sway = Math.sin(time * ud.swaySpeed + ud.swayPhase) * ud.swayAmount;\n car.position.x = ud.laneX + sway;\n\n // Recycle cars that go too far ahead\n if (ud.z > 30) {\n ud.z = -300 - Math.random() * 100;\n ud.laneX = TRAFFIC_LANES[Math.floor(Math.random() * 5)];\n ud.speed = 0.15 + Math.random() * 0.25;\n car.position.z = ud.z;\n car.position.x = ud.laneX;\n }\n\n // Recycle cars behind\n if (ud.z < -350) {\n ud.z = 20 + Math.random() * 50;\n ud.laneX = TRAFFIC_LANES[Math.floor(Math.random() * 5)];\n car.position.z = ud.z;\n car.position.x = ud.laneX;\n }\n\n car.position.z = ud.z;\n\n // Collision detection\n const dx = Math.abs(car.position.x - playerCar.position.x);\n const dz = Math.abs(car.position.z - playerCar.position.z);\n if (dx < 1.5 && dz < 3.5 && playerSpeed > 2) {\n crashGame();\n }\n\n // Avoidance tracking\n if (dz < 2 && dz > 0.1 && Math.abs(dx) < 1.5) {\n avoided++;\n }\n });\n }\n\n function updateBuildings(dt) {\n buildings.forEach((b) => {\n b.z += playerSpeed * dt * 3;\n b.mesh.position.z = b.z;\n\n if (b.z > 50) {\n b.z = -600 - Math.random() * 200;\n b.mesh.position.z = b.z;\n }\n });\n }\n\n function updateStreetLights(dt) {\n streetLights.forEach((sl) => {\n sl.position.z += playerSpeed * dt * 3;\n if (sl.position.z > 50) {\n sl.position.z = -500 - Math.random() * 100;\n }\n });\n }\n\n function updateTrees(dt) {\n trees.forEach((t) => {\n t.position.z += playerSpeed * dt * 3;\n if (t.position.z > 50) {\n t.position.z = -500 - Math.random() * 100;\n }\n });\n }\n\n function updatePuddles(dt) {\n puddles.forEach((p) => {\n p.position.z += playerSpeed * dt * 3;\n if (p.position.z > 50) {\n p.position.z = -500 - Math.random() * 100;\n }\n });\n }\n\n function updateRain(dt) {\n rainDrops.forEach((rain) => {\n const pos = rain.userData.positions;\n for (let i = 0; i < pos.length / 3; i++) {\n pos[i * 3 + 1] -= playerSpeed * dt * 5 + 5;\n pos[i * 3] -= playerSpeed * dt * 2;\n if (pos[i * 3 + 1] < 0) {\n pos[i * 3 + 1] = 30;\n pos[i * 3] = (Math.random() - 0.5) * 40;\n pos[i * 3 + 2] = (Math.random() - 0.5) * 100;\n }\n }\n rain.geometry.attributes.position.needsUpdate = true;\n });\n }\n\n function updateRoadMarkings(dt) {\n const scrollSpeed = playerSpeed * dt * 3;\n roadMarkings.forEach((m) => {\n m.position.z += scrollSpeed;\n if (m.position.z > 30) {\n m.position.z -= 1000;\n }\n });\n }\n\n function updateMinimap() {\n const canvas = document.getElementById(\"minimapCanvas\");\n const ctx = canvas.getContext(\"2d\");\n ctx.fillStyle = \"#0a0a20\";\n ctx.fillRect(0, 0, 120, 300);\n\n // Road\n ctx.fillStyle = \"#1a1a2e\";\n ctx.fillRect(30, 0, 60, 300);\n\n // Lane lines\n ctx.strokeStyle = \"#333355\";\n ctx.setLineDash([5, 5]);\n for (let l = -2; l <= 2; l++) {\n ctx.beginPath();\n ctx.moveTo(60 + l * 12, 0);\n ctx.lineTo(60 + l * 12, 300);\n ctx.stroke();\n }\n ctx.setLineDash([]);\n\n // Traffic on minimap\n trafficCars.forEach((car) => {\n const mx = 60 + car.position.x;\n const my = 150 - car.position.z * 0.5;\n if (my > 0 && my < 300) {\n ctx.fillStyle = \"#ff4444\";\n ctx.fillRect(mx - 3, my - 3, 6, 6);\n }\n });\n\n // Player\n ctx.fillStyle = \"#00ffff\";\n ctx.fillRect(57, 260, 6, 12);\n\n // Player lane indicator\n ctx.strokeStyle = \"#00ffff\";\n ctx.lineWidth = 1;\n ctx.strokeRect(57, 260, 6, 12);\n }\n\n function crashGame() {\n gameOver = true;\n gameRunning = false;\n document.getElementById(\"crashDist\").textContent = `Distance: ${Math.floor(distance)}m`;\n document.getElementById(\"crashScreen\").style.display = \"flex\";\n\n // Crash effect\n playerCar.rotation.y = (Math.random() - 0.5) * 0.5;\n playerCar.rotation.z = -0.3;\n\n // Flash\n const flash = new THREE.PointLight(0xff4400, 5, 30);\n flash.position.copy(playerCar.position);\n scene.add(flash);\n setTimeout(() => scene.remove(flash), 500);\n }\n\n function onResize() {\n camera.aspect = window.innerWidth / window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n }\n\n let minimapTimer = 0;\n\n function animate() {\n requestAnimationFrame(animate);\n\n const dt = Math.min(clock.getDelta(), 0.05);\n time += dt;\n\n if (gameRunning && !gameOver) {\n updatePlayer(dt);\n updateTraffic(dt);\n updateBuildings(dt);\n updateStreetLights(dt);\n updateTrees(dt);\n updatePuddles(dt);\n updateRain(dt);\n updateRoadMarkings(dt);\n\n // Add new traffic periodically\n if (Math.random() < 0.01 && trafficCars.length < 40) {\n const laneIdx = Math.floor(Math.random() * 5);\n const lane = TRAFFIC_LANES[laneIdx];\n const type = Math.random() > 0.8 ? 2 : Math.random() > 0.5 ? 1 : 0;\n const car = createTrafficCar(type);\n const z = -200 - Math.random() * 50;\n car.position.set(lane, 0, z);\n car.userData = {\n lane: laneIdx,\n speed: 0.15 + Math.random() * 0.25,\n type: type,\n z: z,\n laneX: lane,\n swayAmount: Math.random() * 0.3,\n swaySpeed: 0.5 + Math.random() * 1.5,\n swayPhase: Math.random() * Math.PI * 2,\n };\n trafficCars.push(car);\n }\n\n // Remove far behind traffic\n trafficCars = trafficCars.filter((c) => c.position.z < 100);\n\n minimapTimer += dt;\n if (minimapTimer > 0.1) {\n updateMinimap();\n minimapTimer = 0;\n }\n }\n\n // Ambient building lights flicker\n buildings.forEach((b, i) => {\n b.mesh.children.forEach((child) => {\n if (child.material && child.material.emissive) {\n child.material.emissiveIntensity = 0.5 + Math.sin(time * 2 + i) * 0.2;\n }\n });\n });\n\n renderer.render(scene, camera);\n }\n\n function startGame() {\n document.getElementById(\"startScreen\").style.display = \"none\";\n gameRunning = true;\n gameOver = false;\n playerSpeed = 5;\n playerLane = 0;\n playerCar.position.x = 0;\n playerCar.rotation.set(0, 0, 0);\n distance = 0;\n score = 0;\n avoided = 0;\n time = 0;\n }\n\n function restartGame() {\n document.getElementById(\"crashScreen\").style.display = \"none\";\n\n // Remove old traffic\n trafficCars.forEach((c) => scene.remove(c));\n trafficCars = [];\n\n // Reset\n gameOver = false;\n gameRunning = true;\n playerSpeed = 5;\n playerLane = 0;\n playerCar.position.set(0, 0, 0);\n playerCar.rotation.set(0, 0, 0);\n distance = 0;\n score = 0;\n avoided = 0;\n time = 0;\n\n // Recreate traffic\n createTraffic();\n }\n\n init();\n animate();\n",[],[144,234,225],"MIDNIGHT-RACING","03bc45e8-4714-11f1-b525-42b51c65c3df","MIDNIGHT-RACING.html","03bc46a6-4714-11f1-b525-42b51c65c3df",37,["D",1777828671231],"\n\n \n \n \n Midnight Racing\n \n \n \n

MIDNIGHT RACING

Dodge traffic. Survive the night.

START ENGINE

\n\n

CRASHED!

Distance: 0m

RETRY

\n\n

DISTANCE: 0 m

SCORE: 0

TRAFFIC AVOIDED: 0

\n\n

KM/H

\n\n

\n A/D - Steer S - Brake W - Accelerate\n

\n\n

\n\n \n \n \n \n\n",[],[144,234,236],"03abab16-4714-11f1-9a5c-42b51c65c3df","MIDNIGHT-RACING.css","03ababc0-4714-11f1-9a5c-42b51c65c3df",35,["D",1777828671161]," * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n body {\n overflow: hidden;\n background: #000;\n font-family: \"Segoe UI\", sans-serif;\n }\n canvas {\n display: block;\n }\n #hud {\n position: fixed;\n top: 20px;\n left: 20px;\n z-index: 10;\n color: #0ff;\n font-size: 16px;\n text-shadow: 0 0 10px #0ff;\n pointer-events: none;\n }\n #hud div {\n margin-bottom: 8px;\n letter-spacing: 2px;\n }\n #speedometer {\n position: fixed;\n bottom: 30px;\n right: 30px;\n z-index: 10;\n width: 140px;\n height: 140px;\n border-radius: 50%;\n border: 3px solid #0ff;\n background: rgba(0, 0, 20, 0.7);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n pointer-events: none;\n box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);\n }\n #speedometer .speed-val {\n font-size: 36px;\n color: #0ff;\n font-weight: bold;\n }\n #speedometer .speed-unit {\n font-size: 12px;\n color: #08f;\n letter-spacing: 3px;\n }\n #controls {\n position: fixed;\n bottom: 20px;\n left: 20px;\n z-index: 10;\n color: #888;\n font-size: 13px;\n pointer-events: none;\n }\n #controls span {\n color: #0ff;\n font-weight: bold;\n }\n #minimap {\n position: fixed;\n top: 20px;\n right: 20px;\n z-index: 10;\n width: 120px;\n height: 300px;\n border: 2px solid #0ff;\n background: rgba(0, 5, 20, 0.8);\n pointer-events: none;\n border-radius: 4px;\n overflow: hidden;\n }\n #minimap canvas {\n width: 100%;\n height: 100%;\n }\n #startScreen {\n position: fixed;\n inset: 0;\n z-index: 100;\n background: radial-gradient(ellipse at center, #0a0a2e 0%, #000 70%);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: #fff;\n cursor: pointer;\n }\n #startScreen h1 {\n font-size: 64px;\n letter-spacing: 12px;\n margin-bottom: 10px;\n background: linear-gradient(to bottom, #0ff, #04a);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n text-shadow: none;\n filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.5));\n }\n #startScreen p {\n color: #668;\n font-size: 16px;\n letter-spacing: 4px;\n margin-bottom: 40px;\n }\n #startScreen .start-btn {\n padding: 15px 50px;\n border: 2px solid #0ff;\n color: #0ff;\n font-size: 20px;\n letter-spacing: 6px;\n cursor: pointer;\n background: rgba(0, 255, 255, 0.05);\n transition: all 0.3s;\n }\n #startScreen .start-btn:hover {\n background: rgba(0, 255, 255, 0.2);\n box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);\n }\n #crashScreen {\n position: fixed;\n inset: 0;\n z-index: 100;\n display: none;\n background: rgba(10, 0, 0, 0.9);\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: #f44;\n }\n #crashScreen h1 {\n font-size: 48px;\n letter-spacing: 8px;\n margin-bottom: 20px;\n }\n #crashScreen p {\n color: #a66;\n font-size: 18px;\n margin-bottom: 30px;\n }\n #crashScreen .restart-btn {\n padding: 15px 50px;\n border: 2px solid #f44;\n color: #f44;\n font-size: 20px;\n letter-spacing: 6px;\n cursor: pointer;\n background: rgba(255, 0, 0, 0.05);\n transition: all 0.3s;\n }\n #crashScreen .restart-btn:hover {\n background: rgba(255, 0, 0, 0.2);\n box-shadow: 0 0 30px rgba(255, 0, 0, 0.3);\n }\n",[],[144,234,244],"03898888-4714-11f1-b2ab-42b51c65c3df",33,["D",1777828670937],[194,195,196],[144,234],["D",1777828670819],[193,197],[144],"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",[],[151,260],"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",[],[151,268],["D",1773103064934],[190,191],[151],"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",[],[157,279],"7052ce94-1c20-11f1-82f9-42dde27851f2","script.ts","5aff238c-1c19-11f1-8ef6-42dde27851f2",29,["D",1773106107248],"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 gameSlowStatus = document.getElementById(\"game-slow-status\");\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\")!;\nconst avatarModal = document.getElementById(\"avatar-modal\")!;\nconst avatarUrlInput = document.getElementById(\"avatar-url-input\") as HTMLInputElement;\nconst avatarPreview = document.getElementById(\"avatar-preview\") as HTMLImageElement;\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// AVATAR MODAL\nfunction openAvatarModal(): void {\n if (!currentUser?.email) return;\n avatarUrlInput.value = currentUser.profileImageUrl || \"\";\n avatarPreview.src = currentUser.profileImageUrl || \"\";\n avatarPreview.style.display = currentUser.profileImageUrl ? \"\" : \"none\";\n avatarModal.style.display = \"\";\n}\n\nfunction closeAvatarModal(): void {\n avatarModal.style.display = \"none\";\n}\n\navatarUrlInput?.addEventListener(\"input\", () => {\n const url = avatarUrlInput.value.trim();\n if (url && (url.startsWith(\"http://\") || url.startsWith(\"https://\"))) {\n avatarPreview.src = url;\n avatarPreview.style.display = \"\";\n } else {\n avatarPreview.style.display = \"none\";\n }\n});\n\nasync function saveAvatar(): Promise {\n if (!currentUser?.email) return;\n const url = avatarUrlInput.value.trim();\n if (!url || (!url.startsWith(\"http://\") && !url.startsWith(\"https://\"))) return;\n\n const btn = document.getElementById(\"btn-avatar-save\") as HTMLButtonElement | null;\n if (btn) {\n btn.disabled = true;\n btn.textContent = \"SAVING...\";\n }\n\n try {\n await fetch(\"/api/profile/image\", {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ profileImageUrl: url }),\n });\n currentUser.profileImageUrl = url;\n renderAuth();\n closeAvatarModal();\n } catch {\n // ignore\n } finally {\n if (btn) {\n btn.disabled = false;\n btn.textContent = \"SAVE\";\n }\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 if (gameSpeedDisplay) {\n gameSpeedDisplay.style.display = \"\";\n gameSpeedDisplay.textContent = \"\";\n }\n if (gameSlowStatus) {\n gameSlowStatus.style.display = \"\";\n gameSlowStatus.textContent = \"\";\n gameSlowStatus.className = \"game-slow-status\";\n }\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 activeGameInstance = new SnakeGame(gameCanvas, onScoreUpdate, onGameOver, onSpeedUpdate, onSlowTimeStatus);\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 activeGameInstance = new TetrisGame(gameCanvas, onScoreUpdate, onGameOver, onSpeedUpdate, onSlowTimeStatus);\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 onSlowTimeStatus(status: { state: \"ready\" | \"active\" | \"cooldown\"; remaining?: number }): void {\n if (!gameSlowStatus) return;\n if (status.state === \"ready\") {\n gameSlowStatus.textContent = \"SLOW: READY\";\n gameSlowStatus.className = \"game-slow-status game-slow-status--ready\";\n } else if (status.state === \"active\") {\n gameSlowStatus.textContent = `SLOW: ${status.remaining}s`;\n gameSlowStatus.className = \"game-slow-status game-slow-status--active\";\n } else {\n gameSlowStatus.textContent = `SLOW: ${status.remaining}s`;\n gameSlowStatus.className = \"game-slow-status game-slow-status--cooldown\";\n }\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\") {\n if (avatarModal.style.display !== \"none\") {\n closeAvatarModal();\n } else if (activeGameInstance) {\n showLobby();\n }\n }\n});\n\n// Expose to HTML onclick handlers\n(window as any).__arcade = {\n showLobby,\n showGame,\n showLeaderboard,\n restartGame,\n switchLeaderboardTab,\n saveScore,\n openAvatarModal,\n closeAvatarModal,\n saveAvatar,\n};\n\n// Init\nfetchUser();\nloadLobbyLeaderboard(\"snake\");\n",[],[157,287],"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",[],[157,295],"704af69c-1c20-11f1-8344-42dde27851f2","game-tetris.ts","5b2d27b4-1c19-11f1-b34b-42dde27851f2",28,["D",1773106107315],"import { SLOW_TIME_DURATION, SLOW_TIME_COOLDOWN, SLOW_TIME_MULTIPLIER } from \"../Shared/config.ts\";\n\nconst COLS = 10;\nconst ROWS = 20;\nconst CELL = 25;\nconst SIDEBAR = 70;\nconst INITIAL_DROP = 800;\nconst LEVEL_SPEED_DROP = 60;\nconst MIN_DROP = 80;\nconst SIDEBAR_PAD_X = 10;\nconst SIDEBAR_PREVIEW_INSET = 14;\nconst PREVIEW_CELL = 12;\nconst SIDEBAR_NEXT_LABEL_Y = 24;\nconst SIDEBAR_NEXT_PREVIEW_Y = 36;\nconst SIDEBAR_HOLD_LABEL_Y = 82;\nconst SIDEBAR_HOLD_PREVIEW_Y = 94;\nconst SIDEBAR_LEVEL_LABEL_Y = 150;\nconst SIDEBAR_LEVEL_VALUE_Y = 168;\nconst SIDEBAR_LINES_LABEL_Y = 200;\nconst SIDEBAR_LINES_VALUE_Y = 218;\n\n// Tetromino shapes: each is array of rotations, each rotation is array of [row, col] offsets\nconst SHAPES: number[][][][] = [\n // I\n [[[0,0],[0,1],[0,2],[0,3]], [[0,0],[1,0],[2,0],[3,0]]],\n // O\n [[[0,0],[0,1],[1,0],[1,1]]],\n // T\n [[[0,0],[0,1],[0,2],[1,1]], [[0,0],[1,0],[2,0],[1,1]], [[0,1],[1,0],[1,1],[1,2]], [[0,0],[1,0],[2,0],[1,-1]]],\n // S\n [[[0,1],[0,2],[1,0],[1,1]], [[0,0],[1,0],[1,1],[2,1]]],\n // Z\n [[[0,0],[0,1],[1,1],[1,2]], [[0,1],[1,0],[1,1],[2,0]]],\n // J\n [[[0,0],[1,0],[1,1],[1,2]], [[0,0],[0,1],[1,0],[2,0]], [[0,0],[0,1],[0,2],[1,2]], [[0,0],[1,0],[2,0],[2,-1]]],\n // L\n [[[0,2],[1,0],[1,1],[1,2]], [[0,0],[1,0],[2,0],[2,1]], [[0,0],[0,1],[0,2],[1,0]], [[0,0],[0,1],[1,1],[2,1]]],\n];\n\nconst COLORS = [\n \"#00d4ff\", // I - cyan\n \"#ffe600\", // O - yellow\n \"#bf00ff\", // T - purple\n \"#39ff14\", // S - green\n \"#ff2d95\", // Z - pink\n \"#3366ff\", // J - blue\n \"#ff6b00\", // L - orange\n];\n\nconst GLOW_COLORS = [\n \"rgba(0,212,255,0.4)\",\n \"rgba(255,230,0,0.4)\",\n \"rgba(191,0,255,0.4)\",\n \"rgba(57,255,20,0.4)\",\n \"rgba(255,45,149,0.4)\",\n \"rgba(51,102,255,0.4)\",\n \"rgba(255,107,0,0.4)\",\n];\n\ninterface Piece {\n type: number;\n rotation: number;\n x: number;\n y: number;\n}\n\ninterface SlowTimeStatus {\n state: \"ready\" | \"active\" | \"cooldown\";\n remaining?: number;\n}\n\ninterface SlowParticle {\n x: number;\n y: number;\n vx: number;\n vy: number;\n alpha: number;\n size: number;\n}\n\nexport class TetrisGame {\n private canvas: HTMLCanvasElement;\n private ctx: CanvasRenderingContext2D;\n private onScore: (score: number) => void;\n private onGameOver: (score: number) => void;\n private onSpeedUpdate?: (speed: number) => void;\n private onSlowTimeStatus?: (status: SlowTimeStatus) => void;\n\n private board: number[][] = [];\n private current: Piece = { type: 0, rotation: 0, x: 0, y: 0 };\n private next: Piece = { type: 0, rotation: 0, x: 0, y: 0 };\n private score = 0;\n private level = 1;\n private lines = 0;\n private dropInterval: number;\n private lastDrop = 0;\n private isGameOver = false;\n private animFrameId: number | null = null;\n private keyHandler: (e: KeyboardEvent) => void;\n private heldPiece: { type: number; rotation: number } | null = null;\n private canHold = true;\n private slowTimeEnd = 0;\n private slowTimeCooldownEnd = 0;\n private wasSlowTime = false;\n private particles: SlowParticle[] = [];\n\n constructor(\n canvas: HTMLCanvasElement,\n onScore: (score: number) => void,\n onGameOver: (score: number) => void,\n onSpeedUpdate?: (speed: number) => void,\n onSlowTimeStatus?: (status: SlowTimeStatus) => void,\n ) {\n this.canvas = canvas;\n this.ctx = canvas.getContext(\"2d\")!;\n this.onScore = onScore;\n this.onGameOver = onGameOver;\n this.onSpeedUpdate = onSpeedUpdate;\n this.onSlowTimeStatus = onSlowTimeStatus;\n this.dropInterval = INITIAL_DROP;\n\n this.canvas.width = COLS * CELL + SIDEBAR;\n this.canvas.height = ROWS * CELL;\n\n // Init board\n this.board = Array.from({ length: ROWS }, () => Array(COLS).fill(-1));\n\n this.next = this.randomPiece();\n this.spawnPiece();\n\n this.keyHandler = (e: KeyboardEvent) => this.handleKey(e);\n document.addEventListener(\"keydown\", this.keyHandler);\n\n this.lastDrop = performance.now();\n this.loop(performance.now());\n this.onSpeedUpdate?.(Math.round(1000 / this.dropInterval));\n this.onSlowTimeStatus?.({ state: \"ready\" });\n }\n\n private randomPiece(): Piece {\n return {\n type: Math.floor(Math.random() * SHAPES.length),\n rotation: 0,\n x: Math.floor(COLS / 2) - 1,\n y: 0,\n };\n }\n\n private spawnPiece(): void {\n this.canHold = true;\n this.current = { ...this.next };\n this.next = this.randomPiece();\n this.current.x = Math.floor(COLS / 2) - 1;\n this.current.y = 0;\n\n if (!this.isValid(this.current)) {\n this.isGameOver = true;\n this.onGameOver(this.score);\n }\n }\n\n private getCells(piece: Piece): [number, number][] {\n const shape = SHAPES[piece.type];\n const rot = shape[piece.rotation % shape.length];\n return rot.map(([r, c]) => [piece.y + r, piece.x + c]);\n }\n\n private isValid(piece: Piece): boolean {\n for (const [r, c] of this.getCells(piece)) {\n if (c < 0 || c >= COLS || r >= ROWS) return false;\n if (r >= 0 && this.board[r][c] !== -1) return false;\n }\n return true;\n }\n\n private lock(): void {\n for (const [r, c] of this.getCells(this.current)) {\n if (r >= 0 && r < ROWS && c >= 0 && c < COLS) {\n this.board[r][c] = this.current.type;\n }\n }\n this.clearLines();\n this.spawnPiece();\n }\n\n private clearLines(): void {\n let cleared = 0;\n for (let r = ROWS - 1; r >= 0; r--) {\n if (this.board[r].every((c) => c !== -1)) {\n this.board.splice(r, 1);\n this.board.unshift(Array(COLS).fill(-1));\n cleared++;\n r++; // re-check same row\n }\n }\n\n if (cleared > 0) {\n const multipliers = [0, 100, 300, 500, 800];\n this.score += (multipliers[cleared] || 800) * this.level;\n this.lines += cleared;\n this.onScore(this.score);\n\n const newLevel = Math.floor(this.lines / 10) + 1;\n if (newLevel !== this.level) {\n this.level = newLevel;\n this.dropInterval = Math.max(MIN_DROP, INITIAL_DROP - (this.level - 1) * LEVEL_SPEED_DROP);\n this.onSpeedUpdate?.(Math.round(1000 / this.getEffectiveDropInterval()));\n }\n }\n }\n\n private getGhostY(): number {\n let ghostY = this.current.y;\n const test = { ...this.current };\n while (true) {\n test.y = ghostY + 1;\n if (!this.isValid(test)) break;\n ghostY++;\n }\n return ghostY;\n }\n\n private holdPiece(): void {\n if (!this.canHold) return;\n\n const spawnX = Math.floor(COLS / 2) - 1;\n\n if (this.heldPiece === null) {\n this.heldPiece = { type: this.current.type, rotation: this.current.rotation };\n this.current = { ...this.next, x: spawnX, y: 0 };\n this.next = this.randomPiece();\n } else {\n const temp = this.heldPiece;\n this.heldPiece = { type: this.current.type, rotation: this.current.rotation };\n this.current = {\n type: temp.type,\n rotation: temp.rotation,\n x: spawnX,\n y: 0,\n };\n }\n this.canHold = false;\n this.lastDrop = performance.now();\n }\n\n private handleKey(e: KeyboardEvent): void {\n if (this.isGameOver) return;\n\n const key = e.key.toLowerCase();\n let handled = true;\n\n if (key === \"arrowleft\" || key === \"a\") {\n this.tryMove(-1, 0);\n } else if (key === \"arrowright\" || key === \"d\") {\n this.tryMove(1, 0);\n } else if (key === \"arrowdown\" || key === \"s\") {\n this.tryMove(0, 1);\n this.lastDrop = performance.now();\n } else if (key === \"arrowup\" || key === \"w\") {\n this.tryRotate();\n } else if (key === \" \") {\n this.hardDrop();\n } else if (key === \"c\") {\n this.holdPiece();\n } else if (key === \"z\") {\n const now = performance.now();\n if (now > this.slowTimeCooldownEnd) {\n this.slowTimeEnd = now + SLOW_TIME_DURATION;\n this.slowTimeCooldownEnd = now + SLOW_TIME_COOLDOWN;\n this.wasSlowTime = true;\n this.onSpeedUpdate?.(Math.round(1000 / this.getEffectiveDropInterval()));\n }\n e.preventDefault();\n } else {\n handled = false;\n }\n\n if (handled) e.preventDefault();\n }\n\n private tryMove(dx: number, dy: number): boolean {\n const test = { ...this.current, x: this.current.x + dx, y: this.current.y + dy };\n if (this.isValid(test)) {\n this.current = test;\n return true;\n }\n return false;\n }\n\n private tryRotate(): void {\n const shape = SHAPES[this.current.type];\n const nextRot = (this.current.rotation + 1) % shape.length;\n const test = { ...this.current, rotation: nextRot };\n\n // Try basic rotation\n if (this.isValid(test)) {\n this.current = test;\n return;\n }\n\n // Wall kick attempts\n for (const dx of [-1, 1, -2, 2]) {\n const kicked = { ...test, x: test.x + dx };\n if (this.isValid(kicked)) {\n this.current = kicked;\n return;\n }\n }\n }\n\n private hardDrop(): void {\n this.current.y = this.getGhostY();\n this.lock();\n this.lastDrop = performance.now();\n }\n\n private getEffectiveDropInterval(): number {\n const now = performance.now();\n if (now < this.slowTimeEnd) {\n return Math.ceil(this.dropInterval * SLOW_TIME_MULTIPLIER);\n }\n return this.dropInterval;\n }\n\n private loop(now: number): void {\n if (this.isGameOver) return;\n\n // Detect slow-time state transitions\n const isSlowTime = now < this.slowTimeEnd;\n if (this.wasSlowTime && !isSlowTime) {\n this.wasSlowTime = false;\n this.onSpeedUpdate?.(Math.round(1000 / this.dropInterval));\n }\n\n // Report slow-time status every frame\n if (isSlowTime) {\n this.onSlowTimeStatus?.({ state: \"active\", remaining: Math.ceil((this.slowTimeEnd - now) / 1000) });\n } else if (now < this.slowTimeCooldownEnd) {\n this.onSlowTimeStatus?.({ state: \"cooldown\", remaining: Math.ceil((this.slowTimeCooldownEnd - now) / 1000) });\n } else {\n this.onSlowTimeStatus?.({ state: \"ready\" });\n }\n\n // Slow-time particles\n const bw = COLS * CELL;\n const h = ROWS * CELL;\n if (isSlowTime) {\n for (let i = 0; i < 2; i++) {\n this.particles.push({\n x: Math.random() * bw,\n y: Math.random() * h,\n vx: (Math.random() - 0.5) * 0.5,\n vy: -Math.random() * 1.5 - 0.5,\n alpha: 0.8 + Math.random() * 0.2,\n size: Math.random() * 2 + 1,\n });\n }\n }\n for (let i = this.particles.length - 1; i >= 0; i--) {\n const p = this.particles[i];\n p.x += p.vx;\n p.y += p.vy;\n p.alpha -= 0.015;\n if (p.alpha <= 0) this.particles.splice(i, 1);\n }\n\n const effectiveInterval = this.getEffectiveDropInterval();\n if (now - this.lastDrop >= effectiveInterval) {\n if (!this.tryMove(0, 1)) {\n this.lock();\n }\n this.lastDrop = now;\n }\n\n this.render();\n this.animFrameId = requestAnimationFrame((t) => this.loop(t));\n }\n\n private render(): void {\n const ctx = this.ctx;\n const bw = COLS * CELL;\n const h = ROWS * CELL;\n const totalW = bw + SIDEBAR;\n\n // Background\n ctx.fillStyle = \"#080810\";\n ctx.fillRect(0, 0, totalW, h);\n\n // Grid\n ctx.strokeStyle = \"rgba(30, 30, 60, 0.25)\";\n ctx.lineWidth = 0.5;\n for (let x = 0; x <= COLS; x++) {\n ctx.beginPath();\n ctx.moveTo(x * CELL, 0);\n ctx.lineTo(x * CELL, h);\n ctx.stroke();\n }\n for (let y = 0; y <= ROWS; y++) {\n ctx.beginPath();\n ctx.moveTo(0, y * CELL);\n ctx.lineTo(bw, y * CELL);\n ctx.stroke();\n }\n\n // Locked blocks\n for (let r = 0; r < ROWS; r++) {\n for (let c = 0; c < COLS; c++) {\n if (this.board[r][c] !== -1) {\n this.drawCell(c, r, this.board[r][c], 1.0);\n }\n }\n }\n\n // Ghost piece\n const ghostY = this.getGhostY();\n const ghostPiece = { ...this.current, y: ghostY };\n for (const [r, c] of this.getCells(ghostPiece)) {\n if (r >= 0) {\n this.drawCell(c, r, this.current.type, 0.15);\n }\n }\n\n // Current piece\n for (const [r, c] of this.getCells(this.current)) {\n if (r >= 0) {\n this.drawCell(c, r, this.current.type, 1.0);\n }\n }\n\n // Slow-time particles\n for (const p of this.particles) {\n ctx.globalAlpha = p.alpha;\n ctx.fillStyle = \"#00d4ff\";\n ctx.shadowColor = \"#00d4ff\";\n ctx.shadowBlur = 6;\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);\n ctx.fill();\n }\n ctx.globalAlpha = 1;\n ctx.shadowColor = \"transparent\";\n ctx.shadowBlur = 0;\n\n // Sidebar separator\n ctx.fillStyle = \"#1a1a30\";\n ctx.fillRect(bw, 0, 1, h);\n\n // Sidebar background\n ctx.fillStyle = \"#0a0a14\";\n ctx.fillRect(bw + 1, 0, SIDEBAR - 1, h);\n\n // Next piece label\n ctx.fillStyle = \"#606080\";\n ctx.font = \"7px 'Press Start 2P'\";\n ctx.fillText(\"NEXT\", bw + SIDEBAR_PAD_X, SIDEBAR_NEXT_LABEL_Y);\n\n // Next piece preview\n const nextShape = SHAPES[this.next.type][0];\n const previewX = bw + SIDEBAR_PREVIEW_INSET;\n for (const [r, c] of nextShape) {\n ctx.fillStyle = COLORS[this.next.type];\n ctx.fillRect(\n previewX + c * PREVIEW_CELL,\n SIDEBAR_NEXT_PREVIEW_Y + r * PREVIEW_CELL,\n PREVIEW_CELL - 1,\n PREVIEW_CELL - 1,\n );\n }\n\n // Hold piece label and preview\n ctx.fillStyle = \"#606080\";\n ctx.font = \"7px 'Press Start 2P'\";\n ctx.fillText(\"HOLD\", bw + SIDEBAR_PAD_X, SIDEBAR_HOLD_LABEL_Y);\n if (this.heldPiece !== null) {\n const holdShape = SHAPES[this.heldPiece.type][this.heldPiece.rotation % SHAPES[this.heldPiece.type].length];\n const holdPreviewX = bw + SIDEBAR_PREVIEW_INSET;\n for (const [r, c] of holdShape) {\n ctx.fillStyle = COLORS[this.heldPiece.type];\n ctx.fillRect(\n holdPreviewX + c * PREVIEW_CELL,\n SIDEBAR_HOLD_PREVIEW_Y + r * PREVIEW_CELL,\n PREVIEW_CELL - 1,\n PREVIEW_CELL - 1,\n );\n }\n }\n\n // Level\n ctx.fillStyle = \"#606080\";\n ctx.font = \"6px 'Press Start 2P'\";\n ctx.fillText(\"LEVEL\", bw + SIDEBAR_PAD_X, SIDEBAR_LEVEL_LABEL_Y);\n ctx.fillStyle = \"#00d4ff\";\n ctx.font = \"10px 'Press Start 2P'\";\n ctx.fillText(`${this.level}`, bw + SIDEBAR_PAD_X, SIDEBAR_LEVEL_VALUE_Y);\n\n // Lines\n ctx.fillStyle = \"#606080\";\n ctx.font = \"6px 'Press Start 2P'\";\n ctx.fillText(\"LINES\", bw + SIDEBAR_PAD_X, SIDEBAR_LINES_LABEL_Y);\n ctx.fillStyle = \"#bf00ff\";\n ctx.font = \"10px 'Press Start 2P'\";\n ctx.fillText(`${this.lines}`, bw + SIDEBAR_PAD_X, SIDEBAR_LINES_VALUE_Y);\n }\n\n private drawCell(col: number, row: number, type: number, alpha: number): void {\n const ctx = this.ctx;\n const x = col * CELL;\n const y = row * CELL;\n\n if (alpha < 1) {\n ctx.globalAlpha = alpha;\n }\n\n ctx.fillStyle = COLORS[type];\n ctx.fillRect(x + 1, y + 1, CELL - 2, CELL - 2);\n\n // Inner highlight\n ctx.fillStyle = `rgba(255,255,255,${0.15 * alpha})`;\n ctx.fillRect(x + 1, y + 1, CELL - 2, 2);\n ctx.fillRect(x + 1, y + 1, 2, CELL - 2);\n\n // Inner shadow\n ctx.fillStyle = `rgba(0,0,0,${0.2 * alpha})`;\n ctx.fillRect(x + 1, y + CELL - 3, CELL - 2, 2);\n ctx.fillRect(x + CELL - 3, y + 1, 2, CELL - 2);\n\n if (alpha < 1) {\n ctx.globalAlpha = 1;\n }\n }\n\n destroy(): void {\n this.isGameOver = true;\n if (this.animFrameId !== null) {\n cancelAnimationFrame(this.animFrameId);\n this.animFrameId = null;\n }\n document.removeEventListener(\"keydown\", this.keyHandler);\n }\n}\n",[],[157,303],"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",[],[157,311],["D",1773103064650],[184,185,186,187,188],[157],"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",[],[163,322],"705d36b8-1c20-11f1-91dd-42dde27851f2","routes.api.ts","5b0b54c2-1c19-11f1-a014-42dde27851f2",31,["D",1773106107435],"import { Hono } from \"npm:hono@4.11.5\";\nimport { getOAuthUserData } from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport { upsertUser, updateProfileImage } from \"./db.users.ts\";\nimport { saveScore, getLeaderboard, getPersonalBest } from \"./db.scores.ts\";\nimport { VALID_GAMES } from \"../Shared/config.ts\";\nimport type { SubmitScoreRequest } from \"../Shared/types.ts\";\n\nconst app = new Hono();\n\nconst MAX_SCORES: Record = {\n snake: 10000,\n tetris: 999999,\n};\n\napp.get(\"/scores/:game\", async (c) => {\n const game = c.req.param(\"game\");\n if (!VALID_GAMES.includes(game as any)) {\n return c.json({ error: \"Invalid game\" }, 400);\n }\n const leaderboard = await getLeaderboard(game);\n return c.json(leaderboard);\n});\n\napp.get(\"/scores/:game/me\", async (c) => {\n const game = c.req.param(\"game\");\n if (!VALID_GAMES.includes(game as any)) {\n return c.json({ error: \"Invalid game\" }, 400);\n }\n const session = await getOAuthUserData(c.req.raw);\n const email = session?.user?.email;\n if (!email) {\n return c.json({ error: \"Unauthorized\" }, 401);\n }\n const best = await getPersonalBest(game, email);\n return c.json(best);\n});\n\napp.post(\"/scores\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n const email = session?.user?.email;\n const username = session?.user?.username ?? null;\n const profileImageUrl = session?.user?.profileImageUrl ?? null;\n if (!email) {\n return c.json({ error: \"Unauthorized\" }, 401);\n }\n\n const body = (await c.req.json()) as SubmitScoreRequest;\n const { game, score } = body;\n\n if (!VALID_GAMES.includes(game as any)) {\n return c.json({ error: \"Invalid game\" }, 400);\n }\n if (typeof score !== \"number\" || score < 0 || !Number.isInteger(score)) {\n return c.json({ error: \"Invalid score\" }, 400);\n }\n const maxScore = MAX_SCORES[game] ?? 999999;\n if (score > maxScore) {\n return c.json({ error: \"Score exceeds maximum\" }, 400);\n }\n\n await upsertUser(email, username, profileImageUrl);\n await saveScore(game, email, username, score);\n\n return c.json({ success: true });\n});\n\napp.put(\"/profile/image\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n const email = session?.user?.email;\n if (!email) {\n return c.json({ error: \"Unauthorized\" }, 401);\n }\n\n const body = (await c.req.json()) as { profileImageUrl: string };\n const { profileImageUrl } = body;\n\n if (\n typeof profileImageUrl !== \"string\" ||\n (!profileImageUrl.startsWith(\"http://\") && !profileImageUrl.startsWith(\"https://\"))\n ) {\n return c.json({ error: \"Invalid URL\" }, 400);\n }\n\n await updateProfileImage(email, profileImageUrl);\n return c.json({ success: true });\n});\n\nexport default app;\n",[],[163,330],"7057e7ee-1c20-11f1-8344-42dde27851f2","db.users.ts","5b1a96ee-1c19-11f1-9123-42dde27851f2",30,["D",1773106107426],"import sqlite from \"https://esm.town/v/std/db/main.ts\";\nimport type { UserInfo } from \"../Shared/types.ts\";\nimport { USERS_TABLE } from \"../Shared/config.ts\";\n\nexport async function initializeUsersTable(): Promise {\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS ${USERS_TABLE} (\n email TEXT PRIMARY KEY,\n username TEXT,\n profileImageUrl TEXT\n )`);\n}\n\nexport async function upsertUser(\n email: string,\n username: string | null,\n profileImageUrl: string | null,\n): Promise {\n await sqlite.execute(\n `INSERT INTO ${USERS_TABLE} (email, username, profileImageUrl)\n VALUES (?, ?, ?)\n ON CONFLICT(email) DO UPDATE SET\n username = excluded.username,\n profileImageUrl = excluded.profileImageUrl`,\n [email, username, profileImageUrl],\n );\n}\n\nexport async function updateProfileImage(\n email: string,\n profileImageUrl: string,\n): Promise {\n await sqlite.execute(\n `UPDATE ${USERS_TABLE} SET profileImageUrl = ? WHERE email = ?`,\n [profileImageUrl, email],\n );\n}\n\nexport async function getUser(email: string): Promise {\n const result = await sqlite.execute(\n `SELECT * FROM ${USERS_TABLE} WHERE email = ?`,\n [email],\n );\n\n if (result.rows.length === 0) {\n return null;\n }\n\n const row = result.rows[0] as any;\n return {\n email: row.email,\n username: row.username,\n profileImageUrl: row.profileImageUrl,\n };\n}\n",[],[163,338],"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",[],[163,346],["D",1773103064759],[179,180,181,182],[163],["D",1773102983877],["D",1789521041830],{"_96":95,"_103":99},{"_96":95,"_97":-5,"_98":99,"_18":53,"_100":101,"_102":24},{"_13":85,"_31":86,"_41":40,"_87":42,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":43,"_94":95},"ctx",{"_78":-5,"_123":394,"_395":396,"_397":398,"_399":24,"_400":24,"_401":24,"_402":121,"_403":-5,"_404":-7,"_405":-7,"_406":59,"_407":24,"_408":24,"_409":-5,"_410":24,"_411":24,"_412":24,"_413":-5},"ENV",{"_365":366,"_367":368,"_369":86,"_370":371,"_372":373,"_374":375,"_376":377,"_378":379,"_380":381,"_382":383,"_384":385,"_386":387,"_388":389,"_390":391,"_392":393},"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"]

MIDNIGHT RACING

CRASHED!

SELECTYOUR GAME

HIGH SCORES

GAME OVER

CHANGE AVATAR

SELECT
YOUR GAME

Diff · v39