From 9309b2c092eab4e192524513d6949523ee3594a3 Mon Sep 17 00:00:00 2001
From: Judy Ye <judyy.ye@gmail.com>
Date: Thu, 30 Nov 2023 10:36:50 -0800
Subject: [PATCH] Add Leaderboard component to VictoryPage and refactor
 reponsiveness

---
 src/components/VictoryPage/VictoryPage.js | 37 +++++++++++++++++------
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/components/VictoryPage/VictoryPage.js b/src/components/VictoryPage/VictoryPage.js
index 9b9ebc1..62bb2ab 100644
--- a/src/components/VictoryPage/VictoryPage.js
+++ b/src/components/VictoryPage/VictoryPage.js
@@ -1,24 +1,43 @@
 import './VictoryPage.css';
-import React from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import background from '../../assets/big-donut.jpg'
+import background from '../../assets/big-donut.jpg';
+import Leaderboard from '../Leaderboard/Leaderboard';
 
 export default function VictoryPage() {
   const navigate = useNavigate();
+  const [openLeaderboard, setOpenLeaderboard] = useState(false);
 
   const handleBackToStoryClick = () => {
     navigate('/');
   };
 
+  const handleLeaderboardClick = () => {
+    setOpenLeaderboard(!openLeaderboard);
+  };
+
   return (
-    <div className="victory-page" style={{ '--background': `url(${background})` }}>
-      <div className='room-one-completion'>
-      <h2>Room 1 complete. A portal opens...Bob must be even further away than we thought.</h2>
-      <p>Your journey has just begun.</p>
-      <button className='back-home' onClick={handleBackToStoryClick}>Home</button>
+    <div
+      className="victory-page"
+      style={{ '--background': `url(${background})` }}>
+      {openLeaderboard && (
+        <Leaderboard handleLeaderboardClick={handleLeaderboardClick} />
+      )}
+      <div tabIndex="0" className="room-one-completion">
+        <h1>
+          Room 1 complete. A portal opens...Bob must be even further away than
+          we thought.
+        </h1>
+        <p>Your journey has just begun.</p>
+        <button className="back-home" onClick={handleBackToStoryClick}>
+          Home
+        </button>
+        {!openLeaderboard && (
+          <button className="see-leaderboard" onClick={handleLeaderboardClick}>
+            View Leaderboard
+          </button>
+        )}
       </div>
-    
     </div>
   );
 }
-