Info page

Arquisoft · Apr 29, 2024 · c1fab0c · c1fab0c
1 parent 134f316
commit c1fab0c
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 51 deletions.
diff --git a/gatewayservice/gateway-service.js b/gatewayservice/gateway-service.js
@@ -91,21 +91,7 @@ app.post('/getUser', async (req, res) => {
 
 
 app.get('/GetQuestions', async (_req, res) => {
-  try {
-    const wikiResponse = await axios.get(wikidataServiceUrl + '/getQuestions', { timeout: 10000 });
-    if (wikiResponse.status !== 200) {
-      let statusCode = wikiResponse.status ? wikiResponse.status : 500;
-
-      console.error('Error with the wikidata service:', statusCode);
-      res.status(statusCode).json({ error: 'Error with the wikidata service' });
-
-    } else {
-      res.json(wikiResponse.data);
-    }
-  } catch (error) {
-    console.error(error);
-    res.status(500).json({ error: error });
-  }
+  getQuestions('/getQuestions', res);
 });
 
 app.get('/GetCapitalsQuestions', async (_req, res) => {

diff --git a/webapp/public/penguins.webp b/webapp/public/penguins.webp
diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx
@@ -3,6 +3,7 @@ import { loginWithToken } from './services/auth-service';
 import Authentication from './components/auth/Authentication';
 import { useUserStore } from './stores/user-store';
 import { Home } from './components/general/Home';
+import Info from './components/general/Info';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import { SimpleNav } from './components/general/SimpleNav';
 import { TriviaGame } from './components/Game/Trivia/TriviaGame';
@@ -36,6 +37,7 @@ function App() {
           <Route path="trivia/hard" element={<TriviaGame difficulty={getHardString()}/>} /> 
           <Route path="/leaderboard" element={<LeaderBoard />}/>
           <Route path="/stats" element={<Statistics />}/>
+          <Route path="/info" element={<Info/>} />
           <Route path="logout" element={<Logout/>} />
           <Route path="*" element={<Home/>} />
 

diff --git a/webapp/src/components/Game/GameOver.tsx b/webapp/src/components/Game/GameOver.tsx
@@ -38,7 +38,7 @@ const GameOver = (props: props) => {
   ) {
     imageToShow = images.lowScore;
     message = "You are NOT smarter than a penguin";
-  } else if (scorePercentage < 75) {
+  } else if (scorePercentage < 100) {
     imageToShow = images.mediumScore;
     message = "You ARE smarter than a penguin";
   } else {

diff --git a/webapp/src/components/general/Info.test.tsx b/webapp/src/components/general/Info.test.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Info from './Info';
+
+test('renders Info component', () => {
+  render(<Info />);
+
+  // Check if the header is present
+  const headerElement = screen.getByText(/INFORMATION/i);
+  expect(headerElement).toBeInTheDocument();
+
+  // Check if the image is present
+  const imageElement = screen.getByAltText(/Descripción de la imagen/i);
+  expect(imageElement).toBeInTheDocument();
+
+  // Check if the rules are present
+  const rulesElement = screen.getByText(/Rules:/i);
+  expect(rulesElement).toBeInTheDocument();
+
+  // Check if the game modes are present
+  const normalGameElement = screen.getByText(/Normal Game:/i);
+  expect(normalGameElement).toBeInTheDocument();
+
+  const triviaGameElement = screen.getByText(/Trivia game:/i);
+  expect(triviaGameElement).toBeInTheDocument();
+
+  // Check if the links are present
+  const linksElement = screen.getByText(/Links:/i);
+  expect(linksElement).toBeInTheDocument();
+
+  // Check if the GitHub link is present
+  const githubLinkElement = screen.getByText(/GitHub/i);
+  expect(githubLinkElement).toBeInTheDocument();
+  expect(githubLinkElement).toHaveAttribute('href', 'https://github.com/Arquisoft/wiq_en3a');
+
+  // Check if the Documentation link is present
+  const documentationLinkElement = screen.getByText(/Documentation/i);
+  expect(documentationLinkElement).toBeInTheDocument();
+  expect(documentationLinkElement).toHaveAttribute('href', 'https://arquisoft.github.io/wiq_en3a/');
+
+  // Check if the OpenAPI link is present
+  const openApiLinkElement = screen.getByText(/OpenAPI/i);
+  expect(openApiLinkElement).toBeInTheDocument();
+  expect(openApiLinkElement).toHaveAttribute('href', 'http://51.103.210.249:8000/api-doc/');
+});
diff --git a/webapp/src/components/general/Info.tsx b/webapp/src/components/general/Info.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { FaLink, FaSkullCrossbones, FaSmile, FaGithub, FaBook, FaFileAlt, FaBrain, FaGamepad } from 'react-icons/fa';
+
+const Info = () => {
+  return (
+    <div className="flex flex-col justify-center text-text p-4 mt-4 gap-4">
+      <h1 className="text-5xl font-bold self-center">INFORMATION</h1>
+      <img className="w-96 h-full  self-center object-cover transition-transform duration-100 transform hover:scale-110" src='/penguins.webp' alt='Descripción de la imagen' />
+
+      <div className='flex items-center font-semibold text-4xl gap-2'><FaBook />          
+            <h2>Rules: </h2></div>      
+      <p className="text-text text-2xl" >Welcome to the game when you can became the penguins emperor! But... it will not be so easy...</p>
+      <p className="text-text text-2xl" >For you to become the king, you should pass the game without errors. Show off your knowledge 🧠 in our two exciting game modes:</p>
+      <div className='flex flex-col gap-4'>
+        <div className='flex items-center text-3xl gap-2'><FaGamepad />          
+            <h2>Normal Game: </h2></div>      
+            <p className="text-2xl">
+                You will have to go through 10 different questions of random topics. Each of the questions will have 4 different options but only 1 is correct!
+            </p> 
+            <div className='flex items-center text-2xl gap-2' style={{ marginLeft: '2em' }}><FaSmile  />         
+                <h3>Easy :</h3>
+                <p> You have 10 seconds to answer each question. </p> 
+            </div>
+            <div className='flex items-center text-2xl gap-2' style={{ marginLeft: '2em' }}><FaSkullCrossbones  />         
+                <h3> Hard:</h3>
+                <p className="text-2xl"> You have 4 second to answer each question.</p> 
+            </div>
+
+        <div className='flex items-center text-3xl gap-2'><FaBrain />         
+            <h2>Trivia game:</h2> </div>          
+            <p className="text-2xl">Our favorite, the trivial mode. Test your skills across five categories: Sports, Science, History, Geography, and Entertainment.
+                Earn a "cheese🧀" for every correct answer, and collect all five to win.
+                The game will end when you gain all the chesses or if you fail a number of questions depending of the difficulty.
+            </p>
+            <div className='flex items-center gap-2 text-2xl' style={{ marginLeft: '2em' }}><FaSmile  />         
+                <h3>Easy: </h3>
+                <p> If you fail 6 questions, you will lose the game. </p> 
+            </div>
+            <div className='flex items-center text-2xl gap-2' style={{ marginLeft: '2em' }}><FaSkullCrossbones  />         
+                <h3> Hard:</h3>                
+            <p> If you fail 3 questions, you will lose the game. </p> 
+            </div>
+      </div>
+
+      <div className='flex items-center text-4xl font-semibold gap-2'><FaLink />          
+            <h2>Links: </h2></div> 
+        <ul>
+        <li className="flex items-center gap-2">
+          <FaGithub />
+          <a className="text-text text-2xl hover:text-primary" href="https://github.com/Arquisoft/wiq_en3a" target="_blank">
+            GitHub 
+          </a>
+        </li>
+        <li className="flex items-center gap-2">
+          <FaBook />
+          <a className="text-text text-2xl hover:text-primary" href="https://arquisoft.github.io/wiq_en3a/" target="_blank">
+            Documentation 
+          </a>
+        </li>
+        <li className="flex items-center gap-2">
+          <FaFileAlt />
+          <a className="text-text text-2xl hover:text-primary" href="http://51.103.210.249:8000/api-doc/" target="_blank">
+            OpenAPI 
+          </a>
+        </li>
+      </ul>
+
+    </div>
+  );
+}
+
+export default Info;
diff --git a/webapp/src/components/general/SimpleNav.test.tsx b/webapp/src/components/general/SimpleNav.test.tsx
@@ -64,31 +64,4 @@ describe('SimpleNav', () => {
     fireEvent.click(getByTestId('audio-button'));
   });
 
-
-  /*test('toggles audio playback when button is clicked', () => {
-    const { getByTestId } = render(<Router> <SimpleNav /> </Router>);
-
-    // Mock HTML audio element
-    const playMock = jest.fn();
-    const pauseMock = jest.fn();
-    const audioMock = {
-      current: {
-        play: playMock,
-        pause: pauseMock
-      }
-    };
-    jest.spyOn(React, 'useRef').mockReturnValue(audioMock);
-
-    // Click on audio button
-    fireEvent.click(getByTestId('audio-button'));
-
-    // Check if audio play function is called
-    expect(playMock).toHaveBeenCalled();
-
-    // Click on audio button again
-    fireEvent.click(getByTestId('audio-button'));
-
-    // Check if audio pause function is called
-    expect(pauseMock).toHaveBeenCalled();
-  });*/
 }); 
diff --git a/webapp/src/components/general/SimpleNav.tsx b/webapp/src/components/general/SimpleNav.tsx
@@ -2,12 +2,10 @@
 import { Avatar, AvatarFallback } from "../ui/avatar";
 import React, { useState, useRef } from 'react';
 import { Link } from "react-router-dom";
-import { useUserStore, getUsername } from '../../stores/user-store';
-
+import { getUsername } from '../../stores/user-store';
+import { FaInfoCircle, FaVolumeUp, FaVolumeMute } from 'react-icons/fa';
 
 export const SimpleNav = () => {
-  //let user = useUserStore(state => state.user!);
-
   const getLinkStyle = ():string => {
     return "text-text text-sm font-bold hover:text-primary transition-colors duration-300 ease-in-out"
   } 
@@ -41,14 +39,17 @@ export const SimpleNav = () => {
 
       </div>
       </div>
-      <div className="flex gap-5">
+      <div className="flex items-center gap-5">
         <Link className={getLinkStyle()} to={`/`}>Home</Link>
         <Link id="leaderboard" className={getLinkStyle()} to={`/leaderboard`}>Leaderboard</Link>
         <Link id="stats" className={getLinkStyle()} to={`/stats`}>Statistics</Link>
-        <Link id="logout" className={getLinkStyle()} to={`/logout`}>Logout</Link>    
+        <Link id="logout" className={getLinkStyle()} to={`/logout`}>Logout</Link> 
         <button data-testid="audio-button" id="audio-button" onClick={togglePlay} style={{ color: 'white' } }>
-          {isPlaying ? '🔊' :  '🔇'}
-        </button>
+          { isPlaying ? <FaVolumeUp /> :  <FaVolumeMute />}
+        </button> 
+        <Link id="info" className={getLinkStyle()} to={`/info`}>
+           <FaInfoCircle />
+        </Link>
       </div>
       <audio ref={audioRef} src={songs[currentSong]} />
     </div>