// Sonaria UI — full-window osu!-style song select when idle, HUD when running. const CASTLE_BG = "/cdn/fantasy-crystal-castle-cosmic-landscape-ggrymwb.webp"; const TRACKS = [ { id: "tutorial", title: "Tutorial", artist: "SONARIA VA", mapper: "ress", bpm: 90, length: "1:15", cover: "/cdn/fantasy-celestial-concert-stage-wallpaper-kisudhrd.webp", bg: "/cdn/fantasy-celestial-concert-stage-wallpaper-kisudhrd.webp", music: "/cdn/moodboard-mainstage/music-vocals-tutorial-sonaria-celestial-90bpm-anime-orchestral-female-vocalise-wordless-ah-harp-crystal-bells-soft-synth-pad-strings-opening-cue-yuki-kajiura-shimmering-ethereal-short-1min15s.mp3", previewGain: 0.75, difficulties: [ { id: "normal", name: "Tutorial", stars: 1, locked: false }, ] }, { id: "vessel-of-dawn", title: "Vessel of Dawn", artist: "AILA", mapper: "ress", bpm: 88, length: "3:15", cover: "/cdn/fantasy-warriors-riding-wyvern-sky-islands-pco0fmus.webp", bg: "/cdn/fantasy-warriors-riding-wyvern-sky-islands-pco0fmus.webp", music: "/cdn/moodboard-mainstage/music-vocals-orchestral-anime-cinematic-epic-female-vocal-88bpm-soaring-strings-choir-emotional-sawano-aimer.mp3", previewGain: 0.7, difficulties: [ { id: "hard", name: "Hard", stars: 5, locked: false }, { id: "normal", name: "Easy", stars: 2, locked: false }, ] }, { id: "crystal-ascent", title: "Crystal Ascent", artist: "SONARIA VA", mapper: "ress", bpm: 174, length: "1:50", cover: "/cdn/anime-girl-rooftop-garden-dance-gswwaxjq.webp", bg: "/cdn/anime-girl-rooftop-garden-dance-gswwaxjq.webp", music: "/cdn/moodboard-mainstage/music-vocals-anime-opening-174bpm-energetic-female-vocal-uplifting-jpop.mp3", previewGain: 0.4, difficulties: [ { id: "expert", name: "EXPERT", stars: 7, locked: false }, { id: "normal", name: "Normal", stars: 3, locked: false }, ] }, { id: "vesper", title: "Vesper", artist: "SONARIA VA", mapper: "ress", bpm: 70, length: "3:00", cover: "/cdn/anime-purple-moon-princess-character-art-beceetx.webp", bg: "/cdn/anime-purple-moon-princess-character-art-beceetx.webp", music: "/cdn/moodboard-mainstage/music-vocals-piano-ballad-70bpm-intimate-female-vocal-yearning-moonlit-aimer-kenshi-yonezu-style.mp3", previewGain: 0.45, difficulties: [ { id: "hard", name: "Hard", stars: 4.5, locked: false }, { id: "normal", name: "Easy", stars: 2.5, locked: false }, ] }, { id: "where-the-roots-sing", title: "Where the Roots Sing", artist: "SONARIA VA", mapper: "ress", bpm: 100, length: "3:30", cover: "/cdn/fantasy-anime-adventurer-party-magical-forest-niaxy-yp.webp", bg: "/cdn/fantasy-anime-adventurer-party-magical-forest-niaxy-yp.webp", music: "/cdn/moodboard-mainstage/music-vocals-where-the-roots-sing-100bpm-harp-led-anime-fantasy-celtic-ethereal-kalafina-yuki-kajiura-female-vocal-soaring-strings-frame-drum-cello-drone-bardic-adventure.mp3", previewGain: 0.7, difficulties: [ { id: "normal", name: "Normal", stars: 3, locked: false }, ] }, { id: "hoshi-no-iro", title: "Hoshi no Iro", artist: "SONARIA VA", mapper: "ress", bpm: 160, length: "2:30", cover: "/cdn/anime-girl-headphones-cozy-room-portrait-5inz27l4.webp", bg: "/cdn/anime-girl-headphones-cozy-room-portrait-5inz27l4.webp", music: "/cdn/moodboard-mainstage/music-vocals-hoshi-no-iro-160bpm-kawaii-anime-jpop-japanese-lyrics-female-high-pitched-energetic-heart-melting-claris-halca-aira-yuhki-bedroom-pop-twinkly-synth-bells-bright-snappy-hihat-cozy-anime-ending-theme-slice-of-life-bittersweet-warm-tender-2min30s.mp3", previewGain: 0.7, difficulties: [ { id: "normal", name: "Normal", stars: 4, locked: false }, ] }, { id: "karasu", title: "Karasu", artist: "SONARIA VA", mapper: "ress", bpm: 176, length: "3:30", cover: "/cdn/character-dark-knight-gothic-battlefield-scene-b0zr2rdu.webp", bg: "/cdn/character-dark-knight-gothic-battlefield-scene-b0zr2rdu.webp", music: "/cdn/moodboard-mainstage/music-vocals-karasu-176bpm-japanese-rock-anthem-jrock-japanese-male-vocals-driving-distorted-guitars-double-kick-drums-defiant-anthemic-chorus-dark-gothic-fantasy-anime-opening-man-with-a-mission-coldrain-my-first-story-aimer-harder-cuts-3min30s.mp3", previewGain: 0.75, difficulties: [ { id: "normal", name: "Hard", stars: 5, locked: false }, ] }, { id: "mizukagami", title: "Mizukagami", artist: "SONARIA VA", mapper: "ress", bpm: 68, length: "3:15", cover: "/cdn/artwork-underwater-fantasy-anime-dancers-scene-vhh5carc.webp", bg: "/cdn/artwork-underwater-fantasy-anime-dancers-scene-vhh5carc.webp", music: "/cdn/moodboard-mainstage/music-vocals-mizukagami-68bpm-nier-automata-keiichi-okabe-monaca-orchestral-epic-ethereal-female-soprano-wordless-vocalise-chaos-language-soaring-strings-choir-swell-timpani-harp-piano-bell-tree-aquatic-underwater-mournful-emiko-evans-weight-of-the-world-3min15s.mp3", previewGain: 0.75, difficulties: [ { id: "normal", name: "Normal", stars: 3, locked: false }, ] }, ]; function diffColor(name) { const d = (name || "").toLowerCase(); if (d === "expert") return "#f43f5e"; if (d === "insane") return "#a855f7"; if (d === "hard") return "#f59e0b"; if (d === "normal") return "#67e8f9"; if (d === "easy") return "#10b981"; return "#94a3b8"; } function diffRow(track, d, isPicked) { const c = diffColor(d.name); return `

