Disable 'invert every other symbol' if needed.

lib/checkbox.tsx

@@ -1,17 +1,20 @@
+import classNames from "classnames";
 import React from "react";
 
 type CheckboxProps = {
   label: string;
   onChange: (value: boolean) => void;
   value: boolean;
+  disabled?: boolean;
 };
 
 export const Checkbox: React.FC<CheckboxProps> = (props) => {
   return (
-    <label className="checkbox">
+    <label className={classNames("checkbox", { disabled: props.disabled })}>
       <input
         type="checkbox"
         checked={props.value}
+        disabled={props.disabled}
         onChange={(e) => props.onChange(e.target.checked)}
       />{" "}
       {props.label}

lib/mandala-circle.tsx

@@ -11,7 +11,7 @@ import {
   swapColors,
 } from "./svg-symbol";
 import { svgRotate, SvgTransform, svgTranslate } from "./svg-transform";
-import { range } from "./util";
+import { isEvenNumber, range } from "./util";
 
 /**
  * Returns the anchor point of the given symbol; if it doesn't have
@@ -38,10 +38,6 @@ export type MandalaCircleParams = {
 
 export type MandalaCircleProps = MandalaCircleParams & SvgSymbolContext;
 
-function isEvenNumber(value: number) {
-  return value % 2 === 0;
-}
-
 export const MandalaCircle: React.FC<MandalaCircleProps> = (props) => {
   const degreesPerItem = 360 / props.numSymbols;
   const { translation, rotation } = getAttachmentTransforms(

lib/pages/mandala-page.tsx

@@ -11,7 +11,7 @@ import {
 import { VocabularyWidget } from "../vocabulary-widget";
 import { svgRotate, svgScale, SvgTransform } from "../svg-transform";
 import { SvgVocabulary } from "../svg-vocabulary";
-import { NumericRange } from "../util";
+import { isEvenNumber, NumericRange } from "../util";
 import { Random } from "../random";
 import { Checkbox } from "../checkbox";
 import {
@@ -186,6 +186,7 @@ const ExtendedMandalaCircleParamsWidget: React.FC<{
       />
       <Checkbox
         label="Invert every other symbol (applies only to circles with an even number of symbols)"
+        disabled={!isEvenNumber(value.numSymbols)}
         value={value.invertEveryOtherSymbol}
         onChange={(invertEveryOtherSymbol) =>
           onChange({ ...value, invertEveryOtherSymbol })

lib/util.ts

@@ -70,3 +70,8 @@ export function slugify(text: string) {
     .replace(/^-+/, "") // Trim - from start of text
     .replace(/-+$/, ""); // Trim - from end of text
 }
+
+/** Returns whether the given number is even (as opposed to odd). */
+export function isEvenNumber(value: number) {
+  return value % 2 === 0;
+}