Merge pull request #274 from Arquisoft/against-the-clock

Against Clock

webapp/package.json

@@ -25,7 +25,6 @@
     "react-i18next": "^14.1.0",
     "react-native": "^0.73.5",
     "react-router-dom": "^6.21.3",
-    "react-scripts": "5.0.1",
     "sass": "^1.72.0",
     "sweetalert2": "^11.10.7",
     "tailwindcss": "^3.4.1",
@@ -67,6 +66,7 @@
     "mongodb-memory-server": "^9.1.4",
     "puppeteer": "^21.7.0",
     "react-native": "^0.73.5",
+    "react-scripts": "^5.0.1",
     "serve": "^14.2.1",
     "start-server-and-test": "^2.0.3",
     "tailwindcss": "^3.4.1"

webapp/src/components/game/AgainstClock.js

@@ -0,0 +1,32 @@
+import { React } from "react";
+import Game from "./Game";
+import PropTypes from "prop-types";
+import {useLocation} from "react-router-dom";
+
+export const AgainstClock = ({tags}) => {
+    const token = localStorage.getItem('token');
+
+    const location = useLocation();
+
+    let gameTags = "";
+
+    if(tags !== undefined && tags !== null) {
+        gameTags = tags;
+    }
+    if(location.state !== undefined && location.state !== null){
+        gameTags = location.state.tags;
+    }
+
+    return (
+        <Game
+            name = "AgainstClock"
+            tags = {gameTags}
+        />
+    );
+
+
+}
+
+AgainstClock.propTypes = {
+    tags: PropTypes.string.isRequired
+}

webapp/src/components/game/AgainstClock.test.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import {render, screen, fireEvent, act, waitFor} from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {AgainstClock} from './AgainstClock';
+import Game from "./Game";
+import { MemoryRouter, Route } from 'react-router-dom';
+import * as router from "react-router";
+import "../../i18n";
+
+jest.mock('../../services/game.service', () => ({
+    startNewGame: () => Promise.resolve(""),
+    nextQuestion: () => Promise.resolve({ title: 'Pregunta de prueba', awnsers: ['Respuesta 1', 'Respuesta 2', 'Respuesta 3', 'Respuesta 4'] }),
+    awnser: () => Promise.resolve('Respuesta 1'),
+    getEndTime: () => Promise.resolve(
+        {
+            end: 50,
+            start: 0
+        }
+    ),
+    getGameSettings: () => Promise.resolve({durationQuestion:50}),
+    getNumberOfQuestions: () => Promise.resolve(10),
+    getCurrentQuestion: () => Promise.resolve({ title: 'Pregunta actual', user_answer: 'Respuesta 1', answer: 'Respuesta 1' }),
+}));
+
+const navigate = jest.fn();
+const locate = jest.fn();
+
+describe("Game component", () => {
+    beforeEach(() => {
+        localStorage.setItem("token", "manolineldelpino");
+        jest.spyOn(router, 'useNavigate').mockImplementation(() => navigate)
+        jest.spyOn(router, 'useLocation').mockImplementation(() => locate)
+    });
+
+    test('renders component', async () => {
+        await act(() => render(<AgainstClock tags={"tag"}/>))
+
+        expect(screen.getByText(/Pregunta de prueba/i)).toBeInTheDocument();
+    })
+})

webapp/src/components/game/Game.js

