Merge pull request #87 from Arquisoft/UO287747-Develop

Uo287747 develop
Arquisoft · Mar 4, 2024 · 3a09314 · 3a09314
2 parents 51ff5ec + 4d2c6a0
commit 3a09314
Show file tree

Hide file tree

Showing 11 changed files with 222 additions and 60 deletions.
diff --git a/webapp/src/App.js b/webapp/src/App.js
@@ -3,7 +3,6 @@ import { useState } from 'react'
 import Nav from './components/Nav'
 import { Start } from './components/Start'
 import { Game } from './components/Game'
-import { PostGame } from './components/PostGame'
 import { Participation } from './components/Participation'
 import User from './components/User'
 
@@ -19,9 +18,8 @@ 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 goTo={(x) => goTo(x)}/>}
-      {menuState === 3 && <PostGame />}
-      {menuState === 4 && <Participation goTo={(x) => goTo(x)}/>}
+      {menuState === 2 && <Game />}
+      {menuState === 3 && <Participation goTo={(x) => goTo(x)}/>}
     </>
   )
 }

diff --git a/webapp/src/components/Game.jsx b/webapp/src/components/Game.jsx
@@ -1,11 +1,13 @@
 import { Card, List, ListItem, ListItemButton, ListItemText, Typography } from '@mui/material'
 
 import React from 'react'
-import { useState, useEffect, useCallback} from 'react'
+import { useState, useEffect } from 'react'
+import { PostGame } from './PostGame'
 
 const N_QUESTIONS = 10
+const MAX_TIME = 600;
 
