From 9251a5c115d80e0c23c0607cd871e5fab1cac6d3 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Fri, 29 Mar 2024 22:35:21 +0100
Subject: [PATCH 1/3] refactored to be better display of decks

---
 components/Bag/Deck/index.tsx | 252 +++++++++++++++++++++-------------
 1 file changed, 154 insertions(+), 98 deletions(-)

diff --git a/components/Bag/Deck/index.tsx b/components/Bag/Deck/index.tsx
index 7548bee..65a013c 100644
--- a/components/Bag/Deck/index.tsx
+++ b/components/Bag/Deck/index.tsx
@@ -1,18 +1,18 @@
 import { Dispatch, SetStateAction, useState } from "react";
-import { Box, Button, Flex, Input, Text } from "@chakra-ui/react";
+import { Box, Button, Flex, Grid, HStack, 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 { FaStar } from "react-icons/fa";
+
 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 { data, setDeckId } = useUnmatchedDeck();
 
   const { decks, pushDeck, removeDeckbyId, totalKbLeft, setStar, star } =
     useLocalDeckStorage();
@@ -23,89 +23,165 @@ export const BagDecks = () => {
     <>
       <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)}
+      <Grid templateColumns="1fr 4fr" h="100%">
+        <Box bg="white">
+          {decks?.map((deck) => (
+            <DeckListItem
+              key={deck.id + deck.version_id}
+              {...{ deck, star, selectedDeckId, setSelectedDeckId }}
             />
-          </>
-        )}
-        {!selectedDeckId && data && <DeckInfo data={data} />}
+          ))}
+        </Box>
         {selectedDeckId && (
-          <DeckInfo data={decks?.find((deck) => deck.id === selectedDeckId)} />
+          <Box h="100%" bg="brand.secondary">
+            <Buttons
+              {...{
+                setSelectedDeckId,
+                selectedDeckId,
+                star,
+                setStar,
+                removeDeckbyId,
+              }}
+            />
+            <DeckCards {...{ decks, selectedDeckId }} />
+          </Box>
         )}
-      </Flex>
-      <Flex bg="brand.secondary" h="100%">
-        {!selectedDeckId && data && !isLoading && <DeckCarousel data={data} />}
-        {decks && selectedDeckId && (
-          <DeckCarousel
-            selectedDeck={decks?.find((deck) => deck.id === selectedDeckId)}
-          />
+
+        {!selectedDeckId && (
+          <Box p="0.5rem">
+            {!data && (
+              <Flex direction="column">
+                <Box>
+                  <UnmatchedInput setDeckId={setDeckId} />
+                </Box>
+                <StarterDeckContainer
+                  deckIds={decks?.map((deck) => deck.id)}
+                  {...{ pushDeck }}
+                />
+              </Flex>
+            )}
+            {data && (
+              <HStack ml="0.5rem" mb="0.5rem" gap="0.5rem">
+                <Button onClick={() => pushDeck(data)}>Save Deck</Button>
+                <Button onClick={() => setDeckId(undefined)}>Clear</Button>
+              </HStack>
+            )}
+
+            {/* If data exists, show the cards */}
+            {data && <DeckCards decks={[data]} selectedDeckId={data.id} />}
+          </Box>
         )}
-      </Flex>
-      <Flex bg="brand.secondary" alignItems={"end"} p={3}>
-        {!selectedDeckId && data && (
+      </Grid>
+    </>
+  );
+};
+
+const DeckListItem = ({
+  deck,
+  star,
+  setSelectedDeckId,
+  selectedDeckId,
+}: {
+  deck: DeckImportType;
+  star?: string;
+  selectedDeckId?: string;
+  setSelectedDeckId: (id: string) => void;
+}) => {
+  return (
+    <HStack
+      key={deck.id + deck.version_id}
+      p="0.5rem"
+      bg={selectedDeckId === deck.id ? "rgba(0,0,0,0.15)" : ""}
+      cursor="pointer"
+      onClick={() => setSelectedDeckId(deck.id)}
+    >
+      <Box
+        h="2rem"
+        w="1.5rem"
+        borderRadius="0.25rem"
+        bg={deck.deck_data.appearance.highlightColour}
+        bgImg={deck.deck_data.appearance.cardbackUrl}
+        bgPos="center"
+        bgSize="cover"
+        transition="all 0.25s ease-in-out"
+        _hover={{
+          transform: "scale(1.8)",
+        }}
+      />
+      {star === deck.id && (
+        <FaStar
+          color="gold"
+          style={{ filter: "drop-shadow(0 1px 1px rgba(0,0,0,0.25))" }}
+        />
+      )}
+      <Text>{deck.name}</Text>
+    </HStack>
+  );
+};
+
+const Buttons = ({
+  selectedDeckId,
+  setSelectedDeckId,
+  removeDeckbyId,
+  setStar,
+}: {
+  selectedDeckId?: string;
+  setSelectedDeckId: (id?: string) => void;
+  removeDeckbyId: (id: string) => void;
+  setStar: (id: string) => void;
+}) => {
+  return (
+    <HStack p="0.5rem" justifyContent="end">
+      {selectedDeckId && (
+        <Flex gap={2}>
+          <Button onClick={() => setSelectedDeckId(undefined)}>Deselect</Button>
           <Button
-            onClick={(e) => {
-              e.preventDefault();
-              pushDeck(data);
-              setDeckId(undefined);
+            bg="tomato"
+            onClick={() => {
+              setSelectedDeckId(undefined);
+              removeDeckbyId(selectedDeckId);
             }}
           >
-            Save Deck
+            Toss from Bag
           </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>
-    </>
+          <Button
+            bg="gold"
+            onClick={() => {
+              setStar(selectedDeckId);
+            }}
+          >
+            ☆ Star Deck
+          </Button>
+        </Flex>
+      )}
+    </HStack>
+  );
+};
+
+const DeckCards = ({
+  decks,
+  selectedDeckId,
+}: {
+  decks?: DeckImportType[];
+  selectedDeckId?: string;
+}) => {
+  return (
+    <Flex flexWrap="wrap" gap="0.5rem" mx="0.5rem">
+      {decks
+        ?.find((deck) => deck.id === selectedDeckId)
+        ?.deck_data?.cards?.map((card) => (
+          <Box
+            key={card.title}
+            maxW="200px"
+            transition="all 0.25s ease-in-out"
+            _hover={{ transform: "scale(2)" }}
+          >
+            <CardFactory card={card} />
+          </Box>
+        ))}
+    </Flex>
   );
 };
 
@@ -139,23 +215,3 @@ const UnmatchedInput = ({
     </>
   );
 };
-
-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>
-      ))}
-    />
-  );
-};

