/* screens.jsx — SelectScreen, GameScreen, ScoreScreen. Exports to window. */
const { useState: useS, useEffect: useE, useRef: useR } = React;
/* ============ HUBSPOT LIST PICKER ============ */
function ListScreen({ data, titleArt, onPick, mode, conn, loading, err, onLogout, onConnect }) {
const [hover, setHover] = useS(null);
const [search, setSearch] = useS("");
const lists = (data.lists || []).filter(L => !search || (L.name || "").toLowerCase().includes(search.toLowerCase()));
return (
{mode === "live" ? (
{conn && conn.portalId ? "PORTAL #" + conn.portalId : "PORTAL"}{conn && conn.email ? " · " + conn.email : ""}
DISCONNECT
) : (
CONNECT HUBSPOT ▸
)}
CHOOSE YOUR HIT LIST
Pick a HubSpot list. Every contact and company inside it becomes a demon in the arena. What dies in the arena, dies in the CRM. You can resurrect the survivors. The dead, mostly.
{(loading || err || (data && data.needsReconnect)) && (
{loading ? ▮ SCANNING YOUR CRM FOR SEGMENTS…
: err ? ✗ Couldn't load lists: {err}
: Reconnect to grant access to your Lists — RECONNECT }
)}
{lists.map(L => {
const on = hover === L.id;
return (
setHover(L.id)} onMouseLeave={() => setHover(null)} onClick={() => onPick(L)}
style={{ cursor: "pointer", background: "var(--panel)", border: `3px solid ${on ? "var(--accent)" : "var(--panel-edge)"}`,
padding: "20px 22px", display: "flex", flexDirection: "column", gap: 12, position: "relative",
boxShadow: on ? "inset 0 0 0 1px var(--accent), 0 0 18px rgba(0,0,0,.5)" : "inset -3px -4px 0 rgba(0,0,0,.4)",
transform: on ? "translateY(-2px)" : "none", transition: "transform .08s, border-color .08s" }}>
{L.blurb}
{L.total} RECORDS
{L.contacts}p · {L.companies}co
{on ? "DEPLOY ▸" : "owner: " + L.owner}
);
})}
{lists.length === 0 && !loading && (
{search ? "No lists match “" + search + "”." : "No lists found."}
)}
);
}
/* ============ TARGET SELECT ============ */
function SelectScreen({ list, titleArt, selectedIds, toggle, selectAll, clearAll, filter, setFilter, onStart, onBack, hasMore, onLoadMore, loadingMore }) {
const all = list.members;
const recs = filter === "contacts" ? all.filter(r => r.type === "contact")
: filter === "companies" ? all.filter(r => r.type === "company") : all;
const count = selectedIds.size;
const tabs = [["both", "ALL " + all.length], ["contacts", "PEOPLE " + list.contacts], ["companies", "COMPANIES " + list.companies]];
return (
◂ ALL LISTS
{list.name}
{list.blurb}
{/* tabs */}
{tabs.map(([k, label]) => (
setFilter(k)} style={{
fontFamily: "var(--font)", fontSize: "calc(8px * var(--fscale))", padding: "9px 13px", cursor: "pointer",
color: filter === k ? "#120806" : "var(--ink)", background: filter === k ? "var(--accent)" : "var(--panel)",
border: "0", boxShadow: filter === k ? "inset -2px -3px 0 rgba(0,0,0,.4)" : "inset -2px -3px 0 rgba(0,0,0,.5), inset 2px 2px 0 rgba(255,255,255,.08)",
letterSpacing: ".05em", textTransform: "uppercase",
}}>{label}
))}
selectAll(recs)} style={ghostBtn}>SELECT ALL
CLEAR
{/* list */}
{recs.map(r => {
const on = selectedIds.has(r.id);
return (
toggle(r.id)} style={{
display: "grid", gridTemplateColumns: "26px 1fr auto", gap: 14, alignItems: "center",
padding: "11px 16px", cursor: "pointer", borderBottom: "1px solid rgba(255,255,255,.05)",
background: on ? "color-mix(in srgb, var(--accent) 16%, transparent)" : "transparent",
}}>
{on ? "✕" : ""}
{r.line1}
{r.line2} · {r.reason}
{r.type === "company" ? "CO" : "PERSON"}
);
})}
{hasMore && (
{loadingMore ? "LOADING…" : "LOAD NEXT 100 ▾"}
)}
{/* footer */}
{count}
DEMON{count === 1 ? "" : "S"} QUEUED FOR EXTERMINATION
ENTER THE ARENA ▸
);
}
const ghostBtn = {
fontFamily: "var(--font)", fontSize: "calc(8px * var(--fscale))", padding: "9px 12px", cursor: "pointer",
color: "var(--ink-dim)", background: "transparent", border: "1px solid var(--panel-edge)", letterSpacing: ".06em",
};
/* ============ GAME ============ */
function GameScreen({ records, theme, font, gore, spriteStyle, hudLayout, onKill, onGameOver }) {
const canvasRef = useR(null);
const labelRef = useR(null);
const engRef = useR(null);
const [stats, setStats] = useS({ health: 100, armor: 50, ammo: 18, kills: 0, total: records.length, remaining: records.length, combo: 0, acc: 100, weapon: "UNSUBSCRIBE CANNON", weaponId: "unsub", ammoType: "shells", store: { bullets: 70, shells: 18, rockets: 0, cells: 0 }, owned: { saw: 1, cold: 1, unsub: 1 } });
const [bark, setBark] = useS(null);
const [hurt, setHurt] = useS(false);
const [hint, setHint] = useS(true);
const [intro, setIntro] = useS(null);
const hurtT = useR(null);
useE(() => {
const eng = new DoomEngine(canvasRef.current, {
theme, font, gore, spriteStyle, enemies: records, labelCanvas: labelRef.current,
callbacks: {
onStats: s => setStats(s),
onKill: rec => onKill(rec),
onHurt: () => { setHurt(true); clearTimeout(hurtT.current); hurtT.current = setTimeout(() => setHurt(false), 320); },
onBark: (text, kind) => setBark({ text, id: Math.random(), kind }),
onGameOver: (reason, s) => onGameOver(reason, s),
},
});
engRef.current = eng;
window.__eng = eng; // dev: lets tooling aim the camera for screenshots
if (new URLSearchParams(location.search).get("dev") === "game") {
eng.god = true; eng.freeze = true;
eng.owned = { saw: 1, cold: 1, unsub: 1, rip: 1, gat: 1, nuke: 1, bfd: 1 };
eng.ammoStore = { bullets: 400, shells: 200, rockets: 40, cells: 50 };
}
requestAnimationFrame(() => { eng.resize(); eng.start(); });
const onR = () => eng.resize();
window.addEventListener("resize", onR);
const D = window.DOOMSPOT_DATA;
setIntro({ level: D.levelNames[(Math.random() * D.levelNames.length) | 0], tip: D.loadingTips[(Math.random() * D.loadingTips.length) | 0] });
const introT = setTimeout(() => setIntro(null), 2800);
const t = setTimeout(() => setHint(false), 5000);
return () => { window.removeEventListener("resize", onR); clearTimeout(t); clearTimeout(introT); eng.destroy(); };
// eslint-disable-next-line
}, []);
// live tweak updates
useE(() => { engRef.current && engRef.current.setOption("theme", theme); }, [theme]);
useE(() => { engRef.current && engRef.current.setOption("gore", gore); }, [gore]);
useE(() => { engRef.current && engRef.current.setOption("font", font); }, [font]);
useE(() => { engRef.current && engRef.current.setOption("spriteStyle", spriteStyle); }, [spriteStyle]);
return (
e.preventDefault()}
style={{ position: "absolute", inset: 0, width: "100%", height: "100%", imageRendering: "pixelated", cursor: "none", display: "block" }} />
{/* crisp full-resolution overlay for nameplates (drawn by the engine) — keeps record names legible above the pixelated world */}
ENTERING
{intro.level}
{intro.tip}
)}
{/* low-health pulse */}
{stats.health < 34 &&
}
{/* controls hint */}
{hint && (
WASD MOVE MOUSE AIM CLICK / SPACE PURGE 1–6 / WHEEL SWITCH GUN(SHIFT run · arrows / Q·E turn · find more guns in the rooms · click once to lock mouse)
)}
onGameOver("retreat", { kills: stats.kills, total: stats.total, acc: stats.acc, maxCombo: stats.combo, health: stats.health })} style={{ position: "absolute", top: 14, right: 16, zIndex: 20, fontFamily: "var(--font)", fontSize: "calc(8px * var(--fscale))", color: "var(--ink-dim)", background: "rgba(0,0,0,.55)", border: "1px solid var(--panel-edge)", padding: "8px 11px", cursor: "pointer", letterSpacing: ".05em" }}>SURRENDER ✕
{/* current weapon name + ammo */}
{stats.weapon || ""}{stats.ammo === -1 ? " · ∞" : " · " + stats.ammo}
);
}
/* HUD layouts: classic / corners / minimal */
function Hud({ stats, hurt, layout }) {
const item = (label, val, color) => (
);
if (layout === "minimal") {
return (
♥{stats.health}
▮{stats.ammo}
☠{stats.kills}/{stats.total}
);
}
if (layout === "corners") {
return (
☠ {stats.kills}/{stats.total}
ACC {stats.acc}%
);
}
// ===== authentic Doom status bar =====
const bigNum = (val, color) => (
{val}
);
const lbl = txt => {txt}
;
const cellBevel = { background: "rgba(0,0,0,.32)", boxShadow: "inset 2px 2px 0 rgba(0,0,0,.5), inset -2px -2px 0 rgba(255,255,255,.05)", padding: "10px 16px", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" };
const SLOTS = { saw: 1, cold: 2, unsub: 3, rip: 3, gat: 4, nuke: 5, bfd: 6 };
const owned = stats.owned || {};
const ownedSlots = {}; Object.keys(owned).forEach(id => { if (owned[id] && SLOTS[id] != null) ownedSlots[SLOTS[id]] = true; });
const curSlot = SLOTS[stats.weaponId];
const arms = [1, 2, 3, 4, 5, 6].map(n => [String(n), !!ownedSlots[n], n === curSlot]);
const store = stats.store || {};
const curType = stats.ammoType;
const typeKey = { BULL: "bullets", SHEL: "shells", RKT: "rockets", CEL: "cells" };
const ammoTypes = [["BULL", store.bullets || 0], ["SHEL", store.shells || 0], ["RKT", store.rockets || 0], ["CEL", store.cells || 0]];
return (
{/* AMMO (current weapon) */}
{bigNum(stats.ammo === -1 ? "∞" : stats.ammo, "var(--accent)")}{lbl(curType ? curType.toUpperCase() : "MELEE")}
{/* HEALTH */}
{bigNum(stats.health + "%", stats.health < 34 ? "var(--accent)" : "var(--accent)")}{lbl("HEALTH")}
{/* ARMS */}
{arms.map(([n, on, cur]) => (
{n}
))}
{lbl("ARMS")}
{/* FACE */}
{/* ARMOR */}
{bigNum(stats.armor + "%", "var(--accent2)")}{lbl("ARMOR")}
{/* KILLS (replaces Doom's keys panel — thematic) */}
{bigNum(stats.kills + "/" + stats.total, "var(--good)")}{lbl("PURGED")}
{/* AMMO TYPES */}
{ammoTypes.map(([k, cur]) => {
const on = typeKey[k] === curType;
return (
{k}
{cur}
);
})}
{/* stat grid */}
{[["PURGED", `${stats.kills}/${stats.total}`, "var(--accent)"], ["ACCURACY", stats.acc + "%", "var(--ink)"], ["MAX COMBO", "x" + stats.maxCombo, "var(--accent2)"], ["HP LEFT", stats.health + "%", "var(--good)"]].map(([l, v, c]) => (
))}
{/* resurrect list */}
THE GRAVEYARD · {deleted.length} deleted
tick to resurrect
{deleted.length === 0 &&
No casualties. Suspicious.
}
{deleted.map(r => {
const res = restore.has(r.id);
return (
toggle(r.id)} style={{ display: "grid", gridTemplateColumns: "26px 1fr auto", gap: 14, alignItems: "center", padding: "10px 16px", cursor: "pointer", borderBottom: "1px solid rgba(255,255,255,.05)", background: res ? "color-mix(in srgb, var(--good) 14%, transparent)" : "transparent", opacity: res ? 1 : .62 }}>
{res ? "↺" : ""}
{res ? "RESTORE" : "DELETED"}
);
})}
{restore.size} spared · {keep} {mode === "live" ? "to be ARCHIVED in HubSpot" : "purged (demo only)"}
◂ PLAY AGAIN
onConfirm([...restore])}>{mode === "live" ? "COMMIT TO HUBSPOT ▸" : "FINISH (DEMO) ▸"}
);
}
/* ============ CONNECT GATE ============ */
function ConnectScreen({ titleArt, conn, onConnect, onPractice }) {
const loading = conn === null;
return (
Connect HubSpot to drag your real stale contacts and companies into the arena and purge them for good — or play the demo with fake leads first. What dies in the arena, dies in your CRM.
{loading ? "LOADING…" : "CONNECT HUBSPOT ▸"}
PLAY THE DEMO
HOW TO PLAY 1–6 switch weapons — from the Unsubscribe Cannon to the Workflow Decimator. Arrow keys to move, Space (or mouse) to shoot.
);
}
Object.assign(window, { ConnectScreen, ListScreen, SelectScreen, GameScreen, ScoreScreen, Hud });