[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_385":386,"_387":388},"routes/_app.x.$handle.$name",{"_98":97,"_32":45,"_106":88,"_27":53,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":25,"_120":121,"_122":123,"_124":-5,"_125":-5,"_126":127},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",44,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":20,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":20,"_35":36},"deleted",false,"deletedHere","path","FRONTEND/index.html","latestPath","fileId","5af2be3a-1c19-11f1-a7d6-42dde27851f2","name","index.html","fileType","content","\n\n \n \n \n ARCADE\n \n \n \n \n \n \n \n

\n\n

\n \n

ARCADE

\n\n \n

SELECT
YOUR GAME

INSERT COIN TO PLAY

\n\n

🐍

SNAKE

Classic serpent action.
Eat. Grow. Survive.

PRESS TO PLAY

🧱

TETRIS

Stack the blocks.
Clear the lines.

PRESS TO PLAY

\n\n

HIGH SCORES

\n \n \n

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

\n\n \n \n\n","\n\n \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","createdAt",["D",1781228540043],"branchVersion","branchId","2a8d98aa-1c19-11f1-b7f6-42dde27851f2","id","2a8d2064-1c19-11f1-b7f6-42dde27851f2","arcade-games",["D",1773102983877],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","1601447d-3c17-4580-a190-f6b82a1eb8e2","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","8789b31e-4477-4b2d-ae0d-cc5f2132061a","tursoName","2a8d20641c1911f1b7f642dde27851f2","tursoHostname","2a8d20641c1911f1b7f642dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789521041830],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_105":101},"org",{"_98":97,"_99":-5,"_100":101,"_18":55,"_102":103,"_104":25},"branch",{"_13":87,"_32":88,"_43":42,"_89":44,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":45,"_96":97},"isOwned",54,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","arfan","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJ3WWZ5Sm91SWx1eXRNRTZDazIwbnFiUVV4WiJ9","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_43":44,"_32":45,"_38":380,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":381,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":382,"_82":383,"_84":384,"_86":25},"tree",[188,193,199,202,211,212],"files",[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],"counts",{"_178":61,"_179":169,"_180":61,"_181":182,"_183":184},"contents",[128,129,130,131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_43":172,"_32":173,"_30":174,"_137":-5,"_41":42,"_40":175,"_139":123,"_38":176,"_13":61,"_34":158,"_35":-5,"_24":25,"_142":-5,"_27":177},{"_43":166,"_32":167,"_30":168,"_137":-5,"_41":42,"_40":169,"_139":123,"_38":170,"_13":61,"_34":158,"_35":-5,"_24":25,"_142":-5,"_27":171},{"_43":160,"_32":161,"_30":162,"_137":-5,"_41":42,"_40":163,"_139":123,"_38":164,"_13":61,"_34":158,"_35":-5,"_24":25,"_142":-5,"_27":165},{"_43":153,"_32":154,"_30":155,"_137":-5,"_41":42,"_40":156,"_139":123,"_38":157,"_13":61,"_34":158,"_35":-5,"_24":25,"_142":-5,"_27":159},{"_43":144,"_32":145,"_30":146,"_137":-5,"_41":42,"_40":147,"_139":123,"_38":148,"_13":61,"_34":149,"_35":150,"_24":25,"_142":151,"_27":152},{"_43":134,"_32":135,"_30":136,"_137":-5,"_41":42,"_40":138,"_139":123,"_38":140,"_13":61,"_34":20,"_35":141,"_24":25,"_142":-5,"_27":143},"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",[135],"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",[145],"0379c808-4714-11f1-b2ab-42b51c65c3df","tmp","0379c8d0-4714-11f1-b2ab-42b51c65c3df",32,["D",1777828670819],"directory",[154],"5adcfc12-1c19-11f1-a014-42dde27851f2","Shared","5adcfcee-1c19-11f1-a014-42dde27851f2",3,["D",1773103064934],[161],"5ab24d14-1c19-11f1-9226-42dde27851f2","FRONTEND","5ab24e0e-1c19-11f1-9226-42dde27851f2",1,["D",1773103064650],[167],"5ac24412-1c19-11f1-9226-42dde27851f2","BACKEND","5ac244d0-1c19-11f1-9226-42dde27851f2",2,["D",1773103064759],[173],"pulls","branches","forks","envVars",{"_185":61,"_187":61},"connections",{"_185":61,"_186":61},"count","unfilledCount","emptyCount",{"_43":172,"_32":173,"_30":174,"_137":-5,"_41":42,"_40":175,"_139":123,"_38":377,"_13":61,"_34":158,"_35":-5,"_24":25,"_142":-5,"_214":378,"_27":379},{"_43":369,"_32":370,"_30":371,"_137":174,"_41":42,"_40":372,"_139":123,"_38":373,"_13":61,"_34":226,"_35":374,"_24":25,"_142":-5,"_214":375,"_27":376},{"_43":361,"_32":362,"_30":363,"_137":174,"_41":42,"_40":364,"_139":123,"_38":365,"_13":169,"_34":226,"_35":366,"_24":25,"_142":-5,"_214":367,"_27":368},{"_43":353,"_32":354,"_30":355,"_137":174,"_41":42,"_40":356,"_139":123,"_38":357,"_13":175,"_34":226,"_35":358,"_24":25,"_142":-5,"_214":359,"_27":360},{"_43":345,"_32":346,"_30":347,"_137":174,"_41":42,"_40":348,"_139":123,"_38":349,"_13":61,"_34":226,"_35":350,"_24":25,"_142":-5,"_214":351,"_27":352},{"_43":166,"_32":167,"_30":168,"_137":-5,"_41":42,"_40":169,"_139":123,"_38":342,"_13":61,"_34":158,"_35":-5,"_24":25,"_142":-5,"_214":343,"_27":344},{"_43":334,"_32":335,"_30":336,"_137":168,"_41":42,"_40":337,"_139":123,"_38":338,"_13":163,"_34":226,"_35":339,"_24":25,"_142":-5,"_214":340,"_27":341},{"_43":326,"_32":327,"_30":328,"_137":168,"_41":42,"_40":329,"_139":123,"_38":330,"_13":163,"_34":226,"_35":331,"_24":25,"_142":-5,"_214":332,"_27":333},{"_43":322,"_32":33,"_30":31,"_137":168,"_41":42,"_40":14,"_139":123,"_38":323,"_13":163,"_34":20,"_35":37,"_24":25,"_142":-5,"_214":324,"_27":325},{"_43":313,"_32":314,"_30":315,"_137":168,"_41":42,"_40":316,"_139":25,"_38":317,"_13":318,"_34":226,"_35":319,"_24":25,"_142":-5,"_214":320,"_27":321},{"_43":305,"_32":306,"_30":307,"_137":168,"_41":42,"_40":308,"_139":25,"_38":309,"_13":175,"_34":20,"_35":310,"_24":25,"_142":-5,"_214":311,"_27":312},{"_43":160,"_32":161,"_30":162,"_137":-5,"_41":42,"_40":163,"_139":123,"_38":302,"_13":61,"_34":158,"_35":-5,"_24":25,"_142":-5,"_214":303,"_27":304},{"_43":294,"_32":295,"_30":296,"_137":162,"_41":42,"_40":297,"_139":25,"_38":298,"_13":169,"_34":226,"_35":299,"_24":25,"_142":-5,"_214":300,"_27":301},{"_43":286,"_32":287,"_30":288,"_137":162,"_41":42,"_40":289,"_139":123,"_38":290,"_13":61,"_34":226,"_35":291,"_24":25,"_142":-5,"_214":292,"_27":293},{"_43":153,"_32":154,"_30":155,"_137":-5,"_41":42,"_40":156,"_139":123,"_38":283,"_13":61,"_34":158,"_35":-5,"_24":25,"_142":-5,"_214":284,"_27":285},{"_43":278,"_32":261,"_30":255,"_137":155,"_41":42,"_40":279,"_139":123,"_38":280,"_13":61,"_34":158,"_35":-5,"_24":25,"_142":-5,"_214":281,"_27":282},{"_43":270,"_32":271,"_30":272,"_137":255,"_41":42,"_40":273,"_139":123,"_38":274,"_13":61,"_34":20,"_35":275,"_24":25,"_142":-5,"_214":276,"_27":277},{"_43":262,"_32":263,"_30":264,"_137":255,"_41":42,"_40":265,"_139":123,"_38":266,"_13":61,"_34":20,"_35":267,"_24":25,"_142":-5,"_214":268,"_27":269},{"_43":252,"_32":253,"_30":254,"_137":255,"_41":42,"_40":256,"_139":123,"_38":257,"_13":61,"_34":226,"_35":258,"_24":25,"_142":-5,"_214":259,"_27":260},{"_43":247,"_32":230,"_30":223,"_137":155,"_41":42,"_40":248,"_139":123,"_38":249,"_13":61,"_34":158,"_35":-5,"_24":25,"_142":-5,"_214":250,"_27":251},{"_43":239,"_32":240,"_30":241,"_137":223,"_41":42,"_40":242,"_139":123,"_38":243,"_13":61,"_34":20,"_35":244,"_24":25,"_142":-5,"_214":245,"_27":246},{"_43":231,"_32":232,"_30":233,"_137":223,"_41":42,"_40":234,"_139":123,"_38":235,"_13":61,"_34":20,"_35":236,"_24":25,"_142":-5,"_214":237,"_27":238},{"_43":220,"_32":221,"_30":222,"_137":223,"_41":42,"_40":224,"_139":123,"_38":225,"_13":61,"_34":226,"_35":227,"_24":25,"_142":-5,"_214":228,"_27":229},{"_43":144,"_32":145,"_30":146,"_137":-5,"_41":42,"_40":147,"_139":123,"_38":217,"_13":61,"_34":149,"_35":150,"_24":25,"_142":151,"_214":218,"_27":219},{"_43":134,"_32":135,"_30":136,"_137":-5,"_41":42,"_40":138,"_139":123,"_38":213,"_13":61,"_34":20,"_35":141,"_24":25,"_142":-5,"_214":215,"_27":216},["D",1781228540014],"children",[],[135],["D",1773103065469],[],[145],"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",[],[154,230,221],"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",[],[154,230,232],"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",[],[154,230,240],"0398b88a-4714-11f1-9a5c-42b51c65c3df",34,["D",1777828671036],[208,209,210],[154,230],"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",[],[154,261,253],"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",[],[154,261,263],"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",[],[154,261,271],"03898888-4714-11f1-b2ab-42b51c65c3df",33,["D",1777828670937],[204,205,206],[154,261],["D",1777828670819],[203,207],[154],"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",[],[161,287],"1155e7ee-1c1d-11f1-9b6c-42dde27851f2","config.ts","5b32af22-1c19-11f1-884f-42dde27851f2",24,["D",1773104659372],"export const APP_NAME = \"ARCADE\";\nexport const VERSION = \"1.0.0\";\nexport const USERS_TABLE = \"arcade_users_v1\";\nexport const SCORES_TABLE = \"arcade_scores_v1\";\nexport const VALID_GAMES = [\"snake\", \"tetris\"] as const;\nexport type GameName = (typeof VALID_GAMES)[number];\nexport const SLOW_TIME_DURATION = 4000;\nexport const SLOW_TIME_COOLDOWN = 15000;\nexport const SLOW_TIME_MULTIPLIER = 2.5;\n",[],[161,295],["D",1773103064934],[200,201],[161],"704539b4-1c20-11f1-bc7f-42dde27851f2","styles.css","5b5e8476-1c19-11f1-92d7-42dde27851f2",27,["D",1773106107235],":root {\n --bg-void: #050508;\n --bg-dark: #0a0a12;\n --bg-cabinet: #12121e;\n --bg-card: #16162a;\n --neon-pink: #ff2d95;\n --neon-blue: #00d4ff;\n --neon-green: #39ff14;\n --neon-yellow: #ffe600;\n --neon-purple: #bf00ff;\n --neon-orange: #ff6b00;\n --text-primary: #d0d0e0;\n --text-dim: #606080;\n --border-subtle: #1e1e3a;\n --font-pixel: \"Press Start 2P\", monospace;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml, body {\n width: 100%;\n min-height: 100vh;\n background: var(--bg-void);\n font-family: var(--font-pixel);\n color: var(--text-primary);\n font-size: 10px;\n line-height: 1.6;\n overflow-x: hidden;\n}\n\nbody {\n background:\n radial-gradient(ellipse at 50% 0%, rgba(0, 212, 255, 0.06) 0%, transparent 60%),\n radial-gradient(ellipse at 80% 100%, rgba(255, 45, 149, 0.04) 0%, transparent 50%),\n var(--bg-void);\n}\n\n/* CRT SCANLINE OVERLAY */\n.crt-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 9999;\n background: repeating-linear-gradient(\n 0deg,\n rgba(0, 0, 0, 0.12) 0px,\n rgba(0, 0, 0, 0.12) 1px,\n transparent 1px,\n transparent 3px\n );\n}\n\n/* APP CONTAINER */\n#app {\n max-width: 800px;\n margin: 0 auto;\n padding: 0 16px;\n}\n\n/* AUTH HEADER */\n#auth-header {\n padding: 20px 0;\n border-bottom: 1px solid var(--border-subtle);\n margin-bottom: 32px;\n}\n\n.header-inner {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n}\n\n.logo {\n font-size: 14px;\n color: var(--neon-pink);\n cursor: pointer;\n text-shadow:\n 0 0 8px var(--neon-pink),\n 0 0 20px rgba(255, 45, 149, 0.4);\n letter-spacing: 4px;\n transition: text-shadow 0.3s;\n}\n\n.logo:hover {\n text-shadow:\n 0 0 12px var(--neon-pink),\n 0 0 30px rgba(255, 45, 149, 0.6),\n 0 0 60px rgba(255, 45, 149, 0.3);\n}\n\n#auth-section {\n font-size: 8px;\n color: var(--text-dim);\n}\n\n#auth-section a {\n color: var(--neon-blue);\n text-decoration: none;\n transition: text-shadow 0.2s;\n}\n\n#auth-section a:hover {\n text-shadow: 0 0 8px var(--neon-blue);\n}\n\n.auth-user {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.auth-avatar {\n width: 28px;\n height: 28px;\n border-radius: 4px;\n border: 2px solid var(--neon-blue);\n box-shadow: 0 0 6px rgba(0, 212, 255, 0.3);\n}\n\n/* MARQUEE */\n.marquee {\n text-align: center;\n padding: 24px 0 40px;\n}\n\n.marquee-title {\n font-size: 28px;\n line-height: 1.4;\n color: var(--neon-yellow);\n text-shadow:\n 0 0 10px var(--neon-yellow),\n 0 0 30px rgba(255, 230, 0, 0.4),\n 0 0 60px rgba(255, 230, 0, 0.15);\n letter-spacing: 3px;\n animation: marquee-pulse 3s ease-in-out infinite;\n}\n\n@keyframes marquee-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.85; }\n}\n\n.marquee-sub {\n margin-top: 16px;\n font-size: 8px;\n color: var(--text-dim);\n letter-spacing: 3px;\n animation: blink-slow 2s step-end infinite;\n}\n\n@keyframes blink-slow {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0; }\n}\n\n/* GAME GRID */\n.game-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n margin-bottom: 48px;\n}\n\n@media (max-width: 500px) {\n .game-grid {\n grid-template-columns: 1fr;\n }\n}\n\n.game-card {\n background: var(--bg-card);\n border: 2px solid var(--border-subtle);\n border-radius: 4px;\n padding: 28px 20px;\n text-align: center;\n cursor: pointer;\n transition: all 0.25s ease;\n position: relative;\n overflow: hidden;\n}\n\n.game-card::before {\n content: \"\";\n position: absolute;\n inset: 0;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n.game-card--snake {\n border-color: rgba(57, 255, 20, 0.2);\n}\n\n.game-card--snake::before {\n background: radial-gradient(ellipse at center, rgba(57, 255, 20, 0.06) 0%, transparent 70%);\n}\n\n.game-card--snake:hover {\n border-color: var(--neon-green);\n box-shadow:\n 0 0 15px rgba(57, 255, 20, 0.15),\n inset 0 0 30px rgba(57, 255, 20, 0.03);\n transform: translateY(-2px);\n}\n\n.game-card--tetris {\n border-color: rgba(191, 0, 255, 0.2);\n}\n\n.game-card--tetris::before {\n background: radial-gradient(ellipse at center, rgba(191, 0, 255, 0.06) 0%, transparent 70%);\n}\n\n.game-card--tetris:hover {\n border-color: var(--neon-purple);\n box-shadow:\n 0 0 15px rgba(191, 0, 255, 0.15),\n inset 0 0 30px rgba(191, 0, 255, 0.03);\n transform: translateY(-2px);\n}\n\n.game-card:hover::before {\n opacity: 1;\n}\n\n.game-card__icon {\n font-size: 40px;\n margin-bottom: 16px;\n filter: saturate(1.2);\n}\n\n.game-card__title {\n font-size: 16px;\n margin-bottom: 12px;\n letter-spacing: 3px;\n}\n\n.game-card--snake .game-card__title {\n color: var(--neon-green);\n text-shadow: 0 0 8px rgba(57, 255, 20, 0.5);\n}\n\n.game-card--tetris .game-card__title {\n color: var(--neon-purple);\n text-shadow: 0 0 8px rgba(191, 0, 255, 0.5);\n}\n\n.game-card__desc {\n font-size: 7px;\n color: var(--text-dim);\n line-height: 2;\n margin-bottom: 20px;\n}\n\n.game-card__prompt {\n font-size: 7px;\n color: var(--text-dim);\n letter-spacing: 2px;\n animation: blink-slow 2s step-end infinite;\n}\n\n.game-card:hover .game-card__prompt {\n color: var(--text-primary);\n animation: none;\n}\n\n/* SECTION TITLE */\n.section-title {\n font-size: 12px;\n text-align: center;\n color: var(--neon-blue);\n text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);\n letter-spacing: 3px;\n margin-bottom: 20px;\n}\n\n/* LEADERBOARD TABS */\n.leaderboard-tabs {\n display: flex;\n justify-content: center;\n gap: 8px;\n margin-bottom: 16px;\n}\n\n.tab-btn {\n font-family: var(--font-pixel);\n font-size: 8px;\n padding: 8px 16px;\n background: var(--bg-cabinet);\n border: 1px solid var(--border-subtle);\n color: var(--text-dim);\n cursor: pointer;\n transition: all 0.2s;\n letter-spacing: 1px;\n}\n\n.tab-btn.active {\n color: var(--neon-blue);\n border-color: var(--neon-blue);\n box-shadow: 0 0 8px rgba(0, 212, 255, 0.2);\n}\n\n.tab-btn:hover {\n color: var(--text-primary);\n border-color: var(--text-dim);\n}\n\n/* LEADERBOARD TABLE */\n.leaderboard-preview {\n padding-bottom: 40px;\n}\n\n.lb-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 8px;\n}\n\n.lb-table th {\n color: var(--text-dim);\n text-align: left;\n padding: 8px 12px;\n border-bottom: 1px solid var(--border-subtle);\n font-weight: normal;\n letter-spacing: 1px;\n}\n\n.lb-table td {\n padding: 10px 12px;\n border-bottom: 1px solid rgba(30, 30, 58, 0.5);\n}\n\n.lb-table tr:hover td {\n background: rgba(255, 255, 255, 0.02);\n}\n\n.lb-rank {\n width: 40px;\n font-size: 10px;\n}\n\n.lb-rank--1 { color: var(--neon-yellow); text-shadow: 0 0 6px rgba(255, 230, 0, 0.5); }\n.lb-rank--2 { color: #c0c0c0; text-shadow: 0 0 6px rgba(192, 192, 192, 0.4); }\n.lb-rank--3 { color: var(--neon-orange); text-shadow: 0 0 6px rgba(255, 107, 0, 0.4); }\n\n.lb-score {\n text-align: right;\n color: var(--neon-green);\n font-size: 9px;\n}\n\n.lb-empty {\n text-align: center;\n color: var(--text-dim);\n padding: 24px;\n font-size: 8px;\n}\n\n.lb-self td {\n background: rgba(0, 212, 255, 0.05);\n}\n\n/* GAME VIEW */\n.game-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 0 16px;\n gap: 12px;\n}\n\n.btn-back {\n font-family: var(--font-pixel);\n font-size: 8px;\n padding: 8px 12px;\n background: none;\n border: 1px solid var(--border-subtle);\n color: var(--text-dim);\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.btn-back:hover {\n color: var(--text-primary);\n border-color: var(--text-dim);\n}\n\n.game-view-title {\n font-size: 14px;\n letter-spacing: 3px;\n}\n\n.game-header-stats {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 4px;\n}\n\n.game-score {\n font-size: 10px;\n color: var(--neon-green);\n text-shadow: 0 0 6px rgba(57, 255, 20, 0.4);\n min-width: 120px;\n text-align: right;\n}\n\n.game-speed {\n font-size: 8px;\n color: var(--neon-blue);\n text-shadow: 0 0 4px rgba(0, 212, 255, 0.4);\n}\n\n.game-slow-status {\n font-size: 7px;\n color: var(--text-dim);\n letter-spacing: 1px;\n}\n\n.game-slow-status--ready {\n color: var(--neon-green);\n text-shadow: 0 0 4px rgba(57, 255, 20, 0.4);\n}\n\n.game-slow-status--active {\n color: var(--neon-blue);\n text-shadow: 0 0 6px rgba(0, 212, 255, 0.6);\n animation: slow-pulse 0.6s ease-in-out infinite;\n}\n\n.game-slow-status--cooldown {\n color: var(--text-dim);\n}\n\n@keyframes slow-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n/* CANVAS */\n.game-arena {\n display: flex;\n justify-content: center;\n padding: 8px 0;\n}\n\n.canvas-bezel {\n background: #000;\n padding: 6px;\n border: 3px solid #1a1a30;\n border-radius: 2px;\n box-shadow:\n 0 0 20px rgba(0, 0, 0, 0.8),\n inset 0 0 10px rgba(0, 0, 0, 1),\n 0 0 40px rgba(0, 212, 255, 0.04);\n}\n\ncanvas {\n display: block;\n image-rendering: pixelated;\n}\n\n.controls-hint {\n text-align: center;\n font-size: 7px;\n color: var(--text-dim);\n padding: 16px 0;\n letter-spacing: 1px;\n}\n\n/* GAME OVER OVERLAY */\n.game-over-overlay {\n position: fixed;\n inset: 0;\n background: rgba(5, 5, 8, 0.85);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 100;\n animation: fade-in 0.3s ease;\n}\n\n@keyframes fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.game-over-box {\n background: var(--bg-dark);\n border: 2px solid var(--neon-pink);\n box-shadow: 0 0 30px rgba(255, 45, 149, 0.2);\n padding: 40px;\n text-align: center;\n max-width: 400px;\n width: 90%;\n}\n\n.game-over-title {\n font-size: 20px;\n color: var(--neon-pink);\n text-shadow:\n 0 0 10px var(--neon-pink),\n 0 0 30px rgba(255, 45, 149, 0.4);\n margin-bottom: 20px;\n letter-spacing: 4px;\n}\n\n.game-over-score {\n font-size: 14px;\n color: var(--neon-yellow);\n text-shadow: 0 0 8px rgba(255, 230, 0, 0.4);\n margin-bottom: 8px;\n}\n\n.game-over-best {\n font-size: 8px;\n color: var(--neon-green);\n margin-bottom: 28px;\n min-height: 16px;\n}\n\n.game-over-actions {\n display: flex;\n gap: 12px;\n justify-content: center;\n flex-wrap: wrap;\n}\n\n/* ARCADE BUTTONS */\n.btn-arcade {\n font-family: var(--font-pixel);\n font-size: 9px;\n padding: 12px 20px;\n background: var(--neon-pink);\n color: #fff;\n border: none;\n cursor: pointer;\n letter-spacing: 1px;\n transition: all 0.2s;\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);\n}\n\n.btn-arcade:hover {\n box-shadow: 0 0 15px rgba(255, 45, 149, 0.5);\n transform: translateY(-1px);\n}\n\n.btn-arcade--alt {\n background: transparent;\n border: 2px solid var(--neon-blue);\n color: var(--neon-blue);\n}\n\n.btn-arcade--alt:hover {\n box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);\n}\n\n/* FULL LEADERBOARD VIEW */\n.leaderboard-full {\n max-width: 600px;\n margin: 0 auto;\n padding: 16px 0 40px;\n}\n\n.personal-best-section {\n text-align: center;\n padding: 16px;\n margin-bottom: 20px;\n border: 1px solid var(--border-subtle);\n background: var(--bg-cabinet);\n font-size: 8px;\n}\n\n.personal-best-section .pb-label {\n color: var(--text-dim);\n margin-bottom: 4px;\n}\n\n.personal-best-section .pb-score {\n font-size: 14px;\n color: var(--neon-yellow);\n text-shadow: 0 0 8px rgba(255, 230, 0, 0.4);\n}\n\n/* LOADING / EMPTY */\n.loading-text {\n text-align: center;\n color: var(--text-dim);\n font-size: 8px;\n padding: 20px;\n animation: blink-slow 2s step-end infinite;\n}\n\n/* RESPONSIVE */\n@media (max-width: 500px) {\n .marquee-title {\n font-size: 18px;\n }\n\n .game-header {\n flex-wrap: wrap;\n }\n\n .game-score {\n order: -1;\n width: 100%;\n text-align: center;\n min-width: auto;\n }\n\n .game-over-box {\n padding: 24px 16px;\n }\n\n .canvas-bezel {\n max-width: calc(100vw - 50px);\n overflow: hidden;\n }\n\n canvas {\n max-width: 100%;\n height: auto !important;\n }\n}\n\n/* AVATAR MODAL */\n.auth-avatar--clickable {\n cursor: pointer;\n transition: box-shadow 0.2s;\n}\n\n.auth-avatar--clickable:hover {\n box-shadow: 0 0 12px rgba(0, 212, 255, 0.6);\n}\n\n.avatar-modal-box {\n max-width: 340px;\n}\n\n.avatar-preview-container {\n display: flex;\n justify-content: center;\n margin-bottom: 20px;\n}\n\n.avatar-preview {\n width: 80px;\n height: 80px;\n border-radius: 4px;\n border: 2px solid var(--neon-blue);\n box-shadow: 0 0 8px rgba(0, 212, 255, 0.3);\n object-fit: cover;\n}\n\n.arcade-input {\n font-family: var(--font-pixel);\n font-size: 8px;\n width: 100%;\n padding: 10px 12px;\n background: var(--bg-void);\n border: 2px solid var(--border-subtle);\n color: var(--text-primary);\n outline: none;\n margin-bottom: 20px;\n transition: border-color 0.2s;\n}\n\n.arcade-input:focus {\n border-color: var(--neon-blue);\n box-shadow: 0 0 8px rgba(0, 212, 255, 0.2);\n}\n\n.arcade-input::placeholder {\n color: var(--text-dim);\n}\n",[],[167,306],"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",[],[167,314],"a46faeeb-aae4-4f6f-a096-3c1c9e1062bd",["D",1781228540043],[],[167,33],"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",[],[167,327],"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",[],[167,335],["D",1773103064650],[194,195,196,197,198],[167],"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",[],[173,346],"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",[],[173,354],"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",[],[173,362],"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",[],[173,370],["D",1773103064759],[189,190,191,192],[173],["D",1773102983877],["D",1789521041830],{"_98":97,"_105":101},{"_98":97,"_99":-5,"_100":101,"_18":55,"_102":103,"_104":25},{"_13":87,"_32":88,"_43":42,"_89":44,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":45,"_96":97},"ctx",{"_80":-5,"_125":418,"_419":420,"_421":422,"_423":25,"_424":25,"_425":25,"_426":123,"_427":-5,"_428":-7,"_429":-7,"_430":61,"_431":25,"_432":25,"_433":-5,"_434":25,"_435":25,"_436":25,"_437":-5},"ENV",{"_389":390,"_391":392,"_393":88,"_394":395,"_396":397,"_398":399,"_400":401,"_402":403,"_404":405,"_406":407,"_408":409,"_410":411,"_412":413,"_414":415,"_416":417},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

SELECTYOUR GAME

HIGH SCORES

GAME OVER

CHANGE AVATAR

SELECTYOUR GAME

HIGH SCORES

GAME OVER

CHANGE AVATAR

MIDNIGHT RACING

CRASHED!

SELECT
YOUR GAME

SELECT
YOUR GAME

Diff · v44