Merge pull request #126 from Arquisoft/Marina

Pantallas adaptables
Arquisoft · Apr 16, 2024 · f09f654 · f09f654
2 parents 64a82d8 + 0cbac96
commit f09f654
Show file tree

Hide file tree

Showing 5 changed files with 254 additions and 192 deletions.
diff --git a/webapp/src/components/AddUser.js b/webapp/src/components/AddUser.js
@@ -33,58 +33,60 @@ const AddUser = () => {
   };
 
   return (
-<Container component="main" maxWidth="xxl"
-            sx={{
-                marginTop: 4,
-                borderRadius: '10px',
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'center',
-                alignItems: 'center',
-                height: '100vh', 
-                width: '100%'
-            }}>
-      <Typography component="h1" variant="h5" align="center" sx={{ marginBottom: 2, fontWeight: 'bold' }}>
-        REGÍSTRATE
-      </Typography>
-      <TextField
-        name="username"
-        margin="normal"
-        fullWidth
-        label="Usuario"
-        value={username}
-        onChange={(e) => setUsername(e.target.value)}
-        sx={{ width: '50vh', marginBottom: 2, backgroundColor: '#FFFFFF'}}
-      />
-      <TextField
-        name="email"
-        margin="normal"
-        fullWidth
-        label="Email"
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-        sx={{ width: '50vh', marginBottom: 2, backgroundColor: '#FFFFFF'}}
-      />
-      <TextField
-        name="password"
-        margin="normal"
-        fullWidth
-        label="Contraseña"
-        type="password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-        sx={{ width: '50vh', marginBottom: 2, backgroundColor: '#FFFFFF' }}
-      />
+      <Container component="main" maxWidth="xl"
+                 sx={{
+                     marginTop: 4,
+                     borderRadius: '10px',
+                     display: 'flex',
+                     flexDirection: 'column',
+                     justifyContent: 'center',
+                     alignItems: 'center',
+                 }}>
+          <div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>
+              <Typography component="h1" variant="h5" align="center" sx={{marginBottom: 2, fontWeight: 'bold'}}>
+                  REGÍSTRATE
+              </Typography>
+              <TextField
+                  name="username"
+                  margin="normal"
+                  fullWidth
+                  label="Usuario"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  sx={{ marginBottom: 4, backgroundColor: '#FFFFFF'}}
+              />
+              <TextField
+                  name="email"
+                  margin="normal"
+                  fullWidth
+                  label="Email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  sx={{ marginBottom: 4, backgroundColor: '#FFFFFF'}}
+              />
+              <TextField
+                  name="password"
+                  margin="normal"
+                  fullWidth
+                  label="Contraseña"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  sx={{ marginBottom: 4, backgroundColor: '#FFFFFF'}}
+              />
 
-      <Button variant="contained" color="primary" sx={{marginTop: 4,marginBottom: 4, backgroundColor: '#FCF5B8',  color: '#413C3C',  fontWeight: 'bold' }} onClick={addUser}>
-        REGÍSTRATE
-      </Button>
-      <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message={snackbarMessage} />
-      {error && (
-        <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
-      )}
-    </Container>
-  );
+              <Button variant="contained" color="primary" sx={{marginTop: 4,marginBottom: 4, backgroundColor: '#FCF5B8',  color: '#413C3C',  fontWeight: 'bold' }} onClick={addUser}>
+                  REGÍSTRATE
+              </Button>
+              <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar}
+                        message={snackbarMessage}/>
+              {error && (
+                  <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')}
+                            message={`Error: ${error}`}/>
+              )}
+          </div>
+      </Container>
+);
 };
 
 export default AddUser;
