Add support for invert_nested (#17).

lib/creature-symbol-factory.tsx

@@ -18,6 +18,7 @@ type SimpleCreatureSymbolProps = AttachmentIndices & {
   nestInside?: boolean;
   children?: AttachmentChildren;
   attachTo?: AttachmentPointType;
+  invert?: boolean;
   indices?: number[];
 };
 
@@ -129,6 +130,7 @@ function getCreatureSymbol(
     data,
     attachments: attachments.map(extractAttachedCreatureSymbol),
     nests: nests.map(extractNestedCreatureSymbol),
+    invertColors: props.invert ?? false,
   };
   return result;
 }

lib/creature-symbol.tsx

@@ -9,6 +9,7 @@ import {
   SvgSymbolContent,
   SvgSymbolContext,
   SvgSymbolData,
+  swapColors,
 } from "./svg-symbol";
 
 const DEFAULT_ATTACHMENT_SCALE = 0.5;
@@ -76,6 +77,7 @@ export type NestedCreatureSymbol = CreatureSymbol & {
 
 export type CreatureSymbol = {
   data: SvgSymbolData;
+  invertColors: boolean;
   attachments: AttachedCreatureSymbol[];
   nests: NestedCreatureSymbol[];
 };
@@ -227,10 +229,14 @@ const NestedCreatureSymbol: React.FC<NestedCreatureSymbolProps> = ({
 };
 
 export const CreatureSymbol: React.FC<CreatureSymbolProps> = (props) => {
-  const ctx = useContext(CreatureContext);
+  let ctx = useContext(CreatureContext);
   const { data, attachments, nests } = props;
   const childCtx: CreatureContextType = { ...ctx, parent: data };
 
+  if (props.invertColors) {
+    ctx = swapColors(ctx);
+  }
+
   // The attachments should be before our symbol in the DOM so they
   // appear behind our symbol, while anything nested within our symbol
   // should be after our symbol so they appear in front of it.

lib/pages/creature-page.tsx

@@ -79,6 +79,7 @@ function getNestingChildren(
         attachments: [],
         nests: [],
         indices,
+        invertColors: meta?.invert_nested ?? false,
       },
     ];
   }
@@ -99,6 +100,7 @@ function getSymbolWithAttachments(
     data: root,
     attachments: [],
     nests: getNestingChildren(root, rng, true),
+    invertColors: false,
   };
   if (root.specs) {
     const attachmentKinds = rng.uniqueChoices(
@@ -116,6 +118,7 @@ function getSymbolWithAttachments(
         indices,
         attachments: [],
         nests: getNestingChildren(attachment, rng),
+        invertColors: false,
       });
     }
   }
@@ -160,7 +163,7 @@ const EYE_CREATURE = (
       </Hand>
     </Crown>
     <Leg attachTo="leg" left right />
-    <Tail attachTo="tail" />
+    <Tail attachTo="tail" invert />
   </Eye>
 );
 

lib/svg-symbol-metadata.ts

@@ -16,12 +16,19 @@ type SvgSymbolMetadataBooleans = {
    * be nested inside another symbol's nesting area.
    */
   never_be_nested?: boolean;
+
+  /**
+   * If true, this indicates that any symbols nested on this
+   * symbol’s nesting area should have their colors inverted.
+   */
+  invert_nested?: boolean;
 };
 
 const METADATA_BOOLEANS: Set<keyof SvgSymbolMetadataBooleans> = new Set([
   "always_nest",
   "always_be_nested",
   "never_be_nested",
+  "invert_nested",
 ]);
 
 function isSvgSymbolMetadataBoolean(

lib/svg-symbol.tsx

@@ -43,6 +43,14 @@ const DEFAULT_CONTEXT: SvgSymbolContext = {
   uniformStrokeWidth: DEFAULT_UNIFORM_STROKE_WIDTH,
 };
 
+export function swapColors<T extends SvgSymbolContext>(ctx: T): T {
+  return {
+    ...ctx,
+    fill: ctx.stroke,
+    stroke: ctx.fill,
+  };
+}
+
 export function createSvgSymbolContext(
   ctx: Partial<SvgSymbolContext> = {}
 ): SvgSymbolContext {

lib/symbol-context-widget.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { SvgSymbolContext } from "./svg-symbol";
+import { SvgSymbolContext, swapColors } from "./svg-symbol";
 import { float } from "./util";
 
 export const SymbolContextWidget: React.FC<{
@@ -10,12 +10,6 @@ export const SymbolContextWidget: React.FC<{
   const updateCtx = (updates: Partial<SvgSymbolContext>) => {
     onChange({ ...ctx, ...updates });
   };
-  const swapColors = () => {
-    updateCtx({
-      fill: ctx.stroke,
-      stroke: ctx.fill,
-    });
-  };
 
   return (
     <p>
@@ -34,7 +28,9 @@ export const SymbolContextWidget: React.FC<{
         onChange={(e) => updateCtx({ fill: e.target.value })}
         id="fill"
       />{" "}
-      <button onClick={swapColors}>Swap stroke/fill</button>{" "}
+      <button onClick={() => updateCtx(swapColors(ctx))}>
+        Swap stroke/fill
+      </button>{" "}
       <label>
         <input
           type="checkbox"

svg/_template.toml

@@ -19,3 +19,7 @@ always_be_nested = false
 # If true, this indicates that the symbol should never
 # be nested inside another symbol's nesting area.
 never_be_nested = false
+
+# If true, this indicates that any symbols nested on this
+# symbol’s nesting area should have their colors inverted.
+invert_nested = false