[V0_FILE]typescriptreact:file="tic-tac-toe.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" function Square({ value, onSquareClick, isWinningSquare, }: { value: string | null onSquareClick: () => void isWinningSquare: boolean }) { return ( ) } function Board({ squares, xIsNext, onPlay, }: { squares: (string | null)[] xIsNext: boolean onPlay: (nextSquares: (string | null)[]) => void }) { const winner = calculateWinner(squares) const winningLine = winner ? winner.line : [] function handleClick(i: number) { if (squares[i] || calculateWinner(squares)) { return } const nextSquares = squares.slice() nextSquares[i] = xIsNext ? "X" : "O" onPlay(nextSquares) } let status if (winner) { status = `Winner: ${winner.player}` } else if (squares.every((square) => square !== null)) { status = "Draw! Game over" } else { status = `Next player: ${xIsNext ? "X" : "O"}` } return (

{status}

{Array(9) .fill(null) .map((_, i) => ( handleClick(i)} isWinningSquare={winningLine.includes(i)} /> ))}

) } export default function TicTacToe() { const [history, setHistory] = useState<(string | null)[][]>([Array(9).fill(null)]) const [currentMove, setCurrentMove] = useState(0) const xIsNext = currentMove % 2 === 0 const currentSquares = history[currentMove] function handlePlay(nextSquares: (string | null)[]) { const nextHistory = [...history.slice(0, currentMove + 1), nextSquares] setHistory(nextHistory) setCurrentMove(nextHistory.length - 1) } function jumpTo(move: number) { setCurrentMove(move) } function resetGame() { setHistory([Array(9).fill(null)]) setCurrentMove(0) } return (

Tic Tac Toe

Game History

{history.map((_, move) => ( ))}

) } function calculateWinner(squares: (string | null)[]) { 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 { player: squares[a], line: lines[i] } } } return null }

About

About