From f29acf01df1d41c439d8bd5b75296c6af8ebc3ee Mon Sep 17 00:00:00 2001
From: Judy Ye <judyy.ye@gmail.com>
Date: Thu, 30 Nov 2023 18:07:28 -0800
Subject: [PATCH] Refactor RoomOne

---
 src/components/RoomOne/RoomOne.css |  77 ++++-------
 src/components/RoomOne/RoomOne.js  | 203 +++++++++++------------------
 2 files changed, 102 insertions(+), 178 deletions(-)

diff --git a/src/components/RoomOne/RoomOne.css b/src/components/RoomOne/RoomOne.css
index 948f8cf..d799f86 100644
--- a/src/components/RoomOne/RoomOne.css
+++ b/src/components/RoomOne/RoomOne.css
@@ -23,7 +23,7 @@
 .door-btn,
 .bike-btn,
 .board-btn,
-.desk-comp-btn,
+.deskComp-btn,
 .radio-btn,
 .lamp-btn {
   border: none;
@@ -41,7 +41,7 @@
 .door-btn:hover,
 .bike-btn:hover,
 .board-btn:hover,
-.desk-comp-btn:hover,
+.deskComp-btn:hover,
 .radio-btn:hover,
 .lamp-btn:hover {
   transform: scale(0.95);
@@ -49,7 +49,7 @@
 }
 
 .clock-btn.disabled,
-.desk-comp-btn.disabled,
+.deskComp-btn.disabled,
 .plant-btn.disabled,
 .door-btn.disabled,
 .bike-btn.disabled,
@@ -101,7 +101,7 @@
   max-width: 40em;
 }
 