${d.name}${d.locked ? ' · 🔒' : ''}

${"★".repeat(Math.floor(d.stars))}${(d.stars % 1) >= 0.5 ? `★` : ""}${"★".repeat(Math.max(0, 7 - Math.ceil(d.stars)))}

${track.bpm} bpm · ${track.length}

`; } function songCard(s, isSelected, distance, selectedDiffId) { // osu fan-out: selected items slide left, neighbors curve back const offsetX = isSelected ? -90 : -Math.round(50 * Math.exp(-distance * 0.55)); const scale = isSelected ? 1.06 : 1 - Math.min(0.08, distance * 0.018); const c = diffColor(s.difficulties[0].name); // Difficulties always render ascending by star count — Easy → Expert. const sortedDiffs = [...s.difficulties].sort((a, b) => a.stars - b.stars); const diffRows = isSelected ? sortedDiffs.map(d => diffRow(s, d, d.id === selectedDiffId)).join("") : ""; return `

${s.title}

${s.artist}

${s.difficulties.length} ${s.difficulties.length > 1 ? "difficulties" : "difficulty"}

${diffRows}

`; } // Background layer — one per track, opacity transitions create crossfade. // Wrapped in a sway container so the image drifts/breathes like turbulence. function bgLayer(t, isSel) { return `

