app/cuadros.js

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-const Cuadrado = ({ valor, alHacerClick }) => {
+const Cuadrado = ({ valor, alHcerClick }) => {
     const [showMenu, setShowMenu] = useState(false);
 
     const handleMouseEnter = () => {
@@ -8,6 +8,7 @@ const Cuadrado = ({ valor, alHacerClick }) => {
     };
 
     const handleMouseLeave = () => {
+        
         setTimeout(() => {
             if (!document.querySelector('.menu')?.contains(document.activeElement)) {
                 setShowMenu(false);
@@ -16,7 +17,7 @@ const Cuadrado = ({ valor, alHacerClick }) => {
     };
 
     const handleSelect = (valor) => {
-        alHacerClick(valor);
+        alHcerClick(valor);
         setShowMenu(false); 
     };
 
@@ -27,7 +28,7 @@ const Cuadrado = ({ valor, alHacerClick }) => {
             onMouseLeave={handleMouseLeave}
         >
             <button
-                className="shadow-xl w-full h-full text-black border border-gray-500 text-2xl font-extrabold flex items-center border-4 border-black justify-center bg-blue-900 rounded-xl"
+                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 !== ''}
             >

app/globals.css

@@ -4,12 +4,12 @@
 
 :root {
   --background: #ffffff;
-  --foreground: #ffffff;
+  --foreground: #171717;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background:  #ffffff;
+    --background: #0a0a0a;
     --foreground: #ededed;
   }
 }
@@ -25,56 +25,3 @@ body {
     text-wrap: balance;
   }
 }
-
-/* Alert Styles */
-.alert-container {
-  position: fixed;
-  top: 16px; /* Ajusta la distancia desde el top */
-  left: 50%;
-  transform: translateX(-50%);
-  width: 96%;
-  max-width: 400px; /* Ajusta el ancho máximo según lo necesites */
-  z-index: 1000; /* Asegúrate de que la alerta esté por encima de otros elementos */
-  pointer-events: auto;
-}
-
-.alert {
-  display: flex;
-  flex-direction: column;
-  background-color: #ffffff;
-  border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-}
-
-.alert-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 16px;
-  background-color: black;
-  color: #ffffff;
-  border-bottom: 1px solid black;
-}
-
-.alert-title {
-  font-weight: bold;
-}
-
-.alert-close {
-  cursor: pointer;
-  background: none;
-  border: none;
-  color: inherit;
-  font-size: 16px;
-  line-height: 1;
-}
-
-.alert-close:hover {
-  color: #ffffff; /* Cambia el color al pasar el ratón sobre el botón */
-}
-
-.alert-body {
-  padding: 16px;
-  color: #333333;
-}

app/layout.js

@@ -1,6 +1,6 @@
 import './globals.css'
 export const metadata={
-    title: 'Totito_app',
+    title: 'Totito',
     description:'generado con next.js'
 }
 

app/page.jsx

@@ -1,12 +1,9 @@
-import Tablero from "./tablero";
+import Tablero from "./tablero"
-import AlertProvider from "@/context/AlertWrapper";
 
-export default function HomePage() {
+export default function HomePage(){
-    return (
+    return(
         <div className="container mx-auto">
-            <AlertProvider>
+            <Tablero className="m-5 p-2"/>
-                <Tablero className="m-5 p-2" />
-            </AlertProvider>
         </div>
     )
 }

app/tablero.js

@@ -1,71 +1,34 @@
-'use client';
 
-import { useState, useContext } from "react";
+'use client'; 
-import { Alertconstext } from "@/context/AlertWrapper";
+
+import { useState } from "react";
 import Cuadrado from "./cuadros";
 
 const Tablero = () => {
     const [cuadros, setCuadros] = useState(Array(9).fill(''));
     const [turno, setTurno] = useState('X');
-    const alert = useContext(Alertconstext);
-
-    const changecolor = () => {
-        // Función vacía, agregar funcionalidad si es necesario
-    };
-
-    const reiniciar = () => {
-        // Función vacía, agregar funcionalidad si es necesario
-    };
 
     const pintaFigura = (indexItem, valor) => {
-        if (cuadros[indexItem] !== '') {
+        if (cuadros[indexItem] === '') { // Solo actualiza si el cuadro está vacío
-            alert.show('Tablero', '¡Casilla ya seleccionada!');
-            return;
-        }
-        if (cuadros[indexItem] === '') {
             const misCuadros = cuadros.slice();
-            misCuadros[indexItem] = valor;
+            misCuadros[indexItem] = valor; // Coloca el valor ('X' o 'O') en el cuadro
             setCuadros(misCuadros);
 
+            // Alterna el turno
             setTurno(turno === 'X' ? 'O' : 'X');
         }
     };
 
-    const calcularGanador = (mytablero) => {
-        const jugadasGanadas = [
-            [0, 1, 2],
-            [3, 4, 5],
-            [6, 7, 8],
-            [0, 3, 6],
-            [1, 4, 7],
-            [2, 5, 8],
-            [0, 4, 8],
-            [2, 4, 6]
-        ];
-        for (let ij = 0; ij < jugadasGanadas.length; ij++) {
-            const [a, b, c] = jugadasGanadas[ij];
-            if (mytablero[a] && mytablero[a] === mytablero[b] && mytablero[a] === mytablero[c]) {
-                return mytablero[a];
-            }
-        }
-        return '';
-    };
-
-    const ganador = calcularGanador(cuadros);
-
     return (
         <>
-            <h1 className="px-5 text-5xl font-extrabold text-black text-center mt-20">Totito</h1>
+            <h1 className="px-5 text-5xl font-extrabold text-white text-center mt-20">Totito</h1> {/* Titulo */}
-            <div className="justify-center flex"> 
-                <span className="block text-center mt-5 text-black border w-64 py-2 rounded-xl shadow-xl font-bold">{'Turno: ' + (turno)}</span>
-                <span className="block text-center mt-5 text-black border w-64 py-2 rounded-xl shadow-xl font-bold">{'El ganador es: ' + (ganador || 'Nadie aún')}</span>
-            </div>
             <div className="mt-10 p-5 grid grid-cols-3 gap-4 items-center">
-                {cuadros.map((items, indexItem) => (
+                {
+                cuadros.map((items, indexItem) => (
                     <Cuadrado 
                         key={indexItem} 
                         valor={items}
-                        alHacerClick={(valor) => pintaFigura(indexItem, valor)}
+                        alHcerClick={(valor) => pintaFigura(indexItem, valor)}
                     />
                 ))}
             </div>

conponent/Alert.js

@@ -1,28 +0,0 @@
-const Alert = ({ viuwAlert, titulo, mensaje, setViuwAlert }) => {
-    return (
-        <>
-            {viuwAlert && 
-                <div className="alert-container">
-                    <div className="alert">
-                        <div className="alert-header">
-                            <p className="alert-title">
-                                {titulo}
-                            </p>
-                            <button type="button"
-                                    className="alert-close"
-                                    aria-label="close"
-                                    onClick={() => setViuwAlert(false)}>
-                                ×
-                            </button>
-                        </div>
-                        <div className="alert-body">
-                            {mensaje}
-                        </div>
-                    </div>
-                </div>
-            }
-        </>
-    );
-};
-
-export default Alert;

context/AlertWrapper.js

@@ -1,29 +0,0 @@
-'use client';
-import { createContext, useState } from "react";
-import Alert from "@/conponent/Alert";
-
-export const Alertconstext = createContext();
-
-const AlertProvider = ({ children }) => {
-    const [viuwAlert, setViuwAlert] = useState(false);
-    const [titulo, setTitulo] = useState('Alerta');
-    const [mensaje, setMensaje] = useState('');
-
-    const AlertWrapper = {
-        show: (titulo = 'Alerta', mensaje) => {
-            setTitulo(titulo);
-            setMensaje(mensaje);
-            setViuwAlert(true);
-        },
-        hide: () => setViuwAlert(false)
-    }
-
-    return (
-        <Alertconstext.Provider value={AlertWrapper}>
-            {children}
-            <Alert viuwAlert={viuwAlert} titulo={titulo} mensaje={mensaje} setViuwAlert={setViuwAlert} />
-        </Alertconstext.Provider>
-    )
-};
-
-export default AlertProvider;