matchId check in Board instead of TicTacToe.tsx

src/tictactoe/Board.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { motion, AnimatePresence } from "framer-motion";
+import { useNakama } from "./providers/NakamaProvider";
 
 interface BoardProps {
   board: string[][];
@@ -20,6 +21,9 @@ export default function Board({
 }: BoardProps) {
   const myIndex = players.indexOf(myUserId ?? "");
   const gameReady = players.length === 2;
+  const {
+    matchId
+  } = useNakama();
 
   const mySymbol =
     myIndex === 0 ? "X" : myIndex === 1 ? "O" : null;
@@ -44,6 +48,8 @@ export default function Board({
   }
 
   return (
+    <>
+      {matchId && (
         <motion.div
           initial={{ opacity: 0, y: 10 }}
           animate={{ opacity: 1, y: 0 }}
@@ -173,5 +179,7 @@ export default function Board({
             </motion.div>
           )}
         </motion.div>
-  );
+      )}
+    </>
+  )
 }

src/tictactoe/TicTacToe.tsx

@@ -80,7 +80,6 @@ export default function TicTacToe() {
         onMatchDataCallback={onMatchDataCallback}
       />
 
-      {matchId && (
       <Board
         board={board}
         turn={turn}
@@ -89,7 +88,6 @@ export default function TicTacToe() {
         myUserId={session?.user_id ?? null}
         onCellClick={handleCellClick}
       />
-      )}
     </div>
   );
 }