Fixes (#163)

* update pwa config

* fix leaderboard pagination

* smaller text for mobile leaderboard

* ci: use dojo 2.2.0

* fix: cairo LS crashes

* chore: remove unecessaty imports

* fix: #159

* fix: #159

* add siren icon

* chore: better responsive on location page (2columns drugs)

* fix drug buy button position, better responsive

.github/workflows/test.yml

@@ -22,8 +22,9 @@ jobs:
           sudo apt-get install -y curl
 
       - name: Download Dojo release artifact
+        # curl -L -o dojo-linux-x86_64.tar.gz https://github.com/dojoengine/dojo/releases/download/nightly/dojo_nightly_linux_amd64.tar.gz
         run: |
-          curl -L -o dojo-linux-x86_64.tar.gz https://github.com/dojoengine/dojo/releases/download/nightly/dojo_nightly_linux_amd64.tar.gz
+          curl -L -o dojo-linux-x86_64.tar.gz https://github.com/dojoengine/dojo/releases/download/v0.2.2/dojo_v0.2.2_linux_amd64.tar.gz
           tar -xzf dojo-linux-x86_64.tar.gz
           sudo mv sozo /usr/local/bin/
 

src/components/drug.cairo

@@ -1,5 +1,3 @@
-use array::{ArrayTrait, SpanTrait};
-use traits::{Into, TryInto};
 use starknet::ContractAddress;
 
 #[derive(Component, Copy, Drop, Serde, SerdeLen)]
@@ -16,14 +14,7 @@ struct Drug {
 #[generate_trait]
 impl DrugImpl of DrugTrait {
     fn all() -> Span<felt252> {
-        let mut drugs = array::ArrayTrait::new();
-        drugs.append('Acid'.into());
-        drugs.append('Weed'.into());
-        drugs.append('Ludes'.into());
-        drugs.append('Speed'.into());
-        drugs.append('Heroin'.into());
-        drugs.append('Cocaine'.into());
-
+        let mut drugs = array!['Acid', 'Weed', 'Ludes', 'Speed', 'Heroin', 'Cocaine'];
         drugs.span()
     }
 }

src/components/game.cairo

@@ -1,5 +1,3 @@
-use box::BoxTrait;
-use traits::Into;
 use starknet::ContractAddress;
 
 #[derive(Component, Copy, Drop, Serde)]

src/components/location.cairo

@@ -1,21 +1,13 @@
-use array::{ArrayTrait, SpanTrait};
-use option::OptionTrait;
-use traits::{Into, TryInto};
 use starknet::ContractAddress;
 
 struct Location {}
 
 #[generate_trait]
 impl LocationImpl of LocationTrait {
     fn all() -> Span<felt252> {
-        let mut locations = array::ArrayTrait::new();
-        locations.append('Queens'.into());
-        locations.append('The Bronx'.into());
-        locations.append('Brooklyn'.into());
-        locations.append('Jersey City'.into());
-        locations.append('Central Park'.into());
-        locations.append('Coney Island'.into());
-
+        let mut locations = array![
+            'Queens', 'The Bronx', 'Brooklyn', 'Jersey City', 'Central Park', 'Coney Island'
+        ];
         locations.span()
     }
 

src/components/market.cairo

@@ -1,7 +1,3 @@
-use traits::{Into, TryInto};
-use option::OptionTrait;
-use debug::PrintTrait;
-
 use rollyourown::constants::SCALING_FACTOR;
 
 #[derive(Component, Copy, Drop, Serde)]

src/components/risks.cairo

@@ -1,7 +1,4 @@
-use traits::{Into, TryInto};
-use option::OptionTrait;
 use debug::PrintTrait;
-
 use rollyourown::constants::{
     SCALING_FACTOR, COPS_DRUG_THRESHOLD, GANGS_CASH_THRESHOLD, ENCOUNTER_BIAS_GANGS
 };

src/systems/create.cairo

@@ -1,10 +1,5 @@
 #[system]
 mod create_game {
-    use array::ArrayTrait;
-    use array::SpanTrait;
-    use box::BoxTrait;
-    use option::OptionTrait;
-    use traits::{Into, TryInto};
     use starknet::ContractAddress;
 
     use dojo::world::Context;

src/systems/decide.cairo

@@ -1,8 +1,5 @@
 #[system]
 mod decide {
-    use array::ArrayTrait;
-    use box::BoxTrait;
-    use traits::{Into, TryInto};
     use starknet::ContractAddress;
 
     use dojo::world::Context;
@@ -54,9 +51,10 @@ mod decide {
         cash_loss: u128
     }
 
+
     fn execute(ctx: Context, game_id: u32, action: Action, next_location_id: felt252) {
         let player_id = ctx.origin;
-        let mut player = get!(ctx.world, (game_id, player_id).into(), Player);
+        let mut player: Player = get!(ctx.world, (game_id, player_id).into(), Player);
         assert(player.status != PlayerStatus::Normal, 'player response not needed');
 
         let (mut outcome, cash_loss, drug_loss, health_loss) = match action {
@@ -78,13 +76,15 @@ mod decide {
                 match player.status {
                     PlayerStatus::Normal => (Outcome::Unsupported, 0, 0, 0),
                     PlayerStatus::BeingMugged => {
-                        let cash_loss = (player.cash * GANGS_PAYMENT.into()) / 100;
-                        (Outcome::Paid, cash_loss, 0, 0)
+                        // using same name cash_loss makes LS crash
+                        let cash_loss_ = (player.cash * GANGS_PAYMENT.into()) / 100;
+                        (Outcome::Paid, cash_loss_, 0, 0)
                     },
                     PlayerStatus::BeingArrested => {
-                        let drug_loss = take_drugs(ctx, game_id, player_id, COPS_PAYMENT);
-                        (Outcome::Paid, 0, drug_loss, 0)
-                    }
+                        // using same name drug_loss makes LS crash
+                        let drug_loss_ = take_drugs(ctx, game_id, player_id, COPS_PAYMENT);
+                        (Outcome::Paid, 0, drug_loss_, 0)
+                    },
                 }
             },
         };
@@ -110,12 +110,14 @@ mod decide {
         }
 
         set!(ctx.world, (player));
-
         emit!(ctx.world, Decision { game_id, player_id, action });
-        emit!(
-            ctx.world,
-            Consequence { game_id, player_id, outcome, health_loss, drug_loss, cash_loss }
-        );
+
+        // makes LS crash if inlined in emit! ( outcome / enum issue ?)
+        let consequence_event = Consequence {
+            game_id, player_id, outcome, health_loss, drug_loss, cash_loss
+        };
+        emit!(ctx.world, consequence_event);
+
     }
 
     fn take_drugs(
@@ -148,3 +150,4 @@ mod decide {
         total_drug_loss
     }
 }
+

src/systems/join.cairo

@@ -1,8 +1,5 @@
 #[system]
 mod join_game {
-    use traits::Into;
-    use box::BoxTrait;
-    use array::ArrayTrait;
     use starknet::ContractAddress;
 
     use dojo::world::Context;

src/systems/set_name.cairo

@@ -1,8 +1,5 @@
 #[system]
 mod set_name {
-    use array::ArrayTrait;
-    use traits::Into;
-
     use dojo::world::Context;
     use rollyourown::components::game::Game;
     use rollyourown::components::name::Name;

src/systems/trade.cairo

@@ -1,8 +1,5 @@
 #[system]
 mod buy {
-    use traits::Into;
-    use array::ArrayTrait;
-    use debug::PrintTrait;
     use starknet::ContractAddress;
 
     use dojo::world::Context;
@@ -76,8 +73,6 @@ mod buy {
 
 #[system]
 mod sell {
-    use traits::Into;
-    use array::ArrayTrait;
     use starknet::ContractAddress;
 
     use dojo::world::Context;

src/systems/travel.cairo

@@ -1,10 +1,6 @@
 #[system]
 mod travel {
-    use traits::Into;
-    use box::BoxTrait;
-    use array::ArrayTrait;
     use starknet::ContractAddress;
-    use debug::PrintTrait;
 
     use dojo::world::{Context};
 
@@ -84,6 +80,7 @@ mod travel {
 }
 
 use dojo::world::{Context, IWorld, IWorldDispatcher, IWorldDispatcherTrait};
+
 use rollyourown::components::drug::{Drug, DrugTrait};
 use rollyourown::components::location::{Location, LocationTrait};
 use rollyourown::components::market::{Market, MarketTrait};

web/next.config.js

@@ -14,5 +14,6 @@ module.exports = withPWA({
   dest: "public",
   register: true,
   skipWaiting: true,
-  // disable: process.env.NODE_ENV === 'development'
+  disableDevLogs: true,
+  disable: process.env.NODE_ENV === 'development'
 })(nextConfig);

web/src/components/Header.tsx

@@ -1,4 +1,4 @@
-import { Clock, Gem, Bag, Arrow, Heart } from "./icons";
+import { Clock, Gem, Bag, Arrow, Heart, Siren } from "./icons";
 import { Button, Divider, Flex, HStack, Text } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { IsMobile, generatePixelBorderPath } from "@/utils/ui";
@@ -92,6 +92,14 @@ const Header = ({ back }: HeaderProps) => {
                 <HStack>
                   <Heart /> <Text>{playerEntity.health}</Text>
                 </HStack>
+                {/* <Divider
+                  orientation="vertical"
+                  borderColor="neon.600"
+                  h="12px"
+                />
+                  <HStack color="red" >
+                  <Siren /> <Text>69%</Text>
+                </HStack> */}
               </HStack>
             </Flex>
           </HStack>

web/src/components/Leaderboard.tsx

@@ -54,16 +54,14 @@ const Leaderboard = ({
 
   useEffect(() => {
     setHasNextPage(visibleScores < scores.length);
+    if (!listRef.current) return;
+    const lastEl = listRef.current["lastElementChild"];
+    lastEl && lastEl.scrollIntoView({ behavior: "smooth" });
   }, [scores, visibleScores]);
 
   const fetchNextPage = useCallback(() => {
     setVisibleScores(visibleScores + pageSize);
-    setTimeout(() => {
-      if (!listRef.current) return;
-      const lastEl = listRef.current["lastElementChild"];
-      lastEl && lastEl.scrollIntoView({ behavior: "smooth" });
-    }, 150);
-  }, [listRef.current]);
+  }, [listRef.current, visibleScores]);
 
   const onSubmitName = useCallback(async () => {
     if (!name) return;
@@ -122,7 +120,8 @@ const Leaderboard = ({
                 >
                   <HStack mr={3}>
                     <Text
-                      w="30px"
+                      w={["10px","30px"]}
+                      fontSize={["10px", "16px"]}
                       flexShrink={0}
                       // display={["none", "block"]}
                       whiteSpace="nowrap"
@@ -147,6 +146,7 @@ const Leaderboard = ({
                         maxWidth={["150px", "350px"]}
                         whiteSpace="nowrap"
                         overflow="hidden"
+                        fontSize={["12px", "16px"]}
                       >
                         {displayName}
                       </Text>
@@ -158,10 +158,13 @@ const Leaderboard = ({
                       backgroundRepeat="repeat-x"
                       flexGrow={1}
                       color="transparent"
+
                     >
                       {"."}
                     </Text>
-                    <Text flexShrink={0}>{formatCash(score.cash)}</Text>
+                    <Text flexShrink={0}
+                      fontSize={["12px", "16px"]}
+                    >{formatCash(score.cash)}</Text>
                   </HStack>
                 </ListItem>
               );

web/src/components/icons/Siren.tsx

@@ -0,0 +1,17 @@
+import { Icon, IconProps } from ".";
+
+export const Siren = (props: IconProps) => {
+  return (
+    <Icon viewBox="0 0 21 20" {...props}>
+      <>
+        <path d="M14.2069 4.8125H12.7123V6.30666H14.2069V4.8125Z" />
+        <path d="M17.1666 6.29187H15.6719V7.78603H17.1666V6.29187Z" />
+        <path fillRule="evenodd" clipRule="evenodd" d="M14.2069 7.77124V13.6887H15.6867V15.1829H5.31309V13.6887H6.79293V7.77124H14.2069ZM8.28756 9.2654H9.7526V13.6887H8.28756V9.2654Z" />
+        <path d="M15.6719 9.2506H17.1666V10.7448H15.6719V9.2506Z" />
+        <path d="M6.79293 4.8125H8.28756V6.30666H6.79293V4.8125Z" />
+        <path d="M5.32789 6.29187H3.83325V7.78603H5.32789V6.29187Z" />
+        <path d="M3.83325 9.2506H5.32789V10.7448H3.83325V9.2506Z" />
+      </>
+    </Icon>
+  );
+};

web/src/components/icons/index.tsx

@@ -46,6 +46,7 @@ export * from "./Close";
 export * from "./ExternalLink";
 export * from "./Heart";
 export * from "./Skull";
+export * from "./Siren";
 
 // Template for adding new icons. When copying svg from figma, viewBox is assumed
 // to be 36x36, otherwise override within individual icons.

web/src/pages/[gameId]/[locationSlug]/[drugSlug]/[tradeDirection].tsx

@@ -171,7 +171,7 @@ export default function Market() {
           <AlertMessage message={`You have no ${drug.name} to sell`} />
         )}
 
-        <Footer alignItems={["flex-end", "flex-start"]}>
+        <Footer alignItems={["flex-end", "flex-start"]}  height={["100%", "auto"]}>
           {tradeDirection == TradeDirection.Buy && canBuy && (
             <Button
               w={["full", "auto"]}
@@ -297,7 +297,7 @@ const QuantitySelector = ({
         </HStack>
       </Flex>
 
-      <HStack w="100%" py={2} gap="10px">
+      <HStack w="100%" py={2} >
         <Box />
         <Slider
           aria-label="slider-quantity"
@@ -316,7 +316,7 @@ const QuantitySelector = ({
         <HStack spacing="0">
           <ArrowEnclosed
             direction="down"
-            boxSize="48px"
+            boxSize={["36px","48px"]}
             cursor="pointer"
             onClick={onDown}
             color="neon.500"
@@ -326,7 +326,7 @@ const QuantitySelector = ({
           />
           <ArrowEnclosed
             direction="up"
-            boxSize="48px"
+            boxSize={["36px","48px"]}
             cursor="pointer"
             onClick={onUp}
             color="neon.500"
@@ -339,7 +339,8 @@ const QuantitySelector = ({
           h="36px"
           w="100px"
           variant="pixelated"
-          display={["none", "block"]}
+          marginInlineStart={0}
+          // display={["none", "block"]}
           onClick={() => setQuantity(max)}
         >
           Max