40 lines
1.2 KiB
JavaScript
40 lines
1.2 KiB
JavaScript
|
|
'use client';
|
|
|
|
import { useState } from "react";
|
|
import Cuadrado from "./cuadros";
|
|
|
|
const Tablero = () => {
|
|
const [cuadros, setCuadros] = useState(Array(9).fill(''));
|
|
const [turno, setTurno] = useState('X');
|
|
|
|
const pintaFigura = (indexItem, valor) => {
|
|
if (cuadros[indexItem] === '') { // Solo actualiza si el cuadro está vacío
|
|
const misCuadros = cuadros.slice();
|
|
misCuadros[indexItem] = valor; // Coloca el valor ('X' o 'O') en el cuadro
|
|
setCuadros(misCuadros);
|
|
|
|
// Alterna el turno
|
|
setTurno(turno === 'X' ? 'O' : 'X');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<h1 className="px-5 text-5xl font-extrabold text-white text-center mt-20">Totito</h1> {/* Titulo */}
|
|
<div className="mt-10 p-5 grid grid-cols-3 gap-4 items-center">
|
|
{
|
|
cuadros.map((items, indexItem) => (
|
|
<Cuadrado
|
|
key={indexItem}
|
|
valor={items}
|
|
alHcerClick={(valor) => pintaFigura(indexItem, valor)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Tablero;
|