Leaderboard

Author: remotesynth

frontend/src/assets/images/FirstPlace.png

@@ -14,6 +14,7 @@ import {
   Stack,
 } from '@mui/material';
 import QuizLayout from './QuizLayout';
+import StarSharp from '../../src/StarSharp.svg';
 
 function LeaderboardPage() {
   const { state } = useLocation();
@@ -88,11 +89,76 @@ function LeaderboardPage() {
 
   return (
     <QuizLayout>
-      <Container maxWidth="md">
-        <Box sx={{ textAlign: 'center', marginTop: 4 }}>
+      <Container maxWidth="sm" className="main-quiz-container">
+        <Box sx={{ textAlign: 'center', marginTop: 4, width: '100%' }}>
           <Typography variant="h4" gutterBottom>
-            Leaderboard
+            LEADERBOARD
           </Typography>
+          <div className="top-scores">
+            <div className="podium second-place">
+              <Typography
+                variant="h5"
+                gutterBottom
+                sx={{
+                  marginTop: '80px',
+                  marginLeft: 'auto',
+                  marginRight: 'auto',
+                }}
+              >
+                {leaderboardData[1].Username}
+              </Typography>
+              <div class="score">
+                <img
+                  src={StarSharp}
+                  alt="Score"
+                  style={{ float: 'left', marginLeft: '10px' }}
+                />
+                {leaderboardData[1].Score}
+              </div>
+            </div>
+            <div className="podium first-place">
+              <Typography
+                variant="h5"
+                gutterBottom
+                sx={{
+                  marginTop: '80px',
+                  marginLeft: 'auto',
+                  marginRight: 'auto',
+                }}
+              >
+                {leaderboardData[0].Username}
+              </Typography>
+              <div class="score">
+                <img
+                  src={StarSharp}
+                  alt="Score"
+                  style={{ float: 'left', marginLeft: '10px' }}
+                />
+                {leaderboardData[0].Score}
+              </div>
+            </div>
+            <div className="podium third-place">
+              <Typography
+                variant="h5"
+                gutterBottom
+                sx={{
+                  marginTop: '80px',
+                  marginLeft: 'auto',
+                  marginRight: 'auto',
+                }}
+              >
+                {leaderboardData[2].Username}
+              </Typography>
+              <div class="score">
+                <img
+                  src={StarSharp}
+                  alt="Score"
+                  style={{ float: 'left', marginLeft: '10px' }}
+                />
+                {leaderboardData[2].Score}
+              </div>
+            </div>
+          </div>
           {leaderboardData.length > 0 ? (
             <List component={Paper} sx={{ margin: '0 auto', maxWidth: 600 }}>
               {leaderboardData.map((entry, index) => (

frontend/src/assets/images/SecondPlace.png

@@ -82,4 +82,44 @@ code {
   margin: 0 auto 0 auto;
   line-height: 24px;
   margin-bottom: 20px;
+}
+
+.top-scores {
+  display: flex;
+  padding: var(--3, 24px) 0px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+}
+
+.podium {
+  display: flex;
+  padding: var(--2, 16px);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--3, 24px);
+  flex: 1 0 0;
+  border-radius: var(--borderRadius, 4px);
+  background: var(--background-paper-elevation-3, #EAEAF0);
+  text-align: center;
+  max-width: 130px;
+
+  /* elevation/3 */
+  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 3px 3px -2px rgba(0, 0, 0, 0.20);
+}
+.first-place {
+  background-image: url('./assets/images/FirstPlace.png');
+  background-position: 50% 10%;
+  background-repeat: no-repeat;
+  margin-top: -20px;
+}
+.second-place {
+  background-image: url('./assets/images/SecondPlace.png');
+  background-position: 50% 10%;
+  background-repeat: no-repeat;
+}
+.third-place {
+  background-image: url('./assets/images/ThirdPlace.png');
+  background-position: 50% 10%;
+  background-repeat: no-repeat;
 }