fix stats

cartridge-gg · Jun 4, 2024 · 092a9a7 · 092a9a7
1 parent 6bbab21
commit 092a9a7
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 51 deletions.
diff --git a/web/src/components/icons/items/Uzi.tsx b/web/src/components/icons/items/Uzi.tsx
@@ -3,7 +3,7 @@ import { Icon, IconProps } from "..";
 export const Uzi = (props: IconProps) => {
   return (
     <Icon viewBox="0 0 56 56" {...props}>
-      <path fill-rule="evenodd" clipRule="evenodd" d="M38.6454 14.6621H41.3368V17.3269H44.0016V19.9916H46.6663V22.6831H38.6721V25.3478H28.013V30.6774H22.6835V41.3364H14.6625V25.3478H11.9978V22.6831H9.33301V17.3269H33.3159V14.6621H36.0073V17.3269H38.6454V14.6621ZM25.3216 25.3478H20.0187V27.9859H25.3216V25.3478Z"  fill="currentColor" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M38.6454 14.6621H41.3368V17.3269H44.0016V19.9916H46.6663V22.6831H38.6721V25.3478H28.013V30.6774H22.6835V41.3364H14.6625V25.3478H11.9978V22.6831H9.33301V17.3269H33.3159V14.6621H36.0073V17.3269H38.6454V14.6621ZM25.3216 25.3478H20.0187V27.9859H25.3216V25.3478Z"  fill="currentColor" />
     </Icon>
   );
 };
diff --git a/web/src/components/layout/DrawerMenu.tsx b/web/src/components/layout/DrawerMenu.tsx
@@ -147,7 +147,7 @@ const DrawerMenu = () => {
                   {account && (
                     <DrawerListItem
                       onClick={() => {
-                        router.push("/game/history");
+                        router.push(`/game/history/${account.address}`);
                       }}
                     >
                       <Clock mr={2} /> HISTORY

diff --git a/web/src/dojo/hooks/useGamesByPlayer.tsx b/web/src/dojo/hooks/useGamesByPlayer.tsx
@@ -17,7 +17,7 @@ import {
   useTravelEncounterByPlayerQuery,
   useTravelEncounterResultsByPlayerQuery,
 } from "@/generated/graphql";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { GameClass } from "../class/Game";
 import { useDojoContext } from "./useDojoContext";
 import { Hustler, Hustlers } from "@/components/hustlers";
@@ -67,30 +67,35 @@ export interface GamesByPlayerInterface {
   playerStats?: PlayerStats;
 }
 
-// TODO : change to get games by player by Season
 export const useGamesByPlayer = (playerId: string): GamesByPlayerInterface => {
   const { data, isFetched } = useGamesByPlayerQuery({
     playerId,
   });
+  const { configStore } = useDojoContext();
 
   const { data: allSeasonSettings } = useAllSeasonSettingsQuery({});
   const { data: allGameConfig } = useAllGameConfigQuery({});
 
-  const { data: allTravelEncounters } = useTravelEncounterByPlayerQuery({
+  const { data: allTravelEncounters, refetch: refetchTravelEncounters } = useTravelEncounterByPlayerQuery({
     travelEncounterSelector: WorldEvents.TravelEncounter,
     playerId,
   });
-  const { data: allTravelEncounterResults } = useTravelEncounterResultsByPlayerQuery({
+
+  const { data: allTravelEncounterResults, refetch: refetchTravelEncounterResults } = useTravelEncounterResultsByPlayerQuery({
     travelEncounterResultSelector: WorldEvents.TravelEncounterResult,
     playerId,
   });
 
-  const { data: allTradedDrugByPlayer } = useTradedDrugByPlayerQuery({
+  const { data: allTradedDrugByPlayer, refetch: refetchTradedDrugs } = useTradedDrugByPlayerQuery({
     tradeDrugSelector: WorldEvents.TradeDrug,
     playerId,
   });
 
-  const { configStore } = useDojoContext();
+  // useEffect(() => {
+  //   refetchTravelEncounters()
+  //   refetchTravelEncounterResults()
+  //   refetchTradedDrugs()
+  // }, [playerId])
 
   const games = useMemo(() => {
     if (!data || !allGameConfig || !allSeasonSettings) return [];
@@ -198,7 +203,8 @@ export const useGamesByPlayer = (playerId: string): GamesByPlayerInterface => {
     };
 
     return stats;
-  }, [games, allTravelEncounters, allTravelEncounterResults]);
+  }, [games, allTravelEncounters, allTravelEncounterResults, allTradedDrugByPlayer]);
+
 
   return {
     games: games || [],

diff --git a/web/src/pages/404.tsx b/web/src/pages/404.tsx
@@ -1,3 +1,25 @@
+import { Layout, OG } from "@/components/layout";
+import { useRouterContext } from "@/dojo/hooks";
+import { Sounds, playSound } from "@/hooks/sound";
+import { Box, Flex, Text } from "@chakra-ui/react";
+
 export default function Custom404() {
-  return <h1>404 - Page Not Found</h1>;
+  const { router } = useRouterContext()
+  return (
+    <Layout isSinglePanel={true}>
+      <Flex boxSize="full" alignItems="center" justifyContent="center" flexDirection="column">
+
+        <Box w="300px" h="300px" cursor="crosshair" onClick={()=> {
+          playSound(Sounds.Magnum357)
+          setTimeout(() => {
+            playSound(Sounds.Ooo, 0.5)
+          }, 420)
+          router.push("/")
+        }}>
+          <OG id={Math.floor(Math.random()* 500)} />
+        </Box>
+        <Text>Are you lost hustler ?</Text>
+      </Flex>
+    </Layout>
+  );
 }
diff --git a/web/src/pages/[gameId]/index.tsx b/web/src/pages/[gameId]/index.tsx
@@ -10,7 +10,6 @@ const Redirector = observer(() => {
   const { router, gameId } = useRouterContext();
 
   const { account } = useAccount();
-
   const { game } = useGameStore();
 
   useEffect(() => {
@@ -19,14 +18,13 @@ const Redirector = observer(() => {
     if (!game) {
       handle = setTimeout(() => {
         router.push(`/`);
-      }, 2000);
+      }, 2500);
     } else {
       clearTimeout(handle);
 
-      if( game.gameInfos.game_over) {
+      if (game.gameInfos.game_over) {
         router.push(`/${gameId}/end`);
-      } else
-      if (game.player.status === PlayerStatus.Normal) {
+      } else if (game.player.status === PlayerStatus.Normal) {
         if (game.player.location) {
           router.push(`/${gameId}/${game.player.location.location}`);
         } else {

diff --git a/web/src/pages/[gameId]/logs.tsx b/web/src/pages/[gameId]/logs.tsx
@@ -193,7 +193,7 @@ export default observer(Logs);
 
 const CustomLeftPanel = () => {
   const { game, gameInfos } = useGameStore();
-
+  const { router } = useRouterContext();
   return (
     <VStack
       flex={1}
@@ -207,7 +207,15 @@ const CustomLeftPanel = () => {
       {/* <Text textStyle="subheading" textAlign="center" fontSize={["9px", "11px"]}>
         {game ? reputationRanks[game.player.drugLevel as reputationRanksKeys] : ""}
       </Text> */}
-      <Heading fontSize={["30px", "48px"]} fontWeight="400" mb={["0px", "20px"]}>
+      <Heading
+        fontSize={["30px", "48px"]}
+        fontWeight="400"
+        mb={["0px", "20px"]}
+        cursor="pointer"
+        onClick={() => {
+          router.push(`/game/history/${gameInfos?.player_id}`);
+        }}
+      >
         {shortString.decodeShortString(gameInfos?.player_name?.value || "")}
       </Heading>
 

diff --git a/web/src/pages/game/history.tsx → web/src/pages/game/history/[playerId].tsx b/web/src/pages/game/history.tsx → web/src/pages/game/history/[playerId].tsx
@@ -20,6 +20,7 @@ import { GameClass } from "@/dojo/class/Game";
 import { useDojoContext, useRouterContext } from "@/dojo/hooks";
 import { PlayerStats, useGamesByPlayer } from "@/dojo/hooks/useGamesByPlayer";
 import { Drugs } from "@/dojo/types";
+import { useToast } from "@/hooks/toast";
 import colors from "@/theme/colors";
 
 import { formatCashHeader } from "@/utils/ui";
@@ -53,11 +54,11 @@ import { useAccount } from "@starknet-react/core";
 import { shortString } from "starknet";
 
 export default function History() {
-  const { router } = useRouterContext();
-  const { account } = useAccount();
+  const { router, playerId } = useRouterContext();
+
   const { uiStore } = useDojoContext();
 
-  const { games, onGoingGames, endedGames, playerStats } = useGamesByPlayer(account?.address || "0x0");
+  const { games, onGoingGames, endedGames, playerStats } = useGamesByPlayer(playerId || "0x0");
 
   return (
     <Layout
@@ -71,28 +72,37 @@ export default function History() {
       // rigthPanelScrollable={false}
       footer={<Button onClick={() => router.push("/")}>HOME</Button>}
     >
-      <VStack w="full" h={["100%", "calc(100% - 100px)"]}>
-        <Flex w="full" direction={["column", "row"]} gap={[0, "80px"]} h={["auto", "100%"]}>
-          <CustomLeftPanel playerStats={playerStats} />
-          <VStack boxSize="full" gap="10px" flex={1}>
-            <Tabs variant="unstyled" w="full">
-              <TabList pb={6}>
-                <Tab>ON GOING</Tab>
-                <Tab>ENDED</Tab>
-              </TabList>
-
-              <TabPanels mt={0} maxH={["100%", "calc(100vh - 380px)"]} overflowY="scroll">
-                <TabPanel p={0}>
-                  <GameList games={onGoingGames} />
-                </TabPanel>
-                <TabPanel p={0}>
-                  <GameList games={endedGames} />
-                </TabPanel>
-              </TabPanels>
-            </Tabs>
-          </VStack>
+
+      {games.length === 0 && (
+        <Flex boxSize="full" alignItems="center" justifyContent="center">
+          <Text>No game played yet!</Text>
         </Flex>
-      </VStack>
+      )}
+
+      {games.length > 0 && (
+        <VStack w="full" h={["100%", "calc(100% - 100px)"]}>
+          <Flex w="full" direction={["column", "row"]} gap={[0, "80px"]} h={["auto", "100%"]}>
+            <CustomLeftPanel playerStats={playerStats} playerId={playerId} />
+            <VStack boxSize="full" gap="10px" flex={1}>
+              <Tabs variant="unstyled" w="full">
+                <TabList pb={6}>
+                  <Tab>ON GOING</Tab>
+                  <Tab>ENDED</Tab>
+                </TabList>
+
+                <TabPanels mt={0} maxH={["100%", "calc(100vh - 380px)"]} overflowY="scroll">
+                  <TabPanel p={0}>
+                    <GameList games={onGoingGames} />
+                  </TabPanel>
+                  <TabPanel p={0}>
+                    <GameList games={endedGames} />
+                  </TabPanel>
+                </TabPanels>
+              </Tabs>
+            </VStack>
+          </Flex>
+        </VStack>
+      )}
     </Layout>
   );
 }
@@ -171,9 +181,11 @@ const GameList = ({ games }: { games?: GameClass[] }) => {
   );
 };
 
-const CustomLeftPanel = ({ playerStats }: { playerStats?: PlayerStats }) => {
+const CustomLeftPanel = ({ playerId, playerStats }: { playerId?: string; playerStats?: PlayerStats }) => {
   // const { game, gameInfos } = useGameStore();
 
+  const { toast } = useToast();
+
   return (
     <VStack
       flex={1}
@@ -191,7 +203,7 @@ const CustomLeftPanel = ({ playerStats }: { playerStats?: PlayerStats }) => {
         History
       </Heading>
 
-      <Box boxSize="full" mt={["0", "30px"]}>
+      <Box boxSize="full">
         <VStack gap={6}>
           <Tabs variant="unstyled" w="full">
             <TabList pb={6}>
@@ -261,6 +273,20 @@ const CustomLeftPanel = ({ playerStats }: { playerStats?: PlayerStats }) => {
           </Tabs>
         </VStack>
       </Box>
+
+      <Button
+        variant="pixelated"
+        h="48px"
+        onClick={() => {
+          navigator.clipboard.writeText(`${window.location.origin}/game/history/${playerId}`);
+
+          toast({
+            message: "Copied to clipboard",
+          });
+        }}
+      >
+        Profile Link
+      </Button>
     </VStack>
   );
 };
@@ -388,57 +414,73 @@ export const TradedDrugsTable = ({ playerStats }: { playerStats?: PlayerStats })
                 <Td w="30px">
                   <Ludes width="24px" height="24px" />
                 </Td>
-                <Td w="80px" color="neon.500">LUDES</Td>
+                <Td w="80px" color="neon.500">
+                  LUDES
+                </Td>
                 <Td>{formatCashHeader(playerStats?.tradedDrugs[Drugs.Ludes] || 0)}</Td>
               </Tr>
               <Tr>
                 <Td w="30px">
                   <Speed width="24px" height="24px" />
                 </Td>
-                <Td w="80px" color="neon.500">SPEED</Td>
+                <Td w="80px" color="neon.500">
+                  SPEED
+                </Td>
                 <Td>{formatCashHeader(playerStats?.tradedDrugs[Drugs.Speed] || 0)}</Td>
               </Tr>
               <Tr>
                 <Td w="30px">
                   <Weed width="24px" height="24px" />
                 </Td>
-                <Td w="80px" color="neon.500">WEED</Td>
+                <Td w="80px" color="neon.500">
+                  WEED
+                </Td>
                 <Td>{formatCashHeader(playerStats?.tradedDrugs[Drugs.Weed] || 0)}</Td>
               </Tr>
               <Tr>
                 <Td w="30px">
                   <Shrooms width="24px" height="24px" />
                 </Td>
-                <Td w="80px" color="neon.500">SHROOMS</Td>
+                <Td w="80px" color="neon.500">
+                  SHROOMS
+                </Td>
                 <Td>{formatCashHeader(playerStats?.tradedDrugs[Drugs.Shrooms] || 0)}</Td>
               </Tr>
 
               <Tr>
                 <Td w="30px">
                   <Acid width="24px" height="24px" />
                 </Td>
-                <Td w="80px" color="neon.500">ACID</Td>
+                <Td w="80px" color="neon.500">
+                  ACID
+                </Td>
                 <Td>{formatCashHeader(playerStats?.tradedDrugs[Drugs.Acid] || 0)}</Td>
               </Tr>
               <Tr>
                 <Td w="30px">
                   <Ketamine width="24px" height="24px" />
                 </Td>
-                <Td w="80px" color="neon.500">KETAMINE</Td>
+                <Td w="80px" color="neon.500">
+                  KETAMINE
+                </Td>
                 <Td>{formatCashHeader(playerStats?.tradedDrugs[Drugs.Ketamine] || 0)}</Td>
               </Tr>
               <Tr>
                 <Td w="30px">
                   <Heroin width="24px" height="24px" />
                 </Td>
-                <Td w="80px" color="neon.500">HEROIN</Td>
+                <Td w="80px" color="neon.500">
+                  HEROIN
+                </Td>
                 <Td>{formatCashHeader(playerStats?.tradedDrugs[Drugs.Heroin] || 0)}</Td>
               </Tr>
               <Tr>
                 <Td w="30px" borderBottomColor="transparent">
                   <Cocaine width="24px" height="24px" />
                 </Td>
-                <Td w="80px" color="neon.500" borderBottomColor="transparent">COCAINE</Td>
+                <Td w="80px" color="neon.500" borderBottomColor="transparent">
+                  COCAINE
+                </Td>
                 <Td borderBottomColor="transparent">
                   {formatCashHeader(playerStats?.tradedDrugs[Drugs.Cocaine] || 0)}
                 </Td>