+<<<<<<< HEAD
+
+=======
{
height: "400px",
}}
>
+>>>>>>> 5ba5d7a24af347ce938db3c693acb141f5a12858
{Array.from({ length: GRID_SIZE * GRID_SIZE }).map((_, index) => {
const x = index % GRID_SIZE;
const y = Math.floor(index / GRID_SIZE);
@@ -263,21 +322,21 @@ const Snake = () => {
- Use arrow keys to control the snake
+ Use W/A/S/D keys to control the snake
diff --git a/frontend/src/games/TicTacToe.js b/frontend/src/games/TicTacToe.js
index d1d2b12..c23193b 100644
--- a/frontend/src/games/TicTacToe.js
+++ b/frontend/src/games/TicTacToe.js
@@ -1,5 +1,26 @@
-import React, { useState, useEffect } from 'react';
-import { RotateCcw, Trophy, X, Circle } from 'lucide-react';
+import React, { useState, useEffect } from "react";
+import { RotateCcw, Trophy, X, Circle } from "lucide-react";
+
+const WINNING_PATTERNS = [
+ [0, 1, 2],
+ [3, 4, 5],
+ [6, 7, 8],
+ [0, 3, 6],
+ [1, 4, 7],
+ [2, 5, 8],
+ [0, 4, 8],
+ [2, 4, 6],
+];
+
+const calculateWinner = (squares) => {
+ for (let i = 0; i < WINNING_PATTERNS.length; i++) {
+ const [a, b, c] = WINNING_PATTERNS[i];
+ if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
+ return { winner: squares[a], line: [a, b, c] };
+ }
+ }
+ return null;
+};
const TicTacToe = () => {
const [board, setBoard] = useState(Array(9).fill(null));
@@ -8,36 +29,20 @@ const TicTacToe = () => {
const [winningLine, setWinningLine] = useState([]);
const [scores, setScores] = useState({ X: 0, O: 0, draws: 0 });
- const winningPatterns = [
- [0, 1, 2], [3, 4, 5], [6, 7, 8], // rows
- [0, 3, 6], [1, 4, 7], [2, 5, 8], // columns
- [0, 4, 8], [2, 4, 6] // diagonals
- ];
-
- const calculateWinner = (squares) => {
- for (let i = 0; i < winningPatterns.length; i++) {
- const [a, b, c] = winningPatterns[i];
- if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
- return { winner: squares[a], line: [a, b, c] };
- }
- }
- return null;
- };
-
useEffect(() => {
const result = calculateWinner(board);
if (result) {
setWinner(result.winner);
setWinningLine(result.line);
- setScores(prev => ({
+ setScores((prev) => ({
...prev,
- [result.winner]: prev[result.winner] + 1
+ [result.winner]: prev[result.winner] + 1,
}));
- } else if (board.every(square => square !== null)) {
- setWinner('draw');
- setScores(prev => ({
+ } else if (board.every((square) => square !== null)) {
+ setWinner("draw");
+ setScores((prev) => ({
...prev,
- draws: prev.draws + 1
+ draws: prev.draws + 1,
}));
}
}, [board]);
@@ -48,7 +53,7 @@ const TicTacToe = () => {
}
const newBoard = [...board];
- newBoard[index] = isXNext ? 'X' : 'O';
+ newBoard[index] = isXNext ? "X" : "O";
setBoard(newBoard);
setIsXNext(!isXNext);
};
@@ -66,16 +71,18 @@ const TicTacToe = () => {
};
const getSquareClassName = (index) => {
- let baseClass = "w-24 h-24 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 flex items-center justify-center text-4xl font-bold transition-all duration-200 hover:scale-105 ";
-
+ let baseClass =
+ "w-24 h-24 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 flex items-center justify-center text-4xl font-bold transition-all duration-200 hover:scale-105 ";
+
if (winningLine.includes(index)) {
baseClass += "bg-green-200 dark:bg-green-700 border-green-500 ";
}
-
+
if (!board[index] && !winner) {
- baseClass += "hover:bg-purple-50 dark:hover:bg-purple-900 cursor-pointer ";
+ baseClass +=
+ "hover:bg-purple-50 dark:hover:bg-purple-900 cursor-pointer ";
}
-
+
return baseClass;
};
@@ -88,19 +95,19 @@ const TicTacToe = () => {
onClick={() => handleClick(index)}
disabled={!!winner || !!board[index]}
>
- {value === 'X' &&
}
- {value === 'O' &&
}
+ {value === "X" &&
}
+ {value === "O" &&
}
);
};
const getStatusMessage = () => {
- if (winner === 'draw') {
+ if (winner === "draw") {
return "It's a draw!";
} else if (winner) {
return `Player ${winner} wins!`;
} else {
- return `Player ${isXNext ? 'X' : 'O'}'s turn`;
+ return `Player ${isXNext ? "X" : "O"}'s turn`;
}
};
@@ -126,14 +133,14 @@ const TicTacToe = () => {