@@ -43,6 +43,10 @@ export const Game = ({finishFunction, name, tags}) => {
     const [remTime, setRemTime] = useState(0);
     const location = useLocation();
 
+    const againstClockFinish = async () => {
+        return remTime <= 0;
+    }
+
 
     const comprobarPregunta = (respuesta) => {
         awnser(token, respuesta).then(async (correcta) => {
@@ -57,12 +61,12 @@ export const Game = ({finishFunction, name, tags}) => {
                 }
             }
 
-
-            console.log(typeof finishFunction);
-
             if(finishFunction !== undefined && finishFunction != null) {
                 callback(await finishFunction());
             }
+            else if(name === "AgainstClock"){
+                callback( await againstClockFinish());
+            }
             else{
                  callback(await isFinished());
             }
@@ -130,8 +134,10 @@ export const Game = ({finishFunction, name, tags}) => {
             setQuestionImage(respuesta.imageUrl);
             setRespuestas(respuesta.awnsers);
             setLoading(false);
-            getEndTime(token).then((time) => {
-                setTime(time);
+            getEndTime(token).then((timef) => {
+                if(name !== "AgainstClock" || time === undefined){
+                    setTime(timef);
+                }
             });
         });
     }
@@ -141,7 +147,6 @@ export const Game = ({finishFunction, name, tags}) => {
         setQuestionImage("");
         setRespuestas(["...","...","...","..."])
         setLoading(true);
-        setTime(undefined);
 
         document.querySelectorAll('*[data-buton="btn"]').forEach((btn) => {
             btn.className = "bg-cyan-200 dark:bg-purple-700 w-full containedButton text-black dark:text-white font-mono";
@@ -152,21 +157,39 @@ export const Game = ({finishFunction, name, tags}) => {
     useEffect(() => {
         let interval = setInterval(() => {
             setTime(time => {
-                    if(time !== undefined){
-                        let total = basicGameSetting.durationQuestion * 1000;
-                        let trans = (new Date().getTime()) - time.start;
-
-                        let percentage =  (trans/total) * 100;
-                        let invertedPercentage = 100 - Number(percentage);
+                if(time !== undefined){
+                    let total = 0;
+                    let trans = 0;
+                    let percentage = 0;
+                    let invertedPercentage = 0;
+                    let gameTime = 0;
+
+                    if(name === "AgainstClock"){
+                        gameTime = (basicGameSetting.durationQuestion * basicGameSetting.numberOfQuestions) <= 600 ? basicGameSetting.durationQuestion * basicGameSetting.numberOfQuestions : 600;
+                        total = gameTime * 1000 ;
+                        trans = (new Date().getTime()) - time.start;
+
+                        percentage =  (trans/total) * 100;
+                        invertedPercentage = 100 - Number(percentage);
+
+                        setRemTime((invertedPercentage/100)*gameTime);
+                    }else{
+                        gameTime = basicGameSetting.durationQuestion ;
+                        total = gameTime * 1000;
+                        trans = (new Date().getTime()) - time.start;
+
+                        percentage =  (trans/total) * 100;
+                        invertedPercentage = 100 - Number(percentage);
 
-                        setRemTime((invertedPercentage/100)*110);
+                        setRemTime((invertedPercentage/100)*gameTime);
+                    }
 
-                        if(percentage > 100){
-                            comprobarPregunta("");
-                            time = undefined;
-                        }
+                    if(percentage > 100){
+                        comprobarPregunta("");
+                        time = undefined;
                     }
-                return time;
+                }
+            return time;
             });
         }, 20);
 
@@ -232,8 +255,9 @@ export const Game = ({finishFunction, name, tags}) => {
                     className="text-black dark:text-white bg-cyan-200 dark:bg-purple-700"
                 >
                     <Typography data-testid="counter" variant="h2" component="h2" className="text-black dark:text-white " >
-                        { Math.min(Math.max(Number(remTime/10).toFixed(0),0),10) }
+                        { name != "AgainstClock" ? Math.min(Math.max(Number(remTime/1).toFixed(0),0),60) :  Math.min(Math.max(Number(remTime/1).toFixed(0),0),3000)}
                     </Typography>
+
                 </Box>
                 <Typography fontFamily="monospace" component="h1" variant="h5" className="text-black dark:text-white " 
                     sx={{
@@ -315,7 +339,7 @@ export const Game = ({finishFunction, name, tags}) => {
 
 Game.propTypes = {
     finishFunction: PropTypes.func.isRequired,
-    name: PropTypes.string.isRequired
+    name: PropTypes.string.isRequired,
 }
 
 export default Game;

webapp/src/components/home/Home.js

@@ -63,6 +63,15 @@ export const Home = () =>
         })
     }
 
+    const startAgainstClock = () => {
+        let tagString = stringifyTags();
+        navigate("/againstClock", {
+            state: {
+                tags: tagString
+            }
+        })
+    }
+
     const stringifyTags = () => {
         let tagString = "";
         tags.forEach((tag) => {
@@ -170,6 +179,14 @@ export const Home = () =>
                                 <span className="text-black dark:text-white text">{ t('Home.playSuddenDeath') }</span>
                             </button>
                         </div>
+                        <div className="flex align-middle justify-center flex-grow m-3">
+                            <button onClick={startAgainstClock} className="bg-gradient-to-r
+                                from-cyan-50 via-cyan-300 to blue-500
+                                dark:from-orange-500 dark:via-purple-500 dark:to-pink-500
+                                buttonGradient">
+                                <span className="text-black dark:text-white text">JUGAR Contrareloj</span>
+                            </button>
+                        </div>
                         <div className="flex align-middle justify-center flex-grow m-3">
                             <button onClick={openTagSelection} className="buttonGradient">
                                 <span className="text-black dark:text-white ">{ t('Home.chooseTags') }</span>

webapp/src/components/nav/Nav.js

@@ -69,7 +69,7 @@ export const Nav = () => {
     console.log("Current path: " + path);
 
     if (path != "/game") navigate("/home");
-    else if (path === "/game") {
+    else if (path === "/game" || path === "/suddendeath" || path === "/againstClock") {
       Swal.fire({
         title: t("Nav.alertTitle"),
         text: t("Nav.alertText"),

webapp/src/routers/AppRouter.js

@@ -7,6 +7,7 @@ import { PrivateRoute } from "./PrivateRoute";
 import { AuthRoute } from "./AuthRoute";
 import { Home } from "../components/home/Home";
 import Game from "../components/game/Game";
+import {AgainstClock} from "../components/game/AgainstClock";
 import { History } from "../components/history/History";
 import {Profile} from "../components/profile/Profile";
 import {Settings} from "../components/settings/Settings";
@@ -60,6 +61,12 @@ const router = createBrowserRouter([
             <SuddenDeath/>
         </PrivateRoute>
     },
+    {
+        path: "/againstClock",
+        element: <PrivateRoute>
+                    <AgainstClock />
+                </PrivateRoute>       
+    },
     {
 
         path: "/profile",