From c9ccaa673cd102b042618373f26623e1cbccb5a8 Mon Sep 17 00:00:00 2001
From: Judy Ye <judyy.ye@gmail.com>
Date: Wed, 18 Oct 2023 16:33:38 -0700
Subject: [PATCH] Refactor disable button function

---
 src/PuzzleThree/PuzzleThree.js        |  2 +-
 src/components/PuzzleOne/PuzzleOne.js |  2 +-
 src/components/PuzzleTwo/PuzzleTwo.js |  2 +-
 src/components/Room/Room.css          |  6 ------
 src/components/Room/Room.js           | 17 +++++++----------
 5 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/src/PuzzleThree/PuzzleThree.js b/src/PuzzleThree/PuzzleThree.js
index c6ecf03..b8f57f6 100644
--- a/src/PuzzleThree/PuzzleThree.js
+++ b/src/PuzzleThree/PuzzleThree.js
@@ -19,7 +19,7 @@ export default function PuzzleThree({
     if (answer.toLowerCase() === 'aliens') {
       setWinConditions([...winConditions, answer]);
       onClose();
-      setIsDisabled(true)
+      setIsDisabled()
     } else {
       setIncorrect('Incorrect: Please try again');
     }
diff --git a/src/components/PuzzleOne/PuzzleOne.js b/src/components/PuzzleOne/PuzzleOne.js
index 598846c..6c81e24 100644
--- a/src/components/PuzzleOne/PuzzleOne.js
+++ b/src/components/PuzzleOne/PuzzleOne.js
@@ -19,7 +19,7 @@ export default function PuzzleOne({
     if (answer.toLowerCase() === 'portal') {
       setWinConditions([...winConditions, answer]);
       onClose();
-      setIsDisabled(true);
+      setIsDisabled();
     } else {
       setIncorrect('Incorrect: Please try again');
     }
diff --git a/src/components/PuzzleTwo/PuzzleTwo.js b/src/components/PuzzleTwo/PuzzleTwo.js
index 01e71f9..dd85eb3 100644
--- a/src/components/PuzzleTwo/PuzzleTwo.js
+++ b/src/components/PuzzleTwo/PuzzleTwo.js
@@ -19,7 +19,7 @@ export default function PuzzleTwo({
     if (answer === '94.5') {
       setWinConditions([...winConditions, answer]);
       onClose();
-      setIsDisabled(true)
+      setIsDisabled()
     } else {
       setIncorrect('Incorrect: Please try again');
     }
diff --git a/src/components/Room/Room.css b/src/components/Room/Room.css
index 9f835f0..1e143bc 100644
--- a/src/components/Room/Room.css
+++ b/src/components/Room/Room.css
@@ -61,12 +61,6 @@
   pointer-events: none;
 }
 
-/* .clock-btn.disabled:hover,
-.desk-comp-btn.disabled:hover {
-  background-color: transparent;
-  border: none;
-} */
-
 .plant-btn {
   grid-area: plant;
   display: flex;
diff --git a/src/components/Room/Room.js b/src/components/Room/Room.js
index 0053427..3041d2b 100644
--- a/src/components/Room/Room.js
+++ b/src/components/Room/Room.js
@@ -32,13 +32,10 @@ export default function Room() {
   })
   console.log(winConditions)
 
-  const setPuzzleState = (puzzleNum, isDisabled) => {
-    setIsDisabled ({...puzzleNum,[puzzleNum]: isDisabled })
+  const setPuzzleState = (puzzleNum) => {
+    setIsDisabled (prevIsDisabled => ({...prevIsDisabled,[puzzleNum]: true }))
   }
 
-console.log('2',isDisabled.puzzleTwo)
-console.log('3',isDisabled.puzzleThree)
-
   const roomStyle = {
     "--room-bg": lampClicked ? 'none' : `url(${blueBackground})`,
   };
@@ -105,11 +102,11 @@ console.log('3',isDisabled.puzzleThree)
       <button className={`radio-btn ${isDisabled.puzzleTwo ? 'disabled': 'active'}`} onClick={handleRadioClick}>
         <img className="radio" src={radio} alt="radio" />
       </button>
-      {showPuzzleOne && <PuzzleOne isDisabled={isDisabled} setIsDisabled={(isDisabled) => setPuzzleState('puzzleOne', isDisabled)} winConditions={winConditions} setWinConditions={setWinConditions} onClose={handleClosePuzzleOne} />}
-      {showPuzzleTwo && <PuzzleTwo isDisabled={isDisabled} setIsDisabled={(isDisabled) => setPuzzleState('puzzleTwo', isDisabled)} winConditions={winConditions} setWinConditions={setWinConditions} onClose={handleClosePuzzleTwo} />}
-      {showPuzzleThree && <PuzzleThree isDisabled={isDisabled} setIsDisabled={(isDisabled) => setPuzzleState('puzzleThree', isDisabled)} winConditions={winConditions} setWinConditions={setWinConditions} onClose={handleClosePuzzleThree} />}
-      {showPuzzleFour && <PuzzleFour isDisabled={isDisabled} setIsDisabled={(isDisabled) => setPuzzleState('puzzleFour', isDisabled)} winConditions={winConditions} setWinConditions={setWinConditions} onClose={handleClosePuzzleFour} />}
-      {showPuzzleFive && <PuzzleFive isDisabled={isDisabled} setIsDisabled={(isDisabled) => setPuzzleState('puzzleFive', isDisabled)} winConditions={winConditions} setWinConditions={setWinConditions} onClose={handleClosePuzzleFive} />}
+      {showPuzzleOne && <PuzzleOne  setIsDisabled={() => setPuzzleState('puzzleOne')} winConditions={winConditions} setWinConditions={setWinConditions} onClose={handleClosePuzzleOne} />}
+      {showPuzzleTwo && <PuzzleTwo setIsDisabled={() => setPuzzleState( 'puzzleTwo')} winConditions={winConditions} setWinConditions={setWinConditions} onClose={handleClosePuzzleTwo} />}
+      {showPuzzleThree && <PuzzleThree setIsDisabled={() => setPuzzleState( 'puzzleThree')} winConditions={winConditions} setWinConditions={setWinConditions} onClose={handleClosePuzzleThree} />}
+      {showPuzzleFour && <PuzzleFour  setIsDisabled={() => setPuzzleState('puzzleFour')} winConditions={winConditions} setWinConditions={setWinConditions} onClose={handleClosePuzzleFour} />}
+      {showPuzzleFive && <PuzzleFive setIsDisabled={() => setPuzzleState( 'puzzleFive')} winConditions={winConditions} setWinConditions={setWinConditions} onClose={handleClosePuzzleFive} />}
     </article>
   );
 }
\ No newline at end of file