38 lines
1.0 KiB
JavaScript
38 lines
1.0 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)=>{
|
|
const misCuaadros=cuadros.slice()
|
|
misCuaadros.splice(indexItem,1,turno)
|
|
setCuadros(misCuaadros) // esta linea me da problemas
|
|
|
|
if(turno==='X'){
|
|
setTurno('O')
|
|
}else{
|
|
setTurno('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
|