In mandala, add checkbox to invert every other symbol. (#66)

Fixes #64.

lib/pages/mandala-page.tsx

@@ -45,6 +45,7 @@ const CIRCLE_1_DEFAULTS: ExtendedMandalaCircleParams = {
   rotation: 0,
   symbolScaling: 1,
   symbolRotation: 0,
+  invertEveryOtherSymbol: false,
 };
 
 const CIRCLE_2_DEFAULTS: ExtendedMandalaCircleParams = {
@@ -55,6 +56,7 @@ const CIRCLE_2_DEFAULTS: ExtendedMandalaCircleParams = {
   rotation: 0,
   symbolScaling: 1,
   symbolRotation: 0,
+  invertEveryOtherSymbol: false,
 };
 
 const RADIUS: NumericRange = {
@@ -101,10 +103,15 @@ type MandalaCircleParams = {
   radius: number;
   numSymbols: number;
   symbolTransforms?: SvgTransform[];
+  invertEveryOtherSymbol: boolean;
 };
 
 type MandalaCircleProps = MandalaCircleParams & SvgSymbolContext;
 
+function isEvenNumber(value: number) {
+  return value % 2 === 0;
+}
+
 const MandalaCircle: React.FC<MandalaCircleProps> = (props) => {
   const degreesPerItem = 360 / props.numSymbols;
   const { translation, rotation } = getAttachmentTransforms(
@@ -114,10 +121,7 @@ const MandalaCircle: React.FC<MandalaCircleProps> = (props) => {
     },
     getAnchorOrCenter(props.data)
   );
-
-  const symbol = (
-    <SvgTransform
-      transform={[
+  const transform: SvgTransform[] = [
     // Remember that transforms are applied in reverse order,
     // so read the following from the end first!
 
@@ -131,20 +135,24 @@ const MandalaCircle: React.FC<MandalaCircleProps> = (props) => {
     // the origin and facing the proper direction.
     svgRotate(rotation),
     svgTranslate(translation),
-      ]}
-    >
-      <SvgSymbolContent {...props} />
-    </SvgTransform>
-  );
+  ];
+
+  const invertEveryOtherSymbol =
+    isEvenNumber(props.numSymbols) && props.invertEveryOtherSymbol;
 
   const symbols = range(props.numSymbols)
     .reverse()
     .map((i) => (
       <SvgTransform
         key={i}
-        transform={svgRotate(degreesPerItem * i)}
-        children={symbol}
-      />
+        transform={[svgRotate(degreesPerItem * i), ...transform]}
+      >
+        {invertEveryOtherSymbol && isEvenNumber(i) ? (
+          <SvgSymbolContent {...swapColors(props)} />
+        ) : (
+          <SvgSymbolContent {...props} />
+        )}
+      </SvgTransform>
     ));
 
   return <>{symbols}</>;
@@ -221,6 +229,13 @@ const ExtendedMandalaCircleParamsWidget: React.FC<{
         onChange={(symbolRotation) => onChange({ ...value, symbolRotation })}
         {...ROTATION}
       />
+      <Checkbox
+        label="Invert every other symbol (applies only to circles with an even number of symbols)"
+        value={value.invertEveryOtherSymbol}
+        onChange={(invertEveryOtherSymbol) =>
+          onChange({ ...value, invertEveryOtherSymbol })
+        }
+      />
     </div>
   );
 };
@@ -230,6 +245,7 @@ function getRandomCircleParams(rng: Random): MandalaCircleParams {
     data: rng.choice(SvgVocabulary.items),
     radius: rng.inRange(RADIUS),
     numSymbols: rng.inRange(NUM_SYMBOLS),
+    invertEveryOtherSymbol: rng.bool(),
   };
 }