// Character view — gold, carved materials, spells
const CharacterView = ({ characterId, user, setNav }) => {
const [ch, setCh] = React.useState(null);
const [loading, setLoading] = React.useState(true);
const [loadError, setLoadError] = React.useState(null);
// Sheet is the default landing tab — it's what players will look at most.
const [tab, setTab] = React.useState('sheet');
// Partial-PATCH helper used by the sheet tab. Optimistic local update so
// inputs feel snappy, then fire-and-forget the API call. On failure we'd
// ideally rebase from the server, but for now we just log and keep the
// local change — the user will notice if a save genuinely fails.
const patchCh = React.useCallback(async (patch) => {
if (!ch) return;
setCh(prev => ({ ...prev, ...patch }));
try { await api.characters.update(ch.id, patch); }
catch (err) { console.error('[CharacterView] save failed:', err, patch); }
}, [ch?.id]);
// Hard-refresh from the server. Used by sub-rows (materials) where an add
// or delete returns no payload — we need to refetch to see the canonical
// list with its new id + index ordering.
const refreshCh = React.useCallback(async () => {
if (!ch) return;
try {
const fresh = await api.characters.get(ch.id);
setCh(api.augmentCharacter(fresh));
} catch (err) { console.error('[CharacterView] refresh failed:', err); }
}, [ch?.id]);
React.useEffect(() => {
let cancelled = false;
setLoading(true); setLoadError(null);
api.characters.get(characterId)
.then(c => { if (!cancelled) { setCh(api.augmentCharacter(c)); setLoading(false); } })
.catch(err => { if (!cancelled) { setLoadError(err.status === 404 ? 'Character not found.' : (err.message || 'Failed to load character.')); setLoading(false); } });
return () => { cancelled = true; };
}, [characterId]);
// Load the campaigns this user can see — needed for the "Join campaign"
// picker when the character is free-floating.
const [campaigns, setCampaigns] = React.useState([]);
React.useEffect(() => {
api.campaigns.list().then(list => setCampaigns(list || []))
.catch(err => console.error('[CharacterView] campaigns load failed:', err));
}, []);
const [joinPickerOpen, setJoinPickerOpen] = React.useState(false);
const isOwner = ch && user.id === ch.playerId;
if (loading) return
Loading character…
;
if (loadError) return
{loadError}
;
if (!ch) return
Character not found.
;
// Free-floating characters have no campaign reference.
const attached = !!ch.campaignId;
const campaign = attached ? { id: ch.campaignId, name: ch.campaignName } : null;
const joinCampaign = async (campaignId) => {
if (!campaignId) return;
try {
await api.characters.joinCampaign(ch.id, campaignId);
await refreshCh();
setJoinPickerOpen(false);
} catch (err) {
console.error('[CharacterView] join failed:', err);
window.dialog.alert((err.body && err.body.message) || err.message || 'Could not join campaign.', { title:'Join failed' });
}
};
const leaveCampaign = async () => {
const ok = await window.dialog.confirm({
title: 'Leave campaign?',
message: `Detach ${ch.name} from "${ch.campaignName}"? The character keeps all its data and can re-join later. The DM keeps any campaign-side references that point at it.`,
confirmLabel: 'Leave',
});
if (!ok) return;
try {
await api.characters.leaveCampaign(ch.id);
await refreshCh();
} catch (err) {
console.error('[CharacterView] leave failed:', err);
window.dialog.alert((err.body && err.body.message) || err.message || 'Could not leave campaign.', { title:'Error' });
}
};
const spellLevelColors = {0:'#6b6966',1:'#1e6b3c',2:'#1a5c7a',3:'#b45309',4:'#7c3aed',5:'#c53030',6:'#991b1b',7:'#6b1a1a',8:'#4a0a0a',9:'#c9a227'};
return (
{tab === 'sheet' && (
// Editable for the owning user, DM, or admin. The backend re-checks
// on every PATCH — this just gates the UI affordances.
)}
{tab === 'spells' && (