TicTacToe React

.eslintrc

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "prettier"
  ],
  "env": {
    "browser": true
  },
  "parserOptions": {
    "ecmaVersion": 2021,
    "ecmaFeatures": {
      "jsx": true
    },
    "sourceType": "module"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    "react/prop-types": "off"
  }
}

.prettierrc

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "arrowParens": "avoid"
}

calculateWinner.js

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

Developer dependencies.MD

https://github.com/prettier/eslint-config-prettier

https://github.com/jsx-eslint/eslint-plugin-react

index.html

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap"
  rel="stylesheet"
/>
<title>TIC TAC TOE</title>

Resources.MD

Vite documentation - https://vitejs.dev/

Sass - https://sass-lang.com/

Google Fonts - https://fonts.google.com/

styles.scss

$green: #12e177;
$orange: #ffc72a;
$blue: #4c43d4;

body {
  font-family: 'Roboto', sans-serif;
  background-color: $blue;
  color: #fff;
  padding: 0;
  margin: 0;
}

button {
  background: none;
  border: none;
  outline: none;
  &:hover {
    cursor: pointer;
  }
}

.app {
  font-size: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text-green {
  color: $green;
}

.text-orange {
  color: $orange;
}

.history-wrapper {
  width: 300px;
  text-align: center;
  margin-bottom: 20px;
  .history {
    display: inline-block;
    padding: 0;
    margin: 0;
    li {
      list-style: none;
      text-align: left;
      &:before {
        content: '';
        border-radius: 50%;
        display: inline-block;
        height: 5px;
        width: 5px;
        background-color: $green;
        margin-right: 4px;
        margin-bottom: 1px;
      }

      .btn-move {
    	  color: #fff;
        &.active {
          font-weight: bold;
          color: $green;
        }
      }
    }
  }
}

.status-message {
	margin-bottom: 30px;
	font-size: 1.2rem;
	font-weight: lighter;
	span {
	  font-weight: normal;
	}
}

.btn-reset {
  font-size: 0.8rem;
  color: #fff;
  border-radius: 15px;
  padding: 12px 18px;
  margin-top: 25px;
  transition: all 0.2s;
  background-color: $blue;
  box-shadow: 0px 0px 0px 1px $orange;
  &.active {
    background-color: $orange;
    box-shadow: none;
  }
}

.board {
  .board-row {
    display: flex;
    flex-direction: row;
    border-bottom: 2px solid #fff;
    &:last-child {
      border-bottom: none;
    }
    .square {
      width: 80px;
      height: 80px;
      border-right: 2px solid #fff;
      font-size: 2.5rem;
      padding: 0;
      overflow: hidden;
      transition: all 0.2s;
      &:last-child {
        border-right: none;
      }
      &.winning {
	    animation: scaleText 1.4s infinite;
	    @keyframes scaleText {
	      0% {
	        transform: 2.5rem;
	      }
	      50% {
	        font-size: 3.5rem;
	      }
	      100% {
	        font-size: 2.5rem;
	      }
	    }
	  }
    }
  }
}

.bg-balls {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-width: 100%;
  z-index: -1;

  &:before,
  &:after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
  }

  &:before {
    background-color: $orange;
    right: -75px;
    bottom: -75px;
    @media screen and (min-width: 476px) {
      width: 220px;
      height: 220px;
      right: -110px;
      bottom: -110px;
    }
  }

  &:after {
    background-color: $green;
    top: -75px;
    left: -75px;
    @media screen and (min-width: 476px) {
      width: 220px;
      height: 220px;
      top: -110px;
      left: -110px;
    }
  }
}

tictactoe.mp4

Certainly! Here's a brief description and logic for a simple Tic-Tac-Toe game using React:

Description:
The Tic-Tac-Toe game is a classic two-player game where the players take turns marking a cell in a 3x3 grid with their respective symbols (typically 'X' and 'O'). The player who succeeds in placing three of their symbols in a horizontal, vertical, or diagonal row wins the game. If the grid is filled without any player achieving three in a row, the game ends in a draw.

Logic:
Board State:

Use a state to represent the 3x3 grid of the Tic-Tac-Toe board.
Each cell in the grid can be represented by a state variable, and it can be either 'X', 'O', or empty.
Player Turn:

Maintain a state variable to keep track of the current player's turn.
Alternate the player turn after each move.
Handling Clicks:

Attach a click event handler to each cell of the grid.
On a player's turn, when a cell is clicked, update the state to reflect the player's symbol in the clicked cell ('X' or 'O').
Check for Winner:

After each move, check if the current player has achieved three in a row horizontally, vertically, or diagonally.
If a winner is found, end the game and display the winner.
Check for Draw:

If the entire board is filled and no winner is found, declare a draw.
Reset the Game:

Provide an option to reset the game after it concludes (either due to a win or a

Thanks @Badshahshvm !

Thanks!