`; } const BG_SWAY_STYLES = ` `; // Personal high scores — stored per-browser in real localStorage. The ui // sandbox's `window` is a shim and writes/reads from it never hit the // real browser store. Instead we route through inline `onerror` attribute // handlers that evaluate in the real browser, and dispatch the data back // into manager state via sendAction. See `lb:loaded`/`lb:persisted` // handlers in scripts/dj-input.js. function __escAttr(s) { return String(s).replace(/&/g, "&").replace(/'/g, "'").replace(/"/g, """); } // Loader: read localStorage for the selected track once per session and // push the array into manager state via sendAction. function lbLoaderTag(trackKey) { if (!trackKey) return ""; const tkSafe = __escAttr(trackKey); return ` `; } // Persister: when a fresh lastCompletedRun shows up, write it to real // localStorage and push the merged board back into manager state. function lbPersistTag(lr) { if (!lr || !lr.id || !lr.trackKey || !lr.entry) return ""; const tkSafe = __escAttr(lr.trackKey); const idSafe = __escAttr(lr.id); const entrySafe = __escAttr(JSON.stringify(lr.entry)); return ` `; } function leaderboardPanel(sel, selDiffId, ms) { const trackKey = selDiffId ? `${sel.id}::${selDiffId}` : null; const loaded = trackKey ? !!(ms.lbLoaded && ms.lbLoaded[trackKey]) : false; const board = trackKey && loaded ? (ms.leaderboards?.[trackKey] || []) : null; const needsLoader = !!(trackKey && !loaded); const diffName = selDiffId ? (sel.difficulties.find(d => d.id === selDiffId)?.name || "—") : "—"; const rankColor = (rank) => { if (rank === "S") return "#fde047"; if (rank === "A") return "#86efac"; if (rank === "B") return "#67e8f9"; if (rank === "C") return "#c084fc"; if (rank === "D") return "#f97316"; return "#94a3b8"; }; const rows = (board || []).slice(0, 5).map((e, i) => { const placeBg = i === 0 ? "linear-gradient(135deg, #fbbf24, #d97706)" : i === 1 ? "linear-gradient(135deg, #e5e7eb, #94a3b8)" : i === 2 ? "linear-gradient(135deg, #fb923c, #b45309)" : "rgba(255,255,255,0.08)"; const placeColor = i < 3 ? "#0a0010" : "rgba(255,255,255,0.65)"; const rc = rankColor(e.rank); return `

${i + 1}

${(e.score || 0).toLocaleString()}

${e.rank || "—"}

`; }).join(""); const empty = !board || board.length === 0; const body = empty ? `

no run yet

` : `

${rows}

`; return `

★

personal runs

${diffName}

${body}

${needsLoader ? lbLoaderTag(trackKey) : ""}

`; } function songSelectMenu(localPlayer, ms) { const ps = localPlayer.state || {}; const selId = ps.selectedTrackId || TRACKS[0].id; const selDiffId = ps.selectedDifficultyId || null; const selIdx = Math.max(0, TRACKS.findIndex(t => t.id === selId)); const sel = TRACKS[selIdx] || TRACKS[0]; const pickedDiff = selDiffId ? sel.difficulties.find(d => d.id === selDiffId) : null; const canPlay = !!(pickedDiff && !pickedDiff.locked); const cards = TRACKS.map((t, i) => songCard(t, t.id === sel.id, Math.abs(i - selIdx), selDiffId)).join(""); const bgLayers = TRACKS.map(t => bgLayer(t, t.id === sel.id)).join(""); return `

      ${BG_SWAY_STYLES}

      ${bgLayers}

