Arreglo del merge

webapp/package.json

@@ -13,6 +13,7 @@
     "bootstrap": "^5.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^3.5.1"
   },
@@ -54,4 +55,4 @@
     "serve": "^14.2.1",
     "start-server-and-test": "^2.0.3"
   }
-}
+}

webapp/src/App.js

@@ -4,21 +4,40 @@ import Login from './components/Login';
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
-import Link from '@mui/material/Link';
+import { BrowserRouter as Router, Route, Routes, Link, Navigate } from 'react-router-dom';
+import HomeScreen from './components/HomeScreen';
+import Game from './components/Game';
+
 
 function App() {
   const [showLogin, setShowLogin] = useState(true);
 
   const handleToggleView = () => {
     setShowLogin(!showLogin);
   };
+  const [isAuthenticated, setAuthenticated] = useState(false);
+
+  const handleLogin = () => {
+    // Lógica para autenticar al usuario (por ejemplo, verificar credenciales)
+    setAuthenticated(true);
+  };
 
   return (
+
     <Container component="main" maxWidth="xs">
-      <CssBaseline />
       <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
-        Welcome to the 2024 edition of the Software Architecture course
+      Saber y Ganar
       </Typography>
+      <Routes>
+        <Route path="/adduser" element={<AddUser />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/" element={<Login />} />
+        <Route path="/home" isAuthenticated={isAuthenticated} element={<HomeScreen />} />
+        <Route path="/game" isAuthenticated={isAuthenticated} element={<Game />} />
+      </Routes>
+
+      {/* <CssBaseline />
+      
       {showLogin ? <Login /> : <AddUser />}
       <Typography component="div" align="center" sx={{ marginTop: 2 }}>
         {showLogin ? (
@@ -30,9 +49,14 @@ function App() {
             Already have an account? Login here.
           </Link>
         )}
-      </Typography>
+      </Typography> */}
     </Container>
   );
+
 }
 
-export default App;
+/* function PrivateRoute({ isAuthenticated, ...props }) {
+  return isAuthenticated ? <Route {...props} /> : <Navigate to="/login" />;
+} */
+
+export default App;

webapp/src/components/AddUser.js

@@ -2,6 +2,7 @@
 import React, { useState } from 'react';
 import axios from 'axios';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+import { Link } from "react-router-dom";
 
 const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
@@ -49,12 +50,17 @@ const AddUser = () => {
       <Button variant="contained" color="primary" onClick={addUser}>
         Add User
       </Button>
+
       <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="User added successfully" />
       {error && (
         <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
       )}
+      <br></br>
+      <Link to="/login">
+            Already have an account? Login here.
+      </Link>
     </Container>
   );
 };
 
-export default AddUser;
+export default AddUser;

webapp/src/components/HomeScreen.js

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { Container} from '@mui/material';
+import Game from './Game';
+const HomeScreen = () => {
+    const [juegoIniciado, setJuegoIniciado] = useState(false);
+
+    const handleStartButtonClick = () => {
+        setJuegoIniciado(true);
+    };
+    return (
+        <Container component="main">
+        <div>
+             {juegoIniciado ? (
+            // Muestra otro componente o contenido cuando el juego está iniciado
+            <Game />
+          ) : (
+            // Muestra el contenido inicial con el botón "Jugar"
+            <div>
+              <button onClick={handleStartButtonClick}>Jugar</button>
+              <br></br>
+              <button>Ver historial</button>
+            </div>
+          )}
+        </div>
+        </Container>
+      )
+};
+
+export default HomeScreen;
+

webapp/src/components/Login.js

@@ -2,6 +2,8 @@
 import React, { useState } from 'react';
 import axios from 'axios';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+import HomeScreen from './HomeScreen';
+import { Link } from "react-router-dom";
 
 const Login = () => {
   const [username, setUsername] = useState('');
@@ -37,12 +39,7 @@ const Login = () => {
     <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
       {loginSuccess ? (
         <div>
-          <Typography component="h1" variant="h5" sx={{ textAlign: 'center' }}>
-            Hello {username}!
-          </Typography>
-          <Typography component="p" variant="body1" sx={{ textAlign: 'center', marginTop: 2 }}>
-            Your account was created on {new Date(createdAt).toLocaleDateString()}.
-          </Typography>
+          <HomeScreen/>
         </div>
       ) : (
         <div>
@@ -67,14 +64,21 @@ const Login = () => {
           <Button variant="contained" color="primary" onClick={loginUser}>
             Login
           </Button>
+
           <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="Login successful" />
           {error && (
             <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
           )}
+          <br></br>
+          <Link to="/adduser">
+            Don't have an account? Register here.
+          </Link>
+
+
         </div>
       )}
     </Container>
   );
 };
 
-export default Login;
+export default Login;

webapp/src/index.js

@@ -8,9 +8,11 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
+  <Router>
+
     <App />
-  </React.StrictMode>
+
+  </Router>
 );
 
 // If you want to start measuring performance in your app, pass a function