Traduction + alias + routing + refactoring

2026-04-11 00:30:19 +02:00 · 2026-02-20 22:00:54 +01:00
parent 776bbcd723
commit 76ee9674de
50 changed files with 2978 additions and 1746 deletions
--- a/mobile/traque-app/src/components/button.jsx
+++ b/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,
-    },
-});
--- a/mobile/traque-app/src/components/common/Drawer.jsx
+++ b/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,
+    }
+});
--- a/mobile/traque-app/src/components/common/IconButton.jsx
+++ b/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%",
+    },
+});
--- a/mobile/traque-app/src/components/common/Image.jsx
+++ b/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 }) => {
-    // canZoom : boolean
+export const TouchableImage = ({ source, onPress }) => {
+
+    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}
            />
--- a/mobile/traque-app/src/components/common/Input.jsx
+++ b/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}
--- a/mobile/traque-app/src/components/common/Layers.jsx
+++ b/mobile/traque-app/src/components/common/Layers.jsx
@@ -1,7 +1,25 @@
 // React
 import { Fragment } from 'react';
-import { Polygon } from 'react-native-maps';
-import { circleToPolygon } from '../utils/functions';
+import { Image } from 'react-native';
+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}
--- a/mobile/traque-app/src/components/common/Map.jsx
+++ b/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'
+    },
+});
--- a/mobile/traque-app/src/components/common/Show.jsx
+++ b/mobile/traque-app/src/components/common/Show.jsx
@@ -0,0 +1,3 @@
+export const Show = ({ when, children }) => {
+    return when ? children : null;
+};
--- a/mobile/traque-app/src/components/common/Timer.jsx
+++ b/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"
+    }
+});
--- a/mobile/traque-app/src/components/drawer.jsx
+++ b/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'
-    },
-});
--- a/mobile/traque-app/src/components/game/Header.jsx
+++ b/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"
+    }
+});
--- a/mobile/traque-app/src/components/game/MapLayers.jsx
+++ b/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]);
+};
--- a/mobile/traque-app/src/components/game/TargetInfoDrawer.jsx
+++ b/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'
+    },
+});
--- a/mobile/traque-app/src/components/game/TeamStats.jsx
+++ b/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"
+    }
+});
--- a/mobile/traque-app/src/components/game/Toasts.jsx
+++ b/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
+    },
+});
--- a/mobile/traque-app/src/components/map.jsx
+++ b/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
-    }
-});
--- a/mobile/traque-app/src/components/stat.jsx
+++ b/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>
-    );
-};
--- a/mobile/traque-app/src/components/timer.jsx
+++ b/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',
-    }
-});
--- a/mobile/traque-app/src/constants/game.js
+++ b/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"
--- a/mobile/traque-app/src/contexts/authContext.jsx
+++ b/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(() => {
--- a/mobile/traque-app/src/contexts/teamContext.jsx
+++ b/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(() => {
--- a/mobile/traque-app/src/hooks/useLocation.jsx
+++ b/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) => setLocation(location.coords)
+                LOCATION_PARAMETERS.LOCAL,
+                (location) => setLocation([location.coords.latitude, location.coords.longitude])
            );
        };

--- a/mobile/traque-app/src/hooks/usePickImage.jsx
+++ b/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 };
 };
--- a/mobile/traque-app/src/hooks/useTimeDelta.jsx
+++ b/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;
+};
--- a/mobile/traque-app/src/hooks/useTimeDifference.jsx
+++ b/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];
-};
--- a/mobile/traque-app/src/hooks/useUserState.jsx
+++ b/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]);
+};
--- a/mobile/traque-app/src/i18n/config.js
+++ b/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;
--- a/mobile/traque-app/src/i18n/locales/en.json
+++ b/mobile/traque-app/src/i18n/locales/en.json
@@ -0,0 +1,3 @@
+{
+
+}
--- a/mobile/traque-app/src/i18n/locales/fr.json
+++ b/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."
+        }
+    }
+}
--- a/mobile/traque-app/src/services/api/image.js
+++ b/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}`};
 };
--- a/mobile/traque-app/src/services/socket/connection.js
+++ b/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"
--- a/mobile/traque-app/src/services/socket/emitters.js
+++ b/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);
        });
    });
 };
--- a/mobile/traque-app/src/services/tasks/backgroundLocation.js
+++ b/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.");
--- a/mobile/traque-app/src/utils/functions.js
+++ b/mobile/traque-app/src/utils/functions.js
@@ -24,7 +24,7 @@ export const secondsToMMSS = (seconds) => {
    return strMinutes.padStart(2,"0") + ":" + strSeconds.padStart(2,"0");
 };

-export const  secondsToHHMMSS = (seconds) => {
+export const secondsToHHMMSS = (seconds) => {
    if (!Number.isInteger(seconds)) return "Inconnue";
    if (seconds < 0) seconds = 0;
    const strHours = String(Math.floor(seconds / 3600));