Merge pull request #16 from JollyGrin/feat/update-landing

Feat/update landing
JollyGrin · Mar 14, 2024 · 69cd0a3 · 69cd0a3
2 parents d0e7935 + 97081e9
commit 69cd0a3
Show file tree

Hide file tree

Showing 19 changed files with 801 additions and 304 deletions.
diff --git a/components/Bag/Deck/Info.tsx b/components/Bag/Deck/Info.tsx
@@ -0,0 +1,33 @@
+import { DeckImportType } from "@/components/DeckPool/deck-import.type";
+import { Box, HStack, Text, Tag } from "@chakra-ui/react";
+
+export const DeckInfo = ({ data }: { data?: DeckImportType }) => {
+  if (!data) return <div />;
+  const { hero, sidekick } = data.deck_data;
+  return (
+    <Box>
+      <HStack mb={2}>
+        <Tag>❤️️{hero.hp}</Tag>
+        <Tag>👟{hero.move}</Tag>
+        <Tag>{hero.isRanged ? "🏹" : "⚔️"}</Tag>
+        <Text color="antiquewhite" fontWeight={700} letterSpacing={"1px"}>
+          {hero.name}
+        </Text>
+      </HStack>
+      <HStack display={sidekick.quantity === 0 ? "none" : "inline-flex"}>
+        <Tag>
+          {sidekick.quantity !== null && sidekick.quantity > 1
+            ? sidekick.quantity + "x"
+            : "❤️️" + sidekick.hp}
+        </Tag>
+        <Tag>{sidekick.isRanged ? "🏹" : "⚔️"}</Tag>
+        <Text color="antiquewhite" fontWeight={700} letterSpacing={"1px"}>
+          {sidekick.name}
+        </Text>
+      </HStack>
+      <Text mt="1rem" color="antiquewhite">
+        {data.deck_data.hero.specialAbility}
+      </Text>
+    </Box>
+  );
+};
diff --git a/components/Bag/Deck/Slot.tsx b/components/Bag/Deck/Slot.tsx
@@ -0,0 +1,52 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+export const DeckSlot = ({
+  abbrev,
+  id,
+  setSelectedDeck,
+  isSelected,
+  star,
+}: {
+  abbrev: string;
+  id: string;
+  setSelectedDeck: any;
+  star: string;
+  isSelected: boolean;
+}) => {
+  const isStarred = star === id;
+  return (
+    <Flex
+      m={2}
+      bg={`rgba(0,0,0,0.${isSelected ? 50 : 25})`}
+      w="100px"
+      height="100px"
+      borderRadius={5}
+      justifyContent={"center"}
+      alignItems={"center"}
+      userSelect={"none"}
+      cursor={"pointer"}
+    >
+      {abbrev && (
+        <Flex
+          bg="brand.secondary"
+          h="85%"
+          w="85%"
+          borderRadius={"inherit"}
+          border={isStarred ? "5px solid gold" : ""}
+          p={2}
+          color="antiquewhite"
+          justifyContent={"center"}
+          alignItems={"center"}
+          onClick={(e) => {
+            e.preventDefault();
+            setSelectedDeck(id);
+          }}
+        >
+          <Text fontWeight={700} fontSize={"1.5rem"}>
+            {abbrev}
+          </Text>
+        </Flex>
+      )}
+    </Flex>
+  );
+};
diff --git a/components/Bag/Deck/Stats.tsx b/components/Bag/Deck/Stats.tsx
@@ -0,0 +1,28 @@
+import { Box, Text } from "@chakra-ui/react";
+
+/**
+ * Displays the estimated storage capacity/taken in kb (kilobytes)
+ * */
+export const DeckStats = ({
+  length,
+  deckKb,
+}: {
+  length: number;
+  deckKb: number;
+}) => {
+  return (
+    <Box mt={2} p={2}>
+      <Text
+        fontFamily={"ArchivoNarrow"}
+        fontSize={"3rem"}
+        fontWeight={700}
+        letterSpacing={"2px"}
+      >
+        {length > 0 ? length : 0} Decks
+      </Text>
+      <Text fontFamily={"monospace"} opacity={0.6}>
+        {deckKb}kb / {5 * 1024}kb used local storage space
+      </Text>
+    </Box>
+  );
+};
diff --git a/components/Bag/Deck/index.tsx b/components/Bag/Deck/index.tsx
@@ -0,0 +1,161 @@
+import { Dispatch, SetStateAction, useState } from "react";
+import { Box, Button, Flex, Input, Text } from "@chakra-ui/react";
+import { CardFactory } from "@/components/CardFactory/card.factory";
+import { DECK_ID } from "@/lib/constants/unmatched-deckids";
+import { useUnmatchedDeck } from "@/lib/hooks/useUnmatchedDeck";
+import { Carousel } from "@/components/Game/game.carousel";
+import { DeckImportType } from "@/components/DeckPool/deck-import.type";
+import { useLocalDeckStorage } from "@/lib/hooks/useLocalStorage";
+import { StarterDeckContainer } from "@/components/Bag/StarterDecks";
+import { DeckSlot } from "./Slot";
+import { DeckStats } from "./Stats";
+import { DeckInfo } from "./Info";
+
+export const BagDecks = () => {
+  const { data, isLoading, setDeckId } = useUnmatchedDeck();
+
+  const { decks, pushDeck, removeDeckbyId, totalKbLeft, setStar, star } =
+    useLocalDeckStorage();
+
+  const [selectedDeckId, setSelectedDeckId] = useState<string>();
+
+  return (
+    <>
+      <Box bg="brand.primary">
+        <DeckStats length={decks?.length ?? 0} deckKb={totalKbLeft ?? 0} />
+        <Flex justifyContent={"space-between"}>
+          {decks && (
+            <Carousel
+              items={decks?.map((deck) => (
+                <Box w="110px" key={deck.id}>
+                  <DeckSlot
+                    abbrev={deck?.deck_data.hero.name
+                      .substring(0, 3)
+                      .toUpperCase()}
+                    id={deck?.id}
+                    setSelectedDeck={setSelectedDeckId}
+                    isSelected={selectedDeckId === deck.id}
+                    star={star}
+                  />
+                </Box>
+              ))}
+            />
+          )}
+        </Flex>
+      </Box>
+
+      <Flex bg="brand.secondary" flexDir={"column"} p={3}>
+        {!selectedDeckId && !data && (
+          <>
+            <UnmatchedInput setDeckId={setDeckId} />
+            <StarterDeckContainer
+              pushDeck={pushDeck}
+              deckIds={decks?.map((deck) => deck.id)}
+            />
+          </>
+        )}
+        {!selectedDeckId && data && <DeckInfo data={data} />}
+        {selectedDeckId && (
+          <DeckInfo data={decks?.find((deck) => deck.id === selectedDeckId)} />
+        )}
+      </Flex>
+      <Flex bg="brand.secondary" h="100%">
+        {!selectedDeckId && data && !isLoading && <DeckCarousel data={data} />}
+        {decks && selectedDeckId && (
+          <DeckCarousel
+            selectedDeck={decks?.find((deck) => deck.id === selectedDeckId)}
+          />
+        )}
+      </Flex>
+      <Flex bg="brand.secondary" alignItems={"end"} p={3}>
+        {!selectedDeckId && data && (
+          <Button
+            onClick={(e) => {
+              e.preventDefault();
+              pushDeck(data);
+              setDeckId(undefined);
+            }}
+          >
+            Save Deck
+          </Button>
+        )}
+        {selectedDeckId && (
+          <Flex gap={2}>
+            <Button onClick={() => setSelectedDeckId(undefined)}>
+              Deselect
+            </Button>
+            <Button
+              bg="tomato"
+              onClick={() => {
+                setSelectedDeckId(undefined);
+                removeDeckbyId(selectedDeckId);
+              }}
+            >
+              Toss from Bag
+            </Button>
+
+            <Button
+              bg="gold"
+              onClick={() => {
+                setStar(selectedDeckId);
+              }}
+            >
+              ☆ Star Deck
+            </Button>
+          </Flex>
+        )}
+      </Flex>
+    </>
+  );
+};
+
+const UnmatchedInput = ({
+  setDeckId,
+}: {
+  setDeckId: Dispatch<SetStateAction<string | undefined>>;
+}) => {
+  return (
+    <>
+      <Text color="antiquewhite" fontSize={"1.25rem"}>
+        Load a deck from{" "}
+        <a
+          href="https://unmatched.cards/decks"
+          style={{ textDecoration: "underline" }}
+        >
+          unmatched.cards
+        </a>
+      </Text>
+      <Input
+        bg="antiquewhite"
+        maxW="200px"
+        my="10px"
+        fontFamily={"monospace"}
+        placeholder={"Example: " + DECK_ID.THRALL}
+        letterSpacing={"2px"}
+        onChange={(e) => {
+          setDeckId(e.target.value);
+        }}
+      />
+    </>
+  );
+};
+
+const DeckCarousel = ({
+  data,
+  selectedDeck,
+}: {
+  data?: DeckImportType;
+  selectedDeck?: DeckImportType;
+}) => {
+  const deck = selectedDeck ? selectedDeck : data;
+  if (!deck) return <div />;
+  return (
+    <Carousel
+      items={deck.deck_data.cards.map((card, index) => (
+        <Box key={card.title + index} h="250px" w="190px">
+          <CardFactory card={card} />
+        </Box>
+      ))}
+    />
+  );
+};
diff --git a/components/Bag/Map/index.tsx b/components/Bag/Map/index.tsx
@@ -0,0 +1,97 @@
+import { MapData } from "@/lib/hooks";
+import {
+  Text,
+  Box,
+  Button,
+  FormLabel,
+  HStack,
+  Input,
+  Slide,
+  Fade,
+  Grid,
+} from "@chakra-ui/react";
+import { useState } from "react";
+
+export const BagMap = () => {
+  const [newMap, setNewMap] = useState<MapData>();
+
+  function enterMapUrl(value?: string) {
+    if (!value) return setNewMap(undefined);
+    return setNewMap((prev) => ({
+      ...(prev ?? {}),
+      imgUrl: value,
+    }));
+  }
+  return (
+    <Box>
+      <Box p="1rem" bg="brand.secondary" color="brand.primary">
+        <FormLabel>Add new map</FormLabel>
+        <HStack>
+          <Input
+            value={newMap?.imgUrl}
+            onChange={(e) => enterMapUrl(e.target.value)}
+            placeholder="https://i.imgur.com/image.png"
+            maxW="300px"
+          />
+          <Button>Add map</Button>
+        </HStack>
+        <Fade in={!!newMap?.imgUrl}>
+          {!!newMap?.imgUrl && (
+            <Box maxW="500px">
+              <Input
+                my="0.5rem"
+                placeholder="Author"
+                onChange={(e) =>
+                  setNewMap((prev) => ({
+                    ...prev,
+                    imgUrl: prev?.imgUrl ?? "",
+                    meta: {
+                      ...prev?.meta,
+                      author: e.target.value,
+                      title: prev?.meta?.title ?? "",
+                    },
+                  }))
+                }
+              />
+
+              <Input
+                my="0.5rem"
+                maxW="500px"
+                placeholder="Map title"
+                onChange={(e) =>
+                  setNewMap((prev) => ({
+                    ...prev,
+                    imgUrl: prev?.imgUrl ?? "",
+                    meta: {
+                      ...prev?.meta,
+                      author: prev?.meta?.author,
+                      title: e.target.value,
+                    },
+                  }))
+                }
+              />
+
+              <Input
+                my="0.5rem"
+                maxW="500px"
+                placeholder="https://www.reddit.com/r/Unmatched/comments/1alrt42/forest_castle_custom_map/"
+                onChange={(e) =>
+                  setNewMap((prev) => ({
+                    ...prev,
+                    imgUrl: prev?.imgUrl ?? "",
+                    meta: {
+                      ...prev?.meta,
+                      author: prev?.meta?.author,
+                      title: prev?.meta?.title ?? "",
+                      url: e.target.value,
+                    },
+                  }))
+                }
+              />
+            </Box>
+          )}
+        </Fade>
+      </Box>
+    </Box>
+  );
+};
diff --git a/components/Icons/IconCardDraw.tsx b/components/Icons/IconCardDraw.tsx
@@ -0,0 +1,12 @@
+import { Icon, IconProps } from "@chakra-ui/react";
+
+export const IconCardDraw = (props: IconProps) => {
+  return (
+    <Icon viewBox="0 0 98 99" {...props}>
+      <path
+        d="M0.785156 78.4V78.1V80.1C0.785156 80.7 1.08516 81.3 1.78516 81.9L19.1852 96.5C20.9852 98 24.7852 98.5 27.6852 97.5L68.0852 83.3C69.8852 82.7 70.8852 81.6 70.8852 80.5V78.8C70.8852 79.9 69.8852 81 68.0852 81.6L27.5852 95.8C24.7852 96.8 20.9852 96.4 19.0852 94.8L1.78516 80.2C1.08516 79.7 0.785156 79.1 0.785156 78.4ZM0.785156 74.7V73.8V76.5V77C0.785156 77.6 1.08516 78.2 1.78516 78.8L19.1852 93.4C20.9852 94.9 24.7852 95.4 27.6852 94.4L68.0852 80.2C69.8852 79.6 70.8852 78.5 70.8852 77.5V78.7V75.2C70.8852 76.3 69.8852 77.3 68.0852 78L27.5852 92C24.7852 93 20.9852 92.6 19.0852 91L1.78516 76.4C1.08516 75.9 0.785156 75.3 0.785156 74.7ZM0.785156 70.9V69.4V72.5V73.2C0.785156 73.8 1.08516 74.4 1.78516 75L19.1852 89.6C20.9852 91.1 24.7852 91.6 27.6852 90.6L68.0852 76.4C69.8852 75.8 70.8852 74.7 70.8852 73.7V74.2V71.4C70.8852 72.5 69.8852 73.5 68.0852 74.1L27.5852 88.2C24.7852 89.2 20.9852 88.8 19.0852 87.2L1.78516 72.6C1.08516 72.1 0.785156 71.5 0.785156 70.9ZM0.785156 67.1V65V68.7V69.4C0.785156 70 1.08516 70.6 1.78516 71.2L19.1852 85.8C20.9852 87.3 24.7852 87.8 27.6852 86.8L68.0852 72.6C69.8852 72 70.8852 70.9 70.8852 69.9V67.6C70.8852 68.7 69.8852 69.7 68.0852 70.3L27.5852 84.4C24.7852 85.4 20.9852 85 19.0852 83.4L1.78516 68.8C1.08516 68.3 0.785156 67.7 0.785156 67.1ZM18.9852 79.7L1.68516 65.2C1.38516 64.9 1.08516 64.6 0.785156 64.3V64.9V65.6C0.785156 66.2 1.08516 66.8 1.78516 67.4L19.1852 82C20.9852 83.5 24.7852 84 27.6852 83L68.0852 68.8C69.8852 68.2 70.7852 67.1 70.8852 66.1V64.6C70.1852 65.5 69.1852 66.3 67.8852 66.8L27.3852 80.9C26.3852 81.2 25.3852 81.4 24.2852 81.4C22.1852 81.4 20.2852 80.8 18.9852 79.7ZM92.8852 50C92.8852 51.5 91.2852 52.5 89.9852 51.9L84.8852 49.6C84.5852 49.5 84.2852 49.4 83.8852 49.4C83.7852 49.4 76.5852 49.2 68.4852 48.5C67.2852 48.4 66.3852 47.2 66.6852 46L69.0852 35C69.2852 34.3 68.9852 33.5 68.3852 33L68.1852 32.8C67.1852 31.9 65.8852 30.9 64.4852 30.9C63.6852 30.9 62.9852 31.2 62.3852 31.7C58.9852 34.7 56.7852 35.3 55.5852 35.3C55.0852 35.3 54.6852 35.2 54.3852 35L61.7852 25.5C62.0852 25.2 62.3852 24.9 62.7852 24.8L67.9852 23.2C68.3852 23.1 68.6852 23.1 69.0852 23.2L82.7852 26.8C82.8852 26.8 82.9852 26.9 83.0852 26.9L91.6852 30.8C92.3852 31.1 92.8852 31.9 92.8852 32.7V50ZM68.5852 12.6L67.1852 17.4C66.9852 18.1 66.4852 18.6 65.7852 18.8L59.7852 20.6C59.3852 20.7 58.9852 21 58.7852 21.3L48.7852 34C48.2852 34.6 48.1852 35.5 48.5852 36.2L48.6852 36.4C49.3852 37.9 51.6852 40.3 55.4852 40.3C56.7852 40.3 58.1852 40 59.5852 39.4C61.0852 38.8 62.6852 40.1 62.3852 41.8L59.3852 56C59.2852 56.6 59.0852 56.9 58.2852 56.9C58.1852 56.9 57.9852 56.9 57.9852 56.9L28.8852 50.7C28.4852 50.6 27.7852 50.5 27.9852 49.4L37.2852 6C37.3852 5.4 37.5852 5.1 38.3852 5.1C38.4852 5.1 38.6852 5.1 38.6852 5.1L67.7852 11.3C68.0852 11.4 68.6852 11.5 68.5852 12.6ZM97.8852 57.2V31.2C97.8852 29.4 96.8852 27.8 95.1852 27L84.9852 22.3C84.6852 22.2 84.4852 22.1 84.1852 22L73.9852 19.4C72.8852 19.1 72.1852 17.9 72.4852 16.8L73.3852 13.9L73.4852 13.7C73.5852 13.4 73.9852 11.1 72.6852 9C72.0852 8.1 70.9852 6.9 68.7852 6.5L39.6852 0.3C39.5852 0.3 39.0852 0.2 38.3852 0.2C35.3852 0.2 33.0852 2 32.3852 5L23.0852 48.4C23.0852 48.6 22.6852 50.5 23.4852 52.3L4.38516 59C2.98516 59.5 2.08516 60.3 1.88516 61.4C1.68516 62.2 2.08516 63.1 2.88516 63.7L20.2852 78.3C21.1852 79.1 22.7852 79.5 24.2852 79.5C25.1852 79.5 25.9852 79.4 26.7852 79.1L67.1852 64.9C68.5852 64.4 69.4852 63.6 69.6852 62.5C69.8852 61.7 69.4852 60.8 68.6852 60.2L64.3852 56.6L64.6852 55C64.8852 54 65.8852 53.3 66.8852 53.4C73.8852 54.1 80.3852 54.3 82.7852 54.4C83.0852 54.4 83.2852 54.5 83.5852 54.6L94.2852 59.5C94.5852 59.7 94.9852 59.7 95.2852 59.7C95.7852 59.7 96.1852 59.6 96.5852 59.3C97.4852 58.8 97.8852 58 97.8852 57.2Z"
+        fill="currentColor"
+      />
+    </Icon>
+  );
+};