now selected

                ${sel.title}
              
                ${sel.artist}
              
              mapped by ${sel.mapper}  ·  ${sel.bpm} bpm  ·  ${sel.length}
            
          ${cards}
        
      ${leaderboardPanel(sel, selDiffId, ms || {})}

        ${canPlay ? '' : `
          
            ${pickedDiff ? 'difficulty locked' : 'pick a difficulty first'}
          
        `}

`; } function nowPlayingCard(ms) { const key = ms.activeKey || ""; const [trackId, diffId] = key.split("::"); const track = TRACKS.find(t => t.id === trackId); if (!track) return ""; const diff = diffId ? track.difficulties.find(d => d.id === diffId) : null; const diffName = diff ? diff.name : ""; const stars = diff ? diff.stars : 0; const cover = track.cover || ""; // Difficulty color tier — match the song-select chips. const diffColor = stars >= 6 ? "rgb(253,224,71)" : stars >= 4 ? "rgb(240,171,252)" : stars >= 3 ? "rgb(167,139,250)" : "rgb(125,211,252)"; const starsRow = "★".repeat(Math.round(stars)); return `

          ★ now playing
        
          ${track.title}
        
          ${track.artist}
          ·
          
            ${diffName}
          
            ${starsRow}

`; } // ===== RIVALRY CARD ===== // Left-side dueling scoreboard: your personal best for this map vs your // current run. Two rows; whichever score is higher floats to the top. When // you surpass your best, the YOU row gets a winner glow and a tiny badge. function rivalryCard(ps, ms) { const key = ms.activeKey || ""; if (!key) return ""; const board = (ms.leaderboards && ms.leaderboards[key]) || []; const bestEntry = board[0] || null; const best = bestEntry ? (bestEntry.score || 0) : 0; const cur = ps.score || 0; const ahead = cur > best; const diff = ahead ? cur - best : best - cur; const noBest = !bestEntry; // Each row is a small chip. Order via flex `order` so the leader is on top // — when they swap, the transition feels like a flip without us writing // animation glue. const youRow = `

you ${ahead ? ` ★ ahead ` : ''}

${cur.toLocaleString()}

`; const bestRow = `

best

${noBest ? '—' : best.toLocaleString()}

`; // Gap line between rows — shows the chase distance, or +X when ahead. const gapLabel = noBest ? 'no run yet' : (ahead ? `+${diff.toLocaleString()} ahead` : `${diff.toLocaleString()} to beat`); const gapColor = noBest ? 'rgba(255,255,255,0.35)' : (ahead ? 'rgb(253,224,251)' : 'rgba(240,171,252,0.85)'); return `

      ${bestRow}
      ${youRow}
      
        ${gapLabel}
      

`; } function hud(localPlayer, ms) { const ps = localPlayer.state || {}; const trackTime = ms.trackTime || 0; const beat = ms.beat || 0; const bar = Math.floor(beat / 4); const beatInBar = beat % 4; const hits = ps.hits || 0; const misses = ps.misses || 0; const total = hits + misses; const acc = total > 0 ? (hits / total) * 100 : 0; const score = ps.score || 0; const combo = ps.combo || 0; const maxCombo = ps.maxCombo || 0; const lastResult = ps.lastResult || "—"; const lastLane = ps.lastLane != null ? ["L", "M", "R"][ps.lastLane] : "—"; const lastOffset = ps.lastOffsetMs != null ? (ps.lastOffsetMs > 0 ? "+" + ps.lastOffsetMs : "" + ps.lastOffsetMs) + "ms" : "—"; const resultColor = lastResult === "perfect" ? "#fde047" : lastResult === "good" ? "#67e8f9" : lastResult === "ok" ? "#a78bfa" : lastResult === "early" ? "#f97316" : lastResult === "empty" ? "#64748b" : "#94a3b8"; const comboGlow = Math.min(1, combo / 50); const comboColor = combo >= 100 ? "#fde047" : combo >= 50 ? "#f0abfc" : combo >= 20 ? "#67e8f9" : "#ffffff"; const formattedScore = score.toLocaleString(); const beatPhase = (trackTime % (60 / 174)) / (60 / 174); const pulse = beatPhase < 0.15 ? 1 - beatPhase / 0.15 : 0; const beatDots = [0,1,2,3].map(i => `

