Skip to content

Commit 0e3ccaa

Browse files
quinteselenaquinteselena
committed
game preview FINISHED, internationalization FINISHED, game logic ONGOING
1 parent f9d03b8 commit 0e3ccaa

File tree

16 files changed

+1484
-330
lines changed

16 files changed

+1484
-330
lines changed

‎webapp/src/App.css‎

Lines changed: 105 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1+
/* App.css - Base Global */
2+
13
:root {
4+
--bg-dark: #0f172a;
25
--bg-gradient: linear-gradient(135deg, #1e3a8a 0%, #0f172a 50%, #7f1d1d 100%);
36
--game-blue: #60a5fa;
47
--game-blue-dark: #2563eb;
8+
--game-red: #ef4444;
59
--text-shadow: 0 0 25px rgba(96, 165, 250, 0.5);
610
}
711

@@ -12,26 +16,39 @@ body {
1216
font-family: 'Orbitron', sans-serif;
1317
}
1418

19+
@font-face {
20+
font-family: 'Cubic';
21+
src: url('./assets/fonts/cubic.ttf') format('truetype');
22+
font-weight: normal;
23+
font-style: normal;
24+
}
25+
1526
.App {
27+
background: var(--bg-gradient);
1628
min-height: 100vh;
29+
width: 100vw;
1730
display: flex;
1831
justify-content: center;
1932
}
2033

2134
.menu-container {
2235
width: 100%;
2336
max-width: 1200px;
37+
height: 100vh;
38+
padding: 30px;
2439
display: flex;
2540
flex-direction: column;
41+
box-sizing: border-box;
2642
justify-content: center;
2743
}
2844

2945
.header-icons {
30-
position: absolute;
31-
top: 40px;
32-
right: 40px;
46+
position: absolute;
47+
top: 40px;
48+
right: 40px;
3349
display: flex;
3450
gap: 20px;
51+
z-index: 100;
3552
}
3653

3754
.icon-btn {
@@ -42,13 +59,20 @@ body {
4259
transition: 0.3s;
4360
}
4461

62+
.icon-btn:hover {
63+
color: #ffffff !important;
64+
filter: drop-shadow(0 0 8px #60a5fa);
65+
transform: scale(1.1);
66+
}
67+
4568
.title-game {
46-
font-family: 'Cubic', sans-serif;
69+
font-family: 'Cubic', sans-serif !important;
4770
font-size: 8rem;
4871
text-align: center;
49-
margin-bottom: 80px;
72+
margin: 30px 0 100px 0;
5073
color: var(--game-blue);
5174
text-shadow: var(--text-shadow);
75+
text-transform: uppercase;
5276
}
5377

5478
.grid-buttons {
@@ -58,68 +82,118 @@ body {
5882
justify-content: center;
5983
}
6084

85+
.full-width {
86+
grid-column: 1 / span 2;
87+
}
88+
89+
/* Estilos de Botones Globales */
90+
.main-button, .boton-cerrar-fijo {
91+
font-family: 'Orbitron', sans-serif !important;
92+
}
93+
6194
.main-button {
6295
background: rgba(15, 23, 42, 0.7);
6396
border: 2px solid rgba(255, 255, 255, 0.1);
64-
padding: 40px;
97+
padding: 45px;
6598
border-radius: 25px;
6699
color: white;
67-
font-size: 1.5rem;
100+
font-size: 1.6rem;
68101
cursor: pointer;
69102
transition: 0.3s;
103+
letter-spacing: 3px;
70104
}
71105

72106
.main-button:hover {
73-
transform: translateY(-5px);
107+
transform: translateY(-8px);
74108
border-color: var(--game-blue);
109+
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
75110
}
76111

77-
.btn-blue { background: linear-gradient(to right, #2563eb, #1d4ed8); border: none; }
78-
.full-width { grid-column: 1 / span 2; }
112+
.btn-blue {
113+
background: linear-gradient(to right, #2563eb, #1d4ed8);
114+
border: none;
115+
}
79116

80-
/* MODALS */
117+
/* Modales Base */
81118
.modal-overlay {
82119
position: fixed;
83-
inset: 0;
84-
background: rgba(0, 0, 0, 0.8);
120+
top: 0;
121+
left: 0;
122+
width: 100vw;
123+
height: 100vh;
124+
background: rgba(0, 0, 0, 0.7);
85125
backdrop-filter: blur(8px);
86126
display: flex;
87127
justify-content: center;
88128
align-items: center;
89-
z-index: 2000;
129+
z-index: 1000;
90130
}
91131

92132
.modal-content {
93-
background: #0f172a;
94-
padding: 40px;
133+
position: relative !important;
134+
background: rgba(15, 23, 42, 0.95);
135+
padding: 60px 40px 40px 40px;
95136
border-radius: 30px;
96137
border: 2px solid var(--game-blue);
97-
position: relative;
98138
width: 90%;
99139
max-width: 500px;
100-
color: white;
101140
}
102141

103142
.boton-cerrar-fijo {
104-
position: absolute;
105-
top: 15px; right: 20px;
106-
background: none; border: none;
143+
position: absolute !important;
144+
top: 15px !important;
145+
right: 20px !important;
146+
background: none !important;
147+
border: none !important;
148+
color: var(--game-blue) !important;
149+
font-size: 3rem !important;
150+
cursor: pointer;
151+
line-height: 1 !important;
152+
z-index: 1010;
153+
}
154+
155+
.modal-title {
156+
font-family: 'Cubic', sans-serif !important;
107157
color: var(--game-blue);
108158
font-size: 2.5rem;
109-
cursor: pointer;
159+
margin-bottom: 30px;
160+
text-align: center;
110161
}
111162

112-
.modal-grid {
113-
display: flex;
114-
flex-direction: column;
115-
gap: 15px;
163+
/* Visibilidad de Textos */
164+
.profile-info p, .how-to-step p, .unique-id-text {
165+
color: #cbd5e1 !important;
166+
font-family: 'Orbitron', sans-serif !important;
167+
font-size: 1rem;
168+
line-height: 1.5;
169+
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
170+
}
171+
172+
/* Busca .modal-text en tu App.css y déjalo así */
173+
.modal-text {
174+
color: #ffffff !important; /* Blanco puro */
175+
font-family: 'Orbitron', sans-serif !important; /* Fuente Orbitron */
176+
font-size: 0.9rem; /* Tamaño adecuado */
177+
line-height: 1.6;
178+
text-align: center;
179+
margin-top: 10px;
180+
text-shadow: 0 0 10px rgba(255, 255, 255, 0.2); /* Un ligero brillo blanco */
116181
}
117182

118183
.opt-btn {
119-
background: rgba(255,255,255,0.05);
120-
border: 1px solid rgba(255,255,255,0.1);
121-
padding: 15px;
122-
border-radius: 12px;
184+
font-family: 'Orbitron', sans-serif !important;
185+
background: rgba(15, 23, 42, 0.7);
186+
border: 2px solid rgba(255, 255, 255, 0.1);
187+
padding: 20px;
188+
border-radius: 15px;
123189
color: white;
124-
cursor: pointer;
190+
transition: 0.3s;
191+
text-transform: uppercase;
192+
width: 100%;
193+
}
194+
195+
.opt-btn.active {
196+
background: var(--game-blue-dark) !important;
197+
border-color: white !important;
198+
box-shadow: 0 0 15px var(--game-blue);
125199
}

‎webapp/src/App.tsx‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,37 @@
11
import './App.css'; // Importing global styles
2-
import { Routes, Route, Navigate } from 'react-router-dom'; // Importing routing components
3-
import MainMenu from './components/MainMenu'; // Your main menu component
4-
import GameScreen from './components/GameScreen/GameScreen'; // Your game screen component
5-
import RegisterForm from './components/Login/RegisterForm'; // Your colleague's login component
6-
import SignUpForm from './components/SignUp/SignUpForm';
7-
import HistoryPage from './components/HistoryPage/HistoryPage';
2+
import { I18nProvider } from './i18n/Provider'; // Envolvente de idiomas
3+
import { Routes, Route, Navigate } from 'react-router-dom'; // Componentes de rutas
4+
import MainMenu from './components/MainMenu'; // Menú principal
5+
import GameScreen from './components/GameScreen/GameScreen'; // Pantalla de juego
6+
import RegisterForm from './components/Login/RegisterForm'; // Formulario de Login
7+
import SignUpForm from './components/SignUp/SignUpForm'; // Formulario de registro
8+
import HistoryPage from './components/HistoryPage/HistoryPage'; // Historial
89

910
function App() {
1011
return (
11-
<Routes>
12-
{/* 1. Login/Register is now the entry point (Colleague's part) */}
13-
<Route path="/" element={<RegisterForm />} />
12+
<I18nProvider>
13+
14+
<Routes>
15+
{/* 1. Entrada de la App: Login */}
16+
<Route path="/" element={<RegisterForm />} />
1417

15-
{/* 2. Main Menu with all your buttons (Your part) */}
16-
<Route path="/menu" element={<MainMenu />} />
18+
{/* 2. Menú Principal */}
19+
<Route path="/menu" element={<MainMenu />} />
1720

18-
{/* 3. The actual Game screen (Your part) */}
19-
<Route path="/game" element={<GameScreen />} />
21+
{/* 3. Pantalla de Juego */}
22+
<Route path="/game" element={<GameScreen />} />
2023

21-
{/* 4. Redirect any unknown route to login */}
22-
<Route path="*" element={<Navigate to="/" />} />
24+
{/* 4. Registro de nuevos usuarios */}
25+
<Route path="/signup" element={<SignUpForm />} />
26+
27+
{/* 5. Página de historial */}
28+
<Route path="/history" element={<HistoryPage />} />
2329

24-
{/* 5. Sign Up route for new users */}
25-
<Route path="/signup" element={<SignUpForm />} />
30+
{/* 6. Redirección por defecto a Login si la ruta no existe */}
31+
<Route path="*" element={<Navigate to="/" />} />
32+
</Routes>
2633

27-
{/* 6. History page route */}
28-
<Route path="/history" element={<HistoryPage />} />
29-
30-
</Routes>
34+
</I18nProvider>
3135
);
3236
}
3337

0 commit comments

Comments
 (0)