diff --git a/web/src/pages/[gameId]/travel.tsx b/web/src/pages/[gameId]/travel.tsx index 550860e61..b59f78922 100644 --- a/web/src/pages/[gameId]/travel.tsx +++ b/web/src/pages/[gameId]/travel.tsx @@ -16,7 +16,7 @@ import { } from "@chakra-ui/react"; import { useRouter } from "next/router"; import React, { useCallback, useEffect, useMemo, useState } from "react"; -import { generatePixelBorderPath } from "@/utils/ui"; +import { formatCash, generatePixelBorderPath } from "@/utils/ui"; import { Map } from "@/components/map"; import { motion } from "framer-motion"; import { useSystems } from "@/dojo/systems/useSystems"; @@ -59,6 +59,24 @@ export default function Travel() { } }, [playerEntity, isSubmitting]); + const targetMarkets = useMemo(() => { + if (locationPrices) { + const currentMarkets = sortDrugMarkets( + locationPrices.get(currentLocationId), + ); + const targetMarkets = sortDrugMarkets(locationPrices.get(targetId)); + return targetMarkets.map((drug, index) => { + return { + id: drug.id, + price: drug.price, + targetDiff: drug.price - currentMarkets[index].price, + }; + }); + } + + return []; + }, [locationPrices, targetId, currentLocationId]); + useEventListener("keydown", (e) => { switch (e.key) { case "ArrowRight": @@ -118,7 +136,7 @@ export default function Travel() { prefixTitle: "Select Your", map: ( { setTargetId(getLocationByType(selected)!.id); }} @@ -128,7 +146,7 @@ export default function Travel() { showMap={true} showBack={true} > - + {/* {locations.map((location, index) => ( ))} */} + + + {getLocationById(targetId)?.name} Prices + + - {sortDrugMarkets(locationPrices.get(targetId)).map( - (market, index) => { - return ( - - {getDrugById(market.id)?.icon({ + {targetMarkets.map((drug, index) => { + return ( + + + {getDrugById(drug.id)?.icon({ boxSize: "24px", - marginRight: "10px", })} - ${market.price.toFixed(0)} - - ); - }, - )} + ${drug.price.toFixed(0)} + {drug.targetDiff !== 0 && ( + = 0 ? "neon.200" : "red"} + > + ({formatCash(drug.targetDiff)}) + + )} + + + ); + })}