diff --git a/client/src/App.tsx b/client/src/App.tsx index 3c4d51b0..c48806b6 100644 --- a/client/src/App.tsx +++ b/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 > - - } /> - } /> - } /> - } /> - } /> - + + + } /> + } /> + } /> + } /> + } /> + + - {isSmallScreen && } ); } diff --git a/client/src/Checks.tsx b/client/src/Checks.tsx new file mode 100644 index 00000000..11b216c9 --- /dev/null +++ b/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 = () => ( +
+
+

+ This game is not optimized for this device screen! +

+
+
+); + +export default function Checks({ children }: { children: React.ReactNode }) { + const { account, address, isConnected } = useAccount(); + const { connect, connectors } = useConnect(); + const { provider } = useProvider(); + const [amountOfTokens, setAmountOfTokens] = useState(); + 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( +
+ {isConnected && !isEnough && } + {isSmallScreen && } + {children} +
+ ) +} \ No newline at end of file diff --git a/client/src/assets/lose.png b/client/src/assets/lose.png new file mode 100644 index 00000000..b2f80c5a Binary files /dev/null and b/client/src/assets/lose.png differ diff --git a/client/src/assets/win.png b/client/src/assets/win.png new file mode 100644 index 00000000..22701bcf Binary files /dev/null and b/client/src/assets/win.png differ diff --git a/client/src/components/gameplay/game-navigation.tsx b/client/src/components/gameplay/game-navigation.tsx index 31b7e19f..2f026c93 100644 --- a/client/src/components/gameplay/game-navigation.tsx +++ b/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> }) { 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 (