Compare commits
2 Commits
bebc2b5733
...
421e4799f1
| Author | SHA1 | Date | |
|---|---|---|---|
| 421e4799f1 | |||
| 220136f544 |
@ -1,12 +1,57 @@
|
||||
const Cuadrado =({valor, alHcerClick})=> {
|
||||
return(
|
||||
<button
|
||||
className="h-14 w-14 rounded-xl bg-emerald-500 p-6 text-2xl py-3 px-5 font-bold"
|
||||
onClick={alHcerClick()}
|
||||
>
|
||||
{ valor }
|
||||
</button>
|
||||
)
|
||||
}
|
||||
import { useState } from "react";
|
||||
|
||||
export default Cuadrado
|
||||
const Cuadrado = ({ valor, alHcerClick }) => {
|
||||
const [showMenu, setShowMenu] = useState(false);
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
setShowMenu(true);
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
|
||||
setTimeout(() => {
|
||||
if (!document.querySelector('.menu')?.contains(document.activeElement)) {
|
||||
setShowMenu(false);
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const handleSelect = (valor) => {
|
||||
alHcerClick(valor);
|
||||
setShowMenu(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative w-16 h-16"
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
<button
|
||||
className="w-full h-full text-black border border-gray-500 text-2xl font-exterabold flex items-center justify-center bg-blue-300 rounded-xl"
|
||||
onClick={() => setShowMenu(true)}
|
||||
disabled={valor !== ''}
|
||||
>
|
||||
{valor}
|
||||
</button>
|
||||
{showMenu && (
|
||||
<div className="menu absolute top-0 right-0 bg-white border border-gray-500 shadow-md p-2">
|
||||
<button
|
||||
className="block w-full text-center text-black p-1 hover:bg-gray-200"
|
||||
onClick={() => handleSelect('X')}
|
||||
>
|
||||
X
|
||||
</button>
|
||||
<button
|
||||
className="block w-full text-center text-black p-1 hover:bg-gray-200"
|
||||
onClick={() => handleSelect('O')}
|
||||
>
|
||||
O
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cuadrado;
|
||||
|
||||
BIN
app/favicon.ico
BIN
app/favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
Binary file not shown.
@ -1,10 +1,13 @@
|
||||
import Tablero from "./tablero"
|
||||
|
||||
const totito=()=>{
|
||||
return(
|
||||
<div className="container mx-auto">
|
||||
<Tablero className="m-5 p-2"/>
|
||||
</div>
|
||||
)
|
||||
import './globals.css'
|
||||
export const metadata={
|
||||
title: 'Totito',
|
||||
description:'generado con next.js'
|
||||
}
|
||||
export default totito
|
||||
|
||||
export default function RootKLayout({children}){
|
||||
return(
|
||||
<html lang="es">
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
9
app/page.jsx
Normal file
9
app/page.jsx
Normal file
@ -0,0 +1,9 @@
|
||||
import Tablero from "./tablero"
|
||||
|
||||
export default function HomePage(){
|
||||
return(
|
||||
<div className="container mx-auto">
|
||||
<Tablero className="m-5 p-2"/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,37 +1,39 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from "react"
|
||||
import Cuadrado from "./cuadros"
|
||||
'use client';
|
||||
|
||||
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
|
||||
import { useState } from "react";
|
||||
import Cuadrado from "./cuadros";
|
||||
|
||||
if(turno==='X'){
|
||||
setTurno('O')
|
||||
}else{
|
||||
setTurno('X')
|
||||
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 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
|
||||
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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user