Gameplay models

client/src/App.tsx

@@ -15,6 +15,7 @@ import Tutorial from "./pages/Tutorial";
 import CONFIG, { IS_MAINNET } from "./lib/config";
 import { constants } from "starknet";
 import Boards from "./pages/Boards";
+import Checks from "./Checks";
 
 const options = {
   theme: "realm-of-ra",
@@ -68,15 +69,16 @@ export default function App() {
       autoConnect
     >
       <Router>
-        <Routes>
-          <Route index element={<Home />} />
-          <Route path="/lobby" element={<Lobby />} />
-          <Route path="/games/:gameId" element={<Gameplay />} />
-          <Route path="/tutorial" element={<Tutorial />} />
-          <Route path="/boards" element={<Boards />} />
-        </Routes>
+        <Checks>
+          <Routes>
+            <Route index element={<Home />} />
+            <Route path="/lobby" element={<Lobby />} />
+            <Route path="/games/:gameId" element={<Gameplay />} />
+            <Route path="/tutorial" element={<Tutorial />} />
+            <Route path="/boards" element={<Boards />} />
+          </Routes>
+        </Checks>
       </Router>
-      {isSmallScreen && <SmallScreenWarning />}
     </StarknetConfig>
   );
 }

client/src/Checks.tsx

@@ -0,0 +1,64 @@
+import { useAccount, useBalance, useConnect, useProvider } from "@starknet-react/core";
+import NotEnough from "@/components/not-enough";
+import { useEffect, useState } from "react";
+import { AccountInterface, Contract } from "starknet";
+
+
+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">
+        <h1 className="text-2xl font-bold">
+          This game is not optimized for this device screen!
+        </h1>
+      </div>
+    </div>
+);
+
+export default function Checks({ children }: { children: React.ReactNode }) {
+    const { account, address, isConnected } = useAccount();
+    const { connect, connectors } = useConnect();
+    const { provider } = useProvider();
+    const [amountOfTokens, setAmountOfTokens] = useState<number>();
+    useEffect(() => {
+        const fetchData = async () => {
+            if (!isConnected) {
+                connect({ connector: connectors[0] });
+            }
+            const contract_address = "0x07f413bd3ce6d349dd9efcd208894b9cd7b646979834ed771ffd62d160e25835";
+            const { abi } = await provider.getClassAt(contract_address);
+            const contract = new Contract(abi, contract_address, provider);
+            contract.connect(account as AccountInterface);
+            const contract_call = contract.populate('balance_of', [address?.toString() || '']);
+            const data = await contract.balance_of(contract_call.calldata);
+            setAmountOfTokens(Number(data))
+        };
+        fetchData();
+    }, [account, address, connect, connectors, isConnected, provider]);
+    const isEnough = Math.round(amountOfTokens || 0) >= 1;
+    console.log({
+        amountOfTokens,
+        isEnough
+    })
+    const [isSmallScreen, setIsSmallScreen] = useState(false);
+
+    useEffect(() => {
+        if (!isConnected) {
+            connect({ connector: connectors[0] })
+        }
+      const handleResize = () => {
+        setIsSmallScreen(window.innerWidth < 1280);
+      };
+      handleResize();
+      window.addEventListener("resize", handleResize);
+      return () => {
+        window.removeEventListener("resize", handleResize);
+      };
+    }, []);
+    return(
+        <div>
+            {isConnected && !isEnough && <NotEnough isEnough={isEnough} />}
+            {isSmallScreen && <SmallScreenWarning />}
+            {children}
+        </div>
+    )
+}

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

@@ -2,7 +2,7 @@ import GameMessage from "@/components/gameplay/game-message";
 import { formatPlayerName, getPlayer, lookupMissingNames } from "@/lib/utils";
 import PlayerProfile from "@/components/gameplay/player-profile";
 import { gameStarted } from "@/lib/constants";
-import { useEffect, useState } from "react";
+import { SetStateAction, Dispatch, useEffect, useState } from "react";
 
 export default function GameNavigation({
   game_players,
@@ -17,6 +17,7 @@ export default function GameNavigation({
   setMessage,
   action,
   setAction,
+  setPlayers
 }: {
   game_players: any;
   player_names: any;
@@ -30,6 +31,7 @@ export default function GameNavigation({
   setMessage: any;
   action: { action: any; message: string };
   setAction: any;
+  setPlayers:  Dispatch<SetStateAction<{ name: string, address: string }[] | undefined>>
 }) {
   const games_data_one = game_players?.player_one?.edges?.[0]?.node;
   const games_data_two = game_players?.player_two?.edges?.[0]?.node;
@@ -107,6 +109,22 @@ export default function GameNavigation({
           },
         ];
 
+        useEffect(() => {
+          // Ensure game_node and player displays are available before setting players
+          if (game_node && player_one_display && player_two_display) {
+            setPlayers([
+              {
+                name: player_one_display?.name || "",
+                address: player_one_display?.address || ""
+              },
+              {
+                name: player_two_display?.name || "",
+                address: player_two_display?.address || ""
+              }
+            ]);
+          }
+        }, [game_node, player_one_display, player_two_display, setPlayers]);
+
   return (
     <nav className="relative w-full h-40">
       <div className="bg-[url('./assets/left-entry.png')] h-40 w-[45%] bg-cover bg-center bg-no-repeat absolute top-0 left-0">

client/src/components/lobby/duels.tsx

@@ -56,7 +56,7 @@ export default function Duels({
   });
   const { system } = useDojo();
   const account = useAccount();
-  const join_game = async (game_id: string, index: number) => {
+  const join_game = async (game_id: string, index: number, seed_number: number) => {
     setJoinStatus({
       status: "JOINING",
       index: index,
@@ -69,6 +69,7 @@ export default function Duels({
         player_2_address,
         setJoinStatus,
         index,
+        seed_number
       );
     }
   };
@@ -89,7 +90,7 @@ export default function Duels({
     if (isPlayerInGame || isGameFull) {
       navigate(`/games/${game.game_id}`);
     } else {
-      join_game(game.game_id, index)
+      join_game(game.game_id, index, 1)
         .then((res) => console.info(res))
         .catch((errorJoiningGame) => console.error(errorJoiningGame));
     }

client/src/components/not-enough.tsx

@@ -0,0 +1,41 @@
+import { Dialog } from "@material-tailwind/react";
+import { useState } from "react";
+import { Button } from "./ui/button";
+import { BellIcon } from "@heroicons/react/24/solid";
+
+export default function NotEnough({ isEnough }: { isEnough: boolean }) {
+    const [open, setOpen] = useState(!isEnough);
+    const handleOpen = () => setOpen(open);
+    return(
+        <div className="">
+            <Dialog
+                open={open}
+                handler={handleOpen}
+                className="flex flex-col items-center justify-center bg-transparent"
+            >
+                <div className="w-[575px] h-80 bg-[#0F1116] border-2 border-[#272A32] rounded-2xl p-8">
+                    <div className="w-full h-full flex flex-col items-center justify-center space-y-5">
+                        <h3 className="text-white font-semibold text-2xl">Missing Token</h3>
+                        <p className="text-center text-white text-lg font-medium">This Game is currently available to the general public, Input an email address to be notified when available to all users</p>
+                        <input placeholder="Input Email Address" className="w-full p-3.5 bg-[#1A1E25] rounded-lg outline-none text-white" />
+                        <Button className="bg-[#F58229] hover:bg-[#F58229] font-medium hover:cursor-pointer rounded-3xl" onClick={() => {
+                            setOpen(true)
+                            if (window.location.pathname === "/") {
+                                setOpen(true)
+                            } else {
+                                window.location.href === "/"
+                            }
+                        }}>
+                              <div className="flex flex-row items-center space-x-1">
+                                <BellIcon className="text-[#FCE3AA] w-6 h-6" />
+                                <p className="text-[#FCE3AA] font-semibold">
+                                  Get Notified
+                                </p>
+                              </div>
+                        </Button>
+                    </div>
+                </div>
+            </Dialog>
+        </div>
+    )
+}

client/src/dojo/createSystemCalls.ts

@@ -27,9 +27,9 @@ export function createSystemCalls(
     }
   };
 
-  const create_game = async (account: AccountInterface, setGameId: any) => {
+  const create_game = async (account: AccountInterface, setGameId: any, settings_id: number) => {
     try {
-      const { transaction_hash } = await client.actions.create_game(account);
+      const { transaction_hash } = await client.actions.create_game(account, settings_id);
       getEvents(
         await account.waitForTransaction(transaction_hash, {
           retryInterval: 100,
@@ -48,11 +48,13 @@ export function createSystemCalls(
     account: AccountInterface,
     player_2: string,
     setGameId: any,
+    settings_id: number
   ) => {
     try {
       const { transaction_hash } = await client.actions.create_private_game(
         account,
         player_2,
+        settings_id
       );
       getEvents(
         await account.waitForTransaction(transaction_hash, {
@@ -74,11 +76,13 @@ export function createSystemCalls(
     player_2_address: string,
     setJoinStatus: any,
     index: number,
+    settings_id: number
   ) => {
     try {
       const { transaction_hash } = await client.actions.join_game(
         account,
         game_id,
+        settings_id
       );
 
       const receipt = await account.waitForTransaction(transaction_hash, {

client/src/dojo/generated/generated.ts

@@ -27,15 +27,15 @@ export async function setupWorld(provider: DojoProvider) {
       }
     };
 
-    const create_game = async (account: AccountInterface) => {
+    const create_game = async (account: AccountInterface, settings_id: number) => {
       console.log("account: ", account);
       try {
         return await provider.execute(
           account,
           {
             contractName,
             entrypoint: "new_game",
-            calldata: [],
+            calldata: [settings_id],
           },
           NAMESPACE,
         );
@@ -48,14 +48,15 @@ export async function setupWorld(provider: DojoProvider) {
     const create_private_game = async (
       account: AccountInterface,
       player_2: string,
+      settings_id: number,
     ) => {
       try {
         return await provider.execute(
           account,
           {
             contractName,
             entrypoint: "create_private_game",
-            calldata: [player_2],
+            calldata: [player_2, settings_id],
           },
           NAMESPACE,
         );
@@ -65,14 +66,14 @@ export async function setupWorld(provider: DojoProvider) {
       }
     };
 
-    const join_game = async (account: AccountInterface, game_id: string) => {
+    const join_game = async (account: AccountInterface, game_id: string, settings_id: number) => {
       try {
         return await provider.execute(
           account,
           {
             contractName,
             entrypoint: "join_game",
-            calldata: [game_id],
+            calldata: [game_id, settings_id],
           },
           NAMESPACE,
         );

client/src/lib/constants.ts

@@ -604,6 +604,14 @@ export const gameStarted = (games_data_one: any, games_data_two: any) =>
     games_data_two?.pit6 == 4
   );
 
+
+export const normalizeAddress = (address: string) => {
+  // Remove '0x' prefix, convert to lowercase, and pad with leading zeros if needed
+  const cleanAddress = address?.toLowerCase()?.replace("0x", "");
+  // Pad to 64 characters (32 bytes) with leading zeros
+  return cleanAddress?.padStart(64, "0");
+};
+
 export const MancalaBoardModelsQuery = gql`
   query mancalaSaltMancalaBoardModels {
     mancalaSaltMancalaBoardModels {
@@ -4685,3 +4693,4 @@ export const TUTORIAL_STEPS: TutorialStep[] = [
     ],
   },
 ];
+

client/src/pages/Home.tsx

@@ -3,19 +3,29 @@ import link from "../assets/link-out.png";
 import { Link } from "react-router-dom";
 import Bubble from "@/components/ui/svgs/bubble";
 import small_logo from "@/assets/small-logo.png";
+import { useAccount, useConnect } from "@starknet-react/core";
+import { Button } from "@/components/ui/button";
 
 export default function Home() {
+  const { isConnected } = useAccount();
+  const { connect, connectors } = useConnect();
   return (
     <div className="bg-[#0F1116] bg-[url('./assets/bg.png')] bg-cover bg-center w-full h-full min-h-screen flex flex-col items-center justify-center">
       <div className="bg-[url('./assets/home-box.png')] bg-cover bg-center bg-no-repeat w-[874px] h-[486px] flex flex-col items-center justify-center space-y-20">
         <img src={logo} alt="logo" className="w-56 h-16" />
         <div className="flex flex-col space-y-5 text-center">
-          <Link to="/lobby">
+          {
+            isConnected ? <Link to="/lobby">
             <button className="bg-[#1A1D25] text-[#F58229] py-2.5 px-7 rounded-full flex flex-row items-center justify-center space-x-1">
               <Bubble />
               <p>Go to lobby</p>
             </button>
-          </Link>
+          </Link> : <Button className="bg-[#F58229] hover:bg-[#F58229] font-medium hover:cursor-pointer rounded-3xl" onClick={() => connect({ connector: connectors[0] })}>
+            <div className="flex flex-row items-center space-x-1">
+              <p className="text-[#FCE3AA] font-medium">Connect Wallet</p>
+            </div>
+          </Button>
+          }
           <Link
             to="/"
             className="flex flex-row items-center justify-center space-x-1"

client/src/pages/Lobby.tsx

@@ -54,11 +54,11 @@ export default function Lobby() {
   const { system } = useDojo();
   const account = useAccount();
   const isConnected = account.account != null;
-  const create_game = async () => {
+  const create_game = async (settings_id: number) => {
     setCreating(true);
     if (account.account) {
       //using account from cartridge
-      await system.create_game(account.account, setGameId);
+      await system.create_game(account.account, setGameId, settings_id);
       if (gameId) {
         setCreating(false);
       }
@@ -67,10 +67,10 @@ export default function Lobby() {
     }
   };
 
-  const create_private_game = async () => {
+  const create_private_game = async (settings_id: number) => {
     setCreating(true);
     if (account.account) {
-      await system.create_private_game(account.account, player2, setGameId);
+      await system.create_private_game(account.account, player2, setGameId, settings_id);
       if (gameId) {
         setCreating(false);
       }
@@ -467,8 +467,8 @@ export default function Lobby() {
                               className="bg-[#F58229] hover:bg-[#F58229] font-medium hover:cursor-pointer rounded-3xl"
                               onClick={() =>
                                 type == "private"
-                                  ? create_private_game()
-                                  : create_game()
+                                  ? create_private_game(1)
+                                  : create_game(1)
                               }
                             >
                               <div className="flex flex-row items-center space-x-1">