call.status === 'open' && onSelect(call.id)}>

{call.code} · {call.id.slice(2)} {showOdds ? ( {Math.round(odds.p * 100)}% ) : ( {phaseLabel} )}

{call.type}

{call.location.toUpperCase()}

{call.teamSize === 2 && 2-OP} {call.req.map(r => ( {NS_SKILL_ABBR[r]} REQ ))} {call.bonus.map(b => ( {NS_SKILL_ABBR[b]} + ))} {opAssigned && UNIT {opAssigned}}

); } function CallsPanel({ calls, selectedCallId, onSelect, bestOddsFor }) { const open = calls.filter(c => c.status !== 'resolved' && c.status !== 'failed'); return (

Incoming · Ch. 7 {open.length} ACTIVE

{open.length === 0 && (

— quiet on the wire —

)} {open.map(c => { const assignedNames = (c.assignedOpIds || []) .map(id => { const o = NS_ROSTER.find(x => x.id === id); return o ? o.codename : id; }) .join(' & '); return ( ); })}

); } // ─── Operatives panel ─────────────────────────────────────────────── function OpCard({ op, opState, odds, picked, busy, onAssign }) { const targetable = odds != null && !busy; const classes = ['op-card']; if (picked) classes.push('picked'); else if (targetable) classes.push('compatible'); if (busy) classes.push('busy'); if (opState.status === 'resting') classes.push('resting'); if (opState.status === 'down') classes.push('down'); const statusLabel = { available: 'AVAILABLE · HQ', enroute: `EN ROUTE · ETA ${opState.eta}s`, onscene: `ON SCENE · ${opState.workLeft}s`, returning: `RETURNING · ${opState.eta}s`, resting: 'RESTING', }[opState.status]; return (

!busy && onAssign(op.id)}>

{op.codename[0]}

{op.codename}

{op.role}

{bestSkills(op).map(({ k, v }) => ( = 2 ? ' hi' : '')}>{NS_SKILL_ABBR[k]} · {v} ))}

{statusLabel} {picked ? ( PICKED ✓ ) : targetable ? ( {Math.round(odds * 100)}% ▸ ) : null}

); } function OpsPanel({ opsDisplay, selectedCall, onAssign, oddsFor, teamOddsFor, pendingOps }) { const teamSize = selectedCall ? (selectedCall.teamSize || 1) : 1; return (

Roster · 6 ON CALL NIGHTSHIFT

{selectedCall && teamSize === 2 && (

CO-DISPATCH · SELECT {teamSize} UNITS · {pendingOps.length}/{teamSize}

)} {NS_ROSTER.map(op => { const opState = opsDisplay[op.id]; const busy = opState.status !== 'available'; const picked = pendingOps.includes(op.id); let odds = null; if (selectedCall && !busy && !picked) { odds = teamSize === 1 ? oddsFor(selectedCall, op) : teamOddsFor(selectedCall, [...pendingOps, op.id]); } return ( ); })}

); } // ─── Radio log ─────────────────────────────────────────────────────── function RadioPanel({ log }) { return (

{log.slice(-30).reverse().map((l) => (

{l.time} {l.tag.toUpperCase()} {l.body}

))}

{[...Array(14)].map((_, i) => ( ))}

RADIO · 154.235 MHz SIGNAL 98%

WEATHER RAIN · 51°F

); } // ─── Intro overlay ────────────────────────────────────────────────── function Intro({ onStart, onContinue, hasSave, bestScore, sceneFailed }) { return (

◂ ALL DESIGN DOCS

CHAPTER ONE

Night·Shift

DISPATCH PROTOTYPE · 06:00 OF DAYLIGHT TO GO

SHIFT 19:00 → 03:00

WIRE CH. 7 PRIVATE

RUN ≈ 6 MIN

OPS 6 ON CALL

{hasSave ? ( ) : ( )} {bestScore > 0 && (

BEST TAKE · {fmtMoney(bestScore)}

)} {sceneFailed && (

3D CITY UNAVAILABLE (WEBGL) · DISPATCH STILL RUNS

)}

CLICK A CALL ON THE LEFT, THEN AN OPERATIVE ON THE RIGHT TO DISPATCH.
MATCH THE SKILL TAGS. KEEP CITY HEAT BELOW THE LINE.

); } // ─── End of shift ─────────────────────────────────────────────────── function EndShift({ score, onRestart, show }) { if (!show) return null; return (

