Added Game Configurator logic

Arquisoft · Apr 15, 2024 · 581feba · 581feba
1 parent aa34cf9
commit 581feba
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 20 deletions.
diff --git a/webapp/public/index.html b/webapp/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

diff --git a/webapp/src/components/GameConfigurator/GameConfigurator.js b/webapp/src/components/GameConfigurator/GameConfigurator.js
@@ -1,13 +1,20 @@
 import React, { useState } from 'react';
+
 import {useTranslation} from "react-i18next";
 import { Link } from "react-router-dom";
+import QuestionView from '../questionView/QuestionView'
 
 function GameConfigurator(){
-    const [tipoPregunta, setTipoPregunta] = useState('');
+    const [tipoPregunta, setTipoPregunta] = useState('POPULATION');
     const [numeroPreguntas, setNumeroPreguntas] = useState(5);
+    const [clickedForNewGame, setClickedForNewGame]= useState(false);
     const[t, i18n] = useTranslation("global");
 
+    function handleClick() {
+      setClickedForNewGame(true);
+    }
     return (
+      clickedForNewGame ? <QuestionView type={tipoPregunta} amount={numeroPreguntas} /> :
       <div>
         <h1>{t("gameConfigurator.game_config")}</h1>
 
@@ -26,30 +33,33 @@ function GameConfigurator(){
           type="number" 
           value={numeroPreguntas} 
           onChange={(e) => setNumeroPreguntas(e.target.value)} 
-          min="1" 
+          min="1" max="20"
         />
         <br></br>
-        <ButtonCustomized t={t} />
+        <ButtonCustomized t={t} handleClick={handleClick}/>
         <br></br>
         <p>{t("gameConfigurator.rules_competi")}</p>
         {/* Botones para jugar un juego personalizado o competitivo */}
         <ButtonCompetitive t={t} />
-
-
       </div>
     );
 }
 
-function ButtonCustomized({t, type, number}){
-    return(
-        <button onClick={() => alert('Jugar Juego Personalizado')}>{t("gameConfigurator.play_custom")}</button>
-    );
+
+function ButtonCustomized({t,handleClick}) {
+
+  return (
+    <button onClick={handleClick}>{t("gameConfigurator.play_custom")}</button>
+  );
 }
 
+
 function ButtonCompetitive({t}){
      //llamar setTipoPregunta COMPETITIVE
-    return(
-        <button onClick={() => alert('Jugar Juego Competitivo')}>{t("gameConfigurator.play_competi")}</button>
+     return (
+      <Link className="linkButton" to="/questions">
+        <h3>{t("gameConfigurator.play_competi")}</h3>
+      </Link>
     );
 }
 

diff --git a/webapp/src/components/questionView/QuestionGenerator.js b/webapp/src/components/questionView/QuestionGenerator.js
@@ -8,12 +8,13 @@ class QuestionGenerator{
 
     }
 
-    async generateQuestions(lang) {
+    async generateQuestions(lang, type, amount) {
         try {
             //const response = await fetch(this.apiUrl);
             //const receivedQuestions = await response.json();
 
             //Mockup
+            console.log("type: "+type+" amount: "+amount)
             const receivedQuestions = JSON.parse('{"0":{"question":"¿Cuál es la población de Oviedo?","answers":["225089","191325","220587","121548"]},'+
             '"1":{"question":"¿Cuál es la población de Gijón?","answers":["275274","159658","233982","305554"]},'+
             '"2":{"question":"¿Cuál es la población de Avilés?","answers":["82568","115595","41284","122200"]},'+
@@ -35,7 +36,11 @@ class QuestionGenerator{
 
         /*
         try {
-            const response = await axios.get(this.apiUrl + '/' + lang);
+            if(type==="COMPETITIVE"){
+                const response = await axios.get(this.apiUrl + '/' + lang);
+            }else{
+                const response = await axios.get(this.apiUrl + '/' + lang + '/' +amount + '/' + type);
+            }
             const receivedQuestions = await response.data;
             let i = 0;
             var questions = [];

diff --git a/webapp/src/components/questionView/QuestionView.js b/webapp/src/components/questionView/QuestionView.js
@@ -14,16 +14,16 @@ import BackButtonToGameMenu from '../fragments/BackButtonToGameMenu';
 const creationHistoricalRecord = new CreationHistoricalRecord();
 const questionGenerator = new QuestionGenerator();
 var points = 0;
-function QuestionView(){
+function QuestionView({type= "COMPETITIVE", amount=5}){
     const [numQuestion, setnumQuestion] = useState(-1);
     const [questions, setQuestions] = useState(null);
     const[t, i18n] = useTranslation("global");
     const {user} = useUserContext();
-
+    
     const generateQuestions = async (numQuestion) => {
         if (numQuestion < 0) {
             try {
-                var generatedQuestions = await questionGenerator.generateQuestions(i18n.language);
+                var generatedQuestions = await questionGenerator.generateQuestions(i18n.language, type, amount);
                 setQuestions(generatedQuestions);
                 setnumQuestion(0);
             } catch (error) {

diff --git a/webapp/src/index.js b/webapp/src/index.js
@@ -32,16 +32,14 @@ i18next.init({
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
+
   <React.StrictMode>
-    <head>
-      <link rel="icon" type="img/ico" href="../public/favicon.ico"/>
-    </head>
-
     {/* envolviendo la app con el sistema de traducciones  */}
     <I18nextProvider i18n={i18next}>  
       <App />
     </I18nextProvider>
   </React.StrictMode>
+
 );
 
 // If you want to start measuring performance in your app, pass a function