Add Leaderboard component to Story and refactor responsiveness

src/components/Story/Story.css

@@ -3,31 +3,41 @@
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  height: 100vh;
-  width: 100vw;
+  height: 100dvh;
+  width: 100dvw;
   box-shadow: 0px 0px 20px 10px rgba(13, 41, 200, 0.31);
   overflow-y: auto;
   position: relative;
 }
 
 .story-and-button {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 10rem;
-  margin: 0 1.5rem;
+  margin: 1rem 2.5rem;
+  border: 4px solid #000000;
+  border-radius: 10px;
+  background-color: #c0c4d7;
+  padding-bottom: 1em;
 }
 
 .story {
-  width: 50rem;
+  max-width: 85rem;
   padding: 2em;
-  margin: 5rem 2rem;
-  background-color: #c0c4d7;
-  opacity: 0.9;
-  border: 4px solid #000000;
-  border-radius: 10px;
 }
 
-.start-game {
+.see-leaderboard-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.what {
+  display: flex;
+  justify-content: center;
+}
+.start-game,
+.see-leaderboard {
   padding: 0.5em 2em;
   font-size: 1.5em;
   box-shadow: inset 0px 1px 0px 0px #fce2c1;
@@ -74,7 +84,6 @@
 @media screen and (max-width: 700px) {
   .story {
     width: 30rem;
-    margin: 4rem 2rem;
   }
   .story-and-button {
     gap: 0.3rem;
@@ -84,8 +93,8 @@
 @media screen and (max-width: 540px) {
   .story {
     width: 25rem;
-    padding: 1.5em;
-    margin: 2rem 2rem;
+    padding: 2em;
+    margin: 0.5rem 2rem;
   }
   .story-and-button {
     gap: 0.2rem;
@@ -103,27 +112,29 @@
   }
 }
 
-@media screen and (max-width: 375px) {
+@media screen and (max-width: 400px) {
   .story {
     margin: 0.5rem 1rem;
-    padding: 1em;
+    padding: 0 2.5em;
   }
   .start-game {
     padding: 0.4em 2em;
     font-size: 1.5em;
-    margin-bottom: 5rem;
   }
 }
 
-@media screen and (max-width: 325px) {
+@media screen and (max-width: 350px) {
+  .story-and-button {
+    margin: 1rem 0.5rem;
+  }
   .story {
     width: 16rem;
     margin: 0.1rem 0.5rem;
     padding: 0.5em;
   }
-  .start-game {
+  .start-game,
+  .see-leaderboard {
     padding: 0.4em 2em;
     font-size: 1.2em;
-    margin-bottom: 5rem;
   }
 }

src/components/Story/Story.js

@@ -1,11 +1,14 @@
 import './Story.css';
 import background from '../../assets/big-donut.jpg';
 import { Link, useNavigate, useParams } from 'react-router-dom';
-import {fetchGameLink, fetchLeaderboard} from '../../apiCalls';
+import { fetchGameLink } from '../../apiCalls';
+import { useState } from 'react';
+import Leaderboard from '../Leaderboard/Leaderboard';
 
 export default function Story() {
   const navigate = useNavigate();
-  const { displayedRoomName } = useParams(); 
+  const { displayedRoomName } = useParams();
+  const [openLeaderboard, setOpenLeaderboard] = useState(false);
 
   const startGame = async () => {
     try {
@@ -16,46 +19,62 @@ export default function Story() {
     }
   };
 
-  useEffect(() => {
-    const getLeaderboard = async () => {
-      try {
-        const leaderboardData = await fetchLeaderboard()
-        setScores(leaderboardData)
-      } catch (err) {
-        console.log(err)
-      }
-    }
-    getLeaderboard()
-  }, [])
+  const handleLeaderboardClick = () => {
+    setOpenLeaderboard(!openLeaderboard);
+  };
 
   return (
-    <section className='story-body' style={{ '--background': `url(${background})` }}>
-      <div className='back-home-container'> 
-      <Link to={'/'} className='back-home'>Back To Home</Link>
+    <section
+      className="story-body"
+      style={{ '--background': `url(${background})` }}>
+      {openLeaderboard && (
+        <Leaderboard handleLeaderboardClick={handleLeaderboardClick} />
+      )}
+      <div className="back-home-container">
+        <Link to={'/'} className="back-home">
+          Back To Home
+        </Link>
       </div>
-     
-      <div className='story-and-button'>
-        <div className='story'>
+
+      <div tabIndex="0" className="story-and-button">
+        <div className="story">
           <p>
-            You and your team are fringe scientists working on top-secret experimental airframes in a Nevada black site for the US Air Force. Bob, your eccentric colleague, has gone missing, and strange occurrences have been happening in his office.
+            You and your team are fringe scientists working on top-secret
+            experimental airframes in a Nevada black site for the US Air Force.
+            Bob, your eccentric colleague, has gone missing, and strange
+            occurrences have been happening in his office.
           </p>
           <br></br>
           <p>
-            Bob is a peculiar scientist known for his eccentricity. He's been missing for a few days, and unusual sounds and radio broadcasts from his office have raised concerns. Your base commander initiated a lockdown and access override after Bob mysteriously disappeared on Doughnut Friday, a tradition he never misses.
+            Bob is a peculiar scientist known for his eccentricity. He's been
+            missing for a few days, and unusual sounds and radio broadcasts from
+            his office have raised concerns. Your base commander initiated a
+            lockdown and access override after Bob mysteriously disappeared on
+            Doughnut Friday, a tradition he never misses.
           </p>
           <br></br>
           <p>
-            Objective: Find clues in Bob's office to uncover his whereabouts and the secrets he may have left behind.
+            Objective: Find clues in Bob's office to uncover his whereabouts and
+            the secrets he may have left behind.
           </p>
           <br></br>
           <p>
-            Now it's your team's mission to enter Bob's office to find out what happened.
-          </p>
-          <p>
-            Are you ready to begin your escape room adventure?
+            Now it's your team's mission to enter Bob's office to find out what
+            happened.
           </p>
+          <p>Are you ready to begin your escape room adventure?</p>
         </div>
-        <button className='start-game' onClick={startGame}>Start Game</button>
+        <button className="start-game" onClick={startGame}>
+          Start Game
+        </button>
+      </div>
+
+      <div className="see-leaderboard-container">
+        {!openLeaderboard && (
+          <button className="see-leaderboard" onClick={handleLeaderboardClick}>
+            View Leaderboard
+          </button>
+        )}
       </div>
     </section>
   );