From 2f2614fdf9ec4e1ac4e11d978c9efe7a970f271a Mon Sep 17 00:00:00 2001
From: adrian <uo287621@uniovi.es>
Date: Sat, 27 Apr 2024 23:41:24 +0200
Subject: [PATCH] score more visible + fixed screen color when growing

---
 webapp/src/components/Navbar.jsx           |   2 +-
 webapp/src/components/game/Game.jsx        |   2 +-
 webapp/src/components/game/Question.jsx    | 317 ++++++++++++---------
 webapp/src/components/user/UserProfile.jsx |   6 +-
 4 files changed, 182 insertions(+), 145 deletions(-)

diff --git a/webapp/src/components/Navbar.jsx b/webapp/src/components/Navbar.jsx
index b32d636..f574a21 100644
--- a/webapp/src/components/Navbar.jsx
+++ b/webapp/src/components/Navbar.jsx
@@ -15,7 +15,7 @@ function Navbar() {
 
         <nav class="bg-white border-gray-200 dark:bg-gray-900">
             <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
-                <div class="flex items-center space-x-3 rtl:space-x-reverse transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg">
+                <div class="flex items-center space-x-3 rtl:space-x-reverse transition-transform transform-gpu hover:scale-105 hover:shadow-lg">
                     <img src="/WIQProvFondo.png" class="h-8" alt="WIQ Logo"></img>
                     <Link to="/" class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white ">WIQ</Link>
                 </div>
diff --git a/webapp/src/components/game/Game.jsx b/webapp/src/components/game/Game.jsx
index a2e49e7..0c25f1e 100644
--- a/webapp/src/components/game/Game.jsx
+++ b/webapp/src/components/game/Game.jsx
@@ -48,7 +48,7 @@ const Game = () => {
 				<li></li>
 				<li></li>
 			</ul>
-        <div className="bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900" style={{ height: "92.9vh" }}>
+        <div className="bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900 min-h-screen">
             {isAuthenticated() ? (flagGameStarted || cityGameStarted || monumentGameStarted
                 || touristAttractionGameStarted || foodGameStarted) ? (
                 <div className="flex justify-center content-center pt-10 h-auto">
diff --git a/webapp/src/components/game/Question.jsx b/webapp/src/components/game/Question.jsx
index a7da832..9a0a385 100644
--- a/webapp/src/components/game/Question.jsx
+++ b/webapp/src/components/game/Question.jsx
@@ -4,151 +4,190 @@ import useAuthUser from "react-auth-kit/hooks/useAuthUser";
 import ImgGameReport from "./ImgGameReport";
 
 const Question = (props) => {
-    const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
-    const [currentQuestion, setCurrentQuestion] = useState(0);
-    const [questions, setQuestions] = useState([]);
-    const [loading, setLoading] = useState(true);
-    const [renderedImages, setRenderedImages] = useState(0);
-    const [counter, setCounter] = useState(0);
-    const [score, setScore] = useState(0);
-    const auth = useAuthUser();
-    const questionsPerGame = 10;
-    const imagesPerQuestion = 4;
-
-    //Game Report
-    const [finished, setFinished] = useState(false);
-    const [answers, setAnswers] = useState([]);
-
-
-
-    useEffect(() => {
-        fetchQuestions();
-    }, []);
-
-    useEffect(() => {
-        const interval = setInterval(() => {
-            if (renderedImages === imagesPerQuestion) {
-                setCounter((prevCounter) => prevCounter + 0.4);
-            }
-        }, 40);
-
-        return () => clearInterval(interval);
-    }, [renderedImages]);
-
-    useEffect(() => {
-        async function answ() {
-            await answerQuestion("TimeOut1234;", questions[currentQuestion].question);
-        }
-
-        if (counter >= 100 && !loading) {
-            answ();
-        }
-    }, [counter]);
-
-
-    const fetchQuestions = async () => {
-        try {
-            setRenderedImages(0)
-            let promises = []
-            let questions = []
-            for (let i = 0; i < questionsPerGame; i++) {
-                let question = axios.get(`${apiEndpoint}/${props.type}/${props.category}/question`)
-                promises.push(question)
-            }
-            let responses = await Promise.all(promises)
-            for (let i = 0; i < questionsPerGame; i++) {
-                let question = responses.pop().data
-                questions.push(question)
-            }
-            setQuestions(questions)
-            setLoading(false)
-        } catch (error) {
-            console.error('Error fetching question:', error);
-        }
-    };
-
-    const answerQuestion = async (answer, question) => {
-        if(counter==0){
-            return
-        }
-        try {
-            setLoading(true);
-            setRenderedImages(0)
-            
+  const apiEndpoint =
+    process.env.REACT_APP_API_ENDPOINT || "http://localhost:8000";
+  const [currentQuestion, setCurrentQuestion] = useState(0);
+  const [questions, setQuestions] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [renderedImages, setRenderedImages] = useState(0);
+  const [counter, setCounter] = useState(0);
+  const [score, setScore] = useState(0);
+  const auth = useAuthUser();
+  const questionsPerGame = 10;
+  const imagesPerQuestion = 4;
+
+  //Game Report
+  const [finished, setFinished] = useState(false);
+  const [answers, setAnswers] = useState([]);
+
+  useEffect(() => {
+    fetchQuestions();
+  }, []);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (renderedImages === imagesPerQuestion) {
+        setCounter((prevCounter) => prevCounter + 0.4);
+      }
+    }, 40);
+
+    return () => clearInterval(interval);
+  }, [renderedImages]);
+
+  useEffect(() => {
+    async function answ() {
+      await answerQuestion("TimeOut1234;", questions[currentQuestion].question);
+    }
 
-            const result = await axios.post(`${apiEndpoint}/${props.type}/answer`,
-                { answer: answer, question: question, username: auth.username, category: props.category },
-                { headers: { 'Content-Type': 'application/json' } });
-            
-            if (result.data.correct === "true") {
-                setScore(score + 1);
-                setAnswers(answers.concat( {question:question,correct:result.data.correct,associate:answer}));
-            }else{
-                setAnswers(answers.concat( {question:question,correct:result.data.correct,associate:result.data.correctImg}));
-            }
-            
-            if (currentQuestion >= questionsPerGame - 1) {
-                //Infinte Game
-                // fetchQuestions()
-                // setCurrentQuestion(0)
-                // setCounter(0);
-                setFinished(true);
-                setLoading(false);
-                return
-            }
-            setCurrentQuestion((question) => question + 1)
-            setCounter(0);
-            setLoading(false)
-        } catch (error) {
-            //console.log(error);
-        }
+    if (counter >= 100 && !loading) {
+      answ();
     }
+  }, [counter]);
+
+  const fetchQuestions = async () => {
+    try {
+      setRenderedImages(0);
+      let promises = [];
+      let questions = [];
+      for (let i = 0; i < questionsPerGame; i++) {
+        let question = axios.get(
+          `${apiEndpoint}/${props.type}/${props.category}/question`
+        );
+        promises.push(question);
+      }
+      let responses = await Promise.all(promises);
+      for (let i = 0; i < questionsPerGame; i++) {
+        let question = responses.pop().data;
+        questions.push(question);
+      }
+      setQuestions(questions);
+      setLoading(false);
+    } catch (error) {
+      console.error("Error fetching question:", error);
+    }
+  };
 
-    const restartGame = async () => {
-        setLoading(true);
-        setScore(0);
-        setAnswers([]);
-        setCurrentQuestion(0);
-        setCounter(0);
-        setFinished(false);
-        await fetchQuestions();
+  const answerQuestion = async (answer, question) => {
+    if (counter == 0) {
+      return;
+    }
+    try {
+      setLoading(true);
+      setRenderedImages(0);
+
+      const result = await axios.post(
+        `${apiEndpoint}/${props.type}/answer`,
+        {
+          answer: answer,
+          question: question,
+          username: auth.username,
+          category: props.category,
+        },
+        { headers: { "Content-Type": "application/json" } }
+      );
+
+      if (result.data.correct === "true") {
+        setScore(score + 1);
+        setAnswers(
+          answers.concat({
+            question: question,
+            correct: result.data.correct,
+            associate: answer,
+          })
+        );
+      } else {
+        setAnswers(
+          answers.concat({
+            question: question,
+            correct: result.data.correct,
+            associate: result.data.correctImg,
+          })
+        );
+      }
+
+      if (currentQuestion >= questionsPerGame - 1) {
+        //Infinte Game
+        // fetchQuestions()
+        // setCurrentQuestion(0)
+        // setCounter(0);
+        setFinished(true);
         setLoading(false);
+        return;
+      }
+      setCurrentQuestion((question) => question + 1);
+      setCounter(0);
+      setLoading(false);
+    } catch (error) {
+      //console.log(error);
     }
-
-
-    return (
-        finished ? <div className="bg-white"><ImgGameReport score={score} answers={answers} restartGame={restartGame}  /></div> :
-        <div className="bg-slate-100 shadow-lg rounded-md p-4 mx-auto max-w-2xl ">
-            <div className="absolute bottom-0 left-0 p-2 bg-gray-200 rounded-md">
-                Score: {score}
+  };
+
+  const restartGame = async () => {
+    setLoading(true);
+    setScore(0);
+    setAnswers([]);
+    setCurrentQuestion(0);
+    setCounter(0);
+    setFinished(false);
+    await fetchQuestions();
+    setLoading(false);
+  };
+
+  return finished ? (
+    <div className="bg-white">
+      <ImgGameReport
+        score={score}
+        answers={answers}
+        restartGame={restartGame}
+      />
+    </div>
+  ) : (
+    <div className="bg-slate-100 shadow-lg rounded-md p-4 mx-auto max-w-2xl ">
+      {loading ? (
+        <>
+          <h1 className="font-bold text-2xl text-gray-800 pl-8">
+            <div class="flex justify-center items-center h-fit">
+              <div class="rounded-full h-20 w-20 bg-violet-800 animate-ping"></div>
             </div>
-            {loading ? (
-                <>
-                    <h1 className="font-bold text-2xl text-gray-800 pl-8"><div class="flex justify-center items-center h-fit">
-                        <div class="rounded-full h-20 w-20 bg-violet-800 animate-ping"></div>
-                    </div></h1>
-                </>
-            ) :  (
-                <div>
-                    <h1 className="font-bold text-3xl text-gray-800 pl-8">{questions[currentQuestion].question}</h1>
-                    <div class="relative h-5 rounded-full overflow-hidden bg-gray-300 mt-20 mx-10">
-                        <div class="absolute top-0 bottom-0 left-0 rounded-full bg-gradient-to-r from-pink-500 to-purple-500"
-                            style={{ width: counter + "%" }}
-                            data-testid="time-bar"></div>
-                    </div>
-                    <div className="grid grid-cols-2 mt-10 item">
-                        {questions[currentQuestion].images.map(image => (
-                            <button className="flex flex-auto transition-transform transform-gpu hover:scale-105 rounded-xl mx-8 my-8">
-                                <img src={image} alt='Loading ...' className="rounded-lg object-contain max-w-48 max-h-36"
-                                    onClick={async () => await answerQuestion(image, questions[currentQuestion].question)}
-                                    onLoad={() => setRenderedImages(renderedImages => renderedImages + 1)}></img>
-                            </button>
-                        ))}
-                    </div>
-                </div>
-            )}
+          </h1>
+        </>
+      ) : (
+        <div>
+          <div className="pl-8 mt-8 p-2">Score: {score}</div>
+          <h1 className="font-bold text-3xl text-gray-800 pl-8">
+            {questions[currentQuestion].question}
+          </h1>
+          <div class="relative h-5 rounded-full overflow-hidden bg-gray-300 mt-20 mx-10">
+            <div
+              class="absolute top-0 bottom-0 left-0 rounded-full bg-gradient-to-r from-pink-500 to-purple-500"
+              style={{ width: counter + "%" }}
+              data-testid="time-bar"
+            ></div>
+          </div>
+          <div className="grid grid-cols-2 mt-10 item">
+            {questions[currentQuestion].images.map((image) => (
+              <button className="transition-transform transform-gpu hover:scale-105 rounded-xl mx-8 my-8 max-h-52 max-w-80">
+                <img
+                  src={image}
+                  alt="Loading ..."
+                  className="rounded-lg object-contain shadow-md"
+                  onClick={async () =>
+                    await answerQuestion(
+                      image,
+                      questions[currentQuestion].question
+                    )
+                  }
+                  onLoad={() =>
+                    setRenderedImages((renderedImages) => renderedImages + 1)
+                  }
+                ></img>
+              </button>
+            ))}
+          </div>
         </div>
-    )
+      )}
+    </div>
+  );
 };
 
-export default Question;
\ No newline at end of file
+export default Question;
diff --git a/webapp/src/components/user/UserProfile.jsx b/webapp/src/components/user/UserProfile.jsx
index 7a15341..ed8d247 100644
--- a/webapp/src/components/user/UserProfile.jsx
+++ b/webapp/src/components/user/UserProfile.jsx
@@ -44,8 +44,7 @@ const UserProfile = () => {
         <li></li>
       </ul>
       <div
-        class="flex flex-col bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900"
-        style={{ height: "92.9vh" }}
+        class="flex flex-col bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900 min-h-screen"
       ></div>
     </div>
   ) : (
@@ -63,8 +62,7 @@ const UserProfile = () => {
         <li></li>
       </ul>
       <div
-        class="flex flex-col bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900"
-        style={{ height: "92.9vh" }}
+        class="flex flex-col bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900 min-h-screen"
       >
         <div className="items-center text-center text-gray-100 px-16 pb-8">
           <h2 className="my-8 text-2xl font-bold text-white md:text-4xl">