}
+ {activeMode === Mode.review ? : }
);
diff --git a/src/components/Modes/Challenge/Challenge.tsx b/src/components/Modes/Challenge/Challenge.tsx
new file mode 100644
index 0000000..623162c
--- /dev/null
+++ b/src/components/Modes/Challenge/Challenge.tsx
@@ -0,0 +1,49 @@
+import { useState } from "react";
+import { shuffle } from "lodash";
+
+import { Note, Scale } from "@types";
+import data from "@data";
+
+export default function Challenge() {
+ const { notes, scales } = data;
+ // this stuff will need to be refs or go in an effect as we will lose it on renders...
+ const shuffledNotes: Note[] = shuffle(notes);
+ const randomScale: Scale = shuffle(scales).pop() || scales[0];
+ const notesInScale: number[] = [...randomScale.notes];
+
+ // on click, if id is in notes left, turn tile a color and remove said id from array
+ const [notesLeft, setNotesLeft] = useState(notesInScale);
+ // think about what the default state should be. On load, it's in progress
+ const [inProgress, setInprogress] = useState(true);
+
+ const notesLeftCount = notesLeft.length;
+
+ function handleClick(id: number): void {
+ const index = notesLeft.indexOf(id);
+ if (index > -1) {
+ // match. Remove note
+ const updated = [...notesLeft.splice(index, 1)];
+ setNotesLeft(updated);
+ }
+ }
+ return (
+ <>
+