From cc1f45457cb65ab2f32fd62630f007481081875d Mon Sep 17 00:00:00 2001 From: Vishesh 'ironeagle' Bangotra Date: Mon, 1 Dec 2025 20:36:46 +0530 Subject: [PATCH] refactoring game for separate folders for game boards and common logic for player --- src/{tictactoe/TicTacToe.tsx => App.tsx} | 16 +++--- src/{tictactoe => }/Player.tsx | 2 - .../tictactoe/TicTacToeBoard.tsx} | 14 ++--- .../tictactoe/TicTacToeLeaderboard.tsx} | 4 +- src/main.jsx | 8 +-- src/models/player.ts | 6 ++ .../providers/NakamaProvider.tsx | 0 src/{tictactoe => }/styles.css | 0 src/tictactoe/MatchList.tsx | 55 ------------------- src/tictactoe/Square.tsx | 12 ---- src/{tictactoe => }/utils/haikus.ts | 0 11 files changed, 23 insertions(+), 94 deletions(-) rename src/{tictactoe/TicTacToe.tsx => App.tsx} (92%) rename src/{tictactoe => }/Player.tsx (99%) rename src/{tictactoe/Board.tsx => games/tictactoe/TicTacToeBoard.tsx} (96%) rename src/{tictactoe/Leaderboard.tsx => games/tictactoe/TicTacToeLeaderboard.tsx} (93%) create mode 100644 src/models/player.ts rename src/{tictactoe => }/providers/NakamaProvider.tsx (100%) rename src/{tictactoe => }/styles.css (100%) delete mode 100644 src/tictactoe/MatchList.tsx delete mode 100644 src/tictactoe/Square.tsx rename src/{tictactoe => }/utils/haikus.ts (100%) diff --git a/src/tictactoe/TicTacToe.tsx b/src/App.tsx similarity index 92% rename from src/tictactoe/TicTacToe.tsx rename to src/App.tsx index 32dfac7..23e4e9d 100644 --- a/src/tictactoe/TicTacToe.tsx +++ b/src/App.tsx @@ -1,16 +1,14 @@ import React, { useState, useEffect } from "react"; import { motion } from "framer-motion"; import { useNakama } from "./providers/NakamaProvider"; -import Board from "./Board"; import Player from "./Player"; -import { PlayerModel } from "./Board"; +import { PlayerModel } from "./models/player"; -export default function TicTacToe() { - const [board, setBoard] = useState([ - ["", "", ""], - ["", "", ""], - ["", "", ""] - ]); +import TicTacToeBoard from "./games/tictactoe/TicTacToeBoard"; + +export default function App() { + // setting up a 2D game board + const [board, setBoard] = useState([[]]); const [turn, setTurn] = useState(0); const [winner, setWinner] = useState(null); const [gameOver, setGameOver] = useState(null); @@ -115,7 +113,7 @@ export default function TicTacToe() { minWidth: "300px", }} > - - ; // e.g. { symbol: "X" } -} +import { useNakama } from "../../providers/NakamaProvider"; +import getHaiku from "../../utils/haikus"; +import { PlayerModel } from "../../models/player"; interface BoardProps { board: string[][]; @@ -20,7 +14,7 @@ interface BoardProps { onCellClick: (row: number, col: number) => void; } -export default function Board({ +export default function TicTacToeBoard({ board, turn, winner, diff --git a/src/tictactoe/Leaderboard.tsx b/src/games/tictactoe/TicTacToeLeaderboard.tsx similarity index 93% rename from src/tictactoe/Leaderboard.tsx rename to src/games/tictactoe/TicTacToeLeaderboard.tsx index ef0186d..36b4844 100644 --- a/src/tictactoe/Leaderboard.tsx +++ b/src/games/tictactoe/TicTacToeLeaderboard.tsx @@ -4,9 +4,9 @@ import { ApiLeaderboardRecordList, // @ts-ignore } from "@heroiclabs/nakama-js/dist/api.gen" -import { useNakama } from "./providers/NakamaProvider"; +import { useNakama } from "../../providers/NakamaProvider"; -export default function Leaderboard({ +export default function TicTacToeLeaderboard({ intervalMs = 10000, }: { intervalMs?: number; diff --git a/src/main.jsx b/src/main.jsx index 0279091..259db63 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,14 +1,14 @@ import * as React from 'react'; import { createRoot } from 'react-dom/client'; -import TicTacToe from './tictactoe/TicTacToe'; -import { NakamaProvider } from './tictactoe/providers/NakamaProvider'; -import "./tictactoe/styles.css"; +import App from './App'; +import { NakamaProvider } from './providers/NakamaProvider'; +import "./styles.css"; const rootElement = document.getElementById('root'); const root = createRoot(rootElement); root.render( - + , ); diff --git a/src/models/player.ts b/src/models/player.ts new file mode 100644 index 0000000..17940cd --- /dev/null +++ b/src/models/player.ts @@ -0,0 +1,6 @@ +export interface PlayerModel { + user_id: string; + username: string; + index: number; + metadata: Record; // e.g. { symbol: "X" } +} diff --git a/src/tictactoe/providers/NakamaProvider.tsx b/src/providers/NakamaProvider.tsx similarity index 100% rename from src/tictactoe/providers/NakamaProvider.tsx rename to src/providers/NakamaProvider.tsx diff --git a/src/tictactoe/styles.css b/src/styles.css similarity index 100% rename from src/tictactoe/styles.css rename to src/styles.css diff --git a/src/tictactoe/MatchList.tsx b/src/tictactoe/MatchList.tsx deleted file mode 100644 index e83110a..0000000 --- a/src/tictactoe/MatchList.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { Match } from "@heroiclabs/nakama-js"; - -interface MatchListProps { - matches: Match[]; -} - -export default function MatchList({ matches }: MatchListProps) { - if (!matches.length) return

No open matches

; - - return ( -
-

Open Matches

- - - - - - - - - - - - {matches - .filter(m => m.size ?? 0 > 0) - .map((m, index) => ( - - - - - - ))} - -
Sr No.Match IDLabel
{index + 1}{m.match_id}{m.label ?? "-"}
-
- ); -} - -const th: React.CSSProperties = { - textAlign: "left", - padding: "8px", - background: "#f2f2f2", - borderBottom: "1px solid #ccc", -}; - -const td: React.CSSProperties = { - padding: "8px", - borderBottom: "1px solid #eee", -}; diff --git a/src/tictactoe/Square.tsx b/src/tictactoe/Square.tsx deleted file mode 100644 index 8dafb64..0000000 --- a/src/tictactoe/Square.tsx +++ /dev/null @@ -1,12 +0,0 @@ -interface SquareProps { - value: string; - onClick: () => void; -} - -export default function Square({ value, onClick } : SquareProps) { - return ( - - ); -} diff --git a/src/tictactoe/utils/haikus.ts b/src/utils/haikus.ts similarity index 100% rename from src/tictactoe/utils/haikus.ts rename to src/utils/haikus.ts