WIP game state

package.json

@@ -12,13 +12,15 @@
   },
   "dependencies": {
     "classnames": "^2.5.1",
+    "lodash": "4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^15.0.2",
     "@testing-library/user-event": "^14.5.2",
+    "@types/lodash": "^4.17.0",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",

src/App.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 
 import ModeToggle from "@components/ModeToggle/ModeToggle";
 import Review from "@components/Modes/Review/Review";
+import Challenge from "@components/Modes/Challenge/Challenge";
 
 import { Mode } from "@types";
 
@@ -17,7 +18,7 @@ function App() {
           Music Theory Practice
         </h1>
         <ModeToggle activeMode={activeMode} setActiveMode={setActiveMode} />
-        {activeMode === Mode.review ? <Review /> : <div>foo</div>}
+        {activeMode === Mode.review ? <Review /> : <Challenge />}
       </div>
     </div>
   );

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 (
+    <>
+      <h2>Remaining Notes: {notesLeftCount} </h2>
+      <h2>Scale: {randomScale.name}</h2>
+      <div className="p-4 h-screen flex flex-row justify-center flex-wrap">
+        {shuffledNotes.map((note) => {
+          return (
+            <button
+              onClick={() => {
+                handleClick(note.id);
+              }}
+              className="rounded-md m-2 bg-sky-500 basis-1/4"
+            >
+              {note.string}
+            </button>
+          );
+        })}
+      </div>
+    </>
+  );
+}