ui fixes

cartridge-gg · Apr 13, 2024 · 1bb2048 · 1bb2048
1 parent aa2168b
commit 1bb2048
Show file tree

Hide file tree

Showing 20 changed files with 200 additions and 58 deletions.
diff --git a/src/config/encounters.cairo b/src/config/encounters.cairo
@@ -116,7 +116,7 @@ impl EncounterSpawnerImpl of EncounterSpawnerTrait {
 
             let encounter = get!(world, (id), (EncounterConfig));
 
-            if rep >= encounter.min_rep && rep < encounter.max_rep {
+            if rep >= encounter.min_rep && rep <= encounter.max_rep {
                 encounters_ids.append(encounter.id);
             };
 
@@ -142,7 +142,7 @@ impl EncounterSpawnerImpl of EncounterSpawnerTrait {
         encounter.demand_pct = EncounterSpawnerImpl::get_random_demand_pct(ref game_store);
 
         // set scaling payout
-        encounter.payout = (encounter.level.into() * encounter.level.into() * 4_000) + (game_store.player.turn.into() * 1_000);
+        encounter.payout = (encounter.level.into() * encounter.level.into() * 3_000) + (game_store.player.turn.into() * 1_000);
 
         encounter
     }

diff --git a/src/packing/player.cairo b/src/packing/player.cairo
@@ -202,7 +202,7 @@ impl PlayerImpl of PlayerTrait {
         // level down
         if self.drug_level > drug_level {
             // check if not carrying drug to be disabled
-            if drugs.quantity > 0 && drugs.drug.into() > drug_level + 4 {
+            if drugs.quantity > 0 && drugs.drug.into() >= drug_level + 4 {
                 return;
             }
         }

diff --git a/src/systems/traveling.cairo b/src/systems/traveling.cairo
@@ -112,7 +112,7 @@ fn on_travel(ref game_store: GameStore, ref randomizer: Random) -> (bool, bool)
                 encounter_id: encounter.id,
                 demand_pct: encounter.demand_pct,
                 payout: encounter.payout,
-                }
+            }
         )));
 
         (game_store.player.is_dead(), true)
