From bd195d9ddcec21c5e559ab24ff1d128d560b5c2f Mon Sep 17 00:00:00 2001
From: broody <broody@gmail.com>
Date: Mon, 18 Sep 2023 13:58:25 -0700
Subject: [PATCH] chore(web): show prices on mobile

---
 web/src/pages/[gameId]/travel.tsx | 356 ++++++++++++++----------------
 1 file changed, 160 insertions(+), 196 deletions(-)

diff --git a/web/src/pages/[gameId]/travel.tsx b/web/src/pages/[gameId]/travel.tsx
index fa0e34d53..1ba722892 100644
--- a/web/src/pages/[gameId]/travel.tsx
+++ b/web/src/pages/[gameId]/travel.tsx
@@ -1,4 +1,4 @@
-import { Arrow, Car, Event } from "@/components/icons";
+import { Arrow, Car } from "@/components/icons";
 import Layout from "@/components/Layout";
 import Button from "@/components/Button";
 import {
@@ -6,41 +6,43 @@ import {
   HStack,
   VStack,
   Text,
-  Divider,
   useEventListener,
   Card,
   Grid,
   GridItem,
   Spacer,
-  Image,
   useDisclosure,
 } from "@chakra-ui/react";
+import {
+  getDrugById,
+  getLocationById,
+  getLocationByType,
+  locations,
+  sortDrugMarkets,
+} from "@/dojo/helpers";
 import { useRouter } from "next/router";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { formatCash, generatePixelBorderPath } from "@/utils/ui";
 import { Map } from "@/components/map";
-import { motion } from "framer-motion";
 import { useSystems } from "@/dojo/systems/useSystems";
 import { usePlayerEntity } from "@/dojo/entities/usePlayerEntity";
 import { useToast } from "@/hooks/toast";
 import { useDojo } from "@/dojo";
-import {
-  getDrugById,
-  getLocationById,
-  getLocationByType,
-  locations,
-  sortDrugMarkets,
-} from "@/dojo/helpers";
-import { LocationInfo } from "@/dojo/types";
 import { useMarketPrices } from "@/dojo/components/useMarkets";
 
+interface MarketPrice {
+  id: string;
+  price: number;
+  diff: number;
+  percentage: number;
+}
+
 export default function Travel() {
   const router = useRouter();
   const gameId = router.query.gameId as string;
   const [targetId, setTargetId] = useState<string>("");
   const [currentLocationId, setCurrentLocationId] = useState<string>("");
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const { isOpen: isPercentage, onToggle: togglePercentage } = useDisclosure();
 
   const { toast } = useToast();
   const { account } = useDojo();
@@ -54,6 +56,12 @@ export default function Travel() {
     gameId,
   });
 
+  const locationName = useMemo(() => {
+    if (targetId) {
+      return getLocationById(targetId)?.name;
+    }
+  }, [targetId]);
+
   useEffect(() => {
     if (playerEntity && !isSubmitting) {
       setCurrentLocationId(playerEntity.locationId);
@@ -61,18 +69,15 @@ export default function Travel() {
     }
   }, [playerEntity, isSubmitting]);
 
-  const targetMarkets = useMemo(() => {
+  const prices = useMemo(() => {
     if (locationPrices) {
-      const currentMarkets = sortDrugMarkets(
-        locationPrices.get(currentLocationId),
-      );
-      const targetMarkets = sortDrugMarkets(locationPrices.get(targetId));
+      const current = sortDrugMarkets(locationPrices.get(currentLocationId));
+      const target = sortDrugMarkets(locationPrices.get(targetId));
 
-      return targetMarkets.map((drug, index) => {
-        const diff = drug.price - currentMarkets[index].price;
+      return target.map((drug, index) => {
+        const diff = drug.price - current[index].price;
         const percentage =
-          (Math.abs(drug.price - currentMarkets[index].price) /
-            currentMarkets[index].price) *
+          (Math.abs(drug.price - current[index].price) / current[index].price) *
           100;
 
         return {
@@ -80,7 +85,7 @@ export default function Travel() {
           price: drug.price,
           diff,
           percentage,
-        };
+        } as MarketPrice;
       });
     }
 
@@ -91,16 +96,16 @@ export default function Travel() {
     switch (e.key) {
       case "ArrowRight":
       case "ArrowUp":
-        back();
+        onBack();
         break;
       case "ArrowLeft":
       case "ArrowDown":
-        next();
+        onNext();
         break;
     }
   });
 
-  const next = useCallback(() => {
+  const onNext = useCallback(() => {
     const idx = locations.findIndex((location) => location.id === targetId);
     if (idx < locations.length - 1) {
       setTargetId(locations[idx + 1].id);
@@ -109,7 +114,7 @@ export default function Travel() {
     }
   }, [targetId]);
 
-  const back = useCallback(() => {
+  const onBack = useCallback(() => {
     const idx = locations.findIndex((location) => location.id === targetId);
     if (idx > 0) {
       setTargetId(locations[idx - 1].id);
@@ -127,7 +132,7 @@ export default function Travel() {
       }
 
       toast(
-        `You've traveled to ${getLocationById(targetId)?.name}`,
+        `You've traveled to ${locationName}`,
         Car,
         `http://amazing_explorer/${hash}`,
       );
@@ -154,77 +159,18 @@ export default function Travel() {
       }}
       showBack
     >
-      <VStack w="full" my="auto" display={["none", "flex"]} gap="0">
-        {/* <Car boxSize="60px" />
-        {locations.map((location, index) => (
-          <Location
-            {...location}
-            key={index}
-            name={location.name}
-            isCurrent={location.id === currentLocationId}
-            selected={location.id === targetId}
-            onClick={() => setTargetId(location.id)}
-          />
-        ))}
-        <Spacer /> */}
-        <HStack w="full" justify="space-between" color="neon.500">
-          <Text textStyle="subheading" fontSize="11px">
-            {getLocationById(targetId)?.name} Prices
-          </Text>
-          <Text
-            cursor="pointer"
-            onClick={() => {
-              togglePercentage();
-            }}
-            fontSize="18px"
-            userSelect="none"
-            visibility={targetId == currentLocationId ? "hidden" : "visible"}
-          >
-            ({isPercentage ? "#" : "%"})
+      <VStack w="full" my="auto" display={["none", "flex"]} gap="20px">
+        <VStack w="full" align="flex-start">
+          <Text textStyle="subheading" fontSize="11px" color="neon.500">
+            Location
           </Text>
-        </HStack>
-        <VStack w="full">
-          <Card w="full" p="5px">
-            <Grid templateColumns="repeat(2, 1fr)" position="relative">
-              <Box
-                position="absolute"
-                boxSize="full"
-                border="2px"
-                borderColor="neon.900"
-              />
-              {targetMarkets.map((drug, index) => {
-                return (
-                  <GridItem
-                    key={index}
-                    colSpan={1}
-                    border="1px"
-                    p="6px"
-                    borderColor="neon.600"
-                  >
-                    <HStack gap="8px">
-                      {getDrugById(drug.id)?.icon({
-                        boxSize: "24px",
-                      })}
-                      <Text>${drug.price.toFixed(0)}</Text>
-                      {drug.diff !== 0 && (
-                        <Text
-                          opacity="0.5"
-                          color={drug.diff >= 0 ? "neon.200" : "red"}
-                        >
-                          (
-                          {isPercentage
-                            ? `${drug.percentage.toFixed(0)}%`
-                            : formatCash(drug.diff)}
-                          )
-                        </Text>
-                      )}
-                    </HStack>
-                  </GridItem>
-                );
-              })}
-            </Grid>
-          </Card>
+          <LocationSelectBar
+            name={locationName}
+            onNext={onNext}
+            onBack={onBack}
+          />
         </VStack>
+        <LocationPrices prices={prices} />
         <Spacer minH="100px" />
         <Button
           w={["full", "250px"]}
@@ -234,13 +180,13 @@ export default function Travel() {
         >
           {targetId === currentLocationId
             ? "Current Location"
-            : `Travel to ${getLocationById(targetId)?.name}`}
+            : `Travel to ${locationName}`}
         </Button>
       </VStack>
       <VStack
         display={["flex", "none"]}
         w="full"
-        h="160px"
+        h="auto"
         p="24px"
         position="fixed"
         bottom="0"
@@ -248,36 +194,18 @@ export default function Travel() {
         spacing="0"
         pointerEvents="none"
         justify="flex-end"
-        background="linear-gradient(transparent, #172217)"
+        background="linear-gradient(transparent, 20%, #172217, 50%, #172217)"
         gap="14px"
       >
-        <HStack w="full" pointerEvents="all">
-          <Arrow
-            style="outline"
-            direction="left"
-            boxSize="48px"
-            userSelect="none"
-            cursor="pointer"
-            onClick={back}
-          />
-          <HStack
-            p={2}
-            bg="neon.700"
-            clipPath={`polygon(${generatePixelBorderPath()})`}
-            w="full"
-            justify="center"
-          >
-            <Text>{getLocationById(targetId)?.name}</Text>
-          </HStack>
-          <Arrow
-            style="outline"
-            direction="right"
-            boxSize="48px"
-            userSelect="none"
-            cursor="pointer"
-            onClick={next}
-          />
-        </HStack>
+        <LocationSelectBar
+          name={locationName}
+          onNext={onNext}
+          onBack={onBack}
+        />
+        <LocationPrices
+          prices={prices}
+          isCurrentLocation={targetId === currentLocationId}
+        />
         <Button
           w={["full", "auto"]}
           pointerEvents="all"
@@ -287,88 +215,124 @@ export default function Travel() {
         >
           {targetId === currentLocationId
             ? "Current Location"
-            : `Travel to ${getLocationById(targetId)?.name}`}
+            : `Travel to ${locationName}`}
         </Button>
       </VStack>
     </Layout>
   );
 }
 
-const Location = ({
+const LocationPrices = ({
+  prices,
+  isCurrentLocation,
+}: {
+  prices: MarketPrice[];
+  isCurrentLocation?: boolean;
+}) => {
+  const { isOpen: isPercentage, onToggle: togglePercentage } = useDisclosure();
+
+  return (
+    <VStack w="full">
+      <HStack w="full" justify="space-between" color="neon.500">
+        <Text textStyle="subheading" fontSize="11px">
+          Prices
+        </Text>
+        <Text
+          cursor="pointer"
+          onClick={() => {
+            togglePercentage();
+          }}
+          fontSize="18px"
+          userSelect="none"
+          pointerEvents="all"
+        >
+          ({!isPercentage ? "#" : "%"})
+        </Text>
+      </HStack>
+      <Card w="full" p="5px">
+        <Grid templateColumns="repeat(2, 1fr)" position="relative">
+          <Box
+            position="absolute"
+            boxSize="full"
+            border="2px"
+            borderColor="neon.900"
+          />
+          {prices.map((drug, index) => {
+            return (
+              <GridItem
+                key={index}
+                colSpan={1}
+                border="1px"
+                p="6px"
+                borderColor="neon.600"
+              >
+                <HStack gap="8px">
+                  {getDrugById(drug.id)?.icon({
+                    boxSize: "24px",
+                  })}
+                  <Text
+                    display={isCurrentLocation ? "block" : ["none", "block"]}
+                  >
+                    ${drug.price.toFixed(0)}
+                  </Text>
+                  {drug.diff !== 0 && (
+                    <Text
+                      opacity="0.5"
+                      color={drug.diff >= 0 ? "neon.200" : "red"}
+                    >
+                      (
+                      {!isPercentage
+                        ? `${drug.percentage.toFixed(0)}%`
+                        : formatCash(drug.diff)}
+                      )
+                    </Text>
+                  )}
+                </HStack>
+              </GridItem>
+            );
+          })}
+        </Grid>
+      </Card>
+    </VStack>
+  );
+};
+
+const LocationSelectBar = ({
   name,
-  icon,
-  selected,
-  isCurrent,
-  onClick,
+  onNext,
+  onBack,
 }: {
-  name: string;
-  icon: React.FC;
-  selected: boolean;
-  isCurrent: boolean;
-  onClick: () => void;
-} & LocationInfo) => {
-  const currentColor = isCurrent ? "yellow.400" : "neon.400";
+  name?: string;
+  onNext: () => void;
+  onBack: () => void;
+}) => {
   return (
-    <HStack w="full">
-      <Box
-        as={motion.div}
-        layout
-        animate={{
-          x: [5, 0, 5],
-          transition: {
-            duration: 0.5,
-            repeat: Infinity,
-          },
-        }}
-      >
-        <Arrow
-          style="pixel"
-          direction="right"
-          size="lg"
-          color={currentColor}
-          visibility={selected ? "visible" : "hidden"}
-        />
-      </Box>
-      <HStack
-        layerStyle={selected ? "rounded" : ""}
-        py="12px"
-        px="20px"
-        w="full"
+    <HStack w="full" pointerEvents="all">
+      <Arrow
+        style="outline"
+        direction="left"
+        boxSize="48px"
+        userSelect="none"
         cursor="pointer"
-        onClick={onClick}
-        position="relative"
+        onClick={onBack}
+      />
+      <HStack
+        p={2}
+        bg="neon.700"
         clipPath={`polygon(${generatePixelBorderPath()})`}
+        w="full"
+        justify="center"
       >
-        <HStack w="full" color={currentColor}>
-          <HStack>
-            {icon({})}
-            <Text whiteSpace="nowrap">{name}</Text>
-          </HStack>
-          <Divider borderStyle="dotted" borderColor="neon.600" />
-          <Text whiteSpace="nowrap">
-            {isCurrent ? "You are here" : "1 Day"}
-          </Text>
-        </HStack>
+        <Text>{name}</Text>
       </HStack>
-      <Box
-        as={motion.div}
-        layout
-        animate={{
-          x: [-5, 0, -5],
-          transition: {
-            duration: 0.5,
-            repeat: Infinity,
-          },
-        }}
-      >
-        <Arrow
-          style="pixel"
-          direction="left"
-          size="lg"
-          color={currentColor}
-          visibility={selected ? "visible" : "hidden"}
-        />
-      </Box>
+      <Arrow
+        style="outline"
+        direction="right"
+        boxSize="48px"
+        userSelect="none"
+        cursor="pointer"
+        onClick={onNext}
+      />
     </HStack>
   );
 };