wip: add chromatic mode

src/components/jam/key-center-selector.tsx

@@ -2,8 +2,8 @@ import { Select } from "theme-ui";
 import { Note21 } from "../../18th-century-europe/note";
 
 export interface KeyCenterSelectorProps {
-  keyCenter: Note21;
-  setKeyCenter: (keyCenter: Note21) => void;
+  keyCenter: Note21 | null;
+  setKeyCenter: (keyCenter: Note21 | null) => void;
 }
 
 export const KeyCenterSelector: React.FC<KeyCenterSelectorProps> = ({
@@ -14,14 +14,18 @@ export const KeyCenterSelector: React.FC<KeyCenterSelectorProps> = ({
     (value) => typeof value === "string"
   );
 
+  const onChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    if (event.target.value === "Chromatic") {
+      setKeyCenter(null);
+    } else {
+      setKeyCenter(Note21[event.target.value as keyof typeof Note21]);
+    }
+  };
+
   return (
     <>
-      <Select
-        onChange={(event) =>
-          setKeyCenter(Note21[event.target.value as keyof typeof Note21])
-        }
-        sx={{ minWidth: "80px" }}
-      >
+      <Select onChange={onChange} sx={{ minWidth: "80px" }}>
+        <option key={"Chromatic"}>Chromatic</option>
         {keyCenters.map((key) => (
           <option key={key} value={key}>
             {`${key.toString().charAt(0)}${key

src/jam.tsx

@@ -10,7 +10,7 @@ import { getNewChordWithinKey } from "./services/chord-helpers";
 export const Jam: React.FC = () => {
   const [chords, setChords] = useState<string[]>([]);
   const [mode, setMode] = useState<Mode>(Mode.IONIAN);
-  const [keyCenter, setKeyCenter] = useState<Note21>(Note21.C_NATURAL);
+  const [keyCenter, setKeyCenter] = useState<Note21 | null>(Note21.C_NATURAL);
 
   const addChord = () => {
     const newChord = getNewChordWithinKey(mode, keyCenter, chords);

src/services/chord-helpers.ts

@@ -45,14 +45,18 @@ export const generateChord = () => {
 
 export const getNewChordWithinKey = (
   mode: Mode,
-  center: Note21,
+  center: Note21 | null,
   currentChords: string[]
 ) => {
   const index = randomInteger(0, 6);
 
-  const newChord = engraveChord(index, center, mode);
-
-  return newChord;
+  if (center) {
+    return engraveChord(index, center, mode);
+  } else {
+    const keyIndex = randomInteger(0, 20);
+    const keyCenter = Note21[keyIndex];
+    return engraveChord(index, Note21[keyCenter as keyof typeof Note21], mode);
+  }
 };
 
 export const engraveChords = (chords: Chord[], center: Note21, mode: Mode) => {