// Survivor HUD — generator counter top-left, dev door buttons bottom-left. export default function (localPlayer, world) { // ----- generator status ----- const gens = world?.query?.({ tags: ["generator"] }) ?? []; const total = gens.length || 0; const doneCount = gens.filter(g => g.state?.done === true).length; const repairingAny = gens.some(g => !g.state?.done && (g.state?.repairingCount ?? 0) > 0); const remaining = Math.max(0, total - doneCount); const allDone = total > 0 && doneCount === total; // ----- door state (creator dev buttons, kept) ----- const ctrl = world?.getObject?.("garage-door-controller"); const armed = ctrl?.state?.armed === true; const doorDone = ctrl?.state?.done === true; const progress = ctrl?.state?.progress ?? 0; const openLabel = doorDone ? `door open` : armed ? `opening ${Math.floor(progress * 100)}%` : `release monster`; const openDisabled = armed || doorDone; // ----- generator counter ----- const pips = gens.map(g => { const gDone = g.state?.done === true; const gProg = g.state?.progress ?? 0; const gBusy = !gDone && (g.state?.repairingCount ?? 0) > 0; let color, glow; if (gDone) { color = "rgba(110, 220, 130, 1)"; glow = "0 0 6px rgba(110,220,130,0.9)"; } else if (gBusy) { color = "rgba(250, 200, 80, 1)"; glow = "0 0 8px rgba(250,200,80,0.9)"; } else if (gProg > 0) { color = "rgba(220, 130, 70, 1)"; glow = "none"; } else { color = "rgba(120, 30, 30, 1)"; glow = "none"; } return `

`; }).join(""); const headerColor = allDone ? "rgba(120, 230, 140, 1)" : "rgba(220, 60, 60, 1)"; const headerGlow = allDone ? "0 0 8px rgba(120,230,140,0.7)" : "0 0 6px rgba(220,60,60,0.4)"; // ----- focused close-range repair HUD ----- // find nearest broken generator near the player const me = localPlayer?.id ? world?.getObject?.(localPlayer.id) : null; const myPos = me?.feetPosition; let focusGen = null; let focusDist = Infinity; if (myPos) { for (const g of gens) { if (g.state?.done) continue; const gp = g.feetPosition; if (!gp) continue; const d = Math.hypot((gp.x ?? 0) - myPos.x, (gp.z ?? 0) - myPos.z); if (d < focusDist) { focusDist = d; focusGen = g; } } } const inFocusRange = focusGen && focusDist <= 8.0; const inRepairRange = focusGen && focusDist <= 4.0; const isHoldingE = me?.state?.repairing === true; const isRepairing = inRepairRange && isHoldingE; const fProg = focusGen?.state?.progress ?? 0; const fWorkers = focusGen?.state?.repairingCount ?? 0; // ----- combined "HOLD E + progress" panel at the bottom ----- // ≤4m: full "HOLD E" panel with live progress // >4m and ≤7m: faint "generator nearby" hint const inNearbyRange = focusGen && focusDist <= 7.0 && focusDist > 4.0; const pct = Math.floor(fProg * 100); const statusLabel = isRepairing ? (fWorkers > 1 ? `STARTING ×${fWorkers}` : 'STARTING') : 'GENERATOR'; // ----- horror palette ----- // bone-white text, bloodred active glow, dim oxidised borders, scanline overlay const nearbyHint = inNearbyRange ? `

SOMETHING IS HUMMING

` : ''; // ----- whisper above the prompt ----- // idle in range: subtle "this will be loud" warning // repairing: louder, jittery "he can hear you" const whisperText = isRepairing ? 'HE CAN HEAR YOU' : inRepairRange ? 'this will be loud' : ''; const whisper = whisperText ? `

${whisperText}

${isRepairing ? `` : ''} ` : ''; const promptButton = inRepairRange ? `

        E
        ${isRepairing ? statusLabel : 'HOLD TO WAKE THE ENGINE'}
        ${pct.toString().padStart(2,'0')}%
      

        ${isRepairing ? `
` : ''}
      

` : ''; const focusPanel = ''; // ----- generator status board (top-left) ----- // One row per generator with a thin progress bar. Active = red pulse. // Done = bone-pale. Idle = dim red. Sorted by id so order is stable. const sortedGens = [...gens].sort((a, b) => (a.id ?? '').localeCompare(b.id ?? '')); const rows = sortedGens.map((g, i) => { const gDone = g.state?.done === true; const gProg = g.state?.progress ?? 0; const gBusy = !gDone && (g.state?.repairingCount ?? 0) > 0; const gPct = Math.floor(gProg * 100); const label = `GEN ${String(i + 1).padStart(2, '0')}`; let labelColor, barFill, barGlow, rowAnim, statusGlyph, rowBg; if (gDone) { labelColor = 'rgba(240,232,222,1)'; barFill = 'linear-gradient(90deg, rgba(210,200,190,0.95), rgba(255,245,235,1))'; barGlow = '0 0 10px rgba(230,220,210,0.6), 0 0 3px rgba(255,255,255,0.5)'; rowAnim = 'none'; rowBg = 'rgba(40,30,28,0.4)'; statusGlyph = '●'; } else if (gBusy) { labelColor = 'rgba(255,210,210,1)'; barFill = 'linear-gradient(90deg, rgba(160,20,20,1), rgba(255,60,60,1))'; barGlow = '0 0 14px rgba(255,40,40,0.9), 0 0 4px rgba(255,120,120,0.8)'; rowAnim = 'gen-row-pulse 0.7s ease-in-out infinite'; rowBg = 'rgba(80,15,15,0.55)'; statusGlyph = '◉'; } else if (gProg > 0) { labelColor = 'rgba(220,170,165,0.95)'; barFill = 'linear-gradient(90deg, rgba(90,20,20,1), rgba(180,50,50,1))'; barGlow = '0 0 6px rgba(180,30,30,0.5)'; rowAnim = 'none'; rowBg = 'rgba(40,12,12,0.5)'; statusGlyph = '◐'; } else { labelColor = 'rgba(180,160,155,0.85)'; barFill = 'rgba(80,20,20,0.55)'; barGlow = 'none'; rowAnim = 'none'; rowBg = 'rgba(20,8,8,0.45)'; statusGlyph = '○'; } return `

