feat(gamescreen): add infoBloc, rebrand ui and refactor progressBar

components/gamescreen/GameCard.jsx

@@ -8,7 +8,7 @@ const GameCard = ({ isLoading, players, questions, currentQuestionIndex }) => {
     return (
         <View
           style={{ backgroundColor: "rgba(255, 255, 255, 0.1)" }}
-          className="flex m-10 p-10 mx-4 rounded-lg items-center"
+          className="flex m-6 p-10 mx-4 rounded-lg items-center"
         >
           {!isLoading && questions.length > 0 && players.length > 0 ? (
             (() => {

components/gamescreen/InfoBloc.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { View, Text } from "react-native";
+import { InformationCircleIcon } from "react-native-heroicons/solid";
+
+const InfoBloc = ({ info }) => {
+  return (
+    <View className="flex-row items-center m-4 p-4 rounded-lg" style={{ backgroundColor: "rgba(0, 255, 255, 0.1)" }}>
+      <InformationCircleIcon color="white" size="25" className="" />
+      <Text className="text-white font-semibold text-left text-xs m-2">
+        {info}
+      </Text>
+    </View>
+  );
+};
+
+export default InfoBloc;

components/gamescreen/ProgressBar.jsx

@@ -5,17 +5,13 @@ import * as Progress from "react-native-progress";
 const ProgressBar = ({ currentQuestionIndex, questions }) => {
   return (
     <View
-      style={{ backgroundColor: "rgba(255, 255, 255, 0.1)" }}
-      className="flex justify-center items-center m-4 p-4 rounded-lg"
+      className="flex justify-center items-center m-4 p-2 rounded-lg"
     >
-      <Text className=" text-white font-black text-lg mb-4">
-        Progression
-      </Text>
       <Progress.Bar
         progress={(currentQuestionIndex + 1) / questions.length}
         width={300}
         height={10}
-        color="#62C0CC"
+        color="#FFFFFF"
       />
     </View>
   );

components/settingscreen/SuggestionModal.jsx

@@ -26,7 +26,7 @@ const SuggestionModal = ({ showModal, setShowModal }) => {
     >
       <View className="flex-1 justify-center items-center bg-black/50" >
         {/* Modale centrée */}
-        <View className="bg-cyan-900 p-6 rounded-lg w-11/12" >
+        <View className=" p-6 rounded-lg w-11/12" style={{ backgroundColor: "rgba(24, 164, 129, 0.9)" }} >
             <View className="flex">
                 <TouchableOpacity onPress={() => setShowModal(false)} className="self-end">
                     <XCircleIcon color="white" size="30" className="mb-4" testID="exitModalButton" />
@@ -45,8 +45,8 @@ const SuggestionModal = ({ showModal, setShowModal }) => {
             onChangeText={handleChange}
             value={suggestion}
           />
-          <TouchableOpacity onPress={handleSubmit} className="self-end">
-            <Text className="text-white text-lg font-semibold">Envoyer</Text>
+          <TouchableOpacity onPress={handleSubmit} className="self-end bg-black p-2 rounded-xl">
+            <Text className="text-white text-lg font-semibold mx-2">Envoyer</Text>
           </TouchableOpacity>
         </View>
       </View>

package.json

@@ -23,7 +23,7 @@
     "expo": "~51.0.38",
     "expo-application": "~5.9.1",
     "expo-asset": "~10.0.10",
-    "expo-dev-client": "~4.0.28",
+    "expo-dev-client": "~4.0.29",
     "expo-insights": "~0.7.0",
     "expo-status-bar": "~1.12.1",
     "mongodb": "^6.3.0",

screens/Gamescreen.js

@@ -13,6 +13,7 @@ import GamescreenHeader from "../components/gamescreen/GamescreenHeader";
 import ProgressBar from "../components/gamescreen/ProgressBar";
 import GameCard from "../components/gamescreen/GameCard";
 import NextRoundButton from "../components/gamescreen/NextRoundButton";
+import InfoBloc from "../components/gamescreen/InfoBloc";
 
 export default function Gamescreen() {
   const [isLoading, setIsLoading] = useState(false);
@@ -29,29 +30,32 @@ export default function Gamescreen() {
   const fetchQuestionsAndPlayers = async () => {
     setIsLoading(true);
     try {
-    let { data: questionsData, error } = await supabase.from("questionsV3").select("Theme, Questions, severity");
+    let { data: questionsData, error } = await supabase.from("questionsV4").select("Theme, Questions, severity, Instructions");
     if (error) throw error;
 
     if (!Array.isArray(questionsData)) {
       throw new TypeError("Fetched questions data is not an array");
     }
 
     const shuffledQuestions = shuffledArray(questionsData);
-    setQuestions(shuffledQuestions);
+
+    // Limit the questions to 45
+    const limitedQuestions = shuffledQuestions.slice(0, 45);
+    setQuestions(limitedQuestions);
 
     // Fetch players from AsyncStorage
     const playerData = await AsyncStorage.getItem("players");
     let parsedPlayers = JSON.parse(playerData) || [];
-    
+
     parsedPlayers = parsedPlayers.map(player => ({
       ...player,
       score: player.score || 0 // Initialize score if not present
     }));
-
+  
     if (!Array.isArray(parsedPlayers)) {
       throw new TypeError("Parsed players data is not an array");
     }
-
+    
     const shuffledPlayers = shuffledArray(parsedPlayers);
     setPlayers(shuffledPlayers);
     } catch (error) {
@@ -86,7 +90,6 @@ export default function Gamescreen() {
     }
 
     if (currentQuestionIndex + 1 >= questions.length) {
-      // No more questions, navigate to Endscreen or reset for a new game
         navigation.navigate("End", { players });
       } else {
         // Increment index to move to the next question
@@ -106,6 +109,7 @@ export default function Gamescreen() {
         <StatusBar style="light" />
         <GamescreenHeader />
         <ProgressBar currentQuestionIndex={currentQuestionIndex} questions={questions} />
+        <InfoBloc info={isLoading ? "Loading..." : questions[currentQuestionIndex]?.Instructions || "No instructions available."} />
         <GameCard
           item={questions[currentQuestionIndex]}
           currentPlayer={players[currentQuestionIndex % players.length]}

yarn.lock

@@ -5130,39 +5130,39 @@ expo-constants@~16.0.0:
     "@expo/config" "~9.0.0"
     "@expo/env" "~0.3.0"
 
-expo-dev-client@~4.0.28:
-  version "4.0.28"
-  resolved "https://registry.yarnpkg.com/expo-dev-client/-/expo-dev-client-4.0.28.tgz#3a345662ca2b2dfd7d0fa18e537cb75abd9a563c"
-  integrity sha512-wz5G4vY3Gbk5GuQTyijdqY4Hwr/NDt5OUTErbOu1vd4XRIAsI+8IkK5hsBUhGmqrdkYnP5NxxOxC/soFzX/9+w==
-  dependencies:
-    expo-dev-launcher "4.0.28"
-    expo-dev-menu "5.0.22"
-    expo-dev-menu-interface "1.8.3"
+expo-dev-client@~4.0.29:
+  version "4.0.29"
+  resolved "https://registry.yarnpkg.com/expo-dev-client/-/expo-dev-client-4.0.29.tgz#86683c584db6b787828b10e2a049f810a246441d"
+  integrity sha512-aANlw9dC4PJEPaRNpe+X5xwyYI+aCIcbZklAAsFlkv2/05gLrsvAFgmQpRtowAzF+VggHWde1eKUOeUccAYIEg==
+  dependencies:
+    expo-dev-launcher "4.0.29"
+    expo-dev-menu "5.0.23"
+    expo-dev-menu-interface "1.8.4"
     expo-manifests "~0.14.0"
     expo-updates-interface "~0.16.2"
 
-[email protected].28:
-  version "4.0.28"
-  resolved "https://registry.yarnpkg.com/expo-dev-launcher/-/expo-dev-launcher-4.0.28.tgz#6097f4beb4d000bcc201f1b69dcd516e2b10247c"
-  integrity sha512-goE7jcaGVA2zu4gV3/hQ9RXqGhUZZAu339VYNLbwPdaNCzFaG6A8MZHg18gytCUnZ5QkRJsYi4q/8YcwUCASlQ==
+[email protected].29:
+  version "4.0.29"
+  resolved "https://registry.yarnpkg.com/expo-dev-launcher/-/expo-dev-launcher-4.0.29.tgz#c655d842802f696ad6a5e446c60d20c1e453d175"
+  integrity sha512-0a0SL8mc4FrqPeGxJHe9kf0kG+Di+38Gd+HP5DEL9dcOa8m2qffKnk22UcyujCT6+Qk0OUK1s53nnfqFB26uVw==
   dependencies:
     ajv "8.11.0"
-    expo-dev-menu "5.0.22"
+    expo-dev-menu "5.0.23"
     expo-manifests "~0.14.0"
     resolve-from "^5.0.0"
     semver "^7.6.0"
 
-[email protected].3:
-  version "1.8.3"
-  resolved "https://registry.yarnpkg.com/expo-dev-menu-interface/-/expo-dev-menu-interface-1.8.3.tgz#8c1262e29e0124fc5932a129c95b36de56656b20"
-  integrity sha512-QM0LRozeFT5Ek0N7XpV93M+HMdEKRLEOXn0aW5M3uoUlnqC1+PLtF3HMy3k3hMKTTE/kJ1y1Z7akH07T0lunCQ==
+[email protected].4:
+  version "1.8.4"
+  resolved "https://registry.yarnpkg.com/expo-dev-menu-interface/-/expo-dev-menu-interface-1.8.4.tgz#fa23bf3228ea51cf412599fcb715c27259ffdd84"
+  integrity sha512-FpYI57EUu9qTSOOi+FZJ58xkCGJK7QD0mTiXK/y1I8lRdZGjCmdBqVvC4dAx2GcbIT78EPxaVf4/90tK/KRK6A==
 
-[email protected].22:
-  version "5.0.22"
-  resolved "https://registry.yarnpkg.com/expo-dev-menu/-/expo-dev-menu-5.0.22.tgz#30e16b6709759edb027e492fc96d262ee063b0c8"
-  integrity sha512-VzpdQReAtjbI1qIuwOf0sUzf91HsfGThojgJD9Ez0eca12qY5tTGYzHa1EM9V+zIcNuNZ7+A8bHJJdmZ4zvU6g==
+[email protected].23:
+  version "5.0.23"
+  resolved "https://registry.yarnpkg.com/expo-dev-menu/-/expo-dev-menu-5.0.23.tgz#7e6d6fd93c54ca955e8a69601a0b1991b64389b3"
+  integrity sha512-ztDvrSdFGkRbMoQlGLyKMS6CslMGylonVW4kQHUrBQApCL0c2NtRwLlr2bA1SXF0S7qYdPPg/ayLnj7DDR5X2w==
   dependencies:
-    expo-dev-menu-interface "1.8.3"
+    expo-dev-menu-interface "1.8.4"
     semver "^7.5.4"
 
 expo-eas-client@~0.12.0: