Adding the functionality to generate x number of questions with x opt…

…ions and of x topics (tomorrow i continue i want to sleep)
Arquisoft · Apr 24, 2024 · fa2a5e6 · fa2a5e6
1 parent 53a64cc
commit fa2a5e6
Show file tree

Hide file tree

Showing 6 changed files with 165 additions and 59 deletions.
diff --git a/gameservice/game-service.js b/gameservice/game-service.js
@@ -69,6 +69,15 @@ app.post('/storeGame', async (req, res) => {
   }
 })
 
+app.get('/topics', async (req, res) => {
+  try {
+    const topics = await axios.get(`${questionService}/topics`)
+    res.json(topics.data)
+  } catch (error) { 
+    res.status(500).json({ error: 'Internal Server Error' });
+  }
+})
+
 app.use((err, req, res, next) => {
   console.error(`An error occurred: ${err}`);
   res.status(500).send(`An error occurred: ${err.message}`);

diff --git a/gatewayservice/gateway-service.js b/gatewayservice/gateway-service.js
@@ -124,6 +124,15 @@ app.post('/storeGame', async (req, res) => {
   }
 })
 
+app.get('/topics', async (req, res) => {
+  try {
+    const response = await axios.get(`${gameService}/topics`)
+    res.json(response.data)
+  } catch (error) {
+    catchAction(error, res)
+  }
+})
+
 //libraries required for OpenAPI-Swagger
 const swaggerUi = require('swagger-ui-express'); 
 const fs = require("fs")

diff --git a/webapp/src/components/Menu.js b/webapp/src/components/Menu.js
@@ -2,20 +2,18 @@ import React from 'react';
 import { Container } from '@mui/material';
 import './FirstGame.css';
 import 'react-circular-progressbar/dist/styles.css';
-import axios from 'axios';
 import { useNavigate } from 'react-router-dom'; // Importa useHistory
 import Button from './Button'
 import { Footer } from './footer/Footer';
 import { Nav } from './nav/Nav';
 import {shuffleArray} from './Util'
+import axios from 'axios';
 
-const apiEndpoint = process.env.REACT_APP_API_ENDPOINT|| 'http://localhost:8000';
 
-var gameId;
 //var isApiCalledRef = false;//ASK - is this necessary?
+const apiEndpoint = process.env.REACT_APP_API_ENDPOINT|| 'http://localhost:8000';
 
-
-var questions = []
+var topics
 
 const Menu = () => {
 
@@ -27,41 +25,25 @@ const Menu = () => {
     const [selectedValue, setSelectedValue] = useState('');
     */
 
-    const initiateGame = async () => {
-      await generateGameId();  
-      await getQuestions()  
-      //isApiCalledRef = true//ASK - is this necessary?
-      navigation("/firstGame", {state: {questions, gameId}})
-    }
-
-    const generateGameId = async () => {
+    const getTopics = async () => {
       try {
-        const response = await axios.get(`${apiEndpoint}/generateGameUnlimitedQuestions`)
-        console.log(response.data)
-        gameId = response.data
+        topics = await axios.get(`${apiEndpoint}/topics`)
+        topics = topics.data
+        console.log("Topics", topics)
       } catch(error) {
-        console.error(error);
+        console.error(error)
       }
     }
 
-    const getQuestions = async () => {
-        try {
-          const response = await axios.get(`${apiEndpoint}/gameUnlimitedQuestions`, {gameId});
-          console.log(response.data.length)
-          for (var i = 0; i < response.data.length; i++) {
-            var possibleAnswers = [response.data[i].respuesta_correcta, response.data[i].respuestas_incorrectas[0], response.data[i].respuestas_incorrectas[1], response.data[i].respuestas_incorrectas[2]]
-            possibleAnswers = shuffleArray(possibleAnswers)
-            questions.push({
-              question: response.data[i].pregunta,
-              options: possibleAnswers,
-              correctAnswer: response.data[i].respuesta_correcta
-            })
-          }      
-        } catch (error) {
-          console.error(error);
-        }
-        console.log(questions)
-    };
+    const initiateGame = async () => {
+      await getTopics()  
+      //isApiCalledRef = true//ASK - is this necessary?
+      navigation("/gameConfiguration", {state: {topics}})
+    }
+
+
+
+
 
     return (
       <>

diff --git a/webapp/src/components/game/GameConfiguration.css b/webapp/src/components/game/GameConfiguration.css
@@ -0,0 +1,47 @@
+.questionStructure{
+    border-radius: 1em;
+    border-width: 1px;
+    padding: 1rem;
+
+    /* RGB & HSL params */
+    --label-r: 128;
+    --label-g: 128;
+    --label-b: 128;
+    --label-h: 0;
+    --label-s: 0;
+    --label-l: 50;
+
+    --perceived-lightness: calc( ((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255 );
+    --lightness-switch: max(0, min(calc((1/(var(--lightness-threshold) - var(--perceived-lightness)))), 1));
+    --lightness-threshold: 0.6;
+    --background-alpha: 0.18;
+    --border-alpha: 0.3;
+    --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));
+    color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));
+    background: rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha));
+    border-image: linear-gradient(to bottom, rgba(0, 255, 0,var(--border-alpha)), rgba(0, 0, 255,var(--border-alpha))) 1;
+}
+
+.questionStructure h1{
+    justify-content: center;
+    color: #F0F0F0;
+}
+
+.allTopics {
+    display: grid;
+    grid-template-columns: auto auto;
+}
+
+.allTopics > div{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.comenzarJuego > div{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
diff --git a/webapp/src/components/game/GameConfiguration.js b/webapp/src/components/game/GameConfiguration.js
@@ -2,10 +2,23 @@ import React, { useEffect, useState } from 'react';
 import { Container } from '@mui/material';
 import { Footer } from '../footer/Footer';
 import { Nav } from '../nav/Nav';
+import { Button } from '@mui/material';
+import { useLocation, useNavigate } from 'react-router-dom'; // Importa useHistory
+import axios from 'axios'
 
+const apiEndpoint = process.env.REACT_APP_API_ENDPOINT|| 'http://localhost:8000';
+
+var gameId;
+var questions = []
+const previousBackgroundColor = '#1a1a1a'
 // (configureNumErrors)
 const GameConfiguration = () => {
 
+  var tematicas = useLocation().state.topics;
+  console.log(tematicas)
+
+
+  const navigation = useNavigate(); 
   // Almacen de temáticas 
   const [tematicasSeleccionadas, setTematicasSeleccionadas] = useState([]);
   // Almacen para el número de preguntas
@@ -43,6 +56,50 @@ const GameConfiguration = () => {
     setNumeroErrores(event.target.value);
   };
 
+  const initiateGame = async () => {
+    await generateGameId();  
+    await getQuestions()  
+    //isApiCalledRef = true//ASK - is this necessary?
+    navigation("/firstGame", {state: {questions, gameId}})
+  }
+
+  const generateGameId = async () => {
+    try {
+      const response = await axios.get(`${apiEndpoint}/generateGameUnlimitedQuestions`)
+      console.log(response.data)
+      gameId = response.data
+    } catch(error) {
+      console.error(error);
+    }
+  }
+
+  const getQuestions = async () => {
+    try {
+      const response = await axios.get(`${apiEndpoint}/gameUnlimitedQuestions`, {gameId});
+      console.log(response.data.length)
+      for (var i = 0; i < response.data.length; i++) {
+        var possibleAnswers = [response.data[i].respuesta_correcta, response.data[i].respuestas_incorrectas[0], response.data[i].respuestas_incorrectas[1], response.data[i].respuestas_incorrectas[2]]
+        possibleAnswers = shuffleArray(possibleAnswers)
+        questions.push({
+          question: response.data[i].pregunta,
+          options: possibleAnswers,
+          correctAnswer: response.data[i].respuesta_correcta
+        })
+      }      
+    } catch (error) {
+      console.error(error);
+    }
+    console.log(questions)
+
+  const addTopic = (option) => {
+    const topicToAdd = document.getElementById('topic-' + option)
+    if (topicToAdd.style.backgroundColor === previousBackgroundColor) {
+      topicToAdd.style.backgroundColor = 'green'
+    } else {
+      topicToAdd.style.backgroundColor = previousBackgroundColor
+    }
+  }
+
 
   return (
     <>
@@ -55,6 +112,21 @@ const GameConfiguration = () => {
 
           <h3>Selecciona las temáticas</h3>
 
+          <div className="allTopics">
+          {tematicas.map((option, index) => (
+              <div key={index} >
+                <Button
+                  id={`topic-${option}`}
+                  name="topic"
+                  value={option}
+                  onClick={() => addTopic(option)}
+                />
+              </div>
+            )
+            )}
+
+          </div>
+
           <div>
             <input
               type="checkbox"
@@ -129,31 +201,16 @@ const GameConfiguration = () => {
           </div>
 
         </div>
-
-        {/*
-        {{configureNumErrors} ? (
-          <div className="configureNumberOfErrors">
-
-            <h3>Selecciona el número de errores permitidos</h3>
-
-            <div>
-              <label htmlFor="numErrores">Número de errores permitidos:</label>
-              <select id="numErrores" value={numeroErrores} onChange={handleChange}>
-                <option value="ninguno">Ninguno</option>
-                <option value="1">1</option>
-                <option value="3">3</option>
-                <option value="5">5</option>
-              </select>
-            </div>
 
-          </div>
-        ) : (
-          <div></div>
-        )}
-        */}
-
-        <button>Comenzar Juego</button>
-
+        <div className="comenzarJuego">
+          <Button
+            id='comenzarJuego'
+            name="comenzarJuego"
+            value="Comenzar juego"
+            text="Comenzar juego"
+            onClick={() => initiateGame()}
+          />
+        </div>
 
       </Container>
       <Footer />

diff --git a/webapp/src/index.js b/webapp/src/index.js
@@ -17,6 +17,7 @@ import History from './userStats/App';
 import Login from './components/Login';
 import AppQuestion from './storeQuestion/App'
 import Help from './help/Help';
+import GameConfiguration from './components/game/GameConfiguration';
 
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
@@ -31,6 +32,7 @@ root.render(
         <Route path="/history" element={<History/>}></Route>
         <Route path="/login" element={<Login/>}></Route>
         <Route path="/help" element={<Help/>}></Route>
+        <Route path="/gameConfiguration" element={<GameConfiguration/>}></Route>
       </Routes>
     </Router>
   </React.StrictMode>