Add creature thumbnails.

lib/pages/gallery-page.css

@@ -0,0 +1,19 @@
+.gallery-thumbnail {
+  width: 320px;
+  height: 240px;
+}
+
+.gallery-thumbnail.is-empty {
+  background-color: lightgray;
+}
+
+.gallery-item {
+  display: inline-block;
+  border: 1px solid black;
+  margin-right: 1em;
+  margin-bottom: 1em;
+}
+
+.gallery-item p {
+  margin: 1em;
+}

lib/pages/gallery-page.tsx

@@ -1,7 +1,18 @@
-import React, { useContext, useEffect } from "react";
+import React, { useContext, useEffect, useRef } from "react";
+import { AutoSizingSvg } from "../auto-sizing-svg";
+import {
+  CreatureContext,
+  CreatureContextType,
+  CreatureSymbol,
+} from "../creature-symbol";
 import { GalleryComposition, GalleryContext } from "../gallery-context";
 import { Page } from "../page";
 import { createPageWithStateSearchParams } from "../page-with-shareable-state";
+import { svgScale, SvgTransform } from "../svg-transform";
+import { CreatureDesign } from "./creature-page/core";
+import { deserializeCreatureDesign } from "./creature-page/serialization";
+
+import "./gallery-page.css";
 
 function compositionRemixUrl(comp: GalleryComposition): string {
   return (
@@ -10,14 +21,63 @@ function compositionRemixUrl(comp: GalleryComposition): string {
   );
 }
 
-const GalleryCompositionView: React.FC<GalleryComposition> = (props) => {
+const THUMBNAIL_CLASS = "gallery-thumbnail canvas";
+
+const EmptyThumbnail: React.FC = () => (
+  <div className={THUMBNAIL_CLASS + " is-empty"}></div>
+);
+
+const CreatureThumbnail: React.FC<{ design: CreatureDesign }> = (props) => {
+  const svgRef = useRef<SVGSVGElement>(null);
+  const ctx: CreatureContextType = {
+    ...useContext(CreatureContext),
+    ...props.design.compCtx,
+  };
+  const { background } = props.design.compCtx;
+
   return (
-    <p>
-      <a href={compositionRemixUrl(props)} target="_blank">
-        {props.title}
-      </a>{" "}
-      {props.kind} by {props.ownerName}
-    </p>
+    <div className={THUMBNAIL_CLASS} style={{ backgroundColor: background }}>
+      <CreatureContext.Provider value={ctx}>
+        <AutoSizingSvg padding={10} ref={svgRef} bgColor={background}>
+          <SvgTransform transform={svgScale(0.2)}>
+            <CreatureSymbol {...props.design.creature} />
+          </SvgTransform>
+        </AutoSizingSvg>
+      </CreatureContext.Provider>
+    </div>
+  );
+};
+
+function getThumbnail(gc: GalleryComposition): JSX.Element {
+  if (gc.kind === "creature") {
+    let design: CreatureDesign;
+    try {
+      design = deserializeCreatureDesign(gc.serializedValue);
+    } catch (e) {
+      console.log(`Could not deserialize creature "${gc.title}"`, e);
+      return <EmptyThumbnail />;
+    }
+    return <CreatureThumbnail design={design} />;
+  }
+  return <EmptyThumbnail />;
+}
+
+const GalleryCompositionView: React.FC<GalleryComposition> = (props) => {
+  const thumbnail = getThumbnail(props);
+  const url = compositionRemixUrl(props);
+
+  return (
+    <div className="gallery-item">
+      <a href={url} target="_blank">
+        {thumbnail}
+      </a>
+      <p>
+        <a href={url} target="_blank">
+          {props.title}
+        </a>{" "}
+        {props.kind} by {props.ownerName}
+      </p>
+    </div>
   );
 };