03:00 · SHIFT COMPLETE

Sun's up.

Closed

{score.closed}

Failed

{score.failed}

Missed

{score.missed || 0}

Take

{fmtMoney(score.cash)}

); } // ─── Map banter bubbles ───────────────────────────────────────────── function BanterBubbles({ banter, tick }) { if (!window.NightshiftScene || !banter || !banter.length) return null; return ( {banter.map(b => { const pos = NightshiftScene.gridToScreen(b.cell.x, b.cell.z, 9); return (

{b.text}

); })} ); } // ─── Mid-job event overlay ────────────────────────────────────────── function EventOverlay({ event, tick, onResolve }) { if (!event) return null; const timeLeft = Math.max(0, event.deadline - tick); const frac = Math.max(0, Math.min(1, timeLeft / event.timer)); return (

{event.code} · {event.type} {event.location.toUpperCase()}

{event.prompt}

{event.options.map((o, i) => ( ))}

); } // ─── Minigame: quick-hack (Phase C1) ──────────────────────────────── // A cursor sweeps a track; lock it inside the live band to beat the hack. // Beat → the event option's win effect is guaranteed; skip or miss → the // loop falls back to a plain skill roll. Difficulty (band width + sweep // speed) comes from the on-scene op's Tech level via NSData.minigameSpec. function QuickHack({ mg, onFinish }) { const { useState, useEffect, useRef } = React; const spec = mg.spec; const band = spec.band, speed = spec.speed, total = spec.timer; const [cursor, setCursor] = useState(0); const [timeLeft, setTimeLeft] = useState(total); const [result, setResult] = useState(null); // null | 'win' | 'miss' const center = useRef(band / 2 + Math.random() * (1 - band)); const lo = center.current - band / 2, hi = center.current + band / 2; const cursorRef = useRef(0); cursorRef.current = cursor; const doneRef = useRef(false); const finish = (didWin) => { if (doneRef.current) return; doneRef.current = true; setResult(didWin ? 'win' : 'miss'); setTimeout(() => onFinish(didWin), 700); }; const lock = () => finish(cursorRef.current >= lo && cursorRef.current <= hi); useEffect(() => { const start = performance.now(); let raf; function frame(now) { const t = (now - start) / 1000; const left = Math.max(0, total - t); setTimeLeft(left); const phase = (t * speed) % 1; // triangle wave 0→1→0 setCursor(phase < 0.5 ? phase * 2 : 2 - phase * 2); if (left <= 0) { finish(false); return; } if (!doneRef.current) raf = requestAnimationFrame(frame); } raf = requestAnimationFrame(frame); const onKey = (e) => { if (e.code === 'Space' || e.key === ' ') { e.preventDefault(); lock(); } }; window.addEventListener('keydown', onKey); return () => { cancelAnimationFrame(raf); window.removeEventListener('keydown', onKey); }; }, []); return (

{mg.label} {spec.title} · {NS_SKILL_ABBR[spec.skill]} {mg.level}

{spec.hint}

Beat it to lock the play · skip or miss falls back to a {NS_SKILL_ABBR[spec.skill]} roll.

); } // Lockpick (Stealth): hold to turn the pin up, release inside the "give". // Overshoot past the give and the cylinder slips (fail). function LockPick({ mg, onFinish }) { const { useState, useEffect, useRef } = React; const spec = mg.spec; const band = spec.band, rate = spec.speed, total = spec.timer; const center = useRef(0.30 + Math.random() * Math.max(0.05, 0.62 - band)); const lo = center.current, hi = center.current + band; const [pos, setPos] = useState(0); const [timeLeft, setTimeLeft] = useState(total); const [result, setResult] = useState(null); const posRef = useRef(0), heldRef = useRef(false), doneRef = useRef(false); const finish = (didWin) => { if (doneRef.current) return; doneRef.current = true; setResult(didWin ? 'win' : 'miss'); setTimeout(() => onFinish(didWin), 700); }; const press = () => { if (!doneRef.current) heldRef.current = true; }; const release = () => { if (doneRef.current || !heldRef.current) return; heldRef.current = false; finish(posRef.current >= lo && posRef.current <= hi); }; useEffect(() => { const start = performance.now(); let last = start, raf; function frame(now) { const dt = (now - last) / 1000; last = now; setTimeLeft(Math.max(0, total - (now - start) / 1000)); if (heldRef.current) { posRef.current = Math.min(1, posRef.current + rate * dt); setPos(posRef.current); if (posRef.current >= 1) { finish(false); return; } // slipped past the give } if (total - (now - start) / 1000 <= 0) { finish(false); return; } if (!doneRef.current) raf = requestAnimationFrame(frame); } raf = requestAnimationFrame(frame); const kd = (e) => { if ((e.code === 'Space' || e.key === ' ') && !e.repeat) { e.preventDefault(); press(); } }; const ku = (e) => { if (e.code === 'Space' || e.key === ' ') { e.preventDefault(); release(); } }; window.addEventListener('keydown', kd); window.addEventListener('keyup', ku); window.addEventListener('mouseup', release); window.addEventListener('touchend', release); return () => { cancelAnimationFrame(raf); window.removeEventListener('keydown', kd); window.removeEventListener('keyup', ku); window.removeEventListener('mouseup', release); window.removeEventListener('touchend', release); }; }, []); return (

{mg.label}{spec.title} · {NS_SKILL_ABBR[spec.skill]} {mg.level}

{spec.hint}

Release in the give to set the pin · skip or slip falls back to a {NS_SKILL_ABBR[spec.skill]} roll.

); } // Stabilize (Medical): vitals drift down; hold to push them up. Keep them in // the green for the cumulative count to win. function Stabilize({ mg, onFinish }) { const { useState, useEffect, useRef } = React; const spec = mg.spec; const band = spec.band, drift = spec.speed, need = spec.hold, total = spec.timer, lift = 0.72; const lo = Math.max(0, 0.55 - band / 2), hi = Math.min(1, 0.55 + band / 2); const [val, setVal] = useState(0.5); const [held, setHeld] = useState(0); const [timeLeft, setTimeLeft] = useState(total); const [result, setResult] = useState(null); const valRef = useRef(0.5), accRef = useRef(0), heldRef = useRef(false), doneRef = useRef(false); const finish = (didWin) => { if (doneRef.current) return; doneRef.current = true; setResult(didWin ? 'win' : 'miss'); setTimeout(() => onFinish(didWin), 700); }; const press = () => { if (!doneRef.current) heldRef.current = true; }; const release = () => { heldRef.current = false; }; useEffect(() => { const start = performance.now(); let last = start, raf; function frame(now) { const dt = (now - last) / 1000; last = now; const left = Math.max(0, total - (now - start) / 1000); setTimeLeft(left); let v = valRef.current + (heldRef.current ? lift : -drift) * dt; v = Math.max(0, Math.min(1, v)); valRef.current = v; setVal(v); if (v >= lo && v <= hi) { accRef.current += dt; setHeld(accRef.current); } if (accRef.current >= need) { finish(true); return; } if (left <= 0) { finish(false); return; } if (!doneRef.current) raf = requestAnimationFrame(frame); } raf = requestAnimationFrame(frame); const kd = (e) => { if ((e.code === 'Space' || e.key === ' ') && !e.repeat) { e.preventDefault(); press(); } }; const ku = (e) => { if (e.code === 'Space' || e.key === ' ') { e.preventDefault(); release(); } }; window.addEventListener('keydown', kd); window.addEventListener('keyup', ku); window.addEventListener('mouseup', release); window.addEventListener('touchend', release); return () => { cancelAnimationFrame(raf); window.removeEventListener('keydown', kd); window.removeEventListener('keyup', ku); window.removeEventListener('mouseup', release); window.removeEventListener('touchend', release); }; }, []); const frac = Math.min(1, held / need); const inBand = val >= lo && val <= hi; return (

{mg.label}{spec.title} · {NS_SKILL_ABBR[spec.skill]} {mg.level}

{spec.hint}

