f0ee7dbdab
Both were built and tested but never wired in — SeancePage.tsx was reimplementing the same markup inline. Removes the duplication.
1027 lines
33 KiB
TypeScript
1027 lines
33 KiB
TypeScript
// The main séance screen: ghost backdrop, planchette board, mode panels
|
||
// (wire / evp / radio / ouija / emf), transmission log and direct-contact row.
|
||
//
|
||
// Wiring notes:
|
||
// - PlanchetteBoard runs its own rAF loop and ticks the PlanchetteMachine
|
||
// itself; this page only enqueues utterance text and polls snapshot()
|
||
// (non-mutating) for the ouija panel readout.
|
||
// - Each mode panel is conditionally mounted, so mic / SDR teardown happens
|
||
// in the panel's unmount cleanup — switching modes or leaving the page
|
||
// always releases the hardware.
|
||
|
||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||
import type { FormEvent } from 'react'
|
||
import { Link, Navigate } from 'react-router-dom'
|
||
import { useTranslation } from 'react-i18next'
|
||
import { useAuth } from '../state/auth'
|
||
import { SeanceProvider, useSeance } from '../state/seance'
|
||
import type { Toast } from '../state/seance'
|
||
import { GhostCanvas } from '../three/GhostCanvas'
|
||
import type { GhostMood, GhostVisualState } from '../three/GhostScene'
|
||
import { PlanchetteBoard } from '../components/PlanchetteBoard'
|
||
import { MatrixView } from '../components/MatrixView'
|
||
import { GraphView } from '../components/GraphView'
|
||
import { Transcript } from '../components/Transcript'
|
||
import { EntityCard } from '../components/EntityCard'
|
||
import { TelemetryReadout } from '../components/TelemetryReadout'
|
||
import { PlanchetteMachine } from '../lib/planchette'
|
||
import type { PlanchetteSnapshot } from '../lib/planchette'
|
||
import { EvpListener } from '../lib/evp'
|
||
import { EmfSensorListener } from '../lib/emf'
|
||
import {
|
||
isSecureContext,
|
||
isSupported,
|
||
RtlSdr,
|
||
SpectrumAnomalyDetector,
|
||
SWEEP_END_MHZ,
|
||
SWEEP_START_MHZ,
|
||
} from '../lib/sdr'
|
||
import { persistLanguage, storedLanguage } from '../i18n'
|
||
import type { Language, Mode } from '../lib/types'
|
||
import './SeancePage.css'
|
||
|
||
const MODES: readonly Mode[] = ['wire', 'evp', 'radio', 'ouija', 'emf']
|
||
// Fallback tab labels for modes the i18n catalogs don't carry yet.
|
||
const MODE_LABEL_DEFAULTS: Partial<Record<Mode, string>> = { emf: 'FIELD' }
|
||
|
||
// Board-area views; labels fall back to these until the i18n JSONs land.
|
||
const VIEWS = [
|
||
{ id: 'board', fallback: 'BOARD' },
|
||
{ id: 'matrix', fallback: 'MATRIX' },
|
||
{ id: 'graphs', fallback: 'GRAPHS' },
|
||
] as const
|
||
type BoardView = (typeof VIEWS)[number]['id']
|
||
const TOAST_TTL_MS = 6000
|
||
/** SDR sample rate must match RtlSdr.open()'s default. */
|
||
const SDR_SAMPLE_RATE_HZ = 2_048_000
|
||
|
||
export function SeancePage() {
|
||
const { user, checking } = useAuth()
|
||
const { t } = useTranslation()
|
||
|
||
if (checking) {
|
||
return (
|
||
<div className="seance-loading" role="status">
|
||
<div className="loading-sigil" aria-hidden>
|
||
⟁
|
||
</div>
|
||
<p className="loading-text">{t('common.loading')}</p>
|
||
</div>
|
||
)
|
||
}
|
||
if (!user) return <Navigate to="/enter" replace />
|
||
|
||
return (
|
||
<SeanceProvider>
|
||
<SeanceSession username={user.username} />
|
||
</SeanceProvider>
|
||
)
|
||
}
|
||
|
||
export default SeancePage
|
||
|
||
// ---- the séance itself (rendered inside SeanceProvider) ----
|
||
|
||
function SeanceSession({ username }: { username: string }) {
|
||
const {
|
||
state,
|
||
audioPlayer,
|
||
setMode,
|
||
setPassive,
|
||
setLanguage,
|
||
summon,
|
||
ask,
|
||
playUtterance,
|
||
dismissToast,
|
||
} = useSeance()
|
||
const { logout } = useAuth()
|
||
const { t, i18n } = useTranslation()
|
||
|
||
const [departed, setDeparted] = useState(false)
|
||
const [question, setQuestion] = useState('')
|
||
const [dossierOpen, setDossierOpen] = useState(true)
|
||
const [view, setView] = useState<BoardView>('board')
|
||
|
||
// The planchette machine lives for the whole session; the board ticks it.
|
||
const machineRef = useRef(new PlanchetteMachine())
|
||
const [boardSnap, setBoardSnap] = useState<PlanchetteSnapshot | null>(null)
|
||
|
||
// Tell the backend which tongue we whisper in (queued while connecting).
|
||
useEffect(() => {
|
||
setLanguage(storedLanguage())
|
||
}, [setLanguage])
|
||
|
||
// Feed every fresh utterance (greetings, fragments, replies) to the board.
|
||
const lastEnqueuedRef = useRef<string | null>(null)
|
||
useEffect(() => {
|
||
const uts = state.utterances
|
||
if (uts.length === 0) return
|
||
const lastSeen = lastEnqueuedRef.current
|
||
const idx = lastSeen === null ? -1 : uts.findIndex((u) => u.id === lastSeen)
|
||
if (lastSeen !== null && idx === -1) return // store was capped; don't re-spell history
|
||
const fresh = uts.slice(idx + 1)
|
||
for (const u of fresh) machineRef.current.enqueue(u.text)
|
||
lastEnqueuedRef.current = uts[uts.length - 1].id
|
||
}, [state.utterances])
|
||
|
||
// Poll the machine's snapshot for the ouija readout (board owns ticking).
|
||
useEffect(() => {
|
||
let lastSig = ''
|
||
const id = window.setInterval(() => {
|
||
const s = machineRef.current.snapshot()
|
||
const sig = `${s.phase}|${s.word ?? ''}|${s.index}|${s.queued.length}|${s.spelled.length}`
|
||
if (sig !== lastSig) {
|
||
lastSig = sig
|
||
setBoardSnap(s)
|
||
}
|
||
}, 150)
|
||
return () => window.clearInterval(id)
|
||
}, [])
|
||
|
||
// Open the dossier whenever a new presence steps through.
|
||
const entityId = state.entity?.id ?? null
|
||
useEffect(() => {
|
||
if (entityId) setDossierOpen(true)
|
||
}, [entityId])
|
||
|
||
const ghostVisual = useMemo<GhostVisualState | null>(
|
||
() =>
|
||
state.entity
|
||
? { hue: state.entity.visual.hue, form: state.entity.visual.form }
|
||
: null,
|
||
[state.entity],
|
||
)
|
||
|
||
const ghostMood: GhostMood = state.speakingId
|
||
? 'speaking'
|
||
: state.status === 'gathering' || state.status === 'summoning'
|
||
? 'gathering'
|
||
: state.status === 'attuning'
|
||
? 'attuning'
|
||
: 'idle'
|
||
|
||
const getAmplitude = useCallback(() => audioPlayer.getAmplitude(), [audioPlayer])
|
||
|
||
const switchLanguage = (lang: Language) => {
|
||
setLanguage(lang)
|
||
void i18n.changeLanguage(lang)
|
||
persistLanguage(lang)
|
||
}
|
||
|
||
const handleLogout = () => {
|
||
void logout()
|
||
.catch(() => undefined)
|
||
.finally(() => setDeparted(true))
|
||
}
|
||
|
||
const streaming = state.replyStreaming.active
|
||
const submitQuestion = (e: FormEvent) => {
|
||
e.preventDefault()
|
||
if (streaming) return
|
||
ask(question)
|
||
setQuestion('')
|
||
}
|
||
|
||
if (departed) return <Navigate to="/" replace />
|
||
|
||
const entityHue = state.entity?.visual.hue ?? 150
|
||
const entity = state.entity
|
||
|
||
return (
|
||
<div className="seance-page">
|
||
<GhostCanvas
|
||
className="seance-ghost"
|
||
visual={ghostVisual}
|
||
mood={ghostMood}
|
||
getAmplitude={getAmplitude}
|
||
/>
|
||
|
||
{/* ---- top bar ---- */}
|
||
<header className="seance-topbar">
|
||
<div className="seance-brand">
|
||
<span className="brand-sigil" aria-hidden>
|
||
⟁
|
||
</span>
|
||
{t('common.appName')}
|
||
</div>
|
||
|
||
<nav className="seance-modes" aria-label="modes">
|
||
{MODES.map((m) => (
|
||
<button
|
||
key={m}
|
||
type="button"
|
||
className={`mode-tab ${state.mode === m ? 'active' : ''}`}
|
||
onClick={() => setMode(m)}
|
||
>
|
||
{t(`seance.modes.${m}`, { defaultValue: MODE_LABEL_DEFAULTS[m] })}
|
||
</button>
|
||
))}
|
||
</nav>
|
||
|
||
<div className="seance-top-right">
|
||
<label className="passive-toggle" title={t('seance.passive')}>
|
||
<input
|
||
type="checkbox"
|
||
checked={state.passive}
|
||
onChange={(e) => setPassive(e.target.checked)}
|
||
/>
|
||
<span className="passive-track" aria-hidden />
|
||
<span className="passive-label">{t('seance.passive')}</span>
|
||
</label>
|
||
|
||
<div className="lang-toggle" role="group" aria-label="language">
|
||
<button
|
||
type="button"
|
||
className={state.language === 'en' ? 'active' : ''}
|
||
onClick={() => switchLanguage('en')}
|
||
>
|
||
EN
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={state.language === 'es' ? 'active' : ''}
|
||
onClick={() => switchLanguage('es')}
|
||
>
|
||
ES
|
||
</button>
|
||
</div>
|
||
|
||
<Link to="/shop" className="seance-codex-link">
|
||
{t('nav.shop', { defaultValue: 'shop' })}
|
||
</Link>
|
||
|
||
<Link to="/codex" className="seance-codex-link">
|
||
{t('nav.codex')}
|
||
</Link>
|
||
|
||
<span className="seance-user" title={username}>
|
||
{username}
|
||
</span>
|
||
<button type="button" className="seance-logout" onClick={handleLogout}>
|
||
{t('nav.logout')}
|
||
</button>
|
||
|
||
<span
|
||
className={`conn-dot conn-${state.connection}`}
|
||
title={t(`seance.connection.${state.connection}`)}
|
||
aria-label={t(`seance.connection.${state.connection}`)}
|
||
/>
|
||
</div>
|
||
</header>
|
||
|
||
{/* ---- veil banner: 'connecting' is a neutral tuning state;
|
||
only an unstable or dead line raises the warning ---- */}
|
||
{state.connection === 'connecting' && (
|
||
<div className="seance-conn-banner conn-connecting" role="status">
|
||
<span className="conn-glyph" aria-hidden>
|
||
⟁
|
||
</span>
|
||
{t('seance.views.tuning', { defaultValue: 'tuning the veil…' })}
|
||
</div>
|
||
)}
|
||
{(state.connection === 'unstable' || state.connection === 'closed') && (
|
||
<div className={`seance-conn-banner conn-${state.connection}`} role="alert">
|
||
<span className="conn-glyph" aria-hidden>
|
||
⟁
|
||
</span>
|
||
{t(`seance.connection.${state.connection}`)}
|
||
</div>
|
||
)}
|
||
|
||
{/* ---- main: board + side column ---- */}
|
||
<main className="seance-main">
|
||
<section className="seance-board-wrap">
|
||
{/* view switcher: BOARD / MATRIX / GRAPHS (styles in MatrixView.css,
|
||
buttons reuse the .mode-tab look) */}
|
||
<nav className="seance-view-tabs" aria-label="views">
|
||
{VIEWS.map((v) => (
|
||
<button
|
||
key={v.id}
|
||
type="button"
|
||
className={`mode-tab ${view === v.id ? 'active' : ''}`}
|
||
onClick={() => setView(v.id)}
|
||
>
|
||
{t(`seance.views.${v.id}`, { defaultValue: v.fallback })}
|
||
</button>
|
||
))}
|
||
</nav>
|
||
|
||
{/* The PlanchetteMachine lives in this page, so unmounting the board
|
||
component for another view loses nothing. */}
|
||
{view === 'board' && <PlanchetteBoard machine={machineRef.current} hue={entityHue} />}
|
||
{view === 'matrix' && (
|
||
<MatrixView
|
||
anomalies={state.anomalies}
|
||
utterances={state.utterances}
|
||
telemetry={state.telemetry}
|
||
entityName={state.entity?.name ?? null}
|
||
active={view === 'matrix'}
|
||
/>
|
||
)}
|
||
{view === 'graphs' && (
|
||
<GraphView
|
||
telemetry={state.telemetry}
|
||
anomalies={state.anomalies}
|
||
anomalyCount={state.anomalyCount}
|
||
entityName={state.entity?.name ?? null}
|
||
active={view === 'graphs'}
|
||
/>
|
||
)}
|
||
|
||
{state.status && (
|
||
<div className="seance-status-overlay" aria-live="polite">
|
||
<span className="status-sigil" aria-hidden />
|
||
<span className="status-text">{t(`seance.status.${state.status}`)}</span>
|
||
</div>
|
||
)}
|
||
</section>
|
||
|
||
<aside className="seance-side">
|
||
<EntityCard
|
||
entity={entity}
|
||
isNew={state.entityIsNew}
|
||
open={dossierOpen}
|
||
onToggleOpen={() => setDossierOpen((o) => !o)}
|
||
/>
|
||
|
||
<section className="mode-panel">
|
||
{state.mode === 'wire' && <WirePanel />}
|
||
{state.mode === 'evp' && <EvpPanel />}
|
||
{state.mode === 'radio' && <RadioPanel />}
|
||
{state.mode === 'ouija' && <OuijaPanel snapshot={boardSnap} />}
|
||
{state.mode === 'emf' && <EmfPanel />}
|
||
</section>
|
||
</aside>
|
||
</main>
|
||
|
||
{/* ---- bottom: transmission log + direct contact ---- */}
|
||
<footer className="seance-bottom">
|
||
<div className="seance-transcript-wrap">
|
||
<div className="seance-transcript-title">
|
||
<span>{t('seance.transcriptTitle')}</span>
|
||
<span className="anomaly-count">
|
||
{t('seance.anomaly.count', { count: state.anomalyCount })}
|
||
</span>
|
||
</div>
|
||
<Transcript
|
||
entries={state.transcript}
|
||
streaming={state.replyStreaming}
|
||
speakingId={state.speakingId}
|
||
onReplay={playUtterance}
|
||
/>
|
||
</div>
|
||
|
||
<form className="seance-contact" onSubmit={submitQuestion}>
|
||
<input
|
||
type="text"
|
||
value={question}
|
||
onChange={(e) => setQuestion(e.target.value)}
|
||
placeholder={t('seance.askPlaceholder')}
|
||
disabled={streaming}
|
||
maxLength={280}
|
||
aria-label={t('seance.ask')}
|
||
/>
|
||
<button type="submit" className="ask-btn" disabled={streaming || !question.trim()}>
|
||
{t('seance.ask')}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="summon-btn"
|
||
onClick={summon}
|
||
disabled={state.status === 'summoning'}
|
||
>
|
||
{state.status === 'summoning' ? t('seance.summoning') : t('seance.summon')}
|
||
</button>
|
||
</form>
|
||
</footer>
|
||
|
||
{/* ---- toasts ---- */}
|
||
<div className="seance-toasts" aria-live="polite">
|
||
{state.toasts.map((toast) => (
|
||
<ToastCard key={toast.id} toast={toast} onDismiss={dismissToast} />
|
||
))}
|
||
</div>
|
||
|
||
{/* ---- CRT overlays (above everything, never interactive) ---- */}
|
||
<div className="seance-scanlines" aria-hidden />
|
||
<div className="seance-vignette" aria-hidden />
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ---- toasts ----
|
||
|
||
function ToastCard({ toast, onDismiss }: { toast: Toast; onDismiss: (id: number) => void }) {
|
||
const { t } = useTranslation()
|
||
useEffect(() => {
|
||
const id = window.setTimeout(() => onDismiss(toast.id), TOAST_TTL_MS)
|
||
return () => window.clearTimeout(id)
|
||
}, [toast.id, onDismiss])
|
||
|
||
return (
|
||
<div className="seance-toast" role="alert">
|
||
<span className="toast-glyph" aria-hidden>
|
||
⚠
|
||
</span>
|
||
<span className="toast-msg">
|
||
{t(`seance.toast.${toast.code}`, { defaultValue: toast.message })}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
className="toast-dismiss"
|
||
onClick={() => onDismiss(toast.id)}
|
||
aria-label={t('common.dismiss')}
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ---- wire panel: raw line telemetry ----
|
||
|
||
function WirePanel() {
|
||
const { state } = useSeance()
|
||
const { t } = useTranslation()
|
||
|
||
return (
|
||
<div className="wire-panel">
|
||
<TelemetryReadout telemetry={state.telemetry} />
|
||
<p className="wire-count">{t('seance.anomaly.count', { count: state.anomalyCount })}</p>
|
||
{!state.passive && (
|
||
<p className="wire-hint dim">
|
||
{t('seance.wire.hint', {
|
||
defaultValue:
|
||
'the wire knocks loudest when nobody is touching it — flip passive listening on and let the line murmur on its own.',
|
||
})}
|
||
</p>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ---- EVP panel: microphone voice-band listening ----
|
||
|
||
function EvpPanel() {
|
||
const { sendAnomaly } = useSeance()
|
||
const { t } = useTranslation()
|
||
const [listening, setListening] = useState(false)
|
||
const [pending, setPending] = useState(false)
|
||
const [denied, setDenied] = useState(false)
|
||
const [bandDb, setBandDb] = useState<number | null>(null)
|
||
const listenerRef = useRef<EvpListener | null>(null)
|
||
const canvasRef = useRef<HTMLCanvasElement | null>(null)
|
||
const lastMeterRef = useRef(0)
|
||
|
||
// Release the microphone when the panel unmounts (mode switch / leaving).
|
||
useEffect(
|
||
() => () => {
|
||
const l = listenerRef.current
|
||
listenerRef.current = null
|
||
if (l) void l.stop()
|
||
},
|
||
[],
|
||
)
|
||
|
||
const drawScope = (db: Float32Array) => {
|
||
const canvas = canvasRef.current
|
||
if (!canvas) return
|
||
const ctx = canvas.getContext('2d')
|
||
if (!ctx) return
|
||
const w = canvas.width
|
||
const h = canvas.height
|
||
ctx.clearRect(0, 0, w, h)
|
||
const n = db.length
|
||
const step = Math.max(1, Math.floor(n / 160))
|
||
const bw = w / (n / step)
|
||
for (let i = 0, x = 0; i < n; i += step, x++) {
|
||
const v = db[i] // dB, roughly -160..0
|
||
const norm = Math.max(0, Math.min(1, (v + 110) / 80))
|
||
const bh = Math.max(1, norm * h)
|
||
ctx.fillStyle = `hsla(150 90% 65% / ${0.25 + norm * 0.6})`
|
||
ctx.fillRect(x * bw, h - bh, Math.max(1, bw - 0.5), bh)
|
||
}
|
||
}
|
||
|
||
const start = async () => {
|
||
if (pending || listening) return
|
||
setDenied(false)
|
||
setPending(true)
|
||
const listener = listenerRef.current ?? new EvpListener()
|
||
listenerRef.current = listener
|
||
try {
|
||
await listener.start({
|
||
onAnomaly: (a) => sendAnomaly('evp', a.frequency, a.magnitude),
|
||
onFrame: (db) => {
|
||
drawScope(db)
|
||
const now = performance.now()
|
||
if (now - lastMeterRef.current > 200) {
|
||
lastMeterRef.current = now
|
||
// Voice band ≈ 300–3400 Hz (assuming the usual 48 kHz / 2048 FFT).
|
||
const n = db.length
|
||
const lo = Math.floor((300 / 24000) * n)
|
||
const hi = Math.min(n - 1, Math.ceil((3400 / 24000) * n))
|
||
let peak = -Infinity
|
||
for (let i = lo; i <= hi; i++) if (db[i] > peak) peak = db[i]
|
||
setBandDb(Number.isFinite(peak) ? peak : null)
|
||
}
|
||
},
|
||
})
|
||
if (listenerRef.current === listener) setListening(true)
|
||
} catch {
|
||
if (listenerRef.current === listener) listenerRef.current = null
|
||
setDenied(true)
|
||
setBandDb(null)
|
||
} finally {
|
||
setPending(false)
|
||
}
|
||
}
|
||
|
||
const stop = async () => {
|
||
const l = listenerRef.current
|
||
listenerRef.current = null
|
||
if (l) await l.stop()
|
||
setListening(false)
|
||
setBandDb(null)
|
||
}
|
||
|
||
return (
|
||
<div className="evp-panel">
|
||
<canvas ref={canvasRef} width={520} height={90} className="evp-scope" aria-hidden />
|
||
<div className="evp-readout">
|
||
<span className="dim">{t('seance.evp.band')}</span>
|
||
<span className="evp-level">{bandDb !== null ? `${bandDb.toFixed(0)} dB` : '—'}</span>
|
||
</div>
|
||
{listening && (
|
||
<p className="evp-listening flicker">
|
||
<span className="rec-dot" aria-hidden />
|
||
{t('seance.evp.listening')}
|
||
</p>
|
||
)}
|
||
{denied && (
|
||
<div className="panel-notice error">
|
||
<h4>{t('seance.evp.deniedTitle')}</h4>
|
||
<p>{t('seance.evp.denied')}</p>
|
||
</div>
|
||
)}
|
||
<button
|
||
type="button"
|
||
className="panel-action"
|
||
onClick={() => void (listening ? stop() : start())}
|
||
disabled={pending}
|
||
>
|
||
{listening ? t('seance.evp.stop') : t('seance.evp.start')}
|
||
</button>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ---- radio panel: RTL-SDR FM sweep ----
|
||
|
||
function RadioPanel() {
|
||
const { sendAnomaly } = useSeance()
|
||
const { t } = useTranslation()
|
||
// WebUSB hides itself entirely outside secure ground (https / localhost).
|
||
const secure = useMemo(() => isSecureContext(), [])
|
||
const supported = useMemo(() => isSupported(), [])
|
||
const [phase, setPhase] = useState<'idle' | 'busy' | 'sweeping'>('idle')
|
||
const [error, setError] = useState<{ kind: 'cancelled' | 'claim' | 'other'; message?: string } | null>(null)
|
||
const [tunedMhz, setTunedMhz] = useState<number | null>(null)
|
||
const sdrRef = useRef<RtlSdr | null>(null)
|
||
const detectorRef = useRef<SpectrumAnomalyDetector | null>(null)
|
||
const canvasRef = useRef<HTMLCanvasElement | null>(null)
|
||
const lastTuneUiRef = useRef(0)
|
||
|
||
// Power down the dongle on unmount (mode switch / leaving the page).
|
||
useEffect(
|
||
() => () => {
|
||
const sdr = sdrRef.current
|
||
sdrRef.current = null
|
||
detectorRef.current = null
|
||
if (sdr) {
|
||
sdr.stopSweep()
|
||
void sdr.close()
|
||
}
|
||
},
|
||
[],
|
||
)
|
||
|
||
const drawWaterfallRow = (db: Float64Array) => {
|
||
const canvas = canvasRef.current
|
||
if (!canvas) return
|
||
const ctx = canvas.getContext('2d')
|
||
if (!ctx) return
|
||
const w = canvas.width
|
||
const h = canvas.height
|
||
// Scroll the existing waterfall down one row, paint the new one on top.
|
||
ctx.drawImage(canvas, 0, 1)
|
||
const n = db.length
|
||
const bw = w / n
|
||
for (let i = 0; i < n; i++) {
|
||
const norm = Math.max(0, Math.min(1, (db[i] + 90) / 70))
|
||
ctx.fillStyle = `hsl(${272 - norm * 122} ${45 + norm * 50}% ${5 + norm * 52}%)`
|
||
ctx.fillRect(i * bw, 0, Math.ceil(bw), 1)
|
||
}
|
||
}
|
||
|
||
const stop = useCallback(() => {
|
||
const sdr = sdrRef.current
|
||
sdrRef.current = null
|
||
detectorRef.current = null
|
||
if (sdr) {
|
||
sdr.stopSweep()
|
||
void sdr.close()
|
||
}
|
||
setPhase('idle')
|
||
setTunedMhz(null)
|
||
}, [])
|
||
|
||
const start = async () => {
|
||
if (!supported || sdrRef.current || phase === 'busy') return
|
||
setError(null)
|
||
setPhase('busy')
|
||
const sdr = new RtlSdr()
|
||
try {
|
||
await sdr.requestDevice()
|
||
await sdr.open()
|
||
} catch (err) {
|
||
const msg = err instanceof Error ? err.message : String(err)
|
||
const name = err instanceof DOMException ? err.name : ''
|
||
// NotFoundError: the seeker dismissed the picker — a gentle nudge only.
|
||
// Security/Network/claim failures: something else is holding the
|
||
// dongle (kernel DVB driver, missing WinUSB driver) — troubleshoot.
|
||
setError(
|
||
name === 'NotFoundError' || /no device selected/i.test(msg)
|
||
? { kind: 'cancelled' }
|
||
: name === 'SecurityError' || name === 'NetworkError' || /claim/i.test(msg)
|
||
? { kind: 'claim' }
|
||
: { kind: 'other', message: msg },
|
||
)
|
||
setPhase('idle')
|
||
void sdr.close()
|
||
return
|
||
}
|
||
sdrRef.current = sdr
|
||
detectorRef.current = new SpectrumAnomalyDetector()
|
||
setPhase('sweeping')
|
||
void sdr
|
||
.sweep(SWEEP_START_MHZ * 1e6, SWEEP_END_MHZ * 1e6, 1_800_000, {
|
||
onSpectrum: (centerHz, db) => {
|
||
if (sdrRef.current !== sdr) return
|
||
drawWaterfallRow(db)
|
||
const now = performance.now()
|
||
if (now - lastTuneUiRef.current > 250) {
|
||
lastTuneUiRef.current = now
|
||
setTunedMhz(centerHz / 1e6)
|
||
}
|
||
const det = detectorRef.current
|
||
if (det) {
|
||
const a = det.process(centerHz, SDR_SAMPLE_RATE_HZ, db, now)
|
||
if (a) sendAnomaly('radio', a.frequency, a.magnitude)
|
||
}
|
||
},
|
||
onError: (err) => {
|
||
if (sdrRef.current === sdr) setError({ kind: 'other', message: err.message })
|
||
},
|
||
})
|
||
.then(() => {
|
||
if (sdrRef.current === sdr) setPhase('idle')
|
||
})
|
||
.catch((err: unknown) => {
|
||
if (sdrRef.current === sdr) {
|
||
setError({ kind: 'other', message: err instanceof Error ? err.message : String(err) })
|
||
setPhase('idle')
|
||
}
|
||
})
|
||
}
|
||
|
||
if (!secure) {
|
||
return (
|
||
<div className="panel-notice">
|
||
<h4>{t('seance.radio.unsupportedTitle')}</h4>
|
||
<p>
|
||
{t('seance.radio.insecure', {
|
||
defaultValue:
|
||
'the radio dead only speak through consecrated ground — open this site via its https address.',
|
||
})}
|
||
</p>
|
||
<p className="dim troubleshoot">
|
||
{t('seance.radio.insecureHint', {
|
||
defaultValue: 'localhost counts as hallowed; a bare http://lan-ip does not.',
|
||
})}
|
||
</p>
|
||
<button type="button" className="panel-action" disabled>
|
||
{t('seance.radio.start')}
|
||
</button>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (!supported) {
|
||
return (
|
||
<div className="panel-notice">
|
||
<h4>{t('seance.radio.unsupportedTitle')}</h4>
|
||
<p>{t('seance.radio.unsupported')}</p>
|
||
<p className="dim troubleshoot">{t('seance.radio.troubleshoot')}</p>
|
||
<button type="button" className="panel-action" disabled>
|
||
{t('seance.radio.start')}
|
||
</button>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="radio-panel">
|
||
<canvas ref={canvasRef} width={256} height={110} className="radio-waterfall" aria-hidden />
|
||
<div className="radio-readout">
|
||
{tunedMhz !== null ? (
|
||
<span className="tuned-freq">{tunedMhz.toFixed(1)} MHz</span>
|
||
) : (
|
||
<span className="dim">—</span>
|
||
)}
|
||
{phase === 'sweeping' && (
|
||
<span className="dim flicker">
|
||
{t('seance.radio.sweeping', { start: SWEEP_START_MHZ, end: SWEEP_END_MHZ })}
|
||
</span>
|
||
)}
|
||
</div>
|
||
{error?.kind === 'cancelled' && (
|
||
<div className="panel-notice">
|
||
<p>{t('seance.radio.noDevice')}</p>
|
||
</div>
|
||
)}
|
||
{error?.kind === 'claim' && (
|
||
<div className="panel-notice error">
|
||
<h4>{t('seance.radio.claimFailed')}</h4>
|
||
<p>
|
||
{t('seance.radio.claimFix', {
|
||
defaultValue:
|
||
'linux: the kernel driver dvb_usb_rtl28xxu is holding the dongle — `sudo modprobe -r dvb_usb_rtl28xxu` frees it until reboot (a udev rule banishes it for good). windows: swap the driver for WinUSB with Zadig.',
|
||
})}
|
||
</p>
|
||
<button type="button" className="panel-subaction" onClick={() => void start()}>
|
||
{t('seance.radio.tryAgain', { defaultValue: 'try again' })}
|
||
</button>
|
||
</div>
|
||
)}
|
||
{error?.kind === 'other' && (
|
||
<div className="panel-notice error">
|
||
<h4>{t('seance.radio.errorTitle', { defaultValue: 'the static pushed back' })}</h4>
|
||
<p>{error.message}</p>
|
||
</div>
|
||
)}
|
||
<button
|
||
type="button"
|
||
className="panel-action"
|
||
onClick={() => void (phase === 'sweeping' ? stop() : start())}
|
||
disabled={phase === 'busy'}
|
||
>
|
||
{phase === 'sweeping' ? t('seance.radio.stop') : t('seance.radio.start')}
|
||
</button>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ---- ouija panel: what the planchette is doing ----
|
||
|
||
function OuijaPanel({ snapshot }: { snapshot: PlanchetteSnapshot | null }) {
|
||
const { t } = useTranslation()
|
||
const word = snapshot?.word ?? null
|
||
|
||
return (
|
||
<div className="ouija-panel">
|
||
{word ? (
|
||
<div className="ouija-spelling">
|
||
<span className="dim ouija-spelling-label">
|
||
{t('seance.ouija.spelling', { defaultValue: 'the planchette spells' })}
|
||
</span>
|
||
<div className="ouija-word" aria-live="polite">
|
||
{word.split('').map((ch, i) => (
|
||
<span
|
||
key={i}
|
||
className={
|
||
snapshot && i === snapshot.index ? 'lit' : snapshot && i < snapshot.index ? 'done' : ''
|
||
}
|
||
>
|
||
{ch}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<p className="dim ouija-drift">
|
||
{t('seance.ouija.drift', {
|
||
defaultValue: 'the planchette drifts, waiting for words — ask below, or summon.',
|
||
})}
|
||
</p>
|
||
)}
|
||
{snapshot && snapshot.spelled.length > 0 && (
|
||
<p className="ouija-history dim">{snapshot.spelled.slice(-6).join(' · ')}</p>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ---- EMF panel: the phone becomes a field meter ----
|
||
|
||
/** Highest field strength the gauge renders before pinning the needle. */
|
||
const EMF_GAUGE_MAX = 6
|
||
|
||
function EmfPanel() {
|
||
const { sendAnomaly } = useSeance()
|
||
const { t } = useTranslation()
|
||
const supported = useMemo(() => EmfSensorListener.isSupported(), [])
|
||
const [listening, setListening] = useState(false)
|
||
const [pending, setPending] = useState(false)
|
||
const [denied, setDenied] = useState(false)
|
||
const [field, setField] = useState<number | null>(null)
|
||
const [baseline, setBaseline] = useState<number | null>(null)
|
||
const listenerRef = useRef<EmfSensorListener | null>(null)
|
||
const canvasRef = useRef<HTMLCanvasElement | null>(null)
|
||
|
||
// Drop the sensor listeners when the panel unmounts (mode switch / leaving).
|
||
useEffect(
|
||
() => () => {
|
||
const l = listenerRef.current
|
||
listenerRef.current = null
|
||
if (l) l.stop()
|
||
},
|
||
[],
|
||
)
|
||
|
||
const drawGauge = (strength: number) => {
|
||
const canvas = canvasRef.current
|
||
if (!canvas) return
|
||
const ctx = canvas.getContext('2d')
|
||
if (!ctx) return
|
||
const w = canvas.width
|
||
const h = canvas.height
|
||
ctx.clearRect(0, 0, w, h)
|
||
const cx = w / 2
|
||
const cy = h - 14
|
||
const r = Math.min(w / 2 - 14, h - 30)
|
||
const norm = Math.max(0, Math.min(1, strength / EMF_GAUGE_MAX))
|
||
const hue = 150 + norm * 122 // phosphor at rest → violet when it surges
|
||
|
||
// Track arc.
|
||
ctx.lineWidth = 10
|
||
ctx.lineCap = 'round'
|
||
ctx.strokeStyle = 'rgba(124, 255, 178, 0.12)'
|
||
ctx.beginPath()
|
||
ctx.arc(cx, cy, r, Math.PI, 2 * Math.PI)
|
||
ctx.stroke()
|
||
|
||
// Lit arc.
|
||
if (norm > 0.004) {
|
||
ctx.strokeStyle = `hsla(${hue} 90% 68% / 0.92)`
|
||
ctx.shadowColor = `hsla(${hue} 90% 68% / 0.8)`
|
||
ctx.shadowBlur = 12
|
||
ctx.beginPath()
|
||
ctx.arc(cx, cy, r, Math.PI, Math.PI + norm * Math.PI)
|
||
ctx.stroke()
|
||
ctx.shadowBlur = 0
|
||
}
|
||
|
||
// Tick marks.
|
||
ctx.lineWidth = 1
|
||
ctx.strokeStyle = 'rgba(211, 233, 219, 0.25)'
|
||
for (let i = 0; i <= 8; i++) {
|
||
const a = Math.PI + (i / 8) * Math.PI
|
||
ctx.beginPath()
|
||
ctx.moveTo(cx + Math.cos(a) * (r - 10), cy + Math.sin(a) * (r - 10))
|
||
ctx.lineTo(cx + Math.cos(a) * (r - 15), cy + Math.sin(a) * (r - 15))
|
||
ctx.stroke()
|
||
}
|
||
|
||
// Needle.
|
||
const ang = Math.PI + norm * Math.PI
|
||
ctx.lineWidth = 2
|
||
ctx.strokeStyle = `hsla(${hue} 85% 78% / 0.95)`
|
||
ctx.beginPath()
|
||
ctx.moveTo(cx, cy)
|
||
ctx.lineTo(cx + Math.cos(ang) * (r - 20), cy + Math.sin(ang) * (r - 20))
|
||
ctx.stroke()
|
||
ctx.fillStyle = '#7cffb2'
|
||
ctx.beginPath()
|
||
ctx.arc(cx, cy, 3, 0, 2 * Math.PI)
|
||
ctx.fill()
|
||
}
|
||
|
||
// Paint the resting needle once (and whenever support is re-checked).
|
||
useEffect(() => {
|
||
if (supported) drawGauge(0)
|
||
}, [supported])
|
||
|
||
const start = async () => {
|
||
if (pending || listening || !supported) return
|
||
setDenied(false)
|
||
setPending(true)
|
||
const listener = listenerRef.current ?? new EmfSensorListener()
|
||
listenerRef.current = listener
|
||
try {
|
||
// iOS gates the senses behind an explicit, gesture-triggered grant.
|
||
if (EmfSensorListener.needsPermission()) {
|
||
const granted = await EmfSensorListener.requestPermission()
|
||
if (!granted) {
|
||
if (listenerRef.current === listener) setDenied(true)
|
||
return
|
||
}
|
||
}
|
||
if (listenerRef.current !== listener) return // unmounted mid-permission
|
||
listener.start({
|
||
onAnomaly: (a) => sendAnomaly('emf', a.frequency, a.magnitude),
|
||
onReading: (strength, base) => {
|
||
drawGauge(strength)
|
||
setField(strength)
|
||
setBaseline(base)
|
||
},
|
||
})
|
||
setListening(true)
|
||
} finally {
|
||
setPending(false)
|
||
}
|
||
}
|
||
|
||
const stop = () => {
|
||
const l = listenerRef.current
|
||
if (l) l.stop()
|
||
setListening(false)
|
||
setField(null)
|
||
setBaseline(null)
|
||
drawGauge(0)
|
||
}
|
||
|
||
const calibrate = () => {
|
||
listenerRef.current?.reset()
|
||
}
|
||
|
||
if (!supported) {
|
||
return (
|
||
<div className="panel-notice">
|
||
<h4>
|
||
{t('seance.emf.unsupportedTitle', { defaultValue: 'this vessel carries no field senses' })}
|
||
</h4>
|
||
<p>
|
||
{t('seance.emf.unsupported', {
|
||
defaultValue:
|
||
'a phone in your hand becomes the meter — this vessel has no motion senses to lend. open the veil on a phone, or let the other modes answer.',
|
||
})}
|
||
</p>
|
||
<button type="button" className="panel-action" disabled>
|
||
{t('seance.emf.start', { defaultValue: 'raise the meter' })}
|
||
</button>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="emf-panel">
|
||
<canvas ref={canvasRef} width={260} height={140} className="emf-gauge" aria-hidden />
|
||
<div className="emf-readout">
|
||
<span className="emf-level flicker">{field !== null ? field.toFixed(2) : '—'}</span>
|
||
<span className="emf-baseline dim">
|
||
{t('seance.emf.baseline', { defaultValue: 'resting field' })}{' '}
|
||
{baseline !== null ? baseline.toFixed(2) : '—'}
|
||
</span>
|
||
</div>
|
||
{listening && (
|
||
<p className="emf-listening flicker">
|
||
<span className="rec-dot" aria-hidden />
|
||
{t('seance.emf.listening', { defaultValue: 'feeling for disturbances in the field…' })}
|
||
</p>
|
||
)}
|
||
{denied && (
|
||
<div className="panel-notice error">
|
||
<h4>{t('seance.emf.deniedTitle', { defaultValue: 'the field senses stay shut' })}</h4>
|
||
<p>
|
||
{t('seance.emf.denied', {
|
||
defaultValue:
|
||
'this vessel refused its motion senses. grant motion access in your browser settings, then raise the meter again.',
|
||
})}
|
||
</p>
|
||
</div>
|
||
)}
|
||
<div className="emf-actions">
|
||
<button
|
||
type="button"
|
||
className="panel-action"
|
||
onClick={() => (listening ? stop() : void start())}
|
||
disabled={pending}
|
||
>
|
||
{listening
|
||
? t('seance.emf.stop', { defaultValue: 'ground the meter' })
|
||
: t('seance.emf.start', { defaultValue: 'raise the meter' })}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="panel-subaction"
|
||
onClick={calibrate}
|
||
disabled={!listening}
|
||
>
|
||
{t('seance.emf.calibrate', { defaultValue: 'calibrate' })}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|