Attempt to create the game and history page.

webapp/src/App.js

@@ -16,12 +16,15 @@ function App() {
   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
       </Typography>
+
       {showLogin ? <Login /> : <AddUser />}
+
       <Typography component="div" align="center" sx={{ marginTop: 2 }}>
-        {showLogin ? (
+       {showLogin ? (
           <Link name="gotoregister" component="button" variant="body2" onClick={handleToggleView}>
             Don't have an account? Register here.
           </Link>

webapp/src/components/Game.js

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+
+const Game = () => {
+  /*const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loginSuccess, setLoginSuccess] = useState(false);
+  const [createdAt, setCreatedAt] = useState('');
+  const [openSnackbar, setOpenSnackbar] = useState(false);
+
+  const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+
+  const loginUser = async () => {
+    try {
+      const response = await axios.post(`${apiEndpoint}/login`, { username, password });
+
+      // Extract data from the response
+      const { createdAt: userCreatedAt } = response.data;
+
+      setCreatedAt(userCreatedAt);
+      setLoginSuccess(true);
+
+      setOpenSnackbar(true);
+    } catch (error) {
+      setError(error.response.data.error);
+    }
+  };
+
+  const handleCloseSnackbar = () => {
+    setOpenSnackbar(false);
+  };*/
+
+  return (
+    <div>
+        <h1>Esta sería la pagina del juego</h1>
+    </div>
+  );
+};
+
+export default Game;

webapp/src/components/HistoricalData.js

@@ -0,0 +1,14 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+
+const HistoricalData = () => {
+
+  return (
+    <div>
+        <h1>Esta sería la pagina del historico de partidas</h1>
+    </div>
+  );
+};
+
+export default HistoricalData;

webapp/src/components/Login.js

@@ -2,6 +2,9 @@
 import React, { useState } from 'react';
 import axios from 'axios';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+import Game from './Game';
+import HistoricalData from './HistoricalData';
+import App from '../App';
 
 const Login = () => {
   const [username, setUsername] = useState('');
@@ -11,6 +14,10 @@ const Login = () => {
   const [createdAt, setCreatedAt] = useState('');
   const [openSnackbar, setOpenSnackbar] = useState(false);
 
+  // Declara las variables (izquierda) y el metodo que la modifica (derecha). Se inicializa a false (useState)
+  const [showGame, setShowGame] = useState(false);
+  const [showHistoricalData, setShowHistoricaData] = useState(false);
+
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
   const loginUser = async () => {
@@ -33,17 +40,43 @@ const Login = () => {
     setOpenSnackbar(false);
   };
 
+  const handleShowGame = () => {
+    setShowGame(true);
+  };
+
+  const handleShowHistoricalData = () => {
+    setShowHistoricaData(true);
+  };
+
   return (
     <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
+      {/* Los operadores logicos funcionan de la manera: 
+      condicion ? (lo que se hace si se cumple) : (lo que se hace si no se cumple) */}
       {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>
-        </div>
+        showGame || showHistoricalData ? (
+          showGame ? (
+            <Game/>
+          ):(
+            <HistoricalData/>
+          )
+        ) : (
+          <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>
+
+            {/* Se declaran los botones en los q al hacer click se ejecuta el metodo especificado en onClick*/}
+            <Button variant="contained" color="primary" onClick={handleShowGame}>
+              Empieza juego
+            </Button>
+            <Button variant="contained" color="primary" onClick={handleShowHistoricalData}> 
+              Historico de partidas de jugador
+            </Button>
+          </div>
+        )
       ) : (
         <div>
           <Typography component="h1" variant="h5">