77 lines
2.5 KiB
JavaScript
77 lines
2.5 KiB
JavaScript
'use client';
|
|
|
|
import { useState, useContext } from "react";
|
|
import { Alertconstext } from "@/context/AlertWrapper";
|
|
import Cuadrado from "./cuadros";
|
|
|
|
const Tablero = () => {
|
|
const [cuadros, setCuadros] = useState(Array(9).fill(''));
|
|
const [turno, setTurno] = useState('X');
|
|
const alert = useContext(Alertconstext);
|
|
|
|
const changecolor = () => {
|
|
// Función vacía, agregar funcionalidad si es necesario
|
|
};
|
|
|
|
const reiniciar = () => {
|
|
// Función vacía, agregar funcionalidad si es necesario
|
|
};
|
|
|
|
const pintaFigura = (indexItem, valor) => {
|
|
if (cuadros[indexItem] !== '') {
|
|
alert.show('Tablero', '¡Casilla ya seleccionada!');
|
|
return;
|
|
}
|
|
if (cuadros[indexItem] === '') {
|
|
const misCuadros = cuadros.slice();
|
|
misCuadros[indexItem] = valor;
|
|
setCuadros(misCuadros);
|
|
|
|
setTurno(turno === 'X' ? 'O' : 'X');
|
|
}
|
|
};
|
|
|
|
const calcularGanador = (mytablero) => {
|
|
const jugadasGanadas = [
|
|
[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 ij = 0; ij < jugadasGanadas.length; ij++) {
|
|
const [a, b, c] = jugadasGanadas[ij];
|
|
if (mytablero[a] && mytablero[a] === mytablero[b] && mytablero[a] === mytablero[c]) {
|
|
return mytablero[a];
|
|
}
|
|
}
|
|
return '';
|
|
};
|
|
|
|
const ganador = calcularGanador(cuadros);
|
|
|
|
return (
|
|
<>
|
|
<h1 className="px-5 text-5xl font-extrabold text-black text-center mt-20">Totito</h1>
|
|
<div className="justify-center flex">
|
|
<span className="block text-center mt-5 text-black border w-64 py-2 rounded-xl shadow-xl font-bold">{'Turno: ' + (turno)}</span>
|
|
<span className="block text-center mt-5 text-black border w-64 py-2 rounded-xl shadow-xl font-bold">{'El ganador es: ' + (ganador || 'Nadie aún')}</span>
|
|
</div>
|
|
<div className="mt-10 p-5 grid grid-cols-3 gap-4 items-center">
|
|
{cuadros.map((items, indexItem) => (
|
|
<Cuadrado
|
|
key={indexItem}
|
|
valor={items}
|
|
alHacerClick={(valor) => pintaFigura(indexItem, valor)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Tablero;
|