daniel aminov

README.md

@@ -9,27 +9,35 @@ This project is designed for teaching and practicing the fundamentals of:
 - State flow between parent/child components
 
 ## 🛠️ Getting Started
+
 1. Clone the repository
+
 ```sh
 git clone https://github.com/your-username/tic-tac-toe-react.git
 
 cd tic-tac-toe-react
 ```
 
 2. Install dependencies
+
 ```sh
 npm install
 ```
+
 3. Start the development server
+
 ```sh
 npm run dev
 ```
+
 Your app should be running at:
+
 ```sh
 http://localhost:5173
 ```
 
 ## 🎯 Learning Goals
+
 - useState for managing UI state
 - Data flow between parent and child components
 - Component reusability (Board/Square)
@@ -40,42 +48,54 @@ http://localhost:5173
 - Managing more complex state
 
 ## 📌 Tasks to Implement (Step-by-Step)
+
 ### Task 1 — Make the Squares Clickable
 
 **Goal:** When clicking a square, place "X" or "O" depending on whose turn it is.
 **Hints:**
+
 - Use the existing isXNext state
 - Update the squares array with the new value
 - Toggle the turn after each move
 
 ### Task 2 — Prevent Overwriting Moves
+
 **Goal:** When a player gets 3 in a row, display a winner message.
 **Hints:**
+
 - Check `squares[index] !== null` before updating
 
 ### Task 3 — Add Winner Detection
+
 **Goal:** When a player gets 3 in a row, display a winner message.
 **Hints:**
+
 - Create a `calculateWinner()` helper
 - Use all 8 winning combinations
 - Add a winner: `string | null` state in Game
 
 ### Task 4 — Stop Moves After Win
+
 **Goal:** Disable the board after someone wins.
 **Hints:**
+
 - If there's a winner → ignore clicks
 - Or disable the buttons with disabled attribute
 
 ### Task 5 — Add a “Play Again” Button
+
 **Goal:** Disable the board after someone wins.
 **Hints:**
+
 - Clear squares back to `Array(9).fill(null)`
 - Reset `isXNext` → true
 
 ### Task 6 — Add a Turn Countdown Timer (useEffect)
+
 **Goal:** Each player gets e.g. 10 seconds to play. If time runs out → automatically switch turn.
 **Hints:**
+
 - Create `timeLeft` state
 - Use `useEffect` with `setInterval`
 - Reset timer on every turn change
-- Cleanup the interval on unmount or turn switch
+- Cleanup the interval on unmount or turn switch

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "react-toastify": "^11.0.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

src/App.css

@@ -1,5 +1,5 @@
 #root {
-  max-width: 1280px;
+  max-width: var(--app-max-width);
   margin: 0 auto;
   padding: 2rem;
   text-align: center;

src/App.tsx

@@ -1,8 +1,14 @@
 import "./App.css";
 import Game from "./components/Game";
-
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 function App() {
-    return <Game />;
+  return (
+    <>
+      <ToastContainer />
+      <Game />;
+    </>
+  );
 }
 
 export default App;

src/Constants.ts

@@ -0,0 +1,38 @@
+export const winningCombinations = [
+  [0, 1, 2],
+  [3, 4, 5],
+  [6, 7, 8],
+  [0, 3, 6],
+  [1, 4, 7],
+  [2, 5, 8],
+  [0, 4, 8],
+  [2, 4, 6],
+];
+
+// UI / game constants
+export const TIMER = {
+  TURN_SECONDS: 10,
+  TICK_MS: 1000,
+};
+
+export const MARKS = {
+  X: "x",
+  O: "o",
+  DISPLAY_X: "X",
+  DISPLAY_O: "O",
+};
+
+export const STRINGS = {
+  APP_TITLE: "Tic Tac Toe",
+  NEXT_PLAYER_LABEL: "Next Player:",
+  WINNER_TEMPLATE: (winner: string) => `the winner is ${winner} 🎉🎉🥳`,
+  RESET_BUTTON: "Reset Game",
+  RESET_NOTICE: "Game was reset",
+};
+
+export const BOARD = {
+  ROWS: 3,
+  COLS: 3,
+  CELL_COUNT: 9,
+  CELL_SIZE_PX: 80,
+};

src/Enums.ts

@@ -0,0 +1,4 @@
+export enum BoardIcons {
+  X = "../src/assets/close.svg",
+  O = "../src/assets/circle.svg",
+}

src/Utils.ts

@@ -0,0 +1,7 @@
+import { toast } from "react-toastify";
+
+export const notify = (message: string, autoClose?: number) =>
+  toast(message, {
+    position: "top-center",
+    autoClose: autoClose || 2500,
+  });

src/components/Board.tsx

@@ -1,22 +1,33 @@
+import type { ReactNode } from "react";
 import Square from "./Square";
+import { MARKS } from "../Constants";
+import { BoardIcons } from "../enums";
 
-interface BoardProps {
+interface IBoardProps {
   squares: (string | null)[];
   onSquareClick: (index: number) => void;
+  isDisabled?: boolean;
 }
 
-export default function Board(props: BoardProps) {
+export default function Board(props: IBoardProps) {
   return (
     <div className="board">
-      <Square value={props.squares[0]} onClick={() => props.onSquareClick(0)} />
-      <Square value={props.squares[1]} onClick={() => props.onSquareClick(1)} />
-      <Square value={props.squares[2]} onClick={() => props.onSquareClick(2)} />
-      <Square value={props.squares[3]} onClick={() => props.onSquareClick(3)} />
-      <Square value={props.squares[4]} onClick={() => props.onSquareClick(4)} />
-      <Square value={props.squares[5]} onClick={() => props.onSquareClick(5)} />
-      <Square value={props.squares[6]} onClick={() => props.onSquareClick(6)} />
-      <Square value={props.squares[7]} onClick={() => props.onSquareClick(7)} />
-      <Square value={props.squares[8]} onClick={() => props.onSquareClick(8)} />
+      {props.squares.map((value: ReactNode, index: number) => (
+        <Square
+          isDisabled={props?.isDisabled ?? false}
+          key={index}
+          value={
+            value == MARKS.X ? (
+              <img src={BoardIcons.X} alt="X" />
+            ) : value == MARKS.O ? (
+              <img src={BoardIcons.O} alt="O" />
+            ) : (
+              ""
+            )
+          }
+          onClick={() => props.onSquareClick(index)}
+        />
+      ))}
     </div>
   );
 }

src/components/Game.css

@@ -0,0 +1,17 @@
+.next-player-icon {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+}
+.rest-btn {
+  border-radius: 0.8em;
+  padding: 1em 2em;
+  font-size: 1em;
+  background-color: rgba(56, 61, 124, 0.744);
+}
+
+.rest-btn:hover {
+  box-shadow: 1px 1px 4px rgb(0, 0, 0);
+  cursor: pointer;
+  background-color: rgb(56, 61, 124);
+}