ultimate-dominion · ECWireless · Jul 21, 2024 · Jul 12, 2024 · Jul 12, 2024 · Jul 12, 2024
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -27,9 +27,11 @@
     "@latticexyz/world": "2.0.11",
     "@rainbow-me/rainbowkit": "^2.1.1",
     "@tanstack/react-query": "^5.37.1",
+    "@types/fuzzy-search": "^2.1.5",
     "@types/react-router-dom": "^5.3.3",
     "contracts": "workspace:*",
     "framer-motion": "^11.2.6",
+    "fuzzy-search": "^3.2.1",
     "next": "^14.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/packages/client/src/Routes.tsx b/packages/client/src/Routes.tsx
@@ -8,11 +8,13 @@ import { useMUD } from './contexts/MUDContext';
 import { CharacterPage } from './pages/Character';
 import { CharacterCreation } from './pages/CharacterCreation';
 import { GameBoard } from './pages/GameBoard';
+import { Leaderboard } from './pages/Leaderboard';
 import { Welcome } from './pages/Welcome';
 
 export const HOME_PATH = '/';
 export const CHARACTER_CREATION_PATH = '/character-creation';
 export const GAME_BOARD_PATH = '/game-board';
+export const LEADERBOARD_PATH = '/leaderboard';
 
 const AppRoutes: React.FC = () => {
   const { pathname } = useLocation();
@@ -42,6 +44,7 @@ const AppRoutes: React.FC = () => {
       <Route path={CHARACTER_CREATION_PATH} element={<CharacterCreation />} />
       <Route path={GAME_BOARD_PATH} element={<GameBoard />} />
       <Route path="/characters/:characterId" element={<CharacterPage />} />
+      <Route path={LEADERBOARD_PATH} element={<Leaderboard />} />
     </Routes>
   );
 };

diff --git a/packages/client/src/components/Character/Misc.tsx b/packages/client/src/components/Character/Misc.tsx
diff --git a/packages/client/src/components/Character/Profile.tsx b/packages/client/src/components/Character/Profile.tsx
diff --git a/packages/client/src/components/Character/Stats.tsx b/packages/client/src/components/Character/Stats.tsx
diff --git a/packages/client/src/components/LeaderboardRow.tsx b/packages/client/src/components/LeaderboardRow.tsx
@@ -0,0 +1,111 @@
+import {
+  Avatar,
+  Box,
+  Button,
+  Center,
+  Flex,
+  HStack,
+  Text,
+  VStack,
+} from '@chakra-ui/react';
+import { useMemo } from 'react';
+import { FaHatWizard } from 'react-icons/fa';
+import { GiAxeSword, GiRogue } from 'react-icons/gi';
+import { IoIosArrowForward } from 'react-icons/io';
+import { useNavigate } from 'react-router-dom';
+
+import { type Character, StatsClasses } from '../utils/types';
+
+export const LeaderboardRow = ({
+  agility,
+  baseHp,
+  characterId,
+  entityClass,
+  image,
+  intelligence,
+  goldBalance,
+  level,
+  name,
+  strength,
+}: Character): JSX.Element => {
+  const navigate = useNavigate();
+
+  const totalStats = useMemo(
+    () => Number(agility) + Number(strength) + Number(intelligence),
+    [agility, strength, intelligence],
+  );
+
+  return (
+    <Flex
+      border="2px solid"
+      borderColor="grey400"
+      borderRadius={2}
+      justify="space-between"
+      onClick={() => navigate(`/characters/${characterId}`)}
+      w="100%"
+      _hover={{
+        cursor: 'pointer',
+        button: {
+          bgColor: 'grey300',
+        },
+      }}
+      _active={{
+        button: {
+          bgColor: 'grey400',
+        },
+      }}
+    >
+      <Flex>
+        <Avatar borderRadius={0} size="lg" src={image} />
+        <VStack align="start" justify="center" ml={4}>
+          <HStack w="100%">
+            <Text size={{ base: '2xs', lg: 'sm' }}>{name}</Text>
+            <Center>
+              {entityClass == StatsClasses.Warrior && <GiAxeSword size={15} />}
+              {entityClass == StatsClasses.Rogue && <GiRogue size={15} />}
+              {entityClass == StatsClasses.Mage && <FaHatWizard size={15} />}
+            </Center>
+          </HStack>
+          <Text size={{ base: '3xs', sm: '2xs', lg: 'sm' }}>
+            HP {baseHp} • STR {strength} • AGI
+            {agility} • INT {intelligence}
+          </Text>
+        </VStack>
+      </Flex>
+      <HStack>
+        <HStack w={{ base: '130px', sm: '215px', md: '300px', lg: '450px' }}>
+          <Text
+            display={{ base: 'none', lg: 'block' }}
+            fontWeight={500}
+            size={{ base: 'xs', lg: 'md' }}
+            textAlign="center"
+            w="100%"
+          >
+            {totalStats}
+          </Text>
+          <Text
+            fontWeight={500}
+            size={{ base: 'xs', lg: 'md' }}
+            textAlign="center"
+            w="100%"
+          >
+            {level}
+          </Text>
+          <Text
+            fontWeight={500}
+            size={{ base: 'xs', lg: 'md' }}
+            textAlign="center"
+            w="100%"
+          >
+            {Number(goldBalance).toLocaleString()}
+          </Text>
+        </HStack>
+        <Box display={{ base: 'none', md: 'block' }} w="50px">
+          <Button p={3} variant="ghost">
+            <IoIosArrowForward />
+          </Button>
+        </Box>
+      </HStack>
+    </Flex>
+  );
+};
diff --git a/packages/client/src/components/StatsPanel.tsx b/packages/client/src/components/StatsPanel.tsx
@@ -20,6 +20,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { useCharacter } from '../contexts/CharacterContext';
 import { useMUD } from '../contexts/MUDContext';
+import { LEADERBOARD_PATH } from '../Routes';
 import { MAX_EQUIPPED_WEAPONS } from '../utils/constants';
 import { Level } from './Level';
 
@@ -208,13 +209,14 @@ export const StatsPanel = (): JSX.Element => {
               borderBottom="2px solid"
               borderColor="grey400"
               fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
+              href={LEADERBOARD_PATH}
               pb={1}
               _hover={{
                 borderColor: 'grey500',
                 textDecoration: 'none',
               }}
             >
-              Leader Board
+              Leaderboard
             </Link>
           </VStack>
         </>