From db61e54e5296dd5d9555420a60f83a110ef68207 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sat, 30 Mar 2024 00:01:35 +0100
Subject: [PATCH 2/3] add json

---
 components/Bag/Deck/AddJson.tsx | 162 ++++++++++++++++++++++++++++++++
 components/Bag/Deck/index.tsx   |  17 ++++
 2 files changed, 179 insertions(+)
 create mode 100644 components/Bag/Deck/AddJson.tsx

diff --git a/components/Bag/Deck/AddJson.tsx b/components/Bag/Deck/AddJson.tsx
new file mode 100644
index 0000000..e46239f
--- /dev/null
+++ b/components/Bag/Deck/AddJson.tsx
@@ -0,0 +1,162 @@
+import {
+  Box,
+  Flex,
+  Text,
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+  AccordionIcon,
+  Textarea,
+  HStack,
+  Button,
+  FormLabel,
+  Input,
+} from "@chakra-ui/react";
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useLocalDeckStorage } from "@/lib/hooks";
+import { useRouter } from "next/router";
+import axios from "axios";
+
+export const AddJson = () => {
+  return (
+    <Flex
+      direction="column"
+      bg="brand.highlight"
+      color="brand.secondary"
+      p="0.5rem"
+      borderRadius="0.25rem"
+    >
+      <Text fontWeight={700}>Load a Deck from a JSON</Text>
+      <Text>
+        Don't have a deck uploaded to Unmatched? You can import the raw JSON
+      </Text>
+      <Options />
+    </Flex>
+  );
+};
+
+const Options = () => {
+  const { reload } = useRouter();
+  const { pushDeck } = useLocalDeckStorage();
+
+  const [json, setJson] = useState<string>("");
+  const [url, setUrl] = useState<string>();
+
+  const { data: isJsonValid } = useQuery(
+    ["json-check", json.length, json.substring(0, 5)],
+    async () => await jsonCheck(json),
+  );
+
+  const { data: urlData } = useQuery(
+    ["urlData"],
+    async () => await axios.get(url ?? ""),
+    {
+      enabled: !!url,
+    },
+  );
+
+  return (
+    <Accordion>
+      <AccordionItem>
+        <h2>
+          <AccordionButton>
+            <Box as="span" flex="1" textAlign="left">
+              Input via Text
+            </Box>
+            <AccordionIcon />
+          </AccordionButton>
+        </h2>
+        <AccordionPanel pb={4}>
+          <HStack>
+            <Box w="50%">
+              <StatusText isValid={isJsonValid ?? false} text="is JSON?" />
+              <FormLabel fontSize="0.75rem">
+                Heads up! This won't check the JSON contents, just if it's a
+                valid json
+              </FormLabel>
+
+              {isJsonValid && (
+                <Button
+                  mt="0.5rem"
+                  onClick={() => {
+                    pushDeck(JSON.parse(json));
+                    reload();
+                  }}
+                >
+                  Add Deck
+                </Button>
+              )}
+            </Box>
+            <Textarea
+              fontSize="0.5rem"
+              bg="white"
+              onChange={(e) => setJson(e.target.value)}
+              value={json}
+            />
+          </HStack>
+        </AccordionPanel>
+      </AccordionItem>
+
+      <AccordionItem>
+        <h2>
+          <AccordionButton>
+            <Box as="span" flex="1" textAlign="left">
+              Input via URL
+            </Box>
+            <AccordionIcon />
+          </AccordionButton>
+        </h2>
+        <AccordionPanel pb={4}>
+          {urlData?.data && (
+            <Button
+              my="0.5rem"
+              onClick={() => {
+                pushDeck(urlData?.data);
+                reload();
+              }}
+            >
+              Add Deck
+            </Button>
+          )}
+          <HStack alignItems="start">
+            <Input
+              minW="10rem"
+              bg="white"
+              maxW="12rem"
+              onChange={(e) => setUrl(e.target.value)}
+              value={url}
+            />
+            <code style={{ fontSize: "0.5rem" }}>
+              {JSON.stringify(urlData?.data)}
+            </code>
+          </HStack>
+        </AccordionPanel>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+const StatusText = (props: { text: string; isValid: boolean }) => {
+  return (
+    <HStack>
+      <Box
+        bg={props.isValid ? "green" : "red"}
+        boxSize="1rem"
+        borderRadius="100%"
+      />
+      <Text>{props.text}</Text>
+    </HStack>
+  );
+};
+
+async function jsonCheck(value: string) {
+  console.log(value);
+  try {
+    JSON.parse(value);
+    return true;
+  } catch (err) {
+    return false;
+  }
+}
diff --git a/components/Bag/Deck/index.tsx b/components/Bag/Deck/index.tsx
index 65a013c..a8b16a0 100644
--- a/components/Bag/Deck/index.tsx
+++ b/components/Bag/Deck/index.tsx
@@ -10,6 +10,9 @@ import { FaStar } from "react-icons/fa";
 
 import { StarterDeckContainer } from "@/components/Bag/StarterDecks";
 import { DeckStats } from "./Stats";
+import { AddJson } from "./AddJson";
+import { useCopyToClipboard } from "@/lib/hooks/useCopyToClipboard";
+import { toast } from "react-hot-toast";
 
 export const BagDecks = () => {
   const { data, setDeckId } = useUnmatchedDeck();
@@ -36,6 +39,7 @@ export const BagDecks = () => {
         {selectedDeckId && (
           <Box h="100%" bg="brand.secondary">
             <Buttons
+              deck={decks?.find((deck) => deck.id === selectedDeckId)}
               {...{
                 setSelectedDeckId,
                 selectedDeckId,
@@ -55,6 +59,7 @@ export const BagDecks = () => {
                 <Box>
                   <UnmatchedInput setDeckId={setDeckId} />
                 </Box>
+                <AddJson />
                 <StarterDeckContainer
                   deckIds={decks?.map((deck) => deck.id)}
                   {...{ pushDeck }}
@@ -121,16 +126,19 @@ const DeckListItem = ({
 };
 
 const Buttons = ({
+  deck,
   selectedDeckId,
   setSelectedDeckId,
   removeDeckbyId,
   setStar,
 }: {
+  deck?: DeckImportType;
   selectedDeckId?: string;
   setSelectedDeckId: (id?: string) => void;
   removeDeckbyId: (id: string) => void;
   setStar: (id: string) => void;
 }) => {
+  const [_, copy] = useCopyToClipboard();
   return (
     <HStack p="0.5rem" justifyContent="end">
       {selectedDeckId && (
@@ -154,6 +162,15 @@ const Buttons = ({
           >
             ☆ Star Deck
           </Button>
+
+          <Button
+            onClick={() => {
+              copy(JSON.stringify(deck));
+              toast.success("Copied JSON for: " + deck?.name);
+            }}
+          >
+            Copy JSON
+          </Button>
         </Flex>
       )}
     </HStack>

From 8db93d4c5f65dedd3e3ab899e860017e09629631 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sat, 30 Mar 2024 00:04:56 +0100
Subject: [PATCH 3/3] fix build

---
 components/Bag/Deck/AddJson.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/Bag/Deck/AddJson.tsx b/components/Bag/Deck/AddJson.tsx
index e46239f..47441be 100644
--- a/components/Bag/Deck/AddJson.tsx
+++ b/components/Bag/Deck/AddJson.tsx
@@ -30,7 +30,8 @@ export const AddJson = () => {
     >
       <Text fontWeight={700}>Load a Deck from a JSON</Text>
       <Text>
-        Don't have a deck uploaded to Unmatched? You can import the raw JSON
+        Don&apos;t have a deck uploaded to Unmatched? You can import the raw
+        JSON
       </Text>
       <Options />
     </Flex>
@@ -73,8 +74,8 @@ const Options = () => {
             <Box w="50%">
               <StatusText isValid={isJsonValid ?? false} text="is JSON?" />
               <FormLabel fontSize="0.75rem">
-                Heads up! This won't check the JSON contents, just if it's a
-                valid json
+                Heads up! This won&apos;t check the JSON contents, just if
+                it&apos;s a valid json
               </FormLabel>
 
               {isJsonValid && (