Oups dernier fix

cryptide_project/Scripts/social_graph.sh

@@ -25,8 +25,8 @@ fi
 
 npm start &
 
-node $SCRIPT_DIR/../server/server.js &
+node $SCRIPT_DIR/../server/socket_io/server.js &
 
-node $SCRIPT_DIR/../src/server/server.js 
+node $SCRIPT_DIR/../server/api/server.js 
 
 

cryptide_project/server/api/server.js

@@ -14,7 +14,7 @@ const port = 3003;
 // Middleware
 app.use(cors(
   {
-    origin: ["http://localhost:3000", "http://localhost:3000"],
+    origin: ["http://172.20.10.4:3000", "http://172.20.10.4:3000"],
     credentials: true
   }
 ));                            // Autoriser les requêtes cross-origin

cryptide_project/server/socket_io/server.js

@@ -7,7 +7,7 @@ const app = express();
 const server = http.createServer(app);
 const io = socketIO(server, {
   cors: {
-    origin: ["http://localhost:3000", "http://localhost:3000"], // Remplacez par l'URL de votre application React
+    origin: ["http://172.20.10.4:3000", "http://172.20.10.4:3000"], // Remplacez par l'URL de votre application React
     methods: ["GET", "POST"],
     credentials: true
   }

cryptide_project/src/AdressSetup.ts

@@ -1,11 +1,15 @@
-const ADRESSE_WEBSERVER = "http://localhost:3002"
+const ADRESSE_WEBSERVER = "http://172.20.10.4:3002"
 
-const ADRESSE_DBSERVER = "http://localhost:3003"
+const ADRESSE_DBSERVER = "http://172.20.10.4:3003"
 
 const tmp = ADRESSE_DBSERVER
 const tmp2 = ADRESSE_WEBSERVER
 
 const ADRESSE_WEBSITE = ""
 
+const basePath = process.env.REACT_APP_BASE_PATH || '/containers/Crypteam-website';
 
-export {ADRESSE_DBSERVER, ADRESSE_WEBSERVER, ADRESSE_WEBSITE}
+const tmp3 = basePath
+
+
+export {ADRESSE_DBSERVER, ADRESSE_WEBSERVER, ADRESSE_WEBSITE, basePath}

cryptide_project/src/App.tsx

@@ -42,8 +42,9 @@ import messagesEn from './Translations/en.json';
 import ErrorBoundary from './Error/ErrorBoundary';
 import ErrorPage from './Error/ErrorPage';
 import DeducCheck from './Pages/DeducCheck';
+import {basePath} from "./AdressSetup"
+
 
-const basePath = process.env.REACT_APP_BASE_PATH || '/containers/Crypteam-website';
 
 const messages = {
   fr: messagesFr,
@@ -65,7 +66,7 @@ function App() {
 
 
   //const location = useLocation();
-  const hasNavbarVisible = [basePath + "/", basePath + "/login", basePath + "/signup", basePath + "/play", basePath + "/lobby", basePath + "/endgame", basePath + "/deduc"]//.includes(window.location.pathname);
+  const hasNavbarVisible = [basePath + "/", basePath + "/login", basePath + "/signup", basePath + "/lobby", basePath + "/endgame", basePath + "/deduc"]//.includes(window.location.pathname);
 
 
   return (

cryptide_project/src/Components/BigButtonNav.tsx

@@ -5,6 +5,8 @@ import { FormattedMessage } from 'react-intl';
 
 import { useTheme } from '../Style/ThemeContext';
 import COLORS from '../Style/Color';
+import {basePath} from "../AdressSetup"
+
 //@ts-ignore
 function BigButtonNav({ dest, img}) {
     
@@ -15,7 +17,7 @@ function BigButtonNav({ dest, img}) {
     // };
 
     return (
-    <Link to={dest} className="link-without-underline">
+    <Link to={`${basePath}/${dest}`} className="link-without-underline">
         <button className='bigbuttonNabImg' style={{ backgroundColor: theme.colors.primary }}>
             <img src={img} alt="Button Image" height="100" width="100"/>
         </button>

cryptide_project/src/Components/ButtonImgNav.tsx

@@ -4,12 +4,14 @@ import './ButtonImgNav.css';
 import { FormattedMessage } from 'react-intl';
 
 import { useTheme } from '../Style/ThemeContext';
+import {basePath} from "../AdressSetup"
+
 
 //@ts-ignore
 function ButtonImgNav({ dest, img, text = "" }) {
     const theme = useTheme();
     return (
-    <Link to={dest} className="link-without-underline"> {/*target='_blank' ==> ouvre un nouvelle onglet*/ }
+    <Link to={`${basePath}/${dest}`} className="link-without-underline"> {/*target='_blank' ==> ouvre un nouvelle onglet*/ }
         <button className='buttonNabImg' style={{ backgroundColor: theme.colors.primary, color: theme.colors.secondary}}>
             <img src={img} alt="Button Image" height="50" width="50"/>
             <p>{text}</p>

cryptide_project/src/Components/GraphContainer.tsx

@@ -20,6 +20,7 @@ import User from "../model/User";
 import { json } from "body-parser";
 import html2canvas from 'html2canvas';
 import jsPDF from 'jspdf';
+import {basePath} from "../AdressSetup"
 
 interface MyGraphComponentProps {
   onNodeClick: (shouldShowChoiceBar: boolean) => void;
@@ -67,7 +68,7 @@ let cptBug = 0
 let cptUseEffect = 0
 let testPlayers: Player[] = []
 
-const basePath = process.env.REACT_APP_BASE_PATH || '/containers/Crypteam-website';
+
 
 const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, isEasy, addToHistory, showLast, setNetwork, setNetworkEnigme, setPlayerIndex, askedWrong, setAskedWrong, importToPdf, setImportToPdf}) => {
   let cptTour: number = 0

cryptide_project/src/Components/LobbyContainer.tsx

@@ -10,6 +10,8 @@ import Button from 'react-bootstrap/Button';
 import { socket } from '../SocketConfig';
 import Tooltip from 'react-bootstrap/esm/Tooltip';
 import OverlayTrigger from 'react-bootstrap/esm/OverlayTrigger';
+import {basePath} from "../AdressSetup"
+
 
 interface LobbyContainerProps {
         roomNum : string
@@ -20,7 +22,6 @@ interface LobbyContainerProps {
     //? mettre un "nbplayermax" si le nombre de joueur max peut etre fixé ?
 }
 
-const basePath = process.env.REACT_APP_BASE_PATH || '/containers/Crypteam-website';
 
 const LobbyContainer: React.FC<LobbyContainerProps> = ({roomNum, HeadPlayer, nbPlayer, setFirst, started}) => {
     const theme=useTheme();

cryptide_project/src/Components/NavBar.tsx

@@ -25,7 +25,7 @@ import { useTheme } from '../Style/ThemeContext';
 import { useAuth } from '../Contexts/AuthContext';
 import { useNavigate } from 'react-router-dom';
 
-const basePath = process.env.REACT_APP_BASE_PATH || '/containers/Crypteam-website';
+import {basePath} from "../AdressSetup"
 
 // @ts-ignore
 function AppNavbar({changeLocale}) {
@@ -87,11 +87,11 @@ function AppNavbar({changeLocale}) {
                             </NavDropdown>
                         ) : (
                             <>
-                            <Nav.Link href="/login" className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}>
+                            <Nav.Link href={`${basePath}/login`} className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}>
                                 <BiLogInCircle />
                                 <FormattedMessage id="log_in" />
                             </Nav.Link>
-                            <Nav.Link href="/signup" className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}>
+                            <Nav.Link href={`${basePath}/signup`} className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}>
                                 <BsFillPersonPlusFill />
                                 <FormattedMessage id="sign_up" />
                             </Nav.Link>

cryptide_project/src/Error/ErrorPage.tsx

@@ -28,7 +28,7 @@ function ErrorPage({ code = "", msg = "Something is wrong"}) {
             </div>
 
             <div className='centerDivH' style={{margin: "20px"}}>
-                <Button href={`${basePath}/join`} variant='danger'>Retour à l'accueil</Button>
+                <Button href={`${basePath}/`} variant='danger'>Retour à l'accueil</Button>
             </div>
         </div>
     );

cryptide_project/src/Pages/EndGame.tsx

@@ -34,6 +34,8 @@ import { useGame } from '../Contexts/GameContext';
 /* Boostrap */
 import { Button } from 'react-bootstrap';
 import Bot from '../model/Bot';
+import {basePath} from "../AdressSetup"
+
 
 
 function EndGame() {
@@ -194,7 +196,7 @@ function EndGame() {
             <div id="vis-graph"/>
 
             <div className='centerDivH' onClick={resetAll} style={{margin: "20px"}}>
-                <Button href='/'>Retour à l'accueil</Button>
+                <Button href={`${basePath}/`}>Retour à l'accueil</Button>
             </div>
 
         </div>

cryptide_project/src/Pages/Home.tsx

@@ -12,8 +12,7 @@ import {loadImageAsync} from "../ImageHelper"
 import { socket } from '../SocketConfig';
 import JSONParser from '../JSONParser';
 
-
-const basePath = process.env.REACT_APP_BASE_PATH || '/containers/Crypteam-website';
+import {basePath} from "../AdressSetup"
 
 
 // @ts-ignore
@@ -68,7 +67,7 @@ function Home() {
                     Si un joueur place un jeton carré, le questionneur doit également jouer son jeu en plaçant un jeton carré de sa couleur sur un nœud du graphique. La contre-manipulation devient ainsi une arme redoutable pour détourner l'accusation et semer la confusion. Pour en savoir plus, plongez-vous dans les détails de ce passionnant récit sur une autre page.
                 </p>
                 <br/>
-                <p>Pour des informations plus détaillées, consulter les <Link to="/info">règles</Link>.</p>
+                <p>Pour des informations plus détaillées, consulter les <Link to={`${basePath}/info`}>règles</Link>.</p>
                 <br/>
             </div>
             <div>

cryptide_project/src/Pages/InGame.tsx

@@ -49,10 +49,10 @@ import { Network } from 'vis-network';
 import {generateLatexCode, generateLatexCodeEnigme} from '../Script/LatexScript';
 import Pair from '../model/Pair';
 import Indice from '../model/Indices/Indice';
+import {basePath} from "../AdressSetup"
 
-let cptNavigation = 0
 
-const basePath = process.env.REACT_APP_BASE_PATH || '/containers/Crypteam-website';
+let cptNavigation = 0
 
 //@ts-ignore
 const InGame = ({locale, changeLocale}) => {
@@ -68,7 +68,7 @@ const InGame = ({locale, changeLocale}) => {
     if (cptNavigation % 2 == 0){
         if (navigationType.toString() == "POP"){
             socket.emit("player quit")
-            navigate(`/${basePath}/play`)
+            navigate(`${basePath}/`)
         }
     }
   
@@ -283,7 +283,7 @@ const InGame = ({locale, changeLocale}) => {
   const { indice, players, actualPlayerIndex} = useGame();
 
   const nbPlayer = players.length;
-  const navdeduc = '/deduc?actualId=' + actualPlayerIndex + '&nbPlayer=' + nbPlayer;
+  const navdeduc = 'deduc?actualId=' + actualPlayerIndex + '&nbPlayer=' + nbPlayer;
 
     return (
       <div id="mainDiv">
@@ -368,7 +368,7 @@ const InGame = ({locale, changeLocale}) => {
           {/* <Link to='/info#indice-possible' target='_blank'> 
             //? redirection impossible apparament (securité des navigateur
           */}
-          <Link to='/info' target='_blank'>
+          <Link to={`${basePath}/info`} target='_blank'>
             <button className='button' 
               style={{ 
                 backgroundColor: theme.colors.tertiary,
@@ -379,7 +379,7 @@ const InGame = ({locale, changeLocale}) => {
           </Link>
 
           {!IsSolo &&
-          <Link to={navdeduc} target='_blank'>
+          <Link to={`${basePath}/${navdeduc}`} target='_blank'>
             <button className='button'
               style={{ 
                 backgroundColor: theme.colors.tertiary,

cryptide_project/src/Pages/Lobbies.tsx

@@ -140,7 +140,7 @@ function Lobbies() {
                 {filteredLobbiesToShow.length === 0 ? (
                     <div style={{border:'solid 2px blue', borderRadius:'15px', boxShadow:'5px 5px 5px rgb(246, 246, 246)', padding:'20px', margin:'20px'}}>
                         <h3><b>Il n'y a aucun lobby disponible</b></h3>
-                        <button onClick={createLobby}  className='ButtonNav' style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}>Créé en un !</button>
+                        <button onClick={createLobby}  className='ButtonNav' style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}>Créez en un !</button>
                     </div>
                 ) : (
                     <div className="lobbyList">

cryptide_project/src/Pages/Lobby.tsx

@@ -46,11 +46,12 @@ import { useRef } from 'react';
 import Button from 'react-bootstrap/Button';
 import Overlay from 'react-bootstrap/Overlay';
 import { DataSet } from 'vis-network';
+import {basePath} from "../AdressSetup"
+
 
 
 let gameStarted = false
 let firstLaunch = true
-const basePath = process.env.REACT_APP_BASE_PATH || '/containers/Crypteam-website';
 
 function Lobby() {
     const theme=useTheme();
@@ -186,17 +187,17 @@ function Lobby() {
 
     socket.on("room full", () => {
         //TODO POP UP pour quand la room est pleine
-        navigate(`${basePath}/play`)
+        navigate(`${basePath}/`)
     })
 
     socket.on("game started", () => {
         //TODO POP UP pour quand la room est pleine
-        navigate(`${basePath}/play`)
+        navigate(`${basePath}/`)
     })
 
     socket.on("game already started", () => {
         //TODO POP UP pour quand la room est pleine
-        navigate(`${basePath}/play`)
+        navigate(`${basePath}/`)
     })
 
     socket.on("player left", (tab, i) => {
@@ -228,7 +229,7 @@ function Lobby() {
     const copyGameLink = () => {
         setShow(!show)
         
-        const gameLink = "http://localhost:3000/lobby?room="+ room;
+        const gameLink = "http://172.20.10.4:3000/lobby?room="+ room;
         navigator.clipboard.writeText(gameLink)
             .then(() => {
                 console.log('Lien copié avec succès !');
@@ -239,7 +240,7 @@ function Lobby() {
     };
 
     const textAreaRef = useRef<HTMLTextAreaElement>(null);
-    const linkToCopy = "http://localhost:3000/lobby?room="+ room
+    const linkToCopy = "http://172.20.10.4:3000/lobby?room="+ room
     const handleCopyClick = () => {
         setShow(!show)
         if(textAreaRef.current != null){

cryptide_project/src/Pages/LoginForm.tsx

@@ -4,8 +4,8 @@ import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../Contexts/AuthContext'; 
 import AuthService from '../services/AuthService';
 import '../Style/Global.css';
+import {basePath} from "../AdressSetup"
 
-const basePath = process.env.REACT_APP_BASE_PATH || '/containers/Crypteam-website';
 
 const SignIn = () => {
     const navigate = useNavigate();

cryptide_project/src/Pages/NewPlay.tsx

@@ -30,11 +30,11 @@ import { Overlay, ToggleButton, ToggleButtonGroup } from 'react-bootstrap';
 import Button from 'react-bootstrap/Button';
 import ButtonGroup from 'react-bootstrap/ButtonGroup';
 import Lobbies from './Lobbies';
+import {basePath} from "../AdressSetup"
 
 
-let cptNavigation = 0
 
-const basePath = process.env.REACT_APP_BASE_PATH || '/containers/Crypteam-website';
+let cptNavigation = 0
 
 
 function NewPlay() {

cryptide_project/src/Pages/Play.tsx

@@ -30,9 +30,10 @@ import Button from 'react-bootstrap/Button';
 import ButtonGroup from 'react-bootstrap/ButtonGroup';
 import Info from '../res/icon/infoGreen.png';
 
+import {basePath} from "../AdressSetup"
+
 let cptNavigation = 0
 
-const basePath = process.env.REACT_APP_BASE_PATH || '/containers/Crypteam-website';
 
 function Play() {
     let first = true

cryptide_project/src/Pages/Profile.tsx

@@ -25,7 +25,7 @@ import Form from 'react-bootstrap/Form';
 import ProgressBar from 'react-bootstrap/ProgressBar';
 
 
-const basePath = process.env.REACT_APP_BASE_PATH || '/containers/Crypteam-website';
+import {basePath} from "../AdressSetup"
 
 //@ts-ignore
 const Profile = () => {

cryptide_project/src/Pages/SignUpForm.tsx

@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import AuthService from '../services/AuthService';
 import '../Style/Global.css';
 
-const basePath = process.env.REACT_APP_BASE_PATH || '/containers/Crypteam-website';
+import {basePath} from "../AdressSetup"
 
 
 const SignUp = () => {
@@ -92,7 +92,7 @@ const SignUp = () => {
                     </button>
                 </div>
                 <p className="forgot-password text-right">
-                    Vous avez déjà un <a href="/login">compte</a> ?
+                    Vous avez déjà un <a href={`${basePath}/login`}>compte</a> ?
                 </p>
             </form>