styles to single player game

webapp/src/components/game/QuestionsGame.scss

@@ -21,6 +21,7 @@
     font-size: 18px; /* Big text */
     font-weight: bold; /* Bold font */
     transition: transform 0.2s; /* Transition for scale animation */
+    cursor:pointer;
   }
 
   .answer-grid button:active {

webapp/src/components/game/singleplayer/PlayingGameSinglePlayer.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react'
+import { FC, useMemo, useState } from 'react'
 import { Player, Question4Answers } from './GameSinglePlayer'
 import axios from 'axios';
 
@@ -16,23 +16,45 @@ const PlayingGame: FC<PlayingGameProps> = ({questions, setCurrentStage, setPlaye
 
     const [currentQuestion, setCurrentQuestion] = useState(0);
     const [correctAnswers, setCorrectAnswers] = useState(0);
+    const [selectedAnswer, setSelectedAnswer] = useState<string | null>(null);
 
-    const handleAnswerClick = (answer: string) => {
-      if(questions[currentQuestion].correctAnswer === answer){
-        setCorrectAnswers(correctAnswers + 1);
+    const [isWaiting, setIsWaiting] = useState<boolean>(false);
+
+    const answersShuffled = useMemo(() => {
+      return questions.map((question) => {
+        const answers = [question.correctAnswer, question.incorrectAnswer1, question.incorrectAnswer2, question.incorrectAnswer3];
+        for (let i = answers.length - 1; i > 0; i--) {
+          const j = Math.floor(Math.random() * (i + 1));
+          [answers[i], answers[j]] = [answers[j], answers[i]];
+        }
+        return answers;
+      });
+    }, [questions]);
+
+    const handleAnswerClick = async (answer: string, isCorrect:boolean) => {
+      if(!isWaiting){
+        setIsWaiting(true);
+        setSelectedAnswer(answer);
 
+          setTimeout(() => {
+            if (isCorrect) {
+              setCorrectAnswers(correctAnswers + 1);
+            }
+            setCurrentQuestion(currentQuestion + 1);
+            setSelectedAnswer(null);
+          }, 1000);
+        setIsWaiting(false);
       }
-      setCurrentQuestion(currentQuestion + 1);
+
+      // if(currentQuestion+2 === questions.length){
+      //   finishGame();
+      // }
     };
 
-    const calculatePoints = (correctAnswers: number, totalQuestions: number) => {
-      const incorrectQuestions = totalQuestions - correctAnswers;
-      const points = correctAnswers * 100 - incorrectQuestions * 25;
-      return points;
-    }
-
-    const handleNext = async () => {
-
+    const finishGame = async() => {
+      const totalPoints = calculatePoints(correctAnswers, questions.length);
+      // the player has finished the game
+      // update stats for each player
       players.map(player => {
         const randomPoints = Math.floor(Math.random() * (1000 - 100 + 1) / 50) * 50 + 100;
         if(player.isBot){
@@ -43,34 +65,31 @@ const PlayingGame: FC<PlayingGameProps> = ({questions, setCurrentStage, setPlaye
         return player;
       })
       setPlayers(players);
-      setCurrentStage(3);
-      const sorted = players.sort((a, b) => b.points - a.points);
+
       const requestData ={ "players": [{
         "uuid": uuid,
         "nCorrectAnswers": correctAnswers,
         "nWrongAnswers": questions.length - correctAnswers,
-        "totalScore": calculatePoints(correctAnswers, questions.length),
-        "isWinner": !sorted[0].isBot
+        "totalScore": totalPoints,
+        "isWinner": false
       }]}
 
+      // update score in localstorage
+      const previousScore = parseInt(localStorage.getItem("score"))
+      localStorage.setItem("score", (previousScore + totalPoints).toString())
+      setCurrentStage(3);
       await axios.post(`${apiEndpoint}/updateStats`, requestData);
     }
 
-    const getShuffledAnswers = () => {
-      const answers = [
-        questions[currentQuestion].correctAnswer,
-        questions[currentQuestion].incorrectAnswer1,
-        questions[currentQuestion].incorrectAnswer2,
-        questions[currentQuestion].incorrectAnswer3,
-      ];
-
-      // Fisher-Yates Shuffle for randomizing answer order
-      for (let i = answers.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        [answers[i], answers[j]] = [answers[j], answers[i]];
-      }
-
-      return answers;
+    const calculatePoints = (correctAnswers: number, totalQuestions: number) => {
+      const incorrectQuestions = totalQuestions - correctAnswers;
+      const points = correctAnswers * 100 - incorrectQuestions * 25;
+      return points;
+    }
+
+    const getAnswers = () => {
+      console.log(answersShuffled[currentQuestion])
+      return answersShuffled[currentQuestion];
     };
 
     return (
@@ -80,22 +99,26 @@ const PlayingGame: FC<PlayingGameProps> = ({questions, setCurrentStage, setPlaye
           <h2>Question {currentQuestion + 1}</h2>
           <p>{questions[currentQuestion].question}</p>
           <div className="answer-grid">
-            {getShuffledAnswers().map((answer) => (
+            {getAnswers().map((answer) => {
+              const isCorrect = questions[currentQuestion].correctAnswer === answer;
+              const buttonColor = (selectedAnswer === answer && !isWaiting) ? (isCorrect ? '#66ff66' : '#ff6666') : '#89c3ff';
+              return (
               <button
                 key={answer}
-                onClick={() => handleAnswerClick(answer)}
+                onClick={() => handleAnswerClick(answer, isCorrect)}
+                style={{ backgroundColor: buttonColor }}
               >
                 {answer}
               </button>
-            ))}
+            )})}
           </div>
         </>
       )}
       {currentQuestion+1 === questions.length && ( 
         <>
           <p>You answered {correctAnswers} out of {questions.length} questions correctly.</p>
           <p>You earned {calculatePoints(correctAnswers, questions.length)} points.</p>
-          <button onClick={() => handleNext()}>Next</button>
+          <button onClick={() => finishGame()}>Next</button>
         </>
       )}
     </div>