From 24eead10f862b9141a428a3de1b45418e6e26c2f Mon Sep 17 00:00:00 2001
From: Atul Varma <varmaa@gmail.com>
Date: Sun, 4 Apr 2021 08:46:09 -0400
Subject: [PATCH] Disable 'invert every other symbol' if needed.

---
 lib/checkbox.tsx           | 5 ++++-
 lib/mandala-circle.tsx     | 6 +-----
 lib/pages/mandala-page.tsx | 3 ++-
 lib/util.ts                | 5 +++++
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/lib/checkbox.tsx b/lib/checkbox.tsx
index c43da36..7e20f40 100644
--- a/lib/checkbox.tsx
+++ b/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}
diff --git a/lib/mandala-circle.tsx b/lib/mandala-circle.tsx
index b4fcf8c..b95f9b6 100644
--- a/lib/mandala-circle.tsx
+++ b/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(
diff --git a/lib/pages/mandala-page.tsx b/lib/pages/mandala-page.tsx
index d1a346d..50013d5 100644
--- a/lib/pages/mandala-page.tsx
+++ b/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 })
diff --git a/lib/util.ts b/lib/util.ts
index 9eb187b..fb27f8a 100644
--- a/lib/util.ts
+++ b/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;
+}