// Admin: Live Map · Settings · Notifications · Bulk actions helper // ── 1. LIVE ADMIN MAP ──────────────────────────────────────────────────── // Real positions, real names — admin-only. Plus a full pin editor so // staff can add/move/delete map markers (traders, rigs, events, etc). // Admin sees ALL pins including non-public ones (hidden trader). function hashToFloat(s, salt = 0) { let h = (salt * 2654435761) >>> 0; for (let i = 0; i < s.length; i++) h = ((h * 31 + s.charCodeAt(i)) >>> 0); return ((h % 100000) / 100000); } function AdminMap() { const [tick, setTick] = React.useState(0); const [selected, setSelected] = React.useState(null); const [showLabels, setShowLabels] = React.useState(true); const [showPlayers, setShowPlayers] = React.useState(true); const [showPins, setShowPins] = React.useState(true); const [mode, setMode] = React.useState("view"); // view | add | move | del const [pins, savePins] = usePins(); const [pinForm, setPinForm] = React.useState(null); // {x,y,clientX,clientY,editing?} const [coord, setCoord] = React.useState(null); const [dragging, setDragging] = React.useState(null); const [dropTarget, setDropTarget] = React.useState(false); const mapImage = useMapImage(); const stageRef = React.useRef(null); // Drift player positions every 8s to simulate movement React.useEffect(() => { const id = setInterval(() => setTick(t => t + 1), 8000); return () => clearInterval(id); }, []); // Live player positions are not wired up yet (Mission 10 / CFTools / RPT // scraper). Empty until then so the admin map stays clean. const players = []; // Stage mouse handlers (coord readout + add-click + drag-move + drop-image) const eventToNorm = (e) => { const r = stageRef.current.getBoundingClientRect(); return { x: Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)), y: Math.max(0, Math.min(1, (e.clientY - r.top) / r.height)), }; }; const onStageMove = (e) => { const { x, y } = eventToNorm(e); const w = DAYZ.normToWorld(x, y); setCoord({ x, y, wx: w.x, wz: w.z, grid: DAYZ.normToGrid(x, y) }); if (dragging) { savePins(pins.map(p => p.id === dragging ? { ...p, x, y } : p)); } }; const onStageClick = (e) => { if (mode === "add" && stageRef.current.contains(e.target)) { const { x, y } = eventToNorm(e); setPinForm({ x, y, clientX: e.clientX - stageRef.current.getBoundingClientRect().left, clientY: e.clientY - stageRef.current.getBoundingClientRect().top, draft: { type: "event", label: "", desc: "", public: true, expiresInH: 0 }, }); } }; const onPinDown = (e, p) => { e.stopPropagation(); if (mode === "move") setDragging(p.id); else if (mode === "del") { if (confirm(`Delete pin "${p.label}"?`)) savePins(pins.filter(x => x.id !== p.id)); } else if (mode === "view") { setSelected(p); } }; const onStageUp = () => setDragging(null); // ── pin form save ── const savePin = () => { const f = pinForm.draft; const id = pinForm.editing || ("pin-" + Date.now().toString(36)); const expiresAt = f.expiresInH > 0 ? Date.now() + f.expiresInH * 3600 * 1000 : null; const newPin = { id, x: pinForm.x, y: pinForm.y, type: f.type, label: f.label || "Untitled pin", desc: f.desc, public: f.public, expiresAt }; const next = pinForm.editing ? pins.map(p => p.id === id ? newPin : p) : [...pins, newPin]; savePins(next); setPinForm(null); setMode("view"); }; // ── image drop ── const onDragOver = (e) => { e.preventDefault(); setDropTarget(true); }; const onDragLeave = () => setDropTarget(false); const onDrop = (e) => { e.preventDefault(); setDropTarget(false); const f = e.dataTransfer.files?.[0]; if (!f || !f.type.startsWith("image/")) return; const reader = new FileReader(); reader.onload = ev => window.ShovelheadMapImage.set(ev.target.result); reader.readAsDataURL(f); }; const onPickImage = () => { const input = document.createElement("input"); input.type = "file"; input.accept = "image/*"; input.onchange = e => { const f = e.target.files?.[0]; if (!f) return; const reader = new FileReader(); reader.onload = ev => window.ShovelheadMapImage.set(ev.target.result); reader.readAsDataURL(f); }; input.click(); }; return ( <>
{[ ["view","View"], ["add","+ Add pin"], ["move","Move"], ["del","Delete"], ].map(([k, l]) => ( ))} {coord && ( GRID {coord.grid} · DAYZ {coord.wx}, {coord.wz} )}
{ setCoord(null); setDragging(null); }} onClick={onStageClick} onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={onDrop} > {mapImage ? ( Chernarus ) : ( {Array.from({length: 14}).map((_, i) => ( ))} )} {/* MAP PINS (admin sees all) */} {showPins && pins.map(p => { const expired = p.expiresAt && p.expiresAt < Date.now(); if (expired) return null; const remainH = p.expiresAt ? Math.max(0, Math.round((p.expiresAt - Date.now()) / 3600000)) : null; return (
onPinDown(e, p)} onClick={(e) => e.stopPropagation()} >
{p.public === false && (
)} {remainH !== null &&
{remainH}h
} {showLabels &&
{p.label}
}
); })} {/* PLAYER PINS */} {showPlayers && players.map(p => { const t = TIERS.find(x => x.key === p.tier); const color = t?.color || "var(--ink)"; const isSel = selected?.steamId === p.steamId; return (
{ e.stopPropagation(); setSelected(p); }} >
{showLabels &&
{p.name}
}
); })} {/* pin form */} {pinForm && (
e.stopPropagation()}>

{pinForm.editing ? "Edit pin" : "New pin"}

setPinForm(f => ({...f, draft: {...f.draft, label: e.target.value}}))} placeholder="e.g. Convoy at F5" autoFocus />
setPinForm(f => ({...f, draft: {...f.draft, desc: e.target.value}}))} placeholder="(optional)" />
setPinForm(f => ({...f, draft: {...f.draft, public: v}}))} />
GRID {DAYZ.normToGrid(pinForm.x, pinForm.y)} · DAYZ {DAYZ.normToWorld(pinForm.x, pinForm.y).x}, {DAYZ.normToWorld(pinForm.x, pinForm.y).z}
)}
CHERNARUS · ADMIN LIVE · POLL 15s · TICK #{tick} {mode !== "view" && · MODE: {mode.toUpperCase()}}
{pins.length} PINS
); } function AdminPlayerDetail({ player, onClose }) { const t = TIERS.find(x => x.key === player.tier); return (
SELECTED PLAYER
{player.name}
STEAM ID
{player.steamId}
COUNTRY
{player.country}
SESSION
{player.joinedAgo}
K/D (SESSION)
{player.kdSession}
TIER
{fmtTier(player.tier)}
WARNS
{player.warns === 0 ? "—" : "× " + player.warns}
); } // ── 2. SETTINGS TAB ────────────────────────────────────────────────────── function AdminSettings() { const [server, setServer] = React.useState({ name: SERVER.name, ip: SERVER.ip, port: SERVER.port, slots: SERVER.slots, version: SERVER.version, region: SERVER.region, wipe: SERVER.wipe, }); const [rules, setRules] = React.useState(RULES); const [tiers, setTiers] = React.useState(TIERS); const [dirty, setDirty] = React.useState(false); const onServer = (k, v) => { setServer(s => ({...s, [k]: v})); setDirty(true); }; const onRule = (i, k, v) => { setRules(rs => rs.map((r, idx) => idx === i ? {...r, [k]: v} : r)); setDirty(true); }; const delRule = (i) => { setRules(rs => rs.filter((_, idx) => idx !== i)); setDirty(true); }; const addRule = () => { setRules(rs => [...rs, { n: String(rs.length + 1).padStart(2,"0"), t: "New rule", d: "Describe the rule here." }]); setDirty(true); }; const onTier = (i, k, v) => { setTiers(ts => ts.map((t, idx) => idx === i ? {...t, [k]: v} : t)); setDirty(true); }; return ( <>
SERVER & PRICING CONFIG
{dirty && ● UNSAVED CHANGES}

Server

onServer("name", e.target.value)} />
onServer("ip", e.target.value)} style={{flex:2}} /> onServer("port", e.target.value)} style={{flex:1}} />
onServer("slots", e.target.value)} /> onServer("region", e.target.value)} /> onServer("version", e.target.value)} /> onServer("wipe", e.target.value)} />

Rules

{rules.map((r, i) => (
onRule(i, "n", e.target.value)} />
onRule(i, "t", e.target.value)} placeholder="Title" />