// Cage Game Run — Street Soccer (full build: 1v1 + 3v3, create-a-baller, street circuit) // MCPity Web Engine game. Three.js r168 API. The ONLY bare import is "three" // (the /play bundler marks it external and resolves it via an import map to // esm.sh/three@0.168.0). Everything else is in this single self-contained file. // // Zero external assets: court, ballers, ball are procedural THREE meshes; SFX are // synthesized on a lazy WebAudio context. Neutral premium UI (charcoal / slate // with muted teal and amber accents). No IP, all-original street ballers. // // Harness contract: // - mounts into #mcpity-root (fallback document.body) // - postMessage({type:"mcpity:web-engine:ready"}) on boot (try/catch) // - window.MCPityPlayer = {x,y,z} set every tick for the human baller // - window.__cage = { step(ms), state(), setMode(m), test:{...} } // step(ms): advance one deterministic slice + render (headless driver) // state(): one of "menu" | "submenu" | "customizer" | "career" | // "invite" | "play" | "cutscene" | "over" // test: openCustomizer, start1v1, start3v3, startCareer, openCareer, // toMenu, randomizeAvatar, saveAvatar (drive every surface headlessly) // // Optional harness shims (all guarded / optional-chained; absent => plain offline): // - window.MCPityRooms : hosted-room relay for shareable 1v1 link duels // - window.MCPityEntitlements: season-pass gating stub (cageSeasonPass boolean) // // Degrades gracefully: WebAudio blocked or localStorage sandboxed => keeps // running silently, no uncaught exceptions on any input path. import * as THREE from "three"; /* --------------------------------------------------------------------------- Asset-swap seam (INLINE shim of games/_shared/asset-provider.ts WindowAssets). INLINED, not imported, on purpose: the /play build (scripts/build-game.mjs) writes ONE self-contained dist/index.ts and serves that single file to the in-browser esbuild-wasm bundler with no sibling files present. An `import { Assets } from "../../_shared/asset-provider"` would fail to resolve at bundle time and break the game at /play. This tiny object reproduces WindowAssets' runtime behavior with zero external imports: it reads window.MCPityAssets when a native store wrapper has injected it (via installAssetPack, see games/cage-game-run/store-boot.ts), else returns null so every hero factory takes its procedural branch. On /play there is no MCPityAssets, so getModel() resolves to null and NOTHING changes -- the game stays 100% procedural. ------------------------------------------------------------------------- */ interface InjectedAssetGlobal { has?(key: string): boolean; getModel?(key: string): Promise | THREE.Object3D | null; getTexture?(key: string): THREE.Texture | null; } const Assets = { getModel(key: string): Promise { try { const g = (globalThis as unknown as { MCPityAssets?: InjectedAssetGlobal }).MCPityAssets; if (g && typeof g.getModel === "function") return Promise.resolve(g.getModel(key)).then((m) => m ?? null); } catch (_e) { /* absent / broken global -> procedural */ } return Promise.resolve(null); }, getTexture(key: string): THREE.Texture | null { try { const g = (globalThis as unknown as { MCPityAssets?: InjectedAssetGlobal }).MCPityAssets; if (g && typeof g.getTexture === "function") return g.getTexture(key) ?? null; } catch (_e) { /* fall through to procedural */ } return null; }, }; /* Hero asset caches. A store build injects window.MCPityAssets BEFORE the game boots (see store-boot.ts); preloadAssets() then fills these once. On /play both stay null/empty and every hero renders procedurally exactly as today. */ const ballerTemplate: { current: THREE.Object3D | null } = { current: null }; const ballTemplate: { current: THREE.Object3D | null } = { current: null }; // Uniformly scale a cloned baller GLB to the procedural baller's UNSCALED height // (feet ~y=0, head top ~1.75) and stand it on y=0, centered in X/Z, inside a // Group so the caller's g.scale.set(build,height,build) drives it like the // procedural body. function fitBallerTemplate(template: THREE.Object3D): THREE.Object3D { const inst = template.clone(true); const box = new THREE.Box3().setFromObject(inst); const size = box.getSize(new THREE.Vector3()); const targetH = 1.75; // procedural baller height before g.scale const s = size.y > 1e-4 ? targetH / size.y : 1; inst.scale.setScalar(s); const fb = new THREE.Box3().setFromObject(inst); const c = fb.getCenter(new THREE.Vector3()); inst.position.x -= c.x; inst.position.z -= c.z; inst.position.y -= fb.min.y; // stand base on y=0 inst.traverse((o) => { (o as THREE.Mesh).castShadow = true; }); const group = new THREE.Group(); group.add(inst); return group; } // Uniformly scale a cloned ball GLB to the procedural sphere diameter (2*BALL_R) // and center it at the origin inside a Group so it can be parented to ballMesh // (the physics-driven transform anchor) and spin in place like the sphere. function fitBallTemplate(template: THREE.Object3D): THREE.Object3D { const inst = template.clone(true); const box = new THREE.Box3().setFromObject(inst); const size = box.getSize(new THREE.Vector3()); const maxD = Math.max(size.x, size.y, size.z); const s = maxD > 1e-4 ? (2 * BALL_R) / maxD : 1; inst.scale.setScalar(s); const fb = new THREE.Box3().setFromObject(inst); const c = fb.getCenter(new THREE.Vector3()); inst.position.sub(c); inst.traverse((o) => { (o as THREE.Mesh).castShadow = true; }); const group = new THREE.Group(); group.add(inst); return group; } // One-time boot preload. Fills the hero caches from the injected pack; on /play // every getModel() is null so the caches stay empty (zero visual change). If a // ball model loaded, swap the procedural sphere for it once here (the ball is a // persistent singleton, not a per-frame factory). Ballers pick their template up // in buildBaller (spawns/preview happen after boot, so the cache is filled). async function preloadAssets(): Promise { try { const [baller, ball3d] = await Promise.all([Assets.getModel("baller"), Assets.getModel("ball")]); if (baller) ballerTemplate.current = baller; if (ball3d) { ballTemplate.current = ball3d; const fitted = fitBallTemplate(ball3d); // hide the procedural sphere surface + patches; keep ballMesh as the anchor. ballMat.transparent = true; ballMat.opacity = 0; ballMat.depthWrite = false; for (const child of ballMesh.children) child.visible = false; ballMesh.add(fitted); } } catch (_e) { /* any failure -> everything stays procedural */ } } // ═══════════════════════════ CONFIG ═══════════════════════════ const COURT_L = 12; // length along X (goal to goal) const COURT_W = 8; // width along Z (wall to wall) const HALF_L = COURT_L / 2; // 6 const HALF_W = COURT_W / 2; // 4 const WALL_H = 3; const GOAL_HALF_W = 1.35; // goal mouth half-width in Z const GOAL_H = 1.6; // crossbar height const GOAL_X = HALF_L - 0.15; // goal line X (just inside the end wall) const PLAYER_R = 0.42; // baller body radius (XZ) const BALL_R = 0.24; const BASE_SPEED = 4.6; const SPRINT_SPEED = 7.2; const ACCEL = 22; // velocity smoothing toward target const STAMINA_MAX = 100; const STAMINA_DRAIN = 34; // per second sprinting const STAMINA_REGEN = 22; // per second not sprinting const POSS_RADIUS = 0.95; // gain a loose ball within this const POSS_OFFSET = 0.62; // ball sits this far ahead of carrier const STEAL_RADIUS = 1.05; // contest distance const NUTMEG_RANGE = 2.2; // defender must be within this, in front const NUTMEG_CONE = 0.55; // dot(facing, toDefender) must exceed this const SKILL_COOLDOWN = 1.4; const SKILL_STAMINA = 16; const SKILL_DASH = 5.5; // lateral juke impulse const NUTMEG_STAMINA = 22; const STEAL_COOLDOWN = 0.7; const SHOT_MIN = 6; // toe-poke speed const SHOT_MAX = 17; // full-charge speed const CHARGE_RATE = 1.35; // charge per second held const TAP_MS = 150; // under this = toe-poke const BALL_FRICTION = 1.9; // ground drag const WALL_BOUNCE = 0.72; const MATCH_SECONDS = 90; const COL_USER = 0x2fd4c4; // teal (team 0) const COL_USER_DK = 0x0f766e; const COL_AI = 0xf0a63a; // amber (team 1) const COL_AI_DK = 0xb45309; // ── customizer palettes (indices are what AvatarConfig stores) ── const SKIN_TONES = [0x2d1b0e, 0x5c3a21, 0x8a5a3c, 0xb07a4f, 0xd0a074, 0xe8c9a0]; const HAIR_COLORS = [0x141414, 0x3b2412, 0x6b4423, 0xa8722c, 0xd9b380, 0x9aa0a6]; const KIT_COLORS = [0x2fd4c4, 0xf0a63a, 0xe4483f, 0x3b82f6, 0xf4f4f0, 0x1b1f24, 0x8b5cf6, 0x22c55e]; const BOOT_COLORS = [0x1b1f24, 0xf4f4f0, 0xf0a63a, 0x2fd4c4, 0xe4483f, 0xff5ea8]; const HAIR_STYLES = ["buzz", "short", "afro", "fade", "long", "ponytail", "bald"] as const; const KIT_PATTERNS = ["solid", "stripes", "sash", "hoops"] as const; const ACCESSORIES = ["none", "headband", "captain", "gloves"] as const; const AI_NAMES = ["Rico", "Malik", "Dario", "Kenji", "Luca", "Omar", "Theo", "Nico", "Andre", "Sami", "Bruno", "Kwame"]; type HairStyle = typeof HAIR_STYLES[number]; type KitPattern = typeof KIT_PATTERNS[number]; type Accessory = typeof ACCESSORIES[number]; type AvatarConfig = { name: string; number: number; skin: number; hairStyle: HairStyle; hairColor: number; height: number; // 0.9..1.15 group Y scale build: number; // 0.85..1.2 group XZ scale kitPrimary: number; kitSecondary: number; kitPattern: KitPattern; boots: number; accessory: Accessory; }; // ═══════════════════════════ SMALL UTILITIES ═══════════════════════════ function clampNum(n: number, lo: number, hi: number) { return Math.max(lo, Math.min(hi, n)); } // seeded RNG (mulberry32) — used ONLY for consistent AI avatar generation, // never inside the fixed-step sim (sim keeps runtime Math.random like the // original file, which the headless stepper already tolerates). function makeRng(seed: number) { let a = seed >>> 0; return () => { a |= 0; a = (a + 0x6D2B79F5) | 0; let t = Math.imul(a ^ (a >>> 15), 1 | a); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } function pick(arr: readonly T[], r: number): T { return arr[Math.floor(r * arr.length) % arr.length]; } // no em/en dashes anywhere in rendered strings — also scrub user-typed names function sanitizeName(s: string): string { let out = (s || "").replace(/[‒–—―−]/g, " ").replace(/[^\x20-\x7E]/g, "").trim(); if (out.length > 12) out = out.slice(0, 12); return out.length ? out : "Baller"; } function defaultAvatar(): AvatarConfig { return { name: "Baller", number: 10, skin: 2, hairStyle: "short", hairColor: 0, height: 1.0, build: 1.0, kitPrimary: 0, kitSecondary: 5, kitPattern: "solid", boots: 0, accessory: "none", }; } function coerceAvatar(raw: unknown): AvatarConfig { const d = defaultAvatar(); if (!raw || typeof raw !== "object") return d; const o = raw as Record; const idx = (v: unknown, len: number, def: number) => (typeof v === "number" && v >= 0 && v < len && Number.isFinite(v)) ? Math.floor(v) : def; const oneOf = (v: unknown, arr: readonly T[], def: T): T => (typeof v === "string" && (arr as readonly string[]).includes(v)) ? (v as T) : def; return { name: sanitizeName(typeof o.name === "string" ? o.name : d.name), number: clampNum(Math.floor(typeof o.number === "number" ? o.number : d.number), 1, 99) || d.number, skin: idx(o.skin, SKIN_TONES.length, d.skin), hairStyle: oneOf(o.hairStyle, HAIR_STYLES, d.hairStyle), hairColor: idx(o.hairColor, HAIR_COLORS.length, d.hairColor), height: clampNum(typeof o.height === "number" ? o.height : d.height, 0.9, 1.15), build: clampNum(typeof o.build === "number" ? o.build : d.build, 0.85, 1.2), kitPrimary: idx(o.kitPrimary, KIT_COLORS.length, d.kitPrimary), kitSecondary: idx(o.kitSecondary, KIT_COLORS.length, d.kitSecondary), kitPattern: oneOf(o.kitPattern, KIT_PATTERNS, d.kitPattern), boots: idx(o.boots, BOOT_COLORS.length, d.boots), accessory: oneOf(o.accessory, ACCESSORIES, d.accessory), }; } function cloneAvatar(c: AvatarConfig): AvatarConfig { return JSON.parse(JSON.stringify(c)); } // persistence seam (single save/load pair; server-side identity could swap this // out later since AvatarConfig is a plain serializable object). All wrapped in // try/catch — a sandboxed iframe can throw on localStorage access. const AVATAR_KEY = "cage.avatar.v1"; const CAREER_KEY = "cage.career.v1"; function loadAvatar(): AvatarConfig { try { const raw = globalThis.localStorage?.getItem(AVATAR_KEY); if (!raw) return defaultAvatar(); return coerceAvatar(JSON.parse(raw)); } catch { return defaultAvatar(); } } function saveAvatarConfig(c: AvatarConfig): void { try { globalThis.localStorage?.setItem(AVATAR_KEY, JSON.stringify(c)); } catch { /* ignore */ } } function randomAvatar(r: () => number): AvatarConfig { return { name: pick(AI_NAMES, r()), number: 1 + Math.floor(r() * 99), skin: Math.floor(r() * SKIN_TONES.length), hairStyle: pick(HAIR_STYLES.filter((h) => h !== "bald"), r()), hairColor: Math.floor(r() * HAIR_COLORS.length), height: 0.92 + r() * 0.2, build: 0.9 + r() * 0.28, kitPrimary: Math.floor(r() * KIT_COLORS.length), kitSecondary: Math.floor(r() * KIT_COLORS.length), kitPattern: pick(KIT_PATTERNS, r()), boots: Math.floor(r() * BOOT_COLORS.length), accessory: pick(ACCESSORIES, r()), }; } // street circuit ladder type CareerStop = { name: string; kind: "1v1" | "3v3"; diff: "easy" | "medium" }; const CAREER_STOPS: CareerStop[] = [ { name: "Riverside Cage", kind: "1v1", diff: "easy" }, { name: "Dockside Court", kind: "3v3", diff: "easy" }, { name: "Rooftop Pitch", kind: "1v1", diff: "medium" }, { name: "Underpass Arena", kind: "3v3", diff: "medium" }, { name: "Harbor Lights Cage", kind: "1v1", diff: "medium" }, { name: "Downtown Finals", kind: "3v3", diff: "medium" }, ]; type CareerState = { stop: number; wins: number; cleared: boolean[]; legacyGames: number }; function defaultCareer(): CareerState { return { stop: 0, wins: 0, cleared: CAREER_STOPS.map(() => false), legacyGames: 0 }; } function loadCareer(): CareerState { try { const raw = globalThis.localStorage?.getItem(CAREER_KEY); if (!raw) return defaultCareer(); const o = JSON.parse(raw); const d = defaultCareer(); return { stop: clampNum(Math.floor(o?.stop ?? 0), 0, CAREER_STOPS.length), wins: Math.max(0, Math.floor(o?.wins ?? 0)), cleared: Array.isArray(o?.cleared) ? CAREER_STOPS.map((_, i) => !!o.cleared[i]) : d.cleared, legacyGames: Math.max(0, Math.floor(o?.legacyGames ?? 0)), }; } catch { return defaultCareer(); } } function saveCareer(c: CareerState): void { try { globalThis.localStorage?.setItem(CAREER_KEY, JSON.stringify(c)); } catch { /* ignore */ } } let humanConfig: AvatarConfig = loadAvatar(); let career: CareerState = loadCareer(); // ═══════════════════════════ MOUNT ═══════════════════════════ const root = document.getElementById("mcpity-root") ?? document.body; const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false }); renderer.setPixelRatio(Math.min(globalThis.devicePixelRatio || 1, 2)); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.outputColorSpace = THREE.SRGBColorSpace; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.02; const canvas = renderer.domElement; canvas.style.display = "block"; canvas.style.width = "100%"; canvas.style.height = "100%"; canvas.style.touchAction = "none"; root.appendChild(canvas); const scene = new THREE.Scene(); scene.background = new THREE.Color(0x0c0f13); scene.fog = new THREE.Fog(0x0c0f13, 20, 46); // far end of the cage recedes into haze (depth cue) const camera = new THREE.PerspectiveCamera(52, 1, 0.1, 200); const camTarget = new THREE.Vector3(); const camLook = new THREE.Vector3(); const MENU_CAM = new THREE.Vector3(-10.5, 8.4, 6.5); let baseFov = 60; // resolved per aspect in sizeRenderer; sprint punches on top of this let camSprint = 0; // smoothed 0..1 sprint factor for FOV punch + camera dip function sizeRenderer() { const w = root.clientWidth || globalThis.innerWidth || 800; const h = root.clientHeight || globalThis.innerHeight || 600; renderer.setSize(w, h, false); camera.aspect = w / h; baseFov = h > w ? 62 : 50; // slightly wider portrait FOV -> more court depth on a phone camera.fov = baseFov + camSprint * 5; camera.updateProjectionMatrix(); previewCam.aspect = w / h; previewCam.updateProjectionMatrix(); } globalThis.addEventListener("resize", sizeRenderer); // ═══════════════════════════ LIGHTS ═══════════════════════════ scene.add(new THREE.HemisphereLight(0x8899aa, 0x1a1410, 0.6)); const key = new THREE.DirectionalLight(0xfff2dd, 1.25); key.position.set(-7, 10.5, 5); // lower + more raked = longer, more dramatic soft shadows key.castShadow = true; key.shadow.mapSize.set(2048, 2048); // crisper contact shadows for the 3D read key.shadow.camera.near = 1; key.shadow.camera.far = 40; key.shadow.camera.left = -8; // frustum tightened to the court -> denser texels key.shadow.camera.right = 8; key.shadow.camera.top = 8; key.shadow.camera.bottom = -8; key.shadow.bias = -0.0004; key.shadow.normalBias = 0.02; scene.add(key); const rim = new THREE.PointLight(0x3355ff, 0.5, 40); rim.position.set(7, 6, -6); scene.add(rim); // ═══════════════════════════ COURT ═══════════════════════════ function buildCourt() { const g = new THREE.Group(); const floorMat = new THREE.MeshStandardMaterial({ color: 0x2a2e33, roughness: 0.95, metalness: 0.02 }); const floor = new THREE.Mesh(new THREE.PlaneGeometry(COURT_L + 2, COURT_W + 2), floorMat); floor.rotation.x = -Math.PI / 2; floor.receiveShadow = true; g.add(floor); const paint = new THREE.MeshBasicMaterial({ color: 0x53606b }); const centerCircle = new THREE.Mesh(new THREE.RingGeometry(1.35, 1.5, 48), paint); centerCircle.rotation.x = -Math.PI / 2; centerCircle.position.y = 0.02; g.add(centerCircle); const centerLine = new THREE.Mesh(new THREE.PlaneGeometry(0.08, COURT_W), paint); centerLine.rotation.x = -Math.PI / 2; centerLine.position.y = 0.02; g.add(centerLine); const panelMat = new THREE.MeshStandardMaterial({ color: 0x18324a, transparent: true, opacity: 0.14, roughness: 0.4, metalness: 0.1, side: THREE.DoubleSide, }); const edgeMat = new THREE.LineBasicMaterial({ color: 0x39d6c8 }); const postMat = new THREE.MeshStandardMaterial({ color: 0x11151a, roughness: 0.6, metalness: 0.5 }); function wall(len: number, cx: number, cz: number, rotY: number) { const panel = new THREE.Mesh(new THREE.PlaneGeometry(len, WALL_H), panelMat); panel.position.set(cx, WALL_H / 2, cz); panel.rotation.y = rotY; g.add(panel); const pts: number[] = []; const cols = Math.round(len / 0.8); for (let i = 0; i <= cols; i++) { const x = -len / 2 + (i * len) / cols; pts.push(x, -WALL_H / 2, 0, x, WALL_H / 2, 0); } const rows = Math.round(WALL_H / 0.7); for (let j = 0; j <= rows; j++) { const y = -WALL_H / 2 + (j * WALL_H) / rows; pts.push(-len / 2, y, 0, len / 2, y, 0); } const geo = new THREE.BufferGeometry(); geo.setAttribute("position", new THREE.Float32BufferAttribute(pts, 3)); const lines = new THREE.LineSegments(geo, edgeMat); lines.position.set(cx, WALL_H / 2, cz); lines.rotation.y = rotY; g.add(lines); } wall(COURT_L, 0, HALF_W, 0); wall(COURT_L, 0, -HALF_W, 0); for (const sx of [-1, 1]) { const seg = (COURT_W - GOAL_HALF_W * 2) / 2; wall(seg, sx * HALF_L, (HALF_W + GOAL_HALF_W) / 2, Math.PI / 2); wall(seg, sx * HALF_L, -(HALF_W + GOAL_HALF_W) / 2, Math.PI / 2); } for (const sx of [-1, 1]) for (const sz of [-1, 1]) { const post = new THREE.Mesh(new THREE.CylinderGeometry(0.09, 0.09, WALL_H, 8), postMat); post.position.set(sx * HALF_L, WALL_H / 2, sz * HALF_W); g.add(post); } function goal(dir: number, color: number) { const gg = new THREE.Group(); const frameMat = new THREE.MeshStandardMaterial({ color, emissive: color, emissiveIntensity: 0.35, roughness: 0.4, metalness: 0.3 }); const barR = 0.06; for (const sz of [-1, 1]) { const post = new THREE.Mesh(new THREE.CylinderGeometry(barR, barR, GOAL_H, 10), frameMat); post.position.set(dir * GOAL_X, GOAL_H / 2, sz * GOAL_HALF_W); gg.add(post); } const bar = new THREE.Mesh(new THREE.CylinderGeometry(barR, barR, GOAL_HALF_W * 2, 10), frameMat); bar.position.set(dir * GOAL_X, GOAL_H, 0); bar.rotation.x = Math.PI / 2; gg.add(bar); const netMat = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.1, wireframe: true }); const net = new THREE.Mesh(new THREE.PlaneGeometry(GOAL_HALF_W * 2, GOAL_H, 6, 4), netMat); net.position.set(dir * (GOAL_X + 0.35), GOAL_H / 2, 0); net.rotation.y = Math.PI / 2; gg.add(net); g.add(gg); return net; } goal(1, COL_USER); goal(-1, COL_AI); return { group: g }; } const court = buildCourt(); scene.add(court.group); // ═══════════════════════════ BALLERS ═══════════════════════════ interface Baller { team: number; // 0 = human side (attacks +X), 1 = rival (attacks -X) config: AvatarConfig; isHuman: boolean; isRemote: boolean; // driven by a remote peer (online 1v1) group: THREE.Group; torso: THREE.Mesh; kitTexture: THREE.CanvasTexture; // procedural jersey: base+pattern+wordmark+number legL: THREE.Mesh; legR: THREE.Mesh; armL: THREE.Mesh; armR: THREE.Mesh; disc: THREE.Mesh; pos: THREE.Vector3; vel: THREE.Vector3; facing: THREE.Vector3; stride: number; // per-entity match state stamina: number; skillCd: number; tackleCd: number; // throttle on tackle attempts regainCd: number; // can't gain the ball right after losing/shooting it stumble: number; // knocked off balance invuln: number; // brief immunity after a feint aiThinkT: number; aiTarget: THREE.Vector3; passCd: number; laneZ: number; // spacing lane for off-ball runs role: number; // 0 central, 1/2 wide } function stdMat(color: number, rough = 0.6, emissive = 0, ei = 0): THREE.MeshStandardMaterial { return new THREE.MeshStandardMaterial({ color, roughness: rough, metalness: 0.05, emissive, emissiveIntensity: ei }); } function buildHair(style: HairStyle, color: number): THREE.Group { const g = new THREE.Group(); if (style === "bald") return g; const hairMat = stdMat(color, 0.85); const cap = new THREE.Mesh(new THREE.SphereGeometry(0.215, 16, 12, 0, Math.PI * 2, 0, Math.PI * 0.6), hairMat); cap.position.y = 1.56; g.add(cap); if (style === "buzz") { cap.scale.set(1, 0.5, 1); } else if (style === "afro") { const puff = new THREE.Mesh(new THREE.SphereGeometry(0.28, 16, 14), hairMat); puff.position.y = 1.62; g.add(puff); } else if (style === "fade") { cap.scale.set(1, 0.7, 1); const sides = new THREE.Mesh(new THREE.CylinderGeometry(0.205, 0.205, 0.14, 16, 1, true), hairMat); sides.position.y = 1.46; g.add(sides); } else if (style === "long") { const flap = new THREE.Mesh(new THREE.BoxGeometry(0.34, 0.4, 0.16), hairMat); flap.position.set(0, 1.4, -0.16); g.add(flap); } else if (style === "ponytail") { const tail = new THREE.Mesh(new THREE.SphereGeometry(0.11, 12, 10), hairMat); tail.position.set(0, 1.5, -0.24); tail.scale.set(1, 1.5, 1); g.add(tail); } return g; } function buildKitPattern(pattern: KitPattern, secondary: number): THREE.Group { const g = new THREE.Group(); if (pattern === "solid") return g; const m = stdMat(secondary, 0.55); if (pattern === "stripes") { for (const x of [-0.16, 0, 0.16]) { const s = new THREE.Mesh(new THREE.BoxGeometry(0.075, 0.62, 0.02), m); s.position.set(x, 1.02, 0.27); g.add(s); } } else if (pattern === "sash") { const s = new THREE.Mesh(new THREE.BoxGeometry(0.62, 0.12, 0.04), m); s.position.set(0, 1.02, 0.27); s.rotation.z = 0.7; g.add(s); } else if (pattern === "hoops") { for (const y of [0.86, 1.06, 1.26]) { const ring = new THREE.Mesh(new THREE.CylinderGeometry(0.29, 0.29, 0.07, 18, 1, true), m); ring.position.set(0, y, 0); g.add(ring); } } return g; } function buildAccessory(acc: Accessory, hairColorForBand: number): { extras: THREE.Object3D[]; gloveColor: number | null } { const extras: THREE.Object3D[] = []; let gloveColor: number | null = null; if (acc === "headband") { const band = new THREE.Mesh(new THREE.CylinderGeometry(0.215, 0.215, 0.08, 18, 1, true), stdMat(0xe4483f, 0.6)); band.position.y = 1.5; extras.push(band); } else if (acc === "captain") { const arm = new THREE.Mesh(new THREE.CylinderGeometry(0.1, 0.1, 0.12, 12, 1, true), stdMat(0xf0a63a, 0.5, 0xf0a63a, 0.15)); arm.position.set(-0.34, 1.22, 0); extras.push(arm); } else if (acc === "gloves") { gloveColor = 0x1b1f24; } void hairColorForBand; return { extras, gloveColor }; } // ── procedural jersey kit texture ────────────────────────────────────────── // One CanvasTexture per baller: draws the kit BASE color, then the customizer // PATTERN (solid / stripes / sash / hoops) in the secondary color, then layers // the "MCPITY" wordmark on the CHEST and the player NUMBER on the BACK in an // auto-picked contrasting ink. Mapped onto the torso capsule: verified UVs give // U=0 -> +Z (front) and U=0.5 -> -Z (back), so with wrapS=Repeat + offset.x=0.25 // the front lands at canvas x=0.25*W (wordmark) and the back at x=0.75*W // (number), keeping the texture seam on the side where no text sits. Zero // external assets: everything is drawn at runtime into an offscreen 2D canvas. function hexCss(h: number): string { return "#" + (h & 0xffffff).toString(16).padStart(6, "0"); } function lumaOf(h: number): number { const r = ((h >> 16) & 255) / 255, g = ((h >> 8) & 255) / 255, b = (h & 255) / 255; return 0.2126 * r + 0.7152 * g + 0.0722 * b; } // pick white or near-black for legibility over the primary kit color function legibleInk(primary: number): { fill: string; halo: string } { return lumaOf(primary) > 0.55 ? { fill: "#14181d", halo: "rgba(255,255,255,0.45)" } : { fill: "#f5f6f2", halo: "rgba(0,0,0,0.5)" }; } const KIT_FONT = "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif"; function buildKitTexture(config: AvatarConfig): THREE.CanvasTexture { const W = 512, H = 256; const cv = document.createElement("canvas"); cv.width = W; cv.height = H; const ctx = cv.getContext("2d") as CanvasRenderingContext2D; const primary = KIT_COLORS[config.kitPrimary] ?? COL_USER; const secondary = KIT_COLORS[config.kitSecondary] ?? COL_USER_DK; // base ctx.fillStyle = hexCss(primary); ctx.fillRect(0, 0, W, H); // pattern in secondary (canvas x wraps around the body; y is head->toe top->bottom) ctx.fillStyle = hexCss(secondary); const pat = config.kitPattern; if (pat === "stripes") { for (let i = 0; i < 6; i++) ctx.fillRect((i / 6) * W + W * 0.028, 0, W * 0.05, H); } else if (pat === "hoops") { for (const fy of [0.24, 0.52, 0.8]) ctx.fillRect(0, fy * H - H * 0.065, W, H * 0.13); } else if (pat === "sash") { ctx.save(); ctx.translate(W * 0.25, H / 2); ctx.rotate(-0.6); ctx.fillRect(-W, -H * 0.1, W * 2, H * 0.2); ctx.restore(); } // ink layer (wordmark front, number back) over the pattern const ink = legibleInk(primary); ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.lineJoin = "round"; // chest wordmark (front seam U=0 -> canvas x = 0.25*W) ctx.font = "800 44px " + KIT_FONT; ctx.lineWidth = 6; ctx.strokeStyle = ink.halo; ctx.strokeText("MCPITY", W * 0.25, H * 0.40); ctx.fillStyle = ink.fill; ctx.fillText("MCPITY", W * 0.25, H * 0.40); // back number (back seam U=0.5 -> canvas x = 0.75*W) ctx.font = "800 132px " + KIT_FONT; ctx.lineWidth = 10; ctx.strokeStyle = ink.halo; ctx.strokeText(String(config.number), W * 0.75, H * 0.45); ctx.fillStyle = ink.fill; ctx.fillText(String(config.number), W * 0.75, H * 0.45); const tex = new THREE.CanvasTexture(cv); tex.colorSpace = THREE.SRGBColorSpace; tex.wrapS = THREE.RepeatWrapping; tex.wrapT = THREE.ClampToEdgeWrapping; tex.offset.x = 0.25; tex.anisotropy = 4; tex.needsUpdate = true; return tex; } // Builds a low-poly baller from an AvatarConfig. Does NOT add to a scene — the // caller (match spawn or customizer preview) parents the returned group. function buildBaller(config: AvatarConfig): Baller { const g = new THREE.Group(); const skin = stdMat(SKIN_TONES[config.skin] ?? 0x8a5a3c, 0.7); const kitP = KIT_COLORS[config.kitPrimary] ?? COL_USER; const kitS = KIT_COLORS[config.kitSecondary] ?? COL_USER_DK; // jersey is a runtime CanvasTexture (base color + pattern + MCPITY wordmark on // the chest + number on the back); the pattern now lives ON the texture, so the // old 3D pattern-mesh overlay is no longer added. const kitTexture = buildKitTexture(config); const jersey = new THREE.MeshStandardMaterial({ map: kitTexture, roughness: 0.55, metalness: 0.05 }); const shorts = stdMat(kitS, 0.7); const bootMat = stdMat(BOOT_COLORS[config.boots] ?? 0x1b1f24, 0.5); const torso = new THREE.Mesh(new THREE.CapsuleGeometry(0.28, 0.5, 6, 12), jersey); torso.position.y = 1.02; torso.castShadow = true; g.add(torso); const head = new THREE.Mesh(new THREE.SphereGeometry(0.2, 16, 14), skin); head.position.y = 1.55; head.castShadow = true; g.add(head); g.add(buildHair(config.hairStyle, HAIR_COLORS[config.hairColor] ?? 0x141414)); const acc = buildAccessory(config.accessory, config.hairColor); for (const e of acc.extras) g.add(e); // legs + boots const legGeo = new THREE.CapsuleGeometry(0.11, 0.5, 4, 8); const legL = new THREE.Mesh(legGeo, shorts); legL.position.set(-0.14, 0.42, 0); legL.castShadow = true; g.add(legL); const legR = new THREE.Mesh(legGeo, shorts); legR.position.set(0.14, 0.42, 0); legR.castShadow = true; g.add(legR); for (const [lx] of [[-0.14], [0.14]]) { const boot = new THREE.Mesh(new THREE.BoxGeometry(0.16, 0.1, 0.28), bootMat); boot.position.set(lx, 0.06, 0.06); boot.castShadow = true; g.add(boot); } // arms (skin, or gloved hands) const armGeo = new THREE.CapsuleGeometry(0.075, 0.34, 4, 8); const armL = new THREE.Mesh(armGeo, skin); armL.position.set(-0.33, 1.06, 0); armL.rotation.z = 0.18; armL.castShadow = true; g.add(armL); const armR = new THREE.Mesh(armGeo, skin); armR.position.set(0.33, 1.06, 0); armR.rotation.z = -0.18; armR.castShadow = true; g.add(armR); if (acc.gloveColor !== null) { const gm = stdMat(acc.gloveColor, 0.5); for (const hx of [-0.36, 0.36]) { const hand = new THREE.Mesh(new THREE.SphereGeometry(0.09, 10, 8), gm); hand.position.set(hx, 0.86, 0); g.add(hand); } } const disc = new THREE.Mesh( new THREE.CircleGeometry(0.5, 24), new THREE.MeshBasicMaterial({ color: 0x000000, transparent: true, opacity: 0.25 }), ); disc.rotation.x = -Math.PI / 2; disc.position.y = 0.02; g.add(disc); // Store build: swap the procedural body for the injected baller GLB (fitted + // grounded) when preloaded, keeping every Baller limb ref valid (hidden) so the // animation code runs untouched. /play: cache empty -> procedural (unchanged). if (ballerTemplate.current) { const proceduralKids = g.children.slice(); g.add(fitBallerTemplate(ballerTemplate.current)); for (const k of proceduralKids) { if (k !== disc) k.visible = false; } } g.scale.set(config.build, config.height, config.build); return { team: 0, config, isHuman: false, isRemote: false, group: g, torso, kitTexture, legL, legR, armL, armR, disc, pos: new THREE.Vector3(), vel: new THREE.Vector3(), facing: new THREE.Vector3(1, 0, 0), stride: 0, stamina: STAMINA_MAX, skillCd: 0, tackleCd: 0, regainCd: 0, stumble: 0, invuln: 0, aiThinkT: 0, aiTarget: new THREE.Vector3(), passCd: 0, laneZ: 0, role: 0, }; } function disposeGroup(g: THREE.Object3D) { g.traverse((o) => { const m = o as unknown as { geometry?: { dispose?: () => void }; material?: unknown }; m.geometry?.dispose?.(); const mat = m.material; if (mat) (Array.isArray(mat) ? mat : [mat]).forEach((x) => { const mm = x as { map?: { dispose?: () => void }; dispose?: () => void }; mm.map?.dispose?.(); // dispose the procedural kit CanvasTexture, not just the material mm.dispose?.(); }); }); } // ═══════════════════════════ BALL ═══════════════════════════ const ballGeo = new THREE.SphereGeometry(BALL_R, 20, 16); const ballMat = new THREE.MeshStandardMaterial({ color: 0xf4f4f0, roughness: 0.35, metalness: 0.05, emissive: 0x222222, emissiveIntensity: 0.1 }); const ballMesh = new THREE.Mesh(ballGeo, ballMat); ballMesh.castShadow = true; scene.add(ballMesh); for (let i = 0; i < 6; i++) { const patch = new THREE.Mesh( new THREE.CircleGeometry(BALL_R * 0.42, 5), new THREE.MeshStandardMaterial({ color: 0x1b1f24, roughness: 0.5 }), ); const phi = Math.acos(1 - 2 * (i + 0.5) / 6); const theta = Math.PI * (1 + Math.sqrt(5)) * i; patch.position.setFromSphericalCoords(BALL_R * 1.001, phi, theta); patch.lookAt(0, 0, 0); ballMesh.add(patch); } const ball = { pos: new THREE.Vector3(0, BALL_R, 0), vel: new THREE.Vector3(), spin: new THREE.Vector3(), }; const TRAIL_N = 14; const trailPositions = new Float32Array(TRAIL_N * 3); const trailGeo = new THREE.BufferGeometry(); trailGeo.setAttribute("position", new THREE.BufferAttribute(trailPositions, 3)); const trail = new THREE.Line(trailGeo, new THREE.LineBasicMaterial({ color: 0x8fe9df, transparent: true, opacity: 0.5 })); trail.frustumCulled = false; scene.add(trail); const trailHist: THREE.Vector3[] = []; // ═══════════════════════════ PARTICLES ═══════════════════════════ const PARTS = 200; const partGeo = new THREE.BufferGeometry(); const partPos = new Float32Array(PARTS * 3); const partCol = new Float32Array(PARTS * 3); partGeo.setAttribute("position", new THREE.BufferAttribute(partPos, 3)); partGeo.setAttribute("color", new THREE.BufferAttribute(partCol, 3)); const partMat = new THREE.PointsMaterial({ size: 0.16, vertexColors: true, transparent: true, opacity: 0.95, depthWrite: false }); const points = new THREE.Points(partGeo, partMat); points.frustumCulled = false; scene.add(points); const partVel: THREE.Vector3[] = []; const partLife: number[] = []; for (let i = 0; i < PARTS; i++) { partVel.push(new THREE.Vector3()); partLife.push(0); partPos[i * 3 + 1] = -50; } let partHead = 0; function burst(x: number, y: number, z: number, n: number, color: THREE.Color, spread: number, up: number) { for (let k = 0; k < n; k++) { const i = partHead; partHead = (partHead + 1) % PARTS; partPos[i * 3] = x; partPos[i * 3 + 1] = y; partPos[i * 3 + 2] = z; const a = Math.random() * Math.PI * 2; const r = Math.random() * spread; partVel[i].set(Math.cos(a) * r, up * (0.5 + Math.random()), Math.sin(a) * r); partLife[i] = 0.7 + Math.random() * 0.6; const c = color.clone().offsetHSL(0, 0, (Math.random() - 0.5) * 0.2); partCol[i * 3] = c.r; partCol[i * 3 + 1] = c.g; partCol[i * 3 + 2] = c.b; } partGeo.attributes.color.needsUpdate = true; } function updateParts(dt: number) { for (let i = 0; i < PARTS; i++) { if (partLife[i] <= 0) continue; partLife[i] -= dt; partVel[i].y -= 9.8 * dt; partPos[i * 3] += partVel[i].x * dt; partPos[i * 3 + 1] += partVel[i].y * dt; partPos[i * 3 + 2] += partVel[i].z * dt; if (partPos[i * 3 + 1] < 0.05 || partLife[i] <= 0) { partPos[i * 3 + 1] = -50; partLife[i] = 0; } } partGeo.attributes.position.needsUpdate = true; } // ═══════════════════════════ AUDIO (procedural, lazy) ═══════════════════════════ class Audio { ctx: AudioContext | null = null; master: GainNode | null = null; crowd: GainNode | null = null; ok = false; init() { if (this.ctx) return; try { const AC = (globalThis as unknown as { AudioContext?: typeof AudioContext; webkitAudioContext?: typeof AudioContext }); const Ctor = AC.AudioContext || AC.webkitAudioContext; if (!Ctor) return; this.ctx = new Ctor(); this.master = this.ctx.createGain(); this.master.gain.value = 0.6; this.master.connect(this.ctx.destination); const noise = this.ctx.createBufferSource(); const buf = this.ctx.createBuffer(1, this.ctx.sampleRate * 2, this.ctx.sampleRate); const d = buf.getChannelData(0); for (let i = 0; i < d.length; i++) d[i] = (Math.random() * 2 - 1) * 0.5; noise.buffer = buf; noise.loop = true; const bp = this.ctx.createBiquadFilter(); bp.type = "bandpass"; bp.frequency.value = 480; bp.Q.value = 0.7; this.crowd = this.ctx.createGain(); this.crowd.gain.value = 0.05; noise.connect(bp); bp.connect(this.crowd); this.crowd.connect(this.master); noise.start(); this.ok = true; } catch { this.ok = false; } } resume() { try { if (this.ctx && this.ctx.state === "suspended") this.ctx.resume(); } catch { /* ignore */ } } tone(freq: number, dur: number, type: OscillatorType, vol: number, slideTo?: number) { if (!this.ctx || !this.master) return; try { const t = this.ctx.currentTime; const o = this.ctx.createOscillator(); const g = this.ctx.createGain(); o.type = type; o.frequency.setValueAtTime(freq, t); if (slideTo) o.frequency.exponentialRampToValueAtTime(Math.max(1, slideTo), t + dur); g.gain.setValueAtTime(0.0001, t); g.gain.exponentialRampToValueAtTime(vol, t + 0.01); g.gain.exponentialRampToValueAtTime(0.0001, t + dur); o.connect(g); g.connect(this.master); o.start(t); o.stop(t + dur + 0.02); } catch { /* ignore */ } } whistle() { this.tone(2100, 0.18, "square", 0.12, 2400); setTimeout(() => this.tone(2300, 0.12, "square", 0.1), 90); } kick(power = 1) { this.tone(150, 0.12, "triangle", 0.25 * power, 60); } thud() { this.tone(90, 0.09, "sine", 0.18, 55); } zip() { this.tone(680, 0.1, "sawtooth", 0.1, 1200); } blip() { this.tone(880, 0.05, "square", 0.07); } panna() { this.tone(660, 0.09, "square", 0.16, 990); setTimeout(() => this.tone(990, 0.14, "square", 0.16, 1320), 90); } roar(dur = 1.2, peak = 0.32) { if (!this.ctx || !this.crowd) return; try { const t = this.ctx.currentTime; this.crowd.gain.cancelScheduledValues(t); this.crowd.gain.setValueAtTime(0.05, t); this.crowd.gain.linearRampToValueAtTime(peak, t + 0.15); this.crowd.gain.linearRampToValueAtTime(0.05, t + dur); } catch { /* ignore */ } } swell() { this.roar(0.5, 0.16); } } const audio = new Audio(); // ═══════════════════════════ CUSTOMIZER PREVIEW SCENE ═══════════════════════════ const previewScene = new THREE.Scene(); previewScene.background = new THREE.Color(0x14181d); previewScene.fog = new THREE.Fog(0x14181d, 8, 20); previewScene.add(new THREE.HemisphereLight(0x99aabb, 0x1a1410, 0.75)); const pKey = new THREE.DirectionalLight(0xffffff, 1.25); pKey.position.set(-3, 6, 4); previewScene.add(pKey); const pRim = new THREE.PointLight(0x2fd4c4, 0.6, 22); pRim.position.set(4, 3, -3); previewScene.add(pRim); const previewCam = new THREE.PerspectiveCamera(36, 1, 0.1, 50); previewCam.position.set(0, 1.62, 4.95); previewCam.lookAt(0, 1.14, 0); const turntable = new THREE.Group(); previewScene.add(turntable); const platform = new THREE.Mesh( new THREE.CylinderGeometry(1.15, 1.28, 0.16, 44), new THREE.MeshStandardMaterial({ color: 0x232a31, roughness: 0.8, metalness: 0.15 }), ); platform.position.y = -0.08; previewScene.add(platform); const platGlow = new THREE.Mesh( new THREE.RingGeometry(1.05, 1.2, 44), new THREE.MeshBasicMaterial({ color: COL_USER, transparent: true, opacity: 0.4 }), ); platGlow.rotation.x = -Math.PI / 2; platGlow.position.y = 0.02; previewScene.add(platGlow); let previewBaller: Baller | null = null; let previewTurn = 0; function rebuildPreview(cfg: AvatarConfig) { if (previewBaller) { turntable.remove(previewBaller.group); disposeGroup(previewBaller.group); previewBaller = null; } previewBaller = buildBaller(cfg); turntable.add(previewBaller.group); } // ═══════════════════════════ GAME STATE ═══════════════════════════ type State = "menu" | "submenu" | "customizer" | "career" | "invite" | "play" | "cutscene" | "over"; let state: State = "menu"; type MatchKind = "1v1" | "3v3"; interface MatchCtx { teamSize: number; kind: MatchKind; online: boolean; career: boolean; stopIndex: number; ranked: boolean; } let matchCtx: MatchCtx = { teamSize: 1, kind: "1v1", online: false, career: false, stopIndex: -1, ranked: false }; let entities: Baller[] = []; let human: Baller | null = null; let possessor: Baller | null = null; let userScore = 0, aiScore = 0; let clock = MATCH_SECONDS; let shake = 0; let timeScale = 1; let cutTimer = 0; let pannaWin = false; let difficulty: "easy" | "medium" = "easy"; let aiSeedBase = 1337; const tmp = new THREE.Vector3(); const tmp2 = new THREE.Vector3(); const tmp3 = new THREE.Vector3(); function diffParams() { return difficulty === "easy" ? { react: 0.34, tackle: 0.30, speed: 0.9, accuracy: 0.55, shootRange: 4.2, pressDist: 2.0 } : { react: 0.18, tackle: 0.5, speed: 1.0, accuracy: 0.78, shootRange: 5.0, pressDist: 2.4 }; } // team direction helpers function attackDir(team: number) { return team === 0 ? 1 : -1; } function attackGoalX(team: number) { return team === 0 ? GOAL_X : -GOAL_X; } function teamColor(team: number) { return team === 0 ? COL_USER : COL_AI; } function teamMates(e: Baller) { return entities.filter((x) => x.team === e.team && x !== e); } function nearestOpponent(e: Baller): Baller | null { let best: Baller | null = null, bd = Infinity; for (const o of entities) { if (o.team === e.team) continue; const d = e.pos.distanceToSquared(o.pos); if (d < bd) { bd = d; best = o; } } return best; } function nearestOppDist(e: Baller): number { const o = nearestOpponent(e); return o ? e.pos.distanceTo(o.pos) : 99; } function isClosestOfTeamTo(e: Baller, target: THREE.Vector3): boolean { // e is its team's closest to target, with a stable index tie-break const my = e.pos.distanceTo(target); const idxSelf = entities.indexOf(e); for (const o of entities) { if (o.team !== e.team || o === e) continue; const d = o.pos.distanceTo(target); if (d < my - 0.001) return false; if (Math.abs(d - my) <= 0.001 && entities.indexOf(o) < idxSelf) return false; } return true; } function isDeepCover(e: Baller): boolean { // the entity of its team furthest from its OWN goal is the deepest cover const ownX = attackGoalX(e.team === 0 ? 1 : 0); // own goal = opponent's attack goal const myBack = Math.abs(e.pos.x - ownX); for (const o of entities) { if (o.team !== e.team || o === e) continue; if (Math.abs(o.pos.x - ownX) < myBack - 0.01) return false; } return true; } // ── roster ── function spawnEntity(team: number, config: AvatarConfig, isHuman: boolean): Baller { const b = buildBaller(config); b.team = team; b.isHuman = isHuman; const dm = b.disc.material as THREE.MeshBasicMaterial; dm.color.setHex(teamColor(team)); dm.opacity = isHuman ? 0.42 : 0.3; if (isHuman) { const ring = new THREE.Mesh( new THREE.RingGeometry(0.5, 0.62, 28), new THREE.MeshBasicMaterial({ color: teamColor(team), transparent: true, opacity: 0.85 }), ); ring.rotation.x = -Math.PI / 2; ring.position.y = 0.03; b.group.add(ring); } scene.add(b.group); entities.push(b); return b; } function clearRoster() { for (const e of entities) { scene.remove(e.group); disposeGroup(e.group); } entities = []; human = null; possessor = null; ball.pos.set(0, BALL_R, 0); ball.vel.set(0, 0, 0); trailHist.length = 0; } function buildRoster(teamSize: number) { clearRoster(); const rng = makeRng(aiSeedBase); // team 0: human at index 0, rest are teal-forced AI mates human = spawnEntity(0, cloneAvatar(humanConfig), true); for (let i = 1; i < teamSize; i++) { const c = randomAvatar(rng); c.kitPrimary = 0; // teal team spawnEntity(0, c, false); } // team 1: amber-forced AI rivals for (let i = 0; i < teamSize; i++) { const c = randomAvatar(rng); c.kitPrimary = 1; // amber team spawnEntity(1, c, false); } // assign lanes/roles per team by order for (const team of [0, 1]) { const list = entities.filter((e) => e.team === team); list.forEach((e, i) => { e.role = i; e.laneZ = i === 0 ? 0 : (i === 1 ? -2.3 : 2.3); }); } } const FORMATIONS: Record = { 1: [[[-2, 0]], [[2, 0]]], 3: [[[-1.6, 0], [-3.6, -2.3], [-3.6, 2.3]], [[1.6, 0], [3.6, -2.3], [3.6, 2.3]]], }; function placeKickoff() { const ts = matchCtx.teamSize; const form = FORMATIONS[ts] || FORMATIONS[1]; for (const team of [0, 1]) { const list = entities.filter((e) => e.team === team); const spots = form[team]; list.forEach((e, i) => { const [x, z] = spots[Math.min(i, spots.length - 1)]; e.pos.set(x, 0, z); e.vel.set(0, 0, 0); e.facing.set(attackDir(team), 0, 0); e.stride = 0; e.aiThinkT = 0; e.stumble = 0; e.regainCd = 0.15; }); } ball.pos.set(0, BALL_R, 0); ball.vel.set(0, 0, 0); possessor = null; trailHist.length = 0; } // ═══════════════════════════ INPUT ═══════════════════════════ const IS_TOUCH = ("ontouchstart" in globalThis) || ((navigator as Navigator).maxTouchPoints || 0) > 0; const keys = new Set(); const input = { move: new THREE.Vector2(), sprint: false, skill: false, nutmeg: false, pass: false, charging: false, shootRelease: false, releasePower: 0, }; let spaceDownAt = 0; function isTypingTarget(t: EventTarget | null): boolean { const el = t as HTMLElement | null; return !!el && (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || (el as HTMLElement).isContentEditable === true); } globalThis.addEventListener("keydown", (e) => { if (isTypingTarget(e.target)) return; const k = e.key.toLowerCase(); if (["arrowup", "arrowdown", "arrowleft", "arrowright", " "].includes(k)) e.preventDefault(); if (state !== "play") return; if (keys.has(k)) return; keys.add(k); if (k === "j") input.skill = true; if (k === "k") input.nutmeg = true; if (k === "l" || k === "q") input.pass = true; if (k === " ") { input.charging = true; spaceDownAt = performance.now(); } }, { passive: false }); globalThis.addEventListener("keyup", (e) => { if (isTypingTarget(e.target)) return; const k = e.key.toLowerCase(); keys.delete(k); if (k === " " && input.charging) releaseShot(performance.now() - spaceDownAt); }); function pollKeys() { if (state !== "play") { if (!touchMoveActive) input.move.set(0, 0); return; } let x = 0, y = 0; if (keys.has("w") || keys.has("arrowup")) y -= 1; if (keys.has("s") || keys.has("arrowdown")) y += 1; if (keys.has("a") || keys.has("arrowleft")) x -= 1; if (keys.has("d") || keys.has("arrowright")) x += 1; if (!IS_TOUCH || !touchMoveActive) input.move.set(x, y); input.sprint = keys.has("shift") || touchSprint; } function releaseShot(heldMs: number) { input.charging = false; const charge = heldMs < TAP_MS ? 0 : Math.min(1, ((heldMs - TAP_MS) / 1000) * CHARGE_RATE); input.shootRelease = true; input.releasePower = SHOT_MIN + (SHOT_MAX - SHOT_MIN) * charge; } // ═══════════════════════════ UI (DOM overlay) ═══════════════════════════ function el(tag: string, css: Partial, text?: string): HTMLElement { const e = document.createElement(tag); Object.assign(e.style, css); if (text !== undefined) e.textContent = text; return e; } const FONT = "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif"; // subtle vignette over the canvas (below the HUD): darkens the corners so the // bright center court pops and the far cage recedes, a cheap premium depth cue. const vignette = el("div", { position: "absolute", inset: "0", pointerEvents: "none", zIndex: "4", background: "radial-gradient(125% 100% at 50% 44%, rgba(0,0,0,0) 52%, rgba(0,0,0,0.44) 100%)", }); root.appendChild(vignette); const ui = el("div", { position: "absolute", inset: "0", pointerEvents: "none", zIndex: "5", fontFamily: FONT, color: "#e7ecef", userSelect: "none", overflow: "hidden", }); root.appendChild(ui); // primary/ghost buttons function bigBtn(label: string, sub: string, kind: "primary" | "ghost" | "amber" = "primary"): HTMLButtonElement { const bg = kind === "primary" ? "linear-gradient(90deg,#0f766e,#2fd4c4)" : kind === "amber" ? "linear-gradient(90deg,#92400e,#f0a63a)" : "rgba(255,255,255,0.05)"; const col = kind === "ghost" ? "#dfe5e9" : "#04110f"; const b = el("button", { width: "100%", maxWidth: "340px", padding: "15px 20px", borderRadius: "16px", border: kind === "ghost" ? "1px solid rgba(255,255,255,0.12)" : "none", background: bg, color: col, cursor: "pointer", pointerEvents: "auto", display: "flex", flexDirection: "column", alignItems: "center", gap: "2px", fontFamily: FONT, boxShadow: kind === "ghost" ? "none" : "0 8px 26px rgba(0,0,0,0.35)", }) as HTMLButtonElement; b.append( el("span", { fontSize: "16px", fontWeight: "800", letterSpacing: "0.4px" }, label), el("span", { fontSize: "11px", opacity: "0.72", fontWeight: "600" }, sub), ); b.onmousedown = (e) => e.stopPropagation(); return b; } function lockBadge(): HTMLElement { return el("span", { fontSize: "10px", fontWeight: "800", letterSpacing: "1px", padding: "3px 8px", borderRadius: "999px", background: "rgba(255,255,255,0.1)", color: "#c7ced3", marginTop: "3px", }, "LOCKED"); } function screenWrap(): HTMLElement { return el("div", { position: "absolute", inset: "0", display: "none", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", pointerEvents: "auto", textAlign: "center", overflowY: "auto", background: "radial-gradient(120% 90% at 50% 15%, rgba(19,24,30,0.9), rgba(8,10,13,0.97))", }); } // ── top scorebar ── const scorebar = el("div", { position: "absolute", top: "12px", left: "50%", transform: "translateX(-50%)", display: "none", alignItems: "center", gap: "14px", background: "rgba(20,24,29,0.82)", border: "1px solid rgba(255,255,255,0.08)", padding: "8px 16px", borderRadius: "14px", backdropFilter: "blur(6px)", boxShadow: "0 6px 24px rgba(0,0,0,0.45)", fontWeight: "700", fontSize: "18px", }); const youLabel = el("span", { fontSize: "12px", opacity: "0.7", letterSpacing: "1px", maxWidth: "84px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, "YOU"); const youScoreEl = el("span", { color: "#2fd4c4" }, "0"); const clockEl = el("span", { fontVariantNumeric: "tabular-nums", fontSize: "20px", letterSpacing: "1px", minWidth: "54px", textAlign: "center" }, "1:30"); const aiScoreEl = el("span", { color: "#f0a63a" }, "0"); const rivalLabel = el("span", { fontSize: "12px", opacity: "0.7", letterSpacing: "1px" }, "RIVAL"); scorebar.append(youLabel, youScoreEl, clockEl, aiScoreEl, rivalLabel); ui.appendChild(scorebar); const staminaWrap = el("div", { position: "absolute", top: "62px", left: "50%", transform: "translateX(-50%)", width: "180px", height: "7px", background: "rgba(20,24,29,0.7)", borderRadius: "6px", border: "1px solid rgba(255,255,255,0.08)", overflow: "hidden", display: "none", }); const staminaFill = el("div", { width: "100%", height: "100%", background: "linear-gradient(90deg,#2fd4c4,#7ef0e4)", borderRadius: "6px", transition: "width 0.08s linear" }); staminaWrap.appendChild(staminaFill); ui.appendChild(staminaWrap); const venueTag = el("div", { position: "absolute", top: "82px", left: "50%", transform: "translateX(-50%)", fontSize: "11px", letterSpacing: "2px", opacity: "0.6", display: "none", fontWeight: "700", }, ""); ui.appendChild(venueTag); // center flash (PANNA / GOAL) const flash = el("div", { position: "absolute", top: "38%", left: "50%", transform: "translate(-50%,-50%) scale(0.6)", fontSize: "clamp(38px, 12vw, 92px)", fontWeight: "900", letterSpacing: "2px", textShadow: "0 4px 30px rgba(0,0,0,0.6)", opacity: "0", transition: "all 0.18s ease-out", textAlign: "center", whiteSpace: "nowrap", pointerEvents: "none", }); ui.appendChild(flash); let flashTimer = 0; function showFlash(text: string, color: string, ms = 1200) { flash.textContent = text; flash.style.color = color; flash.style.opacity = "1"; flash.style.transform = "translate(-50%,-50%) scale(1)"; flashTimer = ms / 1000; } // transient toast const toastEl = el("div", { position: "absolute", bottom: "84px", left: "50%", transform: "translateX(-50%) translateY(8px)", background: "rgba(20,24,29,0.92)", border: "1px solid rgba(255,255,255,0.1)", color: "#e7ecef", padding: "10px 18px", borderRadius: "12px", fontSize: "13px", fontWeight: "600", opacity: "0", transition: "all 0.2s ease", pointerEvents: "none", maxWidth: "80%", textAlign: "center", }); ui.appendChild(toastEl); let toastTimer = 0; function toast(msg: string, ms = 2200) { toastEl.textContent = msg; toastEl.style.opacity = "1"; toastEl.style.transform = "translateX(-50%) translateY(0)"; toastTimer = ms / 1000; } // desktop hint const hint = el("div", { position: "absolute", bottom: "12px", left: "50%", transform: "translateX(-50%)", fontSize: "12px", opacity: "0.65", textAlign: "center", lineHeight: "1.6", display: "none", background: "rgba(20,24,29,0.55)", padding: "6px 14px", borderRadius: "10px", pointerEvents: "none", }, "WASD move, Shift sprint, J skill, K meg, L pass, hold Space to shoot"); ui.appendChild(hint); // ═══════════════════════════ MAIN MENU ═══════════════════════════ const menuScreen = screenWrap(); menuScreen.style.justifyContent = "center"; menuScreen.style.gap = "12px"; menuScreen.style.padding = "26px 20px"; const menuInner = el("div", { display: "flex", flexDirection: "column", alignItems: "center", gap: "12px", width: "100%", maxWidth: "360px" }); menuInner.append( el("div", { fontSize: "12px", letterSpacing: "5px", opacity: "0.7", color: "#2fd4c4" }, "MCPITY STREET SOCCER"), el("div", { fontSize: "clamp(38px, 12vw, 72px)", fontWeight: "900", letterSpacing: "2px", lineHeight: "0.95", textShadow: "0 6px 40px rgba(47,212,196,0.25)" }, "CAGE GAME RUN"), el("div", { fontSize: "clamp(13px,3.4vw,16px)", opacity: "0.8", maxWidth: "320px", marginTop: "2px" }, "Build your baller. Meg your rival. Run the street circuit."), ); const playingAs = el("div", { fontSize: "13px", fontWeight: "700", color: "#cdd4d9", marginTop: "4px", padding: "6px 14px", borderRadius: "999px", background: "rgba(47,212,196,0.12)", border: "1px solid rgba(47,212,196,0.25)", }, "Playing as Baller #10"); menuInner.appendChild(playingAs); const btnPlay = bigBtn("Play", "1v1 Duel, 3v3 Cage, Street Circuit", "primary"); const btnCreate = bigBtn("Create Baller", "Design your street baller", "ghost"); const btnInvite = bigBtn("Invite a Friend", "Share a link for a 1v1 duel", "ghost"); const btnRanked = bigBtn("Ranked 3v3", "Season Pass", "ghost"); const btnTourney = bigBtn("Tournament", "Season Pass", "ghost"); btnRanked.append(lockBadge()); btnTourney.append(lockBadge()); menuInner.append(btnPlay, btnCreate, btnInvite, btnRanked, btnTourney); const diffRow = el("div", { display: "flex", gap: "10px", marginTop: "6px", alignItems: "center" }); diffRow.appendChild(el("span", { fontSize: "12px", opacity: "0.6", fontWeight: "700", letterSpacing: "1px" }, "AI")); function diffBtn(label: string, val: "easy" | "medium") { const b = el("button", { padding: "8px 18px", borderRadius: "12px", fontSize: "13px", fontWeight: "700", border: "1px solid rgba(255,255,255,0.14)", cursor: "pointer", pointerEvents: "auto", fontFamily: FONT, background: val === difficulty ? "rgba(47,212,196,0.22)" : "rgba(255,255,255,0.04)", color: val === difficulty ? "#7ef0e4" : "#cdd4d9", }, label) as HTMLButtonElement; b.dataset.val = val; b.onclick = () => { difficulty = val; refreshDiff(); audio.blip(); }; return b; } const bEasy = diffBtn("Easy", "easy"); const bMed = diffBtn("Medium", "medium"); diffRow.append(bEasy, bMed); function refreshDiff() { for (const b of [bEasy, bMed]) { const on = (b as HTMLButtonElement).dataset.val === difficulty; b.style.background = on ? "rgba(47,212,196,0.22)" : "rgba(255,255,255,0.04)"; b.style.color = on ? "#7ef0e4" : "#cdd4d9"; } } menuInner.appendChild(diffRow); menuInner.appendChild(el("div", { fontSize: "11px", opacity: "0.45", marginTop: "8px" }, "Procedural cage. Zero downloads. Play on any screen.")); menuScreen.appendChild(menuInner); ui.appendChild(menuScreen); // ═══════════════════════════ PLAY SUBMENU ═══════════════════════════ const submenuScreen = screenWrap(); submenuScreen.style.justifyContent = "center"; submenuScreen.style.gap = "14px"; submenuScreen.style.padding = "26px 20px"; const subInner = el("div", { display: "flex", flexDirection: "column", alignItems: "center", gap: "14px", width: "100%", maxWidth: "360px" }); subInner.append(el("div", { fontSize: "clamp(26px,7vw,40px)", fontWeight: "900", letterSpacing: "1px" }, "Pick a Mode")); const btn1v1 = bigBtn("1v1 Duel", "Meg your rival for the instant win", "primary"); const btn3v3 = bigBtn("3v3 Cage", "Full crew. Pass, run, finish.", "primary"); const btnCircuit = bigBtn("Street Circuit", "Climb the six-stop ladder", "amber"); const btnSubBack = bigBtn("Back", "", "ghost"); subInner.append(btn1v1, btn3v3, btnCircuit, btnSubBack); submenuScreen.appendChild(subInner); ui.appendChild(submenuScreen); // ═══════════════════════════ CUSTOMIZER ═══════════════════════════ let draftConfig: AvatarConfig = cloneAvatar(humanConfig); const custRefreshers: (() => void)[] = []; function refreshCustomizer() { for (const f of custRefreshers) f(); } function changeDraft(mut: (c: AvatarConfig) => void, rebuild = true) { mut(draftConfig); if (rebuild) rebuildPreview(draftConfig); refreshCustomizer(); } const customizerScreen = el("div", { position: "absolute", inset: "0", display: "none", flexDirection: "column", justifyContent: "flex-end", pointerEvents: "none", }); const custHeader = el("div", { position: "absolute", top: "14px", left: "0", right: "0", textAlign: "center", pointerEvents: "none", }); custHeader.append( el("div", { fontSize: "12px", letterSpacing: "4px", opacity: "0.6", color: "#2fd4c4" }, "CREATE BALLER"), el("div", { fontSize: "clamp(20px,5.5vw,30px)", fontWeight: "900", letterSpacing: "1px" }, "Your Street Baller"), ); customizerScreen.appendChild(custHeader); const custPanel = el("div", { pointerEvents: "auto", width: "100%", maxHeight: "64%", overflowY: "auto", background: "linear-gradient(180deg, rgba(18,22,27,0.72), rgba(14,17,21,0.97))", borderTop: "1px solid rgba(255,255,255,0.08)", borderTopLeftRadius: "22px", borderTopRightRadius: "22px", padding: "18px 18px 22px", boxShadow: "0 -12px 40px rgba(0,0,0,0.5)", display: "flex", flexDirection: "column", gap: "14px", }); customizerScreen.appendChild(custPanel); ui.appendChild(customizerScreen); function groupLabel(text: string): HTMLElement { return el("div", { fontSize: "11px", letterSpacing: "1.5px", fontWeight: "800", opacity: "0.55", textTransform: "uppercase" }, text); } function rowWrap(): HTMLElement { return el("div", { display: "flex", flexWrap: "wrap", gap: "9px", justifyContent: "flex-start" }); } function group(labelText: string): { box: HTMLElement; row: HTMLElement } { const box = el("div", { display: "flex", flexDirection: "column", gap: "8px" }); const row = rowWrap(); box.append(groupLabel(labelText), row); return { box, row }; } function swatchRow(colors: number[], get: () => number, set: (i: number) => void) { const row = rowWrap(); const items: HTMLElement[] = []; colors.forEach((c, i) => { const s = el("div", { width: "34px", height: "34px", borderRadius: "50%", cursor: "pointer", pointerEvents: "auto", background: "#" + c.toString(16).padStart(6, "0"), border: "2px solid rgba(255,255,255,0.15)", transition: "transform 0.1s, box-shadow 0.1s", }); s.onclick = () => { set(i); audio.blip(); }; row.appendChild(s); items.push(s); }); custRefreshers.push(() => { const sel = get(); items.forEach((s, i) => { s.style.boxShadow = i === sel ? "0 0 0 3px #2fd4c4, 0 2px 10px rgba(0,0,0,0.4)" : "none"; s.style.transform = i === sel ? "scale(1.12)" : "scale(1)"; }); }); return row; } function pillRow(opts: readonly T[], labels: Record, get: () => T, set: (v: T) => void, disabled?: () => boolean) { const row = rowWrap(); const items: { v: T; b: HTMLElement }[] = []; opts.forEach((v) => { const b = el("button", { padding: "8px 14px", borderRadius: "11px", fontSize: "12px", fontWeight: "700", cursor: "pointer", pointerEvents: "auto", fontFamily: FONT, border: "1px solid rgba(255,255,255,0.12)", background: "rgba(255,255,255,0.04)", color: "#cdd4d9", }, labels[v]) as HTMLButtonElement; b.onclick = () => { if (disabled?.()) return; set(v); audio.blip(); }; row.appendChild(b); items.push({ v, b }); }); custRefreshers.push(() => { const sel = get(); const off = disabled?.() ?? false; for (const it of items) { const on = it.v === sel; it.b.style.background = on ? "rgba(47,212,196,0.22)" : "rgba(255,255,255,0.04)"; it.b.style.color = on ? "#7ef0e4" : "#cdd4d9"; it.b.style.opacity = off ? "0.35" : "1"; (it.b as HTMLButtonElement).style.pointerEvents = off ? "none" : "auto"; } }); return row; } function sliderCtl(min: number, max: number, get: () => number, set: (v: number) => void, leftLabel: string, rightLabel: string) { const wrap = el("div", { display: "flex", flexDirection: "column", gap: "4px", width: "100%" }); const s = document.createElement("input"); s.type = "range"; s.min = String(min); s.max = String(max); s.step = "0.01"; s.value = String(get()); Object.assign(s.style, { width: "100%", accentColor: "#2fd4c4", pointerEvents: "auto", cursor: "pointer" }); s.oninput = () => set(parseFloat(s.value)); const lab = el("div", { display: "flex", justifyContent: "space-between", fontSize: "10px", opacity: "0.5", fontWeight: "700" }); lab.append(el("span", {}, leftLabel), el("span", {}, rightLabel)); wrap.append(s, lab); custRefreshers.push(() => { s.value = String(get()); }); return wrap; } function assembleCustomizer() { custPanel.replaceChildren(); custRefreshers.length = 0; const gName = el("div", { display: "flex", gap: "10px", width: "100%" }); const nameWrap = el("div", { display: "flex", flexDirection: "column", gap: "6px", flex: "1" }); const nameInput = document.createElement("input"); nameInput.type = "text"; nameInput.maxLength = 12; nameInput.value = draftConfig.name; nameInput.placeholder = "Name"; Object.assign(nameInput.style, { padding: "10px 12px", borderRadius: "11px", border: "1px solid rgba(255,255,255,0.14)", background: "rgba(255,255,255,0.05)", color: "#e7ecef", fontSize: "14px", fontFamily: FONT, pointerEvents: "auto", width: "100%", boxSizing: "border-box", }); nameInput.oninput = () => { draftConfig.name = sanitizeName(nameInput.value); }; nameWrap.append(groupLabel("Name"), nameInput); const numWrap = el("div", { display: "flex", flexDirection: "column", gap: "6px", width: "84px" }); const numInput = document.createElement("input"); numInput.type = "number"; numInput.min = "1"; numInput.max = "99"; numInput.value = String(draftConfig.number); Object.assign(numInput.style, { padding: "10px 12px", borderRadius: "11px", border: "1px solid rgba(255,255,255,0.14)", background: "rgba(255,255,255,0.05)", color: "#e7ecef", fontSize: "14px", fontFamily: FONT, pointerEvents: "auto", width: "100%", boxSizing: "border-box", }); numInput.oninput = () => { draftConfig.number = clampNum(Math.floor(parseFloat(numInput.value) || 1), 1, 99); rebuildPreview(draftConfig); // number now lives on the 3D kit (back), so reflect it live }; numWrap.append(groupLabel("Number"), numInput); gName.append(nameWrap, numWrap); custPanel.appendChild(gName); custRefreshers.push(() => { nameInput.value = draftConfig.name; numInput.value = String(draftConfig.number); }); const skinBox = el("div", { display: "flex", flexDirection: "column", gap: "8px" }); skinBox.append(groupLabel("Skin tone"), swatchRow(SKIN_TONES, () => draftConfig.skin, (i) => changeDraft((c) => { c.skin = i; }))); custPanel.appendChild(skinBox); const hairBox = el("div", { display: "flex", flexDirection: "column", gap: "8px" }); hairBox.append( groupLabel("Hair style"), pillRow(HAIR_STYLES, { buzz: "Buzz", short: "Short", afro: "Afro", fade: "Fade", long: "Long", ponytail: "Ponytail", bald: "Bald" }, () => draftConfig.hairStyle, (v) => changeDraft((c) => { c.hairStyle = v; })), groupLabel("Hair color"), swatchRow(HAIR_COLORS, () => draftConfig.hairColor, (i) => changeDraft((c) => { c.hairColor = i; })), ); custPanel.appendChild(hairBox); const bodyBox = el("div", { display: "flex", flexDirection: "column", gap: "8px" }); bodyBox.append( groupLabel("Height"), sliderCtl(0.9, 1.15, () => draftConfig.height, (v) => changeDraft((c) => { c.height = v; }), "Short", "Tall"), groupLabel("Build"), sliderCtl(0.85, 1.2, () => draftConfig.build, (v) => changeDraft((c) => { c.build = v; }), "Lean", "Stocky"), ); custPanel.appendChild(bodyBox); const kitBox = el("div", { display: "flex", flexDirection: "column", gap: "8px" }); kitBox.append( groupLabel("Kit primary"), swatchRow(KIT_COLORS, () => draftConfig.kitPrimary, (i) => changeDraft((c) => { c.kitPrimary = i; })), groupLabel("Kit secondary"), swatchRow(KIT_COLORS, () => draftConfig.kitSecondary, (i) => changeDraft((c) => { c.kitSecondary = i; })), groupLabel("Pattern"), pillRow(KIT_PATTERNS, { solid: "Solid", stripes: "Stripes", sash: "Sash", hoops: "Hoops" }, () => draftConfig.kitPattern, (v) => changeDraft((c) => { c.kitPattern = v; })), ); custPanel.appendChild(kitBox); const bootBox = el("div", { display: "flex", flexDirection: "column", gap: "8px" }); bootBox.append(groupLabel("Boots"), swatchRow(BOOT_COLORS, () => draftConfig.boots, (i) => changeDraft((c) => { c.boots = i; }))); custPanel.appendChild(bootBox); const accBox = el("div", { display: "flex", flexDirection: "column", gap: "8px" }); accBox.append( groupLabel("Accessory"), pillRow(ACCESSORIES, { none: "None", headband: "Headband", captain: "Captain", gloves: "Gloves" }, () => draftConfig.accessory, (v) => changeDraft((c) => { c.accessory = v; })), ); custPanel.appendChild(accBox); const btnRow = el("div", { display: "flex", gap: "10px", marginTop: "6px" }); const bRand = bigBtn("Randomize", "", "ghost"); const bSave = bigBtn("Save baller", "", "primary"); const bBack = bigBtn("Back", "", "ghost"); bRand.style.maxWidth = ""; bSave.style.maxWidth = ""; bBack.style.maxWidth = ""; bRand.onclick = () => { randomizeDraft(); audio.blip(); }; bSave.onclick = () => { commitDraft(); toast("Baller saved."); audio.whistle(); }; bBack.onclick = () => { setState("menu"); audio.blip(); }; btnRow.append(bRand, bSave, bBack); custPanel.appendChild(btnRow); } function randomizeDraft() { const r = makeRng((Date.now() ^ Math.floor(Math.random() * 1e9)) >>> 0); const rc = randomAvatar(r); rc.name = draftConfig.name; rc.number = draftConfig.number; // keep identity draftConfig = rc; rebuildPreview(draftConfig); refreshCustomizer(); } function commitDraft() { draftConfig.name = sanitizeName(draftConfig.name); draftConfig.number = clampNum(draftConfig.number, 1, 99); humanConfig = cloneAvatar(draftConfig); saveAvatarConfig(humanConfig); updatePlayingAs(); } function updatePlayingAs() { playingAs.textContent = "Playing as " + humanConfig.name + " #" + humanConfig.number; } // ═══════════════════════════ STREET CIRCUIT SCREEN ═══════════════════════════ const careerScreen = screenWrap(); careerScreen.style.padding = "60px 20px 30px"; careerScreen.style.gap = "12px"; const careerInner = el("div", { display: "flex", flexDirection: "column", alignItems: "center", gap: "12px", width: "100%", maxWidth: "380px" }); careerInner.append( el("div", { fontSize: "12px", letterSpacing: "4px", opacity: "0.6", color: "#f0a63a" }, "STREET CIRCUIT"), el("div", { fontSize: "clamp(24px,6.5vw,38px)", fontWeight: "900", letterSpacing: "1px" }, "The Ladder"), ); const careerStats = el("div", { fontSize: "12px", opacity: "0.7", fontWeight: "600" }, ""); careerInner.appendChild(careerStats); const ladderList = el("div", { display: "flex", flexDirection: "column", gap: "8px", width: "100%" }); careerInner.appendChild(ladderList); const careerBtnRow = el("div", { display: "flex", flexDirection: "column", gap: "10px", width: "100%", alignItems: "center", marginTop: "6px" }); const btnContinue = bigBtn("Continue", "Play your current stop", "primary"); const btnCareerReset = bigBtn("Reset progress", "", "ghost"); const btnCareerBack = bigBtn("Back", "", "ghost"); const careerChampLine = el("div", { fontSize: "13px", fontWeight: "800", color: "#7ef0e4", marginTop: "2px", display: "none" }, "Circuit complete. You are the street champion."); careerBtnRow.append(careerChampLine, btnContinue, btnCareerReset, btnCareerBack); careerInner.appendChild(careerBtnRow); careerScreen.appendChild(careerInner); ui.appendChild(careerScreen); function refreshCareer() { const cleared = career.cleared.filter(Boolean).length; careerStats.textContent = "Cleared " + cleared + " of " + CAREER_STOPS.length + ". Wins: " + career.wins + "."; ladderList.replaceChildren(); CAREER_STOPS.forEach((stop, i) => { const isCleared = career.cleared[i]; const isCurrent = i === career.stop && !isCleared; const locked = i > career.stop; const rowc = el("div", { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "10px", padding: "11px 14px", borderRadius: "13px", width: "100%", boxSizing: "border-box", background: isCurrent ? "rgba(240,166,58,0.16)" : "rgba(255,255,255,0.04)", border: "1px solid " + (isCurrent ? "rgba(240,166,58,0.4)" : "rgba(255,255,255,0.08)"), opacity: locked ? "0.5" : "1", }); const left = el("div", { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "2px" }); left.append( el("div", { fontSize: "14px", fontWeight: "800" }, (i + 1) + ". " + stop.name), el("div", { fontSize: "11px", opacity: "0.7" }, stop.kind.toUpperCase() + " . " + (stop.diff === "easy" ? "Easy" : "Medium")), ); const mark = el("div", { fontSize: "12px", fontWeight: "800", letterSpacing: "1px" }, isCleared ? "CLEARED" : isCurrent ? "CURRENT" : locked ? "LOCKED" : ""); mark.style.color = isCleared ? "#7ef0e4" : isCurrent ? "#f4b860" : "#9aa0a6"; rowc.append(left, mark); ladderList.appendChild(rowc); }); const done = career.stop >= CAREER_STOPS.length; btnContinue.style.display = done ? "none" : "flex"; careerChampLine.style.display = done ? "block" : "none"; } // ═══════════════════════════ INVITE SCREEN ═══════════════════════════ const inviteScreen = screenWrap(); inviteScreen.style.justifyContent = "center"; inviteScreen.style.padding = "26px 20px"; inviteScreen.style.gap = "14px"; const inviteInner = el("div", { display: "flex", flexDirection: "column", alignItems: "center", gap: "14px", width: "100%", maxWidth: "360px" }); inviteInner.append( el("div", { fontSize: "12px", letterSpacing: "4px", opacity: "0.6", color: "#2fd4c4" }, "INVITE A FRIEND"), el("div", { fontSize: "clamp(24px,6.5vw,38px)", fontWeight: "900", letterSpacing: "1px" }, "1v1 Link Duel"), ); const inviteBody = el("div", { fontSize: "13px", opacity: "0.82", lineHeight: "1.6", maxWidth: "320px" }, ""); inviteInner.appendChild(inviteBody); const inviteUrlBox = el("div", { fontSize: "12px", fontFamily: "ui-monospace, monospace", wordBreak: "break-all", background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.12)", padding: "10px 12px", borderRadius: "11px", width: "100%", boxSizing: "border-box", color: "#cdd4d9", }, ""); inviteInner.appendChild(inviteUrlBox); const inviteStatus = el("div", { fontSize: "13px", fontWeight: "700", color: "#f4b860", minHeight: "18px", }, ""); inviteInner.appendChild(inviteStatus); const btnInvitePlay = bigBtn("Play the duel", "Host or fall back to AI", "primary"); const btnInviteBack = bigBtn("Back", "", "ghost"); inviteInner.append(btnInvitePlay, btnInviteBack); inviteScreen.appendChild(inviteInner); ui.appendChild(inviteScreen); // ═══════════════════════════ SEASON PASS PANEL (stub) ═══════════════════════════ const seasonPanel = el("div", { position: "absolute", inset: "0", display: "none", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "12px", pointerEvents: "auto", background: "rgba(8,10,13,0.86)", padding: "24px", textAlign: "center", }); const seasonCard = el("div", { display: "flex", flexDirection: "column", alignItems: "center", gap: "10px", background: "linear-gradient(180deg, rgba(24,29,35,0.96), rgba(16,20,25,0.98))", border: "1px solid rgba(255,255,255,0.1)", borderRadius: "20px", padding: "26px 24px", maxWidth: "320px", }); seasonCard.append( el("div", { fontSize: "12px", letterSpacing: "3px", opacity: "0.6", color: "#f0a63a" }, "SEASON PASS"), el("div", { fontSize: "24px", fontWeight: "900" }, "Coming soon."), el("div", { fontSize: "13px", opacity: "0.78", lineHeight: "1.6" }, "Ranked 3v3 and Tournament unlock with the Season Pass. We are still building it."), ); const seasonClose = bigBtn("Close", "", "ghost"); seasonClose.onclick = () => { seasonPanel.style.display = "none"; audio.blip(); }; seasonCard.appendChild(seasonClose); seasonPanel.appendChild(seasonCard); ui.appendChild(seasonPanel); function openSeasonPanel() { seasonPanel.style.display = "flex"; } // ═══════════════════════════ END CARD ═══════════════════════════ const endCard = screenWrap(); endCard.style.justifyContent = "center"; endCard.style.gap = "12px"; endCard.style.padding = "26px 20px"; const endInner = el("div", { display: "flex", flexDirection: "column", alignItems: "center", gap: "12px", width: "100%", maxWidth: "340px" }); const endTitle = el("div", { fontSize: "clamp(32px,9vw,64px)", fontWeight: "900", letterSpacing: "1px" }, ""); const endScore = el("div", { fontSize: "clamp(17px,5vw,24px)", opacity: "0.9", fontWeight: "700" }, ""); const endSub = el("div", { fontSize: "13px", opacity: "0.72", lineHeight: "1.5", maxWidth: "300px" }, ""); const endBtnRow = el("div", { display: "flex", flexDirection: "column", gap: "10px", width: "100%", alignItems: "center", marginTop: "8px" }); const btnEndPrimary = bigBtn("Play again", "", "primary"); const btnEndMenu = bigBtn("Main menu", "", "ghost"); endBtnRow.append(btnEndPrimary, btnEndMenu); endInner.append(endTitle, endScore, endSub, endBtnRow); endCard.appendChild(endInner); ui.appendChild(endCard); // ═══════════════════════════ TOUCH CONTROLS ═══════════════════════════ let touchMoveActive = false; let touchSprint = false; let joyId = -1; const joyBase = el("div", { position: "absolute", width: "108px", height: "108px", borderRadius: "50%", border: "2px solid rgba(255,255,255,0.16)", background: "rgba(20,24,29,0.4)", display: "none", pointerEvents: "none", }); const joyKnob = el("div", { position: "absolute", width: "48px", height: "48px", borderRadius: "50%", background: "rgba(47,212,196,0.6)", left: "30px", top: "30px", boxShadow: "0 2px 12px rgba(0,0,0,0.4)", }); joyBase.appendChild(joyKnob); function touchBtn(label: string, sub: string, bg: string): HTMLElement { const b = el("div", { width: "72px", height: "72px", borderRadius: "50%", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", fontWeight: "800", fontSize: "13px", background: bg, border: "1px solid rgba(255,255,255,0.16)", color: "#eef3f5", pointerEvents: "auto", touchAction: "none", userSelect: "none", boxShadow: "0 4px 16px rgba(0,0,0,0.4)", }, label); b.append(el("span", { fontSize: "9px", opacity: "0.7", fontWeight: "600", marginTop: "2px" }, sub)); return b; } const btnSkill = touchBtn("SKILL", "feint", "rgba(60,68,78,0.85)"); const btnNutmeg = touchBtn("MEG", "style", "rgba(180,83,9,0.7)"); const btnPass = touchBtn("PASS", "to crew", "rgba(15,118,110,0.6)"); const shootWrap = el("div", { position: "relative", width: "90px", height: "90px", pointerEvents: "auto" }); const btnShoot = touchBtn("SHOOT", "hold", "rgba(15,118,110,0.85)"); Object.assign(btnShoot.style, { width: "90px", height: "90px", fontSize: "15px" }); const chargeRing = el("div", { position: "absolute", inset: "-5px", borderRadius: "50%", pointerEvents: "none" }); shootWrap.append(chargeRing, btnShoot); const rightPad = el("div", { position: "absolute", right: "18px", bottom: "24px", display: "none", flexDirection: "column", gap: "12px", alignItems: "flex-end", }); const megRow = el("div", { display: "flex", gap: "12px", alignItems: "center" }); megRow.append(btnPass, btnSkill, btnNutmeg); rightPad.append(megRow, shootWrap); const sprintBtn = el("div", { position: "absolute", left: "24px", bottom: "150px", padding: "10px 16px", borderRadius: "14px", background: "rgba(60,68,78,0.85)", border: "1px solid rgba(255,255,255,0.16)", color: "#eef3f5", fontWeight: "800", fontSize: "13px", display: "none", pointerEvents: "auto", touchAction: "none", }, "SPRINT"); ui.append(joyBase, rightPad, sprintBtn); let touchBound = false; function setupTouchOnce() { if (touchBound) return; touchBound = true; canvas.addEventListener("touchstart", onJoyStart, { passive: false }); canvas.addEventListener("touchmove", onJoyMove, { passive: false }); canvas.addEventListener("touchend", onJoyEnd, { passive: false }); canvas.addEventListener("touchcancel", onJoyEnd, { passive: false }); bindHold(sprintBtn, () => { touchSprint = true; }, () => { touchSprint = false; }); bindTap(btnSkill, () => { if (state === "play") input.skill = true; }); bindTap(btnNutmeg, () => { if (state === "play") input.nutmeg = true; }); bindTap(btnPass, () => { if (state === "play") input.pass = true; }); bindHold(btnShoot, () => { if (state === "play") { input.charging = true; spaceDownAt = performance.now(); } }, () => { if (input.charging) releaseShot(performance.now() - spaceDownAt); }); } function showTouchPads(show: boolean) { const d = show ? "block" : "none"; joyBase.style.display = d; rightPad.style.display = show ? "flex" : "none"; sprintBtn.style.display = d; btnPass.style.display = (show && matchCtx.teamSize > 1) ? "flex" : "none"; } function bindTap(e: HTMLElement, fn: () => void) { e.addEventListener("touchstart", (ev) => { ev.preventDefault(); ev.stopPropagation(); audio.init(); audio.resume(); fn(); }, { passive: false }); } function bindHold(e: HTMLElement, on: () => void, off: () => void) { e.addEventListener("touchstart", (ev) => { ev.preventDefault(); ev.stopPropagation(); audio.init(); audio.resume(); on(); }, { passive: false }); e.addEventListener("touchend", (ev) => { ev.preventDefault(); ev.stopPropagation(); off(); }, { passive: false }); e.addEventListener("touchcancel", () => off(), { passive: false }); } function onJoyStart(ev: TouchEvent) { audio.init(); audio.resume(); if (state !== "play") return; for (const t of Array.from(ev.changedTouches)) { if (t.clientX < globalThis.innerWidth * 0.55 && joyId === -1) { joyId = t.identifier; touchMoveActive = true; const r = root.getBoundingClientRect(); joyBase.style.left = (t.clientX - r.left - 54) + "px"; joyBase.style.top = (t.clientY - r.top - 54) + "px"; updateJoy(t.clientX, t.clientY); ev.preventDefault(); } } } function onJoyMove(ev: TouchEvent) { for (const t of Array.from(ev.changedTouches)) if (t.identifier === joyId) { updateJoy(t.clientX, t.clientY); ev.preventDefault(); } } function onJoyEnd(ev: TouchEvent) { for (const t of Array.from(ev.changedTouches)) if (t.identifier === joyId) { joyId = -1; touchMoveActive = false; input.move.set(0, 0); joyKnob.style.left = "30px"; joyKnob.style.top = "30px"; } } function updateJoy(cx: number, cy: number) { const bx = parseFloat(joyBase.style.left) + 54; const by = parseFloat(joyBase.style.top) + 54; const r = root.getBoundingClientRect(); let dx = (cx - r.left) - bx, dy = (cy - r.top) - by; const mag = Math.hypot(dx, dy) || 1; const cl = Math.min(mag, 42); dx = dx / mag * cl; dy = dy / mag * cl; joyKnob.style.left = (30 + dx) + "px"; joyKnob.style.top = (30 + dy) + "px"; input.move.set(dx / 42, dy / 42); } // ═══════════════════════════ ONLINE ROOMS (casual host-authoritative) ═══════════════════════════ // Uses window.MCPityRooms IF the page was opened with ?room=CODE. Absent => inert, // the duel is a normal offline game vs AI. No Supabase client is ever opened here. type RoomsShim = { ready?: boolean; me?: string; peers?: string[]; count?: number; send?: (d: unknown) => void; onMessage?: (cb: (m: { from: string; data: unknown }) => void) => void; onPresence?: (cb: (p: { count: number; peers: string[]; me: string }) => void) => void; onJoin?: (cb: (id: string) => void) => void; onLeave?: (cb: (id: string) => void) => void; requestState?: () => void; onStateRequest?: (cb: (from: string) => void) => void; provideState?: (to: string, data: unknown) => void; onState?: (cb: (data: unknown) => void) => void; }; function Rooms(): RoomsShim | null { try { return (globalThis as unknown as { MCPityRooms?: RoomsShim }).MCPityRooms || null; } catch { return null; } } const net = { mode: "off" as "off" | "host" | "client", peerPresent: false, wired: false, waitTimer: 0, fellBack: false, sendAcc: 0, remoteInput: { mx: 0, my: 0, shoot: false, shootPow: 0 }, snapshot: null as null | Record, }; function roomLink(): string { try { const loc = globalThis.location; let code = ""; try { code = new URLSearchParams(loc.search).get("room") || ""; } catch { /* ignore */ } if (!code) code = "CODE"; return loc.origin + loc.pathname + "?room=" + code; } catch { return "open this game with a ?room=CODE link"; } } function hasRoom(): boolean { try { return !!(new URLSearchParams(globalThis.location.search).get("room")); } catch { return false; } } function amHost(r: RoomsShim): boolean { // deterministic: the lowest id in the sorted [me, ...peers] set hosts const me = r.me || "me"; const ids = [me, ...(r.peers || [])].filter(Boolean).sort(); return ids.length === 0 || ids[0] === me; } function wireRooms() { const r = Rooms(); if (!r || net.wired) return; net.wired = true; try { r.onPresence?.((p) => { net.peerPresent = (p?.count || 0) > 1; if (state === "invite") updateInviteStatus(); }); r.onJoin?.(() => { net.peerPresent = (Rooms()?.count || 1) > 1 || true; if (state === "invite") updateInviteStatus(); }); r.onLeave?.(() => { net.peerPresent = (Rooms()?.count || 1) > 1; if (matchCtx.online && !net.peerPresent && state === "play") { net.fellBack = true; toast("Opponent left. Playing vs AI."); } }); r.onMessage?.((m) => { const d = m?.data as Record | undefined; if (!d) return; if (d.t === "input" && net.mode === "host") { net.remoteInput.mx = Number(d.mx) || 0; net.remoteInput.my = Number(d.my) || 0; if (d.shoot) { net.remoteInput.shoot = true; net.remoteInput.shootPow = Number(d.pow) || SHOT_MIN; } } else if (d.t === "snap" && net.mode === "client") { net.snapshot = d; } }); r.onStateRequest?.((from) => { try { r.provideState?.(from, { kind: matchCtx.kind }); } catch { /* ignore */ } }); r.onState?.(() => { /* late-join initial sync handled via snapshots */ }); } catch { /* ignore */ } } function netBroadcastSnapshot() { const r = Rooms(); if (!r || net.mode !== "host" || !net.peerPresent) return; try { const snap: Record = { t: "snap", bx: ball.pos.x, bz: ball.pos.z, bvx: ball.vel.x, bvz: ball.vel.z, us: userScore, as: aiScore, ck: clock, e: entities.map((e) => ({ x: e.pos.x, z: e.pos.z, fx: e.facing.x, fz: e.facing.z, st: e.stride })), }; r.send?.(snap); } catch { /* ignore */ } } function netSendInput() { const r = Rooms(); if (!r || net.mode !== "client") return; try { const msg: Record = { t: "input", mx: input.move.x, my: input.move.y }; if (input.shootRelease) { msg.shoot = true; msg.pow = input.releasePower; input.shootRelease = false; } r.send?.(msg); } catch { /* ignore */ } } function netApplySnapshot() { const s = net.snapshot; if (!s) return; ball.pos.x = Number(s.bx) || 0; ball.pos.z = Number(s.bz) || 0; ball.pos.y = BALL_R; ball.vel.x = Number(s.bvx) || 0; ball.vel.z = Number(s.bvz) || 0; userScore = Number(s.us) || 0; aiScore = Number(s.as) || 0; clock = Number(s.ck) || 0; const arr = s.e as { x: number; z: number; fx: number; fz: number; st: number }[] | undefined; if (Array.isArray(arr)) { entities.forEach((e, i) => { const d = arr[i]; if (!d) return; e.pos.lerp(tmp.set(d.x, 0, d.z), 0.5); e.facing.set(d.fx || 1, 0, d.fz || 0).normalize(); e.stride = d.st || e.stride; }); } } // ═══════════════════════════ STATE MACHINE ═══════════════════════════ const ALL_SCREENS = [menuScreen, submenuScreen, customizerScreen, careerScreen, inviteScreen, endCard]; function setState(next: State) { const leavingMatch = (state === "play" || state === "cutscene" || state === "over"); const enteringMenuish = (next === "menu" || next === "submenu" || next === "customizer" || next === "career" || next === "invite"); state = next; for (const s of ALL_SCREENS) s.style.display = "none"; const inMatch = next === "play" || next === "cutscene"; scorebar.style.display = inMatch ? "flex" : "none"; staminaWrap.style.display = inMatch ? "block" : "none"; venueTag.style.display = (inMatch && matchCtx.career) ? "block" : "none"; hint.style.display = (inMatch && !IS_TOUCH) ? "block" : "none"; if (IS_TOUCH) showTouchPads(inMatch); if (enteringMenuish && entities.length > 0) clearRoster(); if (next === "menu") { menuScreen.style.display = "flex"; updatePlayingAs(); refreshDiff(); } else if (next === "submenu") { submenuScreen.style.display = "flex"; } else if (next === "customizer") { draftConfig = cloneAvatar(humanConfig); assembleCustomizer(); rebuildPreview(draftConfig); refreshCustomizer(); customizerScreen.style.display = "flex"; } else if (next === "career") { refreshCareer(); careerScreen.style.display = "flex"; } else if (next === "invite") { wireRooms(); setupInvite(); inviteScreen.style.display = "flex"; } else if (next === "over") { endCard.style.display = "flex"; } void leavingMatch; } // ═══════════════════════════ MATCH LIFECYCLE ═══════════════════════════ function resetMatchTimers() { userScore = 0; aiScore = 0; clock = MATCH_SECONDS; pannaWin = false; timeScale = 1; shake = 0; cutTimer = 0; } interface StartOpts { online?: boolean; career?: boolean; stopIndex?: number; ranked?: boolean; seed?: number; diff?: "easy" | "medium"; } function startMatch(kind: MatchKind, opts: StartOpts = {}) { audio.init(); audio.resume(); const teamSize = kind === "3v3" ? 3 : 1; matchCtx = { teamSize, kind, online: !!opts.online, career: !!opts.career, stopIndex: opts.stopIndex ?? -1, ranked: !!opts.ranked, }; if (opts.diff) difficulty = opts.diff; aiSeedBase = (opts.seed ?? ((Date.now() & 0xffff) ^ 0x51ed)) >>> 0; // online role resolution (guarded; off => plain AI) net.mode = "off"; net.peerPresent = false; net.fellBack = false; net.waitTimer = 0; net.snapshot = null; if (matchCtx.online) { wireRooms(); const r = Rooms(); if (r && hasRoom()) { net.mode = amHost(r) ? "host" : "client"; net.peerPresent = (r.count || 1) > 1; if (net.mode === "client") { try { r.requestState?.(); } catch { /* ignore */ } } } else { matchCtx.online = false; } } resetMatchTimers(); buildRoster(teamSize); placeKickoff(); venueTag.textContent = (matchCtx.career && CAREER_STOPS[matchCtx.stopIndex]) ? CAREER_STOPS[matchCtx.stopIndex].name.toUpperCase() : ""; updateScoreLabels(); setState("play"); audio.whistle(); showFlash("KICK OFF", "#7ef0e4", 900); } function updateScoreLabels() { youLabel.textContent = matchCtx.teamSize > 1 ? "CREW" : (human ? human.config.name.toUpperCase() : "YOU"); rivalLabel.textContent = matchCtx.teamSize > 1 ? "RIVALS" : "RIVAL"; } function startCareerStop() { if (career.stop >= CAREER_STOPS.length) { setState("career"); return; } const stop = CAREER_STOPS[career.stop]; startMatch(stop.kind, { career: true, stopIndex: career.stop, seed: 4000 + career.stop * 37, diff: stop.diff }); } function endMatch() { state = "over"; timeScale = 1; const won = pannaWin || userScore > aiScore; const draw = !pannaWin && userScore === aiScore; let champion = false; if (matchCtx.career) { career.legacyGames++; if (won) { career.wins++; if (matchCtx.stopIndex >= 0 && matchCtx.stopIndex < CAREER_STOPS.length) career.cleared[matchCtx.stopIndex] = true; if (matchCtx.stopIndex === career.stop) career.stop = Math.min(CAREER_STOPS.length, career.stop + 1); champion = career.stop >= CAREER_STOPS.length; } saveCareer(career); } let txt: string, col: string; if (champion) { txt = "CHAMPION"; col = "#7ef0e4"; } else if (pannaWin) { txt = "PANNA WIN"; col = "#7ef0e4"; } else if (won) { txt = "YOU WIN"; col = "#7ef0e4"; } else if (draw) { txt = "DRAW"; col = "#cdd4d9"; } else { txt = matchCtx.teamSize > 1 ? "RIVALS WIN" : "RIVAL WINS"; col = "#f4b860"; } endTitle.textContent = txt; endTitle.style.color = col; endScore.textContent = pannaWin ? "Megged clean in the cage." : "Final: " + userScore + " to " + aiScore + " as " + (human ? human.config.name + " #" + human.config.number : "you"); // route the end-card buttons by context if (champion) { endSub.textContent = "You ran the whole street circuit. Legacy secured."; btnEndPrimary.style.display = "none"; btnEndMenu.querySelector("span")!.textContent = "Back to menu"; } else if (matchCtx.career) { btnEndPrimary.style.display = "flex"; if (won) { endSub.textContent = "Stop cleared. On to the next cage."; (btnEndPrimary.querySelector("span") as HTMLElement).textContent = "Continue"; btnEndPrimary.onclick = () => { startCareerStop(); }; } else { endSub.textContent = "Close one. Run the stop back."; (btnEndPrimary.querySelector("span") as HTMLElement).textContent = "Retry stop"; btnEndPrimary.onclick = () => { startCareerStop(); }; } (btnEndMenu.querySelector("span") as HTMLElement).textContent = "Main menu"; } else { endSub.textContent = won ? "Clean work. Run it back?" : "Shake it off. Run it back."; btnEndPrimary.style.display = "flex"; (btnEndPrimary.querySelector("span") as HTMLElement).textContent = "Play again"; btnEndPrimary.onclick = () => { startMatch(matchCtx.kind, { online: matchCtx.online, ranked: matchCtx.ranked }); }; } if (won) audio.roar(1.4); setState("over"); } // ═══════════════════════════ INVITE / ONLINE UI ═══════════════════════════ function seasonUnlocked(): boolean { try { return !!(globalThis as unknown as { MCPityEntitlements?: { cageSeasonPass?: boolean } }).MCPityEntitlements?.cageSeasonPass; } catch { return false; } } function setupInvite() { inviteUrlBox.textContent = roomLink(); const r = Rooms(); if (r && hasRoom()) { inviteBody.textContent = "Share this link. When a friend opens it, you duel live. Host runs the match."; } else { inviteBody.textContent = "Open this game with a shared room link to duel a friend. For now this starts a local match vs AI."; } updateInviteStatus(); } function updateInviteStatus() { const r = Rooms(); if (!r || !hasRoom()) { inviteStatus.textContent = "No room link detected. You can still play vs AI."; inviteStatus.style.color = "#9aa0a6"; return; } const count = r.count || 1; if (count > 1) { inviteStatus.textContent = "Opponent joined. Kicking off."; inviteStatus.style.color = "#7ef0e4"; } else { inviteStatus.textContent = "Waiting for opponent. Share the link."; inviteStatus.style.color = "#f4b860"; } } function beginOnlineDuel() { startMatch("1v1", { online: true }); } // ═══════════════════════════ BUTTON WIRING ═══════════════════════════ btnPlay.onclick = () => { audio.blip(); setState("submenu"); }; btnCreate.onclick = () => { audio.blip(); setState("customizer"); }; btnInvite.onclick = () => { audio.blip(); setState("invite"); }; btnRanked.onclick = () => { audio.blip(); if (seasonUnlocked()) startMatch("3v3", { ranked: true }); else openSeasonPanel(); }; btnTourney.onclick = () => { audio.blip(); if (seasonUnlocked()) startMatch("3v3", { ranked: true }); else openSeasonPanel(); }; btn1v1.onclick = () => { audio.blip(); startMatch("1v1"); }; btn3v3.onclick = () => { audio.blip(); startMatch("3v3"); }; btnCircuit.onclick = () => { audio.blip(); setState("career"); }; btnSubBack.onclick = () => { audio.blip(); setState("menu"); }; btnContinue.onclick = () => { audio.blip(); startCareerStop(); }; btnCareerReset.onclick = () => { career = defaultCareer(); saveCareer(career); refreshCareer(); audio.blip(); }; btnCareerBack.onclick = () => { audio.blip(); setState("menu"); }; btnInvitePlay.onclick = () => { audio.blip(); beginOnlineDuel(); }; btnInviteBack.onclick = () => { audio.blip(); setState("menu"); }; btnEndMenu.onclick = () => { audio.blip(); setState("menu"); }; // ═══════════════════════════ ACTIONS ═══════════════════════════ function squash(b: Baller, amt: number) { b.torso.scale.set(1 / amt, amt, 1 / amt); } function doShot(power: number) { input.shootRelease = false; if (!human || possessor !== human) return; const gx = attackGoalX(human.team); tmp.set(gx, 0, 0).sub(human.pos); tmp.y = 0; tmp.normalize(); tmp2.copy(human.facing); tmp2.y = 0; if (tmp2.lengthSq() < 0.01) tmp2.copy(tmp); tmp2.normalize().lerp(tmp, 0.5).normalize(); ball.vel.set(tmp2.x * power, 0, tmp2.z * power); ball.pos.y = BALL_R; possessor = null; human.regainCd = 0.3; audio.kick(power / SHOT_MAX); if (power > SHOT_MAX * 0.7) audio.swell(); burst(ball.pos.x, 0.3, ball.pos.z, 8, new THREE.Color(teamColor(human.team)), 3, 0.4); squash(human, 0.8); } function doSkill() { input.skill = false; if (!human) return; if (human.skillCd > 0 || human.stamina < SKILL_STAMINA) return; human.skillCd = SKILL_COOLDOWN; human.stamina -= SKILL_STAMINA; human.invuln = 0.5; tmp.set(-human.facing.z, 0, human.facing.x); const side = input.move.x >= 0 ? 1 : -1; human.vel.addScaledVector(tmp, SKILL_DASH * side); audio.thud(); burst(human.pos.x, 0.3, human.pos.z, 10, new THREE.Color(COL_USER), 3.2, 0.5); squash(human, 0.85); const opp = nearestOpponent(human); if (opp && human.pos.distanceTo(opp.pos) < 1.8) opp.stumble = 0.5; } function doPass() { input.pass = false; if (!human || possessor !== human || matchCtx.teamSize < 2) return; const dir = attackDir(human.team); let best: Baller | null = null, bestScore = -1e9; for (const m of teamMates(human)) { const fwd = dir * (m.pos.x - human.pos.x); const open = nearestOppDist(m); const score = fwd * 1.0 + open * 0.8 - human.pos.distanceTo(m.pos) * 0.06; if (score > bestScore) { bestScore = score; best = m; } } if (!best) return; tmp.copy(best.pos).addScaledVector(best.vel, 0.25).sub(human.pos); tmp.y = 0; const d = tmp.length(); tmp.normalize(); const pw = clampNum(d * 2.2 + 4, SHOT_MIN, SHOT_MAX); ball.vel.set(tmp.x * pw, 0, tmp.z * pw); ball.pos.y = BALL_R; possessor = null; human.regainCd = 0.3; best.regainCd = 0; audio.zip(); burst(ball.pos.x, 0.3, ball.pos.z, 6, new THREE.Color(teamColor(human.team)), 2.4, 0.3); } function tryNutmeg() { input.nutmeg = false; if (!human || possessor !== human) return; if (human.stamina < NUTMEG_STAMINA) { audio.thud(); return; } const opp = nearestOpponent(human); if (!opp) { audio.thud(); return; } tmp.copy(opp.pos).sub(human.pos); tmp.y = 0; const dist = tmp.length(); tmp.normalize(); const facing = tmp2.copy(human.facing).setY(0).normalize(); const inFront = facing.dot(tmp); if (dist < NUTMEG_RANGE && inFront > NUTMEG_CONE) { human.stamina -= NUTMEG_STAMINA; if (matchCtx.teamSize === 1) { triggerPanna(opp); } else { // 3v3: style meg. Beat that defender, big juice, keep playing. opp.stumble = 0.9; opp.tackleCd = 1.0; ball.vel.set(facing.x * 8, 0, facing.z * 8); ball.pos.y = BALL_R; possessor = null; human.regainCd = 0.12; // human can usually re-collect past the defender audio.panna(); audio.swell(); shake = 0.45; burst(opp.pos.x, 0.6, opp.pos.z, 24, new THREE.Color(COL_USER), 4.2, 0.9); showFlash("MEG!", "#7ef0e4", 1100); } } else { ball.vel.addScaledVector(facing, 3); audio.thud(); } } function triggerPanna(opp: Baller) { pannaWin = true; state = "cutscene"; cutTimer = 2.6; timeScale = 0.25; const facing = tmp.copy(human!.facing).setY(0).normalize(); ball.vel.set(facing.x * 9, 0, facing.z * 9); ball.pos.y = BALL_R; possessor = null; audio.panna(); audio.roar(1.6); shake = 0.9; burst(opp.pos.x, 0.6, opp.pos.z, 40, new THREE.Color(COL_USER), 5, 1.1); burst(human!.pos.x, 0.6, human!.pos.z, 20, new THREE.Color(0xf0f0f0), 4, 1.2); showFlash("PANNA!", "#7ef0e4", 2400); } function scoreGoal(team: number) { if (team === 0) userScore++; else aiScore++; state = "cutscene"; cutTimer = 1.8; timeScale = 1; audio.whistle(); audio.roar(1.2); shake = 0.6; const gx = attackGoalX(team); burst(gx, 0.6, ball.pos.z, 34, new THREE.Color(teamColor(team)), 4.5, 1.0); showFlash("GOAL", team === 0 ? "#7ef0e4" : "#f4b860", 1600); possessor = null; ball.vel.set(0, 0, 0); } // ═══════════════════════════ SIM ═══════════════════════════ function clampToCourt(p: THREE.Vector3, r: number) { p.x = Math.max(-HALF_L + r, Math.min(HALF_L - r, p.x)); p.z = Math.max(-HALF_W + r, Math.min(HALF_W - r, p.z)); } function moveBaller(b: Baller, wishX: number, wishZ: number, speed: number, dt: number) { const wish = tmp.set(wishX, 0, wishZ); const wl = wish.length(); if (wl > 1) wish.multiplyScalar(1 / wl); const targetVx = wish.x * speed, targetVz = wish.z * speed; b.vel.x += (targetVx - b.vel.x) * Math.min(1, ACCEL * dt); b.vel.z += (targetVz - b.vel.z) * Math.min(1, ACCEL * dt); b.pos.x += b.vel.x * dt; b.pos.z += b.vel.z * dt; clampToCourt(b.pos, PLAYER_R); const sp = Math.hypot(b.vel.x, b.vel.z); if (sp > 0.3) { b.facing.set(b.vel.x, 0, b.vel.z).normalize(); b.stride += sp * dt * 2.2; } b.torso.scale.lerp(tmp2.set(1, 1, 1), Math.min(1, 8 * dt)); } function applyBallerVisual(b: Baller) { b.group.position.set(b.pos.x, 0, b.pos.z); b.group.rotation.y = Math.atan2(b.facing.x, b.facing.z); const sw = Math.sin(b.stride) * 0.5; b.legL.rotation.x = sw; b.legR.rotation.x = -sw; b.armL.rotation.x = -sw * 0.7; b.armR.rotation.x = sw * 0.7; } function isControlled(e: Baller): boolean { return e.isHuman || (matchCtx.online && net.mode === "host" && net.peerPresent && !net.fellBack && e.team === 1); } function updatePlay(dt: number) { const dp = diffParams(); for (const e of entities) { e.skillCd = Math.max(0, e.skillCd - dt); e.tackleCd = Math.max(0, e.tackleCd - dt); e.regainCd = Math.max(0, e.regainCd - dt); e.stumble = Math.max(0, e.stumble - dt); e.invuln = Math.max(0, e.invuln - dt); e.passCd = Math.max(0, e.passCd - dt); e.aiThinkT -= dt; } // online client: render the host's authoritative snapshot, send input if (matchCtx.online && net.mode === "client") { netSendInput(); netApplySnapshot(); for (const e of entities) applyBallerVisual(e); if (clock <= 0) { clock = 0; endMatch(); } return; } moveHuman(dt); if (matchCtx.online && net.mode === "host" && net.peerPresent && !net.fellBack) moveRemote(dt); else if (matchCtx.online && net.mode === "host") { net.waitTimer += dt; if (!net.peerPresent && net.waitTimer > 10 && !net.fellBack) { net.fellBack = true; toast("No opponent yet. Playing vs AI."); } } for (const e of entities) { if (isControlled(e)) continue; updateEntityAI(e, dt, dp); } updatePossession(dt, dp); updateBall(dt); checkGoals(); clock -= dt; if (clock <= 0) { clock = 0; endMatch(); return; } for (const e of entities) applyBallerVisual(e); if (matchCtx.online && net.mode === "host") { net.sendAcc += dt; if (net.sendAcc >= 1 / 15) { net.sendAcc = 0; netBroadcastSnapshot(); } } } function moveHuman(dt: number) { if (!human) return; let sp = BASE_SPEED; const wantSprint = input.sprint && human.stamina > 1 && input.move.lengthSq() > 0.01; if (wantSprint) { sp = SPRINT_SPEED; human.stamina -= STAMINA_DRAIN * dt; } else human.stamina = Math.min(STAMINA_MAX, human.stamina + STAMINA_REGEN * dt); human.stamina = Math.max(0, human.stamina); if (possessor === human) sp *= 0.92; moveBaller(human, input.move.x, input.move.y, sp, dt); if (input.skill) doSkill(); if (input.nutmeg) tryNutmeg(); if (input.pass) doPass(); if (input.shootRelease) doShot(input.releasePower); } function moveRemote(dt: number) { const rem = entities.find((e) => e.team === 1); if (!rem) return; const sp = (possessor === rem ? BASE_SPEED * 0.92 : BASE_SPEED); moveBaller(rem, net.remoteInput.mx, net.remoteInput.my, sp, dt); if (net.remoteInput.shoot) { net.remoteInput.shoot = false; if (possessor === rem) { const gx = attackGoalX(1); tmp.set(gx, 0, 0).sub(rem.pos).setY(0).normalize(); const pw = clampNum(net.remoteInput.shootPow, SHOT_MIN, SHOT_MAX); ball.vel.set(tmp.x * pw, 0, tmp.z * pw); ball.pos.y = BALL_R; possessor = null; rem.regainCd = 0.3; audio.kick(pw / SHOT_MAX); } } } function mostDangerousOpponent(e: Baller): Baller | null { const ownGoalX = -attackGoalX(e.team); let best: Baller | null = null, bd = Infinity; for (const o of entities) { if (o.team === e.team || o === possessor) continue; const d = Math.abs(o.pos.x - ownGoalX); if (d < bd) { bd = d; best = o; } } return best; } function updateEntityAI(e: Baller, dt: number, dp: ReturnType) { if (e.stumble > 0) { e.vel.x *= 0.85; e.vel.z *= 0.85; e.pos.x += e.vel.x * dt; e.pos.z += e.vel.z * dt; clampToCourt(e.pos, PLAYER_R); return; } if (possessor === e) carrierAI(e, dt, dp); else if (possessor && possessor.team === e.team) offBallAI(e, dt, dp); else defenseAI(e, dt, dp); } function carrierAI(e: Baller, dt: number, dp: ReturnType) { const gx = attackGoalX(e.team); const toGoal = tmp.set(gx, 0, 0).sub(e.pos); toGoal.y = 0; const gd = toGoal.length(); toGoal.normalize(); const opp = nearestOpponent(e); const pressure = opp ? e.pos.distanceTo(opp.pos) : 99; if (matchCtx.teamSize > 1 && pressure < dp.pressDist && e.passCd <= 0) { const dir = attackDir(e.team); let best: Baller | null = null, bs = -1e9; for (const m of teamMates(e)) { const fwd = dir * (m.pos.x - e.pos.x); if (fwd < -0.5) continue; const open = nearestOppDist(m); const sc = fwd * 1.0 + open * 1.1; if (sc > bs) { bs = sc; best = m; } } if (best && bs > 1.5) { tmp2.copy(best.pos).addScaledVector(best.vel, 0.3).sub(e.pos); tmp2.y = 0; const d = tmp2.length(); tmp2.normalize(); const pw = clampNum(d * 2.2 + 4, SHOT_MIN, SHOT_MAX); ball.vel.set(tmp2.x * pw, 0, tmp2.z * pw); ball.pos.y = BALL_R; possessor = null; e.regainCd = 0.35; best.regainCd = 0; e.passCd = 0.9; audio.zip(); burst(ball.pos.x, 0.3, ball.pos.z, 5, new THREE.Color(teamColor(e.team)), 2.2, 0.3); return; } } if (gd < dp.shootRange && Math.abs(e.pos.z) < GOAL_HALF_W + 1.3 && e.aiThinkT <= 0) { const aim = tmp2.set(gx, 0, (Math.random() - 0.5) * GOAL_HALF_W * 1.4).sub(e.pos).setY(0).normalize(); const acc = dp.accuracy; aim.x += (Math.random() - 0.5) * (1 - acc) * 0.6; aim.z += (Math.random() - 0.5) * (1 - acc) * 0.6; aim.normalize(); const pw = SHOT_MIN + (SHOT_MAX - SHOT_MIN) * (0.6 + Math.random() * 0.4); ball.vel.set(aim.x * pw, 0, aim.z * pw); ball.pos.y = BALL_R; possessor = null; e.regainCd = 0.3; audio.kick(pw / SHOT_MAX); e.aiThinkT = 0.6; return; } if (opp) { const away = tmp2.copy(e.pos).sub(opp.pos).setY(0); if (away.length() < 1.6) toGoal.add(away.normalize().multiplyScalar(0.6)).normalize(); } moveBaller(e, toGoal.x, toGoal.z, BASE_SPEED * dp.speed * 0.96, dt); } function offBallAI(e: Baller, dt: number, dp: ReturnType) { const dir = attackDir(e.team); const carrier = possessor!; const tx = clampNum(carrier.pos.x + dir * 3.0, -HALF_L + 1, HALF_L - 1); const tz = clampNum(e.laneZ, -HALF_W + 1, HALF_W - 1); tmp.set(tx - e.pos.x, 0, tz - e.pos.z); for (const m of teamMates(e)) { if (e.pos.distanceTo(m.pos) < 1.7) tmp.add(tmp3.copy(e.pos).sub(m.pos).setY(0).normalize().multiplyScalar(1.1)); } moveBaller(e, tmp.x, tmp.z, BASE_SPEED * dp.speed * 0.95, dt); } function defenseAI(e: Baller, dt: number, dp: ReturnType) { const carrier = (possessor && possessor.team !== e.team) ? possessor : null; if (!carrier) { if (isClosestOfTeamTo(e, ball.pos)) { moveBaller(e, ball.pos.x - e.pos.x, ball.pos.z - e.pos.z, BASE_SPEED * dp.speed * 1.02, dt); } else { moveBaller(e, ball.pos.x - e.pos.x, e.laneZ - e.pos.z, BASE_SPEED * dp.speed * 0.8, dt); } return; } const ownGoalX = -attackGoalX(e.team); if (isClosestOfTeamTo(e, carrier.pos)) { tmp.set(ownGoalX, 0, carrier.pos.z).sub(carrier.pos).setY(0); if (tmp.lengthSq() > 0.0001) tmp.normalize().multiplyScalar(0.6); else tmp.set(0, 0, 0); moveBaller(e, carrier.pos.x + tmp.x - e.pos.x, carrier.pos.z + tmp.z - e.pos.z, BASE_SPEED * dp.speed * 1.05, dt); } else if (isDeepCover(e)) { const tz = clampNum(carrier.pos.z * 0.5, -GOAL_HALF_W - 0.6, GOAL_HALF_W + 0.6); moveBaller(e, ownGoalX * 0.6 - e.pos.x, tz - e.pos.z, BASE_SPEED * dp.speed * 0.85, dt); } else { const mark = mostDangerousOpponent(e); if (mark) moveBaller(e, mark.pos.x + ownGoalX * 0.12 - e.pos.x, mark.pos.z - e.pos.z, BASE_SPEED * dp.speed * 0.95, dt); else moveBaller(e, carrier.pos.x - e.pos.x, e.laneZ - e.pos.z, BASE_SPEED * dp.speed * 0.9, dt); } } function updatePossession(dt: number, dp: ReturnType) { const bs = Math.hypot(ball.vel.x, ball.vel.z); if (possessor === null && bs < 9) { let best: Baller | null = null, bd = POSS_RADIUS; for (const e of entities) { if (e.regainCd > 0) continue; const d = Math.hypot(e.pos.x - ball.pos.x, e.pos.z - ball.pos.z); if (d < bd) { bd = d; best = e; } } if (best) possessor = best; } if (possessor) { const carrier = possessor; for (const e of entities) { if (e.team === carrier.team) continue; const d = e.pos.distanceTo(carrier.pos); if (d < STEAL_RADIUS && e.tackleCd <= 0) { if (carrier.isHuman && carrier.invuln > 0) continue; e.tackleCd = STEAL_COOLDOWN; let chance: number; if (e.isHuman) { chance = (e.skillCd > SKILL_COOLDOWN - 0.3) ? 0.9 : 0.4; if (carrier.stumble > 0) chance = 0.95; } else { chance = dp.tackle; if (carrier.stumble > 0) chance = Math.min(1, dp.tackle + 0.4); } if (Math.random() < chance) { possessor = e; carrier.regainCd = 0.4; audio.thud(); burst(ball.pos.x, 0.3, ball.pos.z, 8, new THREE.Color(teamColor(e.team)), 2.6, 0.4); break; } } } } if (possessor) { tmp.copy(possessor.facing).setY(0); if (tmp.lengthSq() < 0.01) tmp.set(attackDir(possessor.team), 0, 0); tmp.normalize(); const want = tmp2.copy(possessor.pos).addScaledVector(tmp, POSS_OFFSET); want.y = BALL_R; ball.pos.lerp(want, Math.min(1, 12 * dt)); ball.vel.multiplyScalar(0.6); ball.spin.set(possessor.vel.z, 0, -possessor.vel.x); } } let wallFxCd = 0; function updateBall(dt: number) { if (possessor) return; ball.pos.x += ball.vel.x * dt; ball.pos.z += ball.vel.z * dt; ball.pos.y = BALL_R; const damp = Math.max(0, 1 - BALL_FRICTION * dt / Math.max(1, Math.hypot(ball.vel.x, ball.vel.z) * 0.12 + 1)); ball.vel.multiplyScalar(damp); if (ball.vel.lengthSq() < 0.02) ball.vel.set(0, 0, 0); if (ball.pos.z > HALF_W - BALL_R) { ball.pos.z = HALF_W - BALL_R; ball.vel.z *= -WALL_BOUNCE; wallFx(); } if (ball.pos.z < -HALF_W + BALL_R) { ball.pos.z = -HALF_W + BALL_R; ball.vel.z *= -WALL_BOUNCE; wallFx(); } for (const sx of [1, -1]) { const line = sx * (HALF_L - BALL_R); if (sx === 1 ? ball.pos.x > line : ball.pos.x < line) { if (Math.abs(ball.pos.z) > GOAL_HALF_W) { ball.pos.x = line; ball.vel.x *= -WALL_BOUNCE; wallFx(); } } } ball.spin.set(ball.vel.z, 0, -ball.vel.x); } function wallFx() { if (wallFxCd > 0) return; wallFxCd = 0.12; audio.thud(); burst(ball.pos.x, ball.pos.y, ball.pos.z, 5, new THREE.Color(0x39d6c8), 2, 0.3); } function checkGoals() { if (state !== "play") return; if (ball.pos.x > GOAL_X && Math.abs(ball.pos.z) < GOAL_HALF_W && ball.pos.y < GOAL_H) scoreGoal(0); else if (ball.pos.x < -GOAL_X && Math.abs(ball.pos.z) < GOAL_HALF_W && ball.pos.y < GOAL_H) scoreGoal(1); } // ═══════════════════════════ CUTSCENE ═══════════════════════════ function updateCutscene(dt: number) { cutTimer -= dt; updateBall(dt); for (const e of entities) applyBallerVisual(e); if (cutTimer <= 0) { timeScale = 1; if (pannaWin) { endMatch(); return; } if (userScore >= 99 || aiScore >= 99) { endMatch(); return; } placeKickoff(); state = "play"; audio.whistle(); } } // ═══════════════════════════ CAMERA ═══════════════════════════ // Low, behind-and-above street-level follow. The human always attacks +X, so the // camera sits back along -X and looks UP the court toward the attacked goal, giving // a clear depth read on a phone. Height is kept well under the pull-back distance // (shallow ~27 deg tilt) so it reads 3D, not top-down. Fixed direction (never // yaws with facing) to stay stable and avoid motion sickness. const camOffset = new THREE.Vector3(-9.2, 4.6, 0); function updateCamera(dt: number) { if ((state === "play" || state === "cutscene") && human) { const ts = matchCtx.teamSize; if (ts > 1) camOffset.set(-11.2, 5.9, 0); else camOffset.set(-9.2, 4.6, 0); if (ts > 1) { camTarget.set(human.pos.x * 0.4 + ball.pos.x * 0.6, 0, human.pos.z * 0.45 + ball.pos.z * 0.55); } else { camTarget.set(human.pos.x * 0.55 + ball.pos.x * 0.45, 0, human.pos.z * 0.5 + ball.pos.z * 0.5); } // sprint feel: smooth 0..1, pull back + dip a touch and punch the FOV const sprinting = state === "play" && input.sprint && human.stamina > 1 && input.move.lengthSq() > 0.01; camSprint += ((sprinting ? 1 : 0) - camSprint) * Math.min(1, 4 * dt); camOffset.x -= camSprint * 0.75; camOffset.y -= camSprint * 0.4; const desired = tmp.copy(camTarget).add(camOffset); camera.position.lerp(desired, Math.min(1, 3.2 * dt)); // look UP the court (bias toward +X goal) and slightly above the floor for depth camLook.lerp(tmp2.set(camTarget.x + 2.4, 0.85, camTarget.z), Math.min(1, 4 * dt)); if (shake > 0) { shake = Math.max(0, shake - dt * 2.2); const s = shake * 0.5; camera.position.x += (Math.random() - 0.5) * s; camera.position.y += (Math.random() - 0.5) * s; } const fov = baseFov + camSprint * 5; if (Math.abs(camera.fov - fov) > 0.02) { camera.fov = fov; camera.updateProjectionMatrix(); } camera.lookAt(camLook); } else { if (camSprint !== 0) { camSprint = 0; if (Math.abs(camera.fov - baseFov) > 0.02) { camera.fov = baseFov; camera.updateProjectionMatrix(); } } camera.position.lerp(MENU_CAM, Math.min(1, 2 * dt)); camLook.lerp(tmp.set(0, 0.6, 0), Math.min(1, 2 * dt)); camera.lookAt(camLook); } } function updateTrail() { trailHist.unshift(ball.pos.clone()); if (trailHist.length > TRAIL_N) trailHist.pop(); for (let i = 0; i < TRAIL_N; i++) { const p = trailHist[Math.min(i, trailHist.length - 1)] || ball.pos; trailPositions[i * 3] = p.x; trailPositions[i * 3 + 1] = p.y; trailPositions[i * 3 + 2] = p.z; } trailGeo.attributes.position.needsUpdate = true; const bs = Math.hypot(ball.vel.x, ball.vel.z); (trail.material as THREE.LineBasicMaterial).opacity = possessor ? 0.12 : Math.min(0.6, bs * 0.06); } function updatePreview(dt: number) { previewTurn += dt * 0.6; turntable.rotation.y = previewTurn; const glow = platGlow.material as THREE.MeshBasicMaterial; glow.color.setHex(KIT_COLORS[draftConfig.kitPrimary] ?? COL_USER); } // ═══════════════════════════ HUD ═══════════════════════════ function updateHUD() { youScoreEl.textContent = String(userScore); aiScoreEl.textContent = String(aiScore); const m = Math.floor(clock / 60), s = Math.floor(clock % 60); clockEl.textContent = m + ":" + (s < 10 ? "0" + s : s); clockEl.style.color = clock <= 10 && state === "play" ? "#f0a63a" : "#e7ecef"; const st = human ? human.stamina : STAMINA_MAX; staminaFill.style.width = Math.max(0, st) + "%"; staminaFill.style.background = st < 25 ? "linear-gradient(90deg,#b45309,#f0a63a)" : "linear-gradient(90deg,#2fd4c4,#7ef0e4)"; if (input.charging) { const held = performance.now() - spaceDownAt; const c = held < TAP_MS ? 0 : Math.min(1, ((held - TAP_MS) / 1000) * CHARGE_RATE); chargeRing.style.background = "conic-gradient(#7ef0e4 " + (c * 360) + "deg, rgba(255,255,255,0.08) 0deg)"; } else { chargeRing.style.background = "transparent"; } if (flashTimer > 0) { flashTimer -= 1 / 60; if (flashTimer <= 0) { flash.style.opacity = "0"; flash.style.transform = "translate(-50%,-50%) scale(0.6)"; } } if (toastTimer > 0) { toastTimer -= 1 / 60; if (toastTimer <= 0) { toastEl.style.opacity = "0"; toastEl.style.transform = "translateX(-50%) translateY(8px)"; } } } // ═══════════════════════════ MAIN UPDATE + LOOP ═══════════════════════════ function update(dt: number) { dt = Math.min(dt, 0.05); const sdt = dt * timeScale; wallFxCd = Math.max(0, wallFxCd - dt); if (state === "play") updatePlay(sdt); else if (state === "cutscene") updateCutscene(sdt); else if (state === "customizer") updatePreview(dt); updateParts(dt); if (entities.length > 0) { updateTrail(); ballMesh.position.copy(ball.pos); ballMesh.rotation.x += ball.spin.x * dt * 0.5; ballMesh.rotation.z += ball.spin.z * dt * 0.5; } updateCamera(dt); updateHUD(); const ctrl = (matchCtx.online && net.mode === "client") ? entities.find((e) => e.team === 1) : human; const mp = (globalThis as unknown as { MCPityPlayer?: { x: number; y: number; z: number } }); mp.MCPityPlayer = ctrl ? { x: ctrl.pos.x, y: 0, z: ctrl.pos.z } : { x: 0, y: 0, z: 0 }; } function render() { if (state === "customizer") renderer.render(previewScene, previewCam); else renderer.render(scene, camera); } let last = performance.now(); let acc = 0; const FIXED = 1 / 60; function frame(now: number) { const dt = (now - last) / 1000; last = now; acc += dt; pollKeys(); let steps = 0; while (acc >= FIXED && steps < 5) { update(FIXED); acc -= FIXED; steps++; } if (steps === 0) update(dt); render(); requestAnimationFrame(frame); } // ═══════════════════════════ HEADLESS + TEST HOOKS ═══════════════════════════ // state() values: "menu" | "submenu" | "customizer" | "career" | "invite" | // "play" | "cutscene" | "over" (globalThis as unknown as { __cage: unknown }).__cage = { step: (ms: number) => { pollKeys(); update(Math.min(ms, 50) / 1000); render(); }, // advance the sim WITHOUT rendering (fast headless drains); step() still renders tick: (ms: number) => { pollKeys(); update(Math.min(ms, 50) / 1000); }, state: () => state, setMode: (m: string) => { if (m === "play") startMatch("1v1"); else if (m === "3v3") startMatch("3v3"); else if (["menu", "submenu", "customizer", "career", "invite"].includes(m)) setState(m as State); }, test: { openCustomizer: () => setState("customizer"), start1v1: () => startMatch("1v1"), start3v3: () => startMatch("3v3"), startCareer: () => startCareerStop(), openCareer: () => setState("career"), openInvite: () => setState("invite"), toMenu: () => setState("menu"), randomizeAvatar: () => { if (state !== "customizer") setState("customizer"); randomizeDraft(); }, saveAvatar: () => commitDraft(), }, }; function unlock() { audio.init(); audio.resume(); } globalThis.addEventListener("pointerdown", unlock, { once: false }); // ═══════════════════════════ BOOT ═══════════════════════════ sizeRenderer(); updatePlayingAs(); refreshDiff(); setState("menu"); camera.position.copy(MENU_CAM); camLook.set(0, 0.6, 0); void preloadAssets(); // fills hero caches from an injected store pack; no-op on /play requestAnimationFrame(frame); try { (globalThis.parent as Window).postMessage({ type: "mcpity:web-engine:ready" }, "*"); } catch { /* ignore */ }