36 lines
1001 B
JavaScript
36 lines
1001 B
JavaScript
|
import{ usiState } from "react"
|
||
|
|
import Cuadrado from "./cuadros"
|
||
|
|
|
||
|
|
const Tablero =()=>{
|
||
|
|
const [cuadros, setCuadros]= usiState(Array(9).fill(''))
|
||
|
|
const [turno, setTuerno]=usiState('X')
|
||
|
|
|
||
|
|
const pintaFigura=(indexItem)=>{
|
||
|
|
|
||
|
|
const misCuadros= cuadros.slice()
|
||
|
|
setCuadros(misCuadros)
|
||
|
|
if(turno==='X'){ // Verifica los turnos
|
||
|
|
setTuerno('O')
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
setTuerno('X')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return(
|
||
|
|
<h1 class="px-5 text-5xl font-extrabold text-red-950 text-center">totito</h1>,// Titulo
|
||
|
|
<div class="p-5 grid grid-cols-3 gap-4 items-center">
|
||
|
|
{ //cuerpo e interactividad
|
||
|
|
cuadros.map((items, indexItem)=>{
|
||
|
|
return <Cuadrado
|
||
|
|
key={indexItem}
|
||
|
|
valor={items}
|
||
|
|
alHcerClick={()=> pintaFigura(indexItem)}
|
||
|
|
/>
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Tablero
|