// ViG Command Center — shared lib: hooks, primitives, icons, charts
const { useState, useEffect, useMemo, useRef, useCallback, createContext, useContext } = React;
/* ============ persistence / hooks ============ */
const LS = {
get(k, d) { try { const v = JSON.parse(localStorage.getItem(k)); return v == null ? d : v; } catch (e) { return d; } },
set(k, v) { try { localStorage.setItem(k, JSON.stringify(v)); } catch (e) {} },
};
// ownership keyed by "name|type"; seeded once from spreadsheet
const OWN_KEY = 'vig2_ownership';
function ownKey(g) { return g.name + '|' + g.type; }
function seedOwnership(generals) {
const seed = {};
generals.forEach(g => { seed[ownKey(g)] = !!g.owned; });
return seed;
}
const OwnCtx = createContext(null);
function OwnershipProvider({ children }) {
const generals = window.VIG.generals;
const [own, setOwn] = useState(() => {
const stored = LS.get(OWN_KEY, null);
return stored || seedOwnership(generals);
});
useEffect(() => { LS.set(OWN_KEY, own); }, [own]);
const isOwned = useCallback((g) => !!own[ownKey(g)], [own]);
const ownedByName = useCallback((name) => generals.some(g => g.name === name && own[ownKey(g)]), [own, generals]);
const toggle = useCallback((g) => setOwn(p => ({ ...p, [ownKey(g)]: !p[ownKey(g)] })), []);
const setAll = useCallback((val) => setOwn(() => { const o = {}; generals.forEach(g => o[ownKey(g)] = val); return o; }), [generals]);
const reset = useCallback(() => setOwn(seedOwnership(generals)), [generals]);
// role-general ownership (for role-only generals not in the troop sheets)
const [roleOwn, setRoleOwn] = useState(() => LS.get('vig2_role_owned', {}));
useEffect(() => { LS.set('vig2_role_owned', roleOwn); }, [roleOwn]);
const hasTroopRow = useCallback((name) => generals.some(g => g.name === name), [generals]);
const isOwnedName = useCallback((name) => ownedByName(name) || !!roleOwn[name], [ownedByName, roleOwn]);
const toggleName = useCallback((name) => {
if (generals.some(g => g.name === name)) {
// toggle every troop row of this general to the opposite of current owned state
const target = !ownedByName(name);
setOwn(p => { const o = { ...p }; generals.forEach(g => { if (g.name === name) o[ownKey(g)] = target; }); return o; });
} else {
setRoleOwn(p => ({ ...p, [name]: !p[name] }));
}
}, [generals, ownedByName]);
return {children};
}
const useOwn = () => useContext(OwnCtx);
/* ── tier / plan gate ── */
const TIER_RANK={free:0,commander:1,warlord:2};
const TIER_LABEL={free:'Operative',commander:'Commander',warlord:'Warlord'};
const TIER_FEATURES={ai:'commander',warroom:'commander',discord:'commander',rally:'commander',battlereport:'commander',diplomacy:'commander',subs:'commander',warsim:'warlord',roadmap:'warlord',resourceplanner:'warlord'};
const TIER_COLOR={free:'#6A6A6E',commander:'#FF2A17',warlord:'#E8C271'};
window.tierOf=function(s){const t=s&&s.tier;return TIER_RANK[t]!=null?t:'commander';};
window.canAccessPage=function(id,s){const r=TIER_FEATURES[id];if(!r)return true;return TIER_RANK[window.tierOf(s)]>=TIER_RANK[r];};
function TierGate({page,session,go}){const req=TIER_FEATURES[page],tier=window.tierOf(session);return(
{TIER_LABEL[req]||'Commander'} feature
This module requires the {TIER_LABEL[req]} plan. You're on {TIER_LABEL[tier]}.
{children}
;
}
function Btn({ variant = 'default', size = 'md', className = '', children, ...p }) {
const sz = size === 'sm' ? 'h-8 px-3 text-[13px]' : size === 'lg' ? 'h-11 px-5 text-[15px]' : 'h-9 px-4 text-sm';
const v = {
default: 'bg-zinc-900 text-white hover:bg-zinc-700 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-200',
brand: 'bg-brand text-white hover:bg-brand-600 shadow-sm shadow-brand/30',
outline: 'border border-zinc-200 bg-white text-zinc-700 hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800',
ghost: 'text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800',
}[variant];
return ;
}
function Pill({ tone = 'zinc', children, className = '' }) {
const tones = {
zinc: 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300',
brand: 'bg-brand/10 text-brand-700 dark:text-brand',
green: 'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-400',
red: 'bg-rose-50 text-rose-600 dark:bg-rose-500/15 dark:text-rose-400',
blue: 'bg-blue-50 text-blue-700 dark:bg-blue-500/15 dark:text-blue-400',
};
return {children};
}
function TypeTag({ type, size = 'sm' }) {
const c = TYPE_COLOR[type];
return (
{type}
);
}
function Toggle({ on, onClick, disabled }) {
return (
);
}
function Progress({ value, tone = 'brand', className = '' }) {
const colors = { brand: 'bg-brand', green: 'bg-emerald-500', blue: 'bg-blue-500' };
return (
);
}
function Segmented({ options, value, onChange, className = '' }) {
return (
{options.map(o => {
const val = typeof o === 'string' ? o : o.value, label = typeof o === 'string' ? o : o.label;
return (
);
})}
);
}
function SearchInput({ value, onChange, placeholder, className = '' }) {
return (
onChange(e.target.value)} placeholder={placeholder}
className="h-9 w-full bg-transparent text-sm text-zinc-800 outline-none placeholder:text-zinc-400 dark:text-zinc-100" />
);
}
function Avatar({ name, size = 32 }) {
const init = name.split(/[ ']/).filter(Boolean).slice(0, 2).map(s => s[0]).join('').toUpperCase();
return (
{init}
);
}
function Drawer({ open, onClose, children, title }) {
return (
);
}
/* ============ charts (hand-rolled SVG) ============ */
function Donut({ segments, size = 132, thickness = 16, center }) {
const r = (size - thickness) / 2, c = 2 * Math.PI * r;
let off = 0; const total = segments.reduce((a, s) => a + s.value, 0) || 1;
return (
{center &&
{center}
}
);
}
function Ring({ pct, size = 56, thickness = 6, color = '#FF6B00', label }) {
const r = (size - thickness) / 2, c = 2 * Math.PI * r, len = (pct / 100) * c;
return (
{label ?? Math.round(pct) + '%'}
);
}
Object.assign(window, {
LS, OwnershipProvider, useOwn, useTheme, ROLE_PERMS, ownKey,
Icon, TYPE_ICON, TYPE_COLOR, TypeTag,
Card, Btn, Pill, Toggle, Progress, Segmented, SearchInput, Avatar, Drawer, Donut, Ring,
});