ultimate-dominion · ECWireless · Aug 30, 2024 · Aug 27, 2024 · Aug 27, 2024 · Aug 28, 2024
diff --git a/packages/client/src/Routes.tsx b/packages/client/src/Routes.tsx
@@ -11,6 +11,7 @@ import { CharacterPage } from './pages/Character';
 import { CharacterCreation } from './pages/CharacterCreation';
 import { GameBoard } from './pages/GameBoard';
 import { Leaderboard } from './pages/Leaderboard';
+import { Shop } from './pages/Shop';
 import { Welcome } from './pages/Welcome';
 
 export const HOME_PATH = '/';
@@ -19,6 +20,7 @@ export const GAME_BOARD_PATH = '/game-board';
 export const LEADERBOARD_PATH = '/leaderboard';
 export const AUCTION_HOUSE_PATH = '/auction-house';
 export const ITEM_PATH = AUCTION_HOUSE_PATH + '/items/';
+export const SHOP_PATH = '/shops/';
 
 const AppRoutes: React.FC = () => {
   const { pathname } = useLocation();
@@ -53,6 +55,7 @@ const AppRoutes: React.FC = () => {
       <Route path={LEADERBOARD_PATH} element={<Leaderboard />} />
       <Route path={AUCTION_HOUSE_PATH} element={<AuctionHouse />} />
       <Route path={ITEM_PATH + ':itemId'} element={<AuctionItem />} />
+      <Route path={SHOP_PATH} element={<Shop />} />
     </Routes>
   );
 };

