Adapted frontend into typescript and organizing of components

webapp/src/App.tsx

@@ -1,105 +1,11 @@
 import React, { useState } from 'react';
+import Game from './components/Game/Game';
 
-function Answer({ answer, correctAnswer, answered, setAnswered }) {
-  const commonStyle = 'flex justify-center items-center border-4 border-purple-700 py-2 px-4 rounded text-white font-bold text-2xl '
-
-  const [clicked, setClicked] = useState(false);
-  const [buttonClass, setButtonClass] = useState(`${commonStyle} hover:bg-purple-700 bg-purple-500`);
-
-  const handleClick = () => {
-    setClicked(true);
-    setAnswered(true);
-    processBhColor();
-    correctSelected=correctAnswer;
-    if(correctAnswer) score+= 10;
-    console.log(score);
-  };
-
-  const processBhColor = () => {
-    const newClass = correctAnswer ? 'bg-green-500' : 'bg-red-500';
-    setButtonClass( () => `${commonStyle} ${newClass}`);
-  };
-
-  return (
-      <button 
-        className={buttonClass}
-        onClick={handleClick}
-        disabled={answered || clicked}
-      >
-        {answer}
-      </button>
-  );
-}
-
-function Question({ question }) {
-  return (
-    <div className='flex justify-center items-center h-1/2'>
-      <span className='text-white font-sans text-4xl'>{question}</span>
-    </div>
-  );
-}
-
-
-function Answers({ answered, setAnswered, answers, correctAnswer }) {
-  return (
-    <div id='respuestas' className="grid grid-cols-2 bg-purple-500  ">
-      <Answer answer={answers[0]} correctAnswer={correctAnswer===0} answered={answered} setAnswered={setAnswered} />
-      <Answer answer={answers[1]} correctAnswer={correctAnswer===1} answered={answered} setAnswered={setAnswered} />
-      <Answer answer={answers[2]} correctAnswer={correctAnswer===2} answered={answered} setAnswered={setAnswered} />
-      <Answer answer={answers[3]} correctAnswer={correctAnswer===3} answered={answered} setAnswered={setAnswered} />
-      </div>
-  );
-}
-
-
-function NextQuestion({ onNextQuestion }) {
-  const goToNextQuestion = () => {
-    onNextQuestion();
-  };
-
-  return (
-    <button className='absolute top-0 right-0 bg-white m-8' onClick={goToNextQuestion}>
-      Next Question
-    </button>
-  );
-}
 
 function App() {
-  const [answered, setAnswered] = useState(false);
-  const [loading, setLoading] = useState(false); // Nuevo estado para controlar si se están cargando nuevas preguntas
-
-  const handleNextQuestion = () => {
-    setLoading(true); // Establecer loading en true al hacer clic en "Next Question"
-    // Simular carga de nuevas preguntas
-    setTimeout(() => {
-      setLoading(false); // Establecer loading en false después de un tiempo de espera
-      setAnswered(false); // Reiniciar el estado answered
-    }, 0);
-  };
-
-  return (
-    <div id='mainContainer' className='grid grid-rows-2 h-screen '>
-      <div id='pregunta' className='bg-purple-400 border-4 border-purple-700'>
-        <text className='text-black border-4 border-purple-600 absolute top-0 left-0 text-2xl m-8'> Score: {score} </text>
-        <Question question={getQuestion()} />
-        {answered && (<span className='flex text-black justify-center text-3xl '> {correctSelected?'CORRECT!':'WRONG! correct answer : ' + getAnswersList()[cAnswer]} </span>)}
-        {answered && (<NextQuestion onNextQuestion={handleNextQuestion} />)}
-      </div>
-      {!loading && <Answers answered={answered} setAnswered={setAnswered} answers={getAnswersList()} correctAnswer={cAnswer}/>}
-    </div>
-  );
-}
-
-function getAnswersList(){
-  cAnswer = 2;
-  return ['a1', 'b2', 'c3', 'd4'];
+  return <div>
+    <Game />
+  </div>
 }
-var cAnswer=-1;
-function getQuestion(){
-  return 'Which is the correct answer??';
-}
-var correctSelected = false;
-
-var score = 0;
 
 export default App;

