Don't fill if showing specs on mandala.

lib/pages/creature-page.tsx

@@ -1,6 +1,10 @@
 import React, { useContext, useRef, useState } from "react";
 import { SvgVocabulary } from "../svg-vocabulary";
-import { createSvgSymbolContext, SvgSymbolData } from "../svg-symbol";
+import {
+  createSvgSymbolContext,
+  noFillIfShowingSpecs,
+  SvgSymbolData,
+} from "../svg-symbol";
 import {
   AttachmentPointType,
   ATTACHMENT_POINT_TYPES,
@@ -180,11 +184,10 @@ export const CreaturePage: React.FC<{}> = () => {
   const [complexity, setComplexity] = useState(INITIAL_COMPLEXITY_LEVEL);
   const defaultCtx = useContext(CreatureContext);
   const newRandomSeed = () => setRandomSeed(Date.now());
-  const ctx: CreatureContextType = {
+  const ctx: CreatureContextType = noFillIfShowingSpecs({
     ...defaultCtx,
     ...symbolCtx,
-    fill: symbolCtx.showSpecs ? "none" : symbolCtx.fill,
+  });
-  };
   const creature = COMPLEXITY_LEVEL_GENERATORS[complexity]({
     rng: new Random(randomSeed),
     randomlyInvert,

lib/pages/mandala-page.tsx

@@ -8,6 +8,7 @@ import { HoverDebugHelper } from "../hover-debug-helper";
 import { NumericSlider } from "../numeric-slider";
 import {
   createSvgSymbolContext,
+  noFillIfShowingSpecs,
   safeGetAttachmentPoint,
   SvgSymbolContent,
   SvgSymbolContext,
@@ -237,7 +238,7 @@ export const MandalaPage: React.FC<{}> = () => {
   const [bgColor, setBgColor] = useState(DEFAULT_BG_COLOR);
   const [circle1, setCircle1] = useState(CIRCLE_1_DEFAULTS);
   const [circle2, setCircle2] = useState(CIRCLE_2_DEFAULTS);
-  const [symbolCtx, setSymbolCtx] = useState(createSvgSymbolContext());
+  const [baseSymbolCtx, setBaseSymbolCtx] = useState(createSvgSymbolContext());
   const [useTwoCircles, setUseTwoCircles] = useState(false);
   const [invertCircle2, setInvertCircle2] = useState(true);
   const [firstBehindSecond, setFirstBehindSecond] = useState(false);
@@ -247,6 +248,8 @@ export const MandalaPage: React.FC<{}> = () => {
     setCircle2({ ...circle2, ...getRandomCircleParams(rng) });
   };
 
+  const symbolCtx = noFillIfShowingSpecs(baseSymbolCtx);
+
   const circle2SymbolCtx = invertCircle2 ? swapColors(symbolCtx) : symbolCtx;
 
   const circles = [
@@ -265,7 +268,7 @@ export const MandalaPage: React.FC<{}> = () => {
   return (
     <>
       <h1>Mandala!</h1>
-      <SymbolContextWidget ctx={symbolCtx} onChange={setSymbolCtx}>
+      <SymbolContextWidget ctx={baseSymbolCtx} onChange={setBaseSymbolCtx}>
         <ColorWidget label="Background" value={bgColor} onChange={setBgColor} />{" "}
       </SymbolContextWidget>
       <fieldset>

lib/svg-symbol.tsx

@@ -43,6 +43,13 @@ const DEFAULT_CONTEXT: SvgSymbolContext = {
   uniformStrokeWidth: DEFAULT_UNIFORM_STROKE_WIDTH,
 };
 
+export function noFillIfShowingSpecs<T extends SvgSymbolContext>(ctx: T): T {
+  return {
+    ...ctx,
+    fill: ctx.showSpecs ? "none" : ctx.fill,
+  };
+}
+
 export function swapColors<T extends SvgSymbolContext>(ctx: T): T {
   return {
     ...ctx,