Arquisoft · UO287747 · Apr 4, 2024 · Apr 1, 2024 · Apr 1, 2024 · Apr 2, 2024
diff --git a/webapp/public/favicon.ico b/webapp/public/favicon.ico
diff --git a/webapp/public/index.html b/webapp/public/index.html
@@ -9,7 +9,7 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.ico" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>ASW WIQ</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/webapp/public/logo192.png b/webapp/public/logo192.png
diff --git a/webapp/public/logo512.png b/webapp/public/logo512.png
diff --git a/webapp/public/manifest.json b/webapp/public/manifest.json
@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

diff --git a/webapp/src/App.js b/webapp/src/App.js
@@ -18,8 +18,11 @@ function App() {
       {menuState === 0 && <User goTo={(x) => goTo(x)}/>}
       {menuState > 0 && <Nav goTo={(x) => goTo(x)}/>}
       {menuState === 1 && <Start goTo={(x) => goTo(x)}/>}
-      {menuState === 2 && <Game />}
-      {menuState === 3 && <Participation goTo={(x) => goTo(x)}/>}
+      {menuState === 2 && <Game gameMode="classic"/>}
+      {menuState === 3 && <Game gameMode="infinite"/>}
+      {menuState === 4 && <Game gameMode="threeLife"/>}
+      {menuState === 5 && <Game gameMode="category"/>}
+      {menuState === 6 && <Participation goTo={(x) => goTo(x)}/>}
     </>
   )
 }

