Factor out SymbolContextWidget, use it on creature page.

lib/pages/creature-page.tsx

@@ -11,6 +11,7 @@ import { getAttachmentTransforms } from "../attach";
 import { scalePointXY } from "../point";
 import { Point } from "../../vendor/bezier-js";
 import { Random } from "../random";
+import { SymbolContextWidget } from "../symbol-context-widget";
 
 const SYMBOL_MAP = new Map(
   SvgVocabulary.map((symbol) => [symbol.name, symbol])
@@ -269,13 +270,13 @@ const AutoSizingSvg: React.FC<{
 };
 
 export const CreaturePage: React.FC<{}> = () => {
-  const [showSpecs, setShowSpecs] = useState(false);
   const [randomSeed, setRandomSeed] = useState<number | null>(null);
+  const [symbolCtx, setSymbolCtx] = useState(createSvgSymbolContext());
   const defaultCtx = useContext(CreatureContext);
   const ctx: CreatureContextType = {
     ...defaultCtx,
-    fill: showSpecs ? "none" : defaultCtx.fill,
+    ...symbolCtx,
-    showSpecs,
+    fill: symbolCtx.showSpecs ? "none" : symbolCtx.fill,
   };
   const creature =
     randomSeed === null
@@ -285,16 +286,7 @@ export const CreaturePage: React.FC<{}> = () => {
   return (
     <>
       <h1>Creature!</h1>
-      <p>
+      <SymbolContextWidget ctx={symbolCtx} onChange={setSymbolCtx} />
-        <label>
-          <input
-            type="checkbox"
-            checked={showSpecs}
-            onChange={(e) => setShowSpecs(e.target.checked)}
-          />{" "}
-          Show specs
-        </label>
-      </p>
       <p>
         <button onClick={() => setRandomSeed(Date.now())}>Randomize!</button>
       </p>

lib/pages/vocabulary-page.tsx

@@ -7,6 +7,7 @@ import {
 } from "../svg-symbol";
 import { SvgVocabulary } from "../svg-vocabulary";
 import { SvgSymbolContext } from "../svg-symbol";
+import { SymbolContextWidget } from "../symbol-context-widget";
 
 type SvgSymbolProps = {
   data: SvgSymbolData;
@@ -35,38 +36,12 @@ const SvgSymbol: React.FC<SvgSymbolProps> = (props) => {
 };
 
 export const VocabularyPage: React.FC<{}> = () => {
-  const [stroke, setStroke] = useState("#000000");
+  const [ctx, setCtx] = useState(createSvgSymbolContext());
-  const [fill, setFill] = useState("#ffffff");
-  const [showSpecs, setShowSpecs] = useState(false);
-  const ctx = createSvgSymbolContext({ stroke, fill, showSpecs });
 
   return (
     <>
       <h1>Mystic Symbolic Vocabulary</h1>
-      <p>
+      <SymbolContextWidget ctx={ctx} onChange={setCtx} />
-        <label htmlFor="stroke">Stroke: </label>
-        <input
-          type="color"
-          value={stroke}
-          onChange={(e) => setStroke(e.target.value)}
-          id="stroke"
-        />{" "}
-        <label htmlFor="fill">Fill: </label>
-        <input
-          type="color"
-          value={fill}
-          onChange={(e) => setFill(e.target.value)}
-          id="fill"
-        />{" "}
-        <label>
-          <input
-            type="checkbox"
-            checked={showSpecs}
-            onChange={(e) => setShowSpecs(e.target.checked)}
-          />{" "}
-          Show specs
-        </label>
-      </p>
       {SvgVocabulary.map((symbolData) => (
         <div
           key={symbolData.name}

lib/symbol-context-widget.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { SvgSymbolContext } from "./svg-symbol";
+
+export const SymbolContextWidget: React.FC<{
+  ctx: SvgSymbolContext;
+  onChange: (value: SvgSymbolContext) => void;
+}> = ({ ctx, onChange }) => {
+  const updateCtx = (updates: Partial<SvgSymbolContext>) => {
+    onChange({ ...ctx, ...updates });
+  };
+
+  return (
+    <p>
+      <label htmlFor="stroke">Stroke: </label>
+      <input
+        type="color"
+        value={ctx.stroke}
+        onChange={(e) => updateCtx({ stroke: e.target.value })}
+        id="stroke"
+      />{" "}
+      <label htmlFor="fill">Fill: </label>
+      <input
+        type="color"
+        value={ctx.fill}
+        onChange={(e) => updateCtx({ fill: e.target.value })}
+        id="fill"
+      />{" "}
+      <label>
+        <input
+          type="checkbox"
+          checked={ctx.showSpecs}
+          onChange={(e) => updateCtx({ showSpecs: e.target.checked })}
+        />{" "}
+        Show specs
+      </label>
+    </p>
+  );
+};