`).join(''); const comboBlock = combo > 0 ? `

combo

×${combo}

` : ''; return `

      ${nowPlayingCard(ms || {})}

      ${tutorialCoach(ms || {})}

      ${progressBar(trackTime, (ms && ms.trackEnd) || 0)}

      ${rivalryCard(ps, ms)}

      score
${formattedScore}
acc ${acc.toFixed(2)}%

        ${comboBlock}
      
      ${laneFxLayer(ps, ms)}
      ${lanePads(ps, ms)}

      ${ps.settingsOpen ? pauseMenuOverlay() : ""}

`; } // ===== TRACK PROGRESS BAR ===== // ===== TUTORIAL COACH ===== // Step-by-step guide that only appears for the tutorial track. Timed // against trackTime (0 = drop). Each step fades in/out so steps never // hard-cut. Chart timing for the tutorial: // beat 4–19 ≈ t 3.87–13.87 — single-lane taps (learn J/K/L) // beat 20–39 ≈ t 14.5–27.2 — alternations // beat 40–55 ≈ t 27.9–37.9 — first hold // beat 56–67 ≈ t 38.5–45.9 — first dual // beat 68–95 ≈ t 46.5–64.5 — first triple, build // beat 96–99 ≈ t 65.3–67.3 — final breath function tutorialCoach(ms) { if (!ms || ms.activeKey !== "tutorial::normal") return ""; const t = ms.trackTime; if (typeof t !== "number") return ""; // Each line's window in trackTime seconds. Negative = pre-drop grace. const LINES = [ { s: -7, e: 2.5, t1: "Welcome to Sonaria.", t2: "Hit the notes as they reach the deck." }, { s: 2.5, e: 13.5, t1: "Tap J, K, L when notes land.", t2: "Left · Middle · Right" }, { s: 13.5, e: 26.5, t1: "Keep the rhythm.", t2: "Both hands. No rush." }, { s: 26.5, e: 37.5, t1: "Hold long notes.", t2: "Release when the tail crosses the line." }, { s: 37.5, e: 45.5, t1: "Two lanes at once.", t2: "Press both keys together." }, { s: 45.5, e: 64, t1: "All three — a chord.", t2: "Triples land hardest." }, { s: 64, e: 80, t1: "Let it ring.", t2: "You're ready." }, ]; let cur = null; for (const L of LINES) { if (t >= L.s && t < L.e) { cur = L; break; } } if (!cur) return ""; // Fade in over first 0.4s, fade out over last 0.5s. const into = t - cur.s; const left = cur.e - t; let alpha = 1; if (into < 0.4) alpha = into / 0.4; if (left < 0.5) alpha = Math.min(alpha, left / 0.5); alpha = Math.max(0, Math.min(1, alpha)); // Float up slightly as it fades in (subtle entrance). const lift = into < 0.4 ? (1 - into / 0.4) * 8 : 0; return `

${cur.t1}

${cur.t2 ? `

${cur.t2}

` : ""}

`; } // Thin pearl→fuchsia→violet bar pinned to the bottom of the screen. // trackTime can go negative during the grace cheer, so we clamp 0..1. function progressBar(trackTime, trackEnd) { const total = Math.max(1, Number(trackEnd) || 0); const cur = Math.max(0, Number(trackTime) || 0); const pct = Math.min(1, cur / total) * 100; const elapsed = formatMMSS(cur); const remaining = formatMMSS(Math.max(0, total - cur)); return `

${elapsed}
-${remaining}

