From f80ea39ba393036531ce7b4b7242a0c06c694b50 Mon Sep 17 00:00:00 2001
From: Andy <andy@Andys-MacBook-Pro.local>
Date: Mon, 10 Jun 2024 16:21:49 -0400
Subject: [PATCH] Add simple reset

---
 src/components/Modes/Challenge/Challenge.tsx | 21 ++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/Modes/Challenge/Challenge.tsx b/src/components/Modes/Challenge/Challenge.tsx
index 0614862..7f8ac8f 100644
--- a/src/components/Modes/Challenge/Challenge.tsx
+++ b/src/components/Modes/Challenge/Challenge.tsx
@@ -56,15 +56,32 @@ export default function Challenge() {
       }
     }
   }
+
+  function resetGame() {
+    setGameState(setUpGameState());
+  }
+
   return (
     <>
       {inProgress && (
         <h2 className="text-center">Remaining Notes: {notesLeftCount} </h2>
       )}
       {!inProgress && !notesLeftCount && (
-        <h2 className="text-center text-xl">You win!</h2>
+        <div className="flex flex-row justify-center items-center">
+          <h2 className="text-center text-xl">You win!</h2>{" "}
+          <button
+            className="m-4 bg-sky-500 hover:bg-sky-700 text-white py-2 px-4 rounded"
+            onClick={resetGame}
+          >
+            {" "}
+            Play again?{" "}
+          </button>
+        </div>
       )}
-      <h2 className="text-center text-xl">Scale: {randomScale.name}</h2>
+      <h2 className="text-center text-xl">
+        Scale:{" "}
+        <span className="text-green-500 font-bold">{randomScale.name}</span>
+      </h2>
       <div className="p-4  flex flex-row justify-center flex-wrap">
         {shuffledNotes.map((note) => {
           return (