Removed medals from guess table, set horizontal scroll to hidden

shammy642 · Oct 24, 2024 · 2e820d6 · 2e820d6
1 parent 1068e50
commit 2e820d6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 16 deletions.
diff --git a/frontend/src/components/Table.jsx b/frontend/src/components/Table.jsx
@@ -1,31 +1,32 @@
 import { Gold, Silver, Bronze } from "../assets/Medals";
 
-export function Table({ players, sortBy }) {
-
+export function Table({ players, sortBy, showMedals }) {
   const position = (number) => {
     if (number === 0) {
       return <Gold />;
     } else if (number === 1) {
-      return <Silver />
+      return <Silver />;
     } else if (number === 2) {
-      return <Bronze />
+      return <Bronze />;
     }
-    return number + 1
+    return number + 1;
   };
 
   return (
     <div className="relative overflow-y-auto shadow-md sm:rounded-lg max-h-36 my-6">
       <table className="w-full text-sm text-center rtl:text-right text-white dark:text-white">
         <thead className="sticky top-0 text-md text-white uppercase bg-gray-50 dark:bg-gray-700 dark:text-white">
           <tr>
-            <th scope="col" className="px-3 py-2">
-              Pos.
-            </th>
+            {showMedals && (
+              <th scope="col" className="px-3 py-2">
+                Pos.
+              </th>
+            )}
             <th scope="col" className="px-3 py-2">
               Name
             </th>
             <th scope="col" className="px-3 py-2">
-            {sortBy === "totalScore" ? "Score" : "Guess"}
+              {sortBy === "totalScore" ? "Score" : "Guess"}
             </th>
           </tr>
         </thead>
@@ -35,7 +36,7 @@ export function Table({ players, sortBy }) {
               key={index}
               className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
             >
-              <td className="px-3 py-2">{position(index)}</td>
+              {showMedals && <td className="px-3 py-2">{position(index)}</td>}
               <td className="px-3 py-2">
                 <div className="flex justify-center items-center">
                   {" "}
@@ -49,8 +50,12 @@ export function Table({ players, sortBy }) {
                   {player.name}
                 </div>
               </td>
-
-              <td className="px-3 py-2">{sortBy === "totalScore" ? player.totalScore : player.currentGuess}</td>
+
+              <td className="px-3 py-2">
+                {sortBy === "totalScore"
+                  ? player.totalScore
+                  : player.currentGuess}
+              </td>
             </tr>
           ))}
         </tbody>

diff --git a/frontend/src/components/TableCarousel.jsx b/frontend/src/components/TableCarousel.jsx
@@ -28,7 +28,7 @@ const carouselTheme = {
     icon: "h-5 w-5 text-gray-600 sm:h-3 sm:w-3",
   },
   scrollContainer: {
-    base: "flex snap-mandatory overflow-y-hidden overflow-x-scroll scroll-smooth rounded-lg",
+    base: "flex snap-mandatory overflow-y-hidden overflow-x-hidden scroll-smooth rounded-lg",
     snap: "snap-x",
   },
 };
@@ -41,14 +41,14 @@ export function TableCarousel({ players, weight }) {
   const playersByGuess = players && [...players].sort((a, b) => Math.abs(weight - a.currentGuess) - Math.abs(weight - b.currentGuess))
   return (
     <Carousel theme={carouselTheme} leftControl=" " rightControl=" ">
-      <div className="w-full">
+      <div className="w-full pb-4">
         Last Game
-        {players && <Table players={playersByGuess} sortBy="currentGuess"/>}
+        {players && <Table players={playersByGuess} sortBy="currentGuess" showMedals={false}/>}
 
       </div>
       <div className="w-full overflow-auto">
         Leaderboard
-        {players && <Table players={playersByScore} sortBy="totalScore"/>}
+        {players && <Table players={playersByScore} sortBy="totalScore" showMedals={true}/>}
       </div>
     </Carousel>
   );