Merge pull request #26 from JollyGrin/refactor/maps

Refactor/maps
JollyGrin · Mar 30, 2024 · 8165796 · 8165796
2 parents bfe3f63 + 66b78fa
commit 8165796
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 130 deletions.
diff --git a/components/Bag/Map/MapModal/defaultMaps.json b/components/Bag/Map/MapModal/defaultMaps.json
@@ -0,0 +1,122 @@
+[
+  {
+    "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/"
+    }
+  },
+  {
+    "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/"
+    }
+  },
+  {
+    "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/"
+    }
+  },
+  {
+    "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/"
+    }
+  },
+  {
+    "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/"
+    }
+  },
+  {
+    "imgUrl": "https://arweave.net/3S2Rt2w8tlDRcI61UZntOiM2ZjKNRMF-78YB21JJkVI",
+    "meta": {
+      "title": "Olympus",
+      "author": "Taytertot",
+      "url": "https://www.youtube.com/watch?app=desktop&v=fsIgAV93_ko"
+    }
+  },
+  {
+    "imgUrl": "https://arweave.net/YM5YObdZvYvQMAY47mY_7wA9RvFwesCFK8VnbLP2jkY",
+    "meta": {
+      "title": "Counts Castle",
+      "author": "Taytertot",
+      "url": "https://www.youtube.com/watch?app=desktop&v=fsIgAV93_ko"
+    }
+  },
+  {
+    "imgUrl": "https://arweave.net/fSXTqIw2GSC3o16dozS1zP4JD4fJo-oAEvRweBv3iIg",
+    "meta": {
+      "title": "Huntsman's Lodge",
+      "author": "Taytertot",
+      "url": "https://www.youtube.com/watch?app=desktop&v=fsIgAV93_ko"
+    }
+  },
+  {
+    "imgUrl": "https://arweave.net/CS20h6J48E4BjKWUerxmyl7_-G95rZJEcCJTpey6FSw",
+    "meta": {
+      "title": "Rose Garden",
+      "author": "Taytertot",
+      "url": "https://www.youtube.com/watch?app=desktop&v=fsIgAV93_ko"
+    }
+  },
+  {
+    "imgUrl": "https://arweave.net/hGJt4WxpYw4xYX3Vd3wavu57MKaJXdk3Nz2cDdv8tEU",
+    "meta": {
+      "title": "Verde Jungle",
+      "author": "Taytertot",
+      "url": "https://www.youtube.com/watch?app=desktop&v=fsIgAV93_ko"
+    }
+  },
+  {
+    "imgUrl": "https://arweave.net/kA3ey8ZWooYkocZbWM_Rpf-jA735d78-kdHrEa13UrQ",
+    "meta": {
+      "title": "Pharoh's Tomb",
+      "author": "Taytertot",
+      "url": "https://www.youtube.com/watch?app=desktop&v=fsIgAV93_ko"
+    }
+  },
+  {
+    "imgUrl": "https://arweave.net/UPdVYAbA-he65zuvoWHmUKXL6rZH6TYdbtwh7ukbtWM",
+    "meta": {
+      "title": "Great Wall",
+      "author": "Taytertot",
+      "url": "https://www.youtube.com/watch?app=desktop&v=fsIgAV93_ko"
+    }
+  },
+  {
+    "imgUrl": "https://arweave.net/dweQ7_dscGVv22DF4OjXCvAnWTJjuFmuS2Dtrsb8zP8",
+    "meta": {
+      "title": "Island of Despair",
+      "author": "Taytertot",
+      "url": "https://www.youtube.com/watch?app=desktop&v=fsIgAV93_ko"
+    }
+  },
+  {
+    "imgUrl": "https://arweave.net/Td_Hx_ZmDBOqfRrK1mdhFTqF1vEhRoX7IIx_ehmvNNU",
+    "meta": {
+      "title": "Turtle Sewers",
+      "author": "Taytertot",
+      "url": "https://www.youtube.com/watch?app=desktop&v=fsIgAV93_ko"
+    }
+  },
+  {
+    "imgUrl": "https://arweave.net/cq3gG4uqlP3NXrr2ngipylDr8V9Ti1uuL33BfZ0Wy2I",
+    "meta": {
+      "title": "Weathertop",
+      "author": "Taytertot",
+      "url": "https://www.youtube.com/watch?app=desktop&v=fsIgAV93_ko"
+    }
+  }
+]
diff --git a/components/Bag/Map/MapModal/defaultMaps.ts b/components/Bag/Map/MapModal/defaultMaps.ts
diff --git a/components/Bag/Map/MapModal/index.tsx b/components/Bag/Map/MapModal/index.tsx
@@ -15,7 +15,7 @@ import {
   Box,
 } from "@chakra-ui/react";
 import { useRouter } from "next/router";
