// ── Req — shared "this field is required" marker ──────────────────────────
// Render as `` after a label or inside a placeholder context. Exposed on
// window so every JSX file (loaded after shell.jsx) can use it without import.
const Req = () => *;
window.Req = Req;
// ── scrimDismiss — modal-scrim click-outside-to-close, but drag-safe ───────
// Spread the returned props onto the scrim div. A click only counts as a
// dismiss when BOTH the mousedown AND the mouseup landed directly on the
// scrim element — not on a child (the modal box) and not as the tail of a
// drag-select that started inside the box. We stash the "pressed here?"
// flag on the scrim DOM node's dataset so the helper is a plain function
// (no React hooks needed), making it safe to use anywhere inline.
const scrimDismiss = (close) => ({
onMouseDown: (e) => {
e.currentTarget.dataset.scrimPress = (e.target === e.currentTarget) ? '1' : '';
},
onMouseUp: (e) => {
const startedHere = e.currentTarget.dataset.scrimPress === '1';
e.currentTarget.dataset.scrimPress = '';
if (startedHere && e.target === e.currentTarget) close();
},
onMouseLeave: (e) => {
// If the cursor leaves the scrim while the button is still down (drag
// outside the viewport / browser chrome), forget the press so a stray
// mouseup elsewhere doesn't fire dismiss when it comes back.
e.currentTarget.dataset.scrimPress = '';
},
});
window.scrimDismiss = scrimDismiss;
// ── Per-campaign role helpers ─────────────────────────────────────────────
// Roles live on `campaign.myRole` (the requesting user's role) and on each
// entry of `campaign.members[].role`. These helpers wrap the checks so every
// caller agrees on what "is DM" means and we can change it in one place.
const isDmOf = (campaign) => campaign?.myRole === 'DM' || campaign?.myRole === 'Co-DM';
const isFullDmOf = (campaign) => campaign?.myRole === 'DM';
const isMemberOf = (campaign) => !!campaign?.myRole;
const dmsOf = (campaign) => (campaign?.members || []).filter(m => m.role === 'DM' || m.role === 'Co-DM');
const playersOf = (campaign) => (campaign?.members || []).filter(m => m.role === 'Player');
// Display helper: comma-separated DM names for compact summaries.
const dmNamesOf = (campaign) => dmsOf(campaign).map(m => m.name).join(', ');
// Returns true if the user is a DM/Co-DM in ANY campaign — used by global
// resource UIs (worldmap, association, world events) that previously asked
// "is the user a DM?" with a single global flag.
const isAnyDm = (campaigns) => (campaigns || []).some(c => isDmOf(c));
Object.assign(window, { isDmOf, isFullDmOf, isMemberOf, dmsOf, playersOf, dmNamesOf, isAnyDm });
// ── CityPicker — reusable dropdown backed by /api/cities?campaignId=… ─────
// Listens for `kamia:cities-changed` (dispatched by the world map's pin
// editor when a city-typed pin is saved) so the dropdown reflects new /
// renamed cities without forcing a full page reload.
const CityPicker = ({ value, onChange, campaignId, placeholder, includeNone, disabled, style }) => {
const [cities, setCities] = React.useState([]);
const reload = React.useCallback(() => {
let cancelled = false;
api.cities.list(campaignId ? { campaignId } : undefined)
.then(list => { if (!cancelled) setCities(list || []); })
.catch(err => console.error('[CityPicker] load failed:', err));
return () => { cancelled = true; };
}, [campaignId]);
React.useEffect(() => reload(), [reload]);
React.useEffect(() => {
const onChanged = () => reload();
window.addEventListener('kamia:cities-changed', onChanged);
return () => window.removeEventListener('kamia:cities-changed', onChanged);
}, [reload]);
return (
);
};
window.CityPicker = CityPicker;
// App Shell — Sidebar + Top Bar + Layout
// `campaigns` is API-sourced and already scoped by the backend to what this user can see.
const AppShell = ({ user, onLogout, children, nav, setNav, campaigns = [] }) => {
const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);
const navItems = [
{ id: 'dashboard', icon: '⌂', label: 'Dashboard' },
{ id: 'world', icon: '🌍', label: 'World Events' },
{ id: 'worldmap', icon: '🗺', label: 'World Map' },
{ id: 'association', icon: '⚔', label: 'Association' },
{ id: 'homebrew-repo', icon: '📚', label: 'Homebrew' },
...(user.isAdmin ? [{ id: 'admin', icon: '⚙', label: 'Admin' }] : []),
];
return (