`; } function formatMMSS(sec) { const s = Math.max(0, Math.floor(sec)); const m = Math.floor(s / 60); const r = s % 60; return `${m}:${r < 10 ? "0" : ""}${r}`; } // ===== PAUSE / SETTINGS OVERLAY ===== // Drawn over a live run. The chart and music keep playing behind it — this // isn't a real pause, just a way to surface options (quit, etc.) without // hunting for keybinds. Press P or click ⚙ to open/close. function pauseMenuOverlay() { return `

★ PAUSED

settings

the track keeps rolling

press P to close

`; } // ===== LANE PADS ===== // Three pads under the play area showing J/K/L. They light up while their // key is held (or for a brief flash on a tap edge — taps can be shorter than // a UI tick, so dj-input.js stamps lanePressAt[lane] with trackTime and the // pads fade from that timestamp). const LANE_PAD_COLORS = [ { rgb: "34,211,238", text: "#67e8f9" }, // J · cyan { rgb: "232,121,249", text: "#f0abfc" }, // K · fuchsia { rgb: "253,224,71", text: "#fde047" }, // L · yellow ]; const LANE_PAD_LABELS = ["J", "K", "L"]; const TAP_PULSE_DUR = 0.16; function lanePad(lane, intensity, color, label) { // intensity: 0 (idle) → 1 (held / fresh tap). Drives glow + opacity. const i = Math.max(0, Math.min(1, intensity)); const idle = 1 - i; const bgAlpha = 0.18 + i * 0.55; const borderAlpha = 0.35 + i * 0.55; const glow = i * 38; const letterShadow = i * 18; const scale = 1 + i * 0.06; return `

${label}

`; } function lanePads(ps, ms) { const held = ps.heldLanes || {}; const pressAt = ps.lanePressAt || {}; const now = ms.trackTime || 0; const pads = [0, 1, 2].map(lane => { let i; if (held[lane]) { i = 1; } else { const age = now - (pressAt[lane] || -999); i = age >= 0 && age < TAP_PULSE_DUR ? 1 - age / TAP_PULSE_DUR : 0; } return lanePad(lane, i, LANE_PAD_COLORS[lane], LANE_PAD_LABELS[lane]); }).join(""); return `

${pads}

`; } // Per-grade keyframes for the lane hit FX. Defined once and injected via a //

${slots}

`; } // Fade-to-black handoff between song select and the arena. We render a // persistent overlay div (stable id) on every frame so morphdom keeps it // across the menu→hud swap. Opacity flips between discrete target values // (0 / 1) and CSS `transition` interpolates smoothly at 60fps between the // engine's ~10Hz UI renders. Duration is set per-phase so fade-in feels // snappy and fade-out feels luxurious. // // Must align with FADE_IN_SEC / GRACE_SEC / OUTRO_* in beat-clock.js. const FADE_IN_SEC = 0.6; // menu → black const FADE_HOLD = 0.8; // hold black across the menu→hud swap const FADE_OUT_SEC = 1.2; // black → arena (or → results) const GRACE_SEC = 7.0; const OUTRO_GRACE_SEC = 7.0; const OUTRO_FADE_OUT_SEC = 2.0; const RESULTS_HOLD_BLACK = 0.4; // matches beat-clock — pure black across hud→results swap function fadeOverlay(ms) { const requesting = !!ms.requesting; const running = !!ms.running; const trackTime = ms.trackTime || 0; const outroStarted = !!ms.outroStarted; const outroAge = ms.outroAge || 0; const showingResults = !!ms.showingResults; const resultsAge = ms.resultsAge || 0; let target = 0; let durSec = FADE_OUT_SEC; let ease = "cubic-bezier(0.4, 0, 0.2, 1)"; if (requesting && !running) { // PLAY clicked — fade in to black before the set begins. target = 1; durSec = FADE_IN_SEC; ease = "cubic-bezier(0.4, 0, 0.6, 1)"; } else if (running && trackTime < -GRACE_SEC + FADE_HOLD) { // Holding black across the menu→hud swap. Snap to opaque instantly. target = 1; durSec = 0; } else if (running && trackTime < 0) { // Fading the arena up at the start. target = 0; durSec = FADE_OUT_SEC; ease = "cubic-bezier(0.22, 1, 0.36, 1)"; } else if (running && outroStarted && outroAge >= OUTRO_GRACE_SEC - OUTRO_FADE_OUT_SEC) { // Tail of the outro — fade to black before results appear. target = 1; durSec = OUTRO_FADE_OUT_SEC; ease = "cubic-bezier(0.4, 0, 0.6, 1)"; } else if (showingResults && resultsAge < RESULTS_HOLD_BLACK) { // Hud→results swap moment. Hold pure black so the fade-to-black we just // finished doesn't get reversed before the results card is in place. target = 1; durSec = 0; } else if (showingResults) { // Results visible — fade overlay back down. target = 0; durSec = FADE_OUT_SEC; ease = "cubic-bezier(0.22, 1, 0.36, 1)"; } return `

