Arquisoft · UO287687 · Apr 15, 2024 · Apr 10, 2024 · Apr 10, 2024 · Apr 10, 2024
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/src/App.js b/webapp/src/App.js
@@ -22,7 +22,8 @@ function App() {
       {menuState === 3 && <Game gameMode="infinite"/>}
       {menuState === 4 && <Game gameMode="threeLife"/>}
       {menuState === 5 && <Game gameMode="category"/>}
-      {menuState === 6 && <Participation goTo={(x) => goTo(x)}/>}
+      {menuState === 6 && <Game gameMode="custom"/>}
+      {menuState === 7 && <Participation goTo={(x) => goTo(x)}/>}
     </>
   )
 }

diff --git a/webapp/src/audio/activate.mp3 b/webapp/src/audio/activate.mp3
diff --git a/webapp/src/components/AddUser.js b/webapp/src/components/AddUser.js
@@ -1,14 +1,16 @@
 // src/components/AddUser.js
 import React, { useState, useEffect, useContext } from 'react';
 import axios from 'axios';
-import { Container, Typography, TextField, Button, Snackbar, IconButton } from '@mui/material';
+import { Container, Typography, TextField, Snackbar, IconButton } from '@mui/material';
 
 import profileImg1 from '../assets/defaultImgProfile.jpg';
 import profileImg2 from '../assets/perfil2.jpg';
 import profileImg3 from '../assets/perfil3.jpg';
 import profileImg4 from '../assets/perfil4.jpg';
 import profileImg5 from '../assets/perfil5.jpg';
 import { SessionContext } from '../SessionContext';
+import '../css/addUser.css';
+import '../css/animatedBG.css';
 
 const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
