fix(gamescreen): deleted rolling effect + refactor fetching scheme

.maestro/launchGame.yml

@@ -1,7 +1,8 @@
 appId: com.axe.l.r.drinkup
 ---
 - launchApp
-- tapOn: "drinkup on MacBook-Pro-de-Axel.local"
+- tapOn: # Open the server in 
+    point: "50%,26%"
 - tapOn: "LANCER LA PARTIE"
 
 - assertVisible: "LOBBY"

package.json

@@ -17,17 +17,17 @@
     "@react-navigation/native-stack": "^6.9.17",
     "eas-cli": "^7.3.0",
     "expo": "~49.0.15",
-    "expo-status-bar": "~1.11.1",
+    "expo-status-bar": "~1.6.0",
     "mongodb": "^6.3.0",
     "mongoose": "^8.2.0",
     "nativewind": "^2.0.11",
     "react": "18.2.0",
     "react-native": "0.72.10",
     "react-native-heroicons": "^4.0.0",
     "react-native-progress": "^5.0.1",
-    "react-native-safe-area-context": "4.9.0",
-    "react-native-screens": "~3.29.0",
-    "react-native-svg": "14.1.0",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-screens": "~3.22.0",
+    "react-native-svg": "13.9.0",
     "tailwindcss": "3.3.2"
   },
   "devDependencies": {

screens/Gamescreen.js

@@ -1,12 +1,11 @@
 import {
   View,
   Text,
-  FlatList,
   TouchableOpacity,
   ImageBackground,
 } from "react-native";
 import React, { useEffect, useState } from "react";
-import { ActivityIndicator } from "react-native"
+import { ActivityIndicator } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { StatusBar } from "expo-status-bar";
 import AsyncStorage from "@react-native-async-storage/async-storage";
@@ -16,41 +15,35 @@ import * as Progress from "react-native-progress";
 import { useImage } from "../provider/ImageContext";
 
 export default function Gamescreen() {
+  const [isLoading, setIsLoading] = useState(false);
   const [questions, setQuestions] = useState([]);
   const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
   const [players, setPlayers] = useState([]);
   const port = 3000;
   const { backgroundImageSource } = useImage();
 
   useEffect(() => {
-    fetchQuestions();
-    fetchPlayers();
+    fetchQuestionsAndPlayers();
   }, []); // Fetch questions and players initially
 
-  const fetchQuestions = () => {
-    fetch(`http://192.168.1.66:${port}/api/questions`)
-      .then((response) => response.json())
-      .then((data) => {
-        const shuffledQuestions = shuffledArray(data);
-        setQuestions(shuffledQuestions);
-        console.log("Success fetching questions from API");
-      })
-      .catch((error) => {
-        console.error("Error fetching questions from API:", error);
-      });
-  };
-
-  const fetchPlayers = () => {
-    AsyncStorage.getItem("players")
-      .then((playerData) => {
-        const parsedPlayers = JSON.parse(playerData) || [];
-        const shuffledPlayers = shuffledArray(parsedPlayers);
-        setPlayers(shuffledPlayers);
-        console.log("Success fetching player from asyncStorage");
-      })
-      .catch((error) => {
-        console.error("Error fetching questions from API:", error);
-      });
+  const fetchQuestionsAndPlayers = async () => {
+    setIsLoading(true);
+    try {
+      // Fetch and shuffle questions
+      const questionsResponse = await fetch(`http://192.168.1.99:${port}/api/questions`);
+      const questionsData = await questionsResponse.json();
+      const shuffledQuestions = shuffledArray(questionsData);
+      setQuestions(shuffledQuestions);
+
+      // Fetch and shuffle players
+      const playerData = await AsyncStorage.getItem("players");
+      const parsedPlayers = JSON.parse(playerData) || [];
+      const shuffledPlayers = shuffledArray(parsedPlayers);
+      setPlayers(shuffledPlayers);
+    } catch (error) {
+      console.error("Error fetching data:", error);
+    }
+    setIsLoading(false);
   };
 
   const shuffledArray = (array) => {
@@ -67,47 +60,12 @@ export default function Gamescreen() {
 
   const handleNextRound = () => {
     if (currentQuestionIndex + 1 >= questions.length) {
-      // No more questions, navigate to Endscreen
+      // No more questions, navigate to Endscreen or reset for a new game
       navigation.navigate("End");
     } else {
-      // Fetch new questions and players for the next round
-      fetchQuestions();
-      fetchPlayers();
-      // Update the current question index
-      setCurrentQuestionIndex((prevIndex) => prevIndex + 1);
-    }
-  };
-
-  const renderQuestion = ({ item }) => {
-    if (questions.length === 0 || players.length === 0) {
-      return null; // or loading indicator
-    }
-
-    console.log("rendering questions start");
-
-    const currentPlayer = players[currentQuestionIndex % players.length];
-
-    if (!item) {
-      // No more questions, navigate to Endscreen
-      navigation.navigate("End");
-      return null;
+      // Increment index to move to the next question
+      setCurrentQuestionIndex(currentQuestionIndex + 1);
     }
-
-    return (
-      <View className="items-center">
-        <View className="bg-white rounded-2xl px-2">
-        <Text className=" text-cyan-700 font-semibold text-center text-xs">
-          Thème : {item.Theme}
-        </Text>
-        </View>
-        <Text className="text-3xl text-white font-black p-4">
-          {currentPlayer.name}
-        </Text>
-        <Text className="text-white font-semibold text-center text-sm">
-          {item.Questions}
-        </Text>
-      </View>
-    );
   };
 
   const navigation = useNavigation();
@@ -132,7 +90,12 @@ export default function Gamescreen() {
             className="absolute left-8"
             onPress={goToHomescreen}
           >
-            <HomeIcon color="white" size="30" className="" testID="homeButton" />
+            <HomeIcon
+              color="white"
+              size="30"
+              className=""
+              testID="homeButton"
+            />
           </TouchableOpacity>
           <Text className="text-white absolute right-28 text-2xl font-black">
             DRINK'UP
@@ -156,22 +119,39 @@ export default function Gamescreen() {
         {/* Game component */}
         <View
           style={{ backgroundColor: "rgba(255, 255, 255, 0.1)" }}
-          className=" flex m-10 p-10 mx-4 rounded-lg items-center"
+          className="flex m-10 p-10 mx-4 rounded-lg items-center"
         >
-          {questions.length > 0 ? (
-            <FlatList
-              horizontal={false}
-              data={[questions[currentQuestionIndex]]}
-              keyExtractor={(item) => item._id.toString()}
-              renderItem={renderQuestion}
-            />
+          {!isLoading && questions.length > 0 && players.length > 0 ? (
+            (() => {
+              const item = questions[currentQuestionIndex];
+              const currentPlayer =
+                players[currentQuestionIndex % players.length];
+              return (
+                <View className="items-center">
+                  <View className="bg-white rounded-2xl px-2">
+                    <Text className="text-cyan-700 font-semibold text-center text-xs">
+                      Thème : {item.Theme}
+                    </Text>
+                  </View>
+                  <Text className="text-3xl text-center text-white font-black p-4">
+                    {currentPlayer.name}
+                  </Text>
+                  <Text className="text-white font-semibold text-center text-sm">
+                    {item.Questions}
+                  </Text>
+                </View>
+              );
+            })()
           ) : (
             <>
-            <ActivityIndicator size="large" className=" m-4"/>
-            <Text className=" text-white font-semibold text-center text-sm">Loading questions...</Text>
+              <ActivityIndicator size="large" className="m-4" />
+              <Text className="text-white font-semibold text-center text-sm">
+                Loading...
+              </Text>
             </>
           )}
         </View>
+
         {/* Button */}
         <View className="flex  justify-center items-center ">
           <TouchableOpacity

yarn.lock

@@ -4702,10 +4702,10 @@ expo-modules-core@1.5.12:
     compare-versions "^3.4.0"
     invariant "^2.2.4"
 
-expo-status-bar@~1.11.1:
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/expo-status-bar/-/expo-status-bar-1.11.1.tgz#a11318741d361048c11db2b16c4364a79a74af30"
-  integrity sha512-ddQEtCOgYHTLlFUe/yH67dDBIoct5VIULthyT3LRJbEwdpzAgueKsX2FYK02ldh440V87PWKCamh7R9evk1rrg==
+expo-status-bar@~1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/expo-status-bar/-/expo-status-bar-1.6.0.tgz#e79ffdb9a84d2e0ec9a0dc7392d9ab364fefa9cf"
+  integrity sha512-e//Oi2WPdomMlMDD3skE4+1ZarKCJ/suvcB4Jo/nO427niKug5oppcPNYO+csR6y3ZglGuypS+3pp/hJ+Xp6fQ==
 
 expo@~49.0.15:
   version "49.0.21"
@@ -7834,23 +7834,23 @@ react-native-progress@^5.0.1:
   dependencies:
     prop-types "^15.7.2"
 
-react-native-safe-area-context@4.9.0:
-  version "4.9.0"
-  resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.9.0.tgz#21a570ca3594cb4259ba65f93befaa60d91bcbd0"
-  integrity sha512-/OJD9Pb8IURyvn+1tWTszWPJqsbZ4hyHBU9P0xhOmk7h5owSuqL0zkfagU0pg7Vh0G2NKQkaPpUKUMMCUMDh/w==
+react-native-safe-area-context@4.6.3:
+  version "4.6.3"
+  resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.6.3.tgz#f06cfea05b1c4b018aa9758667a109f619c62b55"
+  integrity sha512-3CeZM9HFXkuqiU9HqhOQp1yxhXw6q99axPWrT+VJkITd67gnPSU03+U27Xk2/cr9XrLUnakM07kj7H0hdPnFiQ==
 
-react-native-screens@~3.29.0:
-  version "3.29.0"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.29.0.tgz#1dee0326defbc1d4ef4e68287abb32a8e6b76b29"
-  integrity sha512-yB1GoAMamFAcYf4ku94uBPn0/ani9QG7NdI98beJ5cet2YFESYYzuEIuU+kt+CNRcO8qqKeugxlfgAa3HyTqlg==
+react-native-screens@~3.22.0:
+  version "3.22.1"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.22.1.tgz#b0eb0696dbf1f9a852061cc71c0f8cdb95ed8e53"
+  integrity sha512-ffzwUdVKf+iLqhWSzN5DXBm0s2w5sN0P+TaHHPAx42LT7+DT0g8PkHT1QDvxpR5vCEPSS1i3EswyVK4HCuhTYg==
   dependencies:
     react-freeze "^1.0.0"
     warn-once "^0.1.0"
 
-react-native-svg@14.1.0:
-  version "14.1.0"
-  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-14.1.0.tgz#7903bddd3c71bf3a8a503918253c839e6edaa724"
-  integrity sha512-HeseElmEk+AXGwFZl3h56s0LtYD9HyGdrpg8yd9QM26X+d7kjETrRQ9vCjtxuT5dCZEIQ5uggU1dQhzasnsCWA==
+react-native-svg@13.9.0:
+  version "13.9.0"
+  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-13.9.0.tgz#8df8a690dd00362601f074dec5d3a86dd0f99c7f"
+  integrity sha512-Ey18POH0dA0ob/QiwCBVrxIiwflhYuw0P0hBlOHeY4J5cdbs8ngdKHeWC/Kt9+ryP6fNoEQ1PUgPYw2Bs/rp5Q==
   dependencies:
     css-select "^5.1.0"
     css-tree "^1.1.3"