`; } // ===== RESULTS SCREEN ===== const RANK_COLOR = { S: { fill: "#fde047", glow: "rgba(253,224,71,0.85)" }, A: { fill: "#86efac", glow: "rgba(134,239,172,0.7)" }, B: { fill: "#7dd3fc", glow: "rgba(125,211,252,0.7)" }, C: { fill: "#fbbf24", glow: "rgba(251,191,36,0.7)" }, D: { fill: "#fb7185", glow: "rgba(251,113,133,0.7)" }, }; const RESULT_COLOR = { perfect: "#fde047", // gold good: "#86efac", // green ok: "#fdba74", // orange miss: "#fb7185", // red }; function performanceGraph(history, endedAt) { const W = 900; const H = 130; const PAD = 12; const innerW = W - PAD * 2; const innerH = H - PAD * 2; const midY = PAD + innerH / 2; const maxOffsetMs = 300; const span = Math.max(1, endedAt || 1); let dots = ""; for (const h of history) { const x = PAD + (h.t / span) * innerW; let y, color, r; if (h.result === "miss" || h.offset === null) { y = PAD + innerH - 3; // miss row at bottom color = RESULT_COLOR.miss; r = 2.5; } else { const clamped = Math.max(-maxOffsetMs, Math.min(maxOffsetMs, h.offset)); y = midY + (clamped / maxOffsetMs) * (innerH / 2 - 6); color = RESULT_COLOR[h.result] || "#fff"; r = h.result === "perfect" ? 2.2 : 2.6; } dots += ``; } return ` `; } function resultsScreen(ms, localPlayer) { const r = ms.lastResults || {}; const trackId = r.trackId || ms.completedTrackId; const track = TRACKS.find(t => t.id === trackId) || TRACKS[0]; // Which track to preview when Continue lands back on song select. const ps = (localPlayer && localPlayer.state) || {}; const selId = ps.selectedTrackId || TRACKS[0].id; const selTrack = TRACKS.find(t => t.id === selId) || TRACKS[0]; const previewMusic = selTrack.music; const previewGain = selTrack.previewGain || 0.5; const score = r.score || 0; const accuracy = (r.accuracy || 0) * 100; const maxCombo = r.maxCombo || 0; const hits = r.hits || 0; const misses = r.misses || 0; const total = hits + misses; const rank = r.rank || "D"; const rc = RANK_COLOR[rank] || RANK_COLOR.D; const history = r.noteHistory || []; const endedAt = r.endedAt || 1; return `

${track.title}

${track.artist} · mapped by ${track.mapper}

CLEARED

${rank}

Score

${score.toLocaleString()}

Accuracy

                  ${accuracy.toFixed(2)}%
                

Max Combo

= 100 ? "0 0 16px rgba(253,224,71,0.6)" : "none"};
                ">${maxCombo}x

Hits / Misses

Performance

Perfect Good OK Miss

