Merge pull request #104 from Treevyy/feature/FixingErrors

updated leaderboard and fixed other errors

Author: Treevyy

client/src/components/LeaderBoard.tsx

@@ -1,25 +1,32 @@
 import "../styles/leaderboard.css";
+import "../styles/codezilla.css"
+import { useBodyClass } from '../utils/useBodyClass';
 import { useQuery } from "@apollo/client";
 import { GET_USERS } from "@/graphql/queries";
 import { useNavigate } from "react-router-dom";
 
+
 function LeaderBoard() {
   const navigate = useNavigate();
 
   const { loading, data } = useQuery(GET_USERS);
 
   const allUsers = data?.getAllUsers || [];
 
+  useBodyClass('background-image');
+
   if (loading) return <p>Loading...</p>;
 
+  const sortedUsers = [...allUsers].sort((a, b) => b.correctAnswers - a.correctAnswers);
+
   console.log(allUsers);
 
   return (
     <div className="leaderboard-page">
       <div className="leaderboard-container">
         <h2 className="leaderboard-subtitle">Leaderboard</h2>
         <div className="leaderboard-actions">
-          {allUsers.map((user: any, index: number) => {
+          {sortedUsers.map((user: any, index: number) => {
             if (index < 5) {
               return (
                 <div className="player-info">

client/src/styles/leaderboard.css

@@ -23,9 +23,7 @@
   margin: 0; /* Remove default margin */
   text-align: center; /* Align text to the left */
   flex: 1; /* Allow the text to take up equal space */
-  color: rgb(168, 97, 4);
-  /* rgb(17, 223, 110); */
-  /* rgb(161, 82, 252); */
+  color:rgb(161, 82, 252);
 }
 
 .leaderboard-actions {
@@ -56,4 +54,16 @@
   text-align: center;
   width: 100%;
 
+}
+
+/* BACKGROUND IMAGE */
+.background-image {
+  background-image: url('/backgrounds/game-bg.jpg');
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center top;
+  z-index: 0;
 }