refactoring game for separate folders for game boards and common logic for player

2025-12-01 20:36:46 +05:30
parent df0f502191
commit cc1f45457c
11 changed files with 23 additions and 94 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,129 @@
+import React, { useState, useEffect } from "react";
+import { motion } from "framer-motion";
+import { useNakama } from "./providers/NakamaProvider";
+import Player from "./Player";
+import { PlayerModel } from "./models/player";
+
+import TicTacToeBoard from "./games/tictactoe/TicTacToeBoard";
+
+export default function App() {
+  // setting up a 2D game board
+  const [board, setBoard] = useState<string[][]>([[]]);
+  const [turn, setTurn] = useState<number>(0);
+  const [winner, setWinner] = useState<string | null>(null);
+  const [gameOver, setGameOver] = useState<boolean | null>(null);
+  const [players, setPlayers] = useState<PlayerModel[]>([]);
+
+  const { sendMatchData, onMatchData, matchId, session } = useNakama();
+
+  // ------------------------------------------
+  // MATCH DATA CALLBACK (from Player component)
+  // ------------------------------------------
+  function onMatchDataCallback(msg: { opCode: number; data: any }) {
+    console.log("[Match Data]", msg);
+
+    if (msg.opCode === 2) {
+      const state = msg.data;
+      console.log("Match state:", state);
+
+      setBoard(state.board.grid);
+      setTurn(state.turn);
+      setGameOver(state.game_over);
+      if (state.winner >= 0) {
+        setWinner(state.players[state.winner].username);
+      // } else if (state.game_over) {
+      //   // Game ended but winner = -1 → draw
+      //   setWinner("draw");
+      } else {
+        // Ongoing game, no winner
+        setWinner(null);
+      }
+      setPlayers(state.players || []);
+    }
+  }
+
+  useEffect(() => {
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, []);
+
+  useEffect(() => {
+    onMatchData(onMatchDataCallback);
+  }, [onMatchData]);
+
+  // ------------------------------------------
+  // SEND A MOVE
+  // ------------------------------------------
+  function handleCellClick(row: number, col: number) {
+    if (!matchId) return;
+
+    sendMatchData(matchId, 1, {data: {row, col}});
+  }
+
+  return (
+    <div
+      style={{
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        background: "#060606",
+        color: "white",
+        overflow: "hidden",
+      }}
+    >
+      {/* ---------------- HEADER (always fixed at top) ---------------- */}
+      <header
+        style={{
+          padding: "16px 20px",
+          background: "rgba(255,255,255,0.04)",
+          borderBottom: "1px solid rgba(255,255,255,0.08)",
+          backdropFilter: "blur(6px)",
+          textAlign: "center",
+          fontSize: "26px",
+          fontWeight: 700,
+          letterSpacing: "1px",
+        }}
+      >
+        Tic Tac Toe
+      </header>
+
+      {/* ---------------- MAIN CONTENT (scrolls) ---------------- */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        style={{
+          flex: 1,
+          overflowY: "auto",
+          padding: "20px",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+        }}
+      >
+        <Player onMatchDataCallback={onMatchDataCallback} />
+
+        <div
+          style={{
+            padding: "20px",
+            background: "rgba(255,255,255,0.03)",
+            borderRadius: "20px",
+            boxShadow: "0 6px 20px rgba(0,0,0,0.4)",
+            minWidth: "300px",
+          }}
+        >
+          <TicTacToeBoard
+            board={board}
+            turn={turn}
+            winner={winner}
+            gameOver={gameOver}
+            players={players}
+            myUserId={session?.user_id ?? null}
+            onCellClick={handleCellClick}
+          />
+        </div>
+      </motion.div>
+    </div>
+  );
+}