Traduction + alias + routing + refactoring

mobile/traque-app/.eslintrc.js

@@ -21,6 +21,12 @@ module.exports = {
         "react",
         "react-native"
     ],
+    "ignorePatterns": [
+        "android/",
+        ".expo/",
+        "node_modules/",
+        "src/assets/",
+    ],
     "rules": {
         "react/react-in-jsx-scope": "off",
         "react/prop-types": "off",
@@ -29,6 +35,11 @@ module.exports = {
         "react-native/no-unused-styles": "warn",
         "react-native/no-single-element-style-arrays": "warn",
         'import/extensions': 'off',
+        "import/no-unresolved": "off",
+        "import/named": "off",
+        "import/namespace": "off",
+        "import/default": "off",
+        "import/no-named-as-default-member": "off"
     },
     "settings": {
         "react": {
@@ -38,9 +49,9 @@ module.exports = {
             "react-native"
         ],
         'import/resolver': {
-            node: {
+            "node": {
-                extensions: ['.js', '.jsx', '.ts', '.tsx'],
+                "extensions": ['.js', '.jsx', '.ts', '.tsx'],
-            },
+            }
         },
     }
 };

mobile/traque-app/app/(auth)/_layout.jsx

@@ -0,0 +1,8 @@
+// Expo
+import { Slot } from 'expo-router';
+
+const AuthLayout = () => {
+    return <Slot/>; 
+};
+
+export default AuthLayout;

mobile/traque-app/app/(auth)/location-permission.jsx

@@ -0,0 +1,7 @@
+import { Text } from 'react-native';
+
+const LocationPermission = () => {
+    return <Text>{"Veuillez activer la géolocalisation en arrière plan dans les paramètres, puis relancez l'application."}</Text>; 
+};
+
+export default LocationPermission;

mobile/traque-app/app/(auth)/login.jsx

@@ -0,0 +1,132 @@
+// React
+import { useState } from 'react';
+import { ScrollView, View, Text, StyleSheet, Image, Alert, TouchableHighlight } from 'react-native';
+import { useTranslation } from 'react-i18next';
+// Components
+import { TouchableImage } from '@/components/common/Image';
+import { CustomTextInput } from '@/components/common/Input';
+// Contexts
+import { useAuth } from "@/contexts/authContext";
+// Hooks
+import { usePickImage } from '@/hooks/usePickImage';
+// Services
+import { uploadTeamImage } from '@/services/api/image';
+// Constants
+import { COLORS } from '@/constants';
+
+const Login = () => {
+    const { t } = useTranslation();
+    const { login } = useAuth();
+    const { image, pickImage } = usePickImage();
+    const [teamId, setTeamId] = useState("");
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    const handleSubmit = async () => {
+        if (isSubmitting) return;
+
+        setIsSubmitting(true);
+
+        const regex = /^\d{6}$/;
+        if (!regex.test(teamId)) {
+            setTimeout(() => Alert.alert(t("error.title"), t("error.invalid_team_id")), 100);
+            return;
+        }
+        
+        try {
+            const response = await login(teamId);
+
+            if (response) {
+                uploadTeamImage(teamId, image?.uri);
+                setTeamId("");
+            } else {
+                setTimeout(() => Alert.alert(t("error.title"), t("error.unknown_team_id")), 100);
+            }
+        } catch (error) {
+            setTimeout(() => Alert.alert(t("error.title"), t("error.server_connection")), 100);
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    return (
+        <ScrollView contentContainerStyle={styles.container}>
+            <View style={styles.transitionContainer}>
+                <View style={styles.subContainer}>
+                    <Image style={styles.logoImage} source={require('@/assets/images/logo/logo_traque.png')}/>
+                    <Text style={styles.logoText}>{t("index.header.title")}</Text>
+                </View>
+                <View style={styles.subContainer}>
+                    <CustomTextInput value={teamId} inputMode="numeric" placeholder={t("index.form.team_id_input")} style={styles.input} onChangeText={setTeamId}/>
+                </View>
+                <View style={styles.subContainer}>
+                    <Text style={{fontSize: 15}}>{t("index.form.image_label")}</Text>
+                    <Text style={{fontSize: 13, marginBottom: 3}}>{t("index.form.image_sublabel")}</Text>
+                    <TouchableImage source={image ? {uri: image.uri} : require('@/assets/images/missing_image.jpg')} onPress={pickImage}/>
+                </View>
+                <View style={styles.subContainer}>
+                    <View style={styles.buttonContainer}>
+                        <TouchableHighlight style={styles.button} onPress={handleSubmit}>
+                            <Text style={styles.buttonLabel}>{isSubmitting ? "..." : t("index.form.validate_button")}</Text>
+                        </TouchableHighlight>
+                    </View>
+                </View>
+            </View>
+        </ScrollView>
+    );
+};
+
+export default Login;
+
+const styles = StyleSheet.create({
+    container: {
+        flexGrow: 1,
+        alignItems: 'center',
+        paddingVertical: 20,
+        backgroundColor: COLORS.background
+    },
+    transitionContainer: {
+        flexGrow: 1,
+        width: '80%',
+        maxWidth: 600,
+        alignItems: 'center',
+    },
+    subContainer: {
+        flexGrow: 1,
+        width: "100%",
+        alignItems: 'center',
+        justifyContent: 'center',
+        margin: 10,
+    },
+    logoImage: {
+        width: 130,
+        height: 130,
+        margin: 10,
+    },
+    logoText: {
+        fontSize: 50,
+        fontWeight: 'bold',
+    },
+    buttonContainer: {
+        width: "100%",
+        maxWidth: 240,
+        height: 80,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 3,
+        borderWidth: 4,
+        borderColor: '#888',
+        borderRadius: 18 
+    },
+    button: {
+        borderRadius: 10,
+        width: '100%',
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#555' 
+    },
+    buttonLabel: {
+        color: '#fff',
+        fontSize: 16,
+    },
+});

mobile/traque-app/app/(game)/_layout.jsx

@@ -0,0 +1,8 @@
+// Expo
+import { Slot } from 'expo-router';
+
+const GameLayout = () => {
+    return <Slot/>; 
+};
+
+export default GameLayout;

mobile/traque-app/app/(game)/end.jsx

@@ -0,0 +1,31 @@
+// React
+import { View, Text, StyleSheet } from 'react-native';
+// Components
+import { Header } from '@/components/game/Header';
+// Constants
+import { COLORS } from '@/constants';
+
+const End = () => {
+    return (
+        <View style={styles.globalContainer}>
+            <View style={styles.topContainer}>
+                <Header/>
+                <Text>Fin de la partie !</Text>
+            </View>
+        </View>
+    );
+};
+
+export default End;
+
+const styles = StyleSheet.create({
+    globalContainer: {
+        backgroundColor: COLORS.background,
+        flex: 1,
+    },
+    topContainer: {
+        width: '100%',
+        alignItems: 'center',
+        padding: 15,
+    }
+});

mobile/traque-app/app/(game)/play.jsx

@@ -0,0 +1,110 @@
+// React
+import { useState } from 'react';
+import { View, Alert, StyleSheet } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { useTranslation } from 'react-i18next';
+// Components
+import { Map } from '@/components/common/Map';
+import { TimerMMSS } from '@/components/common/Timer';
+import { Show } from '@/components/common/Show';
+import { PositionMarker } from '@/components/common/Layers';
+import { IconButton } from '@/components/common/IconButton';
+import { Header } from '@/components/game/Header';
+import { TargetInfoDrawer } from '@/components/game/TargetInfoDrawer';
+import { Toasts } from '@/components/game/Toasts';
+import { GameZone, StartZone } from '@/components/game/MapLayers';
+// Contexts
+import { useTeam } from '@/contexts/teamContext';
+// Hooks
+import { useUserState } from '@/hooks/useUserState';
+// Services
+import { emitSendPosition } from '@/services/socket/emitters';
+// Constants
+import { COLORS, USER_STATE } from '@/constants';
+
+const Play = () => {
+    const { t } = useTranslation();
+    const { teamInfos, nextZoneDate } = useTeam();
+    const { locationSendDeadline, hasHandicap, enemyLocation, lastSentLocation } = teamInfos;
+    const userState = useUserState();
+    const [bottomContainerHeight, setBottomContainerHeight] = useState(0);
+
+    return (
+        <View style={styles.globalContainer}>
+            <View style={styles.topContainer}>
+                <Header/>
+                <Show when={userState == USER_STATE.PLAYING}>
+                    <View style={styles.infoContainer}>
+                        <TimerMMSS style={{width: "50%"}} title={t("interface.zone_reduction_label")} date={nextZoneDate} />
+                        <TimerMMSS style={{width: "50%"}} title={t("interface.send_position_label")} date={locationSendDeadline} />
+                    </View>
+                </Show>
+            </View>
+            <View style={styles.bottomContainer} onLayout={(event) => setBottomContainerHeight(event.nativeEvent.layout.height)}>
+                <Map>
+                    <Show when={userState == USER_STATE.PLACEMENT}>
+                        <StartZone/>
+                    </Show>
+                    <Show when={userState == USER_STATE.PLAYING}>
+                        <GameZone/>
+                    </Show>
+                    <Show when={userState == USER_STATE.PLAYING && !hasHandicap}>
+                        <PositionMarker position={lastSentLocation} color={"grey"} onPress={() => Alert.alert(t("interface.map.previous_marker_title"), t("interface.map.previous_marker_description"))} />
+                        <PositionMarker position={enemyLocation} color={"red"} onPress={() => Alert.alert(t("interface.map.enemy_marker_title"), t("interface.map.enemy_marker_description"))} />
+                    </Show>
+                </Map>
+                <LinearGradient colors={['rgba(0,0,0,0.3)', 'rgba(0,0,0,0)']} style={styles.gradient}/>
+                <Show when={userState == USER_STATE.PLAYING && !hasHandicap}>
+                    <IconButton style={styles.updatePosition} source={require("@/assets/images/update_position.png")} onPress={emitSendPosition} />
+                </Show>
+                <Toasts/>
+            </View>
+            <Show when={userState == USER_STATE.PLAYING}>
+                <TargetInfoDrawer height={bottomContainerHeight}/>
+            </Show>
+        </View>
+    );
+};
+
+export default Play;
+
+const styles = StyleSheet.create({
+    globalContainer: {
+        backgroundColor: COLORS.background,
+        flex: 1,
+    },
+    topContainer: {
+        width: '100%',
+        alignItems: 'center',
+        padding: 15,
+    },
+    infoContainer: {
+        width: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'row',
+        marginTop: 15
+    },
+    bottomContainer: {
+        flex: 1,
+        borderTopLeftRadius: 30,
+        borderTopRightRadius: 30,
+        overflow: 'hidden',
+    },
+    updatePosition: {
+        position: 'absolute',
+        right: 30,
+        bottom: 80,
+        width: 60,
+        height: 60,
+        borderRadius: 30,
+        backgroundColor: 'white',
+        borderWidth: 4,
+        borderColor: 'black'
+    },
+    gradient: {
+        position: "absolute",
+        width: "100%",
+        height: 40,
+    }
+});

mobile/traque-app/app/(game)/wait.jsx

@@ -0,0 +1,31 @@
+// React
+import { View, Text, StyleSheet } from 'react-native';
+// Components
+import { Header } from '@/components/game/Header';
+// Constants
+import { COLORS } from '@/constants';
+
+const Wait = () => {
+    return (
+        <View style={styles.globalContainer}>
+            <View style={styles.topContainer}>
+                <Header/>
+                <Text>Veuillez patienter, la partie va bientôt commencer !</Text>
+            </View>
+        </View>
+    );
+};
+
+export default Wait;
+
+const styles = StyleSheet.create({
+    globalContainer: {
+        backgroundColor: COLORS.background,
+        flex: 1,
+    },
+    topContainer: {
+        width: '100%',
+        alignItems: 'center',
+        padding: 15,
+    }
+});

mobile/traque-app/app/_layout.jsx

@@ -1,17 +1,86 @@
+// React
+import { useEffect } from 'react';
 // Expo
-import { Slot } from 'expo-router';
+import { Slot, useRouter, usePathname } from 'expo-router';
 // Contexts
-import { AuthProvider } from "../src/contexts/authContext";
+import { AuthProvider } from "@/contexts/authContext";
-import { TeamProvider } from "../src/contexts/teamContext";
+import { TeamProvider } from "@/contexts/teamContext";
+// Services
+import { startLocationTracking , stopLocationTracking } from '@/services/tasks/backgroundLocation';
+// Constants
+import { USER_STATE } from '@/constants';
+// Traduction
+import '@/i18n/config';
+import { useUserState } from '@/hooks/useUserState';
 
-const Layout = () => {
+const NavigationManager = () => {
+    const router = useRouter();
+    const pathname = usePathname();
+    const userState = useUserState();
+    
+    // Location tracking
+    useEffect(() => {
+        const trackingStates = [
+            USER_STATE.WAITING, 
+            USER_STATE.PLACEMENT, 
+            USER_STATE.PLAYING, 
+            USER_STATE.CAPTURED, 
+            USER_STATE.FINISHED
+        ];
+
+        if (trackingStates.includes(userState)) {
+            startLocationTracking();
+        } else {
+            stopLocationTracking();
+        }
+    }, [userState]);
+
+    // Routing
+    useEffect(() => {
+        let targetRoute;
+
+        switch (userState) {
+            case USER_STATE.LOADING:
+                return;
+            case USER_STATE.NO_LOCATION:
+                targetRoute = "/location-permission";
+                break;
+            case USER_STATE.OFFLINE:
+                targetRoute = "/login";
+                break;
+            case USER_STATE.WAITING:
+                targetRoute = "/wait";
+                break;
+            case USER_STATE.PLACEMENT:
+            case USER_STATE.PLAYING:
+                targetRoute = "/play";
+                break;
+            case USER_STATE.CAPTURED:
+            case USER_STATE.FINISHED:
+                targetRoute = "/end";
+                break;
+            default:
+                targetRoute = "/";
+                break;
+        }
+
+        if (pathname !== targetRoute) {
+            router.replace(targetRoute);
+        }
+    }, [router, pathname, userState]);
+
+    return null;
+};
+
+const RootLayout = () => {
     return (
         <AuthProvider>
             <TeamProvider>
                 <Slot/>
+                <NavigationManager/>
             </TeamProvider>
         </AuthProvider>
     );
 };
 
-export default Layout;
+export default RootLayout;

mobile/traque-app/app/index.jsx

@@ -1,121 +1,5 @@
-// React
-import { useState, useEffect } from 'react';
-import { ScrollView, View, Text, StyleSheet, Image, Alert } from 'react-native';
-// Expo
-import { useRouter } from 'expo-router';
-// Components
-import { CustomButton } from '../src/components/button';
-import { CustomImage } from '../src/components/image';
-import { CustomTextInput } from '../src/components/input';
-// Contexts
-import { useAuth } from "../src/contexts/authContext";
-// Hooks
-import { usePickImage } from '../src/hooks/usePickImage';
-// Services
-import { uploadTeamImage } from '../src/services/api/image';
-import { getLocationAuthorization, stopLocationTracking } from '../src/services/tasks/backgroundLocation';
-// Constants
-import { COLORS } from '../src/constants';
-
 const Index = () => {
-    const router = useRouter();
+    return null; 
-    const { loggedIn, login } = useAuth();
-    const { image, pickImage } = usePickImage();
-    const [teamId, setTeamId] = useState("");
-    const [isSubmitting, setIsSubmitting] = useState(false);
-
-    // Disbaling location tracking and asking permissions
-    useEffect(() => {
-        stopLocationTracking();
-        getLocationAuthorization();
-    }, []);
-
-    // Routeur
-    useEffect(() => {
-        if (loggedIn) {
-            router.replace("/interface");
-        }
-    }, [router, loggedIn, image]);
-
-    const handleSubmit = async () => {
-        if (isSubmitting || !getLocationAuthorization()) return;
-
-        setIsSubmitting(true);
-
-        const regex = /^\d{6}$/;
-        if (!regex.test(teamId)) {
-            setTimeout(() => Alert.alert("Erreur", "Veuillez entrer un ID d'équipe valide."), 100);
-            return;
-        }
-        
-        try {
-            const response = await login(teamId);
-
-            if (response.isLoggedIn) {
-                uploadTeamImage(teamId, image?.uri);
-                setTeamId("");
-            } else {
-                setTimeout(() => Alert.alert("Échec", "L'ID d'équipe est inconnu."), 100);
-            }
-        } catch (error) {
-            setTimeout(() => Alert.alert("Échec", "La connexion au serveur a échoué."), 100);
-        } finally {
-            setIsSubmitting(false);
-        }
-    };
-
-    return (
-        <ScrollView contentContainerStyle={styles.container}>
-            <View style={styles.transitionContainer}>
-                <View style={styles.subContainer}>
-                    <Image style={styles.logoImage} source={require('../src/assets/images/logo/logo_traque.png')}/>
-                    <Text style={styles.logoText}>LA TRAQUE</Text>
-                </View>
-                <View style={styles.subContainer}>
-                    <CustomTextInput value={teamId} inputMode="numeric" placeholder="ID de l'équipe" style={styles.input} onChangeText={setTeamId}/>
-                </View>
-                <View style={styles.subContainer}>
-                    <Text style={{fontSize: 15}}>Appuyer pour changer la photo d&apos;équipe</Text>
-                    <Text style={{fontSize: 13, marginBottom: 3}}>(Le haut du corps doit être visible)</Text>
-                    <CustomImage source={image ? {uri: image.uri} : require('../src/assets/images/missing_image.jpg')} onPress={pickImage}/>
-                </View>
-                <View style={styles.subContainer}>
-                     <CustomButton label={isSubmitting ? "..." : "Valider"} onPress={handleSubmit}/>
-                </View>
-            </View>
-        </ScrollView>
-    );
 };
 
 export default Index;
-
-const styles = StyleSheet.create({
-    container: {
-        flexGrow: 1,
-        alignItems: 'center',
-        paddingVertical: 20,
-        backgroundColor: COLORS.background
-    },
-    transitionContainer: {
-        flexGrow: 1,
-        width: '80%',
-        maxWidth: 600,
-        alignItems: 'center',
-    },
-    subContainer: {
-        flexGrow: 1,
-        width: "100%",
-        alignItems: 'center',
-        justifyContent: 'center',
-        margin: 10,
-    },
-    logoImage: {
-        width: 130,
-        height: 130,
-        margin: 10,
-    },
-    logoText: {
-        fontSize: 50,
-        fontWeight: 'bold',
-    }
-});

mobile/traque-app/app/interface.jsx

@@ -1,179 +0,0 @@
-// React
-import { useState, useEffect, useMemo, Fragment } from 'react';
-import { View, Text, Image, Alert, StyleSheet, TouchableOpacity } from 'react-native';
-// Expo
-import { useRouter } from 'expo-router';
-// Components
-import { CustomMap } from '../src/components/map';
-import { Drawer } from '../src/components/drawer';
-import { TimerMMSS } from '../src/components/timer';
-// Contexts
-import { useAuth } from '../src/contexts/authContext';
-import { useTeam } from '../src/contexts/teamContext';
-// Hooks
-import { useTimeDifference } from '../src/hooks/useTimeDifference';
-// Services
-import { emitSendPosition } from '../src/services/socket/emitters';
-import { startLocationTracking } from '../src/services/tasks/backgroundLocation';
-// Util
-import { secondsToMMSS } from '../src/utils/functions';
-// Constants
-import { GAME_STATE, COLORS } from '../src/constants';
-
-const Interface = () => {
-    const router = useRouter();
-    const {teamInfos, messages, nextZoneDate, gameState} = useTeam();
-    const {name, ready, captured, locationSendDeadline, outOfZone, outOfZoneDeadline, hasHandicap, enemyHasHandicap} = teamInfos;
-    const { loggedIn, logout } = useAuth();
-    const [timeLeftSendLocation] = useTimeDifference(locationSendDeadline, 1000);
-    const [timeLeftNextZone] = useTimeDifference(nextZoneDate, 1000);
-    const [timeLeftOutOfZone] = useTimeDifference(outOfZoneDeadline, 1000);
-    const [bottomContainerHeight, setBottomContainerHeight] = useState(0);
-    
-    const statusMessage = useMemo(() => {
-        switch (gameState) {
-            case GAME_STATE.SETUP:
-                return messages?.waiting || "Préparation de la partie";
-            case GAME_STATE.PLACEMENT:
-                return "Phase de placement";
-            case GAME_STATE.PLAYING:
-                if (captured) return messages?.captured || "Vous avez été éliminé...";
-                if (!outOfZone) return "La partie est en cours";
-                if (!hasHandicap) return `Veuillez retourner dans la zone\nHandicap dans ${secondsToMMSS(-timeLeftOutOfZone)}`;
-                else return `Veuillez retourner dans la zone\nVotre position est révélée en continue`;
-            case GAME_STATE.FINISHED:
-                return `Vous avez ${captured ? (messages?.loser || "perdu...") : (messages?.winner || "gagné !")}`;
-            default:
-                return "Inconnue";
-        }
-    }, [gameState, messages, outOfZone, hasHandicap, timeLeftOutOfZone, captured]);
-
-    // Router
-    useEffect(() => {
-        if (!loggedIn) {
-            router.replace("/");
-        }
-    }, [router, loggedIn]);
-
-    // Activating geolocation tracking
-    useEffect(() => {
-        startLocationTracking();
-    }, []);
-
-    return (
-        <View style={styles.globalContainer}>
-            <View style={styles.topContainer}>
-                <View style={styles.topheadContainer}>
-                    <TouchableOpacity style={{width: 40, height: 40}} onPress={logout}>
-                        <Image source={require('../src/assets/images/logout.png')} style={{width: 40, height: 40}} resizeMode="contain"></Image>
-                    </TouchableOpacity>
-                    <TouchableOpacity style={{width: 40, height: 40}} onPress={() => Alert.alert("Settings")}>
-                        <Image source={require('../src/assets/images/cogwheel.png')} style={{width: 40, height: 40}} resizeMode="contain"></Image>
-                    </TouchableOpacity>
-                </View>          
-                <View style={styles.teamNameContainer}>
-                    <Text style={{fontSize: 36, fontWeight: "bold", textAlign: "center"}}>{(name ?? "Indisponible")}</Text>
-                </View>
-                <View style={styles.logContainer}>
-                    <TouchableOpacity style={styles.gameState}>
-                        <Text style={{fontSize: 18}}>{statusMessage}</Text>
-                    </TouchableOpacity>
-                </View>
-                <View style={styles.infoContainer}>
-                    { gameState == GAME_STATE.PLACEMENT &&
-                        <View style={[styles.readyIndicator, {backgroundColor: ready ? "#3C3" : "#C33"}]}>
-                            <Text style={{color: '#fff', fontSize: 16}}>{ready ? "Placé" : "Non placé"}</Text>
-                        </View>
-                    }
-                    { gameState == GAME_STATE.PLAYING && !captured && <Fragment>
-                        <TimerMMSS style={{width: "50%"}} title={"Réduction de la zone dans"} seconds={-timeLeftNextZone} />
-                        <TimerMMSS style={{width: "50%"}} title={"Position envoyée dans"} seconds={!hasHandicap ? -timeLeftSendLocation: 0} />
-                    </Fragment>}
-                </View>
-                { 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)}>
-                <CustomMap/>
-                { gameState == GAME_STATE.PLAYING && !captured && !hasHandicap &&
-                    <TouchableOpacity style={styles.updatePosition} onPress={emitSendPosition}>
-                        <Image source={require("../src/assets/images/update_position.png")} style={{width: 40, height: 40}} resizeMode="contain"></Image>
-                    </TouchableOpacity>
-                }
-                { gameState == GAME_STATE.PLAYING && !captured &&
-                    <Drawer height={bottomContainerHeight}/>
-                }
-            </View>
-        </View>
-    );
-};
-
-export default Interface;
-
-const styles = StyleSheet.create({
-    globalContainer: {
-        backgroundColor: COLORS.background,
-        flex: 1,
-    },
-    topContainer: {
-        width: '100%',
-        alignItems: 'center',
-        padding: 15,
-    },
-    topheadContainer: {
-        width: "100%",
-        flexDirection: "row",
-        justifyContent: 'space-between'
-    },
-    teamNameContainer: {
-        width: '100%',
-        alignItems: 'center',
-        justifyContent: 'center'
-    },
-    logContainer: {
-        width: '100%',
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginTop: 15
-    },
-    gameState: {
-        borderWidth: 2,
-        borderRadius: 10,
-        width: "100%",
-        backgroundColor: 'white',
-        padding: 10,
-    },
-    infoContainer: {
-        width: '100%',
-        alignItems: 'center',
-        justifyContent: 'center',
-        flexDirection: 'row',
-        marginTop: 15
-    },
-    readyIndicator: {
-        width: "100%",
-        maxWidth: 240,
-        height: 61,
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: 3,
-        borderRadius: 10
-    },
-    bottomContainer: {
-        flex: 1,
-    },
-    updatePosition: {
-        position: 'absolute',
-        right: 30,
-        bottom: 80,
-        width: 60,
-        height: 60,
-        borderRadius: 30,
-        backgroundColor: 'white',
-        borderWidth: 4,
-        borderColor: 'black',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-});

mobile/traque-app/assets.d.ts

@@ -0,0 +1,5 @@
+declare module "*.png";
+declare module "*.jpg";
+declare module "*.jpeg";
+declare module "*.svg";
+declare module "*.gif";

mobile/traque-app/babel.config.js

@@ -0,0 +1,17 @@
+module.exports = function (api) {
+    api.cache(true);
+    return {
+        presets: ['babel-preset-expo'],
+        plugins: [
+            [
+                'module-resolver',
+                {
+                    root: ['./'],
+                    alias: {
+                        '@': './src',
+                    },
+                },
+            ],
+        ],
+    };
+};

mobile/traque-app/jsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
+    "paths": {"@/*": ["src/*"]},
+    "jsx": "react-native",
+    "checkJs": true,
+  },
+  "include": ["src/**/*", "app.json", "assets.d.ts"],
+  "exclude": ["node_modules", ".expo", "android", "ios"],
+}

mobile/traque-app/package.json

@@ -14,6 +14,7 @@
     "@react-navigation/native": "^7.0.14",
     "@react-navigation/stack": "^7.1.1",
     "axxios": "^0.1.0",
+    "babel-plugin-module-resolver": "^5.0.2",
     "expo": "~52.0.46",
     "expo-build-properties": "~0.13.3",
     "expo-constants": "~17.0.2",
@@ -26,8 +27,10 @@
     "expo-splash-screen": "~0.29.24",
     "expo-status-bar": "~2.0.0",
     "expo-task-manager": "~12.0.6",
+    "i18next": "^25.8.10",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "react-i18next": "^16.5.4",
     "react-native": "0.76.9",
     "react-native-collapsible": "^1.6.2",
     "react-native-device-info": "^14.0.4",

mobile/traque-app/src/components/button.jsx

@@ -1,39 +0,0 @@
-// React
-import { forwardRef } from 'react';
-import { TouchableHighlight, View, Text, StyleSheet } from "react-native";
-
-export const CustomButton = forwardRef(function CustomButton({ label, onPress }, ref) {
-    return (
-        <View style={styles.buttonContainer}>
-            <TouchableHighlight style={styles.button} onPress={onPress} ref={ref}>
-                <Text style={styles.buttonLabel}>{label}</Text>
-            </TouchableHighlight>
-        </View>
-    );
-});
-
-const styles = StyleSheet.create({
-    buttonContainer: {
-        width: "100%",
-        maxWidth: 240,
-        height: 80,
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: 3,
-        borderWidth: 4,
-        borderColor: '#888',
-        borderRadius: 18 
-    },
-    button: {
-        borderRadius: 10,
-        width: '100%',
-        height: '100%',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: '#555' 
-    },
-    buttonLabel: {
-        color: '#fff',
-        fontSize: 16,
-    },
-});

mobile/traque-app/src/components/common/Drawer.jsx

@@ -0,0 +1,67 @@
+// React
+import { useState } from 'react';
+import { ScrollView, View, Image, StyleSheet, TouchableHighlight } from 'react-native';
+import Collapsible from 'react-native-collapsible';
+import LinearGradient from 'react-native-linear-gradient';
+// Constants
+import { COLORS } from '@/constants';
+
+export const Drawer = ({ height, children }) => {
+    const [collapsibleState, setCollapsibleState] = useState(true);
+
+    return (
+        <View style={styles.outerDrawerContainer}>
+            <LinearGradient colors={['rgba(0,0,0,0)', 'rgba(0,0,0,0.5)']} style={styles.gradient}/>
+            <View style={styles.innerDrawerContainer}>
+                <TouchableHighlight style={styles.collapsibleButton} underlayColor="#d9d9d9" onPress={() => setCollapsibleState(!collapsibleState)}>
+                    <Image source={require('@/assets/images/arrow.png')} style={[styles.arrow, {transform: [{ scaleY: collapsibleState ? 1 : -1 }]}]} resizeMode="contain"/>
+                </TouchableHighlight>
+                <Collapsible style={[styles.collapsibleWindow, {height: height - 44}]} collapsed={collapsibleState}>
+                    <ScrollView contentContainerStyle={styles.collapsibleContent}>
+                        {children}
+                    </ScrollView>
+                </Collapsible>
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    outerDrawerContainer: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+    },
+    gradient: {
+        position: "absolute",
+        top: -30,
+        width: "100%",
+        height: 70,
+    },
+    innerDrawerContainer: {
+        width: "100%",
+        backgroundColor: COLORS.background,
+        borderTopLeftRadius: 30,
+        borderTopRightRadius: 30,
+        overflow: 'hidden',
+    },
+    collapsibleButton: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: "100%",
+        height: 45
+    },
+    arrow: {
+        width: 20,
+        height: 20,
+    },
+    collapsibleWindow: {
+        width: "100%",
+        justifyContent: 'center',
+        backgroundColor: COLORS.background,
+    },
+    collapsibleContent: {
+        paddingHorizontal: 15,
+    }
+});

mobile/traque-app/src/components/common/IconButton.jsx

@@ -0,0 +1,23 @@
+// React
+import { TouchableOpacity, Image, StyleSheet } from 'react-native';
+
+export const IconButton = ({ style = {}, source, onPress = () => {} }) => {
+    return (
+        <TouchableOpacity style={[styles.button, style]} onPress={onPress}>
+            <Image source={source} style={styles.icon} resizeMode="contain" />
+        </TouchableOpacity>
+    );
+};
+
+const styles = StyleSheet.create({
+    button: {
+        width: 50,
+        height: 50,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    icon: {
+        width: "80%",
+        height: "80%",
+    },
+});

mobile/traque-app/src/components/common/Image.jsx

@@ -3,19 +3,28 @@ import { useState } from 'react';
 import { StyleSheet, View, Image, TouchableOpacity } from "react-native";
 import ImageViewing from 'react-native-image-viewing';
 
-export const CustomImage = ({ source, canZoom, onPress }) => {
+export const TouchableImage = ({ source, onPress }) => {
-    // canZoom : boolean
+
+    return (
+        <TouchableOpacity style={styles.container} onPress={onPress}>
+            <Image style={styles.image} resizeMode="contain" source={source}/>
+        </TouchableOpacity>
+    );
+};
+
+export const ExpandableImage = ({ source }) => {
     const [isModalVisible, setIsModalVisible] = useState(false);
 
     return (
         <View style={styles.container}>
-            <TouchableOpacity onPress={canZoom ? () => setIsModalVisible(true) : onPress}>
+            <TouchableOpacity onPress={() => setIsModalVisible(true)}>
                 <Image style={styles.image} resizeMode="contain" source={source}/>
             </TouchableOpacity>
             <ImageViewing
                 images={[source]}
                 visible={isModalVisible}
                 onRequestClose={() => setIsModalVisible(false)}
+                imageIndex={0}
                 swipeToCloseEnabled={false}
                 doubleTapToZoomEnabled={false}
             />

mobile/traque-app/src/components/common/Input.jsx

@@ -1,7 +1,7 @@
 // React
 import { TextInput, StyleSheet } from 'react-native';
 
-export const CustomTextInput = ({ style, value, inputMode, placeholder, onChangeText }) => {
+export const CustomTextInput = ({ style = {}, value, inputMode, placeholder, onChangeText }) => {
     return (
         <TextInput
             value={value}

mobile/traque-app/src/components/common/Layers.jsx

@@ -1,7 +1,25 @@
 // React
 import { Fragment } from 'react';
-import { Polygon } from 'react-native-maps';
+import { Image } from 'react-native';
-import { circleToPolygon } from '../utils/functions';
+import { Marker, Polygon } from 'react-native-maps';
+// Util
+import { circleToPolygon } from '@/utils/functions';
+
+const MARKER_IMAGES = {
+    blue: require('@/assets/images/marker/blue.png'),
+    red: require('@/assets/images/marker/red.png'),
+    grey: require('@/assets/images/marker/grey.png'),
+};
+
+export const PositionMarker = ({ position, color = "blue", onPress = () => {} }) => {
+    if (!position) return null;
+
+    return (
+        <Marker coordinate={{latitude: position[0], longitude: position[1]}} anchor={{ x: 0.33, y: 0.33 }} onPress={onPress}>
+            <Image source={MARKER_IMAGES[color]} style={{width: 24, height: 24}} resizeMode="contain"/>
+        </Marker>
+    );
+};
 
 export const InvertedPolygon = ({id, coordinates, fillColor}) => {
     // We create 3 rectangles covering earth, with the first rectangle centered on the hole
@@ -57,7 +75,7 @@ export const InvertedCircle = ({id, center, radius, fillColor}) => {
     return <InvertedPolygon id={id} coordinates={circleToPolygon({center: center, radius: radius})} fillColor={fillColor} />;
 };
 
-export const DashedCircle = ({id, center, radius, fillColor, strokeColor, strokeWidth, lineDashPattern}) => {
+export const DashedCircle = ({id, center, radius, fillColor = "rgba(0, 0, 0, 0)", strokeColor, strokeWidth, lineDashPattern}) => {
     return (
         <Polygon
             key={id}

mobile/traque-app/src/components/common/Map.jsx

@@ -0,0 +1,57 @@
+// React
+import { useState, useEffect, useRef } from 'react';
+import { View, StyleSheet } from 'react-native';
+import MapView from 'react-native-maps';
+// Components
+import { PositionMarker } from '@/components/common/Layers';
+import { IconButton } from '@/components/common/IconButton';
+import { Show } from '@/components/common/Show';
+// Hook
+import { useLocation } from '@/hooks/useLocation';
+// Util
+import { INITIAL_REGIONS } from '@/constants';
+
+export const Map = ({ children }) => {
+    const { location } = useLocation();
+    const [centerMap, setCenterMap] = useState(true);
+    const mapRef = useRef(null);
+
+    // Center the map on user position
+    useEffect(() => {
+        if (centerMap && location && mapRef.current) {
+            mapRef.current.animateToRegion({latitude: location[0], longitude: location[1], latitudeDelta: 0, longitudeDelta: 0.02}, 1000);
+        }
+    }, [centerMap, location]);
+
+    return (
+        <View style={styles.container}>
+            <MapView ref={mapRef} style={styles.mapView} initialRegion={INITIAL_REGIONS.PARIS} mapType={"standard"} onTouchMove={() => setCenterMap(false)} toolbarEnabled={false}>
+                {children}
+                <PositionMarker position={location} />
+            </MapView>
+            <Show when={!centerMap}>
+                <IconButton style={styles.centerMap} source={require("@/assets/images/centerMap.png")} onPress={() => setCenterMap(true)} />
+            </Show>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    mapView: {
+        flex: 1,
+    },
+    centerMap: {
+        position: 'absolute',
+        right: 20,
+        top: 20,
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: 'white',
+        borderWidth: 2,
+        borderColor: 'black'
+    },
+});

mobile/traque-app/src/components/common/Show.jsx

@@ -0,0 +1,3 @@
+export const Show = ({ when, children }) => {
+    return when ? children : null;
+};

mobile/traque-app/src/components/common/Timer.jsx

@@ -0,0 +1,30 @@
+// React
+import { View, Text, StyleSheet } from 'react-native';
+// Util
+import { secondsToMMSS } from '@/utils/functions';
+import { useCountdownSeconds } from '@/hooks/useTimeDelta';
+
+export const TimerMMSS = ({ title, date, style }) => {
+    const timeUntilDate = useCountdownSeconds(date);
+
+    return (
+        <View style={[styles.container, style]}>
+            <Text style={styles.title}>{title}</Text>
+            <Text style={styles.timer}>{secondsToMMSS(timeUntilDate)}</Text> 
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    title: {
+        fontSize: 15
+    },
+    timer: {
+        fontSize: 30,
+        fontWeight: "bold"
+    }
+});

mobile/traque-app/src/components/drawer.jsx

@@ -1,177 +0,0 @@
-// React
-import { useState, useEffect, useMemo, Fragment } from 'react';
-import { ScrollView, View, Text, Image, StyleSheet, TouchableOpacity, TouchableHighlight, Alert } from 'react-native';
-import Collapsible from 'react-native-collapsible';
-import LinearGradient from 'react-native-linear-gradient';
-// Components
-import { CustomImage } from './image';
-import { CustomTextInput } from './input';
-import { Stat } from './stat';
-// Contexts
-import { useAuth } from '../contexts/authContext';
-import { useTeam } from '../contexts/teamContext';
-// Hooks
-import { useTimeDifference } from '../hooks/useTimeDifference';
-// Services
-import { emitCapture } from '../services/socket/emitters';
-import { enemyImage } from '../services/api/image';
-// Util
-import { secondsToHHMMSS } from '../utils/functions';
-// Constants
-import { GAME_STATE, COLORS } from '../constants';
-
-export const Drawer = ({ height }) => {
-    const { teamId } = useAuth();
-    const [collapsibleState, setCollapsibleState] = useState(true);
-    const [enemyCaptureCode, setEnemyCaptureCode] = useState("");
-    const {teamInfos, gameState, startDate} = useTeam();
-    const {enemyName, captureCode, name, distance, finishDate, nCaptures, nSentLocation, hasHandicap} = teamInfos;
-    const [timeSinceStart] = useTimeDifference(startDate, 1000);
-    const [captureStatus, setCaptureStatus] = useState(0); // 0 : no capture | 1 : waiting for response from server | 2 : capture failed | 3 : capture succesful
-    const captureStatusColor = {0: "#777", 1: "#FFA500", 2: "#FF6B6B", 3: "#81C784"};
-
-    const avgSpeed = useMemo(() => {
-        const hours = (finishDate ? (finishDate - startDate) : timeSinceStart*1000) / 1000 / 3600;
-        if (hours <= 0 || distance <= 0) return 0;
-        const km = distance / 1000;
-        const speed = km / hours;
-
-        return parseFloat(speed.toFixed(1));
-    }, [finishDate, startDate, timeSinceStart, distance]);
-    
-    // Capture state update
-    useEffect(() => {
-        if (captureStatus == 2 || captureStatus == 3) {
-            const timeout = setTimeout(() => {
-                setCaptureStatus(0);
-            }, 3000);
-            return () => clearTimeout(timeout);
-        }
-    }, [captureStatus]);
-    
-    const handleCapture = () => {
-        if (captureStatus != 1) {
-            setCaptureStatus(1);
-            emitCapture(enemyCaptureCode)
-                .then((response) => {
-                    if (response.hasCaptured) {
-                        setCaptureStatus(3);
-                    } else {
-                        setCaptureStatus(2);
-                    }
-                })
-                .catch(() => {
-                    Alert.alert("Échec", "La connexion au serveur a échoué.");
-                    setCaptureStatus(2);
-                });
-            setEnemyCaptureCode("");
-        }
-    };
-
-    return (
-        <View style={styles.outerDrawerContainer}>
-            <LinearGradient colors={['rgba(0,0,0,0)', 'rgba(0,0,0,0.5)']} style={{height: 70, width: "100%", position: "absolute", top: -30}}/>
-            <View style={styles.innerDrawerContainer}>
-                <TouchableHighlight onPress={() => setCollapsibleState(!collapsibleState)} style={styles.collapsibleButton} underlayColor="#d9d9d9">
-                    <Image source={require('../assets/images/arrow.png')} style={{width: 20, height: 20, transform: [{ scaleY: collapsibleState ? 1 : -1 }] }} resizeMode="contain"></Image>
-                </TouchableHighlight>
-                <Collapsible style={[styles.collapsibleWindow, {height: height - 44}]} title="Collapse" collapsed={collapsibleState}>
-                    <ScrollView contentContainerStyle={styles.collapsibleContent}>
-                        { gameState == GAME_STATE.PLAYING && 
-                            <Text style={{fontSize: 22, fontWeight: "bold", textAlign: "center"}}>Code de {(name ?? "Indisponible")} : {String(captureCode).padStart(4,"0")}</Text>
-                        }
-                        { gameState == GAME_STATE.PLAYING && !hasHandicap && <Fragment>
-                            <View style={styles.imageContainer}>
-                                <Text style={{fontSize: 15, margin: 5}}>{"Cible (" + (enemyName ?? "Indisponible") + ")"}</Text>
-                                <CustomImage source={enemyImage(teamId)} canZoom/>
-                            </View>
-                            <View style={styles.actionsContainer}>
-                                <View style={styles.actionsLeftContainer}>
-                                    <CustomTextInput style={{borderColor: captureStatusColor[captureStatus]}} value={enemyCaptureCode} inputMode="numeric" placeholder="Code cible"  onChangeText={setEnemyCaptureCode}/>
-                                </View>
-                                <View style={styles.actionsRightContainer}>
-                                    <TouchableOpacity style={styles.button} onPress={handleCapture}>
-                                        <Image source={require("../assets/images/target/white.png")} style={{width: 40, height: 40}} resizeMode="contain"/>
-                                    </TouchableOpacity>
-                                </View>
-                            </View>
-                        </Fragment>}
-                        <View style={{gap: 15, width: "100%", marginVertical: 15}}>
-                            <View style={{flexDirection: "row", justifyContent: "space-around"}}>
-                                <Stat source={require('../assets/images/distance.png')} description={"Distance parcourue"}>{Math.floor(distance / 100) / 10}km</Stat>
-                                <Stat source={require('../assets/images/time.png')} description={"Temps écoulé au format HH:MM:SS"}>{secondsToHHMMSS((finishDate ? Math.floor((finishDate - startDate) / 1000) : timeSinceStart))}</Stat>
-                                <Stat source={require('../assets/images/running.png')} description={"Vitesse moyenne"}>{avgSpeed}km/h</Stat>
-                            </View>
-                            <View style={{flexDirection: "row", justifyContent: "space-around"}}>
-                                <Stat source={require('../assets/images/target/black.png')} description={"Nombre total de captures par votre équipe"}>{nCaptures}</Stat>
-                                <Stat source={require('../assets/images/update_position.png')} description={"Nombre total d'envois de votre position"}>{nSentLocation}</Stat>
-                            </View>
-                        </View>
-                    </ScrollView>
-                </Collapsible>
-            </View>
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    outerDrawerContainer: {
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        right: 0,
-    },
-    innerDrawerContainer: {
-        width: "100%",
-        backgroundColor: COLORS.background,
-        borderTopLeftRadius: 30,
-        borderTopRightRadius: 30,
-        overflow: 'hidden',
-    },
-    collapsibleButton: {
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: "100%",
-        height: 45
-    },
-    collapsibleWindow: {
-        width: "100%",
-        justifyContent: 'center',
-        backgroundColor: COLORS.background,
-    },
-    collapsibleContent: {
-        paddingHorizontal: 15,
-    },
-    imageContainer: {
-        width: "100%", 
-        alignItems: "center", 
-        justifyContent: "center", 
-        marginTop: 15
-    },
-    actionsContainer: {
-        flexDirection: "row",
-        width: "100%",
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginTop: 15
-    },
-    actionsLeftContainer: {
-        flexGrow: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginRight: 15
-    },
-    actionsRightContainer: {
-        width: 100,
-        alignItems: 'center',
-        justifyContent: 'center'
-    },
-    button: {
-        borderRadius: 12,
-        width: '100%',
-        height: 75,
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: '#444'
-    },
-});

mobile/traque-app/src/components/game/Header.jsx

@@ -0,0 +1,46 @@
+// React
+import { View, Text, Alert, StyleSheet } from 'react-native';
+// Contexts
+import { useAuth } from '@/contexts/authContext';
+import { useTeam } from '@/contexts/teamContext';
+// Components
+import { IconButton } from '@/components/common/IconButton';
+
+export const Header = () => {
+    const { logout } = useAuth();
+    const { teamInfos } = useTeam();
+    const { name } = teamInfos;
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.buttonsContainer}>
+                <IconButton source={require('@/assets/images/logout.png')} onPress={logout} />
+                <IconButton source={require('@/assets/images/cogwheel.png')} onPress={() => Alert.alert("Settings")} />
+            </View>          
+            <View style={styles.nameContainer}>
+                <Text style={styles.name}>{name ?? "Inconnue"}</Text>
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+        alignItems: 'center'
+    },
+    buttonsContainer: {
+        width: "100%",
+        flexDirection: "row",
+        justifyContent: 'space-between'
+    },
+    nameContainer: {
+        width: '100%',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    name: {
+        fontSize: 36,
+        fontWeight: "bold"
+    }
+});

mobile/traque-app/src/components/game/MapLayers.jsx

@@ -0,0 +1,93 @@
+// React
+import { useMemo } from 'react';
+import { Circle, Polygon } from 'react-native-maps';
+// Components
+import { DashedCircle, InvertedCircle, InvertedPolygon } from '@/components/common/Layers';
+// Contexts
+import { useTeam } from '@/contexts/teamContext';
+// Constants
+import { ZONE_TYPES } from '@/constants';
+
+export const StartZone = () => {
+    const { teamInfos } = useTeam();
+    const { startingArea } = teamInfos;
+
+    return useMemo(() => {
+        if (startingArea) return null;
+
+        return (
+            <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)`}
+            />
+        );
+    }, [startingArea]);
+};
+
+const latToLatitude = (pos) => ({latitude: pos.lat, longitude: pos.lng});
+
+export const GameZone = () => {
+    const { zoneType, zoneExtremities } = useTeam();
+    
+    return useMemo(() => {
+        if (!zoneExtremities) return null;
+
+        const items = [];
+        
+        const nextZoneStrokeColor = "rgb(90, 90, 90)";
+        const zoneColor = "rgba(25, 83, 169, 0.4)";
+        const strokeWidth = 3;
+        const lineDashPattern = [30, 10];
+
+        switch (zoneType) {
+            case ZONE_TYPES.CIRCLE:
+                if (zoneExtremities.begin) items.push(
+                    <InvertedCircle
+                        key="game-zone-begin-circle"
+                        id="game-zone-begin-circle"
+                        center={latToLatitude(zoneExtremities.begin.center)}
+                        radius={zoneExtremities.begin.radius}
+                        fillColor={zoneColor}
+                    />
+                );
+                if (zoneExtremities.end) items.push(
+                    <DashedCircle
+                        key="game-zone-end-circle"
+                        id="game-zone-end-circle"
+                        center={latToLatitude(zoneExtremities.end.center)}
+                        radius={zoneExtremities.end.radius}
+                        strokeColor={nextZoneStrokeColor}
+                        strokeWidth={strokeWidth}
+                        lineDashPattern={lineDashPattern}
+                    />
+                );
+                break;
+            case ZONE_TYPES.POLYGON:
+                if (zoneExtremities.begin) items.push(
+                    <InvertedPolygon
+                        key="game-zone-begin-poly"
+                        id="game-zone-begin-poly"
+                        coordinates={zoneExtremities.begin.polygon.map(pos => latToLatitude(pos))}
+                        fillColor={zoneColor}
+                    />
+                );
+                if (zoneExtremities.end) items.push(
+                    <Polygon
+                        key="game-zone-end-poly"
+                        coordinates={zoneExtremities.end.polygon.map(pos => latToLatitude(pos))}
+                        strokeColor={nextZoneStrokeColor}
+                        strokeWidth={strokeWidth}
+                        lineDashPattern={lineDashPattern}
+                    />
+                );
+                break;
+            default:
+                return null;
+        }
+
+        return items.length ? items : null;
+    }, [zoneType, zoneExtremities]);
+};

mobile/traque-app/src/components/game/TargetInfoDrawer.jsx

@@ -0,0 +1,105 @@
+// React
+import { useState } from 'react';
+import { View, Text, Image, StyleSheet, TouchableOpacity, Alert } from 'react-native';
+import { useTranslation } from 'react-i18next';
+// Components
+import { ExpandableImage } from '@/components/common/Image';
+import { CustomTextInput } from '@/components/common/Input';
+import { Drawer } from '@/components/common/Drawer';
+import { Show } from '@/components/common/Show';
+import { TeamStats } from '@/components/game/TeamStats';
+// Contexts
+import { useAuth } from '@/contexts/authContext';
+import { useTeam } from '@/contexts/teamContext';
+// Services
+import { emitCapture } from '@/services/socket/emitters';
+import { enemyImage } from '@/services/api/image';
+
+export const TargetInfoDrawer = ({ height }) => {
+    const { t } = useTranslation();
+    const { teamId } = useAuth();
+    const { teamInfos } = useTeam();
+    const { enemyName, captureCode, name, hasHandicap } = teamInfos;
+    const [enemyCaptureCode, setEnemyCaptureCode] = useState("");
+    const [isCapturing, setIsCapturing] = useState(false);
+    
+    const handleCapture = () => {
+        if (isCapturing) return;
+        
+        setIsCapturing(true);
+
+        emitCapture(enemyCaptureCode)
+            .then((response) => {
+                if (response.hasCaptured) {
+                    Alert.alert("Bravo !", "Vous avez réussi à capturer votre cible. Une nouvelle cible vient de vous être attribuée.");
+                    setEnemyCaptureCode("");
+                } else {
+                    Alert.alert("Échec !", "Le code que vous venez de rentrer n'est pas celui de votre cible.");
+                }
+            })
+            .catch(() => {
+                Alert.alert(t("error.title"), t("error.server_connection"));
+            })
+            .finally(() => setIsCapturing(false));
+    };
+
+    return (
+        <Drawer height={height}>
+            <Text style={{fontSize: 22, fontWeight: "bold", textAlign: "center"}}>
+                {t("interface.drawer.capture_code", {name: name ?? t("general.no_value"), code: String(captureCode).padStart(4,"0")})}
+            </Text>
+            <Show when={!hasHandicap}>
+                <View style={styles.imageContainer}>
+                    <Text style={{fontSize: 15, margin: 5}}>{t("interface.drawer.target_name", {name: enemyName ?? t("general.no_value")})}</Text>
+                    <ExpandableImage source={enemyImage(teamId)}/>
+                </View>
+                <View style={styles.actionsContainer}>
+                    <View style={styles.actionsLeftContainer}>
+                        <CustomTextInput value={enemyCaptureCode} inputMode="numeric" placeholder={t("interface.drawer.target_code_input")}  onChangeText={setEnemyCaptureCode}/>
+                    </View>
+                    <View style={styles.actionsRightContainer}>
+                        <TouchableOpacity style={styles.button} onPress={handleCapture}>
+                            <Image source={require("@/assets/images/target/white.png")} style={{width: 40, height: 40}} resizeMode="contain"/>
+                        </TouchableOpacity>
+                    </View>
+                </View>
+            </Show>
+            <TeamStats/>
+        </Drawer>
+    );
+};
+
+const styles = StyleSheet.create({
+    imageContainer: {
+        width: "100%", 
+        alignItems: "center", 
+        justifyContent: "center", 
+        marginTop: 15
+    },
+    actionsContainer: {
+        flexDirection: "row",
+        width: "100%",
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginTop: 15
+    },
+    actionsLeftContainer: {
+        flexGrow: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: 15
+    },
+    actionsRightContainer: {
+        width: 100,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    button: {
+        borderRadius: 12,
+        width: '100%',
+        height: 75,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#444'
+    },
+});

mobile/traque-app/src/components/game/TeamStats.jsx

@@ -0,0 +1,75 @@
+// React
+import { useMemo } from 'react';
+import { StyleSheet, View, TouchableOpacity, Image, Text, Alert } from 'react-native';
+import { useTranslation } from 'react-i18next';
+// Contexts
+import { useTeam } from '@/contexts/teamContext';
+// Hook
+import { useTimeSinceSeconds } from '@/hooks/useTimeDelta';
+// Util
+import { secondsToHHMMSS } from '@/utils/functions';
+
+const Stat = ({ children, source, description }) => {
+    return (
+        <TouchableOpacity style={styles.statContainer} onPress={description ? () => Alert.alert("Info", description) : null}>
+            <Image style={styles.image} source={source} resizeMode="contain"/>
+            <Text style={styles.text}>{children}</Text>
+        </TouchableOpacity>
+    );
+};
+
+export const TeamStats = () => {
+    const { t } = useTranslation();
+    const { teamInfos, startDate } = useTeam();
+    const { distance, finishDate, nCaptures, nSentLocation } = teamInfos;
+    const timeSinceGameStart = useTimeSinceSeconds(startDate);
+
+    const avgSpeed = useMemo(() => {
+        const hours = (finishDate ? (finishDate - startDate) : timeSinceGameStart*1000) / 1000 / 3600;
+        if (hours <= 0 || distance <= 0) return 0;
+        const km = distance / 1000;
+        const speed = km / hours;
+
+        return parseFloat(speed.toFixed(1));
+    }, [finishDate, startDate, timeSinceGameStart, distance]);
+
+    return (
+        <View style={styles.statsContainer}>
+            <View style={styles.row}>
+                <Stat source={require('@/assets/images/distance.png')} description={t("interface.drawer.stat_distance_label")}>{Math.floor(distance / 100) / 10}km</Stat>
+                <Stat source={require('@/assets/images/time.png')} description={t("interface.drawer.stat_time_label")}>{secondsToHHMMSS((finishDate ? Math.floor((finishDate - startDate) / 1000) : timeSinceGameStart))}</Stat>
+                <Stat source={require('@/assets/images/running.png')} description={t("interface.drawer.stat_speed_label")}>{avgSpeed}km/h</Stat>
+            </View>
+            <View style={styles.row}>
+                <Stat source={require('@/assets/images/target/black.png')} description={t("interface.drawer.stat_capture_label")}>{nCaptures}</Stat>
+                <Stat source={require('@/assets/images/update_position.png')} description={t("interface.drawer.stat_reveal_label")}>{nSentLocation}</Stat>
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    statContainer: {
+        height: 30,
+        flexDirection: "row",
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    image: {
+        width: 30,
+        height: 30,
+        marginRight: 5
+    },
+    text: {
+        fontSize: 15
+    },
+    statsContainer: {
+        gap: 15,
+        width: "100%",
+        marginVertical: 15
+    },
+    row: {
+        flexDirection: "row",
+        justifyContent: "space-around"
+    }
+});

mobile/traque-app/src/components/game/Toasts.jsx

@@ -0,0 +1,80 @@
+// React
+import { View, Text, StyleSheet } from 'react-native';
+import { useTranslation } from 'react-i18next';
+// Contexts
+import { useTeam } from '@/contexts/teamContext';
+// Hooks
+import { useUserState } from '@/hooks/useUserState';
+// Util
+import { secondsToMMSS } from '@/utils/functions';
+// Constants
+import { USER_STATE } from '@/constants';
+import { useCountdownSeconds } from '@/hooks/useTimeDelta';
+
+export const Toasts = () => {
+    const { t } = useTranslation();
+    const { teamInfos } = useTeam();
+    const { outOfZone, outOfZoneDeadline, hasHandicap, enemyHasHandicap, ready } = teamInfos;
+    const userState = useUserState();
+    const outOfZoneTimeLeft = useCountdownSeconds(outOfZoneDeadline);
+
+    const toastData = [
+        {
+            condition: userState === USER_STATE.PLACEMENT,
+            id: 'placement',
+            text: ready ? t("interface.placed") : t("interface.not_placed"),
+            toastColor: ready ? "rgb(25, 165, 25)" : "rgb(204, 51, 51)" ,
+            textColor: "white"
+        },
+        {
+            condition: userState === USER_STATE.PLAYING && !outOfZone && enemyHasHandicap,
+            id: 'enemy_revealed',
+            text: t("interface.enemy_position_revealed"),
+            toastColor: "white",
+            textColor: "black"
+        },
+        {
+            condition: userState === USER_STATE.PLAYING && outOfZone && hasHandicap,
+            id: 'out_of_zone',
+            text: `${t("interface.go_in_zone")}\n${t("interface.team_position_revealed")}`,
+            toastColor: "white",
+            textColor: "black"
+        },
+        {
+            condition: userState === USER_STATE.PLAYING && outOfZone && !hasHandicap,
+            id: 'has_handicap',
+            text: `${t("interface.go_in_zone")}\n${t("interface.out_of_zone_message", {time: secondsToMMSS(outOfZoneTimeLeft)})}`,
+            toastColor: "white",
+            textColor: "black"
+        }
+    ];
+
+    return (
+        <View style={styles.container}>
+            {toastData.filter(item => item.condition).map((item) => (
+                <View key={item.id} style={[styles.toast, {backgroundColor: item.toastColor}]}>
+                    <Text style={{ color: item.textColor }}>
+                        {item.text}
+                    </Text>
+                </View>
+            ))}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        position: 'absolute',
+        top: 5,
+        left: "50%",
+        transform: [{ translateX: '-50%' }],
+        maxWidth: "60%"
+    },
+    toast: {
+        margin: 5,
+        padding: 10,
+        borderRadius: 15,
+        backgroundColor: 'white',
+        elevation: 5
+    },
+});

mobile/traque-app/src/components/map.jsx

@@ -1,171 +0,0 @@
-// React
-import { useState, useEffect, useMemo, useRef } from 'react';
-import { View, Image, Alert, StyleSheet, TouchableOpacity } from 'react-native';
-import MapView, { Marker, Circle, Polygon } from 'react-native-maps';
-import LinearGradient from 'react-native-linear-gradient';
-// Components
-import { DashedCircle, InvertedCircle, InvertedPolygon } from './layer';
-// Contexts
-import { useTeam } from '../contexts/teamContext';
-// Hook
-import { useLocation } from '../hooks/useLocation';
-// Util
-import { ZONE_TYPES, INITIAL_REGIONS, GAME_STATE } from '../constants';
-
-export const CustomMap = () => {
-    const { location } = useLocation();
-    const {teamInfos, zoneType, zoneExtremities, gameState} = useTeam();
-    const {enemyLocation, startingArea, lastSentLocation, hasHandicap} = teamInfos;
-    const [centerMap, setCenterMap] = useState(true);
-    const mapRef = useRef(null);
-
-    // Center the map on user position
-    useEffect(() => {
-        if (centerMap && location && mapRef.current) {
-            mapRef.current.animateToRegion({...location, latitudeDelta: 0, longitudeDelta: 0.02}, 1000);
-        }
-    }, [centerMap, location]);
-
-
-    // Map layers
-
-    const latToLatitude = (pos) => ({latitude: pos.lat, longitude: pos.lng});
-
-    const startZone = useMemo(() => {
-        if (gameState != GAME_STATE.PLACEMENT || !startingArea) return null;
-
-        return (
-            <Circle key="start-zone" 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, startingArea]);
-
-    const gameZone = useMemo(() => {
-        if (gameState !== GAME_STATE.PLAYING || !zoneExtremities) return null;
-
-        const items = [];
-        
-        const nextZoneStrokeColor = "rgb(90, 90, 90)";
-        const zoneColor = "rgba(25, 83, 169, 0.4)";
-        const strokeWidth = 3;
-        const lineDashPattern = [30, 10];
-
-        if (zoneType === ZONE_TYPES.CIRCLE) {
-            if (zoneExtremities.begin) items.push(
-                <InvertedCircle
-                    key="game-zone-begin-circle"
-                    id="game-zone-begin-circle"
-                    center={latToLatitude(zoneExtremities.begin.center)}
-                    radius={zoneExtremities.begin.radius}
-                    fillColor={zoneColor}
-                />
-            );
-            if (zoneExtremities.end) items.push(
-                <DashedCircle
-                    key="game-zone-end-circle"
-                    id="game-zone-end-circle"
-                    center={latToLatitude(zoneExtremities.end.center)}
-                    radius={zoneExtremities.end.radius}
-                    strokeColor={nextZoneStrokeColor}
-                    strokeWidth={strokeWidth}
-                    lineDashPattern={lineDashPattern}
-                />
-            );
-        } else if (zoneType === ZONE_TYPES.POLYGON) {
-            if (zoneExtremities.begin) items.push(
-                <InvertedPolygon
-                    key="game-zone-begin-poly"
-                    id="game-zone-begin-poly"
-                    coordinates={zoneExtremities.begin.polygon.map(pos => latToLatitude(pos))}
-                    fillColor={zoneColor}
-                />
-            );
-            if (zoneExtremities.end) items.push(
-                <Polygon
-                    key="game-zone-end-poly"
-                    coordinates={zoneExtremities.end.polygon.map(pos => latToLatitude(pos))}
-                    strokeColor={nextZoneStrokeColor}
-                    strokeWidth={strokeWidth}
-                    lineDashPattern={lineDashPattern}
-                />
-            );
-        }
-
-        return items.length ? items : null;
-    }, [gameState, zoneType, zoneExtremities]);
-
-    const currentPositionMarker = useMemo(() => {
-        if (!location) return null;
-
-        return (
-            <Marker key={"current-position-marker"} coordinate={location} anchor={{ x: 0.33, y: 0.33 }} onPress={() => Alert.alert("Position actuelle", "Ceci est votre position")}>
-                <Image source={require("../assets/images/marker/blue.png")} style={styles.markerImage} resizeMode="contain"/>
-            </Marker>
-        );
-    }, [location]);
-
-    const lastPositionMarker = useMemo(() => {
-        if (gameState != GAME_STATE.PLAYING || !lastSentLocation || hasHandicap) return null;
-
-        return (
-            <Marker key={"last-position-marker"} coordinate={{ latitude: lastSentLocation[0], longitude: lastSentLocation[1] }} anchor={{ x: 0.33, y: 0.33 }} onPress={() => Alert.alert("Position envoyée", "Ceci est votre dernière position connue par le serveur")}>
-                <Image source={require("../assets/images/marker/grey.png")} style={styles.markerImage} resizeMode="contain"/>
-            </Marker>
-        );
-    }, [gameState, hasHandicap, lastSentLocation]);
-
-    const enemyPositionMarker = useMemo(() => {
-        if (gameState != GAME_STATE.PLAYING || !enemyLocation || hasHandicap) return null;
-
-        return (
-            <Marker key={"enemy-position-marker"} coordinate={{ latitude: enemyLocation[0], longitude: enemyLocation[1] }} anchor={{ x: 0.33, y: 0.33 }} onPress={() => Alert.alert("Position ennemie", "Ceci est la dernière position de vos ennemis connue")}>
-                <Image source={require("../assets/images/marker/red.png")} style={styles.markerImage} resizeMode="contain"/>
-            </Marker>
-        );
-    }, [gameState, hasHandicap, enemyLocation]);
-
-
-    return (
-        <View style={styles.container}>
-            <MapView ref={mapRef} style={{flex: 1}} initialRegion={INITIAL_REGIONS.PARIS} mapType="standard" onTouchMove={() => setCenterMap(false)} toolbarEnabled={false}>
-                {startZone}
-                {gameZone}
-                {currentPositionMarker}
-                {lastPositionMarker}
-                {enemyPositionMarker}
-            </MapView>
-            <LinearGradient colors={['rgba(0,0,0,0.3)', 'rgba(0,0,0,0)']} style={{height: 40, width: "100%", position: "absolute"}}/>
-            { !centerMap && 
-                <TouchableOpacity style={styles.centerMap} onPress={() => setCenterMap(true)}>
-                    <Image source={require("../assets/images/centerMap.png")} style={{width: 30, height: 30}} resizeMode="contain"></Image>
-                </TouchableOpacity>
-            }
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        width: '100%',
-        borderTopLeftRadius: 30,
-        borderTopRightRadius: 30,
-        overflow: 'hidden',
-    },
-    centerMap: {
-        position: 'absolute',
-        right: 20,
-        top: 20,
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        backgroundColor: 'white',
-        borderWidth: 2,
-        borderColor: 'black',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    markerImage: {
-        width: 24,
-        height: 24
-    }
-});

mobile/traque-app/src/components/stat.jsx

@@ -1,13 +0,0 @@
-// React
-import { TouchableOpacity, View, Image, Text, Alert } from 'react-native';
-
-export const Stat = ({ children, source, description }) => {
-    return (
-        <TouchableOpacity onPress={description ? () => Alert.alert("Info", description) : null}>
-            <View style={{height: 30, flexDirection: "row", justifyContent: 'center', alignItems: 'center'}}>
-                {source && <Image source={source} style={{width: 30, height: 30, marginRight: 5}} resizeMode="contain"/>}
-                <Text style={{fontSize: 15}}>{children}</Text>
-            </View>
-        </TouchableOpacity>
-    );
-};

mobile/traque-app/src/components/timer.jsx

@@ -1,20 +0,0 @@
-// React
-import { View, Text, StyleSheet } from 'react-native';
-// Util
-import { secondsToMMSS } from '../utils/functions';
-
-export const TimerMMSS = ({ title, seconds, style }) => {
-    return (
-        <View style={[styles.container, style]}>
-            <Text style={{fontSize: 15}}>{title}</Text>
-            <Text style={{fontSize: 30, fontWeight: "bold"}}>{secondsToMMSS(seconds)}</Text> 
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        alignItems: 'center',
-        justifyContent: 'center',
-    }
-});

mobile/traque-app/src/constants/game.js

@@ -5,6 +5,17 @@ export const GAME_STATE = {
     FINISHED: "finished"
 };
 
+export const USER_STATE = {
+    LOADING: "loading",
+    NO_LOCATION: "no_location",
+    OFFLINE: "offline",
+    WAITING: "waiting",
+    PLACEMENT: "placement",
+    PLAYING: "playing",
+    CAPTURED: "captured",
+    FINISHED: "finished"
+};
+
 export const ZONE_TYPES = {
     CIRCLE: "circle",
     POLYGON: "polygon"

mobile/traque-app/src/contexts/authContext.jsx

@@ -2,11 +2,11 @@
 import { createContext, useContext, useState, useEffect, useCallback, useMemo } from "react";
 import DeviceInfo from 'react-native-device-info';
 // Hook
-import { useLocalStorage } from '../hooks/useLocalStorage';
+import { useLocalStorage } from '@/hooks/useLocalStorage';
 // Services
-import { emitLogin, emitLogout, emitBattery, emitDeviceInfo } from "../services/socket/emitters";
+import { emitLogin, emitLogout, emitBattery, emitDeviceInfo } from "@/services/socket/emitters";
 
-const AuthContext = createContext();
+const AuthContext = createContext(null);
 
 export const AuthProvider = ({ children }) => {
     const [loggedIn, setLoggedIn] = useState(false);
@@ -34,12 +34,14 @@ export const AuthProvider = ({ children }) => {
         emitLogout();
     }, [loggedIn, setTeamId]);
 
+    /*
     // Try to log in with saved teamId
     useEffect(() => {
         if (!loggedIn && teamId) {
             login(teamId);
         }
     }, [loggedIn, teamId, login]);
+    */
 
     // Emit battery level and phone model at log in
     useEffect(() => {

mobile/traque-app/src/contexts/teamContext.jsx

@@ -1,13 +1,13 @@
 // React
 import { createContext, useContext, useMemo, useState, useEffect } from "react";
 // Context
-import { useAuth } from "./authContext";
+import { useAuth } from "@/contexts/authContext";
 // Services
-import { socket } from "../services/socket/connection";
+import { socket } from "@/services/socket/connection";
 // Constants
-import { GAME_STATE } from "../constants";
+import { GAME_STATE } from "@/constants";
 
-const TeamContext = createContext();
+const TeamContext = createContext(null);
 
 const useOnEvent = (event, callback) => {
     useEffect(() => {

mobile/traque-app/src/hooks/useLocation.jsx

@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
 // Expo
 import * as Location from 'expo-location';
 // Constants
-import { LOCATION_PARAMETERS } from '../constants';
+import { LOCATION_PARAMETERS } from '@/constants';
 
 export const useLocation = () => {
     const [location, setLocation] = useState(null);
@@ -17,8 +17,8 @@ export const useLocation = () => {
             if (status !== 'granted')  return;
 
             subscription = await Location.watchPositionAsync(
-                LOCATION_PARAMETERS,
+                LOCATION_PARAMETERS.LOCAL,
-                (location) => setLocation(location.coords)
+                (location) => setLocation([location.coords.latitude, location.coords.longitude])
             );
         };
 

mobile/traque-app/src/hooks/usePickImage.jsx

@@ -1,10 +1,12 @@
 // React
 import { useState, useCallback } from 'react';
 import { Alert } from 'react-native';
+import { useTranslation } from 'react-i18next';
 // Expo
 import { launchImageLibraryAsync, requestMediaLibraryPermissionsAsync } from 'expo-image-picker';
 
 export const usePickImage = () => {
+    const { t } = useTranslation();
     const [image, setImage] = useState(null);
 
     const pickImage = useCallback(async () => {
@@ -12,7 +14,7 @@ export const usePickImage = () => {
             const permissionResult = await requestMediaLibraryPermissionsAsync();
           
             if (permissionResult.granted === false) {
-                Alert.alert("Permission refusée", "Activez l'accès au stockage ou à la gallerie dans les paramètres.");
+                Alert.alert(t("error.permission.title"), t("error.permission.storage_acces"));
                 return;
             }
             let result = await launchImageLibraryAsync({
@@ -31,9 +33,9 @@ export const usePickImage = () => {
             }
         } catch (error) {
             console.error('Error picking image;', error);
-            Alert.alert('Erreur', "Une erreur est survenue lors de la sélection d'une image.");
+            Alert.alert(t("error.title"), t("error.image_selection"));
         }
-    }, []);
+    }, [t]);
 
     return { image, pickImage };
 };

mobile/traque-app/src/hooks/useTimeDelta.jsx

@@ -0,0 +1,61 @@
+// React
+import { useState, useEffect } from 'react';
+
+export const useCountdownSeconds = (date) => {
+    const [time, setTime] = useState(0);
+
+    useEffect(() => {
+        if (!date) {
+            setTime(0);
+            return;
+        }
+
+        let interval;
+
+        const updateTime = () => {
+            const timeLeft = Math.floor((date - Date.now()) / 1000);
+            
+            if (timeLeft <= 0) {
+                setTime(0);
+                clearInterval(interval);
+            } else {
+                setTime(timeLeft);
+            }
+        };
+
+        updateTime();
+        interval = setInterval(updateTime, 1000);
+    
+        return () => clearInterval(interval);
+    }, [date]);
+
+    return time;
+};
+
+export const useTimeSinceSeconds = (date) => {
+    const [time, setTime] = useState(0);
+
+    useEffect(() => {
+        if (!date) {
+            setTime(0);
+            return;
+        }
+
+        const updateTime = () => {
+            const timeSince = Math.floor((Date.now() - date) / 1000);
+            
+            if (timeSince <= 0) {
+                setTime(0);
+            } else {
+                setTime(timeSince);
+            }
+        };
+
+        updateTime();
+        const interval = setInterval(updateTime, 1000);
+    
+        return () => clearInterval(interval);
+    }, [date]);
+
+    return time;
+};

mobile/traque-app/src/hooks/useTimeDifference.jsx

@@ -1,24 +0,0 @@
-// React
-import { useEffect, useState } from "react";
-
-/**
- * If refTime is in the past, time will be positive
- * If refTime is in the future, time will be negative
- * The time is updated every timeout milliseconds
- */
-export const useTimeDifference = (refTime, timeout) => {
-    const [time, setTime] = useState(0);
-
-    useEffect(() => {
-        const updateTime = () => {
-            setTime(Math.floor((Date.now() - refTime) / 1000));
-        };
-
-        updateTime();
-        const interval = setInterval(updateTime, timeout);
-    
-        return () => clearInterval(interval);
-    }, [refTime, timeout]);
-
-    return [time];
-};

mobile/traque-app/src/hooks/useUserState.jsx

@@ -0,0 +1,43 @@
+// React
+import { useState, useEffect, useMemo } from "react";
+// Contexts
+import { useAuth } from "@/contexts/authContext";
+import { useTeam } from "@/contexts/teamContext";
+// Constants
+import { GAME_STATE, USER_STATE } from '@/constants';
+import { getLocationAuthorization } from '@/services/tasks/backgroundLocation';
+
+export const useUserState = () => {
+    const { loggedIn } = useAuth();
+    const { teamInfos, gameState } = useTeam();
+    const { captured } = teamInfos;
+    const [isLocationAuthorized, setIsLocationAuthorized] = useState(null);
+
+    useEffect(() => {
+        const checkLocationAuth = async () => {
+            const result = await getLocationAuthorization();
+            setIsLocationAuthorized(result);
+        };
+
+        checkLocationAuth();
+    }, []);
+
+    return useMemo(() => {
+        if (isLocationAuthorized == null) return USER_STATE.LOADING;
+        if (!isLocationAuthorized) return USER_STATE.NO_LOCATION;
+        if (!loggedIn) return USER_STATE.OFFLINE;
+
+        switch (gameState) {
+            case GAME_STATE.SETUP:
+                return USER_STATE.WAITING;
+            case GAME_STATE.PLACEMENT:
+                return USER_STATE.PLACEMENT;
+            case GAME_STATE.PLAYING:
+                return captured ? USER_STATE.CAPTURED : USER_STATE.PLAYING;
+            case GAME_STATE.FINISHED:
+                return USER_STATE.FINISHED;
+            default:
+                return USER_STATE.WAITING;
+        }
+    }, [loggedIn, gameState, captured, isLocationAuthorized]);
+};

mobile/traque-app/src/i18n/config.js

@@ -0,0 +1,26 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+// Importation des fichiers de traduction
+import fr from './locales/fr.json';
+import en from './locales/en.json';
+
+// eslint-disable-next-line import/no-named-as-default-member
+i18n
+    .use(initReactI18next)
+    .init({
+        resources: {
+            en: { translation: en },
+            fr: { translation: fr }
+        },
+        lng: 'fr',
+        fallbackLng: 'en', 
+        interpolation: {
+            escapeValue: false
+        },
+        react: {
+            useSuspense: false
+        }
+  });
+
+export default i18n;

mobile/traque-app/src/i18n/locales/en.json

@@ -0,0 +1,3 @@
+{
+
+}

mobile/traque-app/src/i18n/locales/fr.json

@@ -0,0 +1,61 @@
+{
+    "general": {
+        "no_value": "Indisponible"
+    },
+    "index": {
+        "header": {
+            "title": "LA TRAQUE"
+        },
+        "form": {
+            "team_id_input": "ID de l'équipe",
+            "image_label": "Appuyer pour changer la photo d'équipe",
+            "image_sublabel": "Le haut du corps doit être visible",
+            "validate_button": "Valider"
+        }
+    },
+    "interface": {
+        "placed": "Placé",
+        "not_placed": "Non placé",
+        "zone_reduction_label": "Réduction de la zone dans",
+        "send_position_label": "Position envoyée dans",
+        "enemy_position_revealed": "Position ennemie révélée en continue !",
+        "waiting_default_message": "Préparation de la partie",
+        "placement_default_message": "Phase de placement",
+        "go_in_zone": "Retournez dans la zone !",
+        "team_position_revealed": "Position révélée en continue.",
+        "out_of_zone_message": "Handicap dans {{time}}",
+        "playing_message": "La partie est en cours",
+        "winner_message": "Vous avez gagné !",
+        "loser_message": "Vous avez perdu...",
+        "captured_message": "Vous avez été éliminé...",
+        "map": {
+            "team_marker_title": "Position actuelle",
+            "team_marker_description": "Ceci est votre position",
+            "previous_marker_title": "Position envoyée",
+            "previous_marker_description": "Ceci est votre dernière position connue par le serveur",
+            "enemy_marker_title": "Position ennemie",
+            "enemy_marker_description": "Ceci est la dernière position de vos ennemis connue"
+        },
+        "drawer": {
+            "capture_code": "Code de {{name}} : {{code}}",
+            "target_name": "Cible ({{name}})",
+            "target_code_input": "Code cible",
+            "stat_distance_label": "Distance parcourue",
+            "stat_time_label": "Temps écoulé au format HH:MM:SS",
+            "stat_speed_label": "Vitesse moyenne",
+            "stat_capture_label": "Nombre total de captures par votre équipe",
+            "stat_reveal_label": "Nombre total d'envois de votre position"
+        }
+    },
+    "error": {
+        "title": "Erreur",
+        "invalid_team_id": "Veuillez entrer un ID d'équipe valide.",
+        "unknown_team_id": "L'ID d'équipe est inconnu.",
+        "server_connection": "La connexion au serveur a échoué.",
+        "image_selection": "Une erreur est survenue lors de la sélection d'une image.",
+        "permission": {
+            "title": "Permission refusée",
+            "storage_acces": "Activez l'accès au stockage ou à la gallerie dans les paramètres."
+        }
+    }
+}

mobile/traque-app/src/services/api/image.js

@@ -1,10 +1,11 @@
 // Constants
-import { SERVER_URL } from "../../constants";
+import { SERVER_URL } from "@/constants";
 
 export const uploadTeamImage = async (id, imageUri) => {
     if (!imageUri || !id) return;
 
     const data = new FormData();
+    // @ts-ignore
     data.append('file', {
         uri: imageUri,
         name: 'photo.jpg',
@@ -26,7 +27,7 @@ export const uploadTeamImage = async (id, imageUri) => {
 };
 
 export const enemyImage = (id) => {
-    if (!id) return require('../assets/images/missing_image.jpg');
+    if (!id) return require('@/assets/images/missing_image.jpg');
     
     return {uri: `${SERVER_URL}/photo/enemy?team=${id}`};
 };

mobile/traque-app/src/services/socket/connection.js

@@ -1,7 +1,7 @@
 // Socket
 import { io } from "socket.io-client";
 // Constants
-import { SOCKET_URL } from "../../constants";
+import { SOCKET_URL } from "@/constants";
 
 export const socket = io(SOCKET_URL, {
     path: "/back/socket.io"

mobile/traque-app/src/services/socket/emitters.js

@@ -1,5 +1,5 @@
 // Services
-import { socket } from "./connection";
+import { socket } from "@/services/socket/connection";
 
 const customEmit = (event, ...args) => {
     if (!socket?.connected) return false;
@@ -21,7 +21,8 @@ const customEmitCallback = (event, ...args) => {
     
         socket.emit(event, ...args, (response) => {
             clearTimeout(timeout);
-            resolve(response.length > 1 ? response : response[0]);
+            console.log("Received : ", response);
+            resolve(response);
         });
     });
 };

mobile/traque-app/src/services/tasks/backgroundLocation.js

@@ -2,9 +2,9 @@
 import { defineTask, isTaskRegisteredAsync } from "expo-task-manager";
 import * as Location from 'expo-location';
 // Services
-import { emitUpdatePosition } from "../socket/emitters";
+import { emitUpdatePosition } from "@/services/socket/emitters";
 // Constants
-import { TASKS, LOCATION_PARAMETERS } from "../../constants";
+import { TASKS, LOCATION_PARAMETERS } from "@/constants";
 
 
 // Task
@@ -15,6 +15,7 @@ defineTask(TASKS.BACKGROUND_LOCATION, async ({ data, error }) => {
         return;
     }
     if (data) {
+        // @ts-ignore
         const { locations } = data;
         if (locations.length == 0) {
             console.log("No location measured.");