Trying some responsive on list of boards

luloxi · Jan 12, 2024 · 07ed606 · 07ed606
1 parent 1805a30
commit 07ed606
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 23 deletions.
diff --git a/packages/nextjs/components/tictactoe/TicTacToeBoard.tsx b/packages/nextjs/components/tictactoe/TicTacToeBoard.tsx
@@ -15,14 +15,13 @@ const TicTacToeBoard: React.FC<TicTacToeBoardProps> = ({ game, isGameAccepted, i
     args: [BigInt(game.gameId)],
   });
 
-  const { data: numberOfMoves } = useScaffoldContractRead({
-    contractName: "TicTacToe",
-    functionName: "getNumberOfMoves",
-    args: [BigInt(game.gameId)],
-  });
+  // const { data: numberOfMoves } = useScaffoldContractRead({
+  //   contractName: "TicTacToe",
+  //   functionName: "getNumberOfMoves",
+  //   args: [BigInt(game.gameId)],
+  // });
 
   console.log("boardFromContract: ", boardFromContract);
-  console.log("numberOfMoves: ", numberOfMoves);
 
   useEffect(() => {
     // Update the local board based on the latest data from the contract
@@ -60,13 +59,9 @@ const TicTacToeBoard: React.FC<TicTacToeBoardProps> = ({ game, isGameAccepted, i
           <strong> {game.gameId}</strong>
         </Box>
       </Flex>
-      <Flex direction="row" justifyContent={"space-around"} textAlign={"center"} gap={6} padding={3}>
-        <Box>
-          Player 1: <Address address={game.player1} />
-        </Box>
-        <Box>
-          Player 2: <Address address={game.player2} />
-        </Box>
+      <Flex direction="row" justifyContent={"center"} textAlign={"center"} gap={6} padding={3}>
+        <Address address={game.player1} /> {isGameAccepted ? "is playing against" : "has challenged"}{" "}
+        <Address address={game.player2} />
       </Flex>
       {isGameAccepted ? (
         ""
@@ -75,18 +70,18 @@ const TicTacToeBoard: React.FC<TicTacToeBoardProps> = ({ game, isGameAccepted, i
           direction="row"
           alignItems={"center"}
           textAlign={"center"}
-          justifyContent={"space-around"}
+          justifyContent={"center"}
           gap={6}
           paddingBottom={3}
         >
+          <Box>
+            Each player bets: <br /> {parseFloat(ethers.formatEther(game.bet.toString())).toFixed(4)} ETH
+          </Box>
           <Box>
             <Button colorScheme={"green"} onClick={() => acceptGame()}>
               Accept game
             </Button>
           </Box>
-          <Box>
-            Each player bets: <br /> {parseFloat(ethers.formatEther(game.bet.toString())).toFixed(4)} ETH
-          </Box>
         </Flex>
       )}
       {isGameAccepted ? (
@@ -101,10 +96,7 @@ const TicTacToeBoard: React.FC<TicTacToeBoardProps> = ({ game, isGameAccepted, i
           <Box>
             Each player betted: <br /> {parseFloat(ethers.formatEther(game.bet.toString())).toFixed(4)} ETH
           </Box>
-          <Box>
-            # of moves made: <br />
-            {numberOfMoves}
-          </Box>
+
           <Box>
             Game state: <br />
             {isGameFinished ? "Finished" : "Not finished"}

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
@@ -158,14 +158,14 @@ const Home: NextPage = () => {
             filter: "brightness(0.3)",
           }}
         />
-        <Flex direction={{ base: "column", md: "row" }} justify="space-around" gap={10} align="center" marginTop={4}>
+        <Flex direction={{ base: "column", md: "row" }} justify="center" gap={10} align="center" marginTop={4}>
           <CreateChallengeBox />
           <Card
             direction={{ base: "column", sm: "row" }}
             width="container.sm"
             maxWidth={{ base: "container.sm", sm: "container.sm", md: "container.md" }}
             variant="solid"
-            maxHeight={{ base: "container.md", sm: "container.sm", md: "720" }}
+            maxHeight={{ base: "240", sm: "240", md: "480", lg: "720" }}
             overflow={"auto"}
             textColor={"white"}
             backgroundColor={"gray.900"}