@@ -58,7 +60,8 @@ const AddUser = ({goTo}) => {
   }
 
   return (
-    <Container component="div" maxWidth="xs" sx={{ marginTop: 8 }}>
+    <Container component="div" maxWidth="xs" sx={{ marginTop: 4 }}>
+      <div className='inputsRegister'> 
       <Typography component="h2" variant="h5">
         &gt; Register a user
       </Typography>
@@ -68,7 +71,6 @@ const AddUser = ({goTo}) => {
         fullWidth
         label="Username"
         value={username}
-        className='inputAddUser'
         onChange={(e) => setUsername(e.target.value)}
       />
       <TextField
@@ -114,9 +116,14 @@ const AddUser = ({goTo}) => {
                 src={profileImg5} alt='Imagen Perfil 5' />
         </IconButton>
       </div>
-      <Button className='buttonLoginRegister' variant="contained" color="primary" onClick={addUser} sx={{ marginTop: 4 }}>
-        Sign up
-      </Button>
+      <div className='btnRegister'>
+        <button className="btn" onClick={addUser}><span>Sign up</span></button>
+      </div>
+      <ul className="circles">
+              <li></li><li></li><li></li><li></li><li></li>
+              <li></li><li></li><li></li><li></li><li></li>
+            </ul>
+        </div> 
       <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="User added successfully" />
       {error && (
         <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />

diff --git a/webapp/src/components/Game.jsx b/webapp/src/components/Game.jsx
@@ -1,21 +1,57 @@
 import React, { useState, useEffect } from 'react';
 import { PostGame } from './PostGame';
 import Question from './Question';
-import { Typography } from '@mui/material';
+import { Select, MenuItem, FormControl, InputLabel, Typography, TextField, Snackbar } from '@mui/material';
+import '../css/game.css';
 
 export const Game = ({ gameMode }) => {
+
     const [gameState, setGameState] = useState(0);
     const [gameFinished, setGameFinished] = useState(false);
 
     const [category, setCategory] = useState("general");
     const [restart, setRestart] = useState(false);
 
+    const [gMode, setGameMode] = useState(gameMode);
+
+    const [maxTime, setMaxTime] = useState('');
+    const [numberQ, setNumberQ] = useState('');
+    const [snackbarOpen, setSnackbarOpen] = useState(false);
+
     const changeCategory = (category) => {
         setCategory(category);
         setRestart(!restart);
         goTo(0);
     }
 
+    const [customSettings, setCustomSettings] = useState({
+
+        gMode: gMode,
+        maxTime: 3,
+        numberQ: 10,
+        category: "general"
+    });
+
+    const startCustomGame = () => {
+
+        if (!validateInputs()) {
+            setSnackbarOpen(true);
+            return;
+        }
+        setCustomSettings(prevSettings => ({ ...prevSettings, maxTime:maxTime , numberQ:numberQ }))
+        setGameMode("customMode");
+    }
+
+    const validateInputs = () => {
+        const maxTimeInt = parseInt(maxTime);
+        const numberQInt = parseInt(numberQ);
+        return Number.isInteger(maxTimeInt) && Number.isInteger(numberQInt) && maxTimeInt > 0 && numberQInt > 0;
+    };
+
+    const handleSnackbarClose = () => {
+        setSnackbarOpen(false);
+    };
+
     const goTo = (parameter) => {
         setGameState(parameter);
     };
@@ -29,34 +65,70 @@ export const Game = ({ gameMode }) => {
     return (
         <>
             <main className='preguntas'>
-                { gameState === 0 && gameMode === "category" ?
+                { gameState === 0 && gMode === "category" ?
                     <Typography sx={{ fontSize:'1.6em', marginBottom:'0.3em !important', paddingTop:'1em', textAlign:'center' }}>
                         Restart game with a new category</Typography>
                 :""}
-                { gameState === 1 && gameMode === "category" ?
+                { gameState === 1 && gMode === "category" ?
                     <Typography sx={{ fontSize:'1.6em', marginBottom:'0.3em !important' }}>
                         Choose a category for a new game</Typography>
                 :""}
-            { gameMode === "category" ?
+
+            { gMode === "category" &&
                 <div className='questionCategory'>
-                    <button className={category === "general" ? 'questionCategoryMarked' : ''} onClick={() => changeCategory("general")}>
-                        All Categories</button>
-                    <button className={category === "art" ? 'questionCategoryMarked' : ''} onClick={() => changeCategory("art")}>
-                        Art</button>
-                    <button className={category === "sports" ? 'questionCategoryMarked' : ''} onClick={() => changeCategory("sports")}>
-                        Sports</button>
-                    <button className={category === "entertainment" ? 'questionCategoryMarked' : ''} onClick={() => changeCategory("entertainment")}>
-                        Entertainment</button>
-                    <button className={category === "geography" ? 'questionCategoryMarked' : ''} onClick={() => changeCategory("geography")}>
-                        Geography</button>
-                    <button className={category === "planets" ? 'questionCategoryMarked' : ''} onClick={() => changeCategory("planets")}>
-                        Planets</button>
-                </div>
-                : ""}
-            {gameState === 0 && <Question goTo={(x) => goTo(x)} setGameFinished={setGameFinished} 
-                                        gameMode={gameMode} category={category} key={restart.toString()} restart={restart}/>}
-            {gameState === 1 && <PostGame gameMode={gameMode}/>}
+                    <button className={category === "general" ? 'questionCategoryMarked categoryBtn' : 'categoryBtn'}
+                        onClick={() => changeCategory("general")}> All Categories</button>
+                    <button className={category === "art" ? 'questionCategoryMarked categoryBtn' : 'categoryBtn'}
+                        onClick={() => changeCategory("art")}> Art</button>
+                    <button className={category === "sports" ? 'questionCategoryMarked categoryBtn' : 'categoryBtn'}
+                        onClick={() => changeCategory("sports")}> Sports</button>
+                    <button className={category === "entertainment" ? 'questionCategoryMarked categoryBtn' : 'categoryBtn'}
+                        onClick={() => changeCategory("entertainment")}> Entertainment</button>
+                    <button className={category === "geography" ? 'questionCategoryMarked categoryBtn' : 'categoryBtn'}
+                        onClick={() => changeCategory("geography")}> Geography</button>
+                    <button className={category === "planets" ? 'questionCategoryMarked categoryBtn' : 'categoryBtn'}
+                        onClick={() => changeCategory("planets")}> Planets</button>
+                </div> }
+
+            { gMode === "custom" &&
+                <div className='customOptions'>
+                    <h2 className="tituloCustom">&lt;!-- Select custom Settings --&gt;</h2>
+                    <TextField name="maxTime" margin="normal" fullWidth label="Max Time (minutes)"
+                        onChange={(e) => setMaxTime(e.target.value)}
+                    />
+                    <TextField name="numberQ" margin="normal" fullWidth label="Number of Questions"
+                        onChange={(e) => setNumberQ(e.target.value)} sx={{ marginTop:'0.2em' }}
+                    />
+                    <FormControl fullWidth margin="normal" sx={{ backgroundColor:'#080808', marginTop:'0.2em' }}>
+                        <InputLabel id="category-label">Category</InputLabel>
+                        <Select labelId="category-label" id="category-select" value={customSettings.category} label="Category"
+                            onChange={(e) => setCustomSettings(prevSettings => ({ ...prevSettings, category: e.target.value }))}
+                            >
+                            <MenuItem value="general">General</MenuItem>
+                            <MenuItem value="art">Art</MenuItem>
+                            <MenuItem value="sports">Sports</MenuItem>
+                            <MenuItem value="entertainment">Entertainment</MenuItem>
+                            <MenuItem value="geography">Geography</MenuItem>
+                            <MenuItem value="planets">Planets</MenuItem>
+                        </Select>
+                    </FormControl>
+                    <div className='startCustom'>
+                        <button className="btn" onClick={() => startCustomGame()}><span>Start Game</span></button>
+                    </div>
+                </div> }    
+
+            { gameState === 0 && gMode !== "custom" && <Question goTo={(x) => goTo(x)} setGameFinished={setGameFinished} 
+                settings={customSettings} key={restart.toString()} restart={restart}/> }
+            { gameState === 1 && <PostGame gameMode={gMode}/> }
             </main>
+
+            <Snackbar
+                anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+                open={snackbarOpen}
+                autoHideDuration={6000}
+                onClose={handleSnackbarClose}
+                message="Please enter valid integers greater than 0 for both Max Time and Number of Questions."
+            />
         </>
     );
 };
diff --git a/webapp/src/components/Login.js b/webapp/src/components/Login.js
@@ -1,8 +1,10 @@
 // src/components/Login.js
 import React, { useState, useEffect, useContext } from 'react';
 import axios from 'axios';
-import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+import { Container, Typography, TextField, Snackbar } from '@mui/material';
 import { SessionContext } from '../SessionContext';
+import '../css/login.css';
+import '../css/animatedBG.css';
 
 const Login = ({ goTo }) => {
 
@@ -64,8 +66,9 @@ const Login = ({ goTo }) => {
   }, [loginSuccess, goTo]);
 
   return (
-    <Container component="div" maxWidth="xs" sx={{ marginTop: 8 }}>
-        <div>
+    <Container component="div" maxWidth="xs" sx={{ marginTop: 4 }}>
+      <div className="area" >
+        <div className='inputsRegister'>
           <Typography component="h2" variant="h5">
             &gt; Login
           </Typography>
@@ -75,6 +78,8 @@ const Login = ({ goTo }) => {
             fullWidth
             label="Username"
             value={username}
+            className='tf'
+            sx={{ color:'#8f95fd !important' }}
             onChange={(e) => setUsername(e.target.value)}
           />
           <TextField
@@ -86,9 +91,14 @@ const Login = ({ goTo }) => {
             value={password}
             onChange={(e) => setPassword(e.target.value)}
           />
-          <Button className='buttonLoginRegister' variant="contained" color="primary" onClick={loginUser}>
-            Login
-          </Button>
+          <div>
+            <button className="btn" onClick={loginUser}><span>Login</span></button>
+          </div>
+            <ul className="circles">
+              <li></li><li></li><li></li><li></li><li></li>
+              <li></li><li></li><li></li><li></li><li></li>
+            </ul>
+        </div> 
           <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="Login successful" />
           {error && (
             <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />