Paginate leaderboard (#153)

* add local param to default_auth * temp leaderboard pagination * fix build issues * update landing image * fix: mobile tutorial issue * chore: remove credit button form mobile menu * fix: responsive issues with footer button * fix: mobile map * fix: mobile issue * github sleepin ? * fix: toasts * fix: start playing music on hustle click * skull icon for dead bros * skull icon for dead bros * fix skull color
cartridge-gg · Sep 19, 2023 · 3555ac0 · 3555ac0 · vercel · Sep 19, 2023
1 parent 2d529c9
commit 3555ac0
Show file tree

Hide file tree

Showing 19 changed files with 825 additions and 860 deletions.
diff --git a/scripts/default_auth.sh b/scripts/default_auth.sh
@@ -2,8 +2,13 @@
 set -euo pipefail
 pushd $(dirname "$0")/..
 
-export RPC_URL="http://localhost:5050";
-#export RPC_URL="https://api.cartridge.gg/x/rollyourown/katana";
+if [ $# -ge 1 ] && [ $1 == "local" ]
+then
+    export RPC_URL="http://localhost:5050";
+else
+    export RPC_URL="https://api.cartridge.gg/x/rollyourown/katana";
+fi
+
 export WORLD_ADDRESS="0x3c3dfeb374720dfd73554dc2b9e0583cb9668efb3055d07d1533afa5d219fd5";
 
 # enable system -> component authorizations

diff --git a/web/public/images/landing/main.png b/web/public/images/landing/main.png
diff --git a/web/src/components/Footer.tsx b/web/src/components/Footer.tsx
@@ -13,7 +13,7 @@ export const Footer = ({
       w="full"
       h="80px"
       p="2px"
-      position="absolute"
+      position={["relative", "absolute"]}
       bottom="0"
       justify="center"
       align="flex-end"

diff --git a/web/src/components/Leaderboard.tsx b/web/src/components/Leaderboard.tsx
@@ -14,10 +14,11 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter,
+  VStack,
 } from "@chakra-ui/react";
 import Input from "@/components/Input";
 
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useState, useEffect, useRef } from "react";
 import { Avatar } from "./avatar/Avatar";
 import { genAvatarFromAddress } from "./avatar/avatars";
 import colors from "@/theme/colors";
@@ -26,6 +27,7 @@ import { useDojo } from "@/dojo";
 import { useRouter } from "next/router";
 import { formatCash } from "@/utils/ui";
 import { useSystems } from "@/dojo/systems/useSystems";
+import { Skull } from "./icons";
 
 const Leaderboard = ({
   nameEntry,
@@ -34,6 +36,8 @@ const Leaderboard = ({
   const router = useRouter();
   const gameId = router.query.gameId as string;
   const { account } = useDojo();
+  // TODO : use when supported on torii
+  // const { scores, refetch, hasNextPage, fetchNextPage } = useGlobalScores();
   const { scores, refetch } = useGlobalScores();
   const { setName: submitSetName, isPending } = useSystems();
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -42,6 +46,25 @@ const Leaderboard = ({
   const [targetGameId, setTargetGameId] = useState<string>("");
   const [name, setName] = useState<string>("");
 
+  const pageSize = 10;
+  const [hasNextPage, setHasNextPage] = useState(false);
+  const [visibleScores, setVisibleScores] = useState(pageSize);
+
+  const listRef = useRef<null | HTMLLIElement>(null);
+
+  useEffect(() => {
+    setHasNextPage(visibleScores < scores.length);
+  }, [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]);
+
   const onSubmitName = useCallback(async () => {
     if (!name) return;
 
@@ -59,11 +82,22 @@ const Leaderboard = ({
 
   return (
     <>
-      <UnorderedList boxSize="full" variant="dotted" {...props}>
-        {scores ? (
-          scores
-            ?.sort((a, b) => b.cash - a.cash)
-            .map((score, index) => {
+      <VStack w="full" h="100%">
+        <UnorderedList
+          boxSize="full"
+          variant="dotted"
+          h="auto"
+          maxH="calc(100% - 50px)"
+          overflowY="auto"
+          sx={{
+            overflowY: "scroll",
+            "&::-webkit-scrollbar": {
+              display: "none",
+            },
+          }}
+        >
+          {scores ? (
+            scores.slice(0, visibleScores)?.map((score, index) => {
               const isOwn = score.address === account?.address;
               const color = isOwn
                 ? colors.yellow["400"].toString()
@@ -84,22 +118,27 @@ const Leaderboard = ({
                     setTargetGameId(score.gameId);
                     onOpen();
                   }}
+                  ref={listRef}
                 >
                   <HStack mr={3}>
                     <Text
                       w="30px"
                       flexShrink={0}
-                      display={["none", "block"]}
+                      // display={["none", "block"]}
                       whiteSpace="nowrap"
                     >
                       {index + 1}.
                     </Text>
                     <Box flexShrink={0} style={{ marginTop: "-8px" }}>
-                      <Avatar
-                        name={genAvatarFromAddress(score.address)}
-                        color={avatarColor}
-                        hasCrown={index === 0}
-                      />
+                      {score.dead ? (
+                        <Skull color={color} />
+                      ) : (
+                        <Avatar
+                          name={genAvatarFromAddress(score.address)}
+                          color={avatarColor}
+                          hasCrown={index === 0}
+                        />
+                      )}
                     </Box>
 
                     <HStack>
@@ -127,12 +166,17 @@ const Leaderboard = ({
                 </ListItem>
               );
             })
-        ) : (
-          <Text textAlign="center" color="neon.500">
-            No scores submitted yet
-          </Text>
-        )}
-      </UnorderedList>
+          ) : (
+            <Text textAlign="center" color="neon.500">
+              No scores submitted yet
+            </Text>
+          )}
+        </UnorderedList>
+
+        {hasNextPage && <Button onClick={fetchNextPage}>Load More</Button>}
+      </VStack>
+
+      {/* Naming modale */}
       <Modal
         closeOnOverlayClick={overlayDimiss}
         isOpen={isOpen}

diff --git a/web/src/components/MobileMenu.tsx b/web/src/components/MobileMenu.tsx
@@ -33,9 +33,9 @@ const MobileMenu = ({ ...props }: StyleProps /*& ButtonProps*/) => {
               <MenuItem _hover={{ bg: "transarent" }}>
                 <MediaPlayer />
               </MenuItem>
-              <MenuItem icon={<Roll />} onClick={() => {}}>
+              {/* <MenuItem icon={<Roll />} onClick={() => {}}>
                 CREDITS
-              </MenuItem>
+              </MenuItem> */}
               <MenuItem icon={<User />}>
                 <>{account && formatAddress(account.address.toUpperCase())}</>
               </MenuItem>

diff --git a/web/src/components/Toast.tsx b/web/src/components/Toast.tsx
@@ -17,9 +17,11 @@ export const Toast = ({
   return (
     <HStack
       {...cardPixelatedStyle({})}
-      h="40px"
-      p="30px"
-      mb={["80px", "20px"]}
+      // h="40px"
+      p={["8px", "20px"]}
+      mb={["16px", "20px"]}
+      fontSize={["14px", "16px"]}
+      lineHeight={["1.2","1.5"]}
       bgColor="neon.200"
       color="neon.900"
       justify="space-between"

diff --git a/web/src/components/Tutorial.tsx b/web/src/components/Tutorial.tsx
@@ -94,7 +94,7 @@ const Tutorial = ({
   return (
     <Modal isOpen={isOpen} onClose={close} isCentered>
       <ModalOverlay />
-      <ModalContent maxH="70vh" maxWidth={"600px"}>
+      <ModalContent maxH="90vh" maxWidth={"600px"}>
         <ModalBody justifyContent="center" minH={"360px"}>
           <Box position={"relative"}>
             {steps.map((step) => {

diff --git a/web/src/components/map/Map.tsx b/web/src/components/map/Map.tsx
@@ -18,6 +18,8 @@ const coordinate: CoordinateType = {
   [Location.Brooklyn]: { x: 0, y: -0 },
 };
 
+const yOffset = -150
+
 export const Map = ({
   target,
   current,
@@ -33,7 +35,7 @@ export const Map = ({
   useEffect(() => {
     if (target !== undefined) {
       const animation = isMobile
-        ? { scale: 1.75, ...coordinate[target] }
+        ? { scale: 1.5, x: coordinate[target].x , y: coordinate[target].y +yOffset}
         : { scale: 1, x: 0, y: 0 };
       animate(
         scope.current,

diff --git a/web/src/dojo/components/useGlobalScores.tsx b/web/src/dojo/components/useGlobalScores.tsx
@@ -1,5 +1,11 @@
-import { PlayerEdge, Name, useGlobalScoresQuery } from "@/generated/graphql";
-import { useEffect, useMemo, useState } from "react";
+import {
+  PlayerEdge,
+  Name,
+  useGlobalScoresQuery,
+  useInfiniteGlobalScoresQuery,
+} from "@/generated/graphql";
+import { useCallback, useEffect, useState, useMemo } from "react";
+
 import { shortString } from "starknet";
 import { SCALING_FACTOR } from "..";
 
@@ -8,6 +14,7 @@ export type Score = {
   address: string;
   name?: string;
   cash: number;
+  dead: boolean;
 };
 
 export class GlobalScores {
@@ -36,6 +43,7 @@ export class GlobalScores {
           nameComponent &&
           shortString.decodeShortString(nameComponent?.short_string),
         cash: Math.floor(Number(edge.node?.cash) / SCALING_FACTOR),
+        dead: Number(edge.node?.health) === 0,
       };
     });
   }
@@ -49,9 +57,9 @@ export const useGlobalScores = (offset?: number, limit?: number) => {
   });
 
   const scores: Score[] = useMemo(() => {
-    return (
-      GlobalScores.create(data?.playerComponents?.edges as PlayerEdge[]) || []
-    );
+    const scores =
+      GlobalScores.create(data?.playerComponents?.edges as PlayerEdge[]) || [];
+    return scores.sort((a, b) => b.cash - a.cash);
   }, [data]);
 
   return {
@@ -60,3 +68,48 @@ export const useGlobalScores = (offset?: number, limit?: number) => {
     refetch,
   };
 };
+
+// // TODO : use when supported on torii
+// export const useGlobalScoresIninite = (offset?: number, limit?: number) => {
+//   const [scores, setScores] = useState<Score[]>([]);
+//   // Gets top 10
+//   // TODO: paginate with cursor for more scores
+//   const { data, isFetched, refetch, hasNextPage, fetchNextPage, ...props } =
+//     useInfiniteGlobalScoresQuery(
+//       {
+//         limit: limit || 10,
+//       },
+//       {
+//         getNextPageParam: (lastPage) => {
+//           const edgesCount = lastPage.playerComponents?.edges?.length || 0;
+//           if ( edgesCount === 0) return undefined
+//           const lastItem = lastPage.playerComponents?.edges[edgesCount - 1]
+//             return {
+//               limit: 10,
+//               cursor: lastItem.cursor,
+//             };
+//           }
+//         },
+//     );
+
+//   useEffect(() => {
+//     if (data?.pages.length == 0) return;
+//     const pageCount = data?.pages.length || 0;
+//     // debugger
+//     const new_scores = GlobalScores.create(
+//       data?.pages[pageCount - 1].playerComponents?.edges as PlayerEdge[],
+//     );
+
+//     if (new_scores) {
+//       setScores(scores.concat(new_scores));
+//     }
+//   }, [data?.pages]);
+
+//   return {
+//     scores,
+//     isFetched,
+//     refetch,
+//     hasNextPage,
+//     fetchNextPage,
+//   };
+// };