app terminada

.vscode/settings.json

@@ -1,22 +0,0 @@
-{
-    "workbench.colorCustomizations": {
-        "activityBar.activeBackground": "#4e3b40",
-        "activityBar.background": "#4e3b40",
-        "activityBar.foreground": "#e7e7e7",
-        "activityBar.inactiveForeground": "#e7e7e799",
-        "activityBarBadge.background": "#000000",
-        "activityBarBadge.foreground": "#e7e7e7",
-        "commandCenter.border": "#e7e7e799",
-        "sash.hoverBorder": "#4e3b40",
-        "statusBar.background": "#312528",
-        "statusBar.foreground": "#e7e7e7",
-        "statusBarItem.hoverBackground": "#4e3b40",
-        "statusBarItem.remoteBackground": "#312528",
-        "statusBarItem.remoteForeground": "#e7e7e7",
-        "titleBar.activeBackground": "#312528",
-        "titleBar.activeForeground": "#e7e7e7",
-        "titleBar.inactiveBackground": "#31252899",
-        "titleBar.inactiveForeground": "#e7e7e799"
-    },
-    "peacock.color": "#312528"
-}

app/cuadros.js

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

app/globals.css

@@ -25,3 +25,56 @@ 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/page.jsx

@@ -1,9 +1,12 @@
-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">
-            <Tablero className="m-5 p-2"/>
+            <AlertProvider>
+                <Tablero className="m-5 p-2" />
+            </AlertProvider>
         </div>
     )
 }

app/tablero.js

@@ -1,33 +1,72 @@
-'use client'; 
+'use client';
 
-import { useState } from "react";
+import { useState, useContext } from "react";
+import { Alertconstext } from "@/context/AlertWrapper";
 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] === '') { // Solo actualiza si el cuadro está vacío
+        if (cuadros[indexItem] !== '') {
+            alert.show('Tablero', '¡Casilla ya seleccionada!');
+            return;
+        }
+        if (cuadros[indexItem] === '') {
             const misCuadros = cuadros.slice();
-            misCuadros[indexItem] = valor; // Coloca el valor ('X' o 'O') en el cuadro
+            misCuadros[indexItem] = valor;
             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> {/* Titulo */}
+            <h1 className="px-5 text-5xl font-extrabold text-black text-center mt-20">Totito</h1>
+            <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}
-                        alHcerClick={(valor) => pintaFigura(indexItem, valor)}
+                        alHacerClick={(valor) => pintaFigura(indexItem, valor)}
                     />
                 ))}
             </div>

conponent/Alert.js

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,29 @@
+'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;