-const Question = ({ goTo }) => {
+const Question = ({ goTo, setGameFinished }) => {
 
     const [question, setQuestion] = useState('');
     const [options, setOptions] = useState([]);
@@ -18,14 +20,28 @@ const Question = ({ goTo }) => {
     const [numberCorrect, setNumberCorrect] = useState(0);
     const [nQuestion, setNQuestion] = useState(0);
 
-    const fetchQuestion = useCallback(async () => {
-        const handleGameFinish = () => {
-            if (nQuestion === N_QUESTIONS) {
-                // Almacenar datos
-                goTo(3);
-            }
-        };
-
+    const [segundos, setSegundos] = useState(MAX_TIME);
+
+    useEffect(() => {
+
+        const intervalId = setInterval(() => {
+            setSegundos(segundos => {
+                if (segundos === 1) { clearInterval(intervalId); finish() }
+                return segundos - 1;
+            });
+        }, 1000);
+
+        return () => clearInterval(intervalId);
+    }, []);
+
+    const formatTiempo = (segundos) => {
+        const minutos = Math.floor((segundos % 3600) / 60);
+        const segs = segundos % 60;
+        return `${minutos < 10 ? '0' : ''}${minutos}:${segs < 10 ? '0' : ''}${segs}`;
+    };
+
+    const fetchQuestion = async () => {
+
         try {
             const response = await fetch('http://localhost:8000/api/questions/create');
             const data = await response.json();
@@ -41,8 +57,7 @@ const Question = ({ goTo }) => {
         } catch (error) {
             console.error('Error fetching question:', error);
         }
-    }, [setQuestion, setCorrect, setOptions, setSelectedOption, setIsSelected, setNQuestion, nQuestion, goTo]);
-
+    };
 
 
     const getBackgroundColor = (option, index) => {
@@ -54,21 +69,15 @@ const Question = ({ goTo }) => {
         if (isCorrect(option)) return 'green';
     };
 
+    // @SONAR_STOP@
+    // sonarignore:start
     const shuffleOptions = (options) => {
-        let currentIndex = options.length, temporaryValue, randomIndex;
-
-        while (currentIndex !== 0) {
-
-            randomIndex = currentIndex - 1;
-
-            temporaryValue = options[currentIndex - 1];
-            options[currentIndex - 1] = options[randomIndex];
-            options[randomIndex] = temporaryValue;
-
-            currentIndex--;
-        }
-        return options;
+        //NOSONAR
+        return options.sort(() => Math.random() - 0.5); //NOSONAR
+        //NOSONAR
     };
+    // sonarignore:end
+    // @SONAR_START@
 
     const handleSubmit = (option, index) => {
 
@@ -80,9 +89,6 @@ const Question = ({ goTo }) => {
 
         if (isCorrect(option)) {
             setNumberCorrect(numberCorrect+1);
-            console.log('Opción correcta seleccionada:', option, ' NC=', numberCorrect);
-        } else {
-            console.log('Opción incorrecta seleccionada:', option);
         }
     };
 
@@ -91,15 +97,35 @@ const Question = ({ goTo }) => {
         return option === correct;
     };
 
+    const handleGameFinish = () => {
+
+        if (nQuestion === N_QUESTIONS) { finish() }
+        if (segundos === 1) { setSegundos(0); finish() }
+    }
+
+    const finish = () => {
+        // Almacenar datos
+        localStorage.setItem("pAcertadas", numberCorrect);
+        localStorage.setItem("pFalladas", N_QUESTIONS - numberCorrect);
+        localStorage.setItem("tiempoUsado", MAX_TIME - segundos);
+        localStorage.setItem("tiempoRestante", segundos)
+
+        setGameFinished(true);
+        goTo(1);
+    }
+
     useEffect(() => {
         fetchQuestion();
-    }, [fetchQuestion]);
+    }, []);
 
     return(
 
-        <main>
+        <main className='preguntas'>
         <div>
-        <Typography>Question: {nQuestion}</Typography>
+        <div className='questionTime'>
+        <Typography sx={{ display:'inline-block', textAlign:'left'}} >Question: {nQuestion}</Typography>
+        <Typography sx={{ display:'inline-block', textAlign:'right'}}>Time: {formatTiempo(segundos)}</Typography>
+        </div>
         <Card variant='outlined' sx={{ bgcolor: '#222', p: 2, textAlign: 'left' }}>
 
             <Typography variant='h4' paddingBottom={"20px"}>
@@ -117,8 +143,6 @@ const Question = ({ goTo }) => {
                     </ListItem>
                 ))}
             </List>
-
-
         </Card>
         { isSelected ? (
 
@@ -132,12 +156,24 @@ const Question = ({ goTo }) => {
     )
 }
 
-export const Game = ({ goTo }) => {
+export const Game = () => {
+    const [gameState, setGameState] = useState(0);
+    const [gameFinished, setGameFinished] = useState(false);
 
-    return (
+    const goTo = (parameter) => {
+        setGameState(parameter);
+    };
+
+    useEffect(() => {
+        if (gameFinished) {
+            setGameState(1); // Cambia el estado después de que Question termine de renderizarse
+        }
+    }, [gameFinished]);
 
+    return (
         <>
-            <Question goTo={(x) => goTo(x)}/>
+            {gameState === 0 && <Question goTo={(x) => goTo(x)} setGameFinished={setGameFinished} />}
+            {gameState === 1 && <PostGame />}
         </>
-    )
-}
+    );
+};
diff --git a/webapp/src/components/Login.js b/webapp/src/components/Login.js
@@ -1,5 +1,5 @@
 // src/components/Login.js
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
 
@@ -44,7 +44,11 @@ const Login = ({ goTo }) => {
     setOpenSnackbar(false);
   };
 
-  if (loginSuccess) { goTo(1); }
+  useEffect(() => {
+    if (loginSuccess) {
+      goTo(1);
+    }
+  }, [loginSuccess, goTo]);
 
   return (
     <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>

diff --git a/webapp/src/components/Nav.jsx b/webapp/src/components/Nav.jsx
@@ -44,7 +44,7 @@ function Nav({ goTo }) {
   }
 
   return (
-    <AppBar position="static">
+    <AppBar className='nav' position="static">
       <Container maxWidth="xl">
         <Toolbar disableGutters>
           <AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
@@ -96,7 +96,7 @@ function Nav({ goTo }) {
               }}
             >
 
-              <MenuItem onClick={() => goToMenuClic()}>
+              <MenuItem className='menu' onClick={() => goToMenuClic()}>
                 <Typography textAlign="center">Volver al menú</Typography>
               </MenuItem>
             </Menu>
@@ -125,7 +125,7 @@ function Nav({ goTo }) {
                 onClick={() => goToMenuClic()}
                 sx={{ my: 2, color: 'white', display: 'block' }}
               >
-                Menú
+                Menu
               </Button>
           </Box>
 
@@ -151,10 +151,10 @@ function Nav({ goTo }) {
               open={Boolean(anchorElUser)}
               onClose={handleCloseUserMenu}
             >
-              <MenuItem >
+              <MenuItem className='menu'>
                 <Typography textAlign="center">Profile</Typography>
               </MenuItem>
-              <MenuItem onClick={logoutClic}>
+              <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
@@ -1,11 +1,54 @@
-import { Typography } from "@mui/material"
+import { Card, Typography } from "@mui/material"
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
 
 export const PostGame = () => {
 
+    const formatTiempo = (segundos) => {
+        const minutos = Math.floor((segundos % 3600) / 60);
+        const segs = segundos % 60;
+        return `${minutos < 10 ? '0' : ''}${minutos}:${segs < 10 ? '0' : ''}${segs}`;
+    };
+
     return (
 
-        <>
-            <Typography>FIN</Typography>
-        </>
+        <main className='preguntas'>
+        <div>
+            <Typography sx={{ textAlign: 'center', fontSize:'2.2em' }}>Fin del juego</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>
+                        </TableRow>
+
+                        <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>
+                        </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>
+                        </TableRow>
+
+                        <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>
+                        </TableRow>
+
+                    </TableBody>
+                </Table>
+            </TableContainer>
+            </Card>
+        </div>
+        </main>
     )
 }
diff --git a/webapp/src/components/Start.jsx b/webapp/src/components/Start.jsx
@@ -10,7 +10,7 @@ export const Start = ({ goTo }) => {
                 <button onClick={ () => goTo(2) }>
                     Jugar
                 </button>
-                <button onClick={ () => goTo(4) }>
+                <button onClick={ () => goTo(3) }>
                     Participación
                 </button>
             </div>

diff --git a/webapp/src/components/User.jsx b/webapp/src/components/User.jsx
@@ -14,6 +14,8 @@ function User({ goTo }) {
   };
 
   return (
+    <main>
+      <div>
     <Container component="main" maxWidth="xs">
       <CssBaseline />
       <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
@@ -32,6 +34,8 @@ function User({ goTo }) {
         )}
       </Typography>
     </Container>
+    </div>
+    </main>
   );
 }
 

diff --git a/webapp/src/css/index.css b/webapp/src/css/index.css
@@ -63,7 +63,7 @@ button {
   border-radius: 8px;
   border: 1px solid transparent;
   padding: 0.6em 1.2em;
-  font-size: 1em;
+  font-size: 1.3em;
   font-family: inherit;
   background-color: #1a1a1a;
   cursor: pointer;
@@ -85,6 +85,31 @@ button:focus-visible {
   gap: 10px;
 }
 
+.questionTime {
+  display: flex;
+  justify-content: space-between;
+}
+
+.preguntas span {
+  font-size: 1.4em;
+  font-family: 'Roboto slab';
+}
+
+.preguntas h4 {
+  font-family: 'Roboto slab';
+}
+
+.preguntas p {
+  font-family: 'Roboto slab';
+  margin: 1em;
+}
+
+.nav button,
+.nav a,
+.menu p {
+  font-family: 'Roboto slab';
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;