cbyancisa/app_totito_next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: cbyancisa:bebc2b5733cbd4a9cc359f739975660fba7f6d39
Branches Tags
cbyancisa:master
...
compare: cbyancisa:421e4799f1583634bc53bcc9a30f6c0a7efb52cd
Branches Tags
cbyancisa:master

2 Commits
bebc2b5733 ... 421e4799f1

Author SHA1 Message Date
Cristian Yancis
421e4799f1 css y arreglo del codigo 2024-09-06 19:35:13 -06:00
Cristian Yancis
220136f544 jsx 2024-09-06 15:57:59 -06:00
7 changed files with 111 additions and 52 deletions
Show Stats Expand all files Collapse all files

55
app/cuadros.js
View File

@ -1,12 +1,57 @@
import { useState } from "react";
const Cuadrado = ({ valor, alHcerClick }) => { 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 ( return (
<div
className="relative w-16 h-16"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<button <button
className="h-14 w-14 rounded-xl bg-emerald-500 p-6 text-2xl py-3 px-5 font-bold" 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={alHcerClick()} onClick={() => setShowMenu(true)}
disabled={valor !== ''}
> >
{valor} {valor}
</button> </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 export default Cuadrado;

BIN
app/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

BIN
app/fonts/GeistMonoVF.woff
View File

Binary file not shown.

BIN
app/fonts/GeistVF.woff
View File

Binary file not shown.

15
app/layout.js
View File

@ -1,10 +1,13 @@
import Tablero from "./tablero" import './globals.css'
export const metadata={
title: 'Totito',
description:'generado con next.js'
}
const totito=()=>{ export default function RootKLayout({children}){
return( return(
<div className="container mx-auto"> <html lang="es">
<Tablero className="m-5 p-2"/> <body>{children}</body>
</div> </html>
) )
} }
export default totito

9
app/page.jsx Normal file
View 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>
)
}

52
app/tablero.js
View File

@ -1,37 +1,39 @@
'use client'
import { useState } from "react" 'use client';
import Cuadrado from "./cuadros"
import { useState } from "react";
import Cuadrado from "./cuadros";
const Tablero = () => { const Tablero = () => {
const [cuadros, setCuadros] = useState(Array(9).fill("")); const [cuadros, setCuadros] = useState(Array(9).fill(''));
const [turno, setTurno]=useState('X') const [turno, setTurno] = useState('X');
const pintaFigura=(indexItem)=>{ const pintaFigura = (indexItem, valor) => {
const misCuaadros=cuadros.slice() if (cuadros[indexItem] === '') { // Solo actualiza si el cuadro está vacío
misCuaadros.splice(indexItem,1,turno) const misCuadros = cuadros.slice();
setCuadros(misCuaadros) // esta linea me da problemas misCuadros[indexItem] = valor; // Coloca el valor ('X' o 'O') en el cuadro
setCuadros(misCuadros);
if(turno==='X'){ // Alterna el turno
setTurno('O') setTurno(turno === 'X' ? 'O' : 'X');
}else{
setTurno('X')
}
} }
};
return ( 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"> <h1 className="px-5 text-5xl font-extrabold text-white text-center mt-20">Totito</h1> {/* Titulo */}
{ //cuerpo e interactividad <div className="mt-10 p-5 grid grid-cols-3 gap-4 items-center">
cuadros.map((items, indexItem)=>{ {
return <Cuadrado cuadros.map((items, indexItem) => (
<Cuadrado
key={indexItem} key={indexItem}
valor={items} valor={items}
alHcerClick={()=> pintaFigura(indexItem)} alHcerClick={(valor) => pintaFigura(indexItem, valor)}
/> />
}) ))}
}
</div> </div>
) </>
} );
};
export default Tablero export default Tablero;