@@ -444,11 +444,11 @@ impl ResolutionImpl of ResolutionTrait {
     }
 
     fn encounter_attack(ref game_store: GameStore, ref encounter: EncounterConfig, ref randomizer: Random) -> AttackResult {
-        let encounter_attack = encounter.attack;
+        let encounter_attack = encounter.attack / 3;
         let hustler_defense = game_store.items.defense();
 
         let dmg_shield = encounter_attack.pct(hustler_defense.into());
-        let dmg_dealt = (encounter_attack - dmg_shield) / 3; // TODO: config ***
+        let dmg_dealt = encounter_attack - dmg_shield; // TODO: config ***
 
         // player lose HP
         game_store.player.health_loss(dmg_dealt);
@@ -462,11 +462,11 @@ impl ResolutionImpl of ResolutionTrait {
     }
 
     fn encounter_race_win(ref game_store: GameStore, ref encounter: EncounterConfig, ref randomizer: Random, ref drug_unpacked: DrugsUnpacked) -> EncounterRaceWinResult {
-        let encounter_attack = encounter.attack;
+        let encounter_attack = encounter.attack / 5;
         let hustler_defense = game_store.items.defense();
 
         let dmg_shield = encounter_attack.pct(hustler_defense.into());
-        let dmg_dealt = (encounter_attack - dmg_shield) / 5; // TODO: config ***
+        let dmg_dealt = encounter_attack - dmg_shield; // TODO: config ***
 
         // player lose HP
         game_store.player.health_loss(dmg_dealt);

diff --git a/web/src/components/icons/items/Reputation.tsx b/web/src/components/icons/items/Reputation.tsx
@@ -0,0 +1,12 @@
+import { Icon, IconProps } from "..";
+
+export const Reputation = (props: IconProps) => {
+  return (
+    <Icon viewBox="0 0 24 24" {...props}>
+      <path
+        d="M11 3V4H10V6H9V8H8V9H3V10H2V11H3V12H4V13H5V14H6V16H5V19H4V22H7V21H9V20H11V19H13V20H15V21H17V22H20V19H19V16H18V14H19V13H20V12H21V11H22V10H21V9H16V8H15V6H14V4H13V3H11Z"
+        fill="currentColor"
+      />
+    </Icon>
+  );
+};
diff --git a/web/src/components/icons/items/Shoes2.tsx b/web/src/components/icons/items/Shoes2.tsx
@@ -0,0 +1,14 @@
+import { Icon, IconProps } from "..";
+
+export const Shoes2 = (props: IconProps) => {
+  return (
+    <Icon viewBox="0 0 24 24" {...props}>
+      <>
+        <path
+          d="M14.3684 5H19.1053V5.94737H15.3158V6.89474H19.1053V5.94737H20.0526V6.89474H21V14.4737H20.0526V15.4211H19.1053V16.3684H14.3684V17.3158H12.4737V18.2632H4.89474V17.3158H3.94737V16.3684H3V12.5789H3.94737V11.6316H6.78947V12.5789H7.73684V13.5263H8.68421V16.3684H9.63158V13.5263H8.68421V12.5789H7.73684V11.6316H6.78947V10.6842H8.68421V9.73684H11.5263V8.78947H12.4737V9.73684H13.4211V10.6842H14.3684V11.6316H16.2632V10.6842H14.3684V9.73684H13.4211V8.78947H12.4737V6.89474H13.4211V5.94737H14.3684V5Z"
+          fill="currentColor"
+        />
+      </>
+    </Icon>
+  );
+};
diff --git a/web/src/components/layout/MobileMenu.tsx b/web/src/components/layout/MobileMenu.tsx
@@ -1,5 +1,4 @@
 import { useDojoContext, useRouterContext } from "@/dojo/hooks";
-import { Sounds, playSound } from "@/hooks/sound";
 import { Menu, MenuItem, Popover, PopoverBody, PopoverContent, PopoverTrigger, StyleProps } from "@chakra-ui/react";
 import { Cigarette, Dots, Home } from "../icons";
 import { ProfileLinkMobile } from "../pages/profile/Profile";
@@ -40,8 +39,7 @@ export const MobileMenu = ({ ...props }: StyleProps) => {
                   <MenuItem
                     h="48px"
                     onClick={() => {
-                      playSound(Sounds.Ooo);
-                      //uiStore.openQuitGame();
+                        uiStore.openRefreshGame();
                     }}
                   >
                     <Cigarette mr={2} /> IM LOST

diff --git a/web/src/components/layout/RefreshGameModal.tsx b/web/src/components/layout/RefreshGameModal.tsx
@@ -0,0 +1,46 @@
+import { useDojoContext, useRouterContext } from "@/dojo/hooks";
+import {
+  Button,
+  HStack,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  VStack
+} from "@chakra-ui/react";
+import { observer } from "mobx-react-lite";
+
+export const RefreshGameModal = observer(() => {
+  const { router, gameId } = useRouterContext();
+  const { uiStore } = useDojoContext();
+
+  return (
+    <Modal motionPreset="slideInBottom" isCentered isOpen={uiStore.modals.refreshGame !== undefined} onClose={() => {}}>
+      <ModalOverlay />
+      <ModalContent bg="bg.dark" maxW="360px">
+        <ModalHeader textAlign="center">Im lost</ModalHeader>
+        <ModalBody p={6}>
+          <VStack w="full" gap={6}>
+            <HStack w="full" justifyContent="center">
+              <Button
+                onClick={() => {
+                  uiStore.closeRefreshGame();
+
+                  if (gameId) {
+                    router.push(`/${gameId}`);
+                  } else {
+                    router.push("/");
+                  }
+                }}
+              >
+                REFRESH PLZ
+              </Button>
+              <Button onClick={() => uiStore.closeRefreshGame()}>CANCEL</Button>
+            </HStack>
+          </VStack>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+});
diff --git a/web/src/components/map/WantedMarkers.tsx b/web/src/components/map/WantedMarkers.tsx
@@ -1,5 +1,6 @@
 import { useConfigStore, useGameStore } from "@/dojo/hooks";
 import { Locations } from "@/dojo/types";
+import { IsMobile } from "@/utils/ui";
 import { Box } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { Alert } from "../icons";
@@ -8,9 +9,12 @@ import { coordinatePercent } from "./Map";
 export const WantedMarkers = ({ targetId, current }: { targetId?: Locations; current?: Locations }) => {
   const { game } = useGameStore();
   const configStore = useConfigStore();
+  const { config } = configStore;
 
   const [wanted, setWanted] = useState<Map<number, number>>();
-  const minWanted = 69;
+  const minWanted = (config?.config.game_config.max_wanted_shopping * 100n) / 8n;
+
+  const isMobile = IsMobile();
 
   useEffect(() => {
     const locations = configStore.config?.location!;
@@ -33,6 +37,8 @@ export const WantedMarkers = ({ targetId, current }: { targetId?: Locations; cur
           position="absolute"
           left={`${coordinatePercent[Locations.Queens].x - 2}%`}
           top={`${coordinatePercent[Locations.Queens].y - 1}%`}
+          width={isMobile ? "20px" : "24px"}
+          height={isMobile ? "20px" : "24px"}
         />
       )}
       {/* Jersey */}
@@ -41,6 +47,8 @@ export const WantedMarkers = ({ targetId, current }: { targetId?: Locations; cur
           position="absolute"
           left={`${coordinatePercent[Locations.Jersey].x - 2}%`}
           top={`${coordinatePercent[Locations.Jersey].y - 1}%`}
+          width={isMobile ? "20px" : "24px"}
+          height={isMobile ? "20px" : "24px"}
         />
       )}
       {/* Bronx */}
@@ -49,6 +57,8 @@ export const WantedMarkers = ({ targetId, current }: { targetId?: Locations; cur
           position="absolute"
           left={`${coordinatePercent[Locations.Bronx].x - 2}%`}
           top={`${coordinatePercent[Locations.Bronx].y - 1}%`}
+          width={isMobile ? "20px" : "24px"}
+          height={isMobile ? "20px" : "24px"}
         />
       )}
       {/* Central */}
@@ -57,6 +67,8 @@ export const WantedMarkers = ({ targetId, current }: { targetId?: Locations; cur
           position="absolute"
           left={`${coordinatePercent[Locations.Central].x - 2}%`}
           top={`${coordinatePercent[Locations.Central].y - 1}%`}
+          width={isMobile ? "20px" : "24px"}
+          height={isMobile ? "20px" : "24px"}
         />
       )}
       {/* Coney */}
@@ -65,6 +77,8 @@ export const WantedMarkers = ({ targetId, current }: { targetId?: Locations; cur
           position="absolute"
           left={`${coordinatePercent[Locations.Coney].x - 2}%`}
           top={`${coordinatePercent[Locations.Coney].y - 1}%`}
+          width={isMobile ? "20px" : "24px"}
+          height={isMobile ? "20px" : "24px"}
         />
       )}
       {/* Brooklyn */}
@@ -73,6 +87,8 @@ export const WantedMarkers = ({ targetId, current }: { targetId?: Locations; cur
           position="absolute"
           left={`${coordinatePercent[Locations.Brooklyn].x - 2}%`}
           top={`${coordinatePercent[Locations.Brooklyn].y - 1}%`}
+          width={isMobile ? "20px" : "24px"}
+          height={isMobile ? "20px" : "24px"}
         />
       )}
     </Box>

diff --git a/web/src/components/pages/profile/HustlerProfile.tsx b/web/src/components/pages/profile/HustlerProfile.tsx
@@ -9,7 +9,7 @@ import { useEffect, useState } from "react";
 import ShareButton from "./ShareButton";
 
 export const HustlerProfile = observer(() => {
-  const { gameId} = useRouterContext()
+  const { gameId } = useRouterContext();
   const { game, gameInfos } = useGameStore();
   const configStore = useConfigStore();
   const [hustlerStats, setHustlerStats] = useState<any>();
@@ -90,7 +90,11 @@ export const HustlerProfile = observer(() => {
         </VStack>
       </HStack>
 
-      <HStack w="100%" maxW={["260px","360px"]}>
+      {/* <Card>
+        <HustlerStats />
+      </Card> */}
+
+      <HStack w="100%" maxW={["260px", "360px"]}>
         <Button
           variant="pixelated"
           w="full"

diff --git a/web/src/components/pages/profile/HustlerStats.tsx b/web/src/components/pages/profile/HustlerStats.tsx
@@ -0,0 +1,27 @@
+import { HealthIndicator } from "@/components/player";
+import { useGameStore } from "@/dojo/hooks";
+import { Divider, HStack, Text } from "@chakra-ui/react";
+import { observer } from "mobx-react-lite";
+
+export const HustlerStats = observer(() => {
+  const { game } = useGameStore();
+
+  if(!game) return null
+  return (
+    <HStack flexDirection="row" w="full" px="10px" py="6px" justifyContent="center">
+      <Text display="flex" flex="1">
+        {game?.items.attack.icon({})} {game?.items.attack.tier.stat}
+      </Text>
+      <Divider h="26px" orientation="vertical" borderWidth="1px" borderColor="neon.600" />
+      <Text display="flex" flex="1">
+        {game?.items.defense.icon({})} {game?.items.defense.tier.stat}
+      </Text>
+      <Divider h="26px" orientation="vertical" borderWidth="1px" borderColor="neon.600" />
+      <Text display="flex" flex="1">
+        {game?.items.speed.icon({})} {game?.items.speed.tier.stat}
+      </Text>
+      <Divider h="26px" orientation="vertical" borderWidth="1px" borderColor="neon.600" />
+      <HealthIndicator health={game?.player.health} maxHealth={100} flex="1" />
+    </HStack>
+  );
+});
diff --git a/web/src/components/pages/profile/Loadout.tsx b/web/src/components/pages/profile/Loadout.tsx
@@ -12,15 +12,15 @@ export const Loadout = () => {
 
   return (
     <VStack w="full" gap={6}>
-      <Item item={game.items.attack} />
-      <Item item={game.items.defense} />
-      <Item item={game.items.speed} />
-      <Item item={game.items.transport} />
+      <Item item={game.items.attack} stat={game?.items.attack.tier.stat} />
+      <Item item={game.items.defense} stat={game?.items.defense.tier.stat} />
+      <Item item={game.items.speed} stat={game?.items.speed.tier.stat} />
+      <Item item={game.items.transport} stat={game?.items.transport.tier.stat} />
     </VStack>
   );
 };
 
-const Item = observer(({ item }: { item: HustlerItemConfigFull }) => {
+const Item = observer(({ item, stat }: { item: HustlerItemConfigFull; stat: number }) => {
   /// @ts-ignore
   const upgrades = itemUpgrades[item.slot][Number(item.base.id)];
   const isMobile = IsMobile();
@@ -41,7 +41,7 @@ const Item = observer(({ item }: { item: HustlerItemConfigFull }) => {
       <Flex w="50%" flexDirection={["column", "row"]} gap={[2, 9]}>
         {item.icon && item.icon({ boxSize: isMobile ? "36px" : "48px" })}
 
-        <VStack alignItems="flex-start" gap={0}>
+        <VStack alignItems="flex-start" gap={1}>
           <HStack
             w={["120px", "160px"]}
             fontSize="12px"
@@ -51,9 +51,11 @@ const Item = observer(({ item }: { item: HustlerItemConfigFull }) => {
             gap={0}
           >
             <Text>{slotName[item.slot as slotNameKeys]}</Text>
-            {!isMobile && <Text>{statName[item.slot as statNameKeys]}</Text>}
           </HStack>
           <Text>{item.base.name}</Text>
+          <Text color="neon.500" fontFamily="broken-console" fontSize="11px">
+            {stat} {statName[item.slot as statNameKeys]}
+          </Text>
         </VStack>
       </Flex>
 

diff --git a/web/src/components/player/Inventory.tsx b/web/src/components/player/Inventory.tsx
@@ -4,12 +4,13 @@ import { HustlerItemConfigFull } from "@/dojo/stores/config";
 import { Card, Divider, HStack, Progress, StyleProps, Text, VStack, keyframes } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 import { Tooltip } from "../common";
-import { Alert, Cigarette, PawnshopIcon } from "../icons";
+import { Alert, PawnshopIcon } from "../icons";
 
 import { Sounds, playSound } from "@/hooks/sound";
 import colors from "@/theme/colors";
 import { useAccount } from "@starknet-react/core";
 import { WeightIcon } from "../icons/Weigth";
+import { Reputation } from "../icons/items/Reputation";
 import { PowerMeter } from "./PowerMeter";
 
 const blinkAnim = keyframes`  
@@ -31,7 +32,7 @@ export const Inventory = observer(({ hidePawnshop = false, ...props }: StyleProp
       <HStack w="full" justifyContent="space-between">
         <VStack w="full" alignItems="flex-start" gap={[0, 1]}>
           <HStack color="neon.500" justify="center" alignItems="center">
-            <Cigarette />
+            <Reputation />
             <Text textStyle="subheading" fontSize={["9px", "11px"]} lineHeight={1}>
               REPUTATION
             </Text>
@@ -93,7 +94,7 @@ export const Inventory = observer(({ hidePawnshop = false, ...props }: StyleProp
       </HStack>
 
       {!hidePawnshop && (
-        <VStack w="full" alignItems="flex-start">
+        <VStack w="full" alignItems="flex-start" gap={[0, 1]}>
           <Text textStyle="subheading" fontSize={["9px", "11px"]} color="neon.500" h="24px" lineHeight="24px">
             PAWNSHOP
           </Text>

diff --git a/web/src/components/player/WantedIndicator.tsx b/web/src/components/player/WantedIndicator.tsx
@@ -1,4 +1,4 @@
-import { HStack, StyleProps, Text } from "@chakra-ui/react";
+import { Box, HStack, StyleProps, Text } from "@chakra-ui/react";
 import { Alert, Siren } from "../icons";
 
 import { Tooltip } from "../common";
@@ -30,8 +30,14 @@ export const WantedIndicator = ({
         animation={threatLevel === ThreatLevels.High ? `${blinkAnim} infinite 0.5s linear` : "none"}
         {...props}
       >
-        {threatLevel === ThreatLevels.High ? <Alert boxSize={21} /> : <Siren />}{" "}
-        <Text fontSize="11px" textStyle="subheading">
+        {threatLevel === ThreatLevels.High ? (
+          <Box boxSize="24px">
+            <Alert width="20px" height="20px" />
+          </Box>
+        ) : (
+          <Siren />
+        )}{" "}
+        <Text fontSize="11px" textStyle="subheading" lineHeight={1}>
           {threatLevel}
         </Text>
       </HStack>

diff --git a/web/src/dojo/helpers.ts b/web/src/dojo/helpers.ts
@@ -39,6 +39,7 @@ import {
   Shoes
 } from "@/components/icons/items";
 import { Chain } from "@/components/icons/items/Chain";
+import { Shoes2 } from "@/components/icons/items/Shoes2";
 
 
 
@@ -182,7 +183,7 @@ export const itemIcons = {
   "Trench Coat": Leatherjacket,
   //
   "All-Black Sneakers": Shoes,
-  "Athletic Trainers": Shoes,
+  "Athletic Trainers": Shoes2,
   "Work Boots": Boots,
   //
   "Plastic bag": PlasticBag,