// Direction B — TERMINAL (real photo data) // Center stage shows one real photo, surrounded by a chain strip. // Fetches linked photos using the same API as the /live page. // ?preview=true bypasses the odyssey rate limiter. function Terminal({ speed = 1, mode = 'original', showCounter = true, showNav = true }) { const { chainRef, chainLen, extend } = usePhotoChain(); const [idx, setIdx] = React.useState(0); const [tick, setTick] = React.useState(0); const [searchA, setSearchA] = React.useState(''); const [searchB, setSearchB] = React.useState(''); const [searching, setSearching] = React.useState(false); const [searchError, setSearchError] = React.useState(null); const [searchResult, setSearchResult] = React.useState(null); // Auto-advance through the chain React.useEffect(() => { if (chainLen === 0) return; const dwell = 3200 / speed; const t = setTimeout(() => { setIdx(i => { const next = i + 1; // Pre-fetch when nearing the end if (next + 3 >= chainLen) extend(); return next < chainLen ? next : i; }); }, dwell); return () => clearTimeout(t); }, [idx, speed, chainLen, extend]); // Bootstrap on mount React.useEffect(() => { extend(); }, [extend]); // Live clock React.useEffect(() => { const t = setInterval(() => setTick(x => x + 1), 1000); return () => clearInterval(t); }, []); const now = new Date(); const timeStr = now.toUTCString().split(' ').slice(1, 5).join(' '); const stats = window.ARCHIVE_STATS || {}; const peopleCount = Number(stats.people || (window.INITIAL_NAMES ? window.INITIAL_NAMES.length : 25390)).toLocaleString(); const photosCount = Number(stats.photos || 48112).toLocaleString(); // Nothing to show yet if (chainLen === 0) { return (
LOADING ARCHIVE…
); } const safeIdx = Math.min(idx, chainLen - 1); const curEntry = chainRef.current[safeIdx]; const cur = curEntry.photo; const curPeople = cur.People || []; // Build chain strip: 3 before, current, 3 after const WINDOW = 3; const chain = []; for (let k = -WINDOW; k <= WINDOW; k++) { const i = safeIdx + k; if (i < 0 || i >= chainLen) { chain.push({ entry: null, offset: k }); // placeholder slot } else { chain.push({ entry: chainRef.current[i], offset: k }); } } // Determine shared people with prev/next for highlighting const prevEntry = safeIdx > 0 ? chainRef.current[safeIdx - 1] : null; const nextEntry = safeIdx < chainLen - 1 ? chainRef.current[safeIdx + 1] : null; const sharedIn = prevEntry ? prevEntry.outboundName : null; // person connecting prev → cur const sharedOut = curEntry.outboundName; // person connecting cur → next // Search handler const handleSearch = async () => { if (!searchA.trim() || !searchB.trim() || searching) return; setSearching(true); setSearchError(null); setSearchResult(null); try { const resp = await fetch('/api/match', { method: 'POST', headers: { 'Content-Type': 'application/json', 'xsrf-token': getCsrfToken() }, body: JSON.stringify({ first: searchA.trim(), last: searchB.trim() }), }); const data = await resp.json(); if (!resp.ok) { setSearchError(data.error || 'Query failed.'); } else if (!data.photos || data.photos.length === 0) { setSearchError('No connection found between these two people.'); } else { setSearchResult(data); } } catch (e) { setSearchError('Connection error. Please try again.'); } finally { setSearching(false); } }; const fillChip = (a, b) => { setSearchA(a); setSearchB(b); setSearchResult(null); setSearchError(null); }; return (
{/* Left rail — metadata */} {/* Center — chain strip */}
{chain.map(({ entry, offset }) => { if (!entry) { // Placeholder slot (before beginning or past end of chain) const dist = Math.abs(offset); return (
); } const isCur = offset === 0; const dist = Math.abs(offset); const photo = entry.photo; // Connection line to the right (outboundName links this to the next entry) const sharedHere = offset < WINDOW ? entry.outboundName : null; return (
0 ? ' term-card--future' : '')} style={{ '--dist': dist }} >
{photo.Year || photo.year || ''} {(photo.PhotoID || '').toUpperCase().slice(0, 8)}
{sharedHere && offset < WINDOW && (
{sharedHere}
)}
); })}
{/* Center caption */}
{curPeople.map((p, i) => { const nm = p.Name || p.name; const linked = nm === sharedOut || nm === sharedIn; return ( {nm} {i < curPeople.length - 1 && ·} ); })}
{/* Right rail — live readouts */} {/* Bottom search strip */}
All of our lives overlap in the Network of Time.
{searchResult ? (
CONNECTION · {searchResult.photos.length} STEPS {searchResult.photos.map((p, i) => ( {(p.people || p.People || []).map(pp => pp.Name || pp.name || pp).join(', ') || '—'} {i < searchResult.photos.length - 1 && ( → )} ))} Odyssey →
) : (
PERSON 01 { setSearchA(e.target.value); setSearchError(null); }} onKeyDown={e => e.key === 'Enter' && handleSearch()} />
↔
PERSON 02 { setSearchB(e.target.value); setSearchError(null); }} onKeyDown={e => e.key === 'Enter' && handleSearch()} />
)}
{searchError ? {searchError} : <> try: } or explore via Odyssey →
); } // ─── Terminal photo card ─────────────────────────────────────── // Renders a real photo within the chain strip card. // The card size is controlled by CSS (.term-card-img width/opacity rules). function TerminalPhotoCard({ photo, mode, isCur, highlightPerson }) { const [loaded, setLoaded] = React.useState(false); const [annotations, setAnnotations] = React.useState([]); const handleLoad = React.useCallback((e) => { const img = e.target; const natW = img.naturalWidth || 400; const natH = img.naturalHeight || 500; const cardW = isCur ? 320 : 200; // Actual rendered height when image fills the CSS-controlled width at natural AR const actualH = Math.round(cardW * natH / natW); const anns = parseAnnotations(photo); const parsed = (photo.People || []).map(person => { const ann = anns.find(a => (a.personName === person.Name || a.name === person.Name) || (a.personId === person.PersonID || a.personID === person.PersonID || a.PersonID === person.PersonID) ); if (!ann) return null; const box = extractBox(ann, natW, natH, cardW, actualH); if (!box) return null; return { name: person.Name, box }; }).filter(Boolean); setAnnotations(parsed); setLoaded(true); }, [photo, isCur]); const cardW = isCur ? 320 : 200; const cardH = cardW * 1.25; const highlightAnn = highlightPerson && annotations.find(a => a.name === highlightPerson); return (
{photo.PhotoDescription {/* Vignette */}
{/* Highlight ring on shared person (current card only) */} {highlightAnn && loaded && (
)}
); } Object.assign(window, { Terminal });