-.desk-comp-btn {
+.deskComp-btn {
   grid-area: desk;
   display: flex;
   align-items: center;
@@ -124,7 +124,7 @@
 
 .clock,
 .radio,
-.desk-comp,
+.deskComp,
 .plant,
 .bike,
 .door {
@@ -160,73 +160,36 @@
   .door {
     width: 70%;
   }
-  .desk-comp {
+  .deskComp {
     width: 55%;
   }
   .radio {
-    width: 80%
-  }
-}
-
-@media screen and (max-height: 585px) {
-  .board {
     width: 80%;
   }
-  .lamp {
-    width: 110%;
-  }
-  .radio {
-    width: 70%
-  }
-  .door {
-    width: 60%;
-  }
-}
-
-@media screen and (max-height: 480px) {
-  .room {
-    grid-template-columns: repeat(5, 1fr);
-    grid-template-rows: repeat(3, 1fr);
-    grid-template-areas:
-      'clock board board board lamp'
-      'bike door door desk radio'
-      'plant door door desk radio ';
-  }
-  .board {
-    width: 70%;
-  }
-
-  .radio {
-    margin-bottom: 0rem;
-  }
-  .door {
-    width: 50%;
-  }
 }
 
-
 @media screen and (max-width: 768px) {
-
   .room {
     padding: 0rem;
   }
 
+  .alpha-centauri {
+    padding-left: 1rem;
+  }
+
   .board,
   .clock,
+  .radio,
   .plant,
   .bike {
     width: 90%;
   }
 
-  .desk-comp {
+  .deskComp {
     width: 50%;
   }
-
-}
-
-@media screen and (max-height: 300px) {
-  .board {
-    width: 70%;
+  .lamp {
+    width: 140%;
   }
 }
 
@@ -241,7 +204,7 @@
   .door {
     width: 75%;
   }
-  .desk-comp {
+  .deskComp {
     width: 60%;
   }
   .lamp {
@@ -273,7 +236,7 @@
   .door {
     width: 110%;
   }
-  .desk-comp {
+  .deskComp {
     width: 90%;
   }
   .lamp {
@@ -291,4 +254,12 @@
       'plant lamp'
       'desk radio';
   }
+  .radio {
+    margin-bottom: 3rem;
+    width: 60%;
+  }
+  .door,
+  .lamp {
+    width: 100%;
+  }
 }
diff --git a/src/components/RoomOne/RoomOne.js b/src/components/RoomOne/RoomOne.js
index bc7a932..6de5c10 100644
--- a/src/components/RoomOne/RoomOne.js
+++ b/src/components/RoomOne/RoomOne.js
@@ -39,6 +39,7 @@ export default function RoomOne() {
   const [allMessages, setAllMessages] = useState([]);
   const [subscription, setSubscription] = useState(null);
   const [dataSubscription, setDataSubscription] = useState(null);
+
   const [allImagesLoaded, setAllImagesLoaded] = useState(false);
   const roomImages = [
     blueBackground,
@@ -78,6 +79,39 @@ export default function RoomOne() {
     setIsCipherVisible(!isCipherVisible);
   };
 
+  const puzzles = [
+    {
+      identifier: 'puzzleOne',
+      puzzleComponent: PuzzleOne,
+      image: deskComp,
+      class: 'deskComp'
+    },
+    {
+      identifier: 'puzzleTwo',
+      puzzleComponent: PuzzleTwo,
+      image: radio,
+      class: 'radio'
+    },
+    {
+      identifier: 'puzzleThree',
+      puzzleComponent: PuzzleThree,
+      image: clock,
+      class: 'clock'
+    },
+    {
+      identifier: 'puzzleFour',
+      puzzleComponent: PuzzleFour,
+      image: plant,
+      class: 'plant'
+    },
+    {
+      identifier: 'puzzleFive',
+      puzzleComponent: PuzzleFive,
+      image: bike,
+      class: 'bike'
+    }
+  ];
+
   useEffect(() => {
     const cable = createConsumer(
       'wss://escapelink-be-42ffc95e6cf7.herokuapp.com/cable'
@@ -98,21 +132,18 @@ export default function RoomOne() {
       { channel: 'DataChannel', game_name: backendData },
       {
         received: (data) => {
-          if (data.puzzle_identifier === 1) {
-            setPuzzleState('puzzleOne');
-          }
-          if (data.puzzle_identifier === 2) {
-            setPuzzleState('puzzleTwo');
-          }
-          if (data.puzzle_identifier === 3) {
-            setPuzzleState('puzzleThree');
-          }
-          if (data.puzzle_identifier === 4) {
-            setPuzzleState('puzzleFour');
-          }
-          if (data.puzzle_identifier === 5) {
-            setPuzzleState('puzzleFive');
+          const puzzleNum = {
+            1: 'puzzleOne',
+            2: 'puzzleTwo',
+            3: 'puzzleThree',
+            4: 'puzzleFour',
+            5: 'puzzleFive'
+          };
+
+          if (puzzleNum[data.puzzle_identifier]) {
+            setPuzzleState(puzzleNum[data.puzzle_identifier]);
           }
+
           if (data.game_over) {
             setShowVictoryPage(true);
           }
@@ -154,32 +185,12 @@ export default function RoomOne() {
     '--room-bg': lampClicked ? 'none' : `url(${blueBackground})`
   };
 
-  const handlePopupOpen = (popupName) => {
-    setOpenPopup(popupName);
-  };
-
   const handlePopupClose = () => {
     setOpenPopup(null);
   };
 
-  const handleClockClick = () => {
-    handlePopupOpen('puzzleThree');
-  };
-
-  const handleDeskCompClick = () => {
-    handlePopupOpen('puzzleOne');
-  };
-
-  const handleRadioClick = () => {
-    handlePopupOpen('puzzleTwo');
-  };
-
-  const handlePlantClick = () => {
-    handlePopupOpen('puzzleFour');
-  };
-
-  const handleBikeClick = () => {
-    handlePopupOpen('puzzleFive');
+  const handlePuzzleClick = (puzzle) => {
+    setOpenPopup(puzzle.identifier);
   };
 
   const handleLampClick = () => {
@@ -198,115 +209,57 @@ export default function RoomOne() {
             <article
               className={`room ${lampClicked ? 'invert-colors' : ''}`}
               style={roomStyle}>
-              <button
-                className={`clock-btn ${
-                  isDisabled.puzzleThree ? 'disabled' : 'active'
-                }`}
-                onClick={handleClockClick}
-                tabIndex={isDisabled.puzzleThree ? -1 : 0}>
-                <img className="clock" src={clock} alt="clock" />
-              </button>
-              <button
-                className={`bike-btn ${
-                  isDisabled.puzzleFive ? 'disabled' : 'active'
-                }`}
-                onClick={handleBikeClick}
-                tabIndex={isDisabled.puzzleFive ? -1 : 0}>
-                <img className="bike" src={bike} alt="bike" />
-              </button>
-              <button
-                className={`plant-btn ${
-                  isDisabled.puzzleFour ? 'disabled' : 'active'
-                }`}
-                onClick={handlePlantClick}
-                tabIndex={isDisabled.puzzleFour ? -1 : 0}>
-                <img className="plant" src={plant} alt="plant" />
-              </button>
+              {puzzles.map((puzzle) => (
+                <button
+                  key={puzzle.identifier}
+                  className={`${puzzle.class}-btn ${
+                    isDisabled[puzzle.identifier] ? 'disabled' : 'active'
+                  }`}
+                  onClick={() => handlePuzzleClick(puzzle)}
+                  tabIndex={isDisabled[puzzle.identifier] ? -1 : 0}>
+                  <img
+                    className={puzzle.class}
+                    src={puzzle.image}
+                    alt={puzzle.class}
+                  />
+                </button>
+              ))}
               <button className="door-btn" tabIndex={0}>
                 <img className="door" src={door} alt="door" />
               </button>
               <button
                 className="board-btn"
                 onClick={toggleCipherVisibility}
-                tabIndex={isCipherVisible ? -1 : 0}>
+                tabIndex={isCipherVisible ? 0 : -1}>
                 <img className="board" src={board} alt="board" />
               </button>
-              <button
-                className={`desk-comp-btn ${
-                  isDisabled.puzzleOne ? 'disabled' : 'active'
-                }`}
-                onClick={handleDeskCompClick}
-                tabIndex={isDisabled.puzzleOne ? -1 : 0}>
-                <img className="desk-comp" src={deskComp} alt="desk" />
-              </button>
               <button
                 className="lamp-btn"
                 onClick={handleLampClick}
                 tabIndex={0}>
                 <img className="lamp" src={lamp} alt="lamp" />
               </button>
-              <button
-                className={`radio-btn ${
-                  isDisabled.puzzleTwo ? 'disabled' : 'active'
-                }`}
-                onClick={handleRadioClick}
-                tabIndex={isDisabled.puzzleTwo ? -1 : 0}>
-                <img className="radio" src={radio} alt="radio" />
-              </button>
-              {openPopup === 'puzzleOne' && (
-                <PuzzleOne
-                  setIsDisabled={() => setPuzzleState('puzzleOne')}
-                  winConditions={winConditions}
-                  setWinConditions={setWinConditions}
-                  onClose={handlePopupClose}
-                  puzzleCompleted={puzzleCompleted}
-                />
-              )}
-              {openPopup === 'puzzleTwo' && (
-                <PuzzleTwo
-                  setIsDisabled={() => setPuzzleState('puzzleTwo')}
-                  winConditions={winConditions}
-                  setWinConditions={setWinConditions}
-                  onClose={handlePopupClose}
-                  puzzleCompleted={puzzleCompleted}
-                />
-              )}
-              {openPopup === 'puzzleThree' && (
-                <PuzzleThree
-                  setIsDisabled={() => setPuzzleState('puzzleThree')}
-                  winConditions={winConditions}
-                  setWinConditions={setWinConditions}
-                  onClose={handlePopupClose}
-                  puzzleCompleted={puzzleCompleted}
-                />
-              )}
-              {openPopup === 'puzzleFour' && (
-                <PuzzleFour
-                  setIsDisabled={() => setPuzzleState('puzzleFour')}
-                  winConditions={winConditions}
-                  setWinConditions={setWinConditions}
-                  onClose={handlePopupClose}
-                  puzzleCompleted={puzzleCompleted}
-                />
-              )}
-              {openPopup === 'puzzleFive' && (
-                <PuzzleFive
-                  setIsDisabled={() => setPuzzleState('puzzleFive')}
-                  winConditions={winConditions}
-                  setWinConditions={setWinConditions}
-                  onClose={handlePopupClose}
-                  puzzleCompleted={puzzleCompleted}
-                />
-              )}
+              {openPopup &&
+                puzzles.map(
+                  (puzzle) =>
+                    puzzle.identifier === openPopup && (
+                      <puzzle.puzzleComponent
+                        key={puzzle.identifier}
+                        setIsDisabled={() => setPuzzleState(puzzle.identifier)}
+                        winConditions={winConditions}
+                        setWinConditions={setWinConditions}
+                        onClose={handlePopupClose}
+                        puzzleCompleted={puzzleCompleted}
+                      />
+                    )
+                )}
               <Chat
                 backendData={backendData}
                 allMessages={allMessages}
                 subscription={subscription}
               />
               {roomStyle['--room-bg'] === 'none' && (
-                <span tabIndex={0} className="alpha-centauri">
-                  ⏃⌰⌿⊑⏃ ☊⟒⋏⏁⏃⎍⍀⟟
-                </span>
+                <span className="alpha-centauri">⏃⌰⌿⊑⏃ ☊⟒⋏⏁⏃⎍⍀⟟</span>
               )}
             </article>
           )}