percentage toggle

cartridge-gg · Sep 18, 2023 · 7d6b8e5 · 7d6b8e5
1 parent 386e52d
commit 7d6b8e5
Showing 1 changed file with 75 additions and 41 deletions.
diff --git a/web/src/pages/[gameId]/travel.tsx b/web/src/pages/[gameId]/travel.tsx
@@ -13,6 +13,7 @@ import {
   Grid,
   GridItem,
   Spacer,
+  useDisclosure,
 } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
@@ -39,6 +40,8 @@ export default function Travel() {
   const [targetId, setTargetId] = useState<string>("");
   const [currentLocationId, setCurrentLocationId] = useState<string>("");
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const { isOpen: isPercentage, onToggle: onTogglePercentage } =
+    useDisclosure();
 
   const { toast } = useToast();
   const { account } = useDojo();
@@ -66,11 +69,20 @@ export default function Travel() {
       );
       const targetMarkets = sortDrugMarkets(locationPrices.get(targetId));
 
-      return targetMarkets.map((drug, index) => ({
-        id: drug.id,
-        price: drug.price,
-        targetDiff: drug.price - currentMarkets[index].price,
-      }));
+      return targetMarkets.map((drug, index) => {
+        const diff = drug.price - currentMarkets[index].price;
+        const percentage =
+          (Math.abs(drug.price - currentMarkets[index].price) /
+            currentMarkets[index].price) *
+          100;
+
+        return {
+          id: drug.id,
+          price: drug.price,
+          diff,
+          percentage,
+        };
+      });
     }
 
     return [];
@@ -160,42 +172,64 @@ export default function Travel() {
             {getLocationById(targetId)?.name} Prices
           </Text>
         </HStack>
-        <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.targetDiff !== 0 && (
-                      <Text
-                        opacity="0.5"
-                        color={drug.targetDiff >= 0 ? "neon.200" : "red"}
-                      >
-                        ({formatCash(drug.targetDiff)})
-                      </Text>
-                    )}
-                  </HStack>
-                </GridItem>
-              );
-            })}
-          </Grid>
-        </Card>
+        <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>
+          <HStack
+            w="full"
+            justify="flex-end"
+            visibility={targetId == currentLocationId ? "hidden" : "visible"}
+          >
+            <Text
+              cursor="pointer"
+              onClick={() => {
+                onTogglePercentage();
+              }}
+              fontSize="20px"
+              userSelect="none"
+            >
+              {isPercentage ? "%" : "#"}
+            </Text>
+          </HStack>
+        </VStack>
         <Spacer minH="100px" />
         <Button
           w={["full", "250px"]}