${statusGlyph} ${label}

${gBusy ? `

` : ''}

${gPct.toString().padStart(2,'0')}%

`; }).join(''); const boardHeaderColor = allDone ? 'rgba(240,232,222,1)' : 'rgba(255,80,80,1)'; const boardHeaderLabel = allDone ? 'EXIT POWERED' : 'GENERATORS'; const countColor = allDone ? 'rgba(240,232,222,1)' : 'rgba(255,210,210,1)'; const generatorBoard = `

${boardHeaderLabel}
${doneCount} / ${total}

        ${rows}
      

`; // ----- creator dev buttons ----- const btnStyle = (accent) => ` background: rgba(15,15,20,0.7); border: 1px solid ${accent}; color: ${accent}; font-family: 'Geist Pixel Square', system-ui, monospace; font-size: 10px; letter-spacing: 0.1em; padding: 4px 10px; border-radius: 3px; text-transform: uppercase; `; // Where is the player living? Title = main menu screens. // lobby-room-* = waiting room. Anywhere else = inside the warehouse round. const currentPlace = world?.getEntityPlace?.(localPlayer?.id) || ""; const inTitlePlace = currentPlace === "title"; const inLobbyRoom = typeof currentPlace === "string" && currentPlace.startsWith("lobby-room"); // Three possible role states: "killer" | "survivor" | "menu" (no role yet). // New players land in "menu" and have to pick a side to play. const rawRole = localPlayer?.state?.role; // Show the full menu shell whenever we're in title or in the waiting room. // (In the waiting room you may have picked killer/survivor, but you're still // pre-game — we want the dark menu chrome, not the warehouse HUD.) const inMenu = inLobbyRoom || (rawRole !== "killer" && rawRole !== "survivor"); const role = rawRole === "killer" ? "killer" : "survivor"; // Which screen of the title menu? "main" (default), "play" (lobby browser), or "settings". const menuScreen = ["main", "play", "settings", "notes"].includes(localPlayer?.state?.menuScreen) ? localPlayer.state.menuScreen : "main"; const invertY = localPlayer?.state?.invertY === true; // Lobby list from the lobby-manager singleton (only present in the title place) const lobbyManager = inTitlePlace ? world?.getObject?.("lobby-manager") : null; const lobbies = Array.isArray(lobbyManager?.state?.lobbies) ? lobbyManager.state.lobbies : []; // Waiting-room controller (only present inside a lobby-room instance). const lobbyRoomCtrl = inLobbyRoom ? (world?.query?.({ tags: ["lobby-room-controller"] }) ?? [])[0] ?? null : null; const lobbyRoster = Array.isArray(lobbyRoomCtrl?.state?.roster) ? lobbyRoomCtrl.state.roster : []; const lobbyCanStart = lobbyRoomCtrl?.state?.canStart === true; const lobbyStarting = lobbyRoomCtrl?.state?.starting === true; const lobbyKillerReady = lobbyRoomCtrl?.state?.killerReady || 0; const lobbySurvivorReady = lobbyRoomCtrl?.state?.survivorReady || 0; const lobbyHost = lobbyRoomCtrl?.state?.hostName || "host"; const myReady = localPlayer?.state?.ready === true; // ----- main menu ----- // Shown when a player first joins (no role set) or backs out to menu. // Total takeover: no HUD, no dev buttons, just the title and the choice. if (inMenu) { const mainMenu = `

DEAD BY

SPAWNLIGHT

five generators  ·  one hunter  ·  run

${ inLobbyRoom ? (() => { const rosterRows = lobbyRoster.length === 0 ? `

awaiting players...

` : lobbyRoster.map(r => { const safeName = String(r.name || "player").replace(/[<>&"]/g, ""); const isMe = r.id === localPlayer?.id; const roleLabel = r.role === "killer" ? `KILLER` : r.role === "survivor" ? `SURVIVOR` : `CHOOSING...`; const readyLabel = r.ready ? `✓ READY` : `WAITING`; return `

${safeName}${isMe ? " (you)" : ""}

${roleLabel}

${readyLabel}

`; }).join(""); const role = localPlayer?.state?.role; const roleBtnStyle = (active, accent) => ` pointer-events: auto; background: ${active ? "rgba(60,20,15,0.92)" : "rgba(15,10,10,0.7)"}; border: 1px solid ${active ? accent : "rgba(80,60,55,0.5)"}; color: ${active ? "rgba(250,225,210,0.97)" : "rgba(180,165,160,0.7)"}; font-family: 'Geist Pixel Square', system-ui, monospace; font-size: 12px; letter-spacing: 0.45em; padding: 14px 30px; cursor: pointer; text-transform: uppercase; transition: all 0.2s ease; box-shadow: ${active ? `0 0 22px ${accent}` : "none"}; `; const readyDisabled = role !== "killer" && role !== "survivor"; const readyBtnStyle = ` pointer-events: ${readyDisabled ? "none" : "auto"}; background: ${myReady ? "rgba(20,50,25,0.85)" : "rgba(15,10,10,0.7)"}; border: 1px solid ${myReady ? "rgba(120,200,140,0.85)" : "rgba(80,60,55,0.5)"}; color: ${myReady ? "rgba(200,240,210,0.97)" : (readyDisabled ? "rgba(120,100,100,0.4)" : "rgba(220,210,200,0.85)")}; font-family: 'Geist Pixel Square', system-ui, monospace; font-size: 13px; letter-spacing: 0.5em; padding: 16px 40px; cursor: ${readyDisabled ? "default" : "pointer"}; text-transform: uppercase; transition: all 0.2s ease; box-shadow: ${myReady ? "0 0 28px rgba(120,200,140,0.45)" : "none"}; `; const startDisabled = !lobbyCanStart || lobbyStarting; const startBtnStyle = ` pointer-events: ${startDisabled ? "none" : "auto"}; background: ${startDisabled ? "rgba(15,8,8,0.55)" : "rgba(70,15,15,0.92)"}; border: 1px solid ${startDisabled ? "rgba(70,55,55,0.35)" : "rgba(255,80,80,0.95)"}; color: ${startDisabled ? "rgba(120,100,100,0.4)" : "rgba(255,225,215,0.98)"}; font-family: 'Geist Pixel Square', system-ui, monospace; font-size: 16px; letter-spacing: 0.55em; padding: 18px 56px; cursor: ${startDisabled ? "default" : "pointer"}; text-transform: uppercase; transition: all 0.25s ease; box-shadow: ${startDisabled ? "none" : "0 0 44px rgba(240,60,60,0.6)"}; `; let statusText; if (lobbyStarting) { statusText = "entering the warehouse..."; } else if (lobbyCanStart) { statusText = "ready to begin"; } else { const missing = []; if (lobbyKillerReady < 1) missing.push("1 killer ready"); if (lobbySurvivorReady < 1) missing.push("1 survivor ready"); if (missing.length === 0) missing.push("everyone ready"); statusText = "needs: " + missing.join(" · "); } const safeHost = String(lobbyHost).replace(/[<>&"]/g, ""); return `

${safeHost}'s lobby

${rosterRows}

your role

${statusText}

`; })() : inTitlePlace && menuScreen === "main" ? `

` : inTitlePlace && menuScreen === "play" ? `

            active lobbies (${lobbies.length})
            live
          

${ lobbies.length === 0 ? `

no lobbies running — be the first

` : lobbies .map((lob) => { const stateLabel = lob.state === "playing" ? `in progress` : lob.state === "ended" ? `round over` : `waiting`; const safeHost = String(lob.hostName || "host").replace(/[<>&"]/g, ""); const lobIdJs = String(lob.id || "").replace(/'/g, "\\'"); return `

${safeHost}'s lobby

${lob.playerCount} in  ·  ${stateLabel}

`; }) .join("") }

` : inTitlePlace && menuScreen === "settings" ? `

settings

invert y-axis (for Annias)

flip vertical look

` : inTitlePlace && menuScreen === "notes" ? `

known issues

read me before you play

            dead by spawnlight is a jam build. a few rough edges live here while the next patch is in the oven — none of them brick the round, but you should know about them going in.
          

spectate camera

when you die, the spectate camera doesn't always follow the survivor you're watching — it can stick to your own corpse view. if it feels broken, just hit BACK TO TITLE from the death overlay and rejoin. fix is coming in the next patch.

testing alone? read this

multiple incognito windows in the SAME browser share one guest session — only the most recent tab is "alive" on the server. if a tab can't host or join lobbies, it's gone ghost. use separate browsers or separate chrome profiles for multi-client testing.

if you get wedged

collision is still being tuned — if you clip into a pillar, shelf, or wall during a round, look at the bottom-right corner of the HUD for the I'M STUCK button. it teleports you to a safe spot in the warehouse. you can also HOLD R for the same effect.

all of this is being fixed in the next patch

thanks for hunting · stay sharp

` : `

choose your side

` }

${
          !inTitlePlace
            ? "the warehouse waits"
            : menuScreen === "settings"
            ? "preferences"
            : menuScreen === "notes"
            ? "read me · jam build · next patch incoming"
            : menuScreen === "play"
            ? "host or join · five generators · one hunter"
            : "press play to begin"
        }

`; return mainMenu; } const roleBtn = role === "killer" ? `` : ``; // Dev/playtest strip — hidden from gameplay HUD to avoid looking like a menu. // The same controls live in the creator panel (Tab+G to open god mode). // Only the unobtrusive "leave match" link stays visible to players. const devButtons = `

`; // ----- role reveal card ----- // Among-Us-style splash: when a fresh round starts (player just entered a // 'main-*' instance), show "YOU ARE A SURVIVOR" / "YOU ARE THE KILLER" for ~4.5s. // Timer ticks in player.js (state.roleCardTime). Opacity is computed here so // the card cross-fades cleanly even though ui.js re-renders every frame. const rcT = typeof localPlayer?.state?.roleCardTime === "number" ? localPlayer.state.roleCardTime : 99; let rcOpacity = 0; if (rcT < 0.5) rcOpacity = rcT / 0.5; else if (rcT < 3.5) rcOpacity = 1; else if (rcT < 4.5) rcOpacity = (4.5 - rcT); const showRoleCard = rcOpacity > 0.01; // Scale eases in from 0.92 → 1.0 during the first 0.6s for a subtle "punch". const rcScale = rcT < 0.6 ? 0.92 + (rcT / 0.6) * 0.08 : 1.0; const isKillerCard = role === "killer"; const rcAccent = isKillerCard ? "oklch(0.6 0.32 25)" : "oklch(0.78 0.12 220)"; const rcAccentSoft = isKillerCard ? "oklch(0.4 0.22 25)" : "oklch(0.55 0.1 220)"; const rcInk = isKillerCard ? "oklch(0.96 0.04 50)" : "oklch(0.96 0.02 220)"; const rcRadial = isKillerCard ? "radial-gradient(ellipse at center, oklch(0.18 0.18 25 / 0.92) 0%, oklch(0.04 0.06 25 / 0.96) 55%, oklch(0.01 0 0 / 0.99) 100%)" : "radial-gradient(ellipse at center, oklch(0.16 0.08 220 / 0.92) 0%, oklch(0.05 0.04 220 / 0.96) 55%, oklch(0.01 0 0 / 0.99) 100%)"; const rcTitleSmall = "YOU ARE"; const rcTitleBig = isKillerCard ? "THE KILLER" : "A SURVIVOR"; const rcSubtitle = isKillerCard ? "hunt them down." : "fix five generators. get out alive."; const rcFlavor = isKillerCard ? "you only need to catch them. they need to escape." : "two hits and you die. work together."; const rcControls = isKillerCard ? [ { key: "Q", label: "attack" }, { key: "WASD", label: "stalk" }, { key: "MOUSE", label: "look" }, ] : [ { key: "E", label: "repair" }, { key: "F", label: "rescue" }, { key: "SHIFT", label: "sprint" }, ]; const rcControlPills = rcControls.map(c => `

${c.key}

${c.label}

`).join(""); const roleCardOverlay = !showRoleCard ? "" : `

${rcTitleSmall}

${rcTitleBig}

${rcSubtitle}

${rcControlPills}

${rcFlavor}

`; // ----- unstuck overlay ----- // Hold-R recovery indicator. While the player holds R, the screen fades to // black and a "HOLD R" gauge fills. At 2s, player.js teleports them to a // safe spot. Same overlay in killer & survivor HUD — concatenated into both. const usT = typeof localPlayer?.state?.unstuckT === "number" ? localPlayer.state.unstuckT : 0; const UNSTUCK_DURATION = 2.0; const usFrac = Math.min(1, usT / UNSTUCK_DURATION); const showUnstuck = usT > 0.02; const unstuckOverlay = !showUnstuck ? "" : `

unstuck

hold R · release to cancel

`; // ----- round-end detection ----- // garage-door-controller owns the sticky flag — it flips roundEnded once and // stays flipped until reset-scene clears it. We read it here. Tally comes // from the live roster (it's just for the subtitle, doesn't affect the gate). const roundEnded = ctrl?.state?.roundEnded === true; const roundOutcome = ctrl?.state?.roundOutcome; const allPlayers = world?.query?.({ tags: ["player"] }) ?? []; const survivorRoster = allPlayers.filter(p => p.state?.role !== "killer"); const survivorsTotal = survivorRoster.length; const survivorsEscaped = survivorRoster.filter(p => p.state?.escaped === true).length; const survivorsDead = survivorRoster.filter(p => p.state?.dead === true && !p.state?.escaped).length; const roundOver = roundEnded; const survivorsWin = roundOver && roundOutcome === "escape"; const killerWin = roundOver && roundOutcome === "kill"; if (roundOver) { const meEscaped = localPlayer?.state?.escaped === true; const meDead = localPlayer?.state?.dead === true; let title, sub, titleColor, titleGlow, bgGradient, accent; if (survivorsWin) { title = "ESCAPED"; titleColor = "rgba(230, 225, 215, 0.96)"; titleGlow = "0 0 36px rgba(220,210,190,0.5), 0 0 8px rgba(255,255,255,0.4)"; bgGradient = "radial-gradient(ellipse at center, rgba(20,18,15,0.7) 0%, rgba(0,0,0,0.96) 80%)"; accent = "rgba(220,210,190,0.7)"; if (role === "killer") { sub = "they slipped away"; } else if (meEscaped) { sub = survivorsEscaped === survivorsTotal ? "everyone made it" : "you made it out"; } else { sub = "your friends got out"; } } else { title = "SLAUGHTERED"; titleColor = "rgba(220, 50, 50, 0.97)"; titleGlow = "0 0 38px rgba(160,0,0,0.85), 0 0 10px rgba(240,60,60,0.6)"; bgGradient = "radial-gradient(ellipse at center, rgba(30,0,0,0.78) 0%, rgba(0,0,0,0.98) 80%)"; accent = "rgba(200,80,80,0.75)"; if (role === "killer") { sub = survivorsTotal === 1 ? "you took them" : "you took them all"; } else { sub = "no one walked out"; } } const tally = `${survivorsEscaped} escaped · ${survivorsDead} hunted`; // ----- debrief stats ----- // Two columns: KILLER (left, crimson) vs SURVIVORS (right, slate). // Reads like a hunter's journal, not a leaderboard. Numbers are big, // labels are small + spaced. const killerPlayer = allPlayers.find(p => p.state?.role === "killer"); const ks = killerPlayer?.state || {}; const fmtTime = (sec) => { if (!sec || sec <= 0) return "—"; const s = Math.round(sec); const m = Math.floor(s / 60); const r = s % 60; return m > 0 ? `${m}m ${r}s` : `${r}s`; }; const fmtFirstBlood = (t) => { if (t == null) return "never"; const s = Math.round(t); const m = Math.floor(s / 60); const r = s % 60; return `${m}:${String(r).padStart(2, "0")}`; }; const fmtDist = (d) => { if (!Number.isFinite(d) || d >= 999) return "—"; return `${d.toFixed(1)}m`; }; // Aggregate survivor totals across the team. const totalRepairTime = survivorRoster.reduce((sum, p) => sum + (p.state?.statRepairTime || 0), 0); const totalTimeAlive = survivorRoster.reduce((sum, p) => sum + (p.state?.statTimeAlive || 0), 0); const totalSaves = survivorRoster.reduce((sum, p) => sum + (p.state?.statSaves || 0), 0); const longestSprint = survivorRoster.reduce((max, p) => Math.max(max, p.state?.statLongestSprint || 0), 0); const closestCall = survivorRoster.reduce((min, p) => { const d = p.state?.statClosestKiller; if (typeof d !== "number" || d >= 999) return min; return Math.min(min, d); }, 999); // Healthy = alive and not bloodied (escaped clean counts as healthy). // Hurt = bloodied and not dead (still hurt, even if they escaped wounded). // Dead = the round-end dead count. const healthyCount = survivorRoster.filter(p => !p.state?.dead && !p.state?.bloodied).length; const injuredCount = survivorRoster.filter(p => p.state?.bloodied && !p.state?.dead).length; const deadCount = survivorsDead; const statPill = (label, value, color) => `

${label}

${value}

`; const killerColor = "rgba(230,90,90,0.95)"; const survColor = "rgba(180,210,235,0.95)"; // Survivor status row: portraits-as-dots, red/yellow/green by state. const statusDots = `

${survivorRoster.map(p => { const dead = p.state?.dead; const bloodied = p.state?.bloodied && !dead; const escaped = p.state?.escaped; const c = escaped ? "rgba(140,200,160,0.95)" : dead ? "rgba(70,70,80,0.85)" : bloodied ? "rgba(220,130,80,0.95)" : "rgba(180,210,235,0.95)"; const label = escaped ? "out" : dead ? "✕" : bloodied ? "hurt" : "ok"; return `

${label}

`; }).join('')}

`; const statsPanel = `

// the killer ${killerPlayer?.state?.displayName ? `· ${killerPlayer.state.displayName}` : ''}

${statPill("downs landed", ks.statDowns || 0, killerColor)} ${statPill("kills", ks.statKills || 0, killerColor)} ${statPill("first blood at", fmtFirstBlood(ks.statFirstBloodAt), killerColor)} ${statPill("time in chase", fmtTime(ks.statChaseTime), killerColor)} ${statPill("longest chase", fmtTime(ks.statLongestChase), killerColor)}

// the survivors

DEAD

${deadCount}

HURT

${injuredCount}

OK

${healthyCount}

${statusDots} ${statPill("time on gens", fmtTime(totalRepairTime), survColor)} ${statPill("team time alive", fmtTime(totalTimeAlive), survColor)} ${statPill("teammates saved", totalSaves, survColor)} ${statPill("longest sprint", fmtTime(longestSprint), survColor)} ${statPill("closest call", fmtDist(closestCall), survColor)}

`; const holdT = ctrl?.state?.roundEndT || 0; const HOLD = 8; const remaining = Math.max(0, Math.ceil(HOLD - holdT)); const roundEndOverlay = `

${title}

${sub}

${tally}

${statsPanel}

returning to lobby in ${remaining}

`; return roundEndOverlay + devButtons; } // ----- escape impact overlay ----- // The MOMENT of crossing the threshold. Plays once for ~2.2s, then the // quiet "you made it out" hold below takes over. Light burst slams the // screen (you just stepped from dim warehouse into open daylight), big // ESCAPED stamp drops in from above with a punchy scale-down, golden // vignette around the edges. Driven by state.escapeT (ticked by player.js, // stamped by garage-door.js). const escT = typeof localPlayer?.state?.escapeT === "number" ? localPlayer.state.escapeT : -1; const escImpactActive = escT >= 0 && escT < 2.5; let escapeImpact = ''; if (escImpactActive) { // Flash: peaks instantly, decays over 300ms. const flash = Math.max(0, 1 - escT / 0.3); // Golden vignette: ramps in over 0.3s, sustains, fades after 1.8s. const vignette = escT < 0.3 ? escT / 0.3 : Math.max(0, 1 - Math.max(0, escT - 1.8) / 0.7); // Stamp: drops in from above (y offset), scales from huge to settled. // Visible from t=0.05 onward, settles by t=0.6. const stampT = Math.max(0, Math.min(1, (escT - 0.05) / 0.55)); const stampY = (1 - stampT) * -60; // drops from -60px to 0 const stampScale = 1.4 - stampT * 0.4; // 1.4 → 1.0 const stampOpacity = escT < 0.05 ? 0 : escT < 1.9 ? 1 : Math.max(0, 1 - (escT - 1.9) / 0.6); // Subtitle reveals slightly after the stamp. const subOpacity = escT < 0.7 ? 0 : escT < 2.0 ? Math.min(1, (escT - 0.7) / 0.3) : Math.max(0, 1 - (escT - 2.0) / 0.5); escapeImpact = `

ESCAPED

you made it out alive

`; } // ----- escaped overlay ----- // Quiet exhale, not a victory parade. Bone-white, slow fade. const escaped = localPlayer?.state?.escaped === true; const escapedOverlay = escaped ? `

ESCAPED

you made it out

` : ''; // While escaped, hide the gameplay HUD — they're done. // Impact overlay renders ON TOP for the first ~2s (higher z-index). if (escaped) return escapedOverlay + devButtons + escapeImpact; // ----- death overlay ----- // Caught while wounded. The screen goes still, dark, finite. // Two buttons: spectate (if friends are still out there) + back to menu. // The spectator HUD takes over once you click spectate. const dead = me?.state?.dead === true && role !== "killer"; const meSpectating = me?.state?.spectating === true; const otherSurvivorsAlive = allPlayers.some(p => p.id !== me?.id && p.state?.role === "survivor" && !p.state?.dead && !p.state?.escaped ); const btnDangerStyle = ` pointer-events: auto; background: rgba(8,4,4,0.85); border: 1px solid rgba(200,40,40,0.7); color: rgba(230,210,200,0.95); font-family: 'Geist Pixel Square', system-ui, monospace; font-size: 13px; letter-spacing: 5px; padding: 12px 28px; cursor: pointer; text-transform: uppercase; transition: all 0.2s ease; box-shadow: 0 0 24px rgba(160,20,20,0.25); `; const btnGhostStyle = ` pointer-events: auto; background: rgba(10,12,16,0.85); border: 1px solid rgba(120,140,170,0.6); color: rgba(220,225,235,0.95); font-family: 'Geist Pixel Square', system-ui, monospace; font-size: 13px; letter-spacing: 5px; padding: 12px 28px; cursor: pointer; text-transform: uppercase; transition: all 0.2s ease; box-shadow: 0 0 24px rgba(60,80,120,0.2); `; const deathOverlay = (dead && !meSpectating) ? `

DEAD

${otherSurvivorsAlive ? "but the others are still out there" : "no one's coming back"}

${otherSurvivorsAlive ? ` ` : ''}

` : ''; // ----- spectator HUD ----- // Subdued top-bar showing who you're watching + cycle/exit buttons. // No gameplay HUD, no stamina, no wrench. You're a ghost. const spectatorHud = (dead && meSpectating) ? (() => { const target = allPlayers.find(p => p.id === me?.state?.spectateTargetId); const targetName = target?.state?.displayName || "..."; return `

// spectating

${targetName}

`; })() : ''; // While dead, the only thing on screen is the death/spectator overlay. if (dead) return deathOverlay + spectatorHud + devButtons; // ----- downed overlay ----- // He got you. Blood drained from the screen, slow heart, can't move. const downed = me?.state?.downed === true && role !== "killer"; const downedOverlay = downed ? `

${[ { x: 6, delay: 0.0, dur: 5.2, len: 260, w: 11 }, { x: 19, delay: 1.4, dur: 6.6, len: 180, w: 8 }, { x: 33, delay: 0.6, dur: 4.6, len: 340, w: 14 }, { x: 48, delay: 2.1, dur: 7.0, len: 220, w: 10 }, { x: 63, delay: 0.9, dur: 5.4, len: 380, w: 16 }, { x: 78, delay: 3.0, dur: 6.0, len: 200, w: 9 }, { x: 91, delay: 1.7, dur: 4.8, len: 280, w: 12 }, ].map(d => `

`).join('')}

DOWNED

${(me?.state?.rescueProgress ?? 0) > 0 ? 'someone is lifting you' : 'he caught you'}

${(me?.state?.rescueProgress ?? 0) > 0 ? `

` : ''} ${(() => { const BLEED_OUT_TIME = 30; const bleed = typeof me?.state?.bleedOut === "number" ? me.state.bleedOut : 0; const remain = Math.max(0, BLEED_OUT_TIME - bleed); const frac = remain / BLEED_OUT_TIME; const critical = remain <= 8; const pulseSpeed = critical ? 0.45 : 1.1; return `

BLEEDING OUT — ${remain.toFixed(1).padStart(4, '0')}s

`; })()} ${(me?.state?.rescueProgress ?? 0) > 0 ? '' : `

someone needs to revive you!

`} ${(() => { // Self-revive shows only when you're the last survivor standing. // Everyone else is dead or escaped — no one's coming back for you, // so the floor lets you up. Otherwise rescue has to carry the loop. const lastOneStanding = !allPlayers.some(p => p.id !== me?.id && p.state?.role === "survivor" && !p.state?.dead && !p.state?.escaped ); if (!lastOneStanding) return ''; return `

no one's coming back

`; })()}

` : ''; // While downed, the gameplay HUD recedes — just the overlay and dev buttons. if (downed) return downedOverlay + devButtons; // ===== KILLER HUD ===== // You are the machine. The world is sensor data. // Corner brackets, scan line, target list with range — Terminator/Predator vision. if (role === "killer") { // Survivor census + ranges from the killer's own position. const allPlayers = world?.query?.({ tags: ["player"] }) ?? []; const killerPos = myPos; const survivors = allPlayers .filter(p => p.id !== localPlayer?.id && p.state?.role !== "killer") .map((p, i) => { const fp = p.feetPosition; const dx = killerPos && fp ? fp.x - killerPos.x : 0; const dz = killerPos && fp ? fp.z - killerPos.z : 0; const dist = Math.round(Math.sqrt(dx*dx + dz*dz)); const tag = `T-${String(i + 1).padStart(2, "0")}`; return { id: p.id, tag, dist, escaped: !!p.state?.escaped, downed: !!p.state?.downed, fp }; }); const escapedCount = survivors.filter(s => s.escaped).length; const aliveCount = survivors.length - escapedCount; const closest = survivors .filter(s => !s.escaped && Number.isFinite(s.dist)) .reduce((min, s) => (min === null || s.dist < min.dist ? s : min), null); // Active gens — survivors actively cranking. const activeGens = gens .map((g, i) => ({ num: i + 1, busy: !g.state?.done && (g.state?.repairingCount ?? 0) > 0 })) .filter(g => g.busy); const threat = total > 0 ? doneCount / total : 0; const threatColor = threat >= 0.8 ? "rgba(255,80,80,1)" : threat >= 0.5 ? "rgba(245,170,90,1)" : threat >= 0.2 ? "rgba(230,210,140,1)" : "rgba(170,180,200,1)"; // Brackets — four L-shapes hugging the screen edges, the camera frame of a machine. const bracket = (corner) => { const size = "44px", thick = "2px", color = "rgba(255,80,80,0.85)"; const map = { tl: `top:18px;left:18px;border-top:${thick} solid ${color};border-left:${thick} solid ${color};`, tr: `top:18px;right:18px;border-top:${thick} solid ${color};border-right:${thick} solid ${color};`, bl: `bottom:18px;left:18px;border-bottom:${thick} solid ${color};border-left:${thick} solid ${color};`, br: `bottom:18px;right:18px;border-bottom:${thick} solid ${color};border-right:${thick} solid ${color};`, }; return `

`; }; // Top-center identification strip — what the machine knows it is. const idStrip = `

UNIT HK-7  //  PROTOCOL TERMINAL  //  HUNT ACTIVE

`; // Top scan line — a slow horizontal sweep that says "I am scanning this room." const scanLine = `

`; // Objective sensor — moved to bottom-left so the top is the machine's "head." const killerObjectives = `

OBJECTIVES
${doneCount} / ${total} POWERED

          ${aliveCount} ALIVE
          ${escapedCount} ESCAPED
        

`; // Target sensor — right side. Each survivor as a sensor entry with range and lock state. const targetRows = survivors.length === 0 ? `

// NO TARGETS DETECTED

` : survivors.map(s => { const lockColor = s.escaped ? "rgba(120,140,140,0.55)" : s.downed ? "rgba(255,60,60,1)" : closest && s.id === closest.id ? "rgba(255,90,90,1)" : "rgba(220,180,90,0.9)"; const lockLabel = s.escaped ? "LOST" : s.downed ? "DOWN" : closest && s.id === closest.id ? "LOCK" : "TRACK"; const distLabel = s.escaped ? "---" : `${String(s.dist).padStart(3, " ")}m`; const downedPulse = s.downed ? "animation: killer-down-pulse 0.9s ease-in-out infinite;" : ""; return `

${s.tag} ${lockLabel} ${distLabel}

`; }).join("") + ``; const targetPanel = `

TARGETS

        ${targetRows}

`; // Generator alerts — survivors actively cranking, layered under the target panel. const activeAlerts = activeGens.length === 0 ? '' : `

        ${activeGens.map(g => `
          GEN ${g.num} :: AUDIBLE

        `).join("")}
      

`; // Bottom-center telemetry — heartbeat ticks of a machine that's always thinking. const telemetry = `

SENSORS NOMINAL  //  THERMAL HIGH  //  AUDIO RANGE 30M

`; // Crimson wash + scan-line + brackets — the machine's "eyes" on top of the world. const killerFrame = `

${bracket("tl")}${bracket("tr")}${bracket("bl")}${bracket("br")} ${scanLine} `; // ----- weapon / swing cooldown ----- // Tiny machine-readout at bottom-center. Three states: READY / STRIKE / RELOAD. // Bar fills as the cooldown burns down — empty after a swing, full when ready. const SWING_DURATION = 0.55; const SWING_RECOVERY = 1.8; const swingT = typeof localPlayer?.state?.swingT === "number" ? localPlayer.state.swingT : 0; const swingCd = typeof localPlayer?.state?.swingCooldown === "number" ? localPlayer.state.swingCooldown : 0; let swingStatus, swingFill, swingColor, swingGlow, swingPulse; if (swingT > 0) { swingStatus = "STRIKE"; swingFill = Math.max(0, 1 - (swingT / SWING_DURATION)); swingColor = "rgba(255, 230, 230, 0.95)"; swingGlow = "0 0 18px rgba(255, 80, 80, 0.85)"; swingPulse = "killer-strike 0.4s ease-out"; } else if (swingCd > 0) { swingStatus = "RELOAD"; swingFill = 1 - (swingCd / SWING_RECOVERY); swingColor = "rgba(170, 90, 90, 0.85)"; swingGlow = "0 0 8px rgba(120, 30, 30, 0.4)"; swingPulse = "none"; } else { swingStatus = "READY"; swingFill = 1; swingColor = "rgba(255, 90, 90, 0.95)"; swingGlow = "0 0 16px rgba(220, 40, 40, 0.7)"; swingPulse = "killer-ready 2.2s ease-in-out infinite"; } const swingHud = `

Q
${swingStatus}

`; return killerFrame + idStrip + killerObjectives + targetPanel + activeAlerts + telemetry + swingHud + devButtons + unstuckOverlay + roleCardOverlay; } // ----- rescue prompt ----- // Standing near a downed teammate — hold E to lift them. let downedNear = null; let downedDist = Infinity; if (myPos) { const allPlayers = world?.query?.({ tags: ["player"] }) ?? []; for (const p of allPlayers) { if (p.id === localPlayer?.id) continue; if (!p.state?.downed) continue; if (p.state?.escaped) continue; if (p.state?.role === "killer") continue; const pp = p.feetPosition; if (!pp) continue; const d = Math.hypot(pp.x - myPos.x, pp.z - myPos.z); if (d <= 2.2 && d < downedDist) { downedDist = d; downedNear = p; } } } const isHoldingF = me?.state?.rescuing === true; const isRescuing = downedNear && isHoldingF; const rescuePct = Math.floor((downedNear?.state?.rescueProgress ?? 0) * 100); const rescuePrompt = downedNear ? `

        F
        ${isRescuing ? 'LIFTING' : 'HOLD F TO LIFT QUIETLY'}
        ${rescuePct.toString().padStart(2,'0')}%
      

` : ''; // ----- mini heart HUD ----- // Anatomical heart, not a valentine. Bottom-center, pulses with proximity to the killer. const dread = Math.max(0, Math.min(1, me?.state?.dread ?? 0)); const heartHud = dread > 0.001 ? (() => { const beatInterval = (1.4 + (0.32 - 1.4) * dread).toFixed(2); // Color ramps: dim oxygenated dark red → vivid arterial scarlet as he closes. const baseR = Math.floor(95 + 130 * dread); const baseG = Math.floor(18 + 18 * (1 - dread)); const baseB = Math.floor(22 + 14 * (1 - dread)); const hiR = Math.min(255, baseR + 50); const hiG = baseG + 10; const hiB = baseB + 8; const shadowR = Math.max(20, baseR - 60); const shadowG = Math.max(5, baseG - 8); const shadowB = Math.max(5, baseB - 8); const glowStrength = (6 + 20 * dread).toFixed(0); const glowAlpha = (0.30 + 0.55 * dread).toFixed(2); const peakScale = (1.0 + 0.22 * dread + 0.12).toFixed(2); const size = Math.floor(68 + 28 * dread); return `

`; })() : ''; // Rescue prompt takes priority over the generator prompt when both would show. const bottomPanel = downedNear ? rescuePrompt : promptButton; // ----- stamina bar ----- // Survivor-only. Bottom-center, just above the prompt area. Shows current breath. const staminaVal = typeof me?.state?.stamina === "number" ? Math.max(0, Math.min(1, me.state.stamina)) : 1; const staminaLock = typeof me?.state?.staminaLockout === "number" ? me.state.staminaLockout : 0; const staminaFullFor = typeof me?.state?.staminaFullFor === "number" ? me.state.staminaFullFor : 99; const isSprinting = me?.state?.sprinting === true; const staminaPct = Math.round(staminaVal * 100); const winded = staminaLock > 0; const empty = winded || staminaVal <= 0.001; const isFull = staminaVal >= 0.999; // 2s linger after topping off — bar stays at 50% then disappears. const lingering = isFull && staminaFullFor < 2; // Fill goes warm-amber → rust-red as it drains; flashes near-empty. const fillColor = empty ? "rgba(160,40,40,0.85)" : staminaVal < 0.25 ? "rgba(220,90,50,0.95)" : staminaVal < 0.55 ? "rgba(220,160,70,0.92)" : "rgba(200,190,150,0.92)"; // Bar shows while sprinting, winded, recovering, OR for 2s after topping off. const showStaminaBar = isSprinting || winded || !isFull || lingering; const staminaBar = !showStaminaBar ? '' : `

        ${empty ? 'WINDED' : 'STAMINA'}
        ${staminaPct}
      

`; // ----- wounded overlay ----- // You got up, but you're still bleeding. Faint red ring around the screen, // a few slow trickles down the edges. Stays until the round resets. // ----- catch impact overlay ----- // The moment the killer's wrench connects with YOU. Held cinematic beat — // blood slammed onto your screen lens, vignette punches shut, world barely // visible through the splatter, then a quick decay into the persistent // wounded state. On a kill, fades to black instead of releasing. // Driven by state.catchT (ticked by player.js, stamped by killer-body.js). const catchT = typeof me?.state?.catchT === "number" ? me.state.catchT : -1; const catchActive = catchT >= 0 && catchT < 1.6; const catchKill = me?.state?.catchType === "kill"; let catchOverlay = ''; if (catchActive) { // Two stacked curves: a sharp flash (first 120ms) and a long splatter fade. const flash = Math.max(0, 1 - catchT / 0.12); // 1 → 0 over 120ms const splatter = catchT < 0.18 ? catchT / 0.18 // ramp up fast : Math.max(0, 1 - (catchT - 0.18) / 1.4); // long fade // Vignette is the radial darkness closing IN around the splatter, peak ~0.2s. const vignette = catchT < 0.2 ? catchT / 0.2 : Math.max(0, 1 - (catchT - 0.2) / 1.2); // On a kill, the splatter doesn't release — it bleeds into black for the death screen. const killBleed = catchKill ? Math.min(1, catchT / 1.2) : 0; // Splat blobs — fixed positions so they don't shimmer on re-render. const blobs = [ { x: 18, y: 32, r: 22, op: 0.95 }, { x: 72, y: 24, r: 28, op: 0.92 }, { x: 50, y: 58, r: 34, op: 0.98 }, { x: 28, y: 72, r: 20, op: 0.88 }, { x: 84, y: 66, r: 24, op: 0.9 }, { x: 8, y: 52, r: 16, op: 0.82 }, { x: 62, y: 82, r: 18, op: 0.85 }, { x: 38, y: 14, r: 15, op: 0.8 }, ]; const blobSvg = blobs.map(b => `

`).join(''); catchOverlay = `

${blobSvg}

`; } const bloodied = me?.state?.bloodied === true && !downed; const woundedOverlay = bloodied ? `

${[ { x: 9, delay: 0.0, dur: 8.5, len: 180, w: 5 }, { x: 27, delay: 2.4, dur: 10.0, len: 140, w: 4 }, { x: 44, delay: 4.8, dur: 9.0, len: 220, w: 6 }, { x: 63, delay: 1.2, dur: 11.0, len: 160, w: 4 }, { x: 82, delay: 6.0, dur: 9.5, len: 240, w: 5 }, ].map(d => `

`).join('')}

` : ''; // Click-to-lock pill. The browser drops pointer lock whenever the user clicks // any HTML button (role toggle, ready, leave match) or presses Escape, and // the engine doesn't auto-reacquire — so the camera just stops turning and // the player looks "stuck". This pill at top center is the player's way back // in. While pointer lock IS active the cursor is captured so the pill can't // be clicked — only when lock has actually been lost does it become useful. const inGameplay = !inMenu && (currentPlace || "").startsWith("main"); const resumePill = inGameplay ? `

` : ''; // ----- wrench animation ----- // While holding E on a generator, an angry wrench swings into view and bashes // the screen on a tight loop. Pure CSS keyframes — pixel-art wrench from CDN, // a brief radial impact flash synced to the strike, drop-shadow for weight. const wrenchHud = isRepairing ? `

` : ''; // woundedOverlay first so its CSS animations don't restart when other HUD pieces toggle. // (The renderer reconciles by DOM position — anything mounted before it stays stable.) return woundedOverlay + wrenchHud + generatorBoard + nearbyHint + whisper + bottomPanel + heartHud + staminaBar + devButtons + resumePill + unstuckOverlay + roleCardOverlay + catchOverlay; }

Spawn