[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_407":408,"_409":410},"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",49,"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","FRONTEND/snake2/styles.css","latestPath","fileId","4e76d066-6600-11f1-9022-1607ee4eb77e","name","styles.css","fileType","content"," :root{\n --bg:#07090d; --panel:#0d1117; --line:#1b2330; --ink:#c9d4e3; --dim:#5a6b80;\n --green:#3dd56d; --green2:#9ef0b4; --red:#ff5b4d; --amber:#ffb454; --cyan:#56c8ff;\n --mono:ui-monospace,\"Cascadia Code\",Consolas,\"SF Mono\",Menlo,monospace;\n }\n *{margin:0;padding:0;box-sizing:border-box}\n html,body{height:100%;background:var(--bg);overflow:hidden}\n body{font-family:var(--mono);color:var(--ink)}\n\n #stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}\n #rig{width:990px;display:flex;flex-direction:column;gap:0;transform-origin:center center}\n\n /* ---- build chrome: top bar ---- */\n #topbar{\n display:flex;align-items:center;gap:14px;height:34px;padding:0 12px;\n background:var(--panel);border:1px solid var(--line);border-bottom:none;\n border-radius:8px 8px 0 0;font-size:12px;letter-spacing:.04em;color:var(--dim);\n user-select:none;\n }\n #buildname{color:var(--ink);font-weight:600;white-space:nowrap}\n #version{color:var(--green);white-space:nowrap}\n #statusdot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}\n #memgag{margin-left:auto;white-space:nowrap}\n #hudscore{color:var(--ink);font-weight:600;white-space:nowrap}\n #hudlen{white-space:nowrap}\n\n /* ---- canvas frame ---- */\n #frame{position:relative;border:1px solid var(--line);background:#000;line-height:0}\n canvas{display:block;width:988px;height:556px;image-rendering:auto}\n\n /* ---- subtitle (snake voice) ---- */\n #saybar{\n height:44px;display:flex;align-items:center;justify-content:center;padding:0 16px;\n background:var(--panel);border:1px solid var(--line);border-top:none;border-radius:0 0 8px 8px;\n font-size:14.5px;letter-spacing:.02em;color:var(--green2);text-align:center;\n text-shadow:0 0 12px rgba(61,213,109,.35);user-select:none;white-space:nowrap;overflow:hidden;\n }\n #saybar .cur{display:inline-block;width:8px;height:15px;background:var(--green2);margin-left:3px;\n vertical-align:-2px;animation:blink 1s steps(1) infinite}\n @keyframes blink{50%{opacity:0}}\n #hudscore{transition:transform .12s ease-out,color .25s}\n #hudscore.pop{transform:scale(1.28);color:var(--green2)}\n\n /* ---- patch toasts (dev voice) ---- */\n #toasts{position:absolute;top:46px;right:10px;width:300px;display:flex;flex-direction:column;gap:8px;z-index:30;pointer-events:none}\n .toast{\n background:#10161f;border:1px solid #233044;border-left:3px solid var(--cyan);\n border-radius:6px;padding:9px 11px;font-size:11.5px;line-height:1.5;color:var(--ink);\n box-shadow:0 8px 24px rgba(0,0,0,.55);opacity:0;transform:translateX(24px);\n transition:opacity .3s,transform .3s;\n }\n .toast.show{opacity:1;transform:translateX(0)}\n .toast.hide{opacity:0;transform:translateX(24px)}\n .toast .tt{color:var(--cyan);font-weight:700;letter-spacing:.06em;margin-bottom:3px}\n .toast.warn{border-left-color:var(--amber)} .toast.warn .tt{color:var(--amber)}\n .toast.crit{border-left-color:var(--red)} .toast.crit .tt{color:var(--red)}\n .toast .body{color:#9fb0c4;white-space:pre-wrap}\n\n #hint{position:absolute;left:12px;top:46px;font-size:11px;color:#3c4a5e;z-index:5;user-select:none;\n text-shadow:0 1px 2px #000}\n","createdAt",["D",1781228692736],"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":402,"_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":403,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":404,"_80":405,"_82":406,"_84":24},"tree",[186,191,200,203,212,213],"files",[186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213],"counts",{"_176":59,"_177":167,"_178":59,"_179":180,"_181":182},"contents",[126,127,128,129,130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_41":170,"_31":171,"_29":172,"_135":-5,"_39":40,"_38":173,"_137":121,"_36":174,"_13":59,"_33":156,"_34":-5,"_23":24,"_140":-5,"_26":175},{"_41":164,"_31":165,"_29":166,"_135":-5,"_39":40,"_38":167,"_137":121,"_36":168,"_13":59,"_33":156,"_34":-5,"_23":24,"_140":-5,"_26":169},{"_41":158,"_31":159,"_29":160,"_135":-5,"_39":40,"_38":161,"_137":121,"_36":162,"_13":59,"_33":156,"_34":-5,"_23":24,"_140":-5,"_26":163},{"_41":151,"_31":152,"_29":153,"_135":-5,"_39":40,"_38":154,"_137":121,"_36":155,"_13":59,"_33":156,"_34":-5,"_23":24,"_140":-5,"_26":157},{"_41":142,"_31":143,"_29":144,"_135":-5,"_39":40,"_38":145,"_137":121,"_36":146,"_13":59,"_33":147,"_34":148,"_23":24,"_140":149,"_26":150},{"_41":132,"_31":133,"_29":134,"_135":-5,"_39":40,"_38":136,"_137":121,"_36":138,"_13":59,"_33":20,"_34":139,"_23":24,"_140":-5,"_26":141},"b2361ea4-d02b-4c25-b026-352bd496fe7e","justfile","f36cdbca-65ff-11f1-aaff-1607ee4eb77e","parentId",41,"latest",["D",1781228540014],"# Deploy this val (Vals_p1/arcade-games)\n\nval_url := \"https://arfan-arcade-games.val.run/\"\n\ndefault:\n @just --choose\n\n[private]\n_notify-done:\n #!/usr/bin/env bash\n afplay /System/Library/Sounds/Glass.aiff 2>/dev/null || true\n osascript -e 'tell application \"System Events\" to beep 2' 2>/dev/null || true\n\npush:\n #!/usr/bin/env bash\n set -euo pipefail\n cd \"{{ justfile_directory() }}\"\n vt push\n just _notify-done\n\nopen:\n #!/usr/bin/env bash\n set -euo pipefail\n cd \"{{ justfile_directory() }}\"\n vt push\n just _notify-done\n open -a \"Google Chrome\" \"{{ val_url }}\"\n\nrefresh:\n #!/usr/bin/env bash\n set -euo pipefail\n cd \"{{ justfile_directory() }}\"\n vt push\n just _notify-done\n open -a \"Google Chrome\" \"{{ val_url }}\"\n sleep 1\n vt push\n\ndry-run:\n #!/usr/bin/env bash\n set -euo pipefail\n cd \"{{ justfile_directory() }}\"\n echo \"Dry run — would push from: $(pwd)\"\n echo \"Target URL: {{ val_url }}\"\n vt push --dry-run 2>/dev/null || { echo \"(vt does not support --dry-run; listing:)\"; ls -1; }\n\nstatus:\n #!/usr/bin/env bash\n set -euo pipefail\n cd \"{{ justfile_directory() }}\"\n vt status\n","label",[133],"5b3a2522-1c19-11f1-9123-42dde27851f2","app.http.ts","5b3a25f4-1c19-11f1-9123-42dde27851f2",14,["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","arfan-arcade-games",[143],"0379c808-4714-11f1-b2ab-42b51c65c3df","tmp","0379c8d0-4714-11f1-b2ab-42b51c65c3df",32,["D",1777828670819],"directory",[152],"5adcfc12-1c19-11f1-a014-42dde27851f2","Shared","5adcfcee-1c19-11f1-a014-42dde27851f2",3,["D",1773103064934],[159],"5ab24d14-1c19-11f1-9226-42dde27851f2","FRONTEND","5ab24e0e-1c19-11f1-9226-42dde27851f2",1,["D",1773103064650],[165],"5ac24412-1c19-11f1-9226-42dde27851f2","BACKEND","5ac244d0-1c19-11f1-9226-42dde27851f2",2,["D",1773103064759],[171],"pulls","branches","forks","envVars",{"_183":59,"_185":59},"connections",{"_183":59,"_184":59},"count","unfilledCount","emptyCount",{"_41":170,"_31":171,"_29":172,"_135":-5,"_39":40,"_38":173,"_137":121,"_36":399,"_13":59,"_33":156,"_34":-5,"_23":24,"_140":-5,"_215":400,"_26":401},{"_41":391,"_31":392,"_29":393,"_135":172,"_39":40,"_38":394,"_137":121,"_36":395,"_13":59,"_33":227,"_34":396,"_23":24,"_140":-5,"_215":397,"_26":398},{"_41":383,"_31":384,"_29":385,"_135":172,"_39":40,"_38":386,"_137":121,"_36":387,"_13":167,"_33":227,"_34":388,"_23":24,"_140":-5,"_215":389,"_26":390},{"_41":375,"_31":376,"_29":377,"_135":172,"_39":40,"_38":378,"_137":121,"_36":379,"_13":173,"_33":227,"_34":380,"_23":24,"_140":-5,"_215":381,"_26":382},{"_41":367,"_31":368,"_29":369,"_135":172,"_39":40,"_38":370,"_137":121,"_36":371,"_13":59,"_33":227,"_34":372,"_23":24,"_140":-5,"_215":373,"_26":374},{"_41":164,"_31":165,"_29":166,"_135":-5,"_39":40,"_38":167,"_137":121,"_36":364,"_13":59,"_33":156,"_34":-5,"_23":24,"_140":-5,"_215":365,"_26":366},{"_41":359,"_31":351,"_29":347,"_135":166,"_39":40,"_38":360,"_137":121,"_36":361,"_13":59,"_33":156,"_34":-5,"_23":24,"_140":-5,"_215":362,"_26":363},{"_41":352,"_31":323,"_29":353,"_135":347,"_39":40,"_38":354,"_137":121,"_36":355,"_13":59,"_33":20,"_34":356,"_23":24,"_140":-5,"_215":357,"_26":358},{"_41":346,"_31":32,"_29":30,"_135":347,"_39":40,"_38":14,"_137":121,"_36":348,"_13":59,"_33":20,"_34":35,"_23":24,"_140":-5,"_215":349,"_26":350},{"_41":338,"_31":339,"_29":340,"_135":166,"_39":40,"_38":341,"_137":121,"_36":342,"_13":161,"_33":227,"_34":343,"_23":24,"_140":-5,"_215":344,"_26":345},{"_41":330,"_31":331,"_29":332,"_135":166,"_39":40,"_38":333,"_137":121,"_36":334,"_13":161,"_33":227,"_34":335,"_23":24,"_140":-5,"_215":336,"_26":337},{"_41":322,"_31":323,"_29":324,"_135":166,"_39":40,"_38":325,"_137":121,"_36":326,"_13":161,"_33":20,"_34":327,"_23":24,"_140":-5,"_215":328,"_26":329},{"_41":313,"_31":314,"_29":315,"_135":166,"_39":40,"_38":316,"_137":24,"_36":317,"_13":318,"_33":227,"_34":319,"_23":24,"_140":-5,"_215":320,"_26":321},{"_41":306,"_31":32,"_29":307,"_135":166,"_39":40,"_38":308,"_137":121,"_36":309,"_13":161,"_33":20,"_34":310,"_23":24,"_140":-5,"_215":311,"_26":312},{"_41":158,"_31":159,"_29":160,"_135":-5,"_39":40,"_38":161,"_137":121,"_36":303,"_13":59,"_33":156,"_34":-5,"_23":24,"_140":-5,"_215":304,"_26":305},{"_41":295,"_31":296,"_29":297,"_135":160,"_39":40,"_38":298,"_137":121,"_36":299,"_13":173,"_33":227,"_34":300,"_23":24,"_140":-5,"_215":301,"_26":302},{"_41":287,"_31":288,"_29":289,"_135":160,"_39":40,"_38":290,"_137":121,"_36":291,"_13":59,"_33":227,"_34":292,"_23":24,"_140":-5,"_215":293,"_26":294},{"_41":151,"_31":152,"_29":153,"_135":-5,"_39":40,"_38":154,"_137":121,"_36":284,"_13":59,"_33":156,"_34":-5,"_23":24,"_140":-5,"_215":285,"_26":286},{"_41":279,"_31":262,"_29":256,"_135":153,"_39":40,"_38":280,"_137":121,"_36":281,"_13":59,"_33":156,"_34":-5,"_23":24,"_140":-5,"_215":282,"_26":283},{"_41":271,"_31":272,"_29":273,"_135":256,"_39":40,"_38":274,"_137":121,"_36":275,"_13":59,"_33":20,"_34":276,"_23":24,"_140":-5,"_215":277,"_26":278},{"_41":263,"_31":264,"_29":265,"_135":256,"_39":40,"_38":266,"_137":121,"_36":267,"_13":59,"_33":20,"_34":268,"_23":24,"_140":-5,"_215":269,"_26":270},{"_41":253,"_31":254,"_29":255,"_135":256,"_39":40,"_38":257,"_137":121,"_36":258,"_13":59,"_33":227,"_34":259,"_23":24,"_140":-5,"_215":260,"_26":261},{"_41":248,"_31":231,"_29":224,"_135":153,"_39":40,"_38":249,"_137":121,"_36":250,"_13":59,"_33":156,"_34":-5,"_23":24,"_140":-5,"_215":251,"_26":252},{"_41":240,"_31":241,"_29":242,"_135":224,"_39":40,"_38":243,"_137":121,"_36":244,"_13":59,"_33":20,"_34":245,"_23":24,"_140":-5,"_215":246,"_26":247},{"_41":232,"_31":233,"_29":234,"_135":224,"_39":40,"_38":235,"_137":121,"_36":236,"_13":59,"_33":20,"_34":237,"_23":24,"_140":-5,"_215":238,"_26":239},{"_41":221,"_31":222,"_29":223,"_135":224,"_39":40,"_38":225,"_137":121,"_36":226,"_13":59,"_33":227,"_34":228,"_23":24,"_140":-5,"_215":229,"_26":230},{"_41":142,"_31":143,"_29":144,"_135":-5,"_39":40,"_38":145,"_137":121,"_36":218,"_13":59,"_33":147,"_34":148,"_23":24,"_140":149,"_215":219,"_26":220},{"_41":132,"_31":133,"_29":134,"_135":-5,"_39":40,"_38":136,"_137":121,"_36":214,"_13":59,"_33":20,"_34":139,"_23":24,"_140":-5,"_215":216,"_26":217},["D",1781228540014],"children",[],[133],["D",1773103065469],[],[143],"03e40e66-4714-11f1-b23a-42b51c65c3df","NEON-DEFENDER.js","03e40efc-4714-11f1-b23a-42b51c65c3df","0398b920-4714-11f1-9a5c-42b51c65c3df",40,["D",1777828671339],"script"," const canvas = document.getElementById(\"gameCanvas\");\n const ctx = canvas.getContext(\"2d\");\n const scoreEl = document.getElementById(\"score\");\n const healthEl = document.getElementById(\"health\");\n const hpBox = document.getElementById(\"hp-box\");\n const gameOverScreen = document.getElementById(\"game-over\");\n const comboDisplay = document.getElementById(\"combo-display\");\n const comboCountEl = document.getElementById(\"combo-count\");\n const comboMultEl = document.getElementById(\"combo-mult\");\n const waveNumberEl = document.getElementById(\"wave-number\"); // PHASE 4\n const weaponNameEl = document.getElementById(\"weapon-name\"); // PHASE 10\n\n // --- RESPONSIVE ENGINE ---\n // Oyunun tasarımını 1920x1080 referans alarak yapıyoruz.\n // scaleFactor hem genişlik hem yüksekliği kontrol eder.\n const REF_WIDTH = 1920;\n const REF_HEIGHT = 1080;\n let scaleFactor = 1;\n\n let lastTime = 0;\n let gameTime = 0;\n let screenShake = 0;\n\n // Game State\n let score = 0;\n let health = 100;\n let gameActive = true;\n let isPaused = true; // PHASE 11: Start paused for start screen\n let gameStarted = false; // PHASE 11: Track if game has ever started\n const pauseMenu = document.getElementById(\"pause-menu\"); // PHASE 11\n const MAX_ENEMIES = 60; // Hardcore sınır\n\n // PHASE 2: Skill-based mechanics\n let combo = { count: 0, multiplier: 1.0, timer: 0, maxTime: 2.5, highestCombo: 0 };\n let slowMo = { active: false, timer: 0, factor: 1.0 };\n let killStreakNotifications = [];\n let lastKillTime = 0;\n\n // PHASE 3: Dash/Dodge system\n let dash = {\n available: true,\n cooldown: 0,\n maxCooldown: 1.5, // seconds\n distance: 150, // will be multiplied by scaleFactor\n duration: 0.15,\n active: false,\n timer: 0,\n dirX: 0,\n dirY: 0,\n };\n let iframes = false; // Invincibility frames\n let dashGhosts = []; // Afterimages\n\n // PHASE 4: Wave System\n let wave = {\n current: 1,\n duration: 35, // seconds per wave\n timer: 0,\n state: \"active\", // 'active', 'transition', 'boss'\n enemiesKilled: 0,\n transitionTimer: 0,\n bossActive: false,\n };\n\n // PHASE 5: Weapon Upgrade System\n let weaponSystem = {\n level: 0,\n types: [\"single\", \"twin\", \"spread\", \"burst\"],\n thresholds: [0, 1000, 2500, 5000],\n currentType: \"single\",\n };\n\n // PHASE 7: Power-up System (Stack-based)\n let powerUps = [];\n let activePowerUps = {\n firerate: { stacks: [], duration: 8, multiplier: 1.4 },\n damage: { stacks: [], duration: 10, multiplier: 1.5 },\n shield: { stacks: [], duration: 5, hitsPerStack: 3 },\n pierce: { stacks: [], duration: 10, bonus: 2 },\n };\n\n // PHASE 8: Persistence System\n let saveData = {\n highScore: 0,\n highestCombo: 0,\n totalKills: 0,\n gamesPlayed: 0,\n };\n\n function loadSaveData() {\n try {\n let data = localStorage.getItem(\"cyberNeonSave\");\n if (data) {\n Object.assign(saveData, JSON.parse(data));\n }\n } catch (e) {\n console.log(\"Failed to load save data\");\n }\n }\n\n function saveSaveData() {\n try {\n localStorage.setItem(\"cyberNeonSave\", JSON.stringify(saveData));\n } catch (e) {\n console.log(\"Failed to save data\");\n }\n }\n\n loadSaveData(); // Load on startup\n\n // Entities\n let player = {\n x: 0,\n y: 0,\n radius: 0,\n speed: 0,\n vx: 0,\n vy: 0,\n angle: 0,\n bodyAngle: 0,\n color: \"#00f3ff\",\n };\n let bullets = [];\n let enemyBullets = [];\n let enemies = [];\n let barriers = [];\n let healBoxes = [];\n let particles = [];\n let promoBots = [];\n let floatingTexts = [];\n let hitMarkers = []; // PHASE 1: Hit markers\n\n // Input\n let keys = { w: false, a: false, s: false, d: false };\n let isTouching = false;\n let touchCurrent = { x: 0, y: 0 };\n\n function resize() {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n\n // EN ÖNEMLİ KISIM: Ekranın en küçük kenarına göre ölçekle.\n // Bu sayede ultra-wide veya kare monitörlerde oyun bozulmaz.\n scaleFactor = Math.min(canvas.width / REF_WIDTH, canvas.height / REF_HEIGHT);\n\n // Eğer oyun başlamadıysa ortala\n if (!gameActive) {\n player.x = canvas.width / 2;\n player.y = canvas.height / 2;\n }\n\n // Player Stats Update\n player.radius = 16 * scaleFactor;\n player.speed = 520 * scaleFactor; // Hız dengelendi\n }\n window.addEventListener(\"resize\", resize);\n resize();\n player.x = canvas.width / 2;\n player.y = canvas.height / 2;\n\n // Input Listeners\n window.addEventListener(\"keydown\", (e) => {\n if (keys.hasOwnProperty(e.key.toLowerCase())) keys[e.key.toLowerCase()] = true;\n // PHASE 3: Dash with Space key\n if (e.key === \" \" || e.code === \"Space\") {\n executeDash();\n e.preventDefault();\n }\n // PHASE 11: ESC to toggle pause\n if (e.key === \"Escape\") {\n if (gameActive) togglePause();\n }\n });\n window.addEventListener(\"keyup\", (e) => {\n if (keys.hasOwnProperty(e.key.toLowerCase())) keys[e.key.toLowerCase()] = false;\n });\n\n const handleTouch = (e) => {\n e.preventDefault();\n const t = e.touches[0];\n if (e.type === \"touchstart\") {\n isTouching = true;\n }\n if (e.type === \"touchend\") {\n isTouching = false;\n }\n if (isTouching) {\n touchCurrent.x = t.clientX;\n touchCurrent.y = t.clientY;\n }\n };\n canvas.addEventListener(\"touchstart\", handleTouch, { passive: false });\n canvas.addEventListener(\"touchmove\", handleTouch, { passive: false });\n canvas.addEventListener(\"touchend\", handleTouch);\n\n // --- GAMEPLAY HELPERS ---\n function generateNeonColor() {\n let hue = Math.floor(Math.random() * 360);\n return { hue: hue, str: `hsl(${hue}, 100%, 60%)` };\n }\n\n function triggerShake(amt) {\n screenShake = amt;\n }\n\n function addFloatingText(x, y, text, color, size = 16) {\n floatingTexts.push({\n x: x,\n y: y,\n text: text,\n color: color,\n life: 0.8,\n vy: -60 * scaleFactor,\n size: size,\n });\n }\n\n // PHASE 1: Penetration-based bullet colors\n function getPenetrationColor(pen) {\n if (pen >= 3) return \"#00f3ff\"; // Cyan - high pierce\n if (pen >= 2) return \"#ff00ff\"; // Magenta - medium\n return \"#ff3333\"; // Red - low pierce\n }\n\n // PHASE 1: Hit marker\n function addHitMarker(x, y) {\n hitMarkers.push({ x: x, y: y, life: 0.15, size: 12 * scaleFactor });\n }\n\n // PHASE 1: Audio System - Simple Web Audio API\n let audioContext = null;\n function initAudio() {\n if (!audioContext) audioContext = new (window.AudioContext || window.webkitAudioContext)();\n }\n\n function soundShoot() {\n if (!audioContext) return;\n const osc = audioContext.createOscillator();\n const gain = audioContext.createGain();\n osc.connect(gain);\n gain.connect(audioContext.destination);\n osc.frequency.value = 880;\n osc.type = \"square\";\n gain.gain.setValueAtTime(0.08, audioContext.currentTime);\n gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.05);\n osc.start();\n osc.stop(audioContext.currentTime + 0.05);\n }\n\n function soundHit() {\n if (!audioContext) return;\n const osc = audioContext.createOscillator();\n const gain = audioContext.createGain();\n osc.connect(gain);\n gain.connect(audioContext.destination);\n osc.frequency.value = 1200;\n osc.type = \"sine\";\n gain.gain.setValueAtTime(0.1, audioContext.currentTime);\n gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.04);\n osc.start();\n osc.stop(audioContext.currentTime + 0.04);\n }\n\n function soundExplosion() {\n if (!audioContext) return;\n const osc = audioContext.createOscillator();\n const gain = audioContext.createGain();\n osc.connect(gain);\n gain.connect(audioContext.destination);\n osc.frequency.setValueAtTime(400, audioContext.currentTime);\n osc.frequency.exponentialRampToValueAtTime(50, audioContext.currentTime + 0.3);\n osc.type = \"sawtooth\";\n gain.gain.setValueAtTime(0.15, audioContext.currentTime);\n gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);\n osc.start();\n osc.stop(audioContext.currentTime + 0.3);\n }\n\n function soundDamage() {\n if (!audioContext) return;\n const osc = audioContext.createOscillator();\n const gain = audioContext.createGain();\n osc.connect(gain);\n gain.connect(audioContext.destination);\n osc.frequency.value = 200;\n osc.type = \"triangle\";\n gain.gain.setValueAtTime(0.12, audioContext.currentTime);\n gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2);\n osc.start();\n osc.stop(audioContext.currentTime + 0.2);\n }\n\n // PHASE 2: Combo and Critical Hit helpers\n function updateCombo(dt) {\n if (combo.timer > 0) {\n combo.timer -= dt;\n if (combo.timer <= 0) {\n combo.count = 0;\n combo.multiplier = 1.0;\n }\n }\n }\n\n function addComboKill() {\n combo.count++;\n combo.timer = combo.maxTime;\n\n // Update multiplier\n if (combo.count >= 10) combo.multiplier = 3.0;\n else if (combo.count >= 5) combo.multiplier = 2.0;\n else if (combo.count >= 3) combo.multiplier = 1.5;\n else combo.multiplier = 1.0;\n\n // Track highest\n if (combo.count > combo.highestCombo) combo.highestCombo = combo.count;\n\n // Kill streak notifications\n checkKillStreak();\n }\n\n function checkKillStreak() {\n const streaks = {\n 3: { text: \"TRIPLE KILL!\", color: \"#ffff00\" },\n 5: { text: \"KILLING SPREE!\", color: \"#ff9900\" },\n 10: { text: \"RAMPAGE!\", color: \"#ff0000\" },\n 15: { text: \"UNSTOPPABLE!\", color: \"#ff00ff\" },\n 20: { text: \"GOD LIKE!\", color: \"#00ffff\" },\n };\n\n if (streaks[combo.count]) {\n killStreakNotifications.push({\n text: streaks[combo.count].text,\n color: streaks[combo.count].color,\n life: 2.0,\n scale: 1.0,\n });\n soundExplosion(); // Epic sound\n }\n }\n\n function checkCritical(bullet, enemy) {\n // Angle-based critical: hitting enemy from rear arc\n let bulletAngle = Math.atan2(bullet.vy, bullet.vx);\n let enemyMoveAngle = Math.atan2(enemy.vy, enemy.vx);\n let angleDiff = Math.abs(bulletAngle - enemyMoveAngle);\n\n // Normalize to 0-PI range\n angleDiff = Math.min(angleDiff, Math.PI * 2 - angleDiff);\n\n // Critical if hitting from rear (within 90° of opposite direction)\n return angleDiff > Math.PI * 0.75 && angleDiff < Math.PI * 1.25;\n }\n\n function triggerSlowMo(factor, duration) {\n slowMo.active = true;\n slowMo.factor = factor;\n slowMo.timer = duration;\n }\n\n function checkPerfectDodge(eb) {\n let dist = Math.hypot(eb.x - player.x, eb.y - player.y);\n let threshold = player.radius * 1.8;\n\n if (dist < threshold && dist > player.radius + 6) {\n triggerSlowMo(0.4, 0.4); // 40% speed for 0.4s\n addFloatingText(player.x, player.y - 40 * scaleFactor, \"PERFECT DODGE!\", \"#00ffff\", 20);\n score += 25;\n scoreEl.innerText = score;\n return true;\n }\n return false;\n }\n\n // PHASE 3: Dash/Dodge function\n function executeDash() {\n if (!dash.available) return;\n\n // Get dash direction from movement input\n let dx = 0,\n dy = 0;\n if (keys.w) dy -= 1;\n if (keys.s) dy += 1;\n if (keys.a) dx -= 1;\n if (keys.d) dx += 1;\n\n // Fallback: dash in facing direction\n if (dx === 0 && dy === 0) {\n dx = Math.cos(player.angle);\n dy = Math.sin(player.angle);\n }\n\n let mag = Math.hypot(dx, dy);\n dash.dirX = dx / mag;\n dash.dirY = dy / mag;\n dash.active = true;\n dash.timer = dash.duration;\n dash.available = false;\n dash.cooldown = dash.maxCooldown;\n iframes = true;\n\n // Create afterimage\n dashGhosts.push({ x: player.x, y: player.y, angle: player.angle, life: 0.3 });\n\n // Dash sound - whoosh\n // Dash whoosh\n if (audioContext) {\n const osc = audioContext.createOscillator();\n const gain = audioContext.createGain();\n osc.connect(gain);\n gain.connect(audioContext.destination);\n osc.frequency.setValueAtTime(600, audioContext.currentTime);\n osc.frequency.exponentialRampToValueAtTime(200, audioContext.currentTime + 0.12);\n osc.type = \"sawtooth\";\n gain.gain.setValueAtTime(0.06, audioContext.currentTime);\n gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.12);\n osc.start();\n osc.stop(audioContext.currentTime + 0.12);\n }\n }\n\n // PHASE 7: Power-up system\n function spawnPowerUp(x, y) {\n let types = [\"firerate\", \"damage\", \"shield\", \"pierce\"];\n let type = types[Math.floor(Math.random() * types.length)];\n\n powerUps.push({\n x: x,\n y: y,\n type: type,\n size: 25 * scaleFactor,\n life: 10, // despawn after 10s\n rotation: 0,\n color: getPowerUpColor(type),\n });\n }\n\n function getPowerUpColor(type) {\n const colors = {\n firerate: \"#ffff00\",\n damage: \"#ff6600\",\n shield: \"#00ffff\",\n pierce: \"#ff00ff\",\n };\n return colors[type] || \"#ffffff\";\n }\n\n function activatePowerUp(type) {\n let powerUp = activePowerUps[type];\n\n // Add new stack with independent timer\n let newStack = { timer: powerUp.duration };\n if (type === \"shield\") newStack.hits = powerUp.hitsPerStack;\n powerUp.stacks.push(newStack);\n\n let stackCount = powerUp.stacks.length;\n const names = {\n firerate: stackCount > 1 ? `RAPID FIRE x${stackCount}!` : \"RAPID FIRE!\",\n damage: stackCount > 1 ? `DAMAGE x${stackCount}!` : \"DAMAGE BOOST!\",\n shield: stackCount > 1 ? `SHIELD x${stackCount}!` : \"SHIELD!\",\n pierce: stackCount > 1 ? `PIERCE x${stackCount}!` : \"PIERCE BOOST!\",\n };\n\n addFloatingText(\n player.x,\n player.y - 70 * scaleFactor,\n names[type],\n getPowerUpColor(type),\n 26,\n );\n // Power-up sparkle\n if (audioContext) {\n const osc = audioContext.createOscillator();\n const gain = audioContext.createGain();\n osc.connect(gain);\n gain.connect(audioContext.destination);\n osc.frequency.setValueAtTime(1500, audioContext.currentTime);\n osc.frequency.exponentialRampToValueAtTime(2200, audioContext.currentTime + 0.18);\n osc.type = \"sine\";\n gain.gain.setValueAtTime(0.09, audioContext.currentTime);\n gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.18);\n osc.start();\n osc.stop(audioContext.currentTime + 0.18);\n }\n }\n\n // --- SPAWNERS ---\n let enemyTimer = 0;\n function spawnEnemy() {\n if (enemies.length >= MAX_ENEMIES) return;\n\n // ZORLUK ÇARPANI (Daha agresif artış)\n let difficulty = 1 + (gameTime / 45) * 0.35;\n\n let r = Math.random();\n let type = \"kamikaze\";\n let hp = 3 * difficulty;\n let radius = 16 * scaleFactor;\n let spd = 180 * scaleFactor * difficulty;\n let mass = 1.0; // İtilme direnci\n\n if (r < 0.15) {\n // Sniper\n type = \"sniper\";\n hp = 5 * difficulty;\n spd = 110 * scaleFactor * difficulty;\n radius = 19 * scaleFactor;\n mass = 1.2;\n } else if (r < 0.35) {\n // Tank\n type = \"tank\";\n hp = 25 * difficulty;\n spd = 85 * scaleFactor * difficulty;\n radius = 32 * scaleFactor;\n mass = 4.0; // ÇOK AĞIR\n } else if (r < 0.55) {\n // Dasher\n type = \"dasher\";\n hp = 2 * difficulty;\n spd = 300 * scaleFactor * difficulty;\n radius = 14 * scaleFactor;\n mass = 0.8;\n }\n\n let col = generateNeonColor();\n\n // Ekran kenarından spawn\n let side = Math.floor(Math.random() * 4);\n let pad = 100 * scaleFactor;\n let ex, ey;\n if (side === 0) {\n ex = Math.random() * canvas.width;\n ey = -pad;\n } else if (side === 1) {\n ex = canvas.width + pad;\n ey = Math.random() * canvas.height;\n } else if (side === 2) {\n ex = Math.random() * canvas.width;\n ey = canvas.height + pad;\n } else {\n ex = -pad;\n ey = Math.random() * canvas.height;\n }\n\n enemies.push({\n x: ex,\n y: ey,\n type: type,\n hp: hp,\n maxHp: hp,\n radius: radius,\n speed: spd,\n color: col.str,\n mass: mass,\n vx: 0,\n vy: 0,\n flash: 0,\n shootTimer: Math.random() * 2,\n });\n }\n\n // PHASE 10: Boss Spawn Function\n function spawnBoss() {\n let bossTypes = [\"mega_tank\", \"rapid_dasher\", \"sniper_elite\"];\n let bossType = bossTypes[Math.floor(Math.random() * bossTypes.length)];\n\n let bossHp = 150 + wave.current * 30;\n let bossRadius = 60 * scaleFactor;\n let bossSpeed = 100 * scaleFactor;\n let bossMass = 10;\n\n // Boss-specific attributes\n if (bossType === \"mega_tank\") {\n bossHp *= 1.5;\n bossRadius = 70 * scaleFactor;\n bossSpeed = 70 * scaleFactor;\n bossMass = 15;\n } else if (bossType === \"rapid_dasher\") {\n bossSpeed = 180 * scaleFactor;\n bossRadius = 50 * scaleFactor;\n bossMass = 6;\n } else {\n // sniper_elite\n bossHp *= 0.8;\n bossRadius = 55 * scaleFactor;\n }\n\n // Spawn from random edge\n let side = Math.floor(Math.random() * 4);\n let pad = 150 * scaleFactor;\n let bx, by;\n if (side === 0) {\n bx = canvas.width / 2;\n by = -pad;\n } else if (side === 1) {\n bx = canvas.width + pad;\n by = canvas.height / 2;\n } else if (side === 2) {\n bx = canvas.width / 2;\n by = canvas.height + pad;\n } else {\n bx = -pad;\n by = canvas.height / 2;\n }\n\n enemies.push({\n x: bx,\n y: by,\n type: bossType,\n hp: bossHp,\n maxHp: bossHp,\n radius: bossRadius,\n speed: bossSpeed,\n color: \"#ff0066\",\n mass: bossMass,\n vx: 0,\n vy: 0,\n flash: 0,\n shootTimer: 0,\n isBoss: true,\n ability: { cooldown: 0, maxCooldown: 3 },\n });\n\n wave.bossActive = true;\n addFloatingText(\n canvas.width / 2,\n canvas.height / 2 - 100 * scaleFactor,\n `⚠️ BOSS: ${bossType.toUpperCase().replace(\"_\", \" \")} ⚠️`,\n \"#ff0066\",\n 32,\n );\n soundExplosion();\n }\n\n // PHASE 6: Formation spawning (simplified)\n let formationTimer = 0;\n function spawnFormation() {\n if (wave.current < 3) return; // Only after wave 3\n\n let formations = [\"v\", \"line\", \"circle\", \"pincer\"];\n let formation = formations[Math.floor(Math.random() * formations.length)];\n\n // PHASE 10: Pincer formation - spawn from left and right\n if (formation === \"pincer\") {\n for (let side = 0; side < 2; side++) {\n for (let j = 0; j < 3; j++) {\n let ex = side === 0 ? -50 * scaleFactor : canvas.width + 50 * scaleFactor;\n let ey = canvas.height * 0.3 + j * 100 * scaleFactor;\n let col = generateNeonColor();\n let type = j === 1 ? \"tank\" : \"dasher\";\n let hp = type === \"tank\" ? 25 : 3;\n enemies.push({\n x: ex,\n y: ey,\n type: type,\n hp: hp,\n maxHp: hp,\n radius: type === \"tank\" ? 32 * scaleFactor : 14 * scaleFactor,\n speed: type === \"tank\" ? 85 * scaleFactor : 250 * scaleFactor,\n color: col.str,\n mass: type === \"tank\" ? 4.0 : 0.8,\n vx: 0,\n vy: 0,\n flash: 0,\n shootTimer: Math.random() * 2,\n });\n }\n }\n addFloatingText(\n canvas.width / 2,\n canvas.height / 2,\n \"⚔️ PINCER ATTACK! ⚔️\",\n \"#ff0066\",\n 28,\n );\n soundExplosion();\n return;\n }\n\n let centerX = canvas.width / 2;\n let centerY = -100 * scaleFactor;\n let count = 5;\n\n for (let i = 0; i < count; i++) {\n let offsetX = 0,\n offsetY = 0;\n\n if (formation === \"v\") {\n offsetX = (i - 2) * 60 * scaleFactor;\n offsetY = Math.abs(i - 2) * 40 * scaleFactor;\n } else if (formation === \"line\") {\n offsetX = (i - 2) * 50 * scaleFactor;\n } else {\n // circle\n let angle = (i / count) * Math.PI * 2;\n offsetX = Math.cos(angle) * 100 * scaleFactor;\n offsetY = Math.sin(angle) * 100 * scaleFactor;\n }\n\n let type = i === 2 ? \"tank\" : \"kamikaze\"; // Center is tank\n let hp = type === \"tank\" ? 25 : 3;\n let col = generateNeonColor();\n\n enemies.push({\n x: centerX + offsetX,\n y: centerY + offsetY,\n type: type,\n hp: hp,\n maxHp: hp,\n radius: type === \"tank\" ? 32 * scaleFactor : 16 * scaleFactor,\n speed: type === \"tank\" ? 85 * scaleFactor : 180 * scaleFactor,\n color: col.str,\n mass: type === \"tank\" ? 4.0 : 1.0,\n vx: 0,\n vy: 0,\n flash: 0,\n shootTimer: Math.random() * 2,\n });\n }\n\n addFloatingText(\n canvas.width / 2,\n canvas.height / 2,\n `${formation.toUpperCase()} FORMATION!`,\n \"#ff00ff\",\n 28,\n );\n soundExplosion();\n }\n\n function spawnBarrier() {\n let attempts = 0;\n while (attempts++ < 5) {\n // Engeller de scaleFactor ile büyür\n let w = (Math.random() * 120 + 80) * scaleFactor;\n let h = (Math.random() * 120 + 80) * scaleFactor;\n let x = Math.random() * (canvas.width - w);\n let y = Math.random() * (canvas.height - h);\n\n if (Math.hypot(x + w / 2 - player.x, y + h / 2 - player.y) < 400 * scaleFactor) continue;\n\n barriers.push({ x: x, y: y, w: w, h: h, life: 25 }); // Engeller 25sn kalır\n break;\n }\n }\n\n let healTimer = 20; // Heal daha nadir\n function updateHeal(dt) {\n healTimer -= dt;\n if (healTimer <= 0) {\n let amt = Math.floor(Math.random() * 15) + 10;\n let size = 35 * scaleFactor;\n healBoxes.push({\n x: Math.random() * (canvas.width - 100) + 50,\n y: Math.random() * (canvas.height - 100) + 50,\n size: size,\n heal: amt,\n hp: Math.ceil(amt * 0.5),\n maxHp: Math.ceil(amt * 0.5),\n });\n healTimer = Math.random() * 15 + 20;\n }\n }\n\n // --- UPDATE LOOP ---\n function update(dt) {\n // PHASE 2: Slow-motion effect\n if (slowMo.active) {\n slowMo.timer -= dt;\n if (slowMo.timer <= 0) {\n slowMo.active = false;\n slowMo.factor = 1.0;\n }\n dt *= slowMo.factor; // Scale deltaTime\n }\n\n gameTime += dt;\n if (screenShake > 0) screenShake = Math.max(0, screenShake - dt * 30);\n\n // PHASE 2: Update combo timer\n updateCombo(dt);\n\n // PHASE 4: Wave timer and progression\n wave.timer += dt;\n // Wave completion check happens after enemy deaths\n\n // PHASE 3: Dash logic\n if (dash.active) {\n let dashSpeed = (dash.distance * scaleFactor) / dash.duration;\n player.x += dash.dirX * dashSpeed * dt;\n player.y += dash.dirY * dashSpeed * dt;\n dash.timer -= dt;\n\n // Create trail\n if (Math.random() < 0.3)\n dashGhosts.push({ x: player.x, y: player.y, angle: player.angle, life: 0.2 });\n\n if (dash.timer <= 0) {\n dash.active = false;\n iframes = false;\n }\n }\n\n // Dash cooldown\n if (!dash.available) {\n dash.cooldown -= dt;\n if (dash.cooldown <= 0) dash.available = true;\n }\n\n // Dash ghosts update\n dashGhosts.forEach((g, i) => {\n g.life -= dt * 3;\n if (g.life <= 0) dashGhosts.splice(i, 1);\n });\n\n // 1. Player Physics (Tight Control)\n let ax = 0,\n ay = 0;\n if (!dash.active) {\n // Don't move during dash\n if (keys.w) ay -= 1;\n if (keys.s) ay += 1;\n if (keys.a) ax -= 1;\n if (keys.d) ax += 1;\n\n if (ax !== 0 || ay !== 0) {\n let mag = Math.hypot(ax, ay);\n ax /= mag;\n ay /= mag;\n isTouching = false;\n } else if (isTouching) {\n let dx = touchCurrent.x - player.x;\n let dy = touchCurrent.y - player.y;\n let dist = Math.hypot(dx, dy);\n if (dist > 10) {\n ax = dx / dist;\n ay = dy / dist;\n }\n }\n }\n\n let accel = 4000 * scaleFactor;\n let fric = 12.0; // Daha sıkı duruş\n player.vx += ax * accel * dt;\n player.vy += ay * accel * dt;\n player.vx -= player.vx * fric * dt;\n player.vy -= player.vy * fric * dt;\n\n let spd = Math.hypot(player.vx, player.vy);\n if (spd > player.speed) {\n player.vx = (player.vx / spd) * player.speed;\n player.vy = (player.vy / spd) * player.speed;\n }\n\n // Update body angle based on INPUT direction only (not velocity - avoids recoil rotation)\n if (ax !== 0 || ay !== 0) {\n let targetBodyAngle = Math.atan2(ay, ax);\n let angleDiff = targetBodyAngle - player.bodyAngle;\n // Normalize angle difference\n while (angleDiff > Math.PI) angleDiff -= Math.PI * 2;\n while (angleDiff < -Math.PI) angleDiff += Math.PI * 2;\n player.bodyAngle += angleDiff * Math.min(1, dt * 12);\n }\n\n let nextX = player.x + player.vx * dt;\n let nextY = player.y + player.vy * dt;\n\n // Player Wall Collision\n let hitX = false,\n hitY = false;\n for (let b of barriers) {\n if (\n nextX + player.radius > b.x &&\n nextX - player.radius < b.x + b.w &&\n player.y + player.radius > b.y &&\n player.y - player.radius < b.y + b.h\n )\n hitX = true;\n if (\n player.x + player.radius > b.x &&\n player.x - player.radius < b.x + b.w &&\n nextY + player.radius > b.y &&\n nextY - player.radius < b.y + b.h\n )\n hitY = true;\n }\n if (!hitX) player.x = nextX;\n else player.vx *= -0.2;\n if (!hitY) player.y = nextY;\n else player.vy *= -0.2;\n\n player.x = Math.max(player.radius, Math.min(canvas.width - player.radius, player.x));\n player.y = Math.max(player.radius, Math.min(canvas.height - player.radius, player.y));\n\n // Spawners\n enemyTimer -= dt;\n if (enemyTimer <= 0) {\n spawnEnemy();\n enemyTimer = Math.max(0.2, 0.8 - gameTime / 200); // Spawn hızı artar\n }\n\n // PHASE 6: Formation spawning timer\n formationTimer += dt;\n if (formationTimer > 20 && wave.current >= 3) {\n formationTimer = 0;\n spawnFormation();\n }\n\n updateHeal(dt);\n if (Math.random() < 0.2 * dt) spawnBarrier();\n if (Math.random() < 0.04 * dt)\n promoBots.push({\n x: Math.random() * (canvas.width - 100) + 50,\n y: Math.random() * (canvas.height - 100) + 50,\n size: 45 * scaleFactor,\n life: 5,\n vx: (Math.random() - 0.5) * 120 * scaleFactor,\n vy: (Math.random() - 0.5) * 120 * scaleFactor,\n });\n\n // 2. Enemies AI & Physics\n enemies.forEach((e, i) => {\n if (e.flash > 0) e.flash -= dt * 10;\n\n // Forces\n let dx = player.x - e.x,\n dy = player.y - e.y;\n let dist = Math.hypot(dx, dy);\n let dirX = dist > 0 ? dx / dist : 0;\n let dirY = dist > 0 ? dy / dist : 0;\n\n let fx = 0,\n fy = 0;\n\n // Seek - with advanced behaviors\n if (e.type === \"sniper\") {\n // PHASE 10: Tank-Sniper cooperation - find nearby tank to hide behind\n let nearbyTank = null;\n let minTankDist = 300 * scaleFactor;\n enemies.forEach((t) => {\n if (t.type === \"tank\" || t.isBoss) {\n let td = Math.hypot(t.x - e.x, t.y - e.y);\n if (td < minTankDist) {\n minTankDist = td;\n nearbyTank = t;\n }\n }\n });\n\n if (nearbyTank) {\n // Position behind tank (relative to player)\n let tankToPlayer = Math.atan2(player.y - nearbyTank.y, player.x - nearbyTank.x);\n let idealX = nearbyTank.x - Math.cos(tankToPlayer) * 100 * scaleFactor;\n let idealY = nearbyTank.y - Math.sin(tankToPlayer) * 100 * scaleFactor;\n let toDest = Math.hypot(idealX - e.x, idealY - e.y);\n if (toDest > 20) {\n fx += (idealX - e.x) / toDest;\n fy += (idealY - e.y) / toDest;\n }\n } else {\n // Standard sniper behavior - maintain distance\n let ideal = 350 * scaleFactor;\n if (dist > ideal + 50) {\n fx += dirX;\n fy += dirY;\n } else if (dist < ideal - 50) {\n fx -= dirX;\n fy -= dirY;\n }\n }\n } else if (e.type === \"dasher\") {\n // PHASE 10: Flanking behavior - approach from player's sides\n let perpX = -dirY;\n let perpY = dirX;\n let side = Math.sin(gameTime * 2 + i) > 0 ? 1 : -1; // Alternate sides\n let flankAngle = Math.atan2(dirY, dirX) + side * Math.PI * 0.4;\n fx += Math.cos(flankAngle);\n fy += Math.sin(flankAngle);\n } else if (e.isBoss) {\n // Boss: steady advance with slight circling\n let circleAngle = Math.sin(gameTime) * 0.3;\n fx += Math.cos(Math.atan2(dirY, dirX) + circleAngle);\n fy += Math.sin(Math.atan2(dirY, dirX) + circleAngle);\n } else {\n // Standard approach\n fx += dirX;\n fy += dirY;\n }\n\n // Separation (Daha organik sürüler için biraz zayıflatıldı ama hard collision var)\n enemies.forEach((o) => {\n if (e === o) return;\n let odx = e.x - o.x,\n ody = e.y - o.y,\n od = Math.hypot(odx, ody);\n let minDist = e.radius + o.radius;\n\n if (od < minDist) {\n // Hard Push (Üst üste binmeyi engeller)\n let push = (minDist - od) * 15;\n fx += (odx / od) * push;\n fy += (ody / od) * push;\n }\n });\n\n // Obstacle Avoidance\n let lookAhead = 60 * scaleFactor;\n for (let b of barriers) {\n // Basit merkezden itme\n let cx = b.x + b.w / 2,\n cy = b.y + b.h / 2;\n let bdx = e.x - cx,\n bdy = e.y - cy;\n // Kutunun içine mi girmek üzere?\n if (\n e.x + e.vx * 0.2 > b.x - 20 &&\n e.x + e.vx * 0.2 < b.x + b.w + 20 &&\n e.y + e.vy * 0.2 > b.y - 20 &&\n e.y + e.vy * 0.2 < b.y + b.h + 20\n ) {\n let bdist = Math.hypot(bdx, bdy);\n fx += (bdx / bdist) * 8;\n fy += (bdy / bdist) * 8;\n }\n }\n\n // Normalize movement force\n let fMag = Math.hypot(fx, fy);\n if (fMag > 0) {\n fx /= fMag;\n fy /= fMag;\n }\n\n if (e.type === \"dasher\") {\n e.angleOffset = (e.angleOffset || 0) + dt * 10;\n fx += -dirY * Math.sin(e.angleOffset) * 0.8;\n fy += dirX * Math.sin(e.angleOffset) * 0.8;\n }\n\n // Apply velocity\n e.vx = e.vx * 0.9 + fx * e.speed * 0.1; // Smooth turn\n e.vy = e.vy * 0.9 + fy * e.speed * 0.1;\n\n e.x += e.vx * dt;\n e.y += e.vy * dt;\n\n // Player Collision\n if (dist < player.radius + e.radius - 5) {\n if (!iframes) {\n // PHASE 3: No damage during dash\n takeDamage(10);\n enemies.splice(i, 1);\n triggerShake(15);\n }\n }\n\n // Bullet Hit Check\n for (let j = bullets.length - 1; j >= 0; j--) {\n let b = bullets[j];\n if (Math.hypot(b.x - e.x, b.y - e.y) < e.radius + 10) {\n // PHASE 2: Check for critical hit\n let isCritical = checkCritical(b, e);\n let damageMultiplier = isCritical ? 2 : 1;\n\n createExplosion(e.x, e.y, isCritical ? \"#ffd700\" : e.color, isCritical ? 8 : 4);\n e.hp -= damageMultiplier;\n e.flash = 0.1;\n\n // PHASE 1: Hit marker and sound\n addHitMarker(e.x, e.y);\n soundHit();\n\n if (isCritical) {\n addFloatingText(e.x, e.y - 20 * scaleFactor, \"CRITICAL!\", \"#ffd700\", 18);\n // Critical hit - high pitch ding\n // Critical ding\n if (audioContext) {\n const osc = audioContext.createOscillator();\n const gain = audioContext.createGain();\n osc.connect(gain);\n gain.connect(audioContext.destination);\n osc.frequency.value = 1600;\n osc.type = \"sine\";\n gain.gain.setValueAtTime(0.12, audioContext.currentTime);\n gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.08);\n osc.start();\n osc.stop(audioContext.currentTime + 0.08);\n }\n }\n\n // MASS BASED KNOCKBACK (Kütle Bazlı Geri Tepme)\n // Tanklar az itilir, Kamikazeler uçar.\n let kbForce = (40 * scaleFactor) / e.mass;\n e.x += (b.vx / b.speed) * kbForce;\n e.y += (b.vy / b.speed) * kbForce;\n\n // Piercing Logic (Zayıflatıldı)\n b.penetration--;\n if (b.penetration <= 0) bullets.splice(j, 1);\n\n if (e.hp <= 0) {\n // PHASE 2: Combo system\n addComboKill();\n\n // PHASE 4: Wave progression tracking\n wave.enemiesKilled++;\n\n // Simple wave advancement: every 10 kills\n if (wave.enemiesKilled >= 10 * wave.current) {\n wave.current++;\n wave.timer = 0;\n addFloatingText(\n canvas.width / 2,\n canvas.height / 3,\n `WAVE ${wave.current}!`,\n \"#00ffff\",\n 40,\n );\n soundExplosion();\n\n // PHASE 10: Boss spawn every 5 waves\n if (wave.current % 5 === 0 && !wave.bossActive) {\n setTimeout(() => spawnBoss(), 2000); // 2s delay\n }\n }\n\n let basePts = e.type === \"tank\" ? 100 : e.type === \"sniper\" ? 50 : 20;\n let finalPts = Math.floor(basePts * combo.multiplier * (isCritical ? 2 : 1));\n score += finalPts;\n scoreEl.innerText = score;\n\n // PHASE 5: Weapon upgrade check\n for (let i = weaponSystem.thresholds.length - 1; i >= 0; i--) {\n if (score >= weaponSystem.thresholds[i] && weaponSystem.level < i) {\n weaponSystem.level = i;\n weaponSystem.currentType = weaponSystem.types[i];\n weaponNameEl.innerText = weaponSystem.currentType.toUpperCase();\n addFloatingText(\n player.x,\n player.y - 60 * scaleFactor,\n `${weaponSystem.currentType.toUpperCase()} UNLOCKED!`,\n \"#ffff00\",\n 24,\n );\n // Weapon upgrade - fanfare\n // Weapon upgrade\n if (audioContext) {\n const osc = audioContext.createOscillator();\n const gain = audioContext.createGain();\n osc.connect(gain);\n gain.connect(audioContext.destination);\n osc.frequency.value = 700;\n osc.type = \"square\";\n gain.gain.setValueAtTime(0.1, audioContext.currentTime);\n gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.22);\n osc.start();\n osc.stop(audioContext.currentTime + 0.22);\n }\n break;\n }\n }\n\n let displayText = isCritical ? `CRIT +${finalPts}!` : `+${finalPts}`;\n if (combo.multiplier > 1.0) displayText += ` (${combo.multiplier}x)`;\n addFloatingText(\n e.x,\n e.y,\n displayText,\n isCritical ? \"#ffd700\" : \"#fff\",\n isCritical ? 22 : 18,\n );\n\n createExplosion(e.x, e.y, isCritical ? \"#ffd700\" : e.color, isCritical ? 25 : 15);\n soundExplosion();\n\n // PHASE 10: Boss kill rewards\n if (e.isBoss) {\n wave.bossActive = false;\n score += 500 * wave.current; // Massive bonus\n scoreEl.innerText = score;\n addFloatingText(\n e.x,\n e.y - 50 * scaleFactor,\n `BOSS SLAIN! +${500 * wave.current}`,\n \"#ff0066\",\n 28,\n );\n createExplosion(e.x, e.y, \"#ff0066\", 40);\n spawnPowerUp(e.x, e.y); // Guaranteed power-up\n triggerShake(15);\n } else {\n // PHASE 7: Power-up drop (10% chance) - non-boss only\n if (Math.random() < 0.1) spawnPowerUp(e.x, e.y);\n triggerShake(5);\n }\n\n enemies.splice(i, 1);\n return;\n }\n }\n }\n\n // Sniper Fire\n if (e.type === \"sniper\") {\n e.shootTimer -= dt;\n if (e.shootTimer <= 0) {\n let ss = 400 * scaleFactor;\n enemyBullets.push({\n x: e.x,\n y: e.y,\n vx: dirX * ss,\n vy: dirY * ss,\n life: 2.5,\n color: e.color,\n });\n e.shootTimer = Math.random() + 1.5;\n }\n }\n });\n\n // 3. Auto Shoot\n shootCooldown -= dt;\n if (shootCooldown <= 0) {\n let target = null,\n minDist = Infinity;\n [...enemies, ...promoBots, ...healBoxes].forEach((t) => {\n let d = Math.hypot(t.x - player.x, t.y - player.y);\n if (d < 700 * scaleFactor && d < minDist) {\n // Raycast for walls\n let mx = (player.x + t.x) / 2,\n my = (player.y + t.y) / 2,\n wall = false;\n for (let b of barriers)\n if (mx > b.x && mx < b.x + b.w && my > b.y && my < b.y + b.h) wall = true;\n if (!wall) {\n minDist = d;\n target = t;\n }\n }\n });\n\n if (target) {\n player.angle = Math.atan2(target.y - player.y, target.x - player.x);\n let bs = 950 * scaleFactor;\n\n // MESAFE BAZLI PENETRATION SİSTEMİ\n // Ekran genişliğine göre penetration hesapla\n let distToTarget = minDist;\n let screenWidthRef = canvas.width * 0.3; // %30 yakın mesafe\n let screenWidthMid = canvas.width * 0.6; // %60 orta mesafe\n let penetration = 1; // Varsayılan (uzak mesafe)\n\n if (distToTarget < screenWidthRef) {\n penetration = 3; // Yakın mesafe: güçlü delme\n } else if (distToTarget < screenWidthMid) {\n penetration = 2; // Orta mesafe: orta delme\n }\n\n // PHASE 9: Apply pierce power-up bonus\n // PHASE 9: Apply pierce power-up bonus (stacks)\n penetration += activePowerUps.pierce.stacks.length * activePowerUps.pierce.bonus;\n\n // PHASE 10: Weapon-specific fire patterns\n function createBullet(x, y, angle, speed, pen) {\n bullets.push({\n x: x,\n y: y,\n vx: Math.cos(angle) * speed,\n vy: Math.sin(angle) * speed,\n life: 1.2,\n speed: speed,\n penetration: pen,\n color: getPenetrationColor(pen),\n trail: [],\n });\n }\n\n let angle = player.angle;\n let recoilMult = 1;\n\n switch (weaponSystem.currentType) {\n case \"single\":\n createBullet(player.x, player.y, angle, bs, penetration);\n break;\n\n case \"twin\":\n let offset = player.radius * 0.5;\n createBullet(\n player.x - Math.sin(angle) * offset,\n player.y + Math.cos(angle) * offset,\n angle,\n bs,\n penetration,\n );\n createBullet(\n player.x + Math.sin(angle) * offset,\n player.y - Math.cos(angle) * offset,\n angle,\n bs,\n penetration,\n );\n recoilMult = 1.3;\n break;\n\n case \"spread\":\n for (let i = -1; i <= 1; i++) {\n createBullet(player.x, player.y, angle + i * 0.2, bs * 0.95, penetration);\n }\n recoilMult = 1.5;\n break;\n\n case \"burst\":\n // 3 bullets with slight delay effect (rapid succession)\n for (let i = 0; i < 3; i++) {\n createBullet(\n player.x + Math.cos(angle) * i * 8,\n player.y + Math.sin(angle) * i * 8,\n angle + (Math.random() - 0.5) * 0.05,\n bs * 1.1,\n penetration,\n );\n }\n recoilMult = 2;\n break;\n }\n\n // Recoil\n player.vx -= Math.cos(player.angle) * 80 * scaleFactor * recoilMult;\n player.vy -= Math.sin(player.angle) * 80 * scaleFactor * recoilMult;\n // PHASE 9: Apply firerate power-up (stacks multiply)\n let baseCD = 0.16;\n let firerateBoost = Math.pow(\n activePowerUps.firerate.multiplier,\n activePowerUps.firerate.stacks.length,\n );\n shootCooldown = baseCD / firerateBoost;\n soundShoot(); // PHASE 1: Sound effect\n initAudio(); // Init on first interaction\n } else if (isTouching || keys.w || keys.a || keys.s || keys.d) {\n // Movement handled by bodyAngle now, turret keeps last aim\n }\n }\n\n // Projectiles Update\n bullets.forEach((b, i) => {\n // PHASE 1: Update trail\n b.trail.push({ x: b.x, y: b.y });\n if (b.trail.length > 8) b.trail.shift(); // Keep last 8 positions\n\n b.x += b.vx * dt;\n b.y += b.vy * dt;\n b.life -= dt;\n let wHit = false;\n for (let w of barriers)\n if (b.x > w.x && b.x < w.x + w.w && b.y > w.y && b.y < w.y + w.h) wHit = true;\n if (wHit) {\n createExplosion(b.x, b.y, b.color || \"#00f3ff\", 3);\n soundExplosion();\n b.life = 0;\n }\n if (b.life <= 0) bullets.splice(i, 1);\n });\n\n enemyBullets.forEach((eb, i) => {\n eb.x += eb.vx * dt;\n eb.y += eb.vy * dt;\n eb.life -= dt;\n\n // PHASE 2: Perfect dodge check\n checkPerfectDodge(eb);\n\n if (Math.hypot(eb.x - player.x, eb.y - player.y) < player.radius + 5) {\n if (!iframes) {\n // PHASE 3: No damage during dash\n takeDamage(15);\n enemyBullets.splice(i, 1);\n triggerShake(15);\n createExplosion(player.x, player.y, \"#f00\", 10);\n soundDamage();\n combo.count = 0;\n combo.multiplier = 1.0;\n combo.timer = 0; // Break combo on hit\n }\n } else if (eb.life <= 0) enemyBullets.splice(i, 1);\n });\n\n // Healbox Logic\n healBoxes.forEach((hb, i) => {\n bullets.forEach((b, bi) => {\n if (\n b.x > hb.x - hb.size / 2 &&\n b.x < hb.x + hb.size / 2 &&\n b.y > hb.y - hb.size / 2 &&\n b.y < hb.y + hb.size / 2\n ) {\n hb.hp--;\n bullets.splice(bi, 1);\n createExplosion(hb.x, hb.y, \"#00ff66\", 2);\n if (hb.hp <= 0) {\n let val = Math.min(100 - health, hb.heal);\n health += val;\n healthEl.innerText = health;\n addFloatingText(hb.x, hb.y, `+${val} HP`, \"#00ff66\");\n createExplosion(hb.x, hb.y, \"#00ff66\", 20);\n healBoxes.splice(i, 1);\n }\n }\n });\n });\n\n // Barriers & Promos & Particles\n for (let i = barriers.length - 1; i >= 0; i--) {\n barriers[i].life -= dt;\n if (barriers[i].life <= 0) barriers.splice(i, 1);\n }\n promoBots.forEach((p, i) => {\n p.x += p.vx * dt;\n p.y += p.vy * dt;\n p.life -= dt;\n if (p.x < 0 || p.x > canvas.width) p.vx *= -1;\n if (p.y < 0 || p.y > canvas.height) p.vy *= -1;\n bullets.forEach((b, bi) => {\n if (Math.hypot(b.x - p.x, b.y - p.y) < p.size / 2 + 5) {\n score += 500;\n scoreEl.innerText = score;\n addFloatingText(p.x, p.y, \"+500!\", \"#ffd700\");\n createExplosion(p.x, p.y, \"#ffd700\", 25);\n promoBots.splice(i, 1);\n bullets.splice(bi, 1);\n }\n });\n if (p.life <= 0) promoBots.splice(i, 1);\n });\n floatingTexts.forEach((ft, i) => {\n ft.y += ft.vy * dt;\n ft.life -= dt;\n if (ft.life <= 0) floatingTexts.splice(i, 1);\n });\n particles.forEach((p, i) => {\n p.x += p.vx * dt * 60;\n p.y += p.vy * dt * 60;\n p.life -= dt * 3;\n if (p.life <= 0) particles.splice(i, 1);\n });\n\n // PHASE 1: Hit markers update\n hitMarkers.forEach((hm, i) => {\n hm.life -= dt;\n if (hm.life <= 0) hitMarkers.splice(i, 1);\n });\n\n // PHASE 2: Kill streak notifications update\n killStreakNotifications.forEach((ksn, i) => {\n ksn.life -= dt;\n ksn.scale = 1.0 + (2.0 - ksn.life) * 0.3; // Pulse effect\n if (ksn.life <= 0) killStreakNotifications.splice(i, 1);\n });\n\n // PHASE 7: Power-up updates\n powerUps.forEach((pu, i) => {\n pu.life -= dt;\n pu.rotation += dt * 2; // Spin\n\n // Player collection\n let dist = Math.hypot(pu.x - player.x, pu.y - player.y);\n if (dist < player.radius + pu.size) {\n activatePowerUp(pu.type);\n powerUps.splice(i, 1);\n } else if (pu.life <= 0) {\n powerUps.splice(i, 1);\n }\n });\n\n // Power-up stack timers (each stack has independent timer)\n for (let key in activePowerUps) {\n let pu = activePowerUps[key];\n for (let i = pu.stacks.length - 1; i >= 0; i--) {\n pu.stacks[i].timer -= dt;\n if (pu.stacks[i].timer <= 0) {\n pu.stacks.splice(i, 1);\n if (pu.stacks.length === 0) {\n addFloatingText(\n player.x,\n player.y - 50 * scaleFactor,\n `${key.toUpperCase()} ENDED`,\n \"#888888\",\n 18,\n );\n } else {\n addFloatingText(\n player.x,\n player.y - 50 * scaleFactor,\n `${key.toUpperCase()} x${pu.stacks.length}`,\n \"#888888\",\n 14,\n );\n }\n }\n }\n }\n\n if (health < 30) hpBox.classList.add(\"critical-hp\");\n else hpBox.classList.remove(\"critical-hp\");\n\n // PHASE 2: Update combo UI\n if (combo.count > 0) {\n comboDisplay.classList.add(\"active\");\n comboCountEl.innerText = combo.count;\n comboMultEl.innerText = combo.multiplier.toFixed(1);\n } else {\n comboDisplay.classList.remove(\"active\");\n }\n\n // PHASE 4: Update wave UI\n waveNumberEl.innerText = wave.current;\n }\n\n let shootCooldown = 0;\n\n // --- DRAW ---\n function draw() {\n ctx.save();\n if (screenShake > 0)\n ctx.translate((Math.random() - 0.5) * screenShake, (Math.random() - 0.5) * screenShake);\n\n ctx.fillStyle = \"rgba(5, 5, 8, 0.3)\";\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n // Barriers\n barriers.forEach((b) => {\n ctx.save();\n ctx.translate(b.x, b.y);\n ctx.strokeStyle = \"#00f3ff\";\n ctx.lineWidth = 2;\n ctx.shadowColor = \"#00f3ff\";\n ctx.shadowBlur = 10;\n ctx.strokeRect(0, 0, b.w, b.h);\n ctx.fillStyle = \"rgba(0,243,255,0.05)\";\n ctx.fillRect(0, 0, b.w, b.h);\n ctx.restore();\n });\n\n // Heal Boxes\n healBoxes.forEach((hb) => {\n ctx.save();\n ctx.translate(hb.x, hb.y);\n ctx.strokeStyle = \"#00ff66\";\n ctx.lineWidth = 3;\n ctx.shadowColor = \"#00ff66\";\n ctx.shadowBlur = 15;\n ctx.strokeRect(-hb.size / 2, -hb.size / 2, hb.size, hb.size);\n // Simple Cross\n ctx.beginPath();\n ctx.moveTo(0, -8);\n ctx.lineTo(0, 8);\n ctx.moveTo(-8, 0);\n ctx.lineTo(8, 0);\n ctx.stroke();\n let pct = hb.hp / hb.maxHp;\n ctx.fillStyle = \"#00ff66\";\n ctx.fillRect(-hb.size / 2, hb.size / 2 + 5, hb.size * pct, 3);\n ctx.restore();\n });\n\n // PHASE 3: Dash Ghosts (Afterimages)\n dashGhosts.forEach((g) => {\n ctx.save();\n ctx.globalAlpha = g.life / 0.3;\n ctx.translate(g.x, g.y);\n ctx.rotate(g.angle + Math.PI / 2);\n ctx.beginPath();\n ctx.moveTo(0, -player.radius * 1.5);\n ctx.lineTo(-player.radius, player.radius);\n ctx.lineTo(player.radius, player.radius);\n ctx.fillStyle = \"#00f3ff\";\n ctx.shadowBlur = 10;\n ctx.shadowColor = \"#00f3ff\";\n ctx.fill();\n ctx.restore();\n });\n\n // Player - Tank Turret Style\n ctx.save();\n ctx.translate(player.x, player.y);\n\n // Body triangle - faces movement direction\n ctx.save();\n ctx.rotate(player.bodyAngle + Math.PI / 2);\n ctx.beginPath();\n ctx.moveTo(0, -player.radius * 1.5);\n ctx.lineTo(-player.radius, player.radius);\n ctx.lineTo(player.radius, player.radius);\n ctx.closePath();\n ctx.fillStyle = player.color;\n ctx.shadowBlur = 15;\n ctx.shadowColor = player.color;\n ctx.fill();\n\n // Thruster flame when moving\n if (Math.hypot(player.vx, player.vy) > 10) {\n ctx.fillStyle = \"#00ffff\";\n ctx.globalAlpha = 0.7;\n ctx.beginPath();\n ctx.moveTo(-5, 12);\n ctx.lineTo(0, 25 + Math.random() * 10);\n ctx.lineTo(5, 12);\n ctx.fill();\n }\n ctx.restore();\n\n // Turret - Neon geometric style (matching game aesthetic)\n ctx.save();\n ctx.rotate(player.angle);\n ctx.strokeStyle = \"#ffffff\";\n ctx.fillStyle = \"#00ffff\";\n ctx.shadowBlur = 12;\n ctx.shadowColor = \"#00ffff\";\n ctx.lineWidth = 3 * scaleFactor;\n\n // Simple glowing line cannon\n ctx.beginPath();\n ctx.moveTo(0, 0);\n ctx.lineTo(player.radius * 1.4, 0);\n ctx.stroke();\n\n // Arrow tip at end (matches triangle theme)\n ctx.beginPath();\n ctx.moveTo(player.radius * 1.6, 0);\n ctx.lineTo(player.radius * 1.1, -player.radius * 0.25);\n ctx.lineTo(player.radius * 1.1, player.radius * 0.25);\n ctx.closePath();\n ctx.fill();\n ctx.restore();\n\n // Dash Cooldown UI - circular arc around player\n if (!dash.available) {\n let cooldownProgress = 1 - dash.cooldown / 1.5;\n ctx.beginPath();\n ctx.arc(\n 0,\n 0,\n player.radius * 2.2,\n -Math.PI / 2,\n -Math.PI / 2 + cooldownProgress * Math.PI * 2,\n false,\n );\n ctx.strokeStyle = \"#ffffff\";\n ctx.lineWidth = 3 * scaleFactor;\n ctx.globalAlpha = 0.6;\n ctx.stroke();\n } else {\n // Ready indicator - full circle pulse\n ctx.beginPath();\n ctx.arc(0, 0, player.radius * 2.2, 0, Math.PI * 2);\n ctx.strokeStyle = \"#00ffff\";\n ctx.lineWidth = 2 * scaleFactor;\n ctx.globalAlpha = 0.3 + Math.sin(gameTime * 5) * 0.2;\n ctx.stroke();\n }\n\n ctx.restore();\n\n // Enemies\n enemies.forEach((e) => {\n ctx.save();\n ctx.shadowColor = e.flash > 0 ? \"#fff\" : e.color;\n ctx.shadowBlur = e.flash > 0 ? 20 : 10;\n ctx.strokeStyle = e.flash > 0 ? \"#fff\" : e.color;\n ctx.fillStyle = e.flash > 0 ? \"#fff\" : e.color.replace(\"60%\", \"20%\");\n\n if (e.type === \"sniper\") {\n ctx.translate(e.x, e.y);\n ctx.rotate(Math.atan2(player.y - e.y, player.x - e.x));\n ctx.beginPath();\n ctx.moveTo(e.radius, 0);\n ctx.lineTo(-e.radius, -e.radius / 1.5);\n ctx.lineTo(-e.radius, e.radius / 1.5);\n ctx.closePath();\n ctx.stroke();\n if (e.flash > 0) ctx.fill();\n } else {\n ctx.beginPath();\n if (e.type === \"tank\")\n ctx.rect(e.x - e.radius, e.y - e.radius, e.radius * 2, e.radius * 2);\n else if (e.type === \"dasher\") {\n ctx.moveTo(e.x, e.y - e.radius);\n ctx.lineTo(e.x + e.radius, e.y);\n ctx.lineTo(e.x, e.y + e.radius);\n ctx.lineTo(e.x - e.radius, e.y);\n ctx.closePath();\n } else ctx.arc(e.x, e.y, e.radius, 0, Math.PI * 2);\n ctx.stroke();\n if (e.flash > 0) ctx.fill();\n else if (e.type !== \"sniper\") ctx.fill();\n }\n ctx.restore();\n // HP Bar - larger for bosses\n if (e.hp < e.maxHp) {\n let barW = e.isBoss ? e.radius * 3 : e.radius * 2;\n let barH = e.isBoss ? 6 : 3;\n let barY = e.y - e.radius - (e.isBoss ? 15 : 8);\n let hpRatio = e.hp / e.maxHp;\n\n // Background\n ctx.fillStyle = \"rgba(0,0,0,0.5)\";\n ctx.fillRect(e.x - barW / 2, barY, barW, barH);\n // HP fill\n ctx.fillStyle = e.isBoss ? \"#ff0066\" : \"#fff\";\n ctx.fillRect(e.x - barW / 2, barY, barW * hpRatio, barH);\n // Boss name above HP bar\n if (e.isBoss) {\n ctx.fillStyle = \"#ff0066\";\n ctx.font = `bold ${12 * scaleFactor}px 'Orbitron', sans-serif`;\n ctx.textAlign = \"center\";\n ctx.fillText(e.type.toUpperCase().replace(\"_\", \" \"), e.x, barY - 5);\n }\n }\n });\n\n // PHASE 1: Projectiles with trails and dynamic colors\n bullets.forEach((b) => {\n // Draw trail\n if (b.trail && b.trail.length > 1) {\n ctx.strokeStyle = b.color || \"#ff00ff\";\n ctx.lineWidth = 2 * scaleFactor;\n for (let i = 0; i < b.trail.length - 1; i++) {\n ctx.globalAlpha = (i / b.trail.length) * 0.5;\n ctx.beginPath();\n ctx.moveTo(b.trail[i].x, b.trail[i].y);\n ctx.lineTo(b.trail[i + 1].x, b.trail[i + 1].y);\n ctx.stroke();\n }\n ctx.globalAlpha = 1;\n }\n // Draw bullet\n ctx.fillStyle = b.color || \"#ff00ff\";\n ctx.shadowBlur = 8;\n ctx.shadowColor = b.color || \"#ff00ff\";\n ctx.beginPath();\n ctx.arc(b.x, b.y, 4 * scaleFactor, 0, Math.PI * 2);\n ctx.fill();\n });\n\n enemyBullets.forEach((eb) => {\n ctx.fillStyle = eb.color;\n ctx.shadowColor = eb.color;\n ctx.beginPath();\n ctx.arc(eb.x, eb.y, 6 * scaleFactor, 0, Math.PI * 2);\n ctx.fill();\n });\n\n // PHASE 1: Hit Markers\n hitMarkers.forEach((hm) => {\n ctx.save();\n ctx.globalAlpha = hm.life / 0.15;\n ctx.strokeStyle = \"#fff\";\n ctx.lineWidth = 2 * scaleFactor;\n ctx.shadowBlur = 5;\n ctx.shadowColor = \"#fff\";\n ctx.beginPath();\n ctx.moveTo(hm.x - hm.size, hm.y - hm.size);\n ctx.lineTo(hm.x + hm.size, hm.y + hm.size);\n ctx.moveTo(hm.x + hm.size, hm.y - hm.size);\n ctx.lineTo(hm.x - hm.size, hm.y + hm.size);\n ctx.stroke();\n ctx.restore();\n });\n\n // Promo\n promoBots.forEach((p) => {\n ctx.save();\n ctx.translate(p.x, p.y);\n ctx.rotate(gameTime);\n ctx.strokeStyle = \"#ffd700\";\n ctx.lineWidth = 3;\n ctx.shadowBlur = 15;\n ctx.shadowColor = \"#ffd700\";\n ctx.strokeRect(-p.size / 2, -p.size / 2, p.size, p.size);\n ctx.fillStyle = \"#fff\";\n ctx.font = \"10px Arial\";\n ctx.textAlign = \"center\";\n ctx.fillText(\"BONUS\", 0, 4);\n ctx.restore();\n });\n\n // Text & Particles\n floatingTexts.forEach((ft) => {\n ctx.globalAlpha = ft.life;\n ctx.fillStyle = ft.color;\n ctx.font = `bold ${ft.size || 16}px Arial`;\n ctx.textAlign = \"center\";\n ctx.fillText(ft.text, ft.x, ft.y);\n ctx.globalAlpha = 1;\n });\n particles.forEach((p) => {\n ctx.globalAlpha = p.life;\n ctx.fillStyle = p.color;\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.size || 2, 0, Math.PI * 2);\n ctx.fill();\n ctx.globalAlpha = 1;\n });\n\n // PHASE 2: Kill Streak Notifications\n killStreakNotifications.forEach((ksn) => {\n ctx.save();\n ctx.globalAlpha = Math.min(1, ksn.life);\n ctx.fillStyle = ksn.color;\n ctx.font = `bold ${60 * ksn.scale * scaleFactor}px Arial`;\n ctx.textAlign = \"center\";\n ctx.shadowBlur = 30;\n ctx.shadowColor = ksn.color;\n ctx.fillText(ksn.text, canvas.width / 2, canvas.height / 2);\n ctx.restore();\n });\n\n // PHASE 7: Power-up rendering\n powerUps.forEach((pu) => {\n ctx.save();\n ctx.translate(pu.x, pu.y);\n ctx.rotate(pu.rotation);\n ctx.globalAlpha = 0.8 + Math.sin(pu.life * 5) * 0.2; // Pulse\n ctx.fillStyle = pu.color;\n ctx.shadowBlur = 15;\n ctx.shadowColor = pu.color;\n ctx.beginPath();\n // Diamond shape\n ctx.moveTo(0, -pu.size);\n ctx.lineTo(pu.size, 0);\n ctx.lineTo(0, pu.size);\n ctx.lineTo(-pu.size, 0);\n ctx.closePath();\n ctx.fill();\n ctx.restore();\n });\n\n ctx.restore();\n }\n\n function createExplosion(x, y, c, cnt = 10) {\n for (let i = 0; i < cnt; i++)\n particles.push({\n x: x,\n y: y,\n vx: (Math.random() - 0.5) * 10,\n vy: (Math.random() - 0.5) * 10,\n life: 1,\n color: c,\n size: Math.random() * 3,\n });\n }\n function takeDamage(a) {\n // PHASE 9: Shield blocking (stack-based)\n let shieldStacks = activePowerUps.shield.stacks;\n if (shieldStacks.length > 0) {\n // Find first stack with hits remaining\n for (let i = 0; i < shieldStacks.length; i++) {\n if (shieldStacks[i].hits > 0) {\n shieldStacks[i].hits--;\n addFloatingText(\n player.x,\n player.y - 40 * scaleFactor,\n `BLOCKED! (${shieldStacks.reduce((sum, s) => sum + s.hits, 0)} left)`,\n \"#00ffff\",\n 20,\n );\n // Shield block sound\n if (audioContext) {\n const osc = audioContext.createOscillator();\n const gain = audioContext.createGain();\n osc.connect(gain);\n gain.connect(audioContext.destination);\n osc.frequency.value = 1100;\n osc.type = \"triangle\";\n gain.gain.setValueAtTime(0.08, audioContext.currentTime);\n gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.06);\n osc.start();\n osc.stop(audioContext.currentTime + 0.06);\n }\n createExplosion(player.x, player.y, \"#00ffff\", 8);\n\n // Remove stack if no hits left\n if (shieldStacks[i].hits <= 0) {\n shieldStacks.splice(i, 1);\n if (shieldStacks.length === 0) {\n addFloatingText(\n player.x,\n player.y - 60 * scaleFactor,\n \"SHIELDS DEPLETED\",\n \"#888888\",\n 18,\n );\n }\n }\n return; // Don't take damage\n }\n }\n }\n\n health -= a;\n health = Math.max(0, health);\n healthEl.innerText = health;\n soundDamage();\n if (health <= 0) endGame(\"Terminated\");\n }\n function endGame(c) {\n gameActive = false;\n gameOverScreen.style.display = \"flex\";\n document.getElementById(\"cause-of-death\").innerText = c;\n document.getElementById(\"final-score\").innerText = score;\n\n // PHASE 8: Update and save statistics\n if (score > saveData.highScore) {\n saveData.highScore = score;\n document.getElementById(\"high-score\").innerText = `NEW HIGH SCORE: ${score}`;\n document.getElementById(\"high-score\").style.color = \"#ffd700\";\n } else {\n document.getElementById(\"high-score\").innerText = `High Score: ${saveData.highScore}`;\n document.getElementById(\"high-score\").style.color = \"#00f3ff\";\n }\n\n if (combo.highestCombo > saveData.highestCombo) saveData.highestCombo = combo.highestCombo;\n saveData.totalKills += wave.enemiesKilled;\n saveData.gamesPlayed++;\n saveSaveData();\n }\n\n // PHASE 11: Pause Menu Functions\n function togglePause() {\n if (!gameStarted) return; // Can't toggle if not started\n isPaused = !isPaused;\n if (isPaused) {\n updatePauseStats();\n updatePauseButtons();\n pauseMenu.style.display = \"flex\";\n } else {\n pauseMenu.style.display = \"none\";\n }\n }\n\n function startGame() {\n gameStarted = true;\n isPaused = false;\n pauseMenu.style.display = \"none\";\n initAudio();\n }\n\n function updatePauseButtons() {\n const startBtn = document.getElementById(\"start-btn\");\n const resumeBtn = document.getElementById(\"resume-btn\");\n const restartBtn = document.getElementById(\"restart-btn\");\n const pauseTitle = document.getElementById(\"pause-title\");\n\n if (gameStarted) {\n startBtn.style.display = \"none\";\n resumeBtn.style.display = \"block\";\n restartBtn.style.display = \"block\";\n pauseTitle.innerText = \"⏸️ PAUSED\";\n } else {\n startBtn.style.display = \"block\";\n resumeBtn.style.display = \"none\";\n restartBtn.style.display = \"none\";\n pauseTitle.innerText = \"🎮 CYBER-NEON\";\n }\n }\n\n function updatePauseStats() {\n document.getElementById(\"pause-score\").innerText = score.toLocaleString();\n document.getElementById(\"pause-wave\").innerText = wave.current;\n document.getElementById(\"pause-kills\").innerText = wave.enemiesKilled;\n document.getElementById(\"pause-combo\").innerText = combo.count;\n document.getElementById(\"pause-best-combo\").innerText = combo.highestCombo;\n document.getElementById(\"pause-weapon\").innerText = weaponSystem.currentType.toUpperCase();\n document.getElementById(\"pause-health\").innerText = health;\n\n // Format time as M:SS\n let mins = Math.floor(gameTime / 60);\n let secs = Math.floor(gameTime % 60);\n document.getElementById(\"pause-time\").innerText =\n `${mins}:${secs.toString().padStart(2, \"0\")}`;\n\n // Active power-ups list\n let activePUs = [];\n if (activePowerUps.firerate.stacks.length > 0)\n activePUs.push(`Firerate x${activePowerUps.firerate.stacks.length}`);\n if (activePowerUps.damage.stacks.length > 0)\n activePUs.push(`Damage x${activePowerUps.damage.stacks.length}`);\n if (activePowerUps.shield.stacks.length > 0)\n activePUs.push(`Shield x${activePowerUps.shield.stacks.length}`);\n if (activePowerUps.pierce.stacks.length > 0)\n activePUs.push(`Pierce x${activePowerUps.pierce.stacks.length}`);\n document.getElementById(\"pause-powerups\").innerText =\n activePUs.length > 0 ? activePUs.join(\", \") : \"None\";\n\n document.getElementById(\"pause-highscore\").innerText = saveData.highScore.toLocaleString();\n }\n\n function restartFromPause() {\n isPaused = false;\n pauseMenu.style.display = \"none\";\n resetGame();\n }\n function resetGame() {\n score = 0;\n health = 100;\n gameTime = 0;\n enemySpawnTimer = 0;\n scoreEl.innerText = 0;\n healthEl.innerText = 100;\n enemies = [];\n bullets = [];\n enemyBullets = [];\n particles = [];\n promoBots = [];\n barriers = [];\n healBoxes = [];\n floatingTexts = [];\n hitMarkers = [];\n combo = { count: 0, multiplier: 1.0, timer: 0, maxTime: 2.5, highestCombo: 0 };\n slowMo = { active: false, timer: 0, factor: 1.0 };\n killStreakNotifications = [];\n dash = {\n available: true,\n cooldown: 0,\n maxCooldown: 1.5,\n distance: 150,\n duration: 0.15,\n active: false,\n timer: 0,\n dirX: 0,\n dirY: 0,\n };\n iframes = false;\n dashGhosts = [];\n wave = {\n current: 1,\n duration: 35,\n timer: 0,\n state: \"active\",\n enemiesKilled: 0,\n transitionTimer: 0,\n bossActive: false,\n };\n player.x = canvas.width / 2;\n player.y = canvas.height / 2;\n player.vx = 0;\n player.vy = 0;\n gameActive = true;\n gameOverScreen.style.display = \"none\";\n lastTime = Date.now();\n requestAnimationFrame(loop);\n }\n\n function loop() {\n if (!gameActive) return;\n if (isPaused) {\n requestAnimationFrame(loop);\n return;\n } // PHASE 11: Skip update when paused\n let now = Date.now();\n let dt = (now - lastTime) / 1000;\n lastTime = now;\n if (dt > 0.1) dt = 0.1;\n update(dt);\n draw();\n requestAnimationFrame(loop);\n }\n lastTime = Date.now();\n loop();\n",[],[152,231,222],"NEON-DEFENDER","03d05ccc-4714-11f1-b0bd-42b51c65c3df","NEON-DEFENDER.html","03d05d9e-4714-11f1-b0bd-42b51c65c3df",39,["D",1777828671357],"\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",[],[152,231,233],"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",[],[152,231,241],"0398b88a-4714-11f1-9a5c-42b51c65c3df",34,["D",1777828671036],[209,210,211],[152,231],"03c6a092-4714-11f1-bdc4-42b51c65c3df","MIDNIGHT-RACING.js","03c6a132-4714-11f1-bdc4-42b51c65c3df","0389895a-4714-11f1-b2ab-42b51c65c3df",38,["D",1777828671232]," 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",[],[152,262,254],"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",[],[152,262,264],"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",[],[152,262,272],"03898888-4714-11f1-b2ab-42b51c65c3df",33,["D",1777828670937],[205,206,207],[152,262],["D",1777828670819],[204,208],[152],"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",[],[159,288],"29a538c9-a990-49ba-8dda-ab89a11cc743","config.ts","5b32af22-1c19-11f1-884f-42dde27851f2",46,["D",1781228540193],"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\", \"snake2\"] 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",[],[159,296],["D",1773103064934],[201,202],[159],"eb7db358-7c91-4edf-a449-4c32a9438028","5b5e8476-1c19-11f1-92d7-42dde27851f2",45,["D",1781228540038],":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--snake2 {\n border-color: rgba(86, 200, 255, 0.2);\n}\n.game-card--snake2::before {\n background: radial-gradient(ellipse at center, rgba(86, 200, 255, 0.06) 0%, transparent 70%);\n}\n.game-card--snake2:hover {\n border-color: #56c8ff;\n box-shadow:\n 0 0 15px rgba(86, 200, 255, 0.15),\n inset 0 0 30px rgba(86, 200, 255, 0.03);\n transform: translateY(-2px);\n}\n.game-card--snake2 .game-card__title {\n color: #56c8ff;\n text-shadow: 0 0 8px rgba(86, 200, 255, 0.5);\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 min-height: 420px;\n}\n\n.game-arena--handoff {\n background: #07090d;\n min-height: 560px;\n border: 1px solid #1b2330;\n border-radius: 2px;\n}\n\n#game-embed {\n max-width: 100%;\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",[],[165,32],"89a2b0db-52f7-4dd3-8b54-b918ac0f8ce9","script.ts","5aff238c-1c19-11f1-8ef6-42dde27851f2",43,["D",1781228540085],4,"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 currentEmbedFrame: HTMLIFrameElement | 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 if (view !== \"game\") setEmbedHandoffBackdrop(false);\n}\n\nfunction getGameEmbed(): HTMLIFrameElement | null {\n return document.getElementById(\"game-embed\") as HTMLIFrameElement | null;\n}\n\nfunction setEmbedHandoffBackdrop(on: boolean): void {\n document.querySelector(\".game-arena\")?.classList.toggle(\"game-arena--handoff\", on);\n}\n\nfunction readEmbedScore(embed: HTMLIFrameElement): number {\n try {\n const w = embed.contentWindow as any;\n if (w?.__arcadeSnake2 && typeof w.__arcadeSnake2.getScore === \"function\") {\n return w.__arcadeSnake2.getScore() || 0;\n }\n if (w?.G && typeof w.G.score === \"number\") return w.G.score;\n } catch {\n // iframe not ready\n }\n return 0;\n}\n\nfunction detachEmbedFrame(): number {\n const embed = currentEmbedFrame || getGameEmbed();\n let score = 0;\n if (embed) {\n score = readEmbedScore(embed);\n try { embed.src = \"about:blank\"; } catch {}\n embed.style.display = \"none\";\n }\n currentEmbedFrame = null;\n\n const bezel = document.querySelector(\".canvas-bezel\");\n if (bezel) bezel.style.display = \"\";\n if (gameSpeedDisplay) gameSpeedDisplay.style.display = \"\";\n if (gameSlowStatus) gameSlowStatus.style.display = \"\";\n return score;\n}\n\nfunction showLobby(): void {\n if (activeGameInstance) {\n activeGameInstance.destroy();\n activeGameInstance = null;\n }\n if (currentEmbedFrame) {\n const harvested = detachEmbedFrame();\n if (harvested > 0) {\n currentGame = \"snake2\";\n gameTitle.textContent = \"SNAKE²\";\n gameScoreDisplay.textContent = `SCORE: ${harvested}`;\n setEmbedHandoffBackdrop(true);\n onGameOver(harvested);\n return;\n }\n setEmbedHandoffBackdrop(false);\n currentGame = null;\n showView(\"lobby\");\n loadLobbyLeaderboard(lobbyLeaderboardTab);\n return;\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 if (currentEmbedFrame) {\n detachEmbedFrame();\n }\n\n currentGame = game;\n gameTitle.textContent = game === \"snake2\" ? \"SNAKE²\" : 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 setEmbedHandoffBackdrop(false);\n\n // Ensure normal canvas path is visible (embed may have been cleaned above)\n const bezelEl = document.querySelector(\".canvas-bezel\");\n const embedEl = getGameEmbed();\n if (bezelEl) bezelEl.style.display = \"\";\n if (embedEl) embedEl.style.display = \"none\";\n if (gameSpeedDisplay) gameSpeedDisplay.style.display = \"\";\n if (gameSlowStatus) gameSlowStatus.style.display = \"\";\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 if (game === \"tetris\") {\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 } else if (game === \"snake2\") {\n controlsHint.innerHTML = \"ARROWS / WASD · SPACE (PICK/PLANT) · MOUSE IN ACTS — ESC OR BACK TO EXIT\";\n const bezel = document.querySelector(\".canvas-bezel\");\n const embed = getGameEmbed();\n if (bezel) bezel.style.display = \"none\";\n if (embed) {\n embed.style.display = \"\";\n embed.style.height = \"560px\";\n embed.src = \"/FRONTEND/snake2.html\";\n embed.onload = () => { try { embed.focus(); } catch {} };\n currentEmbedFrame = embed;\n }\n gameScoreDisplay.textContent = \"SCORE: 0\";\n if (gameSpeedDisplay) gameSpeedDisplay.style.display = \"none\";\n if (gameSlowStatus) gameSlowStatus.style.display = \"none\";\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 === \"snake2\" ? \"SNAKE² LEADERBOARD\" : `${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 (canvas games + embed via postMessage from snake2)\ndocument.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Escape\") {\n if (avatarModal.style.display !== \"none\") {\n closeAvatarModal();\n } else if (activeGameInstance || currentEmbedFrame) {\n showLobby();\n }\n }\n});\n\nwindow.addEventListener(\"message\", (e) => {\n if (e.data?.type === \"snake2:exit\" && currentEmbedFrame) {\n showLobby();\n }\n});\n\n// Expose to HTML onclick handlers\n(window as any).__arcade = {\n showLobby,\n showGame,\n showLeaderboard,\n restartGame,\n switchLeaderboardTab,\n saveScore,\n openAvatarModal,\n closeAvatarModal,\n saveAvatar,\n};\n\n// Init\nfetchUser();\nloadLobbyLeaderboard(\"snake\");\n",[],[165,314],"a46faeeb-aae4-4f6f-a096-3c1c9e1062bd","index.html","5af2be3a-1c19-11f1-a7d6-42dde27851f2",44,["D",1781228540043],"\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

🐍

SNAKE²

Stable build. Narrative.
Garden. Ghosts. Voice.

PRESS TO PLAY

\n\n

HIGH SCORES

\n \n \n \n

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

\n\n \n \n\n",[],[165,323],"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",[],[165,331],"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",[],[165,339],"3b15366e-c5a2-425c-aa4e-205dd471d2ac","4e59bc38-6600-11f1-853e-1607ee4eb77e",["D",1781228692736],[],[165,351,32],"snake2","c0a3256e-daee-434b-8cb8-8c1ad9e2f89f","4e71f870-6600-11f1-aa8c-1607ee4eb77e",48,["D",1781228692710],"\n\n\n \n \n SNAKE — STABLE BUILD v1.0.0\n \n\n\n

\n \n

arrows / WASD

\n \n \n \n \n\n\n",[],[165,351,323],"c380b712-983f-4f08-83c5-a508863ef1b0",47,["D",1781228692565],[193,194],[165,351],["D",1773103064650],[192,195,196,197,198,199],[165],"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",[],[171,368],"2a699b56-683f-402a-a9dd-646ae78fcf4b","routes.api.ts","5b0b54c2-1c19-11f1-a014-42dde27851f2",42,["D",1781228540052],"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 snake2: 100000,\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",[],[171,376],"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",[],[171,384],"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",[],[171,392],["D",1773103064759],[187,188,189,190],[171],["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":440,"_441":442,"_443":444,"_445":24,"_446":24,"_447":24,"_448":121,"_449":-5,"_450":-7,"_451":-7,"_452":59,"_453":24,"_454":24,"_455":-5,"_456":24,"_457":24,"_458":24,"_459":-5},"ENV",{"_411":412,"_413":414,"_415":86,"_416":417,"_418":419,"_420":421,"_422":423,"_424":425,"_426":427,"_428":429,"_430":431,"_432":433,"_434":435,"_436":437,"_438":439},"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 · v49