Implement the 029-on-demand-bestiary feature that replaces the bundled XMM bestiary JSON with a compact search index (~350KB) and on-demand source loading, where users explicitly provide a URL or upload a JSON file to fetch full stat block data per source, which is then normalized and cached in IndexedDB (with in-memory fallback) so creature stat blocks load instantly on subsequent visits while keeping the app bundle small and never auto-fetching copyrighted content
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lukas
@@ -1,62 +1,126 @@
|
||||
import type { Creature, CreatureId } from "@initiative/domain";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { normalizeBestiary } from "../adapters/bestiary-adapter.js";
|
||||
import type {
|
||||
BestiaryIndexEntry,
|
||||
Creature,
|
||||
CreatureId,
|
||||
} from "@initiative/domain";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
normalizeBestiary,
|
||||
setSourceDisplayNames,
|
||||
} from "../adapters/bestiary-adapter.js";
|
||||
import * as bestiaryCache from "../adapters/bestiary-cache.js";
|
||||
import {
|
||||
getSourceDisplayName,
|
||||
loadBestiaryIndex,
|
||||
} from "../adapters/bestiary-index-adapter.js";
|
||||
|
||||
export interface SearchResult extends BestiaryIndexEntry {
|
||||
readonly sourceDisplayName: string;
|
||||
}
|
||||
|
||||
interface BestiaryHook {
|
||||
search: (query: string) => Creature[];
|
||||
search: (query: string) => SearchResult[];
|
||||
getCreature: (id: CreatureId) => Creature | undefined;
|
||||
allCreatures: Creature[];
|
||||
isLoaded: boolean;
|
||||
isSourceCached: (sourceCode: string) => Promise<boolean>;
|
||||
fetchAndCacheSource: (sourceCode: string, url: string) => Promise<void>;
|
||||
uploadAndCacheSource: (
|
||||
sourceCode: string,
|
||||
jsonData: unknown,
|
||||
) => Promise<void>;
|
||||
refreshCache: () => Promise<void>;
|
||||
}
|
||||
|
||||
export function useBestiary(): BestiaryHook {
|
||||
const [creatures, setCreatures] = useState<Creature[]>([]);
|
||||
const [isLoaded, setIsLoaded] = useState(false);
|
||||
const creatureMapRef = useRef<Map<string, Creature>>(new Map());
|
||||
const loadAttempted = useRef(false);
|
||||
const creatureMapRef = useRef<Map<CreatureId, Creature>>(new Map());
|
||||
const [, setTick] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (loadAttempted.current) return;
|
||||
loadAttempted.current = true;
|
||||
const index = loadBestiaryIndex();
|
||||
setSourceDisplayNames(index.sources as Record<string, string>);
|
||||
if (index.creatures.length > 0) {
|
||||
setIsLoaded(true);
|
||||
}
|
||||
|
||||
import("../../../../data/bestiary/xmm.json")
|
||||
// biome-ignore lint/suspicious/noExplicitAny: raw JSON shape varies per entry
|
||||
.then((mod: any) => {
|
||||
const raw = mod.default ?? mod;
|
||||
try {
|
||||
const normalized = normalizeBestiary(raw);
|
||||
const map = new Map<string, Creature>();
|
||||
for (const c of normalized) {
|
||||
map.set(c.id, c);
|
||||
}
|
||||
creatureMapRef.current = map;
|
||||
setCreatures(normalized);
|
||||
setIsLoaded(true);
|
||||
} catch {
|
||||
// Normalization failed — bestiary unavailable
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// Import failed — bestiary unavailable
|
||||
});
|
||||
bestiaryCache.loadAllCachedCreatures().then((map) => {
|
||||
creatureMapRef.current = map;
|
||||
setTick((t) => t + 1);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const search = useMemo(() => {
|
||||
return (query: string): Creature[] => {
|
||||
if (query.length < 2) return [];
|
||||
const lower = query.toLowerCase();
|
||||
return creatures
|
||||
.filter((c) => c.name.toLowerCase().includes(lower))
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.slice(0, 10);
|
||||
};
|
||||
}, [creatures]);
|
||||
|
||||
const getCreature = useMemo(() => {
|
||||
return (id: CreatureId): Creature | undefined => {
|
||||
return creatureMapRef.current.get(id);
|
||||
};
|
||||
const search = useCallback((query: string): SearchResult[] => {
|
||||
if (query.length < 2) return [];
|
||||
const lower = query.toLowerCase();
|
||||
const index = loadBestiaryIndex();
|
||||
return index.creatures
|
||||
.filter((c) => c.name.toLowerCase().includes(lower))
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.slice(0, 10)
|
||||
.map((c) => ({
|
||||
...c,
|
||||
sourceDisplayName: getSourceDisplayName(c.source),
|
||||
}));
|
||||
}, []);
|
||||
|
||||
return { search, getCreature, allCreatures: creatures, isLoaded };
|
||||
const getCreature = useCallback((id: CreatureId): Creature | undefined => {
|
||||
return creatureMapRef.current.get(id);
|
||||
}, []);
|
||||
|
||||
const isSourceCachedFn = useCallback(
|
||||
(sourceCode: string): Promise<boolean> => {
|
||||
return bestiaryCache.isSourceCached(sourceCode);
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const fetchAndCacheSource = useCallback(
|
||||
async (sourceCode: string, url: string): Promise<void> => {
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`Failed to fetch: ${response.status} ${response.statusText}`,
|
||||
);
|
||||
}
|
||||
const json = await response.json();
|
||||
const creatures = normalizeBestiary(json);
|
||||
const displayName = getSourceDisplayName(sourceCode);
|
||||
await bestiaryCache.cacheSource(sourceCode, displayName, creatures);
|
||||
for (const c of creatures) {
|
||||
creatureMapRef.current.set(c.id, c);
|
||||
}
|
||||
setTick((t) => t + 1);
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const uploadAndCacheSource = useCallback(
|
||||
async (sourceCode: string, jsonData: unknown): Promise<void> => {
|
||||
// biome-ignore lint/suspicious/noExplicitAny: raw JSON shape varies
|
||||
const creatures = normalizeBestiary(jsonData as any);
|
||||
const displayName = getSourceDisplayName(sourceCode);
|
||||
await bestiaryCache.cacheSource(sourceCode, displayName, creatures);
|
||||
for (const c of creatures) {
|
||||
creatureMapRef.current.set(c.id, c);
|
||||
}
|
||||
setTick((t) => t + 1);
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const refreshCache = useCallback(async (): Promise<void> => {
|
||||
const map = await bestiaryCache.loadAllCachedCreatures();
|
||||
creatureMapRef.current = map;
|
||||
setTick((t) => t + 1);
|
||||
}, []);
|
||||
|
||||
return {
|
||||
search,
|
||||
getCreature,
|
||||
isLoaded,
|
||||
isSourceCached: isSourceCachedFn,
|
||||
fetchAndCacheSource,
|
||||
uploadAndCacheSource,
|
||||
refreshCache,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -14,9 +14,9 @@ import {
|
||||
toggleConditionUseCase,
|
||||
} from "@initiative/application";
|
||||
import type {
|
||||
BestiaryIndexEntry,
|
||||
CombatantId,
|
||||
ConditionId,
|
||||
Creature,
|
||||
DomainEvent,
|
||||
Encounter,
|
||||
} from "@initiative/domain";
|
||||
@@ -24,6 +24,7 @@ import {
|
||||
combatantId,
|
||||
createEncounter,
|
||||
isDomainError,
|
||||
creatureId as makeCreatureId,
|
||||
resolveCreatureName,
|
||||
} from "@initiative/domain";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
@@ -240,11 +241,11 @@ export function useEncounter() {
|
||||
}, [makeStore]);
|
||||
|
||||
const addFromBestiary = useCallback(
|
||||
(creature: Creature) => {
|
||||
(entry: BestiaryIndexEntry) => {
|
||||
const store = makeStore();
|
||||
const existingNames = store.get().combatants.map((c) => c.name);
|
||||
const { newName, renames } = resolveCreatureName(
|
||||
creature.name,
|
||||
entry.name,
|
||||
existingNames,
|
||||
);
|
||||
|
||||
@@ -262,25 +263,32 @@ export function useEncounter() {
|
||||
if (isDomainError(addResult)) return;
|
||||
|
||||
// Set HP
|
||||
const hpResult = setHpUseCase(makeStore(), id, creature.hp.average);
|
||||
const hpResult = setHpUseCase(makeStore(), id, entry.hp);
|
||||
if (!isDomainError(hpResult)) {
|
||||
setEvents((prev) => [...prev, ...hpResult]);
|
||||
}
|
||||
|
||||
// Set AC
|
||||
if (creature.ac > 0) {
|
||||
const acResult = setAcUseCase(makeStore(), id, creature.ac);
|
||||
if (entry.ac > 0) {
|
||||
const acResult = setAcUseCase(makeStore(), id, entry.ac);
|
||||
if (!isDomainError(acResult)) {
|
||||
setEvents((prev) => [...prev, ...acResult]);
|
||||
}
|
||||
}
|
||||
|
||||
// Derive creatureId from source + name
|
||||
const slug = entry.name
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, "-")
|
||||
.replace(/(^-|-$)/g, "");
|
||||
const cId = makeCreatureId(`${entry.source.toLowerCase()}:${slug}`);
|
||||
|
||||
// Set creatureId on the combatant
|
||||
const currentEncounter = store.get();
|
||||
const updated = {
|
||||
...currentEncounter,
|
||||
combatants: currentEncounter.combatants.map((c) =>
|
||||
c.id === id ? { ...c, creatureId: creature.id } : c,
|
||||
c.id === id ? { ...c, creatureId: cId } : c,
|
||||
),
|
||||
};
|
||||
setEncounter(updated);
|
||||
|
||||
Reference in New Issue
Block a user