Merge pull request #17 from JollyGrin/feat/map

Feat/map
JollyGrin · Mar 17, 2024 · 82828e5 · 82828e5
2 parents 69cd0a3 + d734dcf
commit 82828e5
Show file tree

Hide file tree

Showing 7 changed files with 432 additions and 118 deletions.
diff --git a/components/Bag/Map/AddNewMapFields.tsx 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/MapModal/defaultMaps.ts 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
@@ -0,0 +1,120 @@
+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
+                  key={map.imgUrl}
+                  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
+                  key={map.imgUrl}
+                  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>
+  );
+};