Animations

client/package.json

@@ -14,8 +14,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.11.4",
-    "@cartridge/connector": "^0.5.6",
-    "@cartridge/controller": "^0.5.6",
+    "@cartridge/connector": "^0.5.7",
+    "@cartridge/controller": "^0.5.7",
     "@dojoengine/core": "1.0.4-alpha.3.1.2",
     "@dojoengine/create-burner": "1.0.4-alpha.3.1.2",
     "@dojoengine/react": "1.0.4-alpha.3.1.2",

client/src/App.tsx

@@ -1,13 +1,14 @@
 import ControllerConnector from "@cartridge/connector/controller";
 import { ControllerOptions } from "@cartridge/controller";
-import { Chain, sepolia } from "@starknet-react/chains";
+import { sepolia } from "@starknet-react/chains";
 import {
   Connector,
   StarknetConfig,
   jsonRpcProvider,
+  voyager,
 } from "@starknet-react/core";
 import { Provider as JotaiProvider } from "jotai";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
 import Gameplay from "./pages/games/Gameplay";
 import Home from "./pages/Home";
@@ -22,12 +23,6 @@ const options: ControllerOptions = {
   policies: POLICIES,
 };
 
-function rpc(_chain: Chain) {
-  return {
-    nodeUrl: SLOT_RPC_URL,
-  };
-}
-
 const SmallScreenWarning = () => (
   <div className="fixed inset-0 z-50 flex items-center justify-center text-white bg-black bg-opacity-75 backdrop-blur-sm">
     <div className="p-4 text-center">
@@ -54,12 +49,17 @@ export default function App() {
 
   const connectors = [new ControllerConnector(options) as never as Connector];
 
+  const rpc = useCallback(() => {
+    return { nodeUrl: SLOT_RPC_URL };
+  }, []);
+
   return (
     <StarknetConfig
-      autoConnect={true}
       chains={[sepolia]}
       provider={jsonRpcProvider({ rpc })}
       connectors={connectors}
+      explorer={voyager}
+      autoConnect
     >
       <JotaiProvider>
         <Router>

client/src/components/gameplay/game-board.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { BottomPit, TopPit } from "@/components/pits";
 import { Dispatch, SetStateAction } from "react";
-import clsx from "clsx";
 import { useQuery } from "@apollo/client";
 import { MancalaSeedQuery } from "@/lib/constants";
 import Seed from "../seed";
@@ -29,23 +28,59 @@ const GameBoard: React.FC<GameBoardProps> = ({
     variables: { gameId: gameId },
   });
   startPolling(1000);
+
+  const seeds = React.useMemo(() => {
+    if (!data?.mancalaDevSeedModels?.edges) return [];
+    const uniqueSeeds = new Map();
+
+    // Sort edges by timestamp in descending order (newest first)
+    const sortedEdges = [...data.mancalaDevSeedModels.edges].sort((a, b) => {
+      const timeA = new Date(a.node.entity.updatedAt).getTime();
+      const timeB = new Date(b.node.entity.updatedAt).getTime();
+      return timeB - timeA; // Descending order
+    });
+
+    sortedEdges.forEach((seed: any) => {
+      const seedId = seed?.node.seed_id;
+      if (seedId && !uniqueSeeds.has(seedId)) {
+        uniqueSeeds.set(seedId, seed.node);
+      }
+    });
+
+    return Array.from(uniqueSeeds.values());
+  }, [data]);
+
+  const getSeed = (seedId: string | number) => {
+    const hexSeedId =
+      typeof seedId === "number" ? `0x${seedId.toString(16)}` : seedId;
+    const seed = seeds.find((seed) => seed.seed_id === hexSeedId);
+    if (!seed) return null;
+
+    const seedNumber = parseInt(seed.seed_id, 16);
+    const isNative =
+      (seed.player === game_node?.player_one &&
+        seedNumber >= 1 &&
+        seedNumber <= 24) ||
+      (seed.player === game_node?.player_two &&
+        seedNumber >= 25 &&
+        seedNumber <= 48);
+
+    return { ...seed, isNative };
+  };
+
   const involved = game_players?.mancalaDevPlayerModels.edges.some(
-    (item: any) => item?.node.address === account.account?.address,
+    (item: any) =>
+      item?.node.address ===
+      (account.account?.address || game_node?.player_one),
   );
   const player_position = involved
     ? game_players?.mancalaDevPlayerModels.edges.findIndex(
-        (item: any) => item?.node.address === account.account?.address,
+        (item: any) =>
+          item?.node.address ===
+          (account.account?.address || game_node?.player_one),
       )
     : 0;
   const opponent_position = player_position === 0 ? 1 : 0;
-  const opposition_length = data?.mancalaDevSeedModels.edges
-    .filter(
-      (item: any) =>
-        item?.node.player ===
-        game_players?.mancalaDevPlayerModels.edges[opponent_position]?.node
-          .address,
-    )
-    .filter((item: any) => item?.node.pit_number === 7).length;
   const player_pot_seed_count =
     game_players?.mancalaDevPitModels.edges
       .filter(
@@ -92,11 +127,12 @@ const GameBoard: React.FC<GameBoardProps> = ({
       return "170px";
     }
   };
+
   return (
     <div className="w-full h-[400px] flex flex-col items-center justify-center mt-24">
       <div className="w-[1170px] h-[400px] flex flex-row items-center justify-between space-x-5 relative bg-[url('./assets/game_board.png')] bg-contain bg-center bg-no-repeat">
         <div className="w-fit h-[220px] mt-14 relative">
-          {/* Player 1 pot */}
+          {/* Player 1 pot (opponent) */}
           <div
             className={
               "w-fit max-w-14 h-fit max-h-40 flex flex-col flex-wrap -mt-2.5"
@@ -105,44 +141,39 @@ const GameBoard: React.FC<GameBoardProps> = ({
               marginLeft: getOpponentMarginLeft(),
             }}
           >
-            {// involved && data?.mancalaSeedModels.edges.filter((item: any) => item?.node.player === game_players?.mancalaPlayerModels.edges[opponent_position]?.node.address)
-            data?.mancalaDevSeedModels.edges
-              .filter(
-                (item: any) =>
-                  item?.node.player ===
-                  game_players?.mancalaDevPlayerModels.edges[opponent_position]
-                    ?.node.address,
-              )
-              .filter((item: any) => item?.node.pit_number === 7)
-              .slice(0, opponent_pot_seed_count)
-              .map((seed: any, index: number) => (
-                <div
-                  key={index}
-                  style={{
-                    width: opposition_length > 30 ? "8px" : "auto",
-                  }}
-                >
-                  <Seed
-                    color={seed?.node.color || "Blue"}
-                    length={opponent_pot_seed_count}
-                    type="opponent"
-                    id={parseInt(seed.node.seed_id, 16)}
-                  />
-                </div>
-              ))}
+            {Array.from({ length: 24 }, (_, i) => {
+              if (account.account?.address) {
+                return game_node?.player_one === account.account?.address
+                  ? i + 25
+                  : i + 1;
+              } else {
+                return i + 25;
+              }
+            }).map((seedNumber) => {
+              const seedDetails = getSeed(seedNumber);
+              if (!seedDetails) return null;
+
+              const isPlayerSeed = account.account?.address
+                ? seedDetails.player === account.account?.address
+                : seedDetails.player === game_node?.player_one;
+
+              return (
+                <Seed
+                  key={seedNumber}
+                  color={seedDetails?.color || "Blue"}
+                  length={isPlayerSeed ? player_pot_seed_count : opponent_pot_seed_count}
+                  type={isPlayerSeed ? "player" : "opponent"}
+                  seed_id={parseInt(seedDetails?.seed_id, 16)}
+                  pit_number={seedDetails?.pit_number}
+                  seed_number={seedDetails?.seed_number}
+                  isNative={seedDetails.isNative}
+                />
+              );
+            })}
           </div>
-          <div className="absolute inset-y-0 self-center left-32 ml-1.5 mb-20">
+          <div className="h-[160px] flex flex-col items-center justify-center" style={{marginLeft: opponent_pot_seed_count > 24 ? "128px" : opponent_pot_seed_count > 10 ? "113px" : "100px"}}>
             <p className="text-white text-center">
-              {
-                data?.mancalaDevSeedModels.edges
-                  .filter(
-                    (item: any) =>
-                      item?.node.player ===
-                      game_players?.mancalaDevPlayerModels.edges[opponent_position]
-                        ?.node.address,
-                  )
-                  .filter((item: any) => item?.node.pit_number === 7).length
-              }
+              {opponent_pot_seed_count}
             </p>
           </div>
         </div>
@@ -154,38 +185,14 @@ const GameBoard: React.FC<GameBoardProps> = ({
                 .filter(
                   (item: any) =>
                     item?.node.player ===
-                    game_players?.mancalaDevPlayerModels.edges[opponent_position]
-                      ?.node.address,
+                    game_players?.mancalaDevPlayerModels.edges[
+                      opponent_position
+                    ]?.node.address,
                 )
                 .filter((item: any) => item?.node.pit_number !== 7) // Exclude the scoring pit
                 .sort((a: any, b: any) => b.node.pit_number - a.node.pit_number) // Sort in descending order
                 .map((pit: any, i: number) => (
-                  <TopPit
-                    key={i}
-                    amount={pit.node.seed_count}
-                    address={pit.node.player}
-                    pit={pit.node.pit_number}
-                    system={system}
-                    userAccount={account}
-                    game_id={gameId}
-                    message={setMoveMessage}
-                    status={game_node?.status}
-                    winner={game_node?.winner}
-                    seed_count={pit.node.seed_count}
-                    seeds={data?.mancalaDevSeedModels.edges
-                      .filter(
-                        (seed: any) => seed?.node.player === pit.node.player,
-                      )
-                      .filter(
-                        (seed: any) =>
-                          seed?.node.pit_number === pit.node.pit_number,
-                      )}
-                    setTimeRemaining={setTimeRemaining}
-                    max_block_between_move={parseInt(
-                      game_node?.max_block_between_move,
-                      16,
-                    )}
-                  />
+                  <TopPit key={i} amount={pit.node.seed_count} />
                 ))}
             </div>
           </div>
@@ -202,15 +209,6 @@ const GameBoard: React.FC<GameBoardProps> = ({
                 .filter((item: any) => item?.node.pit_number !== 7)
                 .sort((a: any, b: any) => a.node.pit_number - b.node.pit_number)
                 .map((pit: any, i: number) => {
-                  // Filter seeds for this specific pit number (1-6)
-                  const pitSeeds = data?.mancalaDevSeedModels.edges.filter(
-                    (seed: any) =>
-                      seed?.node.player === pit.node.player &&
-                      seed?.node.pit_number === pit.node.pit_number &&
-                      pit.node.pit_number >= 1 &&
-                      pit.node.pit_number <= 6,
-                  );
-
                   return (
                     <BottomPit
                       key={i}
@@ -223,8 +221,6 @@ const GameBoard: React.FC<GameBoardProps> = ({
                       message={setMoveMessage}
                       status={game_node?.status}
                       winner={game_node?.winner}
-                      seed_count={pit.node.seed_count}
-                      seeds={pitSeeds}
                       setTimeRemaining={setTimeRemaining}
                       max_block_between_move={parseInt(
                         game_node?.max_block_between_move,
@@ -237,7 +233,7 @@ const GameBoard: React.FC<GameBoardProps> = ({
           </div>
         </div>
         <div className="w-fit h-[220px] mt-14 relative">
-          {/* Player 2 pot */}
+          {/* Player 2 pot (player) */}
           <div
             className={
               "w-fit max-w-14 h-fit max-h-40 flex flex-col flex-wrap -mt-2.5"
@@ -246,27 +242,37 @@ const GameBoard: React.FC<GameBoardProps> = ({
               marginRight: getPlayerMarginRight(),
             }}
           >
-            {data?.mancalaDevSeedModels.edges
-              .filter(
-                (item: any) =>
-                  item?.node.player ===
-                  game_players?.mancalaDevPlayerModels.edges[player_position]?.node
-                    .address,
-              )
-              .filter((item: any) => item?.node.pit_number === 7)
-              .slice(0, player_pot_seed_count)
-              .map((seed: any, index: number) => (
-                <div key={index}>
-                  <Seed
-                    color={seed?.node.color || "Blue"}
-                    length={player_pot_seed_count}
-                    type="player"
-                    id={parseInt(seed.node.seed_id, 16)}
-                  />
-                </div>
-              ))}
+            {Array.from({ length: 24 }, (_, i) => {
+              if (account.account?.address) {
+                return game_node?.player_one === account.account?.address
+                  ? i + 1
+                  : i + 25;
+              } else {
+                return i + 1;
+              }
+            }).map((seedNumber) => {
+              const seedDetails = getSeed(seedNumber);
+              if (!seedDetails) return null;
+
+              const isPlayerSeed = account.account?.address
+                ? seedDetails.player === account.account?.address
+                : seedDetails.player === game_node?.player_one;
+
+              return (
+                <Seed
+                  key={seedNumber}
+                  color={seedDetails?.color || "Blue"}
+                  length={isPlayerSeed ? player_pot_seed_count : opponent_pot_seed_count}
+                  type={isPlayerSeed ? "player" : "opponent"}
+                  seed_id={parseInt(seedDetails?.seed_id, 16)}
+                  pit_number={seedDetails?.pit_number}
+                  seed_number={seedDetails?.seed_number}
+                  isNative={seedDetails.isNative}
+                />
+              );
+            })}
           </div>
-          <div className="absolute inset-y-0 self-center right-32 bottom-20 w-7 h-12">
+          <div className="h-[160px] flex flex-col items-center justify-center" style={{marginRight: player_pot_seed_count > 24 ? "120px" : player_pot_seed_count > 10 ? "113px" : "100px"}}>
             <p className="text-white text-center h-full flex flex-col items-center justify-center">
               {player_pot_seed_count}
             </p>
@@ -277,4 +283,4 @@ const GameBoard: React.FC<GameBoardProps> = ({
   );
 };
 
-export default GameBoard;
+export default GameBoard;