Improved documentation

traque-app/app/display.js

@@ -136,18 +136,6 @@ export default function Display() {
         return String(hours).padStart(2,"0") + ":" + String(minutes).padStart(2,"0") + ":" + String(seconds).padStart(2,"0");
     }
 
-    function circle(color, circle) {
-        return (
-            <Circle
-                center={{ latitude: circle.center.lat, longitude: circle.center.lng }}
-                radius={circle.radius}
-                strokeWidth={2}
-                strokeColor={`rgba(${color}, 1)`}
-                fillColor={`rgba(${color}, 0.2)`}
-            />
-        );
-    }
-
     const Logout = () => {
         return (
             <TouchableOpacity style={{width: 40, height: 40}} onPress={logout}>
@@ -257,7 +245,7 @@ export default function Display() {
     const Map = () => {
         return (
             <MapView ref={mapRef} style={{flex: 1}} initialRegion={initialRegion} mapType="standard" onTouchMove={() => setCenterMap(false)} toolbarEnabled={false}>
-                { gameState == GameState.PLACEMENT && startingArea && circle("0, 0, 255", startingArea)}
+                { gameState == GameState.PLACEMENT && startingArea && <Circle center={{ latitude: startingArea.center.lat, longitude: startingArea.center.lng }} radius={startingArea.radius} strokeWidth={2} strokeColor={`rgba(0, 0, 255, 1)`} fillColor={`rgba(0, 0, 255, 0.2)`}/>}
                 { gameState == GameState.PLAYING && zoneExtremities && <Zones/>}
                 { location &&
                     <Marker coordinate={{ latitude: location[0], longitude: location[1] }} anchor={{ x: 0.33, y: 0.33 }} onPress={() => Alert.alert("Position actuelle", "Ceci est votre position")}>
@@ -375,16 +363,16 @@ export default function Display() {
                 { gameState == GameState.PLACEMENT &&
                     Ready()
                 }
-                { gameState == GameState.PLAYING && !captured &&
-                    Timers()
-                }
+                { gameState == GameState.PLAYING && !captured && <Fragment>
+                    {Timers()}
+                    {enemyHasHandicap && <Text style={{fontSize: 18, marginTop: 6, fontWeight: "bold"}}>Position ennemie révélée en continue !</Text>}
+                </Fragment>}
                 { gameState == GameState.PLAYING && captured &&
                     CapturedMessage()
                 }
                 { gameState == GameState.FINISHED &&
                     EndGameMessage()
                 }
-                {enemyHasHandicap && <Text style={{fontSize: 18, marginTop: 6, fontWeight: "bold"}}>Position ennemie révélée en continue !</Text>}
             </View>
             <View style={styles.bottomContainer} onLayout={(event) => {setBottomContainerHeight(event.nativeEvent.layout.height)}}>
                 <View style={styles.mapContainer}>

traque-app/context/socketContext.jsx

@@ -1,10 +1,9 @@
 import { createContext, useContext, useMemo } from "react";
 import { io } from "socket.io-client";
+import { URLS } from "../util/urls"
 
-const HOST = 'traque.rezel.net'; // IP of the machine hosting the server
-
-const SOCKET_URL = (HOST == "traque.rezel.net" ? "wss://" : "ws://") + HOST + "/player";
-const SERVER_URL = (HOST == "traque.rezel.net" ? "https://" : "http://") + HOST + "/back";
+const SOCKET_URL = `wss://${URLS.HOST}/player`;
+const SERVER_URL = `https://${URLS.HOST}/back`;
 
 export const teamSocket = io(SOCKET_URL, {
     path: "/back/socket.io",

traque-app/doc/apk_android.md

@@ -14,7 +14,6 @@ Follow this tutorial : https://reactnative.dev/docs/set-up-your-environment?os=l
 
 ### Precisions
 
-* Android Studio and its dependancies can take up to 15 Go of space.
 * The `.bashrc` file is located in your home directory (`cd ~`).
 * The Watchman installation isn't necessary.
 * If you want to test your app on a physical android device, follow the next section.
@@ -28,8 +27,8 @@ This section will cover the creation of the android folder if it isn't created y
 ### Tutorial
 
 * Go in your project folder (`traque-app`).
-* Run `npx expo install expo-dev-client`. This install the `expo-dev-client` package if it isn't already.
-* Run `npx expo prebuild --platform android`. This will add an android folder in your project taking about 1 Go of space.
+* Run `npm i`
+* Run `npx expo prebuild --platform android`
 
 
 
@@ -72,6 +71,7 @@ android {
 ```
 
 
+
 ## Create the apk
 
 This section will cover the creation of the apk of the app that can be download and installed on any android device.

traque-app/doc/dev_build_android.md

@@ -1,7 +1,9 @@
 # How to create a local developpement build with Expo
+
 Expo go is great to start a React Native project with Expo but reaches its limits when background localisation or server notifications have to be implemented and tested. This tutorial will explain the steps to create the debug android app of the current project (ie developpement build) and download it on an android device. A similar process can be done to test the IOS app but it requires a Mac so this won't be covered in this tutorial. A virtual android device can be created with Android Studio (explained later) but the process to send the app on the virtual device isn't covered in this tutorial. Here is a link that may help you : https://youtu.be/cs-zgHjt5RQ?si=Fzxik7zreek07uC0. Each step has precisions, however some of those precisions may not be suited for your device, don't hesitate to find help on the Internet or ask ChapGPT.
 
 
+
 ## Set up your environnement
 
 This section will cover the set up of your environnement in order to have the tools to either send the apk of your app on your device or create a virtual android device.
@@ -12,27 +14,27 @@ Follow this tutorial : https://reactnative.dev/docs/set-up-your-environment?os=l
 
 ### Precisions
 
-* Android Studio and its dependancies can take up to 15 Go of space.
 * The `.bashrc` file is located in your home directory (`cd ~`).
 * The Watchman installation isn't necessary.
 * If you want to test your app on a physical android device, follow the next section.
 
 
+
 ## Set up your physical android device
 
 This section will cover the actions to perform on your device to be able to download the apk of the app.
 
 ### Tutorial
 
-Follow the two first sections of this tutorial : https://reactnative.dev/docs/running-on-device?os=linux&platform=android
+Follow the first section of this tutorial : https://reactnative.dev/docs/running-on-device?os=linux&platform=android
 
 ### Precisions
 
 * In some devices, you may also enable the *install via USB* option.
-* There is no need to modify the `/etc/udev/rules.d/51-android-usb.rules`, you can skip this part of the tutorial.
 * When your device is connected, keep in your mind that a pop up asking authorizations can appear on it.
 
 
+
 ## Build the native app
 
 This section will cover the building of the app and the sending on your device.
@@ -40,9 +42,9 @@ This section will cover the building of the app and the sending on your device.
 ### Tutorial
 
 * Go in your project folder (`traque-app`).
-* Run `npx expo install expo-dev-client`. This install the `expo-dev-client` package if it isn't already.
-* Run `npx expo prebuild --platform android`. This will add an android folder in your project taking about 1 Go of space.
-* Connect your device to your computer with a USB cable and  and run `npx expo run:android`. This will build the app and send it on your device. The operation can last for up to 10 minutes and will take up to 10 Go of space in total (mainly cache in the `~/.gradle` folder).
+* Run `npm i`
+* Run `npx expo prebuild --platform android`
+* Connect your device to your computer with a USB cable and  and run `npx expo run:android`. This will build the app and send it on your device. The operation can last for up to 15 minutes.
 * The application should appear on your device. At this point there is no more need of the USB cable (you can disable *USB debugging*).
 
 ### Precisions
@@ -58,6 +60,7 @@ Follow these steps to fix it :
 * In the `traque-app` folder, run `npx expo run:android` again.
 
 
+
 ## Run the app
 
 This section will explain how to run the app. The process is really similar to the one to run the app on Expo go and can be done with your device on the same WI-FI network as your computer.
@@ -65,5 +68,5 @@ This section will explain how to run the app. The process is really similar to t
 ### Tutorial
 
 * Start the developpement server by running `npm start`, a blue *development build* should appear in your terminal.
-* Enter the created app on your device. The app will update as well as if you were on Expo go if you modify the code on your computer.
+* Scan the QR code that appears to start developping.
 * If the app crashes, you may need to restart the developpement server.

traque-app/util/urls.js

@@ -0,0 +1,3 @@
+export const URLS = {
+    HOST: 'traque.rezel.net'
+}