Leaderboard frontend (#57)

* added leaderboard page with test data

* added daily stats

* undid min width css

Co-authored-by: a-jason-liu21 <a.jason.liu21@gmail.com>

Author: stegosaurus21

frontend/src/App.module.css

@@ -76,4 +76,49 @@ body {
 
 .aboutPage {
   padding: 20px;
+}
+
+/* --------------------------------------------------------- LEADERBOARD PAGE STYLES ---------------------------------------------------*/
+
+.leaderboardPage {
+  padding-left: 20px;
+  white-space: pre-wrap;
+}
+
+.userProfile {
+  font-family: monospace;
+}
+
+.profileText {
+  padding-right: 8px;
+}
+
+.userImg {
+  padding-right: 4px;
+}
+
+.link {
+  color: #009900;
+  text-decoration: none;
+}
+
+.dayLink {
+  color: #009900;
+  text-decoration: none;
+  cursor: pointer;
+  padding-left: 4px;
+}
+
+.daySelected {
+  color: white;
+  font-weight: 700;
+  padding-left: 4px;
+}
+
+.userNoLinkText {
+  padding-left: 24px;
+}
+
+.leaderBoardDays {
+  padding-left: 4px;
 }

frontend/src/components/leaderboard/UserProfile.tsx

@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from "react";
+import styles from "../../App.module.css";
+import { UserDetails } from "../../pages/Leaderboard";
+
+const UserProfile = (props: UserDetails) => {
+  return (
+    <div className={styles.userProfile}>
+        <span className={styles.profileText}>{(props.position.toString() + ")").padStart(4)}</span>
+        <span className={styles.profileText}>{props.userScore.toString().padStart(4)}</span>
+        {(props.userLink != "") 
+          ? <a className={styles.link} href={props.userLink} target="_blank">
+              <span className={styles.userImg}>
+                  <img src={props.userLink + ".png"} height="20px"/>
+              </span>
+              {props.userName}
+            </a> 
+          : <span className={styles.userNoLinkText}>
+              {props.userName}
+            </span>
+        }
+    </div>
+  )
+};
+
+export default UserProfile;

frontend/src/pages/Leaderboard.tsx

@@ -1,11 +1,45 @@
 import React, { useEffect, useState } from "react";
 import { Button, Container } from "react-bootstrap";
-import { useNavigate } from "react-router-dom";
+import { Navigate, useNavigate } from "react-router-dom";
+import styles from "../App.module.css";
+import UserProfile from "../components/leaderboard/UserProfile"
 
 import { BACKEND_URI } from "src/config";
 
+export interface UserDetails {
+  position: number;
+  userName: string;
+  userScore: number;
+  userLink: string;
+}
+
 const Leaderboard: React.FC<{}> = () => {
-  const [times, setTimes] = useState(0);
+
+  const defaultUsers: UserDetails[] = [
+    {
+      position: 1,
+      userName: "csesoc",
+      userScore: 9999,
+      userLink: "https://github.com/csesoc"
+    },
+    {
+      position: 10,
+      userName: "no_github_link",
+      userScore: 999,
+      userLink: ""
+    },
+    {
+      position: 100,
+      userName: "a-jason-liu21",
+      userScore: 99,
+      userLink: "https://github.com/a-jason-liu21"
+    }
+  ]
+
+  const DAYS = 7;
+  const OVERALL = 0;
+  const [users, setUsers] = useState(defaultUsers);
+  const [day, setDay] = useState(OVERALL);
 
   useEffect(() => {
     const verifyToken = async () => {
@@ -15,13 +49,39 @@ const Leaderboard: React.FC<{}> = () => {
     verifyToken();
   }, []);
 
+  useEffect(() => {
+    console.log("Doing backend query for day " + day + "!");
+  }, [day]);
+
   return (
-    <>
-      <Container className="justify-content-center text-center">
-        <p>You have clicked this button {times} times.</p>
-        <Button onClick={() => setTimes(times + 1)}>Leaderboard Page</Button>
-      </Container>
-    </>
+    <div className={styles.leaderboardPage}>
+      <div>
+        This is the {(day === OVERALL) ? "overall leaderboard" : ("leaderboard for day " + day)} of the <span className={styles.bold}>CSESoc Unnamed Puzzle Competition 2021</span>,
+        which displays the users with the {(day === OVERALL) ? "highest cumulative points achieved during the contest" : "earliest submissions during the day"}.
+      </div>
+      <br />
+      
+      <div>
+        Points awarded for completing problems - the first to solve a problem receives 100 points, followed by 99 points for
+        the second solver, then 98 and so on down to 1 point for the 100th solver.
+      </div>
+      <br />
+
+      <div>
+        To see the leaderboard for a particular day, choose a day here: 
+        {Array.from({length: DAYS},(x, i) => <span className={(day === i + 1) ? styles.daySelected : styles.dayLink} onClick = {() => setDay(i + 1)}>{i + 1}</span>)}
+      </div>
+
+      {day !== OVERALL &&
+      <div>
+        To see the overall leaderboard, click <span className={styles.link} onClick={() => setDay(0)}>here</span>.
+      </div>}
+      <br />
+
+      {users.map((user: UserDetails) => {
+        return <UserProfile position={user.position} userName={user.userName} userScore={user.userScore} userLink={user.userLink}/>
+      })}
+    </div>
   )
 };