// screens-terminal.jsx — Direction 1: OPS TERMINAL // Pure mono, ASCII rules, scanlines, no rounded corners, signal-orange + white const TERM = { bg: '#0A0A0E', panel: '#11111A', panelHi: '#16161F', line: '#26262F', line2: '#3A3A47', text: '#E8E8EF', textDim: '#7A7A88', textMute: '#4D4D58', ok: '#3DDC97', warn: '#FFB020', danger: '#FF3B30', }; // ─── Atoms ─── const TRule = ({ char = '─', color }) => (
{char.repeat(80)}
); const TStat = ({ on = true, char = '●' }) => ( {char} ); const TBtn = ({ children, accent, active, onClick, full, style }) => ( ); const TBracket = ({ children, accent }) => ( [ {children} ] ); // ─── Header strip used by most screens ─── function THeader({ title, sub, accent, right }) { return (
ADLEY // {sub || 'OPS'}
{title}
{right}
); } // ─── Bottom tab bar ─── const TABS = [ { id: 'home', label: 'SRV', icon: 'hard-drives' }, { id: 'map', label: 'MAP', icon: 'map-pin' }, { id: 'freqs', label: 'RF', icon: 'broadcast' }, { id: 'events', label: 'LOG', icon: 'list-bullets' }, { id: 'squad', label: 'SQD', icon: 'users-three' }, ]; function TTabBar({ screen, onChange, accent }) { return (
{TABS.map(t => ( ))}
); } // ─────────────────────────────────────────────── // HOME — Server list // ─────────────────────────────────────────────── function TerminalHome({ accent, onOpenServer }) { return (
[+] ADD } />
{SERVERS.length} LINKED 2 OWNED · 2 JOINED
{SERVERS.map((s, i) => (
onOpenServer && onOpenServer(s)} style={{ cursor: 'pointer', padding: '12px 0', borderTop: `1px solid ${TERM.line}`, position: 'relative' }}>
{s.tag} {s.verified && VFY} {s.owner && OWN}
{s.name}
{s.region} · WIPE +{s.wipe} · {s.host.split(':')[0]}
{String(s.players).padStart(3, '0')}
/ {s.max} POP
{s.fps}FPS · UP {s.uptime}
{/* mini load bar */}
{Array.from({ length: 30 }).map((_, j) => (
))}
{s.squad && (
SQD :: {s.squad}
)}
))}
// DISCOVER
); } // ─────────────────────────────────────────────── // SERVER SNAPSHOT // ─────────────────────────────────────────────── function TerminalSnapshot({ accent, onBack, onOpenMap }) { const s = SERVERS[0]; return (
SYNC :: 02:14:08
SNAPSHOT // {s.tag}
{s.name}
{s.host} · {s.region}
{/* Stat grid */}
{[ ['POP', `${s.players}/${s.max}`, accent], ['FPS', s.fps, TERM.ok], ['UPTIME', s.uptime, TERM.text], ['WIPE +', s.wipe, TERM.text], ].map(([k, v, col], i) => (
{k}
{v}
))}
{/* Armed RF list */}
┌─ ARMED RF · 2
{FREQS.slice(0, 2).map(f => (
│ {f.freq}
{f.label}
{f.grid} · {f.scope} · {f.locked ? 'LOCK' : 'OPEN'}
{f.triggered}
))} {/* Entities */}
┌─ ENTITIES · 4
{ENTITIES.map(e => (
[{e.kind}] {e.label} {e.grid}
))}
▸ MAP ▸ SAY/BROADCAST
); } // ─────────────────────────────────────────────── // WORLD MAP ★ HERO // ─────────────────────────────────────────────── function TerminalMap({ accent }) { const W = 372; const H = 372; return (
4500 · PROCEDURAL }/> {/* Map canvas */}
{/* grid */} {Array.from({ length: 25 }).map((_, i) => ( ))} {Array.from({ length: 25 }).map((_, i) => ( ))} {/* center crosshair */} {/* range rings — concentric dotted circles centered on map */} {[12, 22, 32, 42].map(r => ( ))} {/* off-center secondary cluster — gives depth without the peanut blob */} {[6, 11, 16].map(r => ( ))} {[5, 9, 13].map(r => ( ))} {/* axes */} {/* grid letters/numbers on edges */} {'ABCDEFGHIJKLMNOPQR'.split('').map((c, i) => (
{c}
))} {Array.from({ length: 18 }).map((_, i) => (
{String(i).padStart(2, '0')}
))} {/* Monuments */} {MONUMENTS.map(m => (
◆ {m.name}
))} {/* Entities */} {ENTITIES.map(e => (
{e.kind}·{e.grid}
))} {/* radar sweep */}
{/* Filter row */}
{['MONUMENTS', 'TC', 'BAGS', 'RAID', 'PVP', 'CARGO'].map((f, i) => ( ))}
{/* Map legend */}
■ TC ARMED · 1 ■ TC COLD · 1 ◆ T3 MON · 3 ◆ SAFE · 2
); } // ─────────────────────────────────────────────── // RAID ALERT (full screen takeover) — TACTICAL HUD treatment // ─────────────────────────────────────────────── function TerminalRaidAlert({ accent }) { return (
{/* Strobe bg */}
{/* Corner crosshairs */} {[['top:20px;left:20px', 'M0,0 L20,0 M0,0 L0,20'], ['top:20px;right:20px', 'M40,0 L20,0 M40,0 L40,20'], ['bottom:20px;left:20px', 'M0,40 L20,40 M0,40 L0,20'], ['bottom:20px;right:20px', 'M40,40 L20,40 M40,40 L40,20']].map(([pos, d], i) => ( p.split(':'))) }}> ))}
▲ INCOMING ▲
RAID
┃ TC TRIPPED ┃
{/* Big freq display */}
FREQUENCY
4763
MAIN TC · STORM-7
{/* Grid + base */}
GRID
G14
BASE
BLDG ALPHA
EU 3X MAX
▶ SIREN :: raid_siren.caf · LOOP
T+00:08 · 6 SQUADMATES NOTIFIED
⌖ JUMP TO MAP SILENCE 60s
); } // ─────────────────────────────────────────────── // LOCK SCREEN + LIVE ACTIVITY // ─────────────────────────────────────────────── function TerminalLockScreen({ accent }) { return (
{/* Wallpaper: dark satellite-ish */}
{Array.from({ length: 40 }).map((_, i) => ( ))} {Array.from({ length: 20 }).map((_, i) => ( ))}
{/* Time */}
FRI 22 MAY
02:14
{/* Live Activity card (lockscreen) */}
A
ADLEY · EU-3X
● LIVE
POP
187
/250
FPS
252
STABLE
RF ARMED
2
SQUAD
LIVE ACTIVITY · WIDGETKIT
{/* Notification stack (raid alert pushed) */}
▲ RAID · ADLEY now
TC TRIPPED · 4763
G14 · BLDG ALPHA · STORM-7
{/* Dynamic island in raid mode */}
RAID · G14
{/* Bottom flashlight + camera */}
); } // ─────────────────────────────────────────────── // ARMED FREQUENCIES // ─────────────────────────────────────────────── function TerminalFreqs({ accent }) { return (
[+] ARM } />
5 ARMED · 3 SQUAD · 2 USER
{FREQS.map(f => (
{f.freq}
{f.label} {f.locked && }
{f.grid} · {f.scope}{f.squad ? ` :: ${f.squad}` : ''}
LAST :: {f.triggered.toUpperCase()}
))}
┌─ ARM NEW FREQ
{[4,7,6,3].map((d, i) => (
{d}
))}
RANGE 1–9999 SCOPE: SQUAD
); } // ─────────────────────────────────────────────── // SQUAD // ─────────────────────────────────────────────── function TerminalSquad({ accent }) { const sq = SQUAD; return (
{/* Invite code block */}
INVITE CODE
{sq.code}
┌─ MEMBERS · {sq.members.length}
{sq.members.map(m => (
{m.name.slice(0, 2)}
{m.name} {m.role === 'LEADER' && LEAD}
K/D {m.kdr} · {m.hours}H · {m.status}
))}
); } // ─────────────────────────────────────────────── // EVENT FEED (SSE) // ─────────────────────────────────────────────── function TerminalEvents({ accent }) { const sev = (s) => s === 'crit' ? TERM.danger : s === 'warn' ? TERM.warn : TERM.textDim; return (
● STREAM } />
{/* Filter chips */}
{['ALL', 'RAID', 'PVP', 'WORLD', 'RF'].map((f, i) => ( ))}
{EVENTS.map((e, i) => (
{e.t} {e.kind.toUpperCase()} {e.text}
))}
─── LOAD OLDER ───
); } // ─────────────────────────────────────────────── // STATS // ─────────────────────────────────────────────── function TerminalStats({ accent }) { return (
{[ ['RAID EVENTS', STATS_24H.raids, TERM.danger, 9, 'TC trips · explosions'], ['PVP KILLS', STATS_24H.pvp, accent, 64, 'players · sleepers'], ['WORLD EVENTS', STATS_24H.world, TERM.warn, 71, 'cargo · heli · supply'], ].map(([label, data, color, total, sub]) => (
{label}
{total}
−24H−18−12−06NOW
{sub}
))}
// PEAK :: 20:00 · 8 KILLS / HR
); } // ─────────────────────────────────────────────── // RCON ONBOARDING // ─────────────────────────────────────────────── function TerminalRcon({ accent }) { return (
◂ CANCEL STEP 2 / 3
ADLEY // ADD SERVER
RCON CREDS
Adley connects via WebRCON. Use port + password from{' '} server.cfg.
{[ { l: 'HOST / IP', v: '185.244.218.42', mono: true, ok: true }, { l: 'RCON PORT', v: '28016', mono: true, ok: true }, { l: 'PASSWORD', v: '••••••••••••', mono: true, ok: true }, { l: 'NICKNAME', v: 'EU 3X MAX', mono: false, ok: true }, ].map(f => (
{f.l} {f.ok && ✓ OK}
{f.v}
))}
● HANDSHAKE OK
> identify… Rust 2503 · build 87642
> subscribe sse… OK
> entities snapshot… 4 found
); } // ─────────────────────────────────────────────── // FLOW WRAPPER — phone shell with bottom nav // ─────────────────────────────────────────────── function TerminalFlow({ accent, initial = 'home' }) { const [screen, setScreen] = React.useState(initial); const [serverOpen, setServerOpen] = React.useState(false); const view = serverOpen ? setServerOpen(false)} onOpenMap={() => { setServerOpen(false); setScreen('map'); }} /> : screen === 'home' ? setServerOpen(true)}/> : screen === 'map' ? : screen === 'freqs' ? : screen === 'events' ? : screen === 'squad' ? : ; return (
{view} { setServerOpen(false); setScreen(id); }} accent={accent}/>
); } Object.assign(window, { TerminalFlow, TerminalHome, TerminalSnapshot, TerminalMap, TerminalRaidAlert, TerminalLockScreen, TerminalFreqs, TerminalSquad, TerminalEvents, TerminalStats, TerminalRcon, });