diff --git a/packages/client/src/components/Pagination.tsx b/packages/client/src/components/Pagination.tsx
@@ -0,0 +1,100 @@
+import { Button, HStack, Input, Text } from '@chakra-ui/react';
+import { useEffect, useMemo } from 'react';
+import { FaBackwardStep, FaForwardStep } from 'react-icons/fa6';
+import { IoCaretBack, IoCaretForward } from 'react-icons/io5';
+
+export const Pagination = ({
+  length,
+  page,
+  pageLimit,
+  perPage,
+  setPage,
+  setPageLimit,
+}: {
+  length: number;
+  page: number;
+  pageLimit: number;
+  perPage: number;
+  setPage: (n: number) => void;
+  setPageLimit: (n: number) => void;
+}): JSX.Element => {
+  const pageNumber = useMemo(() => {
+    if (isNaN(Number(page))) {
+      return 1;
+    }
+    return Number(page);
+  }, [page]);
+
+  useEffect(() => {
+    if (pageNumber < 1) {
+      return;
+    }
+    const _pageLimit = Math.floor(Math.ceil(length / perPage)) || 1;
+    setPageLimit(_pageLimit);
+
+    if (pageNumber > _pageLimit) {
+      setPage(_pageLimit);
+    }
+  }, [length, pageNumber, perPage, setPage, setPageLimit]);
+
+  return (
+    <HStack my={5}>
+      <Button
+        onClick={() => setPage(1)}
+        size="xs"
+        visibility={pageNumber <= 1 ? 'hidden' : 'visible'}
+      >
+        <FaBackwardStep />
+      </Button>
+      <Button
+        onClick={() => setPage(pageNumber == 1 ? 1 : pageNumber - 1)}
+        size="xs"
+        visibility={pageNumber <= 1 ? 'hidden' : 'visible'}
+      >
+        <IoCaretBack />
+      </Button>
+      <Input
+        max={pageLimit}
+        min={1}
+        onChange={e => {
+          const value = e.target.value;
+          if (value === '') {
+            setPage(Number(value));
+            return;
+          }
+          if (isNaN(Number(value))) {
+            return;
+          }
+          if (Number(value) < 1) {
+            return;
+          }
+          if (Number(value) > pageLimit) {
+            return;
+          }
+          setPage(Number(value));
+        }}
+        p={2}
+        size="sm"
+        value={page}
+        w={10}
+      />
+      <Text size="sm">of {pageLimit}</Text>
+      <Button
+        onClick={() =>
+          setPage(pageNumber < pageLimit ? pageNumber + 1 : pageNumber)
+        }
+        size="xs"
+        visibility={pageNumber == pageLimit ? 'hidden' : 'visible'}
+      >
+        <IoCaretForward />
+      </Button>
+      <Button
+        onClick={() => setPage(pageLimit)}
+        size="xs"
+        visibility={pageNumber == pageLimit ? 'hidden' : 'visible'}
+      >
+        <FaForwardStep />
+      </Button>
+    </HStack>
+  );
+};
diff --git a/packages/client/src/components/ShopHalf.tsx b/packages/client/src/components/ShopHalf.tsx
@@ -0,0 +1,181 @@
+import {
+  Box,
+  Button,
+  Flex,
+  HStack,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Spacer,
+  Stack,
+  Text,
+  VStack,
+} from '@chakra-ui/react';
+import FuzzySearch from 'fuzzy-search';
+import { useEffect, useMemo, useState } from 'react';
+import { FaSearch, FaSortAmountDown, FaSortAmountUp } from 'react-icons/fa';
+
+import { ArmorTemplate, WeaponTemplate } from '../utils/types';
+import { Pagination } from './Pagination';
+import { ShopItemRow } from './ShopItemRow';
+const PER_PAGE = 5;
+export const ShopHalf = ({
+  name,
+  items,
+}: {
+  name: string;
+  items: Array<ArmorTemplate | WeaponTemplate>;
+}): JSX.Element => {
+  const [entries, setEntries] = useState<Array<ArmorTemplate | WeaponTemplate>>(
+    [],
+  );
+  const [page, setPage] = useState(1);
+  const [pageLimit, setPageLimit] = useState(1);
+  const [length, setLength] = useState(1);
+  const [query, setQuery] = useState('');
+  const [sort, setSort] = useState({ sorted: 'byGold', reversed: false });
+  const [filter, setFilter] = useState({ filtered: 'all' });
+
+  const pageNumber = useMemo(() => {
+    if (isNaN(Number(page))) {
+      return 1;
+    }
+    return Number(page);
+  }, [page]);
+  useEffect(() => {
+    if (pageNumber < 1) {
+      return;
+    }
+    let entriesCopy: Array<ArmorTemplate | WeaponTemplate> = [...items];
+    const searcher = new FuzzySearch(
+      [...entriesCopy],
+      ['name', 'characterId', 'description'],
+      { caseSensitive: false },
+    );
+    entriesCopy = searcher.search(query);
+    entriesCopy = [...entriesCopy].filter(entry => {
+      switch (filter.filtered) {
+        case 'byWeapon':
+          return Object.keys(entry).indexOf('armorModifier') > -1 ? 0 : 1;
+        default:
+          return true;
+      }
+    });
+    setLength(entriesCopy.length);
+    setEntries(
+      entriesCopy.slice((pageNumber - 1) * PER_PAGE, pageNumber * PER_PAGE),
+    );
+    if (pageNumber > pageLimit) {
+      setPage(pageLimit);
+    }
+  }, [filter.filtered, items, pageLimit, pageNumber, query]);
+  return (
+    <VStack>
+      <Text fontWeight={700} fontSize={24} textAlign="left" w="100%">
+        {name}
+      </Text>
+      <Stack
+        direction={{ base: 'column', md: 'row' }}
+        mb={8}
+        spacing={{ base: 4, md: 8 }}
+        w="100%"
+      >
+        <InputGroup w="100%">
+          <InputLeftElement h="100%" pointerEvents="none">
+            <FaSearch />
+          </InputLeftElement>
+          <Input
+            onChange={e => setQuery(e.target.value)}
+            placeholder="Search"
+            value={query}
+          />{' '}
+        </InputGroup>
+        <HStack>
+          <Button
+            onClick={() => setFilter({ filtered: 'all' })}
+            size="sm"
+            variant={filter.filtered == 'all' ? 'solid' : 'outline'}
+          >
+            All
+          </Button>
+          <Button
+            onClick={() => setFilter({ filtered: 'byWeapon' })}
+            size="sm"
+            variant={filter.filtered == 'byWeapon' ? 'solid' : 'outline'}
+          >
+            Weapon
+          </Button>
+        </HStack>
+      </Stack>
+      <HStack w="100%">
+        <Flex justify="space-between" w="100%">
+          <HStack textAlign="right" w="100%">
+            <Spacer />
+            <Button
+              display={{ base: 'none', lg: 'flex' }}
+              fontWeight={sort.sorted == 'byStock' ? 'bold' : 'normal'}
+              onClick={() =>
+                setSort({
+                  sorted: 'byStock',
+                  reversed: !sort.reversed,
+                })
+              }
+              p={1}
+              size={{ base: '2xs' }}
+              variant="ghost"
+              w="75px"
+            >
+              <Text mr={2} size={{ base: '2xs' }}>
+                Stock
+              </Text>
+              {sort.sorted == 'byStock' && sort.reversed && <FaSortAmountUp />}
+              {sort.sorted == 'byStock' && !sort.reversed && (
+                <FaSortAmountDown />
+              )}
+              {sort.sorted != 'byStock' && <FaSortAmountDown color="grey" />}
+            </Button>
+            <Button
+              display={{ base: 'none', lg: 'flex' }}
+              fontWeight={sort.sorted == 'byPrice' ? 'bold' : 'normal'}
+              onClick={() =>
+                setSort({
+                  sorted: 'byPrice',
+                  reversed: !sort.reversed,
+                })
+              }
+              p={1}
+              size={{ base: '2xs' }}
+              variant="ghost"
+              w="75px"
+            >
+              <Text mr={2} size={{ base: '2xs' }}>
+                Price
+              </Text>
+              {sort.sorted == 'byPrice' && sort.reversed && <FaSortAmountUp />}
+              {sort.sorted == 'byPrice' && !sort.reversed && (
+                <FaSortAmountDown />
+              )}
+              {sort.sorted != 'byPrice' && <FaSortAmountDown color="grey" />}
+            </Button>
+            <Box display={{ base: 'none', md: 'block' }} w="30px"></Box>
+          </HStack>
+        </Flex>
+      </HStack>
+      <VStack gap={3} maxW="100%" overflowX="auto" w="100%">
+        {entries.map((entry, i) => {
+          return <ShopItemRow {...entry} key={`shop-row-${i}`} />;
+        })}
+      </VStack>
+      <Box visibility={entries.length > 0 ? 'visible' : 'hidden'}>
+        <Pagination
+          length={length}
+          page={page}
+          pageLimit={pageLimit}
+          perPage={PER_PAGE}
+          setPage={setPage}
+          setPageLimit={setPageLimit}
+        />
+      </Box>
+    </VStack>
+  );
+};