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

61
app/cuadros.js
View File

@ -1,57 +1,12 @@
import { useState } from "react";
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}
>
const Cuadrado =({valor, alHcerClick})=> {
return(
<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 !== ''}
className="h-14 w-14 rounded-xl bg-emerald-500 p-6 text-2xl py-3 px-5 font-bold"
onClick={alHcerClick()}
>
{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;
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'
export const metadata={
title: 'Totito',
description:'generado con next.js'
}
import Tablero from "./tablero"
export default function RootKLayout({children}){
const totito=()=>{
return(
<html lang="es">
<body>{children}</body>
</html>
<div className="container mx-auto">
<Tablero className="m-5 p-2"/>
</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>
)
}

56
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 [cuadros, setCuadros] = useState(Array(9).fill(""));
const [turno, setTurno]=useState('X')
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
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');
if(turno==='X'){
setTurno('O')
}else{
setTurno('X')
}
};
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
}
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={(valor) => pintaFigura(indexItem, valor)}
alHcerClick={()=> pintaFigura(indexItem)}
/>
))}
})
}
</div>
</>
);
};
)
}
export default Tablero;
export default Tablero