// screens-hud.jsx — Direction 2: TACTICAL HUD // Geist sans + mono, crosshair corners, stencil headers, mil-spec amber/red const HUD = { bg: '#0B0D11', panel: '#10141B', panelHi: '#161B24', line: '#1E2330', line2: '#2B3243', text: '#E7ECF2', textDim: '#8B94A6', textMute: '#4E5564', ok: '#46D1A0', amber: '#FFB020', danger: '#FF3B30', hairline: 'rgba(255,255,255,0.08)', }; // Corner crosshair marks on a panel function HUDCorners({ color = HUD.line2, size = 8, inset = 4 }) { const C = ({ pos }) => ( ); return ( <> ); } // Panel with corners function HUDPanel({ children, color, style, padding = 12, corners = true }) { return (
{corners && } {children}
); } // Top sticky grid-coord strip — every screen has it function HUDInfoStrip({ accent, label, right }) { return (
● LINK STORM-7 02:14:08
{right || '187/250'}
); } // Stencil header function HUDHeader({ title, kicker, accent, right }) { return (
{kicker}
{title}
{right}
); } // Sharp-cornered button (clipped diagonal) function HUDBtn({ children, accent, primary, danger, full, onClick, style }) { const col = danger ? HUD.danger : primary ? accent : HUD.text; const bg = primary ? accent : 'transparent'; return ( ); } // Tab bar function HUDTabBar({ screen, onChange, accent }) { const tabs = [ { id: 'home', label: 'OPS', icon: 'hard-drives' }, { id: 'map', label: 'MAP', icon: 'map-pin' }, { id: 'freqs', label: 'RF', icon: 'broadcast' }, { id: 'events', label: 'FEED', icon: 'list-bullets' }, { id: 'squad', label: 'SQD', icon: 'users-three' }, ]; return (
{tabs.map(t => { const sel = screen === t.id; return ( ); })}
); } // ─────────────────────────────────────────────── // HOME // ─────────────────────────────────────────────── function HudHome({ accent, onOpenServer }) { return (
+ ADD } />
{/* Active server card — bigger */}
ACTIVE · OWNER
EU 3X MAX
185.244.218.42 · WIPE +2D 14H
{/* Stat row */}
{[ ['POP', '187/250', HUD.text], ['FPS', '252', HUD.ok], ['UP', '4D02H', HUD.text], ['RF', '2', accent], ].map(([k, v, c], i) => (
{k}
{v}
))}
{/* Population bar */}
{Array.from({ length: 50 }).map((_, j) => (
))}
OPEN SNAPSHOT
◢ OTHER LINKED · 03
{SERVERS.slice(1).map(s => (
{s.name} {s.verified && VFY}
{s.tag} · WIPE +{s.wipe} · {s.owner ? 'OWNED' : 'JOINED'}
{s.players}
/{s.max}
))} DISCOVER PUBLIC CE
); } // ─────────────────────────────────────────────── // SERVER SNAPSHOT // ─────────────────────────────────────────────── function HudSnapshot({ accent, onBack, onOpenMap }) { const s = SERVERS[0]; return (
SNAPSHOT · LIVE
{/* Big stat panels */}
POPULATION
187
/250 · 75%
FRAMERATE
252
FPS · STABLE
UPTIME
4D 02H
WIPE IN
4D 18H
{/* Armed RF */}
◢ ARMED FREQUENCIES · 02
{FREQS.slice(0, 2).map((f, i) => (
{f.freq}
{f.label}
{f.grid} · {f.scope}
{f.triggered}
))} {/* Entities tracking */}
◢ TRACKED ENTITIES · 04
{ENTITIES.map((e, i) => (
{e.kind}
{e.label} {e.grid}
))}
⌖ MAP SAY · BROADCAST
); } // ─────────────────────────────────────────────── // WORLD MAP ★ HERO // ─────────────────────────────────────────────── function HudMap({ accent }) { return (
SYNC
02:14:08
}/>
{/* Crosshair corners on map */} {/* Subtle grid */} {Array.from({ length: 19 }).map((_, i) => ( ))} {Array.from({ length: 19 }).map((_, i) => ( ))} {/* Bigger grid every 4 */} {[0,4,8,12,16].map(i => ( ))} {/* Terrain blob (subtle glow) */} {/* radar sweep */} {/* Grid labels on edges */} {'ABCDEFGHIJKLMNOPQR'.split('').map((c, i) => (
{c}
))} {/* Monuments */} {MONUMENTS.map(m => { const col = m.type === 'safe' ? HUD.ok : m.type === 'tier3' ? accent : HUD.textDim; return (
{m.name}
); })} {/* Entities */} {ENTITIES.map(e => (
{/* Pulse ring for armed */} {e.status === 'armed' && (
)}
{e.kind[0]}
{e.grid}
))}
{/* Bottom info strip — selected entity */}
◢ TC · ARMED
MAIN TC · G14
FREQ 4763 · LAST TRIP 02:14:00
G14
{[ ['MON', accent, true], ['TC', HUD.danger, true], ['BAGS', accent, true], ['PVP', HUD.textDim, false], ['HELI', HUD.textDim, false], ].map(([l, c, on]) => ( ))}
); } // ─────────────────────────────────────────────── // RAID ALERT (tactical HUD treatment) // ─────────────────────────────────────────────── function HudRaidAlert({ accent }) { return (
{/* Strobe */}
{/* Full-screen crosshair grid */} {/* Corner ticks */}
{/* Top banner */}
▲ RAID DETECTED T+00:08
{/* Big freq + base */}
FREQUENCY
4763
MAIN TC · STORM-7
{/* GRID + BASE crosshair display */}
GRID
G14
{/* mini-map crosshair */} {Array.from({ length: 18 }).map((_, i) => ( ))} {Array.from({ length: 18 }).map((_, i) => ( ))}
BASE
BLDG ALPHA
EU 3X MAX
185.244.218.42
NOTIFIED
06 / 06
◢ SIREN ACTIVE · LOOP ◣
JUMP TO MAP ⌖ SILENCE 60s
); } // ─────────────────────────────────────────────── // LOCK SCREEN + LIVE ACTIVITY // ─────────────────────────────────────────────── function HudLockScreen({ accent }) { return (
{/* Wallpaper: dark satellite */}
{/* Dot stars */} {[[60,200],[120,400],[300,150],[80,650],[280,720],[200,260],[340,500]].map(([x,y], i) => (
))}
{/* Time */}
FRI · 22 MAY
02:14
{/* Live Activity card */}
A
EU 3X MAX
● LIVE
{[ ['POP', '187', '/250', HUD.text], ['FPS', '252', 'STBL', HUD.ok], ['RF', '02', 'SQD', accent], ['EVT', '14', '/HR', HUD.textDim], ].map(([k, v, sub, c], i) => (
{k}
{v}
{sub}
))}
◢ LIVE ACTIVITY · ACTIVITYKIT ◣
{/* Raid notification card */}
▲ RAID · ADLEY
now
TC tripped · 4763
G14 · BLDG ALPHA · STORM-7
{/* Dynamic island raid */}
RAID G14
{/* Bottom controls */}
); } // ─────────────────────────────────────────────── // ARMED FREQS // ─────────────────────────────────────────────── function HudFreqs({ accent }) { return (
+ ARM }/>
{FREQS.map(f => (
MHz
{f.freq}
{f.label} {f.locked && LOCK}
{f.grid} · {f.scope}{f.squad ? ` · ${f.squad}` : ''}
LAST TRIP: {f.triggered.toUpperCase()}
))}
◢ ARM NEW FREQ
{[4,7,6,3].map((d, i) => (
{d}
))}
{['USER', 'SQUAD'].map((s, i) => ( ))}
); } // ─────────────────────────────────────────────── // SQUAD // ─────────────────────────────────────────────── function HudSquad({ accent }) { const sq = SQUAD; return (
m.status === 'ONLINE').length}/${sq.members.length} ONLINE`}/>
◢ INVITE CODE
{sq.code}
 COPY  SHARE  REGEN
◢ ROSTER · {sq.members.length}
{sq.members.map((m, i) => (
{m.name.slice(0, 2)}
{m.name} {m.role === 'LEADER' && LEAD}
K/D {m.kdr} · {m.hours}H
{m.status}
))} LEAVE SQUAD
); } // ─────────────────────────────────────────────── // EVENT FEED // ─────────────────────────────────────────────── function HudEvents({ accent }) { const sev = (s) => s === 'crit' ? HUD.danger : s === 'warn' ? HUD.amber : HUD.textDim; return (
● STREAM }/>
{['ALL · 14', 'RAID · 1', 'PVP · 4', 'WORLD · 6', 'RF · 3'].map((f, i) => ( ))}
{EVENTS.map((e, i) => (
{e.kind.toUpperCase()} {e.t}
{e.text}
))}
); } // ─────────────────────────────────────────────── // STATS // ─────────────────────────────────────────────── function HudStats({ accent }) { return (
{[ ['Raid events', STATS_24H.raids, HUD.danger, 9], ['PvP kills', STATS_24H.pvp, accent, 64], ['World events', STATS_24H.world, HUD.amber, 71], ].map(([label, data, color, total]) => (
◢ {label.toUpperCase()}
{total}
PEAK 20:00
AVG {(total / 24).toFixed(1)}/HR
−24H−18−12−06NOW
))}
); } // ─────────────────────────────────────────────── // RCON ONBOARDING // ─────────────────────────────────────────────── function HudRcon({ accent }) { return (
02 / 03
{/* Step indicator */}
{[1, 2, 3].map(n => (
))}
Adley connects via WebRCON. Paste your rcon.port and rcon.password — read-only is fine.
{[ { l: 'HOST · IP', v: '185.244.218.42' }, { l: 'RCON PORT', v: '28016' }, { l: 'PASSWORD', v: '••••••••••••' }, { l: 'NICKNAME', v: 'EU 3X MAX' }, ].map(f => (
◢ {f.l}
{f.v}
))}
HANDSHAKE OK
> rust 2503 · build 87642
> sse subscribed
> entities 4 / monuments 12
LINK SERVER →
); } // ─────────────────────────────────────────────── // FLOW WRAPPER // ─────────────────────────────────────────────── function HudFlow({ 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, { HudFlow, HudHome, HudSnapshot, HudMap, HudRaidAlert, HudLockScreen, HudFreqs, HudSquad, HudEvents, HudStats, HudRcon, });