From 8da0fa79456710be5388f4f8ac11b71a5ca95995 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sun, 17 Mar 2024 00:36:01 +0100
Subject: [PATCH 1/4] add map create

---
 components/Bag/Map/AddNewMapFields.tsx |  97 ++++++++++++++++++++
 components/Bag/Map/index.tsx           | 121 +++++++++----------------
 lib/hooks/useLocalStorage.ts           |   7 ++
 pages/bag.tsx                          |   2 +-
 4 files changed, 146 insertions(+), 81 deletions(-)
 create mode 100644 components/Bag/Map/AddNewMapFields.tsx

diff --git a/components/Bag/Map/AddNewMapFields.tsx b/components/Bag/Map/AddNewMapFields.tsx
new file mode 100644
index 0000000..041b532
--- /dev/null
+++ b/components/Bag/Map/AddNewMapFields.tsx
@@ -0,0 +1,97 @@
+import { MapData, useLocalMapStorage } from "@/lib/hooks";
+import { Box, Button, FormLabel, HStack, Input, Fade } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { Dispatch, SetStateAction } from "react";
+
+export const AddNewFields = ({
+  newMap,
+  enterMapUrl,
+  setNewMap,
+}: {
+  newMap?: MapData;
+  enterMapUrl: (value: string) => void;
+  setNewMap: Dispatch<SetStateAction<MapData | undefined>>;
+}) => {
+  const { reload } = useRouter();
+  const { add } = useLocalMapStorage();
+  return (
+    <Box p="1rem" 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
+          isDisabled={!newMap || !newMap.meta?.title}
+          onClick={() => {
+            add(newMap as MapData);
+            setNewMap(undefined);
+            reload();
+          }}
+        >
+          Add map
+        </Button>
+      </HStack>
+      <Fade in={!!newMap?.imgUrl}>
+        {!!newMap?.imgUrl && (
+          <Box maxW="500px">
+            <Input
+              borderColor={newMap.meta?.title ? "white" : "tomato"}
+              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"
+              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="Source URL 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>
+  );
+};
diff --git a/components/Bag/Map/index.tsx b/components/Bag/Map/index.tsx
index 1070a30..caa63f9 100644
--- a/components/Bag/Map/index.tsx
+++ b/components/Bag/Map/index.tsx
@@ -1,18 +1,12 @@
-import { MapData } from "@/lib/hooks";
-import {
-  Text,
-  Box,
-  Button,
-  FormLabel,
-  HStack,
-  Input,
-  Slide,
-  Fade,
-  Grid,
-} from "@chakra-ui/react";
+import { MapData, useLocalMapStorage } from "@/lib/hooks";
+import { Text, Box, Flex, Grid, Image, HStack, Button } from "@chakra-ui/react";
 import { useState } from "react";
+import { AddNewFields } from "./AddNewMapFields";
+import { LinkIcon } from "@chakra-ui/icons";
+import Link from "next/link";
 
 export const BagMap = () => {
+  const { data, clear } = useLocalMapStorage();
   const [newMap, setNewMap] = useState<MapData>();
 
   function enterMapUrl(value?: string) {
@@ -24,74 +18,41 @@ export const BagMap = () => {
   }
   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>
+      <Grid templateColumns="1fr 1fr" bg="brand.secondary">
+        <AddNewFields {...{ newMap, enterMapUrl, setNewMap }} />
+        <Image alt="map-preview" src={newMap?.imgUrl} />
+      </Grid>
+      {data?.map((map) => {
+        return (
+          <Flex
+            maxW="500px"
+            m="1rem auto"
+            bg="brand.secondary"
+            color="brand.primary"
+            justifyContent="space-between"
+            alignItems="center"
+            borderRadius="0.5rem"
+          >
+            <HStack p="1rem">
+              <Text fontSize="2rem">{map.meta?.title}</Text>
+              {map.meta?.author && <Text>by {map.meta.author}</Text>}
+              {map.meta?.url && (
+                <Link href={map.meta.url}>
+                  <LinkIcon fontSize="2rem" />
+                </Link>
+              )}
+            </HStack>
+            <Box
+              boxSize="10rem"
+              bgImage={map.imgUrl}
+              bgPosition="center"
+              bgSize="cover"
+              borderRightRadius="inherit"
+            />
+          </Flex>
+        );
+      })}
+      <Button onClick={clear}>Clear all Maps</Button>
     </Box>
   );
 };
diff --git a/lib/hooks/useLocalStorage.ts b/lib/hooks/useLocalStorage.ts
index e54bdf6..6a9a82c 100644
--- a/lib/hooks/useLocalStorage.ts
+++ b/lib/hooks/useLocalStorage.ts
@@ -164,6 +164,12 @@ export const useLocalMapStorage = () => {
     setMapList(maps);
   };
 
+  const addMap = (map: MapData) => {
+    const newMapsList = [...mapList, map];
+    localStorage.setItem(LS_KEY.MAP_LIST, JSON.stringify(newMapsList));
+    setMapList(newMapsList);
+  };
+
   function clearList() {
     localStorage.removeItem(LS_KEY.MAP_LIST);
     setMapList([]);
@@ -172,6 +178,7 @@ export const useLocalMapStorage = () => {
   return {
     data: mapList,
     set: setList,
+    add: addMap,
     clear: clearList,
   };
 };
diff --git a/pages/bag.tsx b/pages/bag.tsx
index b95b967..19f55a4 100644
--- a/pages/bag.tsx
+++ b/pages/bag.tsx
@@ -21,7 +21,7 @@ const BagPage = () => {
       <Tabs h="100%">
         <TabList>
           <Tab>Decks</Tab>
-          <Tab isDisabled>Maps</Tab>
+          <Tab>Maps</Tab>
         </TabList>
 
         <TabPanels h="100%">

From a8015eb1de270e5dde34447dcbbbc30455aa59a4 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sun, 17 Mar 2024 01:47:00 +0100
Subject: [PATCH 2/4] add maps

---
 components/Bag/Map/MapModal/defaultMaps.ts |  77 ++++++++++++++
 components/Bag/Map/MapModal/index.tsx      | 118 +++++++++++++++++++++
 components/Bag/Map/index.tsx               |  86 +++++++++------
 components/Game/Header/map.modal.tsx       | 101 ++++++++++--------
 4 files changed, 308 insertions(+), 74 deletions(-)
 create mode 100644 components/Bag/Map/MapModal/defaultMaps.ts
 create mode 100644 components/Bag/Map/MapModal/index.tsx

diff --git a/components/Bag/Map/MapModal/defaultMaps.ts b/components/Bag/Map/MapModal/defaultMaps.ts
new file mode 100644
index 0000000..bb89e50
--- /dev/null
+++ b/components/Bag/Map/MapModal/defaultMaps.ts
@@ -0,0 +1,77 @@
+import { MapData } from "@/lib/hooks";
+
+const BASRA_PORT: MapData = {
+  imgUrl: "https://arweave.net/krw7LMQOBj2U0Zvw8HQllZYmKd21LH71tQAQ-1eiKX0",
+  meta: {
+    title: "Basra Port",
+    author: "wandering__caretaker",
+    url: "https://www.reddit.com/r/Unmatched/comments/k377lm/basra_port_custom_mapwork_in_progress/",
+  },
+};
+
+const APERATURE_LABS: MapData = {
+  imgUrl:
+    "https://preview.redd.it/custom-map-apeprture-labs-v0-ho2occy3xncc1.png?width=1057&format=png&auto=webp&s=3bfd644a097d7685178993d8252315deafb7e6d2",
+  meta: {
+    title: "Aperature Labs",
+    author: "Vediano",
+    url: "https://www.reddit.com/r/Unmatched/comments/197ipt6/custom_map_apeprture_labs/",
+  },
+};
+
+const FOREST_CASTLE: MapData = {
+  imgUrl:
+    "https://preview.redd.it/forest-castle-custom-map-v0-onjy0jwtxbhc1.png?width=3000&format=png&auto=webp&s=8744485e283ed179f91dc601e53e2a769818732e",
+  meta: {
+    title: "Forest Castle",
+    author: "Vediano",
+    url: "https://www.reddit.com/r/Unmatched/comments/1alrt42/forest_castle_custom_map/",
+  },
+};
+
+const CANNON_RUN: MapData = {
+  imgUrl:
+    "https://preview.redd.it/til2jxmi8jb71.jpg?width=640&crop=smart&auto=webp&s=2fa5384e86a4ab6924ba14772c5f54b5921743de",
+  meta: {
+    title: "Cannon Run",
+    author: "dwaynemagicfingers",
+    url: "https://www.reddit.com/r/Unmatched/comments/olcf26/cannon_run_custom_map_rules_in_comments/",
+  },
+};
+
+const MENDED_DRUM: MapData = {
+  imgUrl: "https://i.imgur.com/NXBcIZN.jpeg",
+  meta: {
+    title: "The Mended Drum",
+    author: "ANDSUSHI",
+    url: "https://www.reddit.com/r/Unmatched/comments/141l9dk/i_made_3_new_custom_maps_the_mended_drum_the/",
+  },
+};
+
+const OPERA: MapData = {
+  imgUrl: "https://i.imgur.com/Jiul7zg.jpeg",
+  meta: {
+    title: "Opera House",
+    author: "ANDSUSHI",
+    url: "https://www.reddit.com/r/Unmatched/comments/141l9dk/i_made_3_new_custom_maps_the_mended_drum_the/",
+  },
+};
+
+const THE_CHALK: MapData = {
+  imgUrl: "https://i.imgur.com/UP7EC0p.jpeg",
+  meta: {
+    title: "The Chalk",
+    author: "ANDSUSHI",
+    url: "https://www.reddit.com/r/Unmatched/comments/141l9dk/i_made_3_new_custom_maps_the_mended_drum_the/",
+  },
+};
+
+export const DEFAULT_MAPS: MapData[] = [
+  MENDED_DRUM,
+  OPERA,
+  THE_CHALK,
+  BASRA_PORT,
+  APERATURE_LABS,
+  FOREST_CASTLE,
+  CANNON_RUN,
+];
diff --git a/components/Bag/Map/MapModal/index.tsx b/components/Bag/Map/MapModal/index.tsx
new file mode 100644
index 0000000..e80f0e5
--- /dev/null
+++ b/components/Bag/Map/MapModal/index.tsx
@@ -0,0 +1,118 @@
+import { MapData, useLocalMapStorage } from "@/lib/hooks";
+import {
+  Image,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  Grid,
+  VStack,
+  Text,
+  Divider,
+  Box,
+} from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { DEFAULT_MAPS } from "./defaultMaps";
+import Link from "next/link";
+
+export const MapModal = () => {
+  const { query, push } = useRouter();
+  const queryUrl = query.mapUrl as string | undefined;
+  const { data } = useLocalMapStorage();
+
+  const selectedMap = [...data, ...DEFAULT_MAPS].find(
+    (map) => map.imgUrl === queryUrl,
+  );
+
+  return (
+    <Modal
+      isOpen={!!(query.editMapUrl as string | undefined)}
+      onClose={() => {
+        const { editMapUrl, ...rest } = query;
+        push({ query: { ...rest } });
+      }}
+    >
+      <ModalOverlay />
+      <ModalContent minW="80vw">
+        <ModalHeader>Browse your saved Maps</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Grid templateColumns="1fr 5fr">
+            <VStack alignItems="start">
+              {data?.map((map) => (
+                <MapTitle
+                  map={map}
+                  onClick={() =>
+                    push({ query: { ...query, mapUrl: map.imgUrl } })
+                  }
+                />
+              ))}
+              <Divider />
+              <Text fontWeight={700} fontSize="0.75rem" opacity={0.35}>
+                Default Maps
+              </Text>
+              {DEFAULT_MAPS?.map((map) => (
+                <MapTitle
+                  map={map}
+                  onClick={() =>
+                    push({ query: { ...query, mapUrl: map.imgUrl } })
+                  }
+                />
+              ))}
+            </VStack>
+            <Box position="relative">
+              <Box
+                as={Link}
+                href={selectedMap?.meta?.url ?? ""}
+                target="_blank"
+                opacity={0.8}
+                position="absolute"
+                top="0"
+                left="0"
+                bg="brand.secondary"
+                color="brand.primary"
+                p="1rem"
+                borderRadius="0 0 1rem 0"
+              >
+                <Text fontSize="1.5rem" fontWeight={700}>
+                  {selectedMap?.meta?.title}
+                </Text>
+                {selectedMap?.meta?.author && (
+                  <Text>by {selectedMap?.meta?.author}</Text>
+                )}
+              </Box>
+              <Image
+                src={queryUrl}
+                alt="mappreview"
+                borderRadius="1rem"
+                w="100%"
+              />
+            </Box>
+          </Grid>
+        </ModalBody>
+
+        <ModalFooter></ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+const MapTitle = (props: { map: MapData; onClick: () => void }) => {
+  return (
+    <Text
+      key={props.map.imgUrl}
+      cursor="pointer"
+      fontWeight="bold"
+      transition="all 0.25s ease-in-out"
+      _hover={{
+        transform: "translateX(5px)",
+      }}
+      onClick={props.onClick}
+    >
+      {props.map.meta?.title}
+    </Text>
+  );
+};
diff --git a/components/Bag/Map/index.tsx b/components/Bag/Map/index.tsx
index caa63f9..6e66c71 100644
--- a/components/Bag/Map/index.tsx
+++ b/components/Bag/Map/index.tsx
@@ -4,6 +4,9 @@ import { useState } from "react";
 import { AddNewFields } from "./AddNewMapFields";
 import { LinkIcon } from "@chakra-ui/icons";
 import Link from "next/link";
+import { useRouter } from "next/router";
+import { MapModal } from "./MapModal";
+import { DEFAULT_MAPS } from "./MapModal/defaultMaps";
 
 export const BagMap = () => {
   const { data, clear } = useLocalMapStorage();
@@ -22,37 +25,58 @@ export const BagMap = () => {
         <AddNewFields {...{ newMap, enterMapUrl, setNewMap }} />
         <Image alt="map-preview" src={newMap?.imgUrl} />
       </Grid>
-      {data?.map((map) => {
-        return (
-          <Flex
-            maxW="500px"
-            m="1rem auto"
-            bg="brand.secondary"
-            color="brand.primary"
-            justifyContent="space-between"
-            alignItems="center"
-            borderRadius="0.5rem"
-          >
-            <HStack p="1rem">
-              <Text fontSize="2rem">{map.meta?.title}</Text>
-              {map.meta?.author && <Text>by {map.meta.author}</Text>}
-              {map.meta?.url && (
-                <Link href={map.meta.url}>
-                  <LinkIcon fontSize="2rem" />
-                </Link>
-              )}
-            </HStack>
-            <Box
-              boxSize="10rem"
-              bgImage={map.imgUrl}
-              bgPosition="center"
-              bgSize="cover"
-              borderRightRadius="inherit"
-            />
-          </Flex>
-        );
-      })}
-      <Button onClick={clear}>Clear all Maps</Button>
+      {data?.map((map) => <MapCard key={map.imgUrl} {...map} />)}
+      <Button onClick={clear} ml="1rem">
+        Clear your saved Maps
+      </Button>
+
+      <Text
+        m="0 auto"
+        w="fit-content"
+        fontSize="2rem"
+        fontFamily="SpaceGrotesk"
+      >
+        Default Homebrewed Maps
+      </Text>
+      {DEFAULT_MAPS?.map((map) => <MapCard key={map.imgUrl} {...map} />)}
+
+      <MapModal />
     </Box>
   );
 };
+
+const MapCard = (map: MapData) => {
+  const { query, push } = useRouter();
+  return (
+    <Flex
+      maxW="500px"
+      m="1rem auto"
+      bg="brand.secondary"
+      color="brand.primary"
+      justifyContent="space-between"
+      alignItems="center"
+      borderRadius="0.5rem"
+    >
+      <HStack p="1rem">
+        <Text fontSize="2rem">{map.meta?.title}</Text>
+        {map.meta?.author && <Text>by {map.meta.author}</Text>}
+        {map.meta?.url && (
+          <Link href={map.meta.url}>
+            <LinkIcon fontSize="2rem" />
+          </Link>
+        )}
+      </HStack>
+      <Box
+        cursor="pointer"
+        boxSize="10rem"
+        bgImage={map.imgUrl}
+        bgPosition="center"
+        bgSize="cover"
+        borderRightRadius="inherit"
+        onClick={() => {
+          push({ query: { ...query, mapUrl: map.imgUrl, editMapUrl: true } });
+        }}
+      />
+    </Flex>
+  );
+};
diff --git a/components/Game/Header/map.modal.tsx b/components/Game/Header/map.modal.tsx
index 80426b1..bf158aa 100644
--- a/components/Game/Header/map.modal.tsx
+++ b/components/Game/Header/map.modal.tsx
@@ -1,3 +1,5 @@
+import { MapModal as MapSelectorModal } from "@/components/Bag/Map/MapModal";
+import { DEFAULT_MAPS } from "@/components/Bag/Map/MapModal/defaultMaps";
 import {
   Text,
   Modal,
@@ -23,50 +25,63 @@ export const MapModal = (props: { isOpen: boolean; onClose: () => void }) => {
   const [url] = useDebounce(_url, 300);
 
   return (
-    <Modal isOpen={props.isOpen} onClose={props.onClose}>
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>Change the Map</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <FormLabel>Map Image URL</FormLabel>
-          <Input
-            placeholder="https://someurl.com/map.svg"
-            value={url}
-            onChange={(e) => setUrl(e.target.value)}
-          />
+    <>
+      <MapSelectorModal />
+      <Modal isOpen={props.isOpen} onClose={props.onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Change the Map</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <FormLabel>Map Image URL</FormLabel>
+            <Input
+              placeholder="https://someurl.com/map.svg"
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+            />
 
-          <Text mt="4px" fontSize="0.75rem">
-            Changes local only. Share map link with friends you are playing
-            with.
-          </Text>
-          <Text mt="4px" fontSize="0.75rem">
-            Recommended 1200x1000
-          </Text>
-          {!url && <Skeleton h="250px" w="300px" borderRadius="0.5rem" />}
-          {url && <Image alt="map" src={url} h="250px" />}
-        </ModalBody>
+            <Text mt="4px" fontSize="0.75rem">
+              Changes local only. Share map link with friends you are playing
+              with.
+            </Text>
+            <Text mt="4px" fontSize="0.75rem">
+              Recommended 1200x1000
+            </Text>
+            {!url && <Skeleton h="250px" w="300px" borderRadius="0.5rem" />}
+            {url && <Image alt="map" src={url} h="250px" />}
+          </ModalBody>
 
-        <ModalFooter>
-          <Button
-            variant="ghost"
-            onClick={() => {
-              const { mapUrl, ...rest } = query;
-              setUrl(undefined);
-              push({ query: { ...rest } });
-            }}
-          >
-            Clear Map
-          </Button>
-          <Button
-            onClick={() => {
-              push({ query: { ...query, mapUrl: url } });
-            }}
-          >
-            Set Map
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+          <ModalFooter gap="1rem">
+            <Button
+              variant="ghost"
+              onClick={() => {
+                const { mapUrl, ...rest } = query;
+                setUrl(undefined);
+                push({ query: { ...rest } });
+              }}
+            >
+              Clear Map
+            </Button>
+            <Button
+              onClick={() => {
+                const defaultMapUrl = query?.mapUrl ?? DEFAULT_MAPS[0].imgUrl;
+                push({
+                  query: { ...query, editMapUrl: true, mapUrl: defaultMapUrl },
+                });
+              }}
+            >
+              Browse saved maps
+            </Button>
+            <Button
+              onClick={() => {
+                push({ query: { ...query, mapUrl: url } });
+              }}
+            >
+              Set Map
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
   );
 };

From 4c9b66edf4fde883a03b2560ced38d1b13342d54 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sun, 17 Mar 2024 01:49:50 +0100
Subject: [PATCH 3/4] add skeleton for image

---
 components/Bag/Map/index.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/components/Bag/Map/index.tsx b/components/Bag/Map/index.tsx
index 6e66c71..56f1e71 100644
--- a/components/Bag/Map/index.tsx
+++ b/components/Bag/Map/index.tsx
@@ -1,5 +1,14 @@
 import { MapData, useLocalMapStorage } from "@/lib/hooks";
-import { Text, Box, Flex, Grid, Image, HStack, Button } from "@chakra-ui/react";
+import {
+  Text,
+  Box,
+  Flex,
+  Grid,
+  Image,
+  HStack,
+  Button,
+  Skeleton,
+} from "@chakra-ui/react";
 import { useState } from "react";
 import { AddNewFields } from "./AddNewMapFields";
 import { LinkIcon } from "@chakra-ui/icons";
@@ -20,10 +29,14 @@ export const BagMap = () => {
     }));
   }
   return (
-    <Box>
+    <Box bg="brand.primary">
       <Grid templateColumns="1fr 1fr" bg="brand.secondary">
         <AddNewFields {...{ newMap, enterMapUrl, setNewMap }} />
-        <Image alt="map-preview" src={newMap?.imgUrl} />
+        {newMap?.imgUrl ? (
+          <Image alt="map-preview" src={newMap?.imgUrl} />
+        ) : (
+          <Skeleton w="300px" h="5rem" mt="0.5rem" />
+        )}
       </Grid>
       {data?.map((map) => <MapCard key={map.imgUrl} {...map} />)}
       <Button onClick={clear} ml="1rem">

From d734dcfdb6a615525ae7b698df0be007d9e8afde Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sun, 17 Mar 2024 01:51:48 +0100
Subject: [PATCH 4/4] fix build

---
 components/Bag/Map/MapModal/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/Bag/Map/MapModal/index.tsx b/components/Bag/Map/MapModal/index.tsx
index e80f0e5..83d291d 100644
--- a/components/Bag/Map/MapModal/index.tsx
+++ b/components/Bag/Map/MapModal/index.tsx
@@ -44,6 +44,7 @@ export const MapModal = () => {
             <VStack alignItems="start">
               {data?.map((map) => (
                 <MapTitle
+                  key={map.imgUrl}
                   map={map}
                   onClick={() =>
                     push({ query: { ...query, mapUrl: map.imgUrl } })
@@ -56,6 +57,7 @@ export const MapModal = () => {
               </Text>
               {DEFAULT_MAPS?.map((map) => (
                 <MapTitle
+                  key={map.imgUrl}
                   map={map}
                   onClick={() =>
                     push({ query: { ...query, mapUrl: map.imgUrl } })