diff --git a/webapp/src/components/GameConfiguration.js b/webapp/src/components/GameConfiguration.js
@@ -55,60 +55,63 @@ const GameConfiguration = () => {
     return (
         <Container component="main" maxWidth="xl"
                    sx={{
-                       marginTop: 10,
+                       marginTop: 25,
                        borderRadius: '10px',
                        display: 'flex',
                        flexDirection: 'column',
                        justifyContent: 'center',
                        alignItems: 'center',
                    }}>
-            <Typography component="h1" variant="h5" align="center" sx={{ marginBottom: 2, fontWeight: 'bold' }}>
-                Configuración de la partida
-            </Typography>
-            <TextField
-                name="questions"
-                margin="normal"
-                fullWidth
-                label="Número de preguntas"
-                onChange={handleChangeQuestions}
-                value={valueQuestion}
-                type="number"
-                step="1"
-                sx={{ width: '50vh', marginBottom: 2, backgroundColor: '#FFFFFF'}}
+            <div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>
+                <Typography component="h1" variant="h5" align="center" sx={{ marginBottom: 2, fontWeight: 'bold' }}>
+                    Personaliza tu partida
+                </Typography>
+                <TextField
+                    name="questions"
+                    margin="normal"
+                    fullWidth
+                    label="Número de preguntas"
+                    onChange={handleChangeQuestions}
+                    value={valueQuestion}
+                    type="number"
+                    step="1"
+                    sx={{ marginBottom: 4, marginTop: 3, backgroundColor: '#FFFFFF'}}
 
-                inputProps={{
-                    inputMode: 'numeric',
-                    pattern: '[0-9]*',
-                    min: 1,
-                    max: 30,
-                }}
-            />
-            <TextField
-                name="time"
-                margin="normal"
-                fullWidth
-                label="Tiempo disponible por pregunta"
-                onChange={handleChangeTime}
-                value={valueTime}
-                type="number"
-                step="1"
-                sx={{ width: '50vh', marginBottom: 2, backgroundColor: '#FFFFFF'}}
-                inputProps={{
-                    inputMode: 'numeric',
-                    min: 10,
-                    max: 60,
-                }}
-            />
-            <Button variant="contained" color="primary" sx={{marginTop: 4,marginBottom: 4, backgroundColor: '#FCF5B8',  color: '#413C3C',  fontWeight: 'bold'}}
-                onClick={configureAndStart}>
-                JUGAR
-            </Button>
-            <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message={snackbarMessage} />
-            {error && (
-                <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
-            )}
+                    inputProps={{
+                        inputMode: 'numeric',
+                        pattern: '[0-9]*',
+                        min: 1,
+                        max: 30,
+                    }}
+                />
+                <TextField
+                    name="time"
+                    margin="normal"
+                    fullWidth
+                    label="Tiempo disponible por pregunta"
+                    onChange={handleChangeTime}
+                    value={valueTime}
+                    type="number"
+                    step="1"
+                    sx={{ marginBottom: 4, marginTop: 3 , backgroundColor: '#FFFFFF'}}
+                    inputProps={{
+                        inputMode: 'numeric',
+                        min: 10,
+                        max: 60,
+                    }}
+                />
+                <Button variant="contained" color="primary" color="primary" sx={{marginTop: 4,marginBottom: 4, backgroundColor: '#FCF5B8',  color: '#413C3C',  fontWeight: 'bold'}} onClick={configureAndStart}>
+                    JUGAR
+                </Button>
+                <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar}
+                          message={snackbarMessage}/>
+                {error && (
+                    <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')}
+                              message={`Error: ${error}`}/>
+                )}
+            </div>
         </Container>
-    );
+);
 };
 
 export default GameConfiguration;
diff --git a/webapp/src/components/Login.js b/webapp/src/components/Login.js
@@ -55,52 +55,50 @@ const Login = () => {
   };
 
   return (
-    <Container component="main" maxWidth="xxl"
-            sx={{
-                marginTop: 4,
-                borderRadius: '10px',
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'center',
-                alignItems: 'center',
-                height: '100vh', 
-                width: '100% '
-            }}>
-      {loginSuccess ? (
-        null
-
-      ) : (
-        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
-          <Typography component="h1" variant="h5" align="center" sx={{ marginBottom: 2, fontWeight: 'bold' }}>
-            INICIA SESIÓN
-          </Typography>
-          <TextField
-            margin="normal"
-            fullWidth
-            label="Usuario"
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-            sx={{ width: '50vh', marginBottom: 2, backgroundColor: '#FFFFFF'}}
-          />
-          <TextField
-            margin="normal"
-            fullWidth
-            label="Contraseña"
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            sx={{ width: '50vh', marginBottom: 2, backgroundColor: '#FFFFFF'}}
-          />
-          <Button variant="contained" color="primary" sx={{marginTop: 4,marginBottom: 4, backgroundColor: '#FCF5B8',  color: '#413C3C',  fontWeight: 'bold' }} onClick={loginUser}>
-            ENTRA
-          </Button>
-          <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="Inicio de sesión correcto" />
-          {error && (
-            <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
+      <Container component="main" maxWidth="xl"
+                 sx={{
+                     marginTop: 4,
+                     borderRadius: '10px',
+                     display: 'flex',
+                     flexDirection: 'column',
+                     justifyContent: 'center',
+                     alignItems: 'center',
+                 }}>
+          {loginSuccess ? (
+              null
+
+          ) : (
+              <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
+                  <Typography component="h1" variant="h5" align="center" sx={{ marginBottom: 2, fontWeight: 'bold' }}>
+                      Inicia sesión
+                  </Typography>
+                  <TextField
+                      margin="normal"
+                      fullWidth
+                      label="Usuario"
+                      value={username}
+                      onChange={(e) => setUsername(e.target.value)}
+                      sx={{ marginBottom: 4, backgroundColor: '#FFFFFF'}}
+                  />
+                  <TextField
+                      margin="normal"
+                      fullWidth
+                      label="Contraseña"
+                      type="password"
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                      sx={{ marginBottom: 4, backgroundColor: '#FFFFFF'}}
+                  />
+                  <Button variant="contained" color="primary" sx={{marginTop: 4,marginBottom: 4, backgroundColor: '#FCF5B8',  color: '#413C3C',  fontWeight: 'bold' }} onClick={loginUser}>
+                      Entra
+                  </Button>
+                  <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="Inicio de sesión correcto" />
+                  {error && (
+                      <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
+                  )}
+              </div>
           )}
-        </div>
-        )}
-
+
       </Container>
   );
 };