diff --git a/lib/pages/gallery-page.tsx b/lib/pages/gallery-page.tsx
index 4bbd6a9..c86ef45 100644
--- a/lib/pages/gallery-page.tsx
+++ b/lib/pages/gallery-page.tsx
@@ -5,7 +5,11 @@ import {
CreatureContextType,
CreatureSymbol,
} from "../creature-symbol";
-import { GalleryComposition, GalleryContext } from "../gallery-context";
+import {
+ GalleryComposition,
+ GalleryCompositionKind,
+ GalleryContext,
+} from "../gallery-context";
import { Page } from "../page";
import { createPageWithStateSearchParams } from "../page-with-shareable-state";
import { svgScale, SvgTransform } from "../svg-transform";
@@ -78,27 +82,28 @@ const MandalaThumbnail: React.FC<{ design: MandalaDesign }> = (props) => {
);
};
+const THUMBNAILERS: {
+ [key in GalleryCompositionKind]: (gc: GalleryComposition) => JSX.Element;
+} = {
+ creature: (gc) => (
+
+ ),
+ mandala: (gc) => (
+
+ ),
+};
+
function getThumbnail(gc: GalleryComposition): JSX.Element {
- if (gc.kind === "creature") {
- let design: CreatureDesign;
+ if (gc.kind in THUMBNAILERS) {
try {
- design = deserializeCreatureDesign(gc.serializedValue);
+ return THUMBNAILERS[gc.kind](gc);
} catch (e) {
- console.log(`Could not deserialize creature "${gc.title}"`, e);
- return ;
+ console.log(`Could not deserialize ${gc.kind} "${gc.title}"`, e);
}
- return ;
- }
- if (gc.kind === "mandala") {
- let design: MandalaDesign;
- try {
- design = deserializeMandalaDesign(gc.serializedValue);
- } catch (e) {
- console.log(`Could not deserialize creature "${gc.title}"`, e);
- return ;
- }
- return ;
+ } else {
+ console.log(`Found unknown gallery composition kind "${gc.kind}".`);
}
+
return ;
}