Add tab index and responsiveness to RoomOne

escape-link · Nov 30, 2023 · 93d1fe0 · 93d1fe0
1 parent 9309b2c
commit 93d1fe0
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 38 deletions.
diff --git a/src/components/RoomOne/RoomOne.css b/src/components/RoomOne/RoomOne.css
@@ -6,8 +6,8 @@
 .room {
   background-image: var(--room-bg);
   background-size: cover;
-  width: 100vw;
-  height: 100vh;
+  width: 100svw;
+  height: 100svh;
   display: grid;
   padding: 0 2%;
   grid-template-columns: repeat(5, 1fr);
@@ -145,6 +145,7 @@
 
 .alpha-centauri {
   color: white;
+  margin-bottom: 3rem;
 }
 
 @media screen and (max-width: 1025px) {
@@ -167,23 +168,51 @@
   }
 }
 
-@media screen and (max-width: 768px) {
-  /* .room {
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(6, 1fr);
+@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'
-      'bike door'
-      'plant desk'
-      'radio lamp';
-  } */
+      '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;
   }
 
   .board,
   .clock,
-  .radio,
   .plant,
   .bike {
     width: 90%;
@@ -192,8 +221,12 @@
   .desk-comp {
     width: 50%;
   }
-  .lamp {
-    width: 140%;
+
+}
+
+@media screen and (max-height: 300px) {
+  .board {
+    width: 70%;
   }
 }
 

diff --git a/src/components/RoomOne/RoomOne.js b/src/components/RoomOne/RoomOne.js
@@ -44,7 +44,9 @@ export default function RoomOne() {
   };
 
   useEffect(() => {
-    const cable = createConsumer('wss://escapelink-be-42ffc95e6cf7.herokuapp.com/cable');
+    const cable = createConsumer(
+      'wss://escapelink-be-42ffc95e6cf7.herokuapp.com/cable'
+    );
     const newSubscription = cable.subscriptions.create(
       { channel: 'GameChannel', room: backendData },
       {
@@ -99,7 +101,6 @@ export default function RoomOne() {
     });
   };
 
-
   useEffect(() => {
     if (winConditions.length === 5) {
       dataSubscription.send({ game_over: true });
@@ -115,7 +116,7 @@ export default function RoomOne() {
   };
 
   const roomStyle = {
-    "--room-bg": lampClicked ? "none" : `url(${blueBackground})`,
+    '--room-bg': lampClicked ? 'none' : `url(${blueBackground})`
   };
 
   const handlePopupOpen = (popupName) => {
@@ -127,23 +128,23 @@ export default function RoomOne() {
   };
 
   const handleClockClick = () => {
-    handlePopupOpen("puzzleThree");
+    handlePopupOpen('puzzleThree');
   };
 
   const handleDeskCompClick = () => {
-    handlePopupOpen("puzzleOne");
+    handlePopupOpen('puzzleOne');
   };
 
   const handleRadioClick = () => {
-    handlePopupOpen("puzzleTwo");
+    handlePopupOpen('puzzleTwo');
   };
 
   const handlePlantClick = () => {
-    handlePopupOpen("puzzleFour");
+    handlePopupOpen('puzzleFour');
   };
 
   const handleBikeClick = () => {
-    handlePopupOpen("puzzleFive");
+    handlePopupOpen('puzzleFive');
   };
 
   const handleLampClick = () => {
@@ -166,14 +167,6 @@ export default function RoomOne() {
             tabIndex={isDisabled.puzzleThree ? -1 : 0}>
             <img className="clock" src={clock} alt="clock" />
           </button>
-          <button
-            className={`plant-btn ${
-              isDisabled.puzzleFour ? 'disabled' : 'active'
-            }`}
-            onClick={handlePlantClick}
-            tabIndex={isDisabled.puzzleFour ? -1 : 0}>
-            <img className="plant" src={plant} alt="plant" />
-          </button>
           <button
             className={`bike-btn ${
               isDisabled.puzzleFive ? 'disabled' : 'active'
@@ -182,21 +175,29 @@ export default function RoomOne() {
             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>
           <button className="door-btn" tabIndex={0}>
             <img className="door" src={door} alt="door" />
           </button>
           <button
             className="board-btn"
             onClick={toggleCipherVisibility}
-            tabIndex={isCipherVisible ? 0 : -1}>
+            tabIndex={isCipherVisible ? -1 : 0}>
             <img className="board" src={board} alt="board" />
           </button>
           <button
             className={`desk-comp-btn ${
               isDisabled.puzzleOne ? 'disabled' : 'active'
             }`}
             onClick={handleDeskCompClick}
-            tabIndex={0}>
+            tabIndex={isDisabled.puzzleOne ? -1 : 0}>
             <img className="desk-comp" src={deskComp} alt="desk" />
           </button>
           <button className="lamp-btn" onClick={handleLampClick} tabIndex={0}>
@@ -210,7 +211,7 @@ export default function RoomOne() {
             tabIndex={isDisabled.puzzleTwo ? -1 : 0}>
             <img className="radio" src={radio} alt="radio" />
           </button>
-          {openPopup === "puzzleOne" && (
+          {openPopup === 'puzzleOne' && (
             <PuzzleOne
               setIsDisabled={() => setPuzzleState('puzzleOne')}
               winConditions={winConditions}
@@ -219,7 +220,7 @@ export default function RoomOne() {
               puzzleCompleted={puzzleCompleted}
             />
           )}
-          {openPopup === "puzzleTwo" && (
+          {openPopup === 'puzzleTwo' && (
             <PuzzleTwo
               setIsDisabled={() => setPuzzleState('puzzleTwo')}
               winConditions={winConditions}
@@ -228,7 +229,7 @@ export default function RoomOne() {
               puzzleCompleted={puzzleCompleted}
             />
           )}
-          {openPopup === "puzzleThree" && (
+          {openPopup === 'puzzleThree' && (
             <PuzzleThree
               setIsDisabled={() => setPuzzleState('puzzleThree')}
               winConditions={winConditions}
@@ -237,7 +238,7 @@ export default function RoomOne() {
               puzzleCompleted={puzzleCompleted}
             />
           )}
-          {openPopup === "puzzleFour" && (
+          {openPopup === 'puzzleFour' && (
             <PuzzleFour
               setIsDisabled={() => setPuzzleState('puzzleFour')}
               winConditions={winConditions}
@@ -246,7 +247,7 @@ export default function RoomOne() {
               puzzleCompleted={puzzleCompleted}
             />
           )}
-          {openPopup === "puzzleFive" && (
+          {openPopup === 'puzzleFive' && (
             <PuzzleFive
               setIsDisabled={() => setPuzzleState('puzzleFive')}
               winConditions={winConditions}
@@ -261,7 +262,9 @@ export default function RoomOne() {
             subscription={subscription}
           />
           {roomStyle['--room-bg'] === 'none' && (
-            <span className="alpha-centauri">⏃⌰⌿⊑⏃ ☊⟒⋏⏁⏃⎍⍀⟟</span>
+            <span tabIndex={0} className="alpha-centauri">
+              ⏃⌰⌿⊑⏃ ☊⟒⋏⏁⏃⎍⍀⟟
+            </span>
           )}
         </article>
       )}