-import { DEFAULT_MAPS } from "./defaultMaps";
+import DEFAULT_MAPS from "./defaultMaps.json";
 import Link from "next/link";
 
 export const MapModal = () => {

diff --git a/components/Bag/Map/index.tsx b/components/Bag/Map/index.tsx
@@ -6,7 +6,6 @@ import {
   Grid,
   Image,
   HStack,
-  Button,
   Skeleton,
 } from "@chakra-ui/react";
 import { useState } from "react";
@@ -15,9 +14,10 @@ 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";
+import DEFAULT_MAPS from "./MapModal/defaultMaps.json";
 
 export const BagMap = () => {
+  const { query, push } = useRouter();
   const { data, clear } = useLocalMapStorage();
   const [newMap, setNewMap] = useState<MapData>();
 
@@ -38,58 +38,50 @@ export const BagMap = () => {
           <Skeleton w="300px" h="5rem" mt="0.5rem" />
         )}
       </Grid>
-      {data?.map((map) => <MapCard key={map.imgUrl} {...map} />)}
-      <Button onClick={clear} ml="1rem">
-        Clear your saved Maps
-      </Button>
+      <Flex flexWrap="wrap" gap="0.5rem" p="0.5rem">
+        {[...data, ...DEFAULT_MAPS]?.map((map) => (
+          <Box
+            key={map?.imgUrl}
+            minW="250px"
+            minH="200px"
+            bg="brand.highlight"
+            bgImg={map?.imgUrl}
+            bgPos="center"
+            bgSize="cover"
+            borderRadius="0.5rem"
+            position="relative"
+            onClick={() => {
+              push({
+                query: { ...query, mapUrl: map.imgUrl, editMapUrl: true },
+              });
+            }}
+          >
+            <Text
+              position="absolute"
+              bg="rgba(255,255,255,0.7)"
+              p="0.25rem"
+              borderRadius="0.5rem 0 0.25rem 0"
+            >
+              {map?.meta?.author}
+            </Text>
 
-      <Text
-        m="0 auto"
-        w="fit-content"
-        fontSize="2rem"
-        fontFamily="SpaceGrotesk"
-      >
-        Default Homebrewed Maps
-      </Text>
-      {DEFAULT_MAPS?.map((map) => <MapCard key={map.imgUrl} {...map} />)}
+            {map?.meta?.url && (
+              <Box
+                position="absolute"
+                bottom="0"
+                bg="rgba(255,255,255,0.7)"
+                p="0.25rem"
+              >
+                <Link href={map?.meta?.url}>
+                  <LinkIcon fontSize="2rem" />
+                </Link>
+              </Box>
+            )}
+          </Box>
+        ))}
+      </Flex>
 
       <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
@@ -1,5 +1,5 @@
 import { MapModal as MapSelectorModal } from "@/components/Bag/Map/MapModal";
-import { DEFAULT_MAPS } from "@/components/Bag/Map/MapModal/defaultMaps";
+import DEFAULT_MAPS from "@/components/Bag/Map/MapModal/defaultMaps.json";
 import {
   Text,
   Modal,