Hold vitals in the green for {need.toFixed(1)}s · skip or fail falls back to a {NS_SKILL_ABBR[spec.skill]} roll.

); } // Marquee hack (Phase C3a): route the avatar token through the node-grid maze // to the green goal node. Arrow keys (desktop) or the on-screen d-pad (mobile). // Reach the goal → guaranteed win; skip or time out → falls back to a Tech roll. const HACK_STEP = 90, HACK_MARGIN = 34; function hackKey(a, b) { return a < b ? a + '-' + b : b + '-' + a; } const HACK_DELTA = { U: [0, -1], D: [0, 1], L: [-1, 0], R: [1, 0] }; const HACK_ARROW = { U: '▲', D: '▼', L: '◀', R: '▶' }; function HackGame({ mg, onFinish }) { const { useState, useEffect, useRef } = React; const spec = mg.spec; const closed = spec.closedEdges || {}; const gates = spec.gates || {}; const edgeSet = useRef(new Set(spec.edges)).current; const [cur, setCur] = useState(spec.start); const [timeLeft, setTimeLeft] = useState(spec.timer); const [result, setResult] = useState(null); const [fragIds, setFragIds] = useState([]); const [keyIds, setKeyIds] = useState([]); const [building, setBuilding] = useState(0); // gate id being built, 0 = none const [seqIdx, setSeqIdx] = useState(0); const [bad, setBad] = useState(0); // bumps to flash a wrong key const [builtVer, setBuiltVer] = useState(0); // bumps when a gate is built (forces re-render) const curRef = useRef(spec.start), doneRef = useRef(false); const fragsRef = useRef(new Set()), keysRef = useRef(new Set()), builtRef = useRef(new Set()); const buildingRef = useRef(0), seqIdxRef = useRef(0); const nodeMap = useRef(null); if (!nodeMap.current) { nodeMap.current = {}; spec.nodes.forEach(n => nodeMap.current[n.id] = n); } const passable = (id) => { const n = nodeMap.current[id]; return !n.lock || keysRef.current.has(n.lock); }; const edgeOpen = (a, b) => { const g = closed[hackKey(a, b)]; return !g || builtRef.current.has(g); }; const adjRef = useRef(null); const rebuildAdj = () => { const a = {}; spec.nodes.forEach(n => a[n.id] = []); spec.edges.forEach(e => { const g = closed[e]; if (g && !builtRef.current.has(g)) return; const [x, y] = e.split('-').map(Number); a[x].push(y); a[y].push(x); }); adjRef.current = a; }; if (!adjRef.current) rebuildAdj(); const [pur, setPur] = useState(spec.pursuer ? spec.pursuer.start : -1); const [caught, setCaught] = useState(false); const purRef = useRef(spec.pursuer ? spec.pursuer.start : -1), pacc = useRef(0); // Shortest-path next hop from the daemon toward the player, over OPEN wires. const nextHop = (from, to) => { if (from === to) return from; const prev = {}; const seen = new Set([from]); const q = [from]; while (q.length) { const u = q.shift(); if (u === to) break; for (const v of adjRef.current[u]) if (!seen.has(v)) { seen.add(v); prev[v] = u; q.push(v); } } if (!(to in prev)) return from; let c = to; while (prev[c] !== from) c = prev[c]; return c; }; const px = (c) => HACK_MARGIN + c * HACK_STEP; const py = (r) => HACK_MARGIN + r * HACK_STEP; const W = (spec.cols - 1) * HACK_STEP + 2 * HACK_MARGIN; const H = (spec.rows - 1) * HACK_STEP + 2 * HACK_MARGIN; const finish = (didWin) => { if (doneRef.current) return; doneRef.current = true; setResult(didWin ? 'win' : 'miss'); setTimeout(() => onFinish(didWin), 750); }; const move = (dc, dr) => { if (doneRef.current) return; const c = curRef.current % spec.cols, r = Math.floor(curRef.current / spec.cols); const nc = c + dc, nr = r + dr; if (nc < 0 || nc >= spec.cols || nr < 0 || nr >= spec.rows) return; const t = nr * spec.cols + nc; if (!edgeSet.has(hackKey(curRef.current, t))) return; // no wire between the nodes if (!edgeOpen(curRef.current, t)) return; // unbuilt path — build it at the gate node if (!passable(t)) return; // locked until its passkey is tripped curRef.current = t; setCur(t); if (purRef.current === t) { setCaught(true); finish(false); return; } // stepped onto the daemon const n = nodeMap.current[t]; if (n.frag && !fragsRef.current.has(t)) { fragsRef.current.add(t); setFragIds([...fragsRef.current]); } if (n.key && !keysRef.current.has(n.key)) { keysRef.current.add(n.key); setKeyIds([...keysRef.current]); } if (t === spec.goal && fragsRef.current.size >= spec.fragCount) finish(true); }; const startBuild = () => { const n = nodeMap.current[curRef.current]; if (!n || !n.gate || builtRef.current.has(n.gate)) return; buildingRef.current = n.gate; setBuilding(n.gate); seqIdxRef.current = 0; setSeqIdx(0); }; const cancelBuild = () => { buildingRef.current = 0; setBuilding(0); seqIdxRef.current = 0; setSeqIdx(0); }; const feedSeq = (d) => { const gid = buildingRef.current; if (!gid) return; const seq = gates[gid].seq; if (d === seq[seqIdxRef.current]) { seqIdxRef.current++; setSeqIdx(seqIdxRef.current); if (seqIdxRef.current >= seq.length) { // built! builtRef.current.add(gid); rebuildAdj(); buildingRef.current = 0; setBuilding(0); seqIdxRef.current = 0; setSeqIdx(0); setBuiltVer(v => v + 1); } } else { seqIdxRef.current = 0; setSeqIdx(0); setBad(b => b + 1); } }; const inputDir = (d) => { if (doneRef.current) return; if (buildingRef.current) feedSeq(d); else { const m = HACK_DELTA[d]; move(m[0], m[1]); } }; useEffect(() => { const t0 = performance.now(); let last = t0, raf; function frame(now) { const dt = Math.min(0.1, (now - last) / 1000); last = now; // cap so a tab-switch can't teleport the daemon const left = Math.max(0, spec.timer - (now - t0) / 1000); setTimeLeft(left); if (spec.pursuer) { pacc.current += dt; while (pacc.current >= spec.pursuer.step && !doneRef.current) { pacc.current -= spec.pursuer.step; const nh = nextHop(purRef.current, curRef.current); purRef.current = nh; setPur(nh); if (nh === curRef.current) { setCaught(true); finish(false); return; } } } if (left <= 0) { finish(false); return; } if (!doneRef.current) raf = requestAnimationFrame(frame); } raf = requestAnimationFrame(frame); const kd = (e) => { const dir = { ArrowUp: 'U', ArrowDown: 'D', ArrowLeft: 'L', ArrowRight: 'R' }[e.key]; if (dir) { e.preventDefault(); inputDir(dir); return; } if ((e.key === 'Enter' || e.key === 'b' || e.key === 'B') && !buildingRef.current) { e.preventDefault(); startBuild(); } }; window.addEventListener('keydown', kd); return () => { cancelAnimationFrame(raf); window.removeEventListener('keydown', kd); }; }, []); const cc = cur % spec.cols, cr = Math.floor(cur / spec.cols); const gc = spec.goal % spec.cols, gr = Math.floor(spec.goal / spec.cols); const hex = (x, y, rad) => { let pts = ''; for (let i = 0; i < 6; i++) { const a = Math.PI / 180 * (60 * i - 90); pts += (x + rad * Math.cos(a)).toFixed(1) + ',' + (y + rad * Math.sin(a)).toFixed(1) + ' '; } return pts.trim(); }; const onGate = (() => { const n = nodeMap.current[cur]; return n && n.gate && !builtRef.current.has(n.gate) ? n.gate : 0; })(); const buildSeq = building ? gates[building].seq : null; return (

