Merge pull request #46 from Arquisoft/Rama-Andrés

Vinculación de componentes
Arquisoft · Mar 5, 2025 · c56f04e · c56f04e
2 parents a636d25 + a6b1623
commit c56f04e
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 23 deletions.
diff --git a/package.json b/package.json
diff --git a/webapp/src/Router.js b/webapp/src/Router.js
@@ -4,6 +4,7 @@ import Login from './components/Login';
 import Game from './components/Game';
 import AddUser from './components/AddUser';
 import Home from './components/Home';
+import StartMenu from './components/StartMenu';
 
 const AppRouter = () => {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -15,14 +16,15 @@ const AppRouter = () => {
   return (
     <Router>
       <Routes>
-        <Route path="/" element={<Game />} />
+        <Route path="/" element={<Home />} />
         <Route path="/login" element={<Login onLoginSuccess={handleLoginSuccess} />} />
         <Route path="/register" element={<AddUser />} />
-        <Route path="/game" element={isLoggedIn ? <Game /> : <Navigate to="/login" />} />
+        <Route path="/startmenu" element={isLoggedIn ? <StartMenu /> : <Navigate to="/login" />} />
+        <Route path="/game" element={<Game />} />
         <Route path="*" element={<Navigate to="/" />} />
       </Routes>
     </Router>
   );
 };
 
-export default AppRouter;
+export default AppRouter;
diff --git a/webapp/src/components/Login.js b/webapp/src/components/Login.js
@@ -3,7 +3,6 @@ import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
 import { Typewriter } from "react-simple-typewriter";
-import Game from './Game';
 
 const Login = ({ onLoginSuccess }) => {
   const [username, setUsername] = useState('');
@@ -13,7 +12,6 @@ const Login = ({ onLoginSuccess }) => {
   const [loginSuccess, setLoginSuccess] = useState(false);
   const [createdAt, setCreatedAt] = useState('');
   const [openSnackbar, setOpenSnackbar] = useState(false);
-  const [goToGame, setGoToGame] = useState(false);
 
   const navigate = useNavigate();
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
@@ -45,15 +43,12 @@ const Login = ({ onLoginSuccess }) => {
       setOpenSnackbar(true);
 
       onLoginSuccess();
-      navigate('/game'); // Redirigir al juego
+      navigate('/startmenu'); // Redirigir al juego
     } catch (error) {
       setError(error.response?.data?.error || "Login failed. Please try again.");
     }
   };
 
-  if (goToGame) {
-    return <Game />;
-  }
 
   return (
     <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
@@ -67,7 +62,6 @@ const Login = ({ onLoginSuccess }) => {
             variant="contained"
             color="primary"
             sx={{ marginTop: 2 }}
-            onClick={() => setGoToGame(true)}
           >
             Ir al Juego
           </Button>

diff --git a/webapp/src/components/Home.js → webapp/src/components/StartMenu.js b/webapp/src/components/Home.js → webapp/src/components/StartMenu.js
@@ -1,16 +1,10 @@
 import React, { useState } from "react";
-import {
-  Box,
-  Button,
-  Card,
-  CardContent,
-  Typography,
-  Menu,
-  MenuItem,
-} from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import { Box, Button, Card, CardContent, Typography, Menu, MenuItem } from "@mui/material";
 
-const Home = () => {
+const StartMenu = () => {
   const [anchorEl, setAnchorEl] = useState(null);
+  const navigate = useNavigate(); // Hook para redirigir
 
   // Controla la apertura del menú
   const handleClick = (event) => {
@@ -22,6 +16,11 @@ const Home = () => {
     setAnchorEl(null);
   };
 
+  // Redirige a la página del juego
+  const handleStartGame = () => {
+    navigate("/game");
+  };
+
   return (
     <Box
       sx={{
@@ -126,7 +125,7 @@ const Home = () => {
               gutterBottom
             >
               Pon a prueba tu conocimiento! Pulsa 'Comenzar' y empieza el reto.
-              Se te mostrará una imagen y 5 posibles respuestas.Cada pregunta
+              Se te mostrará una imagen y 5 posibles respuestas. Cada pregunta
               debe ser respondida en un tiempo determinado. Se ofrece la
               posibilidad de obtener pistas mediante un chatbot.
             </Typography>
@@ -143,6 +142,7 @@ const Home = () => {
               display: "flex",
               alignSelf: "center",
             }}
+            onClick={handleStartGame} // Agrega la función aquí
           >
             Comenzar
           </Button>
@@ -152,4 +152,4 @@ const Home = () => {
   );
 };
 
-export default Home;
+export default StartMenu;