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

app terminada

Browse Source
This commit is contained in:
Cristian B. Yancis A. 2024-09-09 11:35:42 -06:00
parent 0a87bf8189
commit 2b643a0978
7 changed files with 168 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
.vscode/settings.json vendored
View File

@ -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"
}

7
app/cuadros.js
View File

@ -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 !== ''}
>

53
app/globals.css
View File

@ -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;
}

11
app/page.jsx
View File

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

55
app/tablero.js
View File

@ -1,33 +1,72 @@
'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>

28
conponent/Alert.js Normal file
View File

@ -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;

29
context/AlertWrapper.js Normal file
View File

@ -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;