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

Server heavy refactoring 4 (not functionnal)

Browse Source
This commit is contained in:
Sebastien Riviere
2026-03-12 23:17:21 +01:00
parent e1b6c0e0c5
commit 1389dce132
95 changed files with 5320 additions and 27986 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,57 +0,0 @@
module.exports = {
"env": {
"es2021": true,
"node": true,
"react-native/react-native": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:import/recommended"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react",
"react-native"
],
"ignorePatterns": [
"android/",
".expo/",
"node_modules/",
"src/assets/",
],
"rules": {
"react/react-in-jsx-scope": "off",
"react/prop-types": "off",
"no-unused-vars": "warn",
"semi": ["error", "always"],
"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": {
"version": "detect"
},
"import/ignore": [
"react-native"
],
'import/resolver': {
"node": {
"extensions": ['.js', '.jsx', '.ts', '.tsx'],
}
},
}
};

9
mobile/traque-app/app/(game)/_layout.jsx
View File

@@ -9,13 +9,12 @@ import { useTeam } from '@/contexts/teamContext';
// Components
import { IconButton } from '@/components/common/IconButton';
// Constants
import { COLORS } from '@/constants';
import { COLORS } from '@/config';
const GameLayout = () => {
const { t, i18n } = useTranslation();
const { logout } = useAuth();
const { teamInfos } = useTeam();
const { name } = teamInfos;
const { teamName } = useTeam();
const toggleLanguage = () => {
i18n.changeLanguage(i18n.language === 'fr' ? 'en' : 'fr');
@@ -31,13 +30,11 @@ const GameLayout = () => {
}
};
formatText("les minions du bds qui gagne");
return (
<View style={styles.globalContainer}>
<View style={styles.headerContainer}>
<IconButton style={styles.logoutIcon} source={require('@/assets/images/logout.png')} onPress={logout} />
<Text style={styles.name} numberOfLines={1} adjustsFontSizeToFit>{formatText(name, 22)}</Text>
<Text style={styles.name} numberOfLines={1} adjustsFontSizeToFit>{formatText(teamName, 22)}</Text>
<IconButton style={styles.traductionIcon} source={require('@/assets/images/language.png')} onPress={toggleLanguage} />
</View>
<Slot/>

4
mobile/traque-app/app/(game)/end.jsx
View File

@@ -2,12 +2,11 @@
import { Text, StyleSheet, ScrollView } from 'react-native';
import { useTranslation } from 'react-i18next';
// Components
import { TeamStats } from '@/components/game/TeamStats';
import { Show } from '@/components/common/Show';
// Hook
import { useUserState } from '@/hooks/useUserState';
// Constants
import { USER_STATE } from '@/constants';
import { USER_STATE } from '@/config';
/*
const Leaderboard = ({ teams }) => {
@@ -91,7 +90,6 @@ const End = () => {
<Text style={styles.title}>{t("end.title_win")}</Text>
</Show>
<Text style={styles.subtitle}>{t("end.paragraph")}</Text>
<TeamStats/>
</ScrollView>
);
};

18
mobile/traque-app/app/(game)/play.jsx
View File

@@ -17,14 +17,14 @@ import { useTeam } from '@/contexts/teamContext';
// Hooks
import { useUserState } from '@/hooks/useUserState';
// Services
import { emitSendPosition } from '@/services/socket/emitters';
import { emitLocation } from '@/services/socket/emitters';
// Constants
import { USER_STATE } from '@/constants';
import { USER_STATE } from '@/config';
const Play = () => {
const { t } = useTranslation();
const { teamInfos, nextZoneDate } = useTeam();
const { locationSendDeadline, hasHandicap, enemyLocation, lastSentLocation } = teamInfos;
const { teamStateData } = useTeam();
const { zoneTransitionDate, scanDate, hasHandicap, scanLocation, targetScanLocation } = teamStateData;
const userState = useUserState();
const [bottomContainerHeight, setBottomContainerHeight] = useState(0);
@@ -35,8 +35,8 @@ const Play = () => {
</Show>
<Show when={userState == USER_STATE.PLAYING}>
<View style={styles.timerContainer}>
<TimerMMSS style={styles.timer} title={t("play.info.zone_reduction_label")} date={nextZoneDate} />
<TimerMMSS style={styles.timer} title={t("play.info.send_position_label")} date={locationSendDeadline} />
<TimerMMSS style={styles.timer} title={t("play.info.zone_reduction_label")} date={zoneTransitionDate} />
<TimerMMSS style={styles.timer} title={t("play.info.send_position_label")} date={scanDate} />
</View>
</Show>
<View style={styles.mapContainer} onLayout={(event) => setBottomContainerHeight(event.nativeEvent.layout.height)}>
@@ -48,13 +48,13 @@ const Play = () => {
<GameZone/>
</Show>
<Show when={userState == USER_STATE.PLAYING && !hasHandicap}>
<PositionMarker position={lastSentLocation} color={"grey"} onPress={() => Alert.alert(t("play.map.previous_marker_title"), t("play.map.previous_marker_description"))} />
<PositionMarker position={enemyLocation} color={"red"} onPress={() => Alert.alert(t("play.map.enemy_marker_title"), t("play.map.enemy_marker_description"))} />
<PositionMarker position={scanLocation} color={"grey"} onPress={() => Alert.alert(t("play.map.previous_marker_title"), t("play.map.previous_marker_description"))} />
<PositionMarker position={targetScanLocation} color={"red"} onPress={() => Alert.alert(t("play.map.enemy_marker_title"), t("play.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} />
<IconButton style={styles.updatePosition} source={require("@/assets/images/update_position.png")} onPress={emitLocation} />
</Show>
<Toasts/>
</View>

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

@@ -11,7 +11,7 @@ import { useUserState } from '@/hooks/useUserState';
// Services
import { startLocationTracking , stopLocationTracking } from '@/services/tasks/backgroundLocation';
// Constants
import { USER_STATE, COLORS } from '@/constants';
import { USER_STATE, COLORS } from '@/config';
// Traduction
import '@/i18n/config';

44
mobile/traque-app/eslint.config.mjs Normal file
View File

@@ -0,0 +1,44 @@
import js from "@eslint/js";
import globals from "globals";
import reactPlugin from "eslint-plugin-react";
import reactHooksPlugin from "eslint-plugin-react-hooks";
export default [
{
ignores: [".expo/*", "android/*", "ios/*", "keys/*", "node_modules/*", "src/assets/*", "babel.config.js"],
},
js.configs.recommended,
{
files: ["**/*.{js,jsx,mjs}"],
plugins: {
"react": reactPlugin,
"react-hooks": reactHooksPlugin,
},
languageOptions: {
ecmaVersion: "latest",
sourceType: "module",
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
globals: {
...globals.browser,
...globals.node,
},
},
settings: {
react: {
version: "detect",
},
},
rules: {
...reactPlugin.configs.recommended.rules,
...reactHooksPlugin.configs.recommended.rules,
"react/react-in-jsx-scope": "off",
"react/prop-types": "off",
"semi": ["error", "always"],
"no-unused-vars": "warn",
},
},
];

9
mobile/traque-app/jsconfig.json
View File

@@ -1,13 +1,12 @@
{
"compilerOptions": {
"baseUrl": ".",
"paths": { "@/*": ["src/*"] },
"jsx": "react-native",
"checkJs": true,
"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"],
}

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

File diff suppressed because it is too large Load Diff

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

@@ -13,7 +13,6 @@
"@react-native-async-storage/async-storage": "1.23.1",
"@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",
@@ -34,7 +33,6 @@
"react-native": "0.76.9",
"react-native-collapsible": "^1.6.2",
"react-native-device-info": "^14.0.4",
"react-native-dotenv": "^3.4.11",
"react-native-gesture-handler": "~2.20.2",
"react-native-image-picker": "^4.0.6",
"react-native-image-viewing": "^0.2.2",
@@ -47,11 +45,12 @@
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@eslint/js": "^9.39.4",
"@react-native-community/cli": "latest",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.32.0",
"eslint": "^9.39.4",
"eslint-plugin-react": "^7.37.5",
"eslint-plugin-react-native": "^5.0.0"
"eslint-plugin-react-hooks": "^7.0.1",
"globals": "^17.4.0"
},
"private": true
}

2
mobile/traque-app/src/components/common/Drawer.jsx
View File

@@ -4,7 +4,7 @@ import { ScrollView, View, Image, StyleSheet, TouchableHighlight } from 'react-n
import Collapsible from 'react-native-collapsible';
import LinearGradient from 'react-native-linear-gradient';
// Constants
import { COLORS } from '@/constants';
import { COLORS } from '@/config';
export const Drawer = ({ contentContainerStyle = {}, height, children }) => {
const [collapsibleState, setCollapsibleState] = useState(true);

2
mobile/traque-app/src/components/common/Map.jsx
View File

@@ -9,7 +9,7 @@ import { Show } from '@/components/common/Show';
// Hook
import { useLocation } from '@/hooks/useLocation';
// Util
import { INITIAL_REGIONS } from '@/constants';
import { INITIAL_REGIONS } from '@/config';
export const Map = ({ children }) => {
const { location } = useLocation();

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

@@ -1,30 +1,24 @@
// React
import { useMemo } from 'react';
import { Circle, Polygon } from 'react-native-maps';
import { 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';
import { ZONE_TYPES } from '@/config';
export const StartZone = () => {
const { teamInfos } = useTeam();
const { startingArea } = teamInfos;
const { teamStateData } = useTeam();
const { placementZone } = teamStateData;
return useMemo(() => {
if (!startingArea) return null;
if (!placementZone) 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)`}
/>
<Polygon coordinates={placementZone} strokeWidth={2} strokeColor={`rgba(0, 0, 255, 1)`} fillColor={`rgba(0, 0, 255, 0.2)`} />
);
}, [startingArea]);
}, [placementZone]);
};
const latToLatitude = (pos) => ({latitude: pos.lat, longitude: pos.lng});

10
mobile/traque-app/src/components/game/TargetInfoDrawer.jsx
View File

@@ -7,7 +7,6 @@ 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';
@@ -19,8 +18,8 @@ import { IconButton } from '../common/IconButton';
export const TargetInfoDrawer = ({ height }) => {
const { t } = useTranslation();
const { teamId } = useAuth();
const { teamInfos } = useTeam();
const { enemyName, captureCode, name, hasHandicap } = teamInfos;
const { teamName, teamStateData } = useTeam();
const { targetName, captureCode, hasHandicap } = teamStateData;
const [enemyCaptureCode, setEnemyCaptureCode] = useState("");
const [isCapturing, setIsCapturing] = useState(false);
@@ -49,10 +48,10 @@ export const TargetInfoDrawer = ({ height }) => {
return (
<Drawer contentContainerStyle={styles.drawer} height={height}>
<Text style={styles.teamCode}>{t("play.drawer.capture_code", {name: name ?? t("common.no_value"), code: String(captureCode).padStart(4,"0")})}</Text>
<Text style={styles.teamCode}>{t("play.drawer.capture_code", {name: teamName ?? t("common.no_value"), code: String(captureCode).padStart(4,"0")})}</Text>
<Show when={!hasHandicap}>
<View style={styles.targetContainer}>
<Text style={styles.targetName}>{t("play.drawer.target_name", {name: enemyName ?? t("common.no_value")})}</Text>
<Text style={styles.targetName}>{t("play.drawer.target_name", {name: targetName ?? t("common.no_value")})}</Text>
<ExpandableImage source={enemyImage(teamId)}/>
</View>
<View style={styles.captureContainer}>
@@ -60,7 +59,6 @@ export const TargetInfoDrawer = ({ height }) => {
<IconButton style={styles.captureButton} source={require("@/assets/images/target/white.png")} onPress={handleCapture} />
</View>
</Show>
<TeamStats/>
</Drawer>
);
};

4
mobile/traque-app/src/components/game/TeamStats.jsx
View File

@@ -22,8 +22,8 @@ const Stat = ({ children, source, description }) => {
export const TeamStats = () => {
const { t } = useTranslation();
const { teamInfos, startDate } = useTeam();
const { distance, finishDate, nCaptures, nSentLocation } = teamInfos;
const { teamInfos, startDate } = useTeam(); // TODO : outdated variables
const { distance, finishDate, nCaptures, nSentLocation } = teamInfos; // TODO : outdated variables
const timeSinceGameStart = useTimeSinceSeconds(startDate);
const avgSpeed = useMemo(() => {

18
mobile/traque-app/src/components/game/Toasts.jsx
View File

@@ -8,40 +8,40 @@ import { useUserState } from '@/hooks/useUserState';
// Util
import { secondsToMMSS } from '@/utils/functions';
// Constants
import { USER_STATE } from '@/constants';
import { USER_STATE } from '@/config';
import { useCountdownSeconds } from '@/hooks/useTimeDelta';
export const Toasts = () => {
const { t } = useTranslation();
const { teamInfos } = useTeam();
const { outOfZone, outOfZoneDeadline, hasHandicap, enemyHasHandicap, ready } = teamInfos;
const { teamStateData } = useTeam();
const { isOutOfZone, handicapDate, hasHandicap, targetHasHandicap, isInPlacementZone } = teamStateData;
const userState = useUserState();
const outOfZoneTimeLeft = useCountdownSeconds(outOfZoneDeadline);
const outOfZoneTimeLeft = useCountdownSeconds(handicapDate);
const toastData = [
{
condition: userState === USER_STATE.PLACEMENT,
id: 'placement',
text: ready ? t("play.toast.placed") : t("play.toast.not_placed"),
toastColor: ready ? "rgb(25, 165, 25)" : "rgb(204, 51, 51)" ,
text: isInPlacementZone ? t("play.toast.placed") : t("play.toast.not_placed"),
toastColor: isInPlacementZone ? "rgb(25, 165, 25)" : "rgb(204, 51, 51)" ,
textColor: "white"
},
{
condition: userState === USER_STATE.PLAYING && !outOfZone && enemyHasHandicap,
condition: userState === USER_STATE.PLAYING && !isOutOfZone && targetHasHandicap,
id: 'enemy_revealed',
text: t("play.toast.enemy_position_revealed"),
toastColor: "white",
textColor: "black"
},
{
condition: userState === USER_STATE.PLAYING && outOfZone && hasHandicap,
condition: userState === USER_STATE.PLAYING && isOutOfZone && hasHandicap,
id: 'out_of_zone',
text: `${t("play.toast.go_in_zone")}\n${t("play.toast.team_position_revealed")}`,
toastColor: "white",
textColor: "black"
},
{
condition: userState === USER_STATE.PLAYING && outOfZone && !hasHandicap,
condition: userState === USER_STATE.PLAYING && isOutOfZone && !hasHandicap,
id: 'has_handicap',
text: `${t("play.toast.go_in_zone")}\n${t("play.toast.out_of_zone_message", {time: secondsToMMSS(outOfZoneTimeLeft)})}`,
toastColor: "white",

0
mobile/traque-app/src/constants/colors.js → mobile/traque-app/src/config/colors.js
View File

0
mobile/traque-app/src/constants/game.js → mobile/traque-app/src/config/game.js
View File

2
mobile/traque-app/src/constants/index.js → mobile/traque-app/src/config/index.js
View File

@@ -1,4 +1,4 @@
export * from './config';
export * from './server';
export * from './game';
export * from './map';
export * from './colors';

0
mobile/traque-app/src/constants/map.js → mobile/traque-app/src/config/map.js
View File

0
mobile/traque-app/src/constants/config.js → mobile/traque-app/src/config/server.js
View File

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

@@ -1,51 +1,45 @@
// React
import { createContext, useContext, useState, useEffect, useCallback, useMemo } from "react";
import DeviceInfo from 'react-native-device-info';
import { createContext, useContext, useState, useCallback, useMemo } from "react";
// Hook
import { useLocalStorage } from '@/hooks/useLocalStorage';
// Services
import { emitLogin, emitLogout, emitBattery, emitDeviceInfo } from "@/services/socket/emitters";
import { emitLogin, emitLogout } from "@/services/socket/emitters";
const AuthContext = createContext(null);
export const AuthProvider = ({ children }) => {
const [loggedIn, setLoggedIn] = useState(false);
const [teamId, setTeamId] = useLocalStorage("team_id", null);
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [savedTeamId, setSavedTeamId] = useLocalStorage("team_id", null);
const login = useCallback(async (password) => {
if (loggedIn != false) return;
try {
const response = await emitLogin(password);
setLoggedIn(response.isLoggedIn);
if (response.isLoggedIn) setTeamId(password);
return response.isLoggedIn;
} catch (error) {
setLoggedIn(false);
throw error;
const login = useCallback(async (teamId) => {
if (isLoggedIn) return;
if (await emitLogin(teamId)) {
setIsLoggedIn(true);
setSavedTeamId(teamId);
return true;
} else {
return false;
}
}, [loggedIn, setTeamId]);
}, [isLoggedIn, setSavedTeamId]);
const logout = useCallback(() => {
if (loggedIn != true) return;
setLoggedIn(false);
setTeamId(null);
if (!isLoggedIn) return;
setIsLoggedIn(false);
setSavedTeamId(null);
emitLogout();
}, [loggedIn, setTeamId]);
}, [isLoggedIn, setSavedTeamId]);
/*
// Try to log in with saved teamId
// Try to log in with saved savedTeamId
useEffect(() => {
if (!loggedIn && teamId) {
login(teamId);
if (!isLoggedIn && savedTeamId) {
login(savedTeamId);
}
}, [loggedIn, teamId, login]);
*/
}, [isLoggedIn, savedTeamId, login]);
// Emit battery level and phone model at log in
useEffect(() => {
if (!loggedIn) return;
if (!isLoggedIn) return;
const sendInfo = async () => {
const [brand, model, name] = await Promise.all([
@@ -66,9 +60,10 @@ export const AuthProvider = ({ children }) => {
const batteryCheckInterval = setInterval(() => sendBattery(), 5*60*1000); // 5 minutes
return () => clearInterval(batteryCheckInterval);
}, [loggedIn]);
}, [isLoggedIn]);
*/
const value = useMemo(() => ({ teamId, loggedIn, login, logout}), [teamId, loggedIn, login, logout]);
const value = useMemo(() => ({ savedTeamId, isLoggedIn, login, logout }), [savedTeamId, isLoggedIn, login, logout]);
return (
<AuthContext.Provider value={value}>

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

@@ -5,7 +5,7 @@ import { useAuth } from "@/contexts/authContext";
// Services
import { socket } from "@/services/socket/connection";
// Constants
import { GAME_STATE } from "@/constants";
import { GAME_STATE } from "@/config";
const TeamContext = createContext(null);
@@ -18,47 +18,25 @@ const useOnEvent = (event, callback) => {
}, [event, callback]);
};
export const TeamProvider = ({children}) => {
export const TeamProvider = ({ children }) => {
const { logout } = useAuth();
// update_team
const [teamInfos, setTeamInfos] = useState({});
// game_state
const [gameState, setGAME_STATE] = useState(GAME_STATE.SETUP);
const [startDate, setStartDate] = useState(null);
// current_zone
const [zoneExtremities, setZoneExtremities] = useState(null);
const [nextZoneDate, setNextZoneDate] = useState(null);
// settings
const [messages, setMessages] = useState(null);
const [zoneType, setZoneType] = useState(null);
const [teamId, setTeamId] = useState(null);
const [teamName, setTeamName] = useState(null);
const [gameState, setGameState] = useState(GAME_STATE.SETUP);
const [teamStateData, setTeamStateData] = useState({});
useOnEvent("update_team", (data) => {
setTeamInfos(teamInfos => ({...teamInfos, ...data}));
});
useOnEvent("game_state", (data) => {
setGAME_STATE(data.state);
setStartDate(data.date);
});
useOnEvent("settings", (data) => {
setMessages(data.messages);
setZoneType(data.zone.type);
//TODO
//setSendPositionDelay(data.sendPositionDelay);
//setOutOfZoneDelay(data.outOfZoneDelay);
});
useOnEvent("current_zone", (data) => {
setZoneExtremities({begin: data.begin, end: data.end});
setNextZoneDate(data.endDate);
useOnEvent("update-full", ({ id, name, gameState, stateData }) => {
setTeamId(id);
setTeamName(name);
setGameState(gameState);
setTeamStateData(stateData);
});
useOnEvent("logout", logout);
const value = useMemo(() => (
{teamInfos, gameState, startDate, zoneType, zoneExtremities, nextZoneDate, messages}
), [teamInfos, gameState, startDate, zoneType, zoneExtremities, nextZoneDate, messages]);
{ teamId, teamName, gameState, teamStateData }
), [teamId, teamName, gameState, teamStateData]);
return (
<TeamContext.Provider value={value}>

2
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 '@/config';
export const useLocation = () => {
const [location, setLocation] = useState(null);

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

@@ -2,29 +2,21 @@
import { useState, useEffect } from 'react';
export const useCountdownSeconds = (date) => {
const [time, setTime] = useState(0);
const getSecondsTo = (newDate) => !newDate ? 0 : Math.max(0, Math.floor((newDate - Date.now()) / 1000));
const [time, setTime] = useState(() => getSecondsTo(date));
const [prevDate, setPrevDate] = useState(date);
if (date !== prevDate) {
setPrevDate(date);
setTime(getSecondsTo(date));
}
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);
const interval = setInterval(() => {
const seconds = getSecondsTo(date);
setTime(seconds);
if (seconds === 0) clearInterval(interval);
}, 1000);
return () => clearInterval(interval);
}, [date]);
@@ -33,26 +25,17 @@ export const useCountdownSeconds = (date) => {
};
export const useTimeSinceSeconds = (date) => {
const [time, setTime] = useState(0);
const getSecondsTo = (newDate) => !newDate ? 0 : Math.max(0, Math.floor((Date.now() - newDate) / 1000));
const [time, setTime] = useState(() => getSecondsTo(date));
const [prevDate, setPrevDate] = useState(date);
if (date !== prevDate) {
setPrevDate(date);
setTime(getSecondsTo(date));
}
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);
const interval = setInterval(() => setTime(getSecondsTo(date)), 1000);
return () => clearInterval(interval);
}, [date]);

16
mobile/traque-app/src/hooks/useUserState.jsx
View File

@@ -4,13 +4,13 @@ import { useState, useEffect, useMemo } from "react";
import { useAuth } from "@/contexts/authContext";
import { useTeam } from "@/contexts/teamContext";
// Constants
import { GAME_STATE, USER_STATE } from '@/constants';
import { GAME_STATE, USER_STATE } from '@/config';
import { getLocationAuthorization } from '@/services/tasks/backgroundLocation';
export const useUserState = () => {
const { loggedIn } = useAuth();
const { teamInfos, gameState } = useTeam();
const { captured } = teamInfos;
const { isLoggedIn } = useAuth();
const { teamStateData, gameState } = useTeam();
const { isEliminated } = teamStateData;
const [isLocationAuthorized, setIsLocationAuthorized] = useState(null);
useEffect(() => {
@@ -25,7 +25,7 @@ export const useUserState = () => {
return useMemo(() => {
if (isLocationAuthorized == null) return USER_STATE.LOADING;
if (!isLocationAuthorized) return USER_STATE.NO_LOCATION;
if (!loggedIn) return USER_STATE.OFFLINE;
if (!isLoggedIn) return USER_STATE.OFFLINE;
switch (gameState) {
case GAME_STATE.SETUP:
@@ -33,11 +33,11 @@ export const useUserState = () => {
case GAME_STATE.PLACEMENT:
return USER_STATE.PLACEMENT;
case GAME_STATE.PLAYING:
return captured ? USER_STATE.CAPTURED : USER_STATE.PLAYING;
return isEliminated ? USER_STATE.CAPTURED : USER_STATE.PLAYING;
case GAME_STATE.FINISHED:
return captured ? USER_STATE.CAPTURED : USER_STATE.FINISHED;
return isEliminated ? USER_STATE.CAPTURED : USER_STATE.FINISHED;
default:
return USER_STATE.WAITING;
}
}, [loggedIn, gameState, captured, isLocationAuthorized]);
}, [isLoggedIn, gameState, isEliminated, isLocationAuthorized]);
};

9
mobile/traque-app/src/i18n/config.js
View File

@@ -1,14 +1,9 @@
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({
i18n.use(initReactI18next).init({
resources: {
en: { translation: en },
fr: { translation: fr }
@@ -21,6 +16,6 @@ i18n
react: {
useSuspense: false
}
});
});
export default i18n;

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

@@ -1,5 +1,5 @@
// Constants
import { SERVER_URL } from "@/constants";
import { SERVER_URL } from "@/config";
export const uploadTeamImage = async (id, imageUri) => {
if (!imageUri || !id) return;

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 "@/config";
export const socket = io(SOCKET_URL, {
path: "/back/socket.io"

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

@@ -35,22 +35,14 @@ export const emitLogout = () => {
return customEmit("logout");
};
export const emitSendPosition = () => {
return customEmit("send_position");
export const emitLocation = (location) => {
return customEmit("scan", location);
};
export const emitUpdatePosition = (location) => {
return customEmit("update_position", location);
export const emitScan = (location) => {
return customEmit("location", location);
};
export const emitCapture = (captureCode) => {
return customEmitCallback("capture", captureCode);
};
export const emitBattery = (level) => {
return customEmit("battery_update", level);
};
export const emitDeviceInfo = (infos) => {
return customEmit("device_info", infos);
};

6
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 "@/services/socket/emitters";
import { emitScan } from "@/services/socket/emitters";
// Constants
import { TASKS, LOCATION_PARAMETERS } from "@/constants";
import { TASKS, LOCATION_PARAMETERS } from "@/config";
// Task
@@ -22,7 +22,7 @@ defineTask(TASKS.BACKGROUND_LOCATION, async ({ data, error }) => {
return;
}
const { latitude, longitude } = locations[0].coords;
emitUpdatePosition([latitude, longitude]);
emitScan([latitude, longitude]);
}
});

6
server/package-lock.json generated
View File

@@ -1,6 +0,0 @@
{
"name": "server",
"lockfileVersion": 3,
"requires": true,
"packages": {}
}

1
server/package.json
View File

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

23
server/traque-back/eslint.config.mjs Normal file
View File

@@ -0,0 +1,23 @@
import js from "@eslint/js";
import globals from "globals";
export default [
{
ignores: ["node_modules/*", "dist/*", "logs/*"],
},
js.configs.recommended,
{
files: ["**/*.{js,mjs}"],
languageOptions: {
ecmaVersion: "latest",
sourceType: "module",
globals: {
...globals.node,
},
},
rules: {
"semi": ["error", "always"],
"no-unused-vars": "warn",
},
},
];

906
server/traque-back/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
server/traque-back/package.json
View File

@@ -19,5 +19,10 @@
"multer": "^1.4.5-lts.1",
"random-location": "^1.1.3",
"socket.io": "^4.7.5"
},
"devDependencies": {
"@eslint/js": "^10.0.1",
"eslint": "^10.0.3",
"globals": "^17.4.0"
}
}

1
server/traque-back/src/config/events.js
View File

@@ -4,7 +4,6 @@ export const PLAYER_HANDLER_EVENTS = {
LOCATION: "location",
SCAN: "scan",
CAPTURE: "capture",
DEVICE: "device",
};
export const ADMIN_HANDLER_EVENTS = {

3
server/traque-back/src/config/game.js
View File

@@ -1,3 +1,4 @@
/* eslint-disable no-unused-vars */
import { DEFAULT_ZONES_SETTINGS } from "#config/zone.js";
import { DefaultState, PlacementState, PlayingState, FinishedState } from '#core/states/game/index.js';
@@ -36,7 +37,7 @@ export const DEFAULT_GAME_SETTINGS = {
placementZones: {},
scanDelay: 10 * 60 * 1000, // ms
outOfZoneDelay: 5 * 60 * 1000 // ms
}
};
export const TEAM_ID_LENGTH = 6;
export const CAPTURE_CODE_LENGTH = 4;

2
server/traque-back/src/core/managers/team_manager.js
View File

@@ -32,7 +32,7 @@ export class TeamManager {
add(teamName) {
if (!Team.isTeamNameValid(teamName)) return null;
let id; do { id = Team.getNewTeamId() } while (this.has(id));
let id; do { id = Team.getNewTeamId(); } while (this.has(id));
const team = new Team(id, teamName);
if (!this.has(id)) this.order.push(id);
this._map.set(id, team);

6
server/traque-back/src/core/models/team.js
View File

@@ -9,15 +9,15 @@ export class Team {
this.state = null;
}
static isTeamNameValid = (teamName) => {
static isTeamNameValid(teamName) {
return typeof teamName === 'string' && teamName.length > 0;
}
static getNewTeamId = () => {
static getNewTeamId() {
return randint(10 ** TEAM_ID_LENGTH).toString().padStart(TEAM_ID_LENGTH, '0');
}
static getNewCaptureCode = () => {
static getNewCaptureCode() {
return randint(10 ** CAPTURE_CODE_LENGTH).toString().padStart(CAPTURE_CODE_LENGTH, '0');
}

1
server/traque-back/src/core/states/game/default_state.js
View File

@@ -23,6 +23,7 @@ export class DefaultState {
this.teams.forEach(team => this.initTeam(team, settings));
}
// eslint-disable-next-line no-unused-vars
clearTeam(_team) {}
exit() {

1
server/traque-back/src/core/states/game/finished_state.js
View File

@@ -23,6 +23,7 @@ export class FinishedState {
this.teams.forEach(team => this.initTeam(team, settings));
}
// eslint-disable-next-line no-unused-vars
clearTeam(_team) {}
exit() {

1
server/traque-back/src/core/states/game/placement_state.js
View File

@@ -23,6 +23,7 @@ export class PlacementState {
this.teams.forEach(team => this.initTeam(team, settings));
}
// eslint-disable-next-line no-unused-vars
clearTeam(_team) {}
exit() {

1
server/traque-back/src/core/states/teams/default_team.js
View File

@@ -6,6 +6,7 @@ export class DefaultTeam {
// --------------- LIFE CYCLE --------------- //
// eslint-disable-next-line no-unused-vars
init(_settings) {
return this;
}

1
server/traque-back/src/core/states/teams/finished_team.js
View File

@@ -6,6 +6,7 @@ export class FinishedTeam {
// --------------- LIFE CYCLE --------------- //
// eslint-disable-next-line no-unused-vars
init(_settings) {
return this;
}

16
server/traque-back/src/externals/handlers/adminHandler.js vendored
View File

@@ -29,7 +29,7 @@ class AdminConnection {
if (this._isLoggedIn) return;
const hash = createHash('sha256').update(password).digest('hex');
if (false && hash !== ADMIN_PASSWORD_HASH) return false; // TODO : temporaire
if (hash !== ADMIN_PASSWORD_HASH) return false;
this._isLoggedIn = true;
this._gameManager.onAdminLogin(this._socket.id);
@@ -46,7 +46,7 @@ class AdminConnection {
this._socket.on("disconnect", () => {
console.log("Disconnection of an admin");
this._logout()
this._logout();
});
this._socket.on(ADMIN_HANDLER_EVENTS.LOGIN, (password) => {
@@ -54,17 +54,17 @@ class AdminConnection {
});
this._socket.on(ADMIN_HANDLER_EVENTS.LOGOUT, () => {
this._logout()
this._logout();
});
// Actions
const protectedActions = {
[ADMIN_HANDLER_EVENTS.ADD_TEAM]: (id) => this._gameManager.addTeam(id),
[ADMIN_HANDLER_EVENTS.REMOVE_TEAM]: (id) => this._gameManager.removeTeam(id),
[ADMIN_HANDLER_EVENTS.REORDER_TEAM]: (id) => this._gameManager.reorderTeam(id),
[ADMIN_HANDLER_EVENTS.ELIMINATE_TEAM]: (id) => this._gameManager.eliminate(id),
[ADMIN_HANDLER_EVENTS.REVIVE_TEAM]: (id) => this._gameManager.revive(id),
[ADMIN_HANDLER_EVENTS.ADD_TEAM]: (teamName) => this._gameManager.addTeam(teamName),
[ADMIN_HANDLER_EVENTS.REMOVE_TEAM]: (teamId) => this._gameManager.removeTeam(teamId),
[ADMIN_HANDLER_EVENTS.REORDER_TEAM]: (newTeamsOrder) => this._gameManager.reorderTeam(newTeamsOrder),
[ADMIN_HANDLER_EVENTS.ELIMINATE_TEAM]: (teamId) => this._gameManager.eliminate(teamId),
[ADMIN_HANDLER_EVENTS.REVIVE_TEAM]: (teamId) => this._gameManager.revive(teamId),
[ADMIN_HANDLER_EVENTS.STATE]: (state) => this._gameManager.setState(state),
[ADMIN_HANDLER_EVENTS.SETTINGS]: (settings) => this._gameManager.setSettings(settings),
};

4
server/traque-back/src/externals/handlers/playerHandler.js vendored
View File

@@ -47,7 +47,7 @@ class PlayerConnection {
this._socket.on("disconnect", () => {
console.log("Disconnection of a player");
this._logout()
this._logout();
});
this._socket.on(PLAYER_HANDLER_EVENTS.LOGIN, (loginTeamId, callback) => {
@@ -56,7 +56,7 @@ class PlayerConnection {
});
this._socket.on(PLAYER_HANDLER_EVENTS.LOGOUT, () => {
this._logout()
this._logout();
});
// Actions

7
server/traque-back/src/externals/mappers/admin_mapper.js vendored
View File

@@ -1,3 +1,4 @@
/* eslint-disable no-unused-vars */
import { DefaultState, PlacementState, PlayingState, FinishedState } from "#core/states/game/index.js";
const TEAM_STATE_MAP = {
@@ -43,7 +44,7 @@ export class AdminMapper {
id: team.id,
name: team.name,
location: team.location,
state: TEAM_STATE_MAP[stateName](team, this.gameManager.state)
stateData: TEAM_STATE_MAP[stateName](team, this.gameManager.state)
};
});
@@ -52,14 +53,14 @@ export class AdminMapper {
currentZone: this.gameManager.zoneManager.currentZonePolygon,
nextZone: this.gameManager.zoneManager.nextZonePolygon,
zoneTransitionDate: this.gameManager.zoneManager.dateOfZoneTransition
}
};
return {
gameState: stateName,
teams: this.gameManager.teams.order.map(teamId => teamsDto[teamId]),
zones: zonesDto,
settings: this.gameManager.settings
}
};
}
hash(dto) {

5
server/traque-back/src/externals/mappers/player_mapper.js vendored
View File

@@ -1,3 +1,4 @@
/* eslint-disable no-unused-vars */
import { DefaultState, PlacementState, PlayingState, FinishedState } from "#core/states/game/index.js";
const TEAM_STATE_MAP = {
@@ -43,8 +44,8 @@ export class PlayerMapper {
return {
id: this.team.id,
name: this.team.name,
stateName: this.gameState.name,
state: TEAM_STATE_MAP[this.gameState.name](this.team, this.gameState)
gameState: this.gameState.name,
stateData: TEAM_STATE_MAP[this.gameState.name](this.team, this.gameState)
};
}

2
server/traque-back/src/externals/synchronizers/player_synchronizer.js vendored
View File

@@ -18,7 +18,7 @@ export class PlayerSynchronizer {
this.gameManager.teams.forEach((team, teamId) => {
const { dto, hasChanged } = this._getSyncDtoOfTeam(team);
if (hasChanged) io.to(teamId).emit(PLAYER_SYNCHRONIZER_EVENTS.UPDATE_FULL, dto);
})
});
});
this.gameManager.on(GAME_MANAGER_EVENTS.DELETE_TEAM, (teamId) => {

28
server/traque-front/app/admin/components/liveMap.jsx
View File

@@ -1,12 +1,14 @@
import { Fragment, useEffect, useState } from "react";
import Image from 'next/image';
import { Arrow, CircleZone, PolygonZone, Position, Tag } from "@/components/layer";
import { CustomMapContainer, MapEventListener, MapPan } from "@/components/map";
import useAdmin from "@/hook/useAdmin";
import { GameState } from "@/util/types";
import { mapZooms } from "@/util/configurations";
import { Show } from "@/components/Show";
import { useAdmin } from "@/context/adminContext";
import { GameState } from "@/config/types";
import { mapZooms } from "@/config/configurations";
export default function LiveMap({ selectedTeamId, onSelected, isFocusing, setIsFocusing, mapStyle, showZones, showNames, showArrows }) {
const { zones, teams, getTeam, gameState } = useAdmin();
const { gameState, teams, zones, getTeam } = useAdmin();
const [timeLeftNextZone, setTimeLeftNextZone] = useState(null);
const [isFullScreen, setIsFullScreen] = useState(false);
@@ -31,21 +33,15 @@ export default function LiveMap({ selectedTeamId, onSelected, isFocusing, setIsF
return String(minutes).padStart(2,"0") + ":" + String(seconds).padStart(2,"0");
}
function Zones() {
if (!(showZones && gameState == GameState.PLAYING)) return null;
return (<>
<PolygonZone polygon={zones.currentZone} color={mapStyle.currentZoneColor} />
<PolygonZone polygon={zones.nextZone} color={mapStyle.nextZoneColor} />
</>);
}
return (
<div className={`${isFullScreen ? "fixed inset-0 z-[9999]" : "relative h-full w-full"}`}>
<CustomMapContainer mapStyle={mapStyle}>
{isFocusing && <MapPan center={getTeam(selectedTeamId)?.currentLocation} zoom={mapZooms.high} animate />}
<MapEventListener onDragStart={() => setIsFocusing(false)} onWheel={() => setIsFocusing(false)} />
<Zones/>
<Show when={showZones && gameState == GameState.PLAYING}>
<PolygonZone polygon={zones.currentZone} color={mapStyle.currentZoneColor} />
<PolygonZone polygon={zones.nextZone} color={mapStyle.nextZoneColor} />
</Show>
{teams.map((team) => team && <Fragment key={team.id}>
<CircleZone circle={team.startingArea} color={mapStyle.placementZoneColor} display={gameState == GameState.PLACEMENT && showZones}>
<Tag text={team.name} display={showNames} />
@@ -63,8 +59,8 @@ export default function LiveMap({ selectedTeamId, onSelected, isFocusing, setIsF
</div>
}
<button className="absolute top-4 right-4 z-[1000] cursor-pointer bg-white p-3 rounded-full shadow-lg drop-shadow" onClick={() => setIsFullScreen(!isFullScreen)}>
<img src={`/icons/fullscreen.png`} className="w-8 h-8" />
<Image src={`/icons/fullscreen.png`} alt="full-screen" className="w-8 h-8" />
</button>
</div>
)
);
}

41
server/traque-front/app/admin/components/teamSidePanel.jsx
View File

@@ -1,8 +1,10 @@
import { env } from 'next-runtime-env';
import { useEffect, useState } from "react";
import useAdmin from "@/hook/useAdmin";
import Image from 'next/image';
import { getStatus } from '@/util/functions';
import { Colors, GameState } from '@/util/types';
import { Colors, GameState } from '@/config/types';
import { useAdmin } from '@/context/adminContext';
import { Show } from '@/components/Show';
function DotLine({ label, value }) {
return (
@@ -22,7 +24,7 @@ function DotLine({ label, value }) {
function IconValue({ color, icon, value }) {
return (
<div className="flex flex-row gap-2">
<img src={`/icons/${icon}/${color}.png`} className="w-6 h-6" />
<Image src={`/icons/${icon}/${color}.png`} alt="icon" className="w-6 h-6" />
<p style={{color: Colors[color]}}>{value}</p>
</div>
);
@@ -31,7 +33,7 @@ function IconValue({ color, icon, value }) {
export default function TeamSidePanel({ selectedTeamId, onClose }) {
const { getTeam, gameState } = useAdmin();
const [imgSrc, setImgSrc] = useState("");
const [_, setRefreshKey] = useState(0);
const [dateNow, setDateNow] = useState(0);
const team = getTeam(selectedTeamId);
const NO_VALUE = "XX";
const NEXT_PUBLIC_SOCKET_HOST = env("NEXT_PUBLIC_SOCKET_HOST");
@@ -39,18 +41,16 @@ export default function TeamSidePanel({ selectedTeamId, onClose }) {
useEffect(() => {
setImgSrc(`${SERVER_URL}/photo/my?team=${selectedTeamId}&t=${Date.now()}`);
}, [selectedTeamId]);
if (!team) return null;
}, [SERVER_URL, selectedTeamId]);
useEffect(() => {
const interval = setInterval(() => {
setRefreshKey(prev => prev + 1);
}, 1000);
const interval = setInterval(() => setDateNow(Date.now()), 1000);
return () => clearInterval(interval);
}, []);
if (!team) return null;
function formatTime(startDate, endDate) {
// startDate in milliseconds
if (endDate == null || startDate == null || startDate < 0) return NO_VALUE + ":" + NO_VALUE;
@@ -75,7 +75,6 @@ export default function TeamSidePanel({ selectedTeamId, onClose }) {
function formatDate(date) {
// date in milliseconds
const dateNow = Date.now();
if (date == null || dateNow <= date || dateNow - date >= 1_000_000) return NO_VALUE + "s";
return `${Math.floor((dateNow - date) / 1000)}s`;
}
@@ -86,13 +85,13 @@ export default function TeamSidePanel({ selectedTeamId, onClose }) {
<p className="text-2xl font-bold text-center" style={{color: getStatus(team, gameState).color}}>{getStatus(team, gameState).label}</p>
<p className="text-4xl font-bold text-center">{team.name ?? NO_VALUE}</p>
<div className="flex justify-center">
<img src={imgSrc ? imgSrc : "/images/missing_image.jpg"} alt="Photo de l'équipe"/>
<Image src={imgSrc ? imgSrc : "/images/missing_image.jpg"} alt="Photo de l'équipe"/>
</div>
<div className="flex flex-row justify-between items-center">
<IconValue color={team.sockets.length > 0 ? "green" : "red"} icon="user" value={team.sockets?.length ?? NO_VALUE} />
<IconValue color={team.battery >= 20 ? "green" : "red"} icon="battery" value={(team.battery ?? NO_VALUE) + "%"} />
<IconValue
color={team.lastCurrentLocationDate && (Date.now() - team.lastCurrentLocationDate <= 30000) ? "green" : "red"}
color={team.lastCurrentLocationDate && (dateNow - team.lastCurrentLocationDate <= 30000) ? "green" : "red"}
icon="location" value={formatDate(team.lastCurrentLocationDate)}
/>
</div>
@@ -100,22 +99,18 @@ export default function TeamSidePanel({ selectedTeamId, onClose }) {
<DotLine label="ID d'équipe" value={String(selectedTeamId).padStart(6, '0').replace(/(\d{3})(\d{3})/, "$1 $2")} />
<DotLine label="ID de capture" value={team.captureCode ? String(team.captureCode).padStart(4, '0') : NO_VALUE} />
</div>
{ gameState != GameState.FINISHED &&
<div>
<Show when={gameState == GameState.FINISHED}>
<DotLine label="Chasse" value={getTeam(team.chasing)?.name ?? NO_VALUE} />
<DotLine label="Chassé par" value={getTeam(team.chased)?.name ?? NO_VALUE} />
</div>
}
{ (gameState == GameState.PLAYING || gameState == GameState.FINISHED) && false &&
<div>
</Show>
<Show when={gameState == GameState.PLAYING || gameState == GameState.FINISHED}>
<DotLine label="Distance" value={formatDistance(team.distance)} />
<DotLine label="Temps de survie" value={formatTime(0, team.finishDate || Date.now())} />
<DotLine label="Vitesse moyenne" value={formatSpeed(team.distance, 0, team.finishDate || Date.now())} />
<DotLine label="Temps de survie" value={formatTime(0, team.finishDate || dateNow)} />
<DotLine label="Vitesse moyenne" value={formatSpeed(team.distance, 0, team.finishDate || dateNow)} />
<DotLine label="Captures" value={team.nCaptures ?? NO_VALUE} />
<DotLine label="Observations" value={team.nSentLocation ?? NO_VALUE} />
<DotLine label="Observé" value={team.nObserved ?? NO_VALUE} />
</div>
}
</Show>
<div>
<DotLine label="Modèle" value={team.phoneModel ?? NO_VALUE} />
<DotLine label="Nom" value={team.phoneName ?? NO_VALUE} />

18
server/traque-front/app/admin/components/teamViewer.jsx
View File

@@ -1,20 +1,28 @@
import Image from 'next/image';
import { List } from '@/components/list';
import useAdmin from '@/hook/useAdmin';
import { getStatus } from '@/util/functions';
import { useMemo } from 'react';
import { useEffect, useMemo, useState } from 'react';
import { useAdmin } from '@/context/adminContext';
function TeamViewerItem({ team }) {
const { gameState } = useAdmin();
const [dateNow, setDateNow] = useState(0);
const status = getStatus(team, gameState);
const NO_VALUE = "XX";
useEffect(() => {
const interval = setInterval(() => setDateNow(Date.now()), 1000);
return () => clearInterval(interval);
}, []);
return (
<div className={`w-full flex flex-row gap-3 p-2 ${team.captured ? 'bg-gray-200' : 'bg-white'} justify-between`}>
<div className='flex flex-row items-center gap-3'>
<div className='flex flex-row gap-1'>
<img src={`/icons/user/${team.sockets.length > 0 ? "green" : "red"}.png`} className="w-4 h-4" />
<img src={`/icons/battery/${team.battery >= 20 ? "green" : "red"}.png`} className="w-4 h-4" />
<img src={`/icons/location/${team.lastCurrentLocationDate && (Date.now() - team.lastCurrentLocationDate <= 30000) ? "green" : "red"}.png`} className="w-4 h-4" />
<Image src={`/icons/user/${team.sockets.length > 0 ? "green" : "red"}.png`} alt="icon" className="w-4 h-4" />
<Image src={`/icons/battery/${team.battery >= 20 ? "green" : "red"}.png`} alt="icon" className="w-4 h-4" />
<Image src={`/icons/location/${team.lastCurrentLocationDate && (dateNow - team.lastCurrentLocationDate <= 30000) ? "green" : "red"}.png`} alt="icon" className="w-4 h-4" />
</div>
<p className="text-xl font-bold">{team.name ?? NO_VALUE}</p>
</div>

12
server/traque-front/app/admin/layout.js
View File

@@ -1,12 +0,0 @@
import { AdminConnexionProvider } from "@/context/adminConnexionContext";
import { AdminProvider } from "@/context/adminContext";
export default function AdminLayout({ children }) {
return (
<AdminConnexionProvider>
<AdminProvider>
{children}
</AdminProvider>
</AdminConnexionProvider>
);
}

32
server/traque-front/app/admin/page.js → server/traque-front/app/admin/page.jsx
View File

@@ -2,13 +2,15 @@
import { useState } from 'react';
import dynamic from "next/dynamic";
import Link from "next/link";
import Image from "next/image";
import { Section } from "@/components/section";
import { useAdminConnexion } from "@/context/adminConnexionContext";
import useAdmin from "@/hook/useAdmin";
import { GameState } from "@/util/types";
import { mapStyles } from '@/util/configurations';
import { useAuth } from "@/context/authContext";
import { useAdmin } from '@/context/adminContext';
import { GameState } from "@/config/types";
import { mapStyles } from '@/config/configurations';
import TeamSidePanel from "./components/teamSidePanel";
import TeamViewer from './components/teamViewer';
import { emitState } from '@/services/socket/emitters';
// Imported at runtime and not at compile time
const LiveMap = dynamic(() => import('./components/liveMap'), { ssr: false });
@@ -16,7 +18,7 @@ const LiveMap = dynamic(() => import('./components/liveMap'), { ssr: false });
function MainTitle() {
return (
<div className='w-full bg-custom-light-blue gap-5 p-5 flex flex-row shadow-2xl'>
<img src="/icons/home.png" className="w-8 h-8" />
<Image src="/icons/home.png" alt="home" className="w-8 h-8" />
<h2 className="text-3xl font-bold">Page principale</h2>
</div>
);
@@ -25,7 +27,7 @@ function MainTitle() {
function MapButton({ icon, ...props }) {
return (
<button className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center" {...props}>
<img src={`/icons/${icon}.png`} className="w-10 h-10" />
<Image src={`/icons/${icon}.png`} alt="map-button" className="w-10 h-10" />
</button>
);
}
@@ -33,14 +35,14 @@ function MapButton({ icon, ...props }) {
function ControlButton({ icon, ...props }) {
return (
<button className="w-[4.5rem] h-[4.5rem] bg-custom-light-blue rounded-lg hover:bg-blue-500 transition flex items-center justify-center" {...props}>
<img src={`/icons/${icon}.png`} className="w-10 h-10" />
<Image src={`/icons/${icon}.png`} alt="control-button" className="w-10 h-10" />
</button>
);
}
export default function AdminPage() {
const { useProtect } = useAdminConnexion();
const { changeState, getTeam } = useAdmin();
const { useProtect } = useAuth();
const { getTeam } = useAdmin();
const [selectedTeamId, setSelectedTeamId] = useState(null);
const [mapStyle, setMapStyle] = useState(mapStyles.default);
const [showZones, setShowZones] = useState(true);
@@ -84,10 +86,9 @@ export default function AdminPage() {
<Link href="/admin/parameters">
<ControlButton icon="parameters" title="Accéder aux paramètres du jeu"/>
</Link>
{false && <ControlButton icon="play" title="Reprendre la partie" onClick={() => {}} />}
<ControlButton icon="reset" title="Réinitialiser la partie" onClick={() => changeState(GameState.SETUP)} />
<ControlButton icon="placement" title="Commencer les placements" onClick={() => changeState(GameState.PLACEMENT)} />
<ControlButton icon="begin" title="Lancer la traque" onClick={() => changeState(GameState.PLAYING)} />
<ControlButton icon="reset" title="Réinitialiser la partie" onClick={() => emitState(GameState.SETUP)} />
<ControlButton icon="placement" title="Commencer les placements" onClick={() => emitState(GameState.PLACEMENT)} />
<ControlButton icon="begin" title="Lancer la traque" onClick={() => emitState(GameState.PLAYING)} />
</Section>
<Section title="Équipes" outerClassName="flex-1 min-h-0">
<TeamViewer selectedTeamId={selectedTeamId} onSelected={onSelected}/>
@@ -118,11 +119,8 @@ export default function AdminPage() {
<MapButton icon="zones" title="Afficher/masquer les zones" onClick={switchZones}/>
<MapButton icon="names" title="Afficher/masquer les noms des équipes" onClick={switchNames}/>
<MapButton icon="arrows" title="Afficher/masquer les relations de traque" onClick={switchArrows}/>
{false && <MapButton icon="incertitude" title="Afficher/masquer les incertitudes de position"/>}
{false && <MapButton icon="path" title="Afficher/masquer la trace de l'équipe sélectionnée"/>}
{false && <MapButton icon="informations" title="Afficher/masquer les évènements de l'équipe sélectionnée"/>}
</div>
</Section>
</div>
)
);
}

47
server/traque-front/app/admin/parameters/components/circleZoneSelector.jsx
View File

@@ -2,60 +2,53 @@ import { useEffect, useState } from "react";
import "leaflet/dist/leaflet.css";
import { CustomMapContainer, MapEventListener } from "@/components/map";
import { NumberInput } from "@/components/input";
import useAdmin from "@/hook/useAdmin";
import useMapCircleDraw from "@/hook/useCircleDraw";
import useLocalVariable from "@/hook/useLocalVariable";
import { defaultZoneSettings } from "@/util/configurations";
import { ZoneTypes } from "@/util/types";
import { defaultZoneSettings } from "@/config/configurations";
import { ZoneTypes } from "@/config/types";
import { CircleZone } from "@/components/layer";
import { useAdmin } from "@/context/adminContext";
import { emitSettings } from "@/services/socket/emitters";
const EditMode = {
MIN: 0,
MAX: 1
}
};
function Drawings({ minZone, setMinZone, maxZone, setMaxZone, editMode }) {
const { drawingCircle: drawingMaxCircle, handleLeftClick: maxLeftClick, handleRightClick: maxRightClick, handleMouseMove: maxHover } = useMapCircleDraw(maxZone, setMaxZone);
const { drawingCircle: drawingMinCircle, handleLeftClick: minLeftClick, handleRightClick: minRightClick, handleMouseMove: minHover } = useMapCircleDraw(minZone, setMinZone);
function MaxCircleZone() {
return (
drawingMaxCircle
? <CircleZone circle={drawingMaxCircle} color="blue" />
: <CircleZone circle={maxZone} color="blue" />
);
}
function MinCircleZone() {
return (
drawingMinCircle
? <CircleZone circle={drawingMinCircle} color="red" />
: <CircleZone circle={minZone} color="red" />
);
}
return (<>
<MapEventListener
onLeftClick={editMode == EditMode.MAX ? maxLeftClick : minLeftClick}
onRightClick={editMode == EditMode.MAX ? maxRightClick : minRightClick}
onMouseMove={editMode == EditMode.MAX ? maxHover : minHover}
/>
<MaxCircleZone/>
<MinCircleZone/>
{
drawingMaxCircle
? <CircleZone circle={drawingMaxCircle} color="blue" />
: <CircleZone circle={maxZone} color="blue" />
}
{
drawingMinCircle
? <CircleZone circle={drawingMinCircle} color="red" />
: <CircleZone circle={minZone} color="red" />
}
</>);
}
export default function CircleZoneSelector({ display }) {
const {settings, updateSettings} = useAdmin();
const [localZoneSettings, setLocalZoneSettings, applyLocalZoneSettings] = useLocalVariable(settings.playingZones, (e) => updateSettings({playingZones: e}));
const [localOutOfZoneDelay, setLocalOutOfZoneDelay, applyLocalOutOfZoneDelay] = useLocalVariable(settings.outOfZoneDelay, (e) => updateSettings({outOfZoneDelay: e}));
const { settings } = useAdmin();
const [localZoneSettings, setLocalZoneSettings, applyLocalZoneSettings] = useLocalVariable(settings.playingZones, (e) => emitSettings({...settings, playingZones: e}));
const [localOutOfZoneDelay, setLocalOutOfZoneDelay, applyLocalOutOfZoneDelay] = useLocalVariable(settings.outOfZoneDelay, (e) => emitSettings({...settings, outOfZoneDelay: e}));
const [editMode, setEditMode] = useState(EditMode.MAX);
useEffect(() => {
if (!localZoneSettings || localZoneSettings.type != ZoneTypes.CIRCLE) {
setLocalZoneSettings(defaultZoneSettings.circle);
}
}, [localZoneSettings]);
}, [localZoneSettings, setLocalZoneSettings]);
function setMinZone(minZone) {
setLocalZoneSettings({...localZoneSettings, min: minZone});
@@ -96,7 +89,7 @@ export default function CircleZoneSelector({ display }) {
<NumberInput id="reduction-number" value={localZoneSettings.reductionCount ?? ""} onChange={updateReductionCount} />
</div>
<div className="w-full flex flex-row gap-2 items-center justify-between">
<p>Durée d'une zone</p>
<p>{"Durée d'une zone"}</p>
<NumberInput id="duration" value={localZoneSettings.duration ?? ""} onChange={updateDuration} />
</div>
<div className="w-full flex flex-row gap-2 items-center justify-between">

8
server/traque-front/app/admin/parameters/components/messages.jsx
View File

@@ -1,8 +0,0 @@
import { Section } from "@/components/section";
export default function Messages() {
return (
<Section title="Messages" innerClassName="w-full h-full flex flex-col gap-3 items-center">
</Section>
);
}

6
server/traque-front/app/admin/parameters/components/placementZoneSelector.jsx
View File

@@ -1,9 +1,9 @@
import { useEffect, useState } from "react";
import { List } from "@/components/list";
import { CustomMapContainer, MapEventListener } from "@/components/map";
import useAdmin from '@/hook/useAdmin';
import useMultipleCircleDraw from "@/hook/useMultipleCircleDraw";
import { CircleZone, Tag } from "@/components/layer";
import { useAdmin } from "@/context/adminContext";
function Drawings({ placementZones, addZone, removeZone, handleRightClick }) {
const { handleLeftClick, handleRightClick: handleRightClickDrawing } = useMultipleCircleDraw(placementZones, addZone, removeZone, 30);
@@ -24,10 +24,12 @@ function Drawings({ placementZones, addZone, removeZone, handleRightClick }) {
}
export default function PlacementZoneSelector({ display }) {
const { teams, getTeam, placementTeam } = useAdmin();
const { teams, getTeam } = useAdmin();
const [selectedTeamId, setSelectedTeamId] = useState(null);
const [placementZones, setPlacementZones] = useState([]);
// TODO replace old function placementTeam
useEffect(() => {
setPlacementZones(teams.filter(team => team.startingArea).map(team => ({id: team.id, name: team.name, center: team.startingArea.center, radius: team.startingArea.radius})));
}, [teams]);

9
server/traque-front/app/admin/parameters/components/playingZoneSelector.jsx
View File

@@ -1,7 +1,5 @@
import dynamic from "next/dynamic";
import { ZoneTypes } from "@/util/types";
import useLocalVariable from "@/hook/useLocalVariable";
import useAdmin from "@/hook/useAdmin";
import { ZoneTypes } from "@/config/types";
// Imported at runtime and not at compile time
const CircleZoneSelector = dynamic(() => import('./circleZoneSelector'), { ssr: false });
@@ -19,13 +17,12 @@ function ZoneTypeButton({title, onClick, isSelected}) {
}
export default function PlayingZoneSelector({ display }) {
return (
<div className={display ? 'w-full h-full gap-3 flex flex-col' : "hidden"}>
<div className="w-full flex flex-row gap-3 items-center">
<p className="text-l">Type de zone :</p>
<ZoneTypeButton title="Cercles" onClick={() => setLocalZoneType(ZoneTypes.CIRCLE)} isSelected={ZoneTypes.POLYGON == ZoneTypes.CIRCLE} />
<ZoneTypeButton title="Polygones" onClick={() => setLocalZoneType(ZoneTypes.POLYGON)} isSelected={ZoneTypes.POLYGON == ZoneTypes.POLYGON} />
<ZoneTypeButton title="Cercles" onClick={() => { /*setLocalZoneType(ZoneTypes.CIRCLE)*/ }} isSelected={ZoneTypes.POLYGON == ZoneTypes.CIRCLE} />
<ZoneTypeButton title="Polygones" onClick={() => { /*setLocalZoneType(ZoneTypes.POLYGON)*/ }} isSelected={ZoneTypes.POLYGON == ZoneTypes.POLYGON} />
</div>
<div className="w-full flex-1">
<CircleZoneSelector display={ZoneTypes.POLYGON == ZoneTypes.CIRCLE} />

30
server/traque-front/app/admin/parameters/components/polygonZoneSelector.jsx
View File

@@ -1,26 +1,24 @@
import { useEffect, useState } from "react";
import { useEffect, useMemo } from "react";
import { Polyline } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import { ReorderList } from "@/components/list";
import { CustomMapContainer, MapEventListener } from "@/components/map";
import { NumberInput } from "@/components/input";
import { Node, PolygonZone, Label } from "@/components/layer";
import useAdmin from "@/hook/useAdmin";
import useMapPolygonDraw from "@/hook/usePolygonDraw";
import useLocalVariable from "@/hook/useLocalVariable";
import { defaultZoneSettings } from "@/util/configurations";
import { ZoneTypes } from "@/util/types";
import { defaultZoneSettings } from "@/config/configurations";
import { ZoneTypes } from "@/config/types";
import { emitSettings } from "@/services/socket/emitters";
import { useAdmin } from "@/context/adminContext";
function Drawings({ localZoneSettings, addZone, removeZone }) {
const [polygons, setPolygons] = useState([]);
const { currentPolygon, highlightNodes, handleLeftClick, handleRightClick, handleMouseMove } = useMapPolygonDraw(polygons, addZone, removeZone);
useEffect(() => {
if (localZoneSettings.type == ZoneTypes.POLYGON) {
setPolygons(localZoneSettings.polygons.map(zone => zone.polygon));
}
const polygons = useMemo(() => {
return localZoneSettings.type == ZoneTypes.POLYGON ? localZoneSettings.polygons.map(zone => zone.polygon) : [];
}, [localZoneSettings]);
const { currentPolygon, highlightNodes, handleLeftClick, handleRightClick, handleMouseMove } = useMapPolygonDraw(polygons, addZone, removeZone);
function getLabelPosition(polygon) {
const sum = polygon.reduce(
(acc, coord) => ({
@@ -38,7 +36,7 @@ function Drawings({ localZoneSettings, addZone, removeZone }) {
return (<>
<MapEventListener onLeftClick={handleLeftClick} onRightClick={handleRightClick} onMouseMove={handleMouseMove} />
{localZoneSettings.polygons.map(zone =>
<PolygonZone key={zone.id} polygon={zone.polygon} color="black" opacity='0.5' >
<PolygonZone key={zone.id} polygon={zone.polygon} color="black" >
<Label position={getLabelPosition(zone.polygon)} label={zone.id} color="white" />
</PolygonZone>
)}
@@ -54,15 +52,15 @@ function Drawings({ localZoneSettings, addZone, removeZone }) {
export default function PolygonZoneSelector({ display }) {
const defaultDuration = 10;
const {settings, updateSettings} = useAdmin();
const [localZoneSettings, setLocalZoneSettings, applyLocalZoneSettings] = useLocalVariable(settings.zones, (e) => updateSettings({zone: e}));
const [localOutOfZoneDelay, setLocalOutOfZoneDelay, applyLocalOutOfZoneDelay] = useLocalVariable(settings.outOfZoneDelay, (e) => updateSettings({outOfZoneDelay: e}));
const { settings } = useAdmin();
const [localZoneSettings, setLocalZoneSettings, applyLocalZoneSettings] = useLocalVariable(settings.zones, (e) => emitSettings({...settings, zone: e}));
const [localOutOfZoneDelay, setLocalOutOfZoneDelay, applyLocalOutOfZoneDelay] = useLocalVariable(settings.outOfZoneDelay, (e) => emitSettings({...settings, outOfZoneDelay: e}));
useEffect(() => {
if (!localZoneSettings || localZoneSettings.type != ZoneTypes.POLYGON) {
setLocalZoneSettings(defaultZoneSettings.polygon);
}
}, [localZoneSettings]);
}, [localZoneSettings, setLocalZoneSettings]);
function getNewPolygonName() {
const existingIds = new Set(localZoneSettings.polygons.map(zone => zone.id));

21
server/traque-front/app/admin/parameters/components/teamManager.jsx
View File

@@ -1,35 +1,36 @@
import { useState } from "react";
import Image from "next/image";
import { ReorderList } from '@/components/list';
import useAdmin from '@/hook/useAdmin';
import useLocalVariable from "@/hook/useLocalVariable";
import { NumberInput } from "@/components/input";
import { Section } from "@/components/section";
import { useAdmin } from "@/context/adminContext";
import { emitAddTeam, emitEliminateTeam, emitRemoveTeam, emitReorderTeam, emitReviveTeam, emitSettings } from "@/services/socket/emitters";
function TeamManagerItem({ team }) {
const { captureTeam, removeTeam } = useAdmin();
return (
<div className='w-full flex flex-row items-center justify-between p-2 gap-3 bg-white'>
<p className='text-xl font-bold'>{team.name}</p>
<div className='flex flex-row items-center justify-between gap-3'>
<p className='text-xl font-bold'>{String(team.id).padStart(6, '0').replace(/(\d{3})(\d{3})/, "$1 $2")}</p>
<img src={`/icons/heart/${team.captured ? "grey" : "pink"}.png`} className="w-8 h-8 cursor-pointer" onClick={() => captureTeam(team.id)} />
<img src="/icons/trash.png" className="w-8 h-8 cursor-pointer" onClick={() => removeTeam(team.id)} />
<Image src={`/icons/heart/${team.captured ? "grey" : "pink"}.png`} alt="heart" className="w-8 h-8 cursor-pointer" onClick={() => team.captured ? emitReviveTeam(team.id) : emitEliminateTeam(team.id)} />
<Image src="/icons/trash.png" alt="trash" className="w-8 h-8 cursor-pointer" onClick={() => emitRemoveTeam(team.id)} />
</div>
</div>
);
}
export default function TeamManager() {
const { teams, addTeam, reorderTeams, settings, updateSettings } = useAdmin();
const { teams, settings } = useAdmin();
const [teamName, setTeamName] = useState('');
const [localSendPositionDelay, setLocalSendPositionDelay, applyLocalSendPositionDelay] = useLocalVariable(settings.scanDelay, (e) => updateSettings({scanDelay: e}));
const [localSendPositionDelay, setLocalSendPositionDelay, applyLocalSendPositionDelay] = useLocalVariable(settings.scanDelay, (e) => emitSettings({...settings, scanDelay: e}));
function handleTeamSubmit(e) {
e.preventDefault();
if (teamName !== "") {
addTeam(teamName);
setTeamName("")
emitAddTeam(teamName);
setTeamName("");
}
}
@@ -37,14 +38,14 @@ export default function TeamManager() {
<Section title="Équipes" outerClassName="flex-1 min-h-0" innerClassName="flex flex-col items-center gap-3">
<form className='w-full flex flex-row gap-3' onSubmit={handleTeamSubmit}>
<div className='w-full'>
<input name="teamName" label='Team name' value={teamName} onChange={(e) => setTeamName(e.target.value)} type="text" className="w-full h-full p-4 ring-1 ring-inset ring-gray-300" />
<input name="teamName" value={teamName} onChange={(e) => setTeamName(e.target.value)} type="text" className="w-full h-full p-4 ring-1 ring-inset ring-gray-300" />
</div>
<div className='w-1/5'>
<button type="submit" className="w-full h-full bg-custom-light-blue hover:bg-blue-500 transition text-3xl font-bold">+</button>
</div>
</form>
<div className="w-full flex-1 min-h-0 ">
<ReorderList droppableId="team-manager" array={teams} setArray={(teams) => reorderTeams(teams.map(team => team.id))}>
<ReorderList droppableId="team-manager" array={teams} setArray={(teams) => emitReorderTeam(teams.map(team => team.id))}>
{(team) => (
<TeamManagerItem team={team}/>
)}

11
server/traque-front/app/admin/parameters/page.js → server/traque-front/app/admin/parameters/page.jsx
View File

@@ -2,8 +2,8 @@
import { useState } from "react";
import dynamic from "next/dynamic";
import Link from "next/link";
import { useAdminConnexion } from "@/context/adminConnexionContext";
import Messages from "./components/messages";
import Image from "next/image";
import { useAuth } from "@/context/authContext";
import TeamManager from './components/teamManager';
import PlayingZoneSelector from "./components/playingZoneSelector";
@@ -13,13 +13,13 @@ const PlacementZoneSelector = dynamic(() => import('./components/placementZoneSe
const Tabs = {
PLACEMENT_ZONES: "placement_zones",
PLAYING_ZONES: "playing_zones",
}
};
function ParametersTitle() {
return (
<div className='w-full bg-custom-light-blue gap-5 p-5 flex flex-row shadow-2xl'>
<Link href="/admin">
<img src="/icons/backarrow.png" className="w-8 h-8" title="Main page" />
<Image src="/icons/backarrow.png" alt="cogwheel" className="w-8 h-8" title="Main page" />
</Link>
<h2 className="text-3xl font-bold">Paramètres</h2>
</div>
@@ -38,7 +38,7 @@ function TabButton({title, onClick, isSelected}) {
}
export default function ParametersPage() {
const { useProtect } = useAdminConnexion();
const { useProtect } = useAuth();
const [currentTab, setCurrentTab] = useState(Tabs.PLACEMENT_ZONES);
useProtect();
@@ -47,7 +47,6 @@ export default function ParametersPage() {
<div className='w-full h-full p-3 flex flex-row gap-3'>
<div className="h-full w-2/6 gap-3 flex flex-col">
<ParametersTitle/>
<Messages/>
<TeamManager/>
</div>
<div className="h-full flex-1 flex flex-col bg-white shadow-2xl">

25
server/traque-front/app/layout.js
View File

@@ -1,25 +0,0 @@
import { Inter } from "next/font/google";
import "./globals.css";
import { PublicEnvScript } from 'next-runtime-env';
import SocketProvider from "@/context/socketContext";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "La Traque",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<PublicEnvScript />
</head>
<body className={inter.className + " w-screen h-screen bg-gray-200"}>
<SocketProvider>
{children}
</SocketProvider>
</body>
</html>
);
}

43
server/traque-front/app/layout.jsx Normal file
View File

@@ -0,0 +1,43 @@
import { Inter } from "next/font/google";
import "./globals.css";
import { PublicEnvScript } from 'next-runtime-env';
import { AuthProvider } from "@/context/authContext";
import { AdminProvider } from "@/context/adminContext";
import { useRouter } from "next/navigation";
import { useEffect } from "react";
import { useAuth } from "@/context/authContext";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "La Traque",
};
const NavigationManager = () => {
const router = useRouter();
const { isLoggedIn } = useAuth();
useEffect(() => {
router.replace(isLoggedIn ? "/admin" : "/login");
}, [router, isLoggedIn]);
return null;
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<PublicEnvScript />
</head>
<body className={inter.className + " w-screen h-screen bg-gray-200"}>
<AuthProvider>
<AdminProvider>
{children}
<NavigationManager/>
</AdminProvider>
</AuthProvider>
</body>
</html>
);
}

4
server/traque-front/app/admin/login/page.js → server/traque-front/app/login/page.jsx
View File

@@ -1,9 +1,9 @@
"use client";
import { useState } from "react";
import { useAdminConnexion } from '@/context/adminConnexionContext';
import { useAuth } from '@/context/authContext';
export default function AdminLoginPage() {
const {login, useProtect} = useAdminConnexion();
const {login, useProtect} = useAuth();
const [value, setValue] = useState("");
useProtect();

25
server/traque-front/context/adminConnexionContext.jsx
View File

@@ -1,25 +0,0 @@
"use client";
import { createContext, useContext, useMemo } from "react";
import { useSocket } from "./socketContext";
import useSocketAuth from "@/hook/useSocketAuth";
import usePasswordProtect from "@/hook/usePasswordProtect";
const adminConnexionContext = createContext();
export function AdminConnexionProvider({ children }) {
const { adminSocket } = useSocket();
const { login, loggedIn, loading } = useSocketAuth(adminSocket, "admin_password");
const useProtect = () => usePasswordProtect("/admin/login", "/admin", loading, loggedIn);
const value = useMemo(() => ({ login, loggedIn, loading, useProtect }), [loggedIn, loading]);
return (
<adminConnexionContext.Provider value={value}>
{children}
</adminConnexionContext.Provider>
);
}
export function useAdminConnexion() {
return useContext(adminConnexionContext);
}

36
server/traque-front/context/adminContext.jsx
View File

@@ -1,36 +0,0 @@
"use client";
import { createContext, useContext, useMemo, useState } from "react";
import { useSocket } from "./socketContext";
import useSocketListener from "@/hook/useSocketListener";
import { GameState } from "@/util/types";
const adminContext = createContext();
export function AdminProvider({ children }) {
const { adminSocket } = useSocket();
const [gameState, setGameState] = useState(GameState.SETUP);
const [teams, setTeams] = useState([]);
const [zones, setZones] = useState(null);
const [settings, setSettings] = useState(null);
useSocketListener(adminSocket, "update-full", ({ gameState, teams, zones, settings }) => {
setGameState(gameState);
setTeams(teams);
setZones(zones);
setSettings(settings);
});
const value = useMemo(() => (
{ gameState, teams, zones, settings }
), [gameState, teams, zones, settings]);
return (
<adminContext.Provider value={value}>
{children}
</adminContext.Provider>
);
}
export function useAdminContext() {
return useContext(adminContext);
}

26
server/traque-front/context/socketContext.jsx
View File

@@ -1,26 +0,0 @@
"use client";
import { createContext, useContext, useMemo } from "react";
import { env } from 'next-runtime-env';
import { io } from 'socket.io-client';
const NEXT_PUBLIC_SOCKET_HOST = env("NEXT_PUBLIC_SOCKET_HOST");
const SOCKET_URL = (NEXT_PUBLIC_SOCKET_HOST == "localhost" ? "ws://" : "wss://") + NEXT_PUBLIC_SOCKET_HOST;
const ADMIN_SOCKET_URL = SOCKET_URL + "/admin";
export const adminSocket = io(ADMIN_SOCKET_URL, {
path: "/back/socket.io",
});
export const SocketContext = createContext();
export default function SocketProvider({ children }) {
const value = useMemo(() => ({ adminSocket }), [adminSocket]);
return (
<SocketContext.Provider value={value}>{children}</SocketContext.Provider>
);
}
export function useSocket() {
return useContext(SocketContext);
}

48
server/traque-front/eslint.config.mjs Normal file
View File

@@ -0,0 +1,48 @@
import js from "@eslint/js";
import nextPlugin from "@next/eslint-plugin-next";
import reactPlugin from "eslint-plugin-react";
import reactHooksPlugin from "eslint-plugin-react-hooks";
import globals from "globals";
export default [
{
ignores: ["node_modules/*", "dist/*", ".next/*"],
},
js.configs.recommended,
{
files: ["**/*.{js,jsx,mjs,ts,tsx}"],
plugins: {
"@next/next": nextPlugin,
"react": reactPlugin,
"react-hooks": reactHooksPlugin,
},
languageOptions: {
ecmaVersion: "latest",
sourceType: "module",
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
globals: {
...globals.browser,
...globals.node,
},
},
settings: {
react: {
version: "detect",
},
},
rules: {
...nextPlugin.configs.recommended.rules,
...nextPlugin.configs["core-web-vitals"].rules,
...reactPlugin.configs.recommended.rules,
...reactHooksPlugin.configs.recommended.rules,
"react/react-in-jsx-scope": "off",
"react/prop-types": "off",
"semi": ["error", "always"],
"no-unused-vars": "warn",
},
},
];

43
server/traque-front/hook/useAdmin.jsx
View File

@@ -1,43 +0,0 @@
"use client";
import { useAdminContext } from "@/context/adminContext";
import { useSocket } from "@/context/socketContext";
export default function useAdmin() {
const adminContext = useAdminContext();
const { teams } = adminContext;
const { adminSocket } = useSocket();
function getTeam(teamId) {
return teams.find(team => team.id === teamId);
}
function addTeam(teamName) {
adminSocket.emit("add-team", teamName);
}
function removeTeam(teamId) {
adminSocket.emit("remove-team", teamId);
}
function reorderTeams(newOrder) {
adminSocket.emit("reorder-teams", newOrder);
}
function captureTeam(teamId) {
adminSocket.emit("capture_team", teamId);
}
function placementTeam(teamId, placementZone) {
adminSocket.emit("placement_team", teamId, placementZone);
}
function changeState(state) {
adminSocket.emit("state", state);
}
function updateSettings(settings) {
adminSocket.emit("settings", settings);
}
return { ...adminContext, getTeam, reorderTeams, addTeam, removeTeam, captureTeam, placementTeam, changeState, updateSettings };
}

16
server/traque-front/hook/usePasswordProtect.jsx
View File

@@ -1,16 +0,0 @@
"use client";
import { redirect, usePathname } from "next/navigation";
import { useEffect } from "react";
export default function usePasswordProtect(loginPath, redirectPath, loading, loggedIn) {
const path = usePathname();
useEffect(() => {
if (!loggedIn && !loading && path !== loginPath) {
redirect(loginPath);
}
if(loggedIn && !loading && path === loginPath) {
redirect(redirectPath);
}
}, [loggedIn, loading, path]);
}

52
server/traque-front/hook/useSocketAuth.jsx
View File

@@ -1,52 +0,0 @@
"use client";
import { useEffect, useState } from 'react';
import useSocketListener from './useSocketListener';
import useLocalStorage from './useLocalStorage';
const LOGIN_MESSAGE = "login";
const LOGOUT_MESSAGE = "logout";
const LOGIN_RESPONSE_MESSAGE = "login_response";
export default function useSocketAuth(socket, passwordName) {
const [loggedIn, setLoggedIn] = useState(false);
const [loading, setLoading] = useState(true);
const [waitingForResponse, setWaitingForResponse] = useState(true);
const [savedPassword, setSavedPassword, savedPasswordLoading] = useLocalStorage(passwordName, null);
useEffect(() => {
if (savedPassword && !loggedIn) {
console.log("Try to log with :", savedPassword);
socket.emit(LOGIN_MESSAGE, savedPassword);
}
}, [savedPassword]);
function login(password) {
setSavedPassword(password)
}
function logout() {
setSavedPassword(null);
setLoggedIn(false);
socket.emit(LOGOUT_MESSAGE)
}
useSocketListener(socket, LOGIN_RESPONSE_MESSAGE, (loginResponse) => {
setWaitingForResponse(false);
setLoggedIn(loginResponse);
console.log(loginResponse ? "Logged in" : "Not logged in");
});
useEffect(() => {
//There is a password saved and we recieved a login response
if(savedPassword && !waitingForResponse && !savedPasswordLoading) {
setLoading(false);
}
//We tried to load the saved password but it is not there
else if (savedPassword == null && !savedPasswordLoading) {
setLoading(false);
}
}, [waitingForResponse, savedPasswordLoading, savedPassword]);
return {login, logout, password: savedPassword, loggedIn, loading};
}

9
server/traque-front/hook/useSocketListener.jsx
View File

@@ -1,9 +0,0 @@
"use client";
import { useEffect } from "react";
export default function useSocketListener(socket, event, callback) {
useEffect(() => {
socket.on(event,callback);
return () => socket.off(event, callback);
}, []);
}

18
server/traque-front/jsconfig.json
View File

@@ -1,8 +1,18 @@
{
"compilerOptions": {
"paths": {
"@/*": ["./*"]
"baseUrl": ".",
"paths": { "@/*": ["src/*"] },
"target": "es2022",
"lib": ["dom", "dom.iterable", "esnext"],
"checkJs": true,
"jsx": "preserve",
"module": "esnext",
"moduleResolution": "bundler",
"esModuleInterop": true,
"skipLibCheck": true,
"allowJs": true,
"noEmit": true,
"incremental": true
},
"lib": ["es2015"]
}
"exclude": ["node_modules", ".next"],
}

4
server/traque-front/next.config.mjs
View File

@@ -7,10 +7,10 @@ const nextConfig = {
return [
{
source: '/',
destination: '/admin',
destination: '/login',
permanent: false,
},
]
];
},
};

2423
server/traque-front/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

17
server/traque-front/package.json
View File

@@ -10,21 +10,28 @@
},
"dependencies": {
"@hello-pangea/dnd": "^16.6.0",
"globals": "^17.4.0",
"leaflet": "^1.9.4",
"leaflet-defaulticon-compatibility": "^0.1.2",
"leaflet-polylinedecorator": "^1.6.0",
"next": "^14.2.9",
"next": "^15.2.0",
"next-runtime-env": "^3.2.2",
"react": "^18",
"react-dom": "^18",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-leaflet": "^4.2.1",
"socket.io-client": "^4.7.5"
},
"devDependencies": {
"@next/eslint-plugin-next": "^15.2.0",
"autoprefixer": "^10.0.1",
"eslint": "^8",
"eslint-config-next": "14.1.4",
"eslint": "^9.39.3",
"eslint-config-next": "^15.2.0",
"eslint-plugin-react": "^7.37.5",
"eslint-plugin-react-hooks": "^7.0.1",
"postcss": "^8",
"tailwindcss": "^3.3.0"
},
"overrides": {
"next": "$next"
}
}

3
server/traque-front/src/components/Show.jsx Normal file
View File

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

2
server/traque-front/components/input.jsx → server/traque-front/src/components/input.jsx
View File

@@ -5,5 +5,5 @@ export function NumberInput({onChange, ...props}) {
return (
<input className="w-12 h-10 text-center rounded ring-1 ring-inset ring-black placeholder:text-gray-400" onChange={(e) => onChange(customStringToInt(e.target.value))} {...props} />
)
);
}

40
server/traque-front/components/layer.jsx → server/traque-front/src/components/layer.jsx
View File

@@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import { Marker, Tooltip, CircleMarker, Circle, Polygon, useMap } from "react-leaflet";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import 'leaflet-polylinedecorator';
@@ -35,16 +36,13 @@ export function Label({position, label = "", color = "black", display = true}) {
}
export function Tag({text = "", display = true}) {
const offset = [0.5, -15];
const opacity = 1;
return (
display && <Tooltip permanent direction="top" offset={offset} opacity={opacity} className="custom-tooltip">{text}</Tooltip>
display && <Tooltip permanent direction="top" offset={[0.5, -15]} opacity={1} className="custom-tooltip">{text}</Tooltip>
);
}
export function CircleZone({circle, color = "black", display = true, children}) {
const opacity = '0.1';
export function CircleZone({circle, color = "black", display = true, children = null}) {
const opacity = 0.1;
const border = 3;
return (
@@ -55,8 +53,8 @@ export function CircleZone({circle, color = "black", display = true, children})
);
}
export function PolygonZone({polygon, color = "black", display = true, children}) {
const opacity = '0.1';
export function PolygonZone({polygon, color = "black", display = true, children = null}) {
const opacity = 0.1;
const border = 3;
return (
@@ -67,7 +65,7 @@ export function PolygonZone({polygon, color = "black", display = true, children}
);
}
export function Position({position, color = "blue", onClick = () => {}, display = true, children}) {
export function Position({position, color = "blue", onClick = () => {}, display = true, children = null}) {
const positionIcon = new L.Icon({
iconUrl: `/icons/marker/${color}.png`,
@@ -119,15 +117,15 @@ export function Arrow({ pos1, pos2, color = 'black', display = true }) {
const unitY = dy / distance;
// Calculate new start and end points in screen coordinates
const newStartPoint = {
x: point1.x + (unitX * insetPixels),
y: point1.y + (unitY * insetPixels)
};
const newStartPoint = L.point(
point1.x + (unitX * insetPixels),
point1.y + (unitY * insetPixels)
);
const newEndPoint = {
x: point2.x - (unitX * insetPixels),
y: point2.y - (unitY * insetPixels)
};
const newEndPoint = L.point(
point2.x - (unitX * insetPixels),
point2.y - (unitY * insetPixels)
);
// Convert back to lat/lng
const newStartLatLng = map.containerPointToLatLng(newStartPoint);
@@ -141,8 +139,10 @@ export function Arrow({ pos1, pos2, color = 'black', display = true }) {
// Update when map moves or zooms
map.on('zoom move', updateInsetLine);
return () => map.off('zoom move', updateInsetLine);
}, [pos1, pos2]);
return () => {
map.off('zoom move', updateInsetLine);
};
}, [map, pos1, pos2]);
useEffect(() => {
if (!display || !insetPositions) return;
@@ -175,7 +175,7 @@ export function Arrow({ pos1, pos2, color = 'black', display = true }) {
map.removeLayer(polyline);
map.removeLayer(decorator);
};
}, [display, insetPositions])
}, [color, display, insetPositions, map]);
return null;
}

4
server/traque-front/components/list.jsx → server/traque-front/src/components/list.jsx
View File

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
export function List({array, selectedId, onSelected, children}) {
const canSelect = selectedId !== undefined
const canSelect = selectedId !== undefined;
const cursor = () => canSelect ? " cursor-pointer" : "";
const outline = (id) => canSelect && id === selectedId ? " outline outline-4 outline-black" : "";
@@ -27,7 +27,7 @@ export function ReorderList({droppableId, array, setArray, children}) {
useEffect(() => {
setLocalArray(array);
}, [array])
}, [array]);
function reorder(list, startIndex, endIndex) {
const result = Array.from(list);

34
server/traque-front/components/map.jsx → server/traque-front/src/components/map.jsx
View File

@@ -1,7 +1,7 @@
import { useEffect, useState } from "react";
import { MapContainer, TileLayer, useMap } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import { mapLocations, mapZooms, mapStyles } from "@/util/configurations";
import { mapLocations, mapZooms, mapStyles } from "@/config/configurations";
export function MapPan({center, zoom, animate=false}) {
const map = useMap();
@@ -10,12 +10,13 @@ export function MapPan({center, zoom, animate=false}) {
if (center && zoom) {
map.flyTo(center, zoom, { animate: animate });
}
}, [center, zoom]);
}, [animate, center, map, zoom]);
return null;
}
export function MapEventListener({ onLeftClick, onRightClick, onMouseMove, onDragStart, onWheel }) {
// eslint-disable-next-line no-unused-vars
export function MapEventListener({ onLeftClick = (e) => {}, onRightClick = (e) => {}, onMouseMove = (e) => {}, onDragStart = (e) => {}, onWheel = (e) => {} }) {
const map = useMap();
// TODO use useMapEvents instead of this + detect when zoom
@@ -53,7 +54,7 @@ export function MapEventListener({ onLeftClick, onRightClick, onMouseMove, onDra
map.off('mousemove', handleMouseMove);
map.off('mouseup', handleMouseUp);
};
}, [onLeftClick, onRightClick]);
}, [map, onLeftClick, onRightClick]);
// Handle the right click
useEffect(() => {
@@ -69,8 +70,8 @@ export function MapEventListener({ onLeftClick, onRightClick, onMouseMove, onDra
return () => {
map.off('mousedown', handleMouseDown);
}
}, [onRightClick]);
};
}, [map, onRightClick]);
// Handle the mouse move
useEffect(() => {
@@ -80,8 +81,8 @@ export function MapEventListener({ onLeftClick, onRightClick, onMouseMove, onDra
return () => {
map.off('mousemove', onMouseMove);
}
}, [onMouseMove]);
};
}, [map, onMouseMove]);
// Handle the drag start
useEffect(() => {
@@ -91,8 +92,8 @@ export function MapEventListener({ onLeftClick, onRightClick, onMouseMove, onDra
return () => {
map.off('dragstart', onDragStart);
}
}, [onDragStart]);
};
}, [map, onDragStart]);
useEffect(() => {
if (!onWheel) return;
@@ -102,8 +103,8 @@ export function MapEventListener({ onLeftClick, onRightClick, onMouseMove, onDra
return () => {
container.removeEventListener('wheel', onWheel);
}
}, [onWheel]);
};
}, [map, onWheel]);
// Prevent right click context menu
useEffect(() => {
@@ -111,7 +112,7 @@ export function MapEventListener({ onLeftClick, onRightClick, onMouseMove, onDra
const preventContextMenu = (e) => e.preventDefault();
container.addEventListener('contextmenu', preventContextMenu);
return () => container.removeEventListener('contextmenu', preventContextMenu);
}, []);
}, [map]);
return null;
}
@@ -131,7 +132,7 @@ function MapResizeWatcher() {
return null;
}
export function CustomMapContainer({mapStyle, children}) {
export function CustomMapContainer({mapStyle = mapStyles.default, children = null}) {
const [location, setLocation] = useState(null);
useEffect(() => {
@@ -154,11 +155,12 @@ export function CustomMapContainer({mapStyle, children}) {
}, []);
return (
// @ts-ignore
<MapContainer className='w-full h-full' center={mapLocations.paris} zoom={mapZooms.low} scrollWheelZoom={true}>
<TileLayer url={(mapStyle || mapStyles.default).url} attribution={(mapStyle || mapStyles.default).attribution}/>
<TileLayer url={mapStyle.url} attribution={mapStyle.attribution}/>
<MapPan center={location} zoom={mapZooms.high}/>
<MapResizeWatcher/>
{children}
</MapContainer>
)
);
}

2
server/traque-front/components/section.jsx → server/traque-front/src/components/section.jsx
View File

@@ -1,4 +1,4 @@
export function Section({title, outerClassName, innerClassName, children}) {
export function Section({ title = null, outerClassName = "", innerClassName = "", children = null }) {
return (
<div className={outerClassName}>
<div className='w-full h-full flex flex-col shadow-2xl'>

10
server/traque-front/util/configurations.js → server/traque-front/src/config/configurations.js
View File

@@ -2,12 +2,12 @@ import { ZoneTypes, Colors } from "./types";
export const mapLocations = {
paris: [48.86, 2.33]
}
};
export const mapZooms = {
low: 4,
high: 15,
}
};
export const mapStyles = {
default: {
@@ -28,12 +28,12 @@ export const mapStyles = {
placementZoneColor: "#0FF",
playerColor: "blue"
},
}
};
export const defaultZoneSettings = {
circle: {type: ZoneTypes.CIRCLE, min: null, max: null, reductionCount: 4, duration: 10},
polygon: {type: ZoneTypes.POLYGON, polygons: []}
}
};
export const teamStatus = {
default: { label: "Indisponible", color: Colors.black },
@@ -45,4 +45,4 @@ export const teamStatus = {
waiting: { label: "En attente", color: Colors.grey },
victory: { label: "Victoire", color: Colors.green },
defeat: { label: "Défaite", color: Colors.red },
}
};

6
server/traque-front/util/types.js → server/traque-front/src/config/types.js
View File

@@ -4,16 +4,16 @@ export const Colors = {
green: "#19e119",
red: "#e11919",
orange: "#fa6400"
}
};
export const GameState = {
SETUP: "default",
PLACEMENT: "placement",
PLAYING: "playing",
FINISHED: "finished"
}
};
export const ZoneTypes = {
CIRCLE: "circle",
POLYGON: "polygon"
}
};

47
server/traque-front/src/context/adminContext.jsx Normal file
View File

@@ -0,0 +1,47 @@
"use client";
import { createContext, useContext, useMemo, useState, useEffect, useCallback } from "react";
import { GameState } from "@/config/types";
import { socket } from "../services/socket/connection";
const AdminContext = createContext(null);
const useOnEvent = (event, callback) => {
useEffect(() => {
socket.on(event, callback);
return () => {
socket.off(event, callback);
};
}, [event, callback]);
};
export function AdminProvider({ children }) {
const [gameState, setGameState] = useState(GameState.SETUP);
const [teams, setTeams] = useState([]);
const [zones, setZones] = useState(null);
const [settings, setSettings] = useState(null);
useOnEvent("update-full", ({ gameState, teams, zones, settings }) => {
setGameState(gameState);
setTeams(teams);
setZones(zones);
setSettings(settings);
});
const getTeam = useCallback((teamId) => {
return teams.find(team => team.id === teamId);
}, [teams]);
const value = useMemo(() => (
{ gameState, teams, zones, settings, getTeam }
), [gameState, teams, zones, settings, getTeam]);
return (
<AdminContext.Provider value={value}>
{children}
</AdminContext.Provider>
);
}
export function useAdmin() {
return useContext(AdminContext);
}

50
server/traque-front/src/context/authContext.jsx Normal file
View File

@@ -0,0 +1,50 @@
"use client";
import { createContext, useContext, useState, useMemo, useCallback } from "react";
import useLocalStorage from "@/hook/useLocalStorage";
import { emitLogin, emitLogout } from '@/services/socket/emitters';
const AuthContext = createContext(null);
export function AuthProvider({ children }) {
const [isLoggedIn, setIsLoggedIn] = useState(false);
// eslint-disable-next-line no-unused-vars
const [savedPassword, setSavedPassword] = useLocalStorage("admin_password", null);
const login = useCallback(async (password) => {
if (isLoggedIn) return;
if (await emitLogin(password)) {
setIsLoggedIn(true);
setSavedPassword(password);
return true;
} else {
return false;
}
}, [isLoggedIn, setSavedPassword]);
const logout = useCallback(() => {
if (!isLoggedIn) return;
setSavedPassword(null);
setIsLoggedIn(false);
emitLogout();
}, [isLoggedIn, setSavedPassword]);
/*
useEffect(() => {
if (!isLoggedIn && savedPassword) {
login(savedPassword)
}
}, [savedPassword]);
*/
const value = useMemo(() => ({ isLoggedIn, login, logout }), [isLoggedIn, login, logout]);
return (
<AuthContext.Provider value={value}>
{children}
</AuthContext.Provider>
);
}
export function useAuth() {
return useContext(AuthContext);
}

8
server/traque-front/hook/useCircleDraw.jsx → server/traque-front/src/hook/useCircleDraw.jsx
View File

@@ -1,12 +1,14 @@
"use client";
import { useEffect, useState } from "react";
import { useState } from "react";
export default function useMapCircleDraw(circle, setCircle) {
const [drawingCircle, setDrawingCircle] = useState(null);
const [prevCircle, setPrevCircle] = useState(circle);
useEffect(() => {
if (circle !== prevCircle) {
setPrevCircle(circle);
setDrawingCircle(null);
}, [circle]);
}
function handleLeftClick(e) {
if (drawingCircle) {

10
server/traque-front/hook/useLocalStorage.jsx → server/traque-front/src/hook/useLocalStorage.jsx
View File

@@ -1,19 +1,15 @@
"use client";
import { useEffect, useState } from "react";
import { useState } from "react";
export default function useLocalStorage(key, initialValue) {
const [storedValue, setStoredValue] = useState(initialValue);
const [loading, setLoading] = useState(true);
useEffect(() => {
try {
const item = window.localStorage.getItem(key);
setStoredValue(item ? JSON.parse(item) : initialValue);
} catch (error) {
console.log(error);
}
setLoading(false);
}, []);
const setValue = value => {
try {
@@ -23,7 +19,7 @@ export default function useLocalStorage(key, initialValue) {
} catch (error) {
console.log(error);
}
}
};
return [storedValue, setValue, loading];
return [storedValue, setValue];
}

1
server/traque-front/hook/useLocalVariable.jsx → server/traque-front/src/hook/useLocalVariable.jsx
View File

@@ -1,3 +1,4 @@
"use client";
import { useState, useEffect } from "react";
export default function useLocalVariable(variable, setVariable) {

0
server/traque-front/hook/useMultipleCircleDraw.jsx → server/traque-front/src/hook/useMultipleCircleDraw.jsx
View File

10
server/traque-front/hook/usePolygonDraw.jsx → server/traque-front/src/hook/usePolygonDraw.jsx
View File

@@ -1,5 +1,5 @@
"use client";
import { useEffect, useState } from "react";
import { useState } from "react";
import { useMap } from "react-leaflet";
export default function useMapPolygonDraw(polygons, addPolygon, removePolygon) {
@@ -8,11 +8,13 @@ export default function useMapPolygonDraw(polygons, addPolygon, removePolygon) {
const nodeHighlightDistance = 30; // px
const [currentPolygon, setCurrentPolygon] = useState([]);
const [highlightNodes, setHighlightNodes] = useState([]);
const [prevPolygons, setPrevPolygons] = useState([]);
useEffect(() => {
if (polygons != prevPolygons) {
setPrevPolygons(polygons);
setCurrentPolygon([]);
setHighlightNodes([]);
}, [polygons])
}
function latlngEqual(latlng1, latlng2, epsilon = 1e-9) {
return Math.abs(latlng1.lat - latlng2.lat) < epsilon && Math.abs(latlng1.lng - latlng2.lng) < epsilon;
@@ -125,7 +127,7 @@ export default function useMapPolygonDraw(polygons, addPolygon, removePolygon) {
return e.latlng;
// Else return the closest close node
} else {
return closeNodes.reduce( (min, current) => { return current[0] < min[0] ? current : min } )[1];
return closeNodes.reduce((min, current) => current[0] < min[0] ? current : min)[1];
}
}

11
server/traque-front/src/services/socket/connection.js Normal file
View File

@@ -0,0 +1,11 @@
// Socket
import { env } from "next-runtime-env";
import { io } from "socket.io-client";
const NEXT_PUBLIC_SOCKET_HOST = env("NEXT_PUBLIC_SOCKET_HOST");
const SOCKET_URL = (NEXT_PUBLIC_SOCKET_HOST == "localhost" ? "ws://" : "wss://") + NEXT_PUBLIC_SOCKET_HOST;
const ADMIN_SOCKET_URL = SOCKET_URL + "/admin";
export const socket = io(ADMIN_SOCKET_URL, {
path: "/back/socket.io",
});

73
server/traque-front/src/services/socket/emitters.js Normal file
View File

@@ -0,0 +1,73 @@
// Services
import { socket } from "@/services/socket/connection";
const customEmit = (event, ...args) => {
if (!socket?.connected) return false;
console.log("Emit", event);
socket.emit(event, ...args);
return true;
};
const customEmitCallback = (event, ...args) => {
return new Promise((resolve, reject) => {
if (!socket?.connected) return reject(new Error("Socket not connected"));
console.log("Emit", event);
const timeout = setTimeout(() => {
console.warn("Server timeout");
reject(new Error("Timeout"));
}, 3000);
socket.emit(event, ...args, (response) => {
clearTimeout(timeout);
console.log("Received : ", response);
resolve(response);
});
});
};
// Authentication
export const emitLogin = (password) => {
return customEmitCallback("login", password);
};
export const emitLogout = () => {
return customEmit("logout");
};
// Game
export const emitState = (state) => {
return customEmit("state", state);
};
export const emitSettings = (settings) => {
return customEmit("settings", settings);
};
// Teams
export const emitAddTeam = (teamName) => {
return customEmit("add-team", teamName);
};
export const emitRemoveTeam = (teamId) => {
return customEmit("remove-team", teamId);
};
export const emitReorderTeam = (newTeamsOrder) => {
return customEmit("reorder-team", newTeamsOrder);
};
export const emitEliminateTeam = (teamId) => {
return customEmit("eliminate-team", teamId);
};
export const emitReviveTeam = (teamId) => {
return customEmit("revive-team", teamId);
};

4
server/traque-front/util/functions.js → server/traque-front/src/util/functions.js
View File

@@ -1,5 +1,5 @@
import { GameState } from './types';
import { teamStatus } from './configurations';
import { GameState } from '../config/types';
import { teamStatus } from '../config/configurations';
export function getStatus(team, gamestate) {
if (!team) return null;