public/traque
1
0
Fork 0
mirror of https://git.rezel.net/LudoTech/traque.git synced 2026-04-10 16:30:18 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Traduction + alias + routing + refactoring

Browse Source
This commit is contained in:
Sebastien Riviere
2026-02-20 22:00:54 +01:00
parent 776bbcd723
commit 76ee9674de
50 changed files with 2978 additions and 1746 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
mobile/traque-app/.eslintrc.js
View File

@@ -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: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
"node": {
"extensions": ['.js', '.jsx', '.ts', '.tsx'],
}
},
}
};

8
mobile/traque-app/app/(auth)/_layout.jsx Normal file
View File

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

7
mobile/traque-app/app/(auth)/location-permission.jsx Normal file
View File

@@ -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;

132
mobile/traque-app/app/(auth)/login.jsx Normal file
View File

@@ -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,
},
});

8
mobile/traque-app/app/(game)/_layout.jsx Normal file
View File

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

31
mobile/traque-app/app/(game)/end.jsx Normal file
View File

@@ -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,
}
});

110
mobile/traque-app/app/(game)/play.jsx Normal file
View File

@@ -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,
}
});

31
mobile/traque-app/app/(game)/wait.jsx Normal file
View File

@@ -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,
}
});

79
mobile/traque-app/app/_layout.jsx
View File

@@ -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 { TeamProvider } from "../src/contexts/teamContext";
import { AuthProvider } from "@/contexts/authContext";
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;

118
mobile/traque-app/app/index.jsx
View File

@@ -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();
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>
);
return null;
};
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',
}
});

179
mobile/traque-app/app/interface.jsx
View File

@@ -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',
},
});

5
mobile/traque-app/assets.d.ts vendored Normal file
View File

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

17
mobile/traque-app/babel.config.js Normal file
View File

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

13
mobile/traque-app/jsconfig.json Normal file
View File

@@ -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"],
}

2646
mobile/traque-app/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
mobile/traque-app/package.json
View File

@@ -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",

39
mobile/traque-app/src/components/button.jsx
View File

@@ -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,
},
});

67
mobile/traque-app/src/components/common/Drawer.jsx Normal file
View File

@@ -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,
}
});

23
mobile/traque-app/src/components/common/IconButton.jsx Normal file
View File

@@ -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%",
},
});

15
mobile/traque-app/src/components/image.jsx → mobile/traque-app/src/components/common/Image.jsx
View File

@@ -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}
/>

2
mobile/traque-app/src/components/input.jsx → mobile/traque-app/src/components/common/Input.jsx
View File

@@ -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}

24
mobile/traque-app/src/components/layer.jsx → mobile/traque-app/src/components/common/Layers.jsx
View File

@@ -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}

57
mobile/traque-app/src/components/common/Map.jsx Normal file
View File

@@ -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'
},
});

3
mobile/traque-app/src/components/common/Show.jsx Normal file
View File

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

30
mobile/traque-app/src/components/common/Timer.jsx Normal file
View File

@@ -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"
}
});

177
mobile/traque-app/src/components/drawer.jsx
View File

@@ -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'
},
});

46
mobile/traque-app/src/components/game/Header.jsx Normal file
View File

@@ -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"
}
});

93
mobile/traque-app/src/components/game/MapLayers.jsx Normal file
View File

@@ -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]);
};

105
mobile/traque-app/src/components/game/TargetInfoDrawer.jsx Normal file
View File

@@ -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'
},
});

75
mobile/traque-app/src/components/game/TeamStats.jsx Normal file
View File

@@ -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"
}
});

80
mobile/traque-app/src/components/game/Toasts.jsx Normal file
View File

@@ -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
},
});

171
mobile/traque-app/src/components/map.jsx
View File

@@ -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
}
});

13
mobile/traque-app/src/components/stat.jsx
View File

@@ -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>
);
};

20
mobile/traque-app/src/components/timer.jsx
View File

@@ -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',
}
});

11
mobile/traque-app/src/constants/game.js
View File

@@ -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"

8
mobile/traque-app/src/contexts/authContext.jsx
View File

@@ -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(() => {

8
mobile/traque-app/src/contexts/teamContext.jsx
View File

@@ -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(() => {

6
mobile/traque-app/src/hooks/useLocation.jsx
View File

@@ -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])
);
};

8
mobile/traque-app/src/hooks/usePickImage.jsx
View File

@@ -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 };
};

61
mobile/traque-app/src/hooks/useTimeDelta.jsx Normal file
View File

@@ -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;
};

24
mobile/traque-app/src/hooks/useTimeDifference.jsx
View File

@@ -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];
};

43
mobile/traque-app/src/hooks/useUserState.jsx Normal file
View File

@@ -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]);
};

26
mobile/traque-app/src/i18n/config.js Normal file
View File

@@ -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;

3
mobile/traque-app/src/i18n/locales/en.json Normal file
View File

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

61
mobile/traque-app/src/i18n/locales/fr.json Normal file
View File

@@ -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."
}
}
}

5
mobile/traque-app/src/services/api/image.js
View File

@@ -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}`};
};

2
mobile/traque-app/src/services/socket/connection.js
View File

@@ -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"

5
mobile/traque-app/src/services/socket/emitters.js
View File

@@ -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);
});
});
};

5
mobile/traque-app/src/services/tasks/backgroundLocation.js
View File

@@ -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.");

2
mobile/traque-app/src/utils/functions.js
View File

@@ -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));