core(scripts): automated api url fetch + improved animation (#63)

.gitignore

@@ -33,3 +33,4 @@ yarn-error.*
 
 # typescript
 *.tsbuildinfo
+.env

babel.config.js

@@ -1,10 +1,19 @@
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ["babel-preset-expo",],
+    presets: ["babel-preset-expo"],
     plugins: [
       "nativewind/babel",
-      "react-native-reanimated/plugin"
+      "react-native-reanimated/plugin",
+      [
+        "module:react-native-dotenv",
+        {
+          moduleName: "@env",
+          path: ".env",
+          safe: true,
+          allowUndefined: true,
+        },
+      ],
     ],
   };
 };

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
-    "ios": "expo start --ios",
+    "ios": "./scripts/set-ip.sh && expo start --ios",
     "web": "expo start --web",
     "prettier": "prettier 'screens/**/*.js'",
     "test": "maestro test .maestro/"
@@ -23,6 +23,8 @@
     "nativewind": "^2.0.11",
     "react": "18.2.0",
     "react-native": "0.72.10",
+    "react-native-dotenv": "^3.4.11",
+    "react-native-fs": "^2.20.0",
     "react-native-heroicons": "^4.0.0",
     "react-native-progress": "^5.0.1",
     "react-native-reanimated": "~3.3.0",

screens/Gamescreen.js

@@ -4,7 +4,7 @@ import {
   TouchableOpacity,
   ImageBackground,
 } from "react-native";
-import Animated, { LightSpeedInRight } from "react-native-reanimated";
+import Animated, { LightSpeedInRight, FadeOut } from "react-native-reanimated";
 import React, { useEffect, useState } from "react";
 import { ActivityIndicator } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
@@ -14,13 +14,13 @@ import { HomeIcon } from "react-native-heroicons/solid";
 import { useNavigation } from "@react-navigation/native";
 import * as Progress from "react-native-progress";
 import { useImage } from "../provider/ImageContext";
+import {API_BASE_URL} from "@env"
 
 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(() => {
@@ -31,7 +31,7 @@ export default function Gamescreen() {
     setIsLoading(true);
     try {
       // Fetch and shuffle questions
-      const questionsResponse = await fetch(`http://192.168.1.99:${port}/api/questions`);
+      const questionsResponse = await fetch(`${API_BASE_URL}/api/questions`);
       const questionsData = await questionsResponse.json();
       const shuffledQuestions = shuffledArray(questionsData);
       setQuestions(shuffledQuestions);
@@ -107,7 +107,7 @@ export default function Gamescreen() {
           style={{ backgroundColor: "rgba(255, 255, 255, 0.1)" }}
           className="flex justify-center items-center m-4 p-4 rounded-lg"
         >
-          <Text className=" text-white font-black text-lg m-2">
+          <Text className=" text-white font-black text-lg mb-10">
             On en est où ?
           </Text>
           <Progress.Bar
@@ -128,7 +128,7 @@ export default function Gamescreen() {
               const currentPlayer =
                 players[currentQuestionIndex % players.length];
               return (
-                <Animated.View className="items-center" key={currentQuestionIndex} entering={LightSpeedInRight} >
+                <Animated.View className="items-center" key={currentQuestionIndex} entering={LightSpeedInRight.duration(500)} exiting={FadeOut} >
                   <View className="bg-white rounded-2xl px-2">
                     <Text className="text-cyan-700 font-semibold text-center text-xs">
                       Thème : {item.Theme}

screens/Lobbyscreen.js

@@ -126,7 +126,7 @@ export default function Lobbyscreen() {
           />
         </View>
         {/* Button */}
-        <Animated.View className="flex-1 justify-center items-center " entering={SlideInDown}>
+        <Animated.View className="flex-1 justify-center items-center " entering={SlideInDown.duration(800)}>
           <TouchableOpacity
             disabled={!hasMinPlayer}
             onPress={startGame}

scripts/set-ip.sh

@@ -0,0 +1,27 @@
+#!/bin/bash
+
+echo "Fetching the current IP address..."
+
+# Get the IP address of the first interface found.
+IP_ADDRESS=$(ipconfig getifaddr en0)
+
+# Fallback in case en0 is not available (use Wi-Fi interface)
+if [ -z "$IP_ADDRESS" ]; then
+    IP_ADDRESS=$(ipconfig getifaddr en1)
+fi
+
+if [ -z "$IP_ADDRESS" ]; then
+    echo "Error: IP address could not be found."
+    exit 1
+fi
+
+echo -n "Updating the API URL in .env file... "
+
+# Create or overwrite the .env file with the IP_ADDRESS
+echo "API_BASE_URL=http://$IP_ADDRESS:3000" > .env
+
+echo "Done."
+
+# Add additional environment variables as needed
+
+echo "API URL successfully updated to http://$IP_ADDRESS:3000"

yarn.lock

@@ -3248,6 +3248,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+base-64@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/base-64/-/base-64-0.1.0.tgz#780a99c84e7d600260361511c4877613bf24f6bb"
+  integrity sha512-Y5gU45svrR5tI2Vt/X9GPd3L0HNIKzGu202EjxrXMpuc2V2CiKgemAbUUsqYmZJvPtCXoUKjNZwBJzsNScUbXA==
+
 base64-js@^1.1.2, base64-js@^1.2.3, base64-js@^1.3.1, base64-js@^1.5.1:
   version "1.5.1"
   resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz"
@@ -4143,6 +4148,11 @@ dotenv@16.3.1:
   resolved "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz"
   integrity sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==
 
+dotenv@^16.4.5:
+  version "16.4.5"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.4.5.tgz#cdd3b3b604cb327e286b4762e13502f717cb099f"
+  integrity sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==
+
 dotenv@~16.0.3:
   version "16.0.3"
   resolved "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz"
@@ -7902,6 +7912,21 @@ react-is@^17.0.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-native-dotenv@^3.4.11:
+  version "3.4.11"
+  resolved "https://registry.yarnpkg.com/react-native-dotenv/-/react-native-dotenv-3.4.11.tgz#2e6c4eabd55d5f1bf109b3dd9141dadf9c55cdd4"
+  integrity sha512-6vnIE+WHABSeHCaYP6l3O1BOEhWxKH6nHAdV7n/wKn/sciZ64zPPp2NUdEUf1m7g4uuzlLbjgr+6uDt89q2DOg==
+  dependencies:
+    dotenv "^16.4.5"
+
+react-native-fs@^2.20.0:
+  version "2.20.0"
+  resolved "https://registry.yarnpkg.com/react-native-fs/-/react-native-fs-2.20.0.tgz#05a9362b473bfc0910772c0acbb73a78dbc810f6"
+  integrity sha512-VkTBzs7fIDUiy/XajOSNk0XazFE9l+QlMAce7lGuebZcag5CnjszB+u4BdqzwaQOdcYb5wsJIsqq4kxInIRpJQ==
+  dependencies:
+    base-64 "^0.1.0"
+    utf8 "^3.0.0"
+
 react-native-heroicons@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/react-native-heroicons/-/react-native-heroicons-4.0.0.tgz"
@@ -9333,6 +9358,11 @@ use-sync-external-store@^1.0.0, use-sync-external-store@^1.1.0:
   resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
 
+utf8@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/utf8/-/utf8-3.0.0.tgz#f052eed1364d696e769ef058b183df88c87f69d1"
+  integrity sha512-E8VjFIQ/TyQgp+TZfS6l8yp/xWppSAHzidGiRrqe4bK4XP9pTRyKFgGJpO3SN7zdX4DeomTrwaseCHovfpFcqQ==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"