diff --git a/webapp/src/assets/icon.png b/webapp/src/assets/icon.png
diff --git a/webapp/src/assets/perfil2.jpg b/webapp/src/assets/perfil2.jpg
diff --git a/webapp/src/assets/perfil3.jpg b/webapp/src/assets/perfil3.jpg
diff --git a/webapp/src/assets/perfil4.jpg b/webapp/src/assets/perfil4.jpg
diff --git a/webapp/src/assets/perfil5.jpg b/webapp/src/assets/perfil5.jpg
diff --git a/webapp/src/assets/vida.png b/webapp/src/assets/vida.png
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
@@ -43,16 +43,17 @@ const AddUser = () => {
   }
 
   return (
-    <Container component="div" maxWidth="xs" sx={{ marginTop: 4 }}>
-      <Typography component="h1" variant="h5">
-        Add User
+    <Container component="div" maxWidth="xs" sx={{ marginTop: 8 }}>
+      <Typography component="h2" variant="h5">
+        &gt; Register a user
       </Typography>
       <TextField
         name="username"
         margin="normal"
         fullWidth
         label="Username"
         value={username}
+        className='inputAddUser'
         onChange={(e) => setUsername(e.target.value)}
       />
       <TextField
@@ -73,8 +74,8 @@ const AddUser = () => {
         value={confirmPassword}
         onChange={(e) => setConfirmPassword(e.target.value)}
       />
-      <Typography component="h2" variant="h5">
-        Select a profile image
+      <Typography component="h3" variant="h5" sx={{ marginTop: 4 }}>
+        Select a profile picture
       </Typography>
       <div id='fotosPerfil'>
         <IconButton className={`fotoPerfilBtn`} onClick={() => handleImageClick('defaultImgProfile.jpg')}>
@@ -98,8 +99,8 @@ const AddUser = () => {
                 src={profileImg5} alt='Imagen Perfil 5' />
         </IconButton>
       </div>
-      <Button variant="contained" color="primary" onClick={addUser}>
-        Add User
+      <Button className='buttonLoginRegister' variant="contained" color="primary" onClick={addUser} sx={{ marginTop: 4 }}>
+        Sign up
       </Button>
       <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="User added successfully" />
       {error && (

diff --git a/webapp/src/components/Game.jsx b/webapp/src/components/Game.jsx
@@ -1,11 +1,21 @@
 import React, { useState, useEffect } from 'react';
 import { PostGame } from './PostGame';
 import Question from './Question';
+import { Typography } from '@mui/material';
 
-export const Game = () => {
+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 changeCategory = (category) => {
+        setCategory(category);
+        setRestart(!restart);
+        goTo(0);
+    }
+
     const goTo = (parameter) => {
         setGameState(parameter);
     };
@@ -18,8 +28,35 @@ export const Game = () => {
 
     return (
         <>
-            {gameState === 0 && <Question goTo={(x) => goTo(x)} setGameFinished={setGameFinished} />}
-            {gameState === 1 && <PostGame />}
+            <main className='preguntas'>
+                { gameState === 0 && gameMode === "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" ?
+                    <Typography sx={{ fontSize:'1.6em', marginBottom:'0.3em !important' }}>
+                        Choose a category for a new game</Typography>
+                :""}
+            { gameMode === "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}/>}
+            </main>
         </>
     );
 };
diff --git a/webapp/src/components/Login.js b/webapp/src/components/Login.js
@@ -47,10 +47,10 @@ const Login = ({ goTo }) => {
   }, [loginSuccess, goTo]);
 
   return (
-    <Container component="div" maxWidth="xs" sx={{ marginTop: 4 }}>
+    <Container component="div" maxWidth="xs" sx={{ marginTop: 8 }}>
         <div>
-          <Typography component="h1" variant="h5">
-            Login :D
+          <Typography component="h2" variant="h5">
+            &gt; Login
           </Typography>
           <TextField
             margin="normal"
@@ -67,7 +67,7 @@ const Login = ({ goTo }) => {
             value={password}
             onChange={(e) => setPassword(e.target.value)}
           />
-          <Button variant="contained" color="primary" onClick={loginUser}>
+          <Button className='buttonLoginRegister' variant="contained" color="primary" onClick={loginUser}>
             Login
           </Button>
           <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="Login successful" />

diff --git a/webapp/src/components/Nav.jsx b/webapp/src/components/Nav.jsx
@@ -11,11 +11,11 @@ import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
 import MenuItem from '@mui/material/MenuItem';
-import AdbIcon from '@mui/icons-material/Adb';
 
 import { useContext } from 'react';
 import { SessionContext } from '../SessionContext';
 import defaultProfileImg from '../assets/defaultImgProfile.jpg';
+import iconImg from '../assets/icon.png';
 
 function Nav({ goTo }) {
 
@@ -57,7 +57,7 @@ function Nav({ goTo }) {
     <AppBar className='nav' position="static">
       <Container maxWidth="xl">
         <Toolbar disableGutters>
-          <AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
+        <img className="icono" src={iconImg} />
           <Typography
             variant="h6"
             noWrap
@@ -75,6 +75,8 @@ function Nav({ goTo }) {
             ASW WIQ
           </Typography>
 
+          <Typography sx={{ marginRight:'1em' }}>|</Typography>
+
           <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
             <IconButton
               size="large"
@@ -143,9 +145,6 @@ function Nav({ goTo }) {
               open={Boolean(anchorElUser)}
               onClose={handleCloseUserMenu}
             >
-              <MenuItem className='menu'>
-                <Typography textAlign="center">Profile</Typography>
-              </MenuItem>
               <MenuItem className='menu' onClick={logoutClic}>
                 <Typography textAlign="center">Logout</Typography>
               </MenuItem>

diff --git a/webapp/src/components/PostGame.jsx b/webapp/src/components/PostGame.jsx
@@ -6,7 +6,7 @@ import TableContainer from '@mui/material/TableContainer';
 import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
 
-export const PostGame = () => {
+export const PostGame = ({ gameMode }) => {
 
     const formatTiempo = (segundos) => {
         const minutos = Math.floor((segundos % 3600) / 60);
@@ -16,39 +16,40 @@ export const PostGame = () => {
 
     return (
 
-        <main className='preguntas'>
         <div>
-            <Typography sx={{ textAlign: 'center', fontSize:'2.2em' }}>Fin del juego</Typography>
+            <Typography sx={{ textAlign: 'center', fontSize:'2em', margin:'2em 0 0.3em 0 !important' }}>Game Over</Typography>
             <Card>
             <TableContainer component={Paper}>
                 <Table sx={{ minWidth: 650 }} aria-label="simple table">
                     <TableBody>
 
                         <TableRow key={"Preguntas acertadas"} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
-                            <TableCell sx={{ fontSize:'1.3em' }}>Preguntas acertadas</TableCell>
-                            <TableCell sx={{ fontSize:'1.3em' }} align="right">{localStorage.getItem("pAcertadas")}</TableCell>
+                            <TableCell sx={{ fontSize:'1.2em' }}>Correct answers</TableCell>
+                            <TableCell sx={{ fontSize:'1.2em' }} align="right">{localStorage.getItem("pAcertadas")}</TableCell>
                         </TableRow>
 
+                        { gameMode !== "threeLife" ?
                         <TableRow key={"Preguntas falladas"} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
-                            <TableCell sx={{ fontSize:'1.3em' }}>Preguntas falladas</TableCell>
-                            <TableCell sx={{ fontSize:'1.3em' }} align="right">{localStorage.getItem("pFalladas")}</TableCell>
+                            <TableCell sx={{ fontSize:'1.2em' }}>Incorrect answers</TableCell>
+                            <TableCell sx={{ fontSize:'1.2em' }} align="right">{localStorage.getItem("pFalladas")}</TableCell>
                         </TableRow>
-
+                        : ""}
                         <TableRow key={"Tiempo usado"} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
-                            <TableCell sx={{ fontSize:'1.3em' }}>Tiempo usado</TableCell>
-                            <TableCell sx={{ fontSize:'1.3em' }} align="right">{formatTiempo(localStorage.getItem("tiempoUsado"))}</TableCell>
+                            <TableCell sx={{ fontSize:'1.2em' }}>Elapsed time</TableCell>
+                            <TableCell sx={{ fontSize:'1.2em' }} align="right">{formatTiempo(localStorage.getItem("tiempoUsado"))}</TableCell>
                         </TableRow>
 
+                        { gameMode === "classic" || gameMode === "category" ?
                         <TableRow key={"Tiempo restante"} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
-                            <TableCell sx={{ fontSize:'1.3em' }}>Tiempo restante</TableCell>
-                            <TableCell sx={{ fontSize:'1.3em' }} align="right">{formatTiempo(localStorage.getItem("tiempoRestante"))}</TableCell>
+                            <TableCell sx={{ fontSize:'1.2em' }}>Time remaining</TableCell>
+                            <TableCell sx={{ fontSize:'1.2em' }} align="right">{formatTiempo(localStorage.getItem("tiempoRestante"))}</TableCell>
                         </TableRow>
+                        : ""}
 
                     </TableBody>
                 </Table>
             </TableContainer>
             </Card>
         </div>
-        </main>
     )
 }