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

Compare commits

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

No commits in common. "421e4799f1583634bc53bcc9a30f6c0a7efb52cd" and "bebc2b5733cbd4a9cc359f739975660fba7f6d39" have entirely different histories.
421e4799f1 ... bebc2b5733

7 changed files with 49 additions and 108 deletions
Show Stats Expand all files Collapse all files

55
app/cuadros.js
View File

@ -1,57 +1,12 @@
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="w-full h-full text-black border border-gray-500 text-2xl font-exterabold flex items-center justify-center bg-blue-300 rounded-xl" className="h-14 w-14 rounded-xl bg-emerald-500 p-6 text-2xl py-3 px-5 font-bold"
onClick={() => setShowMenu(true)} onClick={alHcerClick()}
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 Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
app/fonts/GeistMonoVF.woff Normal file
View File

Binary file not shown.

BIN
app/fonts/GeistVF.woff Normal file
View File

Binary file not shown.

15
app/layout.js
View File

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

9
app/page.jsx
View File

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