- 
-
+
- {needsMiniNav ? 
+
- {/* ↓ this div is the white vertical separator on screen */}
- {hideTranslation ?
- null
- :
- <>
-
diff --git a/src/components/LanguageSelector/LanguageSelector.tsx b/src/components/LanguageSelector/LanguageSelector.tsx
index 8e2ebf7..65245ed 100644
--- a/src/components/LanguageSelector/LanguageSelector.tsx
+++ b/src/components/LanguageSelector/LanguageSelector.tsx
@@ -1,77 +1,78 @@
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
-import letterswitch from '/src/svg_logos/letter_switch.svg';
-import x_cross from '/src/svg_logos/x_cross.svg';
+
const LanguageSelector = () => {
const { t, i18n } = useTranslation();
const [showPopup, setShowPopup] = useState(false);
- const button_green = "px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 transition duration-300"; //factorisation of button attributes for better readability and ease of modification
const changeLanguage = (lng: string) => {
i18n.changeLanguage(lng);
setShowPopup(false); // close pop up after changing language
-
};
+ const buttonStyle = 'relative flex flex-row items-center justify-center cursor-pointer transition-transform duration-300 hover:scale-105'
return (
-
+
{/* Button to open the popup */}
-
+ 
{ setShowPopup(true) }} />
{/* Pop-up */}
{showPopup && (
-
setShowPopup(false)}>
-
-
e.stopPropagation()}
- style={{ position: 'relative', top: '0', right: '0' }}
- >
-
+
setShowPopup(false)}>
+
+
e.stopPropagation()}>
+
+ setShowPopup(false)} />
+
+
+
{t('select_language')}
+
+
+
+
+
-
- );
-};
-
-export default MiniNavigation;
diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
deleted file mode 100644
index 92309d7..0000000
--- a/src/components/Navigation/Navigation.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-// src/components/navigation.tsx
-import { Link } from 'react-router-dom';
-import logoSimple from '/images/SIMPLE_Logo_Complet_Sticker.png'; // Replace with the correct path to your image
-
-const Navigation = () => {
- return (
-
- );
-};
-
-export default Navigation;
diff --git a/src/components/SelectorSimulations/SelectorSimulations.tsx b/src/components/SelectorSimulations/SelectorSimulations.tsx
index d39d9df..72b35e7 100644
--- a/src/components/SelectorSimulations/SelectorSimulations.tsx
+++ b/src/components/SelectorSimulations/SelectorSimulations.tsx
@@ -4,23 +4,27 @@ import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import Footer from '../Footer/Footer';
import Header from '../Header/Header';
+import { Link } from 'react-router-dom';
import SimulationList from './SimulationList';
-import arrow_back from "/src/svg_logos/arrow_back.svg";
import { getLogger } from '@logtape/logtape';
-import { Simulation } from '../../api/core/Constants';
+import { VU_CATALOG_SETTING_JSON, VU_MODEL_SETTING_JSON } from '../../api/core/Constants';
+
const SelectorSimulations = () => {
- const { ws, isWsConnected, gama, simulationList } = useWebSocket();
+ const { ws, isWsConnected, gamaless, gama, simulationList } = useWebSocket();
const [loading, setLoading] = useState(true);
const [connectionStatus, setConnectionStatus] = useState('Waiting for connection ...');
const { t } = useTranslation();
- const [subProjectsList, setSubProjectsList] = useState<[Simulation]>([]);
+ const [subProjectsList, setSubProjectsList] = useState<(VU_CATALOG_SETTING_JSON | VU_MODEL_SETTING_JSON)[]>(simulationList);
+ useEffect(() => {
+ if (simulationList && simulationList.length > 0) {
+ setSubProjectsList(simulationList);
+ }
+ }, [simulationList]);
+
const [selectedSplashscreen, setSelectedSplashscreen] = useState("")
const [path, setPath] = useState([]);
-
const navigate = useNavigate();
-
-
- const logger = getLogger(["components", "VideoStreamManager"]);
+ const logger = getLogger(["components", "SelectorSimulation"]);
useEffect(() => {
if (isWsConnected && ws !== null) {
@@ -38,31 +42,35 @@ const SelectorSimulations = () => {
}
}, [simulationList]);
-
useEffect(() => {
// the path here is a list of nested indexes, which are used to see which catalogs the user clicked
if (path.length > 0) {
let list = simulationList
for (const index of path) {
logger.debug("index in the use effect: {index}", { index })
- // @ts-expect-error
- if (list[index].entries.length > 0) {
- // @ts-expect-error
+ if (list[index].type === "catalog") {
list = list[index].entries
} else {
- // @ts-expect-error
- list = list[index]
+ list = [list[index]]
}
setSubProjectsList(list)
}
+ } else {
+ setSubProjectsList(simulationList)
}
- })
-
+ }, [path, simulationList])
+ /**Function used to add a clicked subfolder to path
+ * path is an ordered array containing the indexes of all clicked subfolders
+ * @param index
+ */
const addToPath = (index: number) => {
setPath([...path, index])
}
+ /**Removes the last index used to travel the subproject folder
+ *
+ */
const back = () => {
if (path.length > 1) {
setPath([...path.slice(0, -1)])
@@ -72,71 +80,65 @@ const SelectorSimulations = () => {
setSubProjectsList([])
}
}
+
/**
* handles either navigating through the list of projects or launch a simulation
* @param index index of the current selected element
*/
const handleSimulation = (index: number) => {
-
if (!isWsConnected || ws === null) {
logger.warn("Websocket not connected \n isWsConnected:{isWsConnected}\n ws:{ws}", { isWsConnected, ws })
return;
}
- if (subProjectsList.length <= 0) { //no subproject is selected, we either enter a folder or load a simulation
- if (simulationList[index].type == "catalog") { //? we additionaly check if the simulation is a catalog, not necessary but allows for adding extra types
- // @ts-expect-error ↓ this is a catalog, which means it must have an "entries" attribute
- logger.debug("catalog detected, subprojectList:{subprojectList}", { subProjectList: JSON.stringify(simulationList[index].entries) });
- try {
- // @ts-expect-error ↓ this is a list, so assigning it to another list should be fine
- setSubProjectsList(simulationList[index].entries);
- addToPath(index)
- if ('splashscreen' in simulationList[index]) {
- setSelectedSplashscreen(simulationList[index].splashscreen);
+ if (subProjectsList[index].type === "catalog") { //? we additionaly check if the simulation is a catalog, not necessary but allows for adding extra types
+ const catalog_item = subProjectsList[index];
+ //we define a constant to tell typescript that the type of subProjectsList[index] cannot change and is a VU_CATALOG_SETTING_JSON, meaning that entries is defined
+ logger.debug("catalog detected, subprojectList:{subprojectList}", { subProjectList: JSON.stringify(catalog_item.entries) });
+ try {
+ setSubProjectsList(catalog_item.entries);
+ addToPath(index)
+ if (simulationList[index].splashscreen !== undefined) {
+ setSelectedSplashscreen(simulationList[index].splashscreen);
- } else {
- logger.warn("No splashscreen could be found for simulation {simulation}", { simulation: simulationList[index].experimentName }) //TODO finir le logger warn
- }
- logger.debug("handlesimulation, simulationList[index].type == catalog, {expName}", { expName: subProjectsList[index].name });
+ } else {
+ logger.warn("No splashscreen could be found for simulation {simulation}", { simulation: catalog_item.name })
}
- catch (e) { logger.error("no subprojects, ERROR:{e}", { e }); }
-
- } else if (simulationList[index].type == "json_settings") {
- ws.send(JSON.stringify({ type: 'send_simulation', simulation: simulationList[index] }));
- setTimeout(() => {
- navigate('/simulationManager');
- }, 100);
- } else if (Array.isArray(simulationList[index])) {
- logger.debug(simulationList[index].model_file_path)
- addToPath(index)
+ logger.debug("called handle simulation, selected item is a catalog of name:{expName}", { expName: subProjectsList[index].name });
}
+ catch (e) { logger.error("no subprojects, ERROR:{e}", { e }); }
+
+ } else if (simulationList[index].type == "json_settings") {
+ ws.send(JSON.stringify({ type: 'send_simulation', simulation: simulationList[index] }));
+ setTimeout(() => {
+ navigate('/simulationManager');
+ }, 100);
// --------------------------------------------------------- sub project selected
- } else if (subProjectsList.length > 0) {
- if (subProjectsList[index].type == "json_settings") {
- ws.send(JSON.stringify({ type: 'send_simulation', simulation: subProjectsList[index] }));
- setTimeout(() => {
- navigate('/simulationManager');
- }, 100);
-
- } else {
- if (subProjectsList[index].type == "catalog") {
- try {
- // @ts-expect-error ↓ this is a list, so assigning it to another list should be fine
- // setSubProjectsList(subProjectsList[index].entries);
- addToPath(index)
- logger.debug("[SELECTOR SIMULATION] handlesimulation, simulationList[index].type == catalog, {name}", { name: subProjectsList[0].name });
- } // in any case, we catch the error and log it if any
- catch (e) {
- logger.error("no subprojects, ERROR: {e}", e);
- }
+
+ }
+ if (subProjectsList[index].type == "json_settings") {
+ ws.send(JSON.stringify({ type: 'send_simulation', simulation: subProjectsList[index] }));
+ setTimeout(() => {
+ navigate('/simulationManager');
+ }, 100);
+ } else {
+ if (subProjectsList[index].type == "catalog") {
+ try {
+ addToPath(index)
+ logger.debug("handlesimulation, simulationList[index].type == catalog, {name}", { name: subProjectsList[index].name });
+ } // in any case, we catch the error and log it if any
+ catch (e) {
+ logger.error("no subprojects, ERROR: {e}", { e: (e as Error).message });
}
}
}
+
};
- // Loop which tries to connect to Gama
+ // Loop which tries to connect to Gama (skipped in GAMALESS mode)
useEffect(() => {
+ if (gamaless) return;
let interval: NodeJS.Timeout;
if (ws && !gama.connected) {
interval = setInterval(() => {
@@ -144,11 +146,10 @@ const SelectorSimulations = () => {
logger.info('Trying to connect to GAMA, connection status: {gamaStatus}', { gamaStatus: gama.connected });
}, 3000);
}
-
return () => {
clearInterval(interval);
};
- }, [ws, gama.connected]);
+ }, [ws, gama.connected, gamaless]);
// Display connexion status
useEffect(() => {
@@ -162,79 +163,54 @@ const SelectorSimulations = () => {
return (
+ 
changeLanguage('en')}
+ />
+
+ changeLanguage('en')}
+ />
+ English
+
+ 
changeLanguage('fr')}
+ />
+
+ changeLanguage('fr')}
+ />
+ Français
+
+ 
changeLanguage('vn')}
+ />
+
+ changeLanguage('vn')}
+ />
+ Việt
+
+ 
changeLanguage('th')}
+ />
+
+
+
+
- changeLanguage('th')}
+ />
+ แบบไทย
+
-
-
-
-
diff --git a/src/components/Navigation/MiniNavigation.tsx b/src/components/Navigation/MiniNavigation.tsx
deleted file mode 100644
index b38e570..0000000
--- a/src/components/Navigation/MiniNavigation.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Link } from 'react-router-dom';
-import logoSimple from '/images/SIMPLE_Logo_Complet_Sticker.png'; // Replace with the correct path to your image
-
-const MiniNavigation = () => {
- return (
-
-
-
+
+
+ GAMALESS Mode
+Simulation features are disabled. No GAMA server is connected.
+Headset management is still operational.
+
-
) : (
-
- // disable
- {t('loading')}
- -
+
);
diff --git a/src/components/SelectorSimulations/SimulationList.tsx b/src/components/SelectorSimulations/SimulationList.tsx
index fb97529..9cd4c50 100644
--- a/src/components/SelectorSimulations/SimulationList.tsx
+++ b/src/components/SelectorSimulations/SimulationList.tsx
@@ -1,49 +1,63 @@
-import arrow_down from '../../svg_logos/arrow_drop_down.svg';
+import { VU_MODEL_SETTING_JSON, VU_CATALOG_SETTING_JSON } from '../../api/core/Constants';
+import { getLogger } from '@logtape/logtape';
+
interface SimulationListProps {
- list: any[];
- handleSimulation: any;
- gama: any;
+ list: (VU_MODEL_SETTING_JSON | VU_CATALOG_SETTING_JSON)[];
+ handleSimulation: (index: number) => void;
+ gama: {
+ connected: boolean;
+ loading: "hidden" | "visible";
+ experiment_state: string;
+ experiment_name: string;
+ content_error: string;
+ }
+
className?: string;
}
+const logger = getLogger(["components", "SimulationList"]);
const SimulationList = ({ list, handleSimulation, gama, className }: SimulationListProps) => {
+ const frame = [
+ ` /images/Game_selection/Game_selection_Aquadefender.png`,
+ ` /images/Game_selection/Game_selection_Lulut.png`,
+ ` /images/Game_selection/Game_selection_Cambodia.png`,
+ ` /images/Game_selection/Game_selection_Biodivrestorer.png`,
+ ` /images/Game_selection/Game_selection_OZD.png`,
+ ` /images/Game_selection/Game_selection_Lao.png`,
+ ]
+
return (
-
{
- //the content of this bracket is the back button
- subProjectsList.length > 0 && path.length >= 1 ?
-
)}
-
-
back()}
- >
- 
-
-
- : null}
-
- {subProjectsList.length > 0 ? {t('select_subproject')}
:{t('select_simulation')}
} - - {/* //TODO add translation for Thai language */} - -
-
+ //? Shows the back button if in a nested folder
+ path.length >= 1 &&
+ back()}
+ className='cursor-pointer size-[6dvh] hover:scale-110 transition-transform duration-200 absolute left-[3.1dvw] top-10 ' />
+
+ }
-
+
{/* Display the status, ask for the user to connect to Gama if still not */}
-
+
- {subProjectsList.length > 0 ?
-
-
+
+
-
-
+
+
-
+
-
{gama.connected ? '' : connectionStatus}
-
-
+
+
+ {list.map((simulation: VU_MODEL_SETTING_JSON | VU_CATALOG_SETTING_JSON, index: number) => (
+
- {list.map((simulation, index) => (
-
{/* ↓ added one for folders to start at 1 instead of 0 */}
{simulation.type == "json_settings" ? simulation.name : simulation.name ? simulation.name : `subprojects folder n°${index + 1}`}
diff --git a/src/components/SimulationManager/SimulationManager.tsx b/src/components/SimulationManager/SimulationManager.tsx
index f4aa234..6e169f7 100644
--- a/src/components/SimulationManager/SimulationManager.tsx
+++ b/src/components/SimulationManager/SimulationManager.tsx
@@ -1,36 +1,31 @@
+//! accomodates the gama server map
import { useState, useEffect } from 'react';
-import Button from '../Button/Button';
import VRHeadset from '../VRHeadset/VRHeadset';
import { useWebSocket } from '../WebSocketManager/WebSocketManager';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import Footer from '../Footer/Footer';
import SimulationManagerPlayer from './SimulationManagerPlayer';
-import x_cross from '/src/svg_logos/x_cross.svg';
-import visibility from '/src/svg_logos/visibility.svg'
import Header from '../Header/Header';
import { Link } from 'react-router-dom';
import { getLogger } from '@logtape/logtape';
+
+
export interface Player {
connected: boolean;
date_connection: string;
in_game: boolean;
}
-const logger= getLogger(["simulationManager", "SimulationManager"]);
const SimulationManager = () => {
- const { ws, gama, playerList, selectedSimulation } = useWebSocket(); // `removePlayer` is now available
+
+ const logger = getLogger(["simulationManager", "SimulationManager"]);
+ const { ws, gamaless, gama, playerList, selectedSimulation } = useWebSocket(); // `removePlayer` is now available
const navigate = useNavigate();
const [simulationStarted, setSimulationStarted] = useState(false);
const { t } = useTranslation();
- const [screenModeDisplay, setScreenModeDisplay] = useState("gama_screen");
const [startButtonClicked, setStartButtonClicked] = useState(false);
- const channel = new BroadcastChannel('simulation-to-stream'); //using the broadcast api to update display type in the streamPlayerScreen
- const updateDisplay = (screenModeDisplay: string) => {
- setScreenModeDisplay(screenModeDisplay);
- channel.postMessage({ screenModeDisplay });
- };
const startClicked = () => {
setStartButtonClicked(true);
@@ -71,31 +66,14 @@ const SimulationManager = () => {
}
};
- // Choice for the ICON :
- const icon = gama.experiment_state === 'LAUNCHING' ? (
-
-
- ) : gama.experiment_state === 'NONE' || gama.experiment_state === 'NOTREADY' || gama.experiment_state === 'PAUSED' ? (
-
- ) : (
-
- );
-
-
useEffect(() => {
- if (!selectedSimulation) {
+ if (!gamaless && !selectedSimulation) {
navigate('/');
}
- }, [selectedSimulation, navigate]);
+ }, [gamaless, selectedSimulation, navigate]);
// Handler for removing players
@@ -103,9 +81,9 @@ const SimulationManager = () => {
return (
-
- {/* //TODO changer ce qu'il y a dans le key (mettre un index défini par l'élément, passer ça en prop ?) tel quel, si la liste change, alors l'index de chaque élément peut changer, donc l'affichage est pseudo aléatoire */}
handleSimulation(index) : () => { }}>
+ {/* {simulation.type == "catalog" ?
+
+ handleSimulation(index) : () => { }}
- >
- {simulation.type == "catalog" ? 
: null} {/* //? downward arrow */}
-
-
-
-
-
-
- handleSimulation(index) : () => { }}>
+ {/* {simulation.type == "catalog" ? : null} //? downward arrow */}
+
+ {simulation.type === "catalog" ?
+
+ :
+ )
+ }
+ {/* //TODO the src of the image is a placeholder, selects one of the 5 frames at random */}
+ { e.target.src = "/images/simple_logo.png"; logger.warn("couldn't load an image for simulation {index}, using the placeholder", { index }) }}
+ />
+
+
+
+
+
{/* ↓ added one for folders to start at 1 instead of 0 */}
{simulation.type == "json_settings" ? simulation.name : simulation.name ? simulation.name : `subprojects folder n°${index + 1}`}
diff --git a/src/components/SimulationManager/SimulationManager.tsx b/src/components/SimulationManager/SimulationManager.tsx
index f4aa234..6e169f7 100644
--- a/src/components/SimulationManager/SimulationManager.tsx
+++ b/src/components/SimulationManager/SimulationManager.tsx
@@ -1,36 +1,31 @@
+//! accomodates the gama server map
import { useState, useEffect } from 'react';
-import Button from '../Button/Button';
import VRHeadset from '../VRHeadset/VRHeadset';
import { useWebSocket } from '../WebSocketManager/WebSocketManager';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import Footer from '../Footer/Footer';
import SimulationManagerPlayer from './SimulationManagerPlayer';
-import x_cross from '/src/svg_logos/x_cross.svg';
-import visibility from '/src/svg_logos/visibility.svg'
import Header from '../Header/Header';
import { Link } from 'react-router-dom';
import { getLogger } from '@logtape/logtape';
+
+
export interface Player {
connected: boolean;
date_connection: string;
in_game: boolean;
}
-const logger= getLogger(["simulationManager", "SimulationManager"]);
const SimulationManager = () => {
- const { ws, gama, playerList, selectedSimulation } = useWebSocket(); // `removePlayer` is now available
+
+ const logger = getLogger(["simulationManager", "SimulationManager"]);
+ const { ws, gamaless, gama, playerList, selectedSimulation } = useWebSocket(); // `removePlayer` is now available
const navigate = useNavigate();
const [simulationStarted, setSimulationStarted] = useState(false);
const { t } = useTranslation();
- const [screenModeDisplay, setScreenModeDisplay] = useState("gama_screen");
const [startButtonClicked, setStartButtonClicked] = useState(false);
- const channel = new BroadcastChannel('simulation-to-stream'); //using the broadcast api to update display type in the streamPlayerScreen
- const updateDisplay = (screenModeDisplay: string) => {
- setScreenModeDisplay(screenModeDisplay);
- channel.postMessage({ screenModeDisplay });
- };
const startClicked = () => {
setStartButtonClicked(true);
@@ -71,31 +66,14 @@ const SimulationManager = () => {
}
};
- // Choice for the ICON :
- const icon = gama.experiment_state === 'LAUNCHING' ? (
-
-
- ) : gama.experiment_state === 'NONE' || gama.experiment_state === 'NOTREADY' || gama.experiment_state === 'PAUSED' ? (
-
- ) : (
-
- );
-
-
useEffect(() => {
- if (!selectedSimulation) {
+ if (!gamaless && !selectedSimulation) {
navigate('/');
}
- }, [selectedSimulation, navigate]);
+ }, [gamaless, selectedSimulation, navigate]);
// Handler for removing players
@@ -103,9 +81,9 @@ const SimulationManager = () => {
return (
-
-
{t('wait_minim_players_1')} {Number(minPlayers) - Object.keys(playerList).length} {t('wait_minim_players_2')}
-
-
+
) : Object.keys(playerList).length >= Number(minPlayers) && Object.keys(playerList).length < Number(maxPlayers) ? (
- <>
-
- {t('wait_minim_players_1')} {Number(maxPlayers) - Object.keys(playerList).length} {t('wait_maximum_players_1')}
-
-
-
-
-
-
-
-
- ) : ( // Autostart simulation
- <>
- {
- Object.keys(playerList).length >= Number(maxPlayers) && handlePlayPause() // Call handlePlayPause function here
- }
-
- )
- ) : gama.experiment_state === 'PAUSED' ||
- gama.experiment_state === 'LAUNCHING' ||
- gama.experiment_state === 'RUNNING' ? (
- <>
-
-
- }
- showText={true}
- />
-
- }
- className='flex w-15 h-full'
- >
-
- {/* //! unused code that uses websockets to change the type of display to one with space to accomodate for the gama map of the game, but is not implemented for now
- //! having these buttons that do nothing may confuse the user */}
+ <>
+
+ {t('wait_minim_players_1')} {Number(maxPlayers) - Object.keys(playerList).length} {t('wait_maximum_players_1')}
+
+
+
+
+
+
+ {/* */}
+
- {/*
- */}
-
- ) : null}
+
+
+
+
+
+
+
+
+
+ ) : ( // Autostart simulation
+ <>
+ {
+ Object.keys(playerList).length >= Number(maxPlayers) && handlePlayPause() // Call handlePlayPause function here
+ }
+
+ )
+ ) :
+
+ (
+
+
+ {gama.experiment_state === 'PAUSED' &&
+
+ }
+ {(gama.experiment_state === 'RUNNING' || gama.experiment_state === 'LAUNCHING') &&
+
+ }
+
+
+
+
+
+
+ )}
-
+
+ )}
diff --git a/src/components/SimulationManager/SimulationManagerButtons.tsx b/src/components/SimulationManager/SimulationManagerButtons.tsx
index 7648ea4..540448a 100644
--- a/src/components/SimulationManager/SimulationManagerButtons.tsx
+++ b/src/components/SimulationManager/SimulationManagerButtons.tsx
@@ -1,133 +1,131 @@
import Button from '../Button/Button';
import { useWebSocket } from '../WebSocketManager/WebSocketManager';
+import { getLogger } from '@logtape/logtape';
const SimulationManagerButtons = () => {
- const { ws, gama} = useWebSocket();
-
- const handlePlayPause = () => {
- if(ws !== null){
- ws.send(JSON.stringify({"type": gama.experiment_state == "NONE" ? "launch_experiment" : (gama.experiment_state != "RUNNING" ? "resume_experiment" : "pause_experiment") }));
- }else{
- logger.error("WS is null");
- }
- };
-
- const handleEnd = () => {
- if(ws !== null){
- ws.send(JSON.stringify({"type": "stop_experiment"}));
- }else{
- logger.error("WS is null");
- }
- };
-
-
-
-
- const icon = gama.experiment_state === 'LAUNCHING' ? (
-
-
- ) : gama.experiment_state === 'NONE' || gama.experiment_state === 'NOTREADY' || gama.experiment_state === 'PAUSED' ? (
-
- ) : (
-
- );
-
- return (
-
-
-
-
- {/* add a new button */}
-
-
-
-
-
-
+ const logger = getLogger(["components", "SimulationManagerButtons"]);
+ const { ws, gama } = useWebSocket();
+
+ const handlePlayPause = () => {
+ if (ws !== null) {
+ ws.send(JSON.stringify({ "type": gama.experiment_state == "NONE" ? "launch_experiment" : (gama.experiment_state != "RUNNING" ? "resume_experiment" : "pause_experiment") }));
+ } else {
+ logger.error("WS is null");
+ }
+ };
+
+ const handleEnd = () => {
+ if (ws !== null) {
+ ws.send(JSON.stringify({ "type": "stop_experiment" }));
+ } else {
+ logger.error("WS is null");
+ }
+ };
+
+
+
+
+ const icon = gama.experiment_state === 'LAUNCHING' ? (
+
+
+ ) : gama.experiment_state === 'NONE' || gama.experiment_state === 'NOTREADY' || gama.experiment_state === 'PAUSED' ? (
+
+ ) : (
+
+ );
+
+ return (
+
+
+
+
+ {/* add a new button */}
+
+
+
-
- );
+
+
+
+
+
+
+
+ );
};
export default SimulationManagerButtons;
\ No newline at end of file
diff --git a/src/components/SimulationManager/SimulationManagerPlayer.tsx b/src/components/SimulationManager/SimulationManagerPlayer.tsx
index 81233fc..246bd67 100644
--- a/src/components/SimulationManager/SimulationManagerPlayer.tsx
+++ b/src/components/SimulationManager/SimulationManagerPlayer.tsx
@@ -3,12 +3,14 @@ import { useTranslation } from "react-i18next";
import { useState } from 'react';
import { useWebSocket } from '../WebSocketManager/WebSocketManager';
import cross from '/src/svg_logos/x_cross.svg';
-import { getLogger, configure, getConsoleSink } from "@logtape/logtape";
-
+import { getLogger } from "@logtape/logtape";
+import { Player } from "./SimulationManager";
const logger = getLogger(["components", "SimulationManagerPlayer"]);
+
+
interface PlayerProps {
Playerkey: string
- selectedPlayer?: any;
+ selectedPlayer?: Player;
className?: string;
playerId?: string;
@@ -17,7 +19,7 @@ interface PlayerProps {
const SimulationManagerPlayer = ({ Playerkey, selectedPlayer, className, playerId }: PlayerProps) => {
const { t } = useTranslation();
- const { ws, playerList } = useWebSocket(); // `removePlayer` is now available
+ const { ws } = useWebSocket();
const [showPopUpManageHeadset, setshowPopUpManageHeadset] = useState(false);
@@ -28,9 +30,8 @@ const SimulationManagerPlayer = ({ Playerkey, selectedPlayer, className, playerI
const handleRemove = (id: string) => {
if (ws !== null) {
- logger.info("ID headset: {id}",{id});
+ logger.info("ID headset: {id}", { id });
ws.send(JSON.stringify({ "type": "remove_player_headset", id }));
- // removePlayer(id); // already did in WebSocketManagers
toggleShowPopUpManageHeadset();
} else {
logger.error("Websocket not connected")
@@ -42,25 +43,11 @@ const SimulationManagerPlayer = ({ Playerkey, selectedPlayer, className, playerI
// Logic for restart button
};
- // Method launch button hide , at the bottom of this component
- const handleGetPlayers = () => {
- if (ws !== null) {
- logger.info('Player list:', playerList);
- } else {
- logger.error('WebSocket is not connected');
- }
- };
-
{
return (
<>
-
-
{showPopUpManageHeadset ?
-
-
-
e.stopPropagation()} > {/*this prevent event bubbling, so that clicking the child div does not close the popup window*/}
@@ -73,11 +60,11 @@ const SimulationManagerPlayer = ({ Playerkey, selectedPlayer, className, playerI
Player: {String(playerId)}
- {t('Status')} : {String(selectedPlayer.connected)}
- {t('Hour of connection')} : {selectedPlayer.date_connection}
- {t('In game')} : {String(selectedPlayer.in_game)}
+ {t('Status')} : {selectedPlayer ? String(selectedPlayer.connected) : "no selected player"}
+ {t('Hour of connection')} : {selectedPlayer ? selectedPlayer.date_connection : "no selected player"}
+ {t('In game')} : {selectedPlayer ? String(selectedPlayer.in_game) : "no selected player"}
- {/* //* */}
+
+
+
{selectedSimulation ? (
@@ -121,147 +99,92 @@ const SimulationManager = () => {
{Object.keys(playerList).map((key) => {
const player = playerList[key];
return (
-
-
-
-
-
-
-
-
+
+
-
-
{/* Buttons Simulations : Play Button, Pause Button, Stop Button */}
- <>
-
+ {gamaless ? (
+
+ GAMALESS — simulation controls disabled
+
+ ) : (
+
+
{gama.experiment_state === 'NONE' || gama.experiment_state === 'NOTREADY' ? (
detectedPlayers.length < Number(minPlayers) ? (
{t('wait_minim_players_1')} {Number(minPlayers) - Object.keys(playerList).length} {t('wait_minim_players_2')}
-
-
+
- {t('wait_minim_players_1')} {Number(maxPlayers) - Object.keys(playerList).length} {t('wait_maximum_players_1')} - -
- -
-
-
-
-
- ) : ( // Autostart simulation
- <>
- {
- Object.keys(playerList).length >= Number(maxPlayers) && handlePlayPause() // Call handlePlayPause function here
- }
-
- )
- ) : gama.experiment_state === 'PAUSED' ||
- gama.experiment_state === 'LAUNCHING' ||
- gama.experiment_state === 'RUNNING' ? (
- <>
-
-
- }
- showText={true}
- />
-
- }
- className='flex w-15 h-full'
- >
-
- {/* //! unused code that uses websockets to change the type of display to one with space to accomodate for the gama map of the game, but is not implemented for now
- //! having these buttons that do nothing may confuse the user */}
+ <>
+
-
+
+ )}
diff --git a/src/components/SimulationManager/SimulationManagerButtons.tsx b/src/components/SimulationManager/SimulationManagerButtons.tsx
index 7648ea4..540448a 100644
--- a/src/components/SimulationManager/SimulationManagerButtons.tsx
+++ b/src/components/SimulationManager/SimulationManagerButtons.tsx
@@ -1,133 +1,131 @@
import Button from '../Button/Button';
import { useWebSocket } from '../WebSocketManager/WebSocketManager';
+import { getLogger } from '@logtape/logtape';
const SimulationManagerButtons = () => {
- const { ws, gama} = useWebSocket();
-
- const handlePlayPause = () => {
- if(ws !== null){
- ws.send(JSON.stringify({"type": gama.experiment_state == "NONE" ? "launch_experiment" : (gama.experiment_state != "RUNNING" ? "resume_experiment" : "pause_experiment") }));
- }else{
- logger.error("WS is null");
- }
- };
-
- const handleEnd = () => {
- if(ws !== null){
- ws.send(JSON.stringify({"type": "stop_experiment"}));
- }else{
- logger.error("WS is null");
- }
- };
-
-
-
-
- const icon = gama.experiment_state === 'LAUNCHING' ? (
-
-
- ) : gama.experiment_state === 'NONE' || gama.experiment_state === 'NOTREADY' || gama.experiment_state === 'PAUSED' ? (
-
- ) : (
-
- );
-
- return (
-
+ {t('wait_minim_players_1')} {Number(maxPlayers) - Object.keys(playerList).length} {t('wait_maximum_players_1')}
+
+
+
+
+
+
+ ) : ( // Autostart simulation
+ <>
+ {
+ Object.keys(playerList).length >= Number(maxPlayers) && handlePlayPause() // Call handlePlayPause function here
+ }
+
+ )
+ ) :
+
+ (
+
+
+
+ {/* */}
+
- {/*
-
*/}
-
- ) : null}
+
+
+
+
+
+
+ {gama.experiment_state === 'PAUSED' &&
+
+ }
+ {(gama.experiment_state === 'RUNNING' || gama.experiment_state === 'LAUNCHING') &&
+
+ }
+
+
+
+
+
+
+ )}
-
-
-
- {/* add a new button */}
-
-
-
-
-
-
+ const logger = getLogger(["components", "SimulationManagerButtons"]);
+ const { ws, gama } = useWebSocket();
+
+ const handlePlayPause = () => {
+ if (ws !== null) {
+ ws.send(JSON.stringify({ "type": gama.experiment_state == "NONE" ? "launch_experiment" : (gama.experiment_state != "RUNNING" ? "resume_experiment" : "pause_experiment") }));
+ } else {
+ logger.error("WS is null");
+ }
+ };
+
+ const handleEnd = () => {
+ if (ws !== null) {
+ ws.send(JSON.stringify({ "type": "stop_experiment" }));
+ } else {
+ logger.error("WS is null");
+ }
+ };
+
+
+
+
+ const icon = gama.experiment_state === 'LAUNCHING' ? (
+
+
+ ) : gama.experiment_state === 'NONE' || gama.experiment_state === 'NOTREADY' || gama.experiment_state === 'PAUSED' ? (
+
+ ) : (
+
+ );
+
+ return (
+
+
+
+
+ );
};
export default SimulationManagerButtons;
\ No newline at end of file
diff --git a/src/components/SimulationManager/SimulationManagerPlayer.tsx b/src/components/SimulationManager/SimulationManagerPlayer.tsx
index 81233fc..246bd67 100644
--- a/src/components/SimulationManager/SimulationManagerPlayer.tsx
+++ b/src/components/SimulationManager/SimulationManagerPlayer.tsx
@@ -3,12 +3,14 @@ import { useTranslation } from "react-i18next";
import { useState } from 'react';
import { useWebSocket } from '../WebSocketManager/WebSocketManager';
import cross from '/src/svg_logos/x_cross.svg';
-import { getLogger, configure, getConsoleSink } from "@logtape/logtape";
-
+import { getLogger } from "@logtape/logtape";
+import { Player } from "./SimulationManager";
const logger = getLogger(["components", "SimulationManagerPlayer"]);
+
+
interface PlayerProps {
Playerkey: string
- selectedPlayer?: any;
+ selectedPlayer?: Player;
className?: string;
playerId?: string;
@@ -17,7 +19,7 @@ interface PlayerProps {
const SimulationManagerPlayer = ({ Playerkey, selectedPlayer, className, playerId }: PlayerProps) => {
const { t } = useTranslation();
- const { ws, playerList } = useWebSocket(); // `removePlayer` is now available
+ const { ws } = useWebSocket();
const [showPopUpManageHeadset, setshowPopUpManageHeadset] = useState(false);
@@ -28,9 +30,8 @@ const SimulationManagerPlayer = ({ Playerkey, selectedPlayer, className, playerI
const handleRemove = (id: string) => {
if (ws !== null) {
- logger.info("ID headset: {id}",{id});
+ logger.info("ID headset: {id}", { id });
ws.send(JSON.stringify({ "type": "remove_player_headset", id }));
- // removePlayer(id); // already did in WebSocketManagers
toggleShowPopUpManageHeadset();
} else {
logger.error("Websocket not connected")
@@ -42,25 +43,11 @@ const SimulationManagerPlayer = ({ Playerkey, selectedPlayer, className, playerI
// Logic for restart button
};
- // Method launch button hide , at the bottom of this component
- const handleGetPlayers = () => {
- if (ws !== null) {
- logger.info('Player list:', playerList);
- } else {
- logger.error('WebSocket is not connected');
- }
- };
-
{
return (
<>
-
-
{showPopUpManageHeadset ?
-
-
-
+
+ {/* add a new button */}
+
+
+
-
- );
+
+
+
+
+
+ e.stopPropagation()} > {/*this prevent event bubbling, so that clicking the child div does not close the popup window*/}
@@ -73,11 +60,11 @@ const SimulationManagerPlayer = ({ Playerkey, selectedPlayer, className, playerI
- {/* //* */}
+
Player: {String(playerId)}
-{t('Status')} : {String(selectedPlayer.connected)}
-{t('Hour of connection')} : {selectedPlayer.date_connection}
-{t('In game')} : {String(selectedPlayer.in_game)}
+{t('Status')} : {selectedPlayer ? String(selectedPlayer.connected) : "no selected player"}
+{t('Hour of connection')} : {selectedPlayer ? selectedPlayer.date_connection : "no selected player"}
+{t('In game')} : {selectedPlayer ? String(selectedPlayer.in_game) : "no selected player"}