From cb55b1224363e9c1b0b47b7f981a267efd95039b Mon Sep 17 00:00:00 2001
From: Atul Varma <varmaa@gmail.com>
Date: Sun, 7 Mar 2021 19:39:59 -0500
Subject: [PATCH] Maintain inversion of nested symbols. Fixes #39.

---
 lib/creature-symbol.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/lib/creature-symbol.tsx b/lib/creature-symbol.tsx
index 04432ce..d8ed404 100644
--- a/lib/creature-symbol.tsx
+++ b/lib/creature-symbol.tsx
@@ -231,19 +231,23 @@ const NestedCreatureSymbol: React.FC<NestedCreatureSymbolProps> = ({
 export const CreatureSymbol: React.FC<CreatureSymbolProps> = (props) => {
   let ctx = useContext(CreatureContext);
   const { data, attachments, nests } = props;
-  const childCtx: CreatureContextType = { ...ctx, parent: data };
+  const attachmentCtx: CreatureContextType = { ...ctx, parent: data };
 
   if (props.invertColors) {
     ctx = swapColors(ctx);
   }
 
+  // If we're inverted, then pass our inverted colors on to our
+  // nested children, to maintain color balance in the composition.
+  const nestedCtx: CreatureContextType = { ...ctx, parent: data };
+
   // 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.
   return (
     <>
       {attachments.length && (
-        <CreatureContext.Provider value={childCtx}>
+        <CreatureContext.Provider value={attachmentCtx}>
           {attachments.map((a, i) => (
             <AttachedCreatureSymbol key={i} {...a} parent={data} />
           ))}
@@ -251,7 +255,7 @@ export const CreatureSymbol: React.FC<CreatureSymbolProps> = (props) => {
       )}
       <SvgSymbolContent data={data} {...ctx} />
       {nests.length && (
-        <CreatureContext.Provider value={childCtx}>
+        <CreatureContext.Provider value={nestedCtx}>
           {nests.map((n, i) => (
             <NestedCreatureSymbol key={i} {...n} parent={data} />
           ))}