Tic Tac Toe ist einfach, wird aber in Frontend-Runden am häufigsten gefragt! WARUM ?

import "./App.css"
import TicTacToe from "./components/TicTacToe"
const App = () => {
  return (
    <div >
        <TicTacToe />
    </div>
  )
}
export default App

import useTicTacToe from "../hooks/useTicTacToe"

const TicTacToe = () => {

    const {board, handleClick, getStatusMessage, resetGame} = useTicTacToe();

    return (
        <div className="main">
            <div className="heading">
                <h1>
                    {
                    getStatusMessage()
                    }
                </h1>
                <button onClick={resetGame}>Reset Game</button>
            </div>
            <div className="board">
                {
                    board.map((player, i) => {
                        return <button key={i} onClick={() => handleClick(i)} disabled = {player !== null}>{player}</button>
                    })
                }
            </div>
        </div>
    )
}

export default TicTacToe

import { useState } from "react";
const intialGame = () => Array(9).fill(null);

const useTicTacToe = () => {
    const [board, setBoard] = useState(intialGame())
    const [isXNext, setIsXNext] = useState(true);
    const winning_patterns = [
        [0,1,2],
        [3,4,5],
        [6,7,8],
        [0,4,8],
        [2,4,6],
        [0,3,6],
        [1,4,7],
        [2,5,8],

    ];
    const calculateWinner = (currentBoard) => {
        for(let i = 0 ; i < winning_patterns.length ; i++) {
            const [a, b, c] = winning_patterns[i];
            if(currentBoard[a] && currentBoard[a] === currentBoard[b] && currentBoard[a] === currentBoard[c]) {
                return currentBoard[a];
            }
        }
        return null;
    }
    const resetGame = () => {
        setBoard(intialGame());
    }
    const getStatusMessage = () => {
        const winner = calculateWinner(board);
        if(winner) return `Player ${winner} Won ?`
        if(!board.includes(null)) return `It's a Draw`
        return `Player ${isXNext === true ? "X" : "O"} Turn`
    }
    const handleClick = (index) => {
        const winner = calculateWinner(board);
        if(winner) return null;
        const newBoard = [...board];
        newBoard[index] = isXNext ? "X" : "O";
        setBoard(newBoard);
        setIsXNext(!isXNext);
    }

    return {board, calculateWinner, resetGame, getStatusMessage, handleClick}
}

export default useTicTacToe;

.board {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}

.heading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.board button {
  font-size: 35px;
}