From e02c3d2f123d6b92c7656a99dd73e2f9ccc5fbf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81ngel=20Mac=C3=ADas?= <uo289362@uniovi.es>
Date: Mon, 11 Mar 2024 17:27:26 +0100
Subject: [PATCH] Questions retrieved from wikidata using the api

---
 webapp/src/App.tsx                  | 13 ++++-----
 webapp/src/components/Game/Game.tsx | 36 +++++++++++--------------
 webapp/src/stores/playing-store.ts  | 41 +++++++++++++++++++++++++++++
 3 files changed, 63 insertions(+), 27 deletions(-)

diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx
index 40a03e3..f59d01a 100644
--- a/webapp/src/App.tsx
+++ b/webapp/src/App.tsx
@@ -12,12 +12,13 @@ function App() {
     loginWithToken();
   }, []);
 
-  if (user == null) {
-    return <Authentication/>
-  }
-  else {
-    return <Home />
-  }
+  // if (user == null) {
+  //   return <Authentication/>
+  // }
+  // else {
+  //   return <Home />
+  // }
+  return <Home />
   
 }
 
diff --git a/webapp/src/components/Game/Game.tsx b/webapp/src/components/Game/Game.tsx
index d1c3045..fb1d01c 100644
--- a/webapp/src/components/Game/Game.tsx
+++ b/webapp/src/components/Game/Game.tsx
@@ -3,14 +3,14 @@ import Question from "./Question";
 import NextQuestion from "./NextQuestion";
 import AnswerPanel from "./AnswerPanel";
 import GameOver from "./GameOver";
-import { usePlayingState } from "../../stores/playing-store";
+import { obtenerPreguntas,useGameQuestions, getQuestion, getAnswersList, getCorrectAnswer } from "../../stores/playing-store";
 
 export default function Game() {
     const [answered, setAnswered] = useState(false);
     const [loading, setLoading] = useState(false); // Nuevo estado para controlar si se están cargando nuevas preguntas
     const [score, setScore] = useState(0);
     const [correctSelected, setCorrectSelected] = useState(false);
-    const [questionCount, setQuestionCount] = useState(0); // Estado para rastrear el número de preguntas mostradas
+    
 
 
 
@@ -20,30 +20,24 @@ export default function Game() {
     setTimeout(() => {
       setLoading(false); // Establecer loading en false después de un tiempo de espera
       setAnswered(false); // Reiniciar el estado answered
-      setQuestionCount(questionCount + 1); // Incrementar el contador de preguntas
+      useGameQuestions.getState().nextQuestion(); // Incrementar el contador de preguntas
     }, 0);
   };
 
-  function getAnswersList(){
-    cAnswer = 2;
-    return ['a1', 'b2', 'c3', 'd4'];
-  }
-
-  var cAnswer=-1;
-   
-
-  var questions = ['q1', 'q2', 'q3', 'q4', 'q5', 'q6', 'q7', 'q8', 'q9', 'q10']
-
-  function getQuestion(){
-    return questions[questionCount];
-  }
+  // obtenerPreguntas();
 
+  let questions = useGameQuestions(state => state.questions);
+  let questionCount = useGameQuestions(state => state.questionCount);
+  
 
-  if (questionCount >= 10) {
-    usePlayingState.getState().gameOver();
+  console.log(questions);
+  
+  if (questionCount === 10) {
     return <GameOver score={score} />;
   }
 
+  
+
   return (
     <div id='mainContainer' className='flex flex-col h-full text-text'>
         
@@ -52,13 +46,13 @@ export default function Game() {
         <text className='text-white text-2xl font-bold p-8'> Score: {score} </text>
         {answered && (<NextQuestion onNextQuestion={handleNextQuestion} />)}
         </div>
-        <Question questionText={getQuestion()} />
-        {answered && (<span className='flex justify-center text-3xl '> {correctSelected?'CORRECT!':'WRONG! correct answer : ' + getAnswersList()[cAnswer]} </span>)}
+        <Question questionText={getQuestion(questions, questionCount)} />
+        {answered && (<span className='flex justify-center text-3xl '> {correctSelected?'CORRECT!':'WRONG! correct answer : ' + getCorrectAnswer(questions, questionCount)} </span>)}
         
       </div>
       {!loading && <AnswerPanel score={score}
             setCorrectSelected={setCorrectSelected}
-            setScore={setScore}answered={answered} setAnswered={setAnswered} answers={getAnswersList()} correctAnswer={cAnswer}/>}
+            setScore={setScore}answered={answered} setAnswered={setAnswered} answers={getAnswersList(questions, questionCount)} correctAnswer={getCorrectAnswer(questions, questionCount)}/>}
     </div>
   );
 }
diff --git a/webapp/src/stores/playing-store.ts b/webapp/src/stores/playing-store.ts
index d75f35f..3b6b9e9 100644
--- a/webapp/src/stores/playing-store.ts
+++ b/webapp/src/stores/playing-store.ts
@@ -41,3 +41,44 @@ export const handleShowDialog = ( func: () => void) =>  {
     }
 }
 
+export type Question = {
+    text: string,
+    answers: string[],
+    correctAnswer: number
+}
+
+interface GameQuestions{
+    questions: Question[],
+    setQuestions: (questions: any[]) => void,
+    questionCount: number,
+    nextQuestion: () => void
+}
+
+export const obtenerPreguntas = ():Question[] =>{
+  try {
+    fetch('https:localhost:7259/WikiData/GetQuestions').then((response) => response.json())
+      .then(data => {
+        useGameQuestions.getState().setQuestions(data);
+      }); // La ruta depende de tu configuración de enrutamiento en el backend
+  } catch (error) {
+    console.error('Hubo un problema al obtener las preguntas:', error); // Manejar cualquier error de la solicitud
+  }
+  const questions: Question[] = [];
+  return questions;
+}
+
+
+
+export const useGameQuestions = create<GameQuestions>((set) => ({
+  questions: obtenerPreguntas(),
+  setQuestions: (questions: any[]) => set({questions: questions}),
+  questionCount: 0,
+  nextQuestion: () => set(state => ({questionCount: state.questionCount + 1}))
+}));
+
+export const getQuestion= (questions:Question[], questionCount:number) => questions[questionCount].text;
+export const getAnswersList= (questions:Question[], questionCount:number) => questions[questionCount].answers;
+export const getCorrectAnswer= (questions:Question[], questionCount:number) => questions[questionCount].correctAnswer;
+
+
+