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

caxewsh · Nov 9, 2024 · 9a6a9c5 · 9a6a9c5
1 parent 22f2473
commit 9a6a9c5
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 35 deletions.
diff --git a/components/gamescreen/GameCard.jsx b/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 ? (
             (() => {

diff --git a/components/gamescreen/InfoBloc.jsx b/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;
diff --git a/components/gamescreen/ProgressBar.jsx b/components/gamescreen/ProgressBar.jsx
@@ -5,12 +5,8 @@ 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}

diff --git a/package.json b/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",

diff --git a/screens/Gamescreen.js b/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,7 @@ export default function Gamescreen() {
     }
 
     if (currentQuestionIndex + 1 >= questions.length) {
-      // No more questions, navigate to Endscreen or reset for a new game
+<InfoBloc info={isLoading ? "Loading..." : questions[currentQuestionIndex]?.Instructions || "No instructions available."} />
         navigation.navigate("End", { players });
       } else {
         // Increment index to move to the next question
@@ -106,6 +110,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]}

diff --git a/yarn.lock b/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"
 
-expo-dev-launcher@4.0.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==
+expo-dev-launcher@4.0.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"
 
-expo-dev-menu-interface@1.8.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==
+expo-dev-menu-interface@1.8.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==
 
-expo-dev-menu@5.0.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==
+expo-dev-menu@5.0.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: