Feat: added ghost legion

sliit-foss · Oct 15, 2023 · 8fb771c · 8fb771c
1 parent e698d20
commit 8fb771c
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -11,9 +11,8 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "1.9.5",
-    "@sliit-foss/bashaway-ui": "0.10.6",
+    "@sliit-foss/bashaway-ui": "0.12.3",
     "framer-motion": "10.14.0",
-    "jwt-decode": "^3.1.2",
     "lodash": "4.17.21",
     "lucide-react": "0.263.1",
     "react": "18.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/home/score-card/index.jsx b/src/components/home/score-card/index.jsx
@@ -1,5 +1,7 @@
 import { GraduationCap } from "lucide-react";
 import { twMerge } from "tailwind-merge";
+import { useBreakpoint } from "@/hooks";
+import { Button } from "@sliit-foss/bashaway-ui/components";
 import { Body, Body2, Footnote, Title } from "@sliit-foss/bashaway-ui/typography";
 
 const topThreeGradient = (position) => {
@@ -11,7 +13,19 @@ const topThreeGradient = (position) => {
 
 export { default as ScoreCardSkeleton } from "./skeleton";
 
-export const ScoreCard = ({ item, ...props }) => {
+const Eliminated = ({ className, eliminated, ...props }) =>
+  eliminated && (
+    <Button
+      {...props}
+      className={twMerge("bg-[#f00] px-[0.7rem] py-[0.175rem] text-xs pointer-events-none", className)}
+    >
+      Eliminated
+    </Button>
+  );
+
+export const ScoreCard = ({ item, round, ...props }) => {
+  const breakpoints = useBreakpoint();
+  const eliminated = round === 2 && item.eliminated;
   return (
     <div
       className={twMerge(
@@ -33,12 +47,26 @@ export const ScoreCard = ({ item, ...props }) => {
           <Title className="font-medium">{item.place}</Title>
         </div>
         <div className="flex flex-col items-start gap-1 max-w-xl">
-          <Body className="font-inter font-semibold break-all line-clamp-1 leading-[1.3] group-hover:tracking-[0.15px] transition-all duration-medium">
-            {item.name}
-          </Body>
-          <div className="flex gap-[6px] items-center opacity-40 -translate-y-0.5">
-            <GraduationCap strokeWidth={1.5} />
-            <Footnote className="text-[14.25px] sm:text-[15px]">{item.university}</Footnote>
+          <div className="flex justify-start items-center gap-4">
+            <Body
+              className={twMerge(
+                "font-inter font-semibold break-all line-clamp-1 leading-[1.3] group-hover:tracking-[0.15px] transition-all duration-medium",
+                eliminated && "line-through"
+              )}
+            >
+              {item.name}
+            </Body>
+            {breakpoints["md"] && <Eliminated eliminated={eliminated} team={item} round={round} />}
+          </div>
+          <div className="flex flex-wrap gap-[6px] items-center -translate-y-0.5">
+            <GraduationCap strokeWidth={1.5} className="opacity-40" />
+            <Footnote className="text-[14.25px] sm:text-[15px] opacity-40">{item.university}</Footnote>
+            {!breakpoints["md"] && (
+              <Eliminated
+                eliminated={eliminated}
+                className="ml-2 px-[0.65rem] py-[0.15rem] text-[0.65rem] xs:text-xs"
+              />
+            )}
           </div>
         </div>
       </div>

diff --git a/src/pages/home.jsx b/src/pages/home.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { twMerge } from "tailwind-merge";
 import { ScoreCardSkeleton } from "@/components";
 import { ScoreCard } from "@/components/home";
 import { filters as filterData, sorts as sortData } from "@/filters";
@@ -12,7 +13,8 @@ import {
   Sorts,
   TwinSwitch
 } from "@sliit-foss/bashaway-ui/components";
-import { useRound } from "@sliit-foss/bashaway-ui/hooks";
+import { useGhostLegion, useRound } from "@sliit-foss/bashaway-ui/hooks";
+import { Ghost } from "@sliit-foss/bashaway-ui/icons";
 import { Footnote, Title } from "@sliit-foss/bashaway-ui/typography";
 import { computeFilterQuery, computeSortQuery } from "@sliit-foss/bashaway-ui/utils";
 
@@ -23,11 +25,13 @@ const Home = () => {
 
   const { rounds, round, roundKey, onRoundChange } = useRound();
 
-  const { data: scores, isFetching } = useFetchLeaderboardQuery({ page, filters, sorts, round });
+  const { ghostLegion, toggleGhostLegion } = useGhostLegion();
+
+  const { data: scores, isFetching } = useFetchLeaderboardQuery({ page, filters, sorts, round, ghostLegion });
 
   useEffect(() => {
     if (page !== 1) setPage(1);
-  }, [filters, sorts, round]);
+  }, [filters, sorts, round, ghostLegion]);
 
   useTitle("Leaderboard | Bashaway");
 
@@ -41,13 +45,31 @@ const Home = () => {
           </Footnote>
           <TwinSwitch values={rounds} className="mt-5" onChange={onRoundChange} selectedValue={roundKey} />
         </div>
-        <div className="w-full flex flex-col md:flex-row justify-center items-center gap-6 mb-8">
-          <Filters filters={filterData} setFilterQuery={setFilters} styles={{ filter: "md:w-3/4" }} />
-          <Sorts
-            styles={{ root: "justify-end", sort: "justify-center md:justify-start" }}
-            sorts={sortData}
-            setSortQuery={setSorts}
-          />
+        <div className="w-full flex flex-col md:flex-row justify-between items-center gap-6 mb-8">
+          <Filters filters={filterData} setFilterQuery={setFilters} styles={{ root: "w-auto", filter: "md:w-full" }} />
+          <div className="flex flex-wrap justify-center items-center gap-y-3 gap-x-8" onClick={toggleGhostLegion}>
+            <div
+              className={twMerge(
+                "group flex justify-center items-center gap-3.5 transform translate-y-[1.5px] cursor-pointer transition-all duration-medium",
+                round == 2 ? "opacity-100 h-10 md:h-auto" : "opacity-0 h-0 md:h-auto"
+              )}
+            >
+              <span className="text-md text-black/70 group-hover:text-black/90 font-semibold transition-all duration-medium">
+                Ghost Legion
+              </span>
+              <Ghost
+                className={twMerge(
+                  "w-[1.4rem] h-[1.4rem] fill-current transition-all duration-medium",
+                  ghostLegion ? "text-[#f00]" : "text-black/60 group-hover:text-[#f00]"
+                )}
+              />
+            </div>
+            <Sorts
+              styles={{ root: "w-auto justify-end gap-8", sort: "justify-center md:justify-start w-full md:w-full" }}
+              sorts={sortData}
+              setSortQuery={setSorts}
+            />
+          </div>
         </div>
         <AnimatedSwitcher
           show={isFetching}
@@ -57,7 +79,7 @@ const Home = () => {
             scores?.data?.docs?.length ? (
               <>
                 {scores.data.docs.map((item, index) => (
-                  <ScoreCard item={item} key={`score-card-${index}`} />
+                  <ScoreCard item={item} round={round} key={`score-card-${index}`} />
                 ))}
               </>
             ) : (

diff --git a/src/store/api/leaderboard.js b/src/store/api/leaderboard.js
@@ -8,7 +8,7 @@ export const leaderboardApi = createApi({
   baseQuery,
   endpoints: (builder) => ({
     fetchLeaderboard: builder.query({
-      query: ({ round }) => `/api/leaderboard?round=${round}`,
+      query: ({ round, ghostLegion }) => `/api/leaderboard?round=${round}&ghost_legion=${ghostLegion}`,
       transformResponse: (response, _, arg) => {
         const { page, filters, sorts } = arg;
         response.data = response.data.map((item, index) => ({ ...item, place: index + 1 }));