{mg.label}{spec.title} · {NS_SKILL_ABBR[spec.skill]} {mg.level}

{spec.hint}

{building ? (

BUILD PATH {buildSeq.map((d, i) => {HACK_ARROW[d]})}

) : null}

{onGate && !building ? : }

{caught ? 'INTRUDER DETECTED — LOCKED OUT' : result === 'win' ? 'TERMINAL BREACHED ✓' : result === 'miss' ? 'LOCKED OUT — FELL BACK' : building ? 'Enter the arrow sequence to build the path.' : onGate ? 'Build node — open the closed (dashed) wire from here.' : 'Keys ' + fragIds.length + '/' + spec.fragCount + ' · build dashed wires · dodge the daemon · reach the green node.'}

); } function MinigameOverlay({ minigame, onFinish }) { if (!minigame) return null; const key = minigame.callId + ':' + minigame.eventIdx; const kind = minigame.spec.kind; if (kind === 'hack') return ; if (kind === 'lockpick') return ; if (kind === 'stabilize') return ; return ; } // ─── Main app ──────────────────────────────────────────────────────── function App() { const game = useGameLoop({ callInterval: [9, 16] }); const dismissIntro = () => { const el = document.getElementById('intro'); if (el) { el.classList.add('hidden'); setTimeout(() => { el.style.display = 'none'; }, 800); } }; const handleStart = () => { dismissIntro(); game.start(); }; const handleContinue = () => { dismissIntro(); game.continueShift(); }; return (

{!game.sceneFailed && } ); } const root = ReactDOM.createRoot(document.getElementById('react-root')); root.render();