webapp/src/components/Game/Answer.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+
+type props = {
+    answered : boolean,
+    correctAnswer : boolean,
+    answer : string,
+    score: number,
+    setAnswered : (answered : boolean) => void,
+    setScore : (score : number) => void
+    setCorrectSelected : (correctSelected : boolean) => void
+}
+
+const Answer = (props : props) => {
+
+    const commonStyle = 'flex justify-center items-center border-4 border-purple-700 py-2 px-4 rounded text-white font-bold text-2xl ';
+
+    const [clicked, setClicked] = useState(false);
+    const [buttonClass, setButtonClass] = useState(`${commonStyle} hover:bg-purple-700 bg-purple-500`);
+
+    const handleClick = () => {
+      setClicked(true);
+      props.setAnswered(true);
+      processBhColor();
+      props.setCorrectSelected(props.correctAnswer);
+      if(props.correctAnswer) props.setScore(props.score + 10);
+      console.log(props.score);
+    };
+
+    const processBhColor = () => {
+      const newClass = props.correctAnswer ? 'bg-green-500' : 'bg-red-500';
+      setButtonClass( () => `${commonStyle} ${newClass}`);
+    };
+
+    return (
+        <button 
+          className={buttonClass}
+          onClick={handleClick}
+          disabled={props.answered || clicked}
+        >
+          {props.answer}
+        </button>
+    );
+
+
+
+
+  }
+
+export default Answer;

webapp/src/components/Game/AnswerPanel.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import Answer from "./Answer";
+
+type props = {
+  answered: boolean;
+  correctAnswer: number;
+  answers: string[];
+  score: number;
+  setAnswered: (answered: boolean) => void;
+  setScore: (score: number) => void;
+  setCorrectSelected: (correctSelected: boolean) => void;
+};
+
+const AnswerPanel = (props: props) => {
+  return (
+    <div id="respuestas" className="grid grid-cols-2 bg-purple-500 flex-1  ">
+      {props.answers.map((answer, index) => {
+        return (
+          <Answer
+            score={props.score}
+            setCorrectSelected={props.setCorrectSelected}
+            setScore={props.setScore}
+            answer={answer}
+            correctAnswer={props.correctAnswer === index}
+            answered={props.answered}
+            setAnswered={props.setAnswered}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default AnswerPanel;

webapp/src/components/Game/Game.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import Question from "./Question";
+import NextQuestion from "./NextQuestion";
+import AnswerPanel from "./AnswerPanel";
+
+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 handleNextQuestion = () => {
+    setLoading(true); // Establecer loading en true al hacer clic en "Next Question"
+    // Simular carga de nuevas preguntas
+    setTimeout(() => {
+      setLoading(false); // Establecer loading en false después de un tiempo de espera
+      setAnswered(false); // Reiniciar el estado answered
+    }, 0);
+  };
+
+  function getAnswersList(){
+    cAnswer = 2;
+    return ['a1', 'b2', 'c3', 'd4'];
+  }
+  var cAnswer=-1;
+  function getQuestion(){
+    return 'Which is the correct answer??';
+  }
+
+  return (
+    <div id='mainContainer' className='flex flex-col  h-screen '>
+      <div id='pregunta' className='bg-purple-400 h-1/2 border-4 border-purple-700 flex-1'>
+        <div className="flex justify-between">
+        <text className='text-white text-2xl 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>)}
+
+      </div>
+      {!loading && <AnswerPanel score={score}
+            setCorrectSelected={setCorrectSelected}
+            setScore={setScore}answered={answered} setAnswered={setAnswered} answers={getAnswersList()} correctAnswer={cAnswer}/>}
+    </div>
+  );
+}

webapp/src/components/Game/NextQuestion.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+type props = {
+    onNextQuestion: () => void;
+    };
+
+const NextQuestion = (props : props) =>{
+
+    return (
+      <button className='m-5 p-3 border-2 border-purple-900 text-white bg-purple-500 rounded-full hover:bg-purple-700' onClick={ () => props.onNextQuestion()}>
+        Next Question
+      </button>
+    );
+  }
+
+export default NextQuestion; 

webapp/src/components/Game/Question.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+type props = {
+    questionText : string
+}
+
+const Question = (props : props) => {
+    return (
+      <div className='flex justify-center items-center h-1/2'>
+        <span className='text-white font-sans text-4xl'>{props.questionText}</span>
+      </div>
+    );
+  }
+
+
+export default Question;
+