Show mandala thumbnails.

lib/pages/gallery-page.tsx

@@ -13,6 +13,11 @@ import { CreatureDesign } from "./creature-page/core";
 import { deserializeCreatureDesign } from "./creature-page/serialization";
 
 import "./gallery-page.css";
+import {
+  createMandalaAnimationRenderer,
+  MandalaDesign,
+} from "./mandala-page/core";
+import { deserializeMandalaDesign } from "./mandala-page/serialization";
 
 function compositionRemixUrl(comp: GalleryComposition): string {
   return (
@@ -23,6 +28,8 @@ function compositionRemixUrl(comp: GalleryComposition): string {
 
 const THUMBNAIL_CLASS = "gallery-thumbnail canvas";
 
+const THUMBNAIL_SCALE = 0.2;
+
 const EmptyThumbnail: React.FC = () => (
   <div className={THUMBNAIL_CLASS + " is-empty"}></div>
 );
@@ -39,7 +46,7 @@ const CreatureThumbnail: React.FC<{ design: CreatureDesign }> = (props) => {
     <div className={THUMBNAIL_CLASS} style={{ backgroundColor: background }}>
       <CreatureContext.Provider value={ctx}>
         <AutoSizingSvg padding={10} ref={svgRef} bgColor={background}>
-          <SvgTransform transform={svgScale(0.2)}>
+          <SvgTransform transform={svgScale(THUMBNAIL_SCALE)}>
             <CreatureSymbol {...props.design.creature} />
           </SvgTransform>
         </AutoSizingSvg>
@@ -48,6 +55,29 @@ const CreatureThumbnail: React.FC<{ design: CreatureDesign }> = (props) => {
   );
 };
 
+const MandalaThumbnail: React.FC<{ design: MandalaDesign }> = (props) => {
+  const render = createMandalaAnimationRenderer(props.design, THUMBNAIL_SCALE);
+  const { background } = props.design.baseCompCtx;
+  const svgRef = useRef<SVGSVGElement>(null);
+  const canvasRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div
+      className={THUMBNAIL_CLASS}
+      style={{ backgroundColor: background }}
+      ref={canvasRef}
+    >
+      <AutoSizingSvg
+        ref={svgRef}
+        bgColor={background}
+        sizeToElement={canvasRef}
+      >
+        {render(0)}
+      </AutoSizingSvg>
+    </div>
+  );
+};
+
 function getThumbnail(gc: GalleryComposition): JSX.Element {
   if (gc.kind === "creature") {
     let design: CreatureDesign;
@@ -59,6 +89,16 @@ function getThumbnail(gc: GalleryComposition): JSX.Element {
     }
     return <CreatureThumbnail design={design} />;
   }
+  if (gc.kind === "mandala") {
+    let design: MandalaDesign;
+    try {
+      design = deserializeMandalaDesign(gc.serializedValue);
+    } catch (e) {
+      console.log(`Could not deserialize creature "${gc.title}"`, e);
+      return <EmptyThumbnail />;
+    }
+    return <MandalaThumbnail design={design} />;
+  }
   return <EmptyThumbnail />;
 }
 

lib/pages/mandala-page/core.tsx

@@ -226,14 +226,17 @@ function isDesignAnimated(design: MandalaDesign): boolean {
   return getCirclesFromDesign(design).some((c) => c.animateSymbolRotation);
 }
 
-function createAnimationRenderer({
-  baseCompCtx,
-  invertCircle2,
-  circle1,
-  circle2,
-  useTwoCircles,
-  firstBehind,
-}: MandalaDesign): AnimationRenderer {
+export function createMandalaAnimationRenderer(
+  {
+    baseCompCtx,
+    invertCircle2,
+    circle1,
+    circle2,
+    useTwoCircles,
+    firstBehind,
+  }: MandalaDesign,
+  scale = 0.5
+): AnimationRenderer {
   const symbolCtx = noFillIfShowingSpecs(baseCompCtx);
   const circle2SymbolCtx = invertCircle2 ? swapColors(symbolCtx) : symbolCtx;
 
@@ -259,7 +262,7 @@ function createAnimationRenderer({
       }
     }
 
-    return <SvgTransform transform={svgScale(0.5)}>{circles}</SvgTransform>;
+    return <SvgTransform transform={svgScale(scale)}>{circles}</SvgTransform>;
   };
 }
 
@@ -336,7 +339,10 @@ export const MandalaPageWithDefaults: React.FC<{
     ]
   );
   const isAnimated = isDesignAnimated(design);
-  const render = useMemo(() => createAnimationRenderer(design), [design]);
+  const render = useMemo(
+    () => createMandalaAnimationRenderer(design),
+    [design]
+  );
 
   useDebouncedEffect(
     250,