${performanceGraph(history, endedAt)}

`; } export default function (localPlayer, world) { const manager = world.query({ tags: ["mainstage-manager"] })[0]; const ms = manager?.state || {}; const running = !!ms.running; const showingResults = !!ms.showingResults; // Personal high-score persistence — inline browser handler fires once // each time a new run id appears in manager state. const lr = ms.lastCompletedRun; const needsPersist = !!(lr && lr.id && lr.id !== ms.lastPersistedRunId); const persistTag = needsPersist ? lbPersistTag(lr) : ""; let content; if (showingResults) { content = resultsScreen(ms, localPlayer); } else if (running) { content = hud(localPlayer, ms); } else { content = songSelectMenu(localPlayer, ms); } return NO_SELECT_STYLES + content + fadeOverlay(ms) + persistTag; } // ── Custom cursors ────────────────────────────────────────────────────── // Neon DJ palette: pearl→magenta gradient fill, violet stroke, soft glow. // rgb() used everywhere to avoid # encoding pain. Single-quoted SVG. const CURSOR_ARROW_SVG = "%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E" + "%3Cdefs%3E" + "%3ClinearGradient id='sa' x1='0' y1='0' x2='1' y2='1'%3E" + "%3Cstop offset='0' stop-color='rgb(253,224,251)'/%3E" + "%3Cstop offset='0.55' stop-color='rgb(240,171,252)'/%3E" + "%3Cstop offset='1' stop-color='rgb(168,85,247)'/%3E" + "%3C/linearGradient%3E" + "%3Cfilter id='gA' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E" + "%3CfeGaussianBlur stdDeviation='1.2' result='b'/%3E" + "%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3CfeMerge%3E" + "%3C/filter%3E" + "%3C/defs%3E" + "%3Cpolygon points='2.5,2 2.5,21.5 7.6,17 11.2,24.6 14.2,23.3 10.7,15.9 17.6,15.9' " + "fill='url(%23sa)' stroke='rgb(126,34,206)' stroke-width='1.3' stroke-linejoin='round' filter='url(%23gA)'/%3E" + "%3C/svg%3E"; const CURSOR_HAND_SVG = "%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E" + "%3Cdefs%3E" + "%3ClinearGradient id='sh' x1='0' y1='0' x2='0' y2='1'%3E" + "%3Cstop offset='0' stop-color='rgb(253,224,251)'/%3E" + "%3Cstop offset='0.5' stop-color='rgb(240,171,252)'/%3E" + "%3Cstop offset='1' stop-color='rgb(168,85,247)'/%3E" + "%3C/linearGradient%3E" + "%3Cfilter id='gH' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E" + "%3CfeGaussianBlur stdDeviation='1.2' result='b'/%3E" + "%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3CfeMerge%3E" + "%3C/filter%3E" + "%3C/defs%3E" + "%3Cg filter='url(%23gH)'%3E" + // Index finger "%3Crect x='6.2' y='3.5' width='4.6' height='13.5' rx='2.3' " + "fill='url(%23sh)' stroke='rgb(126,34,206)' stroke-width='1.1'/%3E" + // Palm + closed fingers below "%3Cpath d='M3.4 16.5 Q3.4 13 6.4 13 L17.6 13 Q21.2 13 21.2 16.5 L21.2 22.8 Q21.2 27 17.4 27 L7.6 27 Q3.4 27 3.4 22.8 Z' " + "fill='url(%23sh)' stroke='rgb(126,34,206)' stroke-width='1.1' stroke-linejoin='round'/%3E" + "%3C/g%3E" + "%3C/svg%3E"; const CURSOR_ARROW_CSS = `url("data:image/svg+xml,${CURSOR_ARROW_SVG}") 2 2, auto`; const CURSOR_HAND_CSS = `url("data:image/svg+xml,${CURSOR_HAND_SVG}") 8 4, pointer`; const NO_SELECT_STYLES = ` `;

Spawn