NV users

cryptide_project/server/server.js

@@ -15,7 +15,6 @@ const io = socketIO(server, {
 
 
 const map = new Map()
-// ... le reste de votre configuration du serveur
 
 server.listen(3002, () => {
   console.log('Serveur Socket.IO écoutant sur le port 3002');
@@ -29,25 +28,26 @@ io.on('connection', (socket) => {
   });
 
   socket.on("lobby joined", (room, player) =>{
-    if (player.type=="Human"){
+    console.log(player)
+    if (player.type=="User"){
       socket.join(room)
     }
     if (map.get(room) == undefined){
-      map.set(room, [{type: player.type, id: socket.id, name: player.name}])
+      map.set(room, [{type: player.type, id: socket.id, pseudo: player.pseudo, profilePicture: player.profilePicture}])
     }
     else{
       const tab = map.get(room)
       for(let i = 0; i<tab.length; i++){
-        if (tab[i].id === socket.id && player.type==="Human"){
+        if (tab[i].id === socket.id && player.type==="User"){
           tab.splice(i, 1)
         }
       }
 
-      if (player.type!=="Human"){
+      if (player.type!=="User"){
-        map.get(room).push({type: player.type, id: player.id, name: player.name})
+        map.get(room).push({type: player.type, id: player.id, pseudo: player.pseudo, profilePicture: player.profilePicture})
       }
       else{
-        map.get(room).push({type: player.type, id: socket.id, name: player.name})
+        map.get(room).push({type: player.type, id: socket.id, pseudo: player.pseudo, profilePicture: player.profilePicture})
       }
     }
     
@@ -56,7 +56,6 @@ io.on('connection', (socket) => {
 
 
   socket.on("bot deleted", (bot, room) =>{
-    // map.set(room, map.get(room).filter(player => player.id !== bot.id));
     const tab = map.get(room)
     for(let i = 0; i<tab.length; i++){
       if (tab[i].id === bot.id){

cryptide_project/src/Components/ChoiceBar.tsx

@@ -61,7 +61,7 @@ const ChoiceBar = () => {
         {players.map((player, index) => (
           player.id !== socket.id &&
           <button key={index} className="choice-bar-button" onClick={() => askPlayer(player.id)} style={{ backgroundColor: theme.colors.primary }}>
-            {player.name}
+            {player.pseudo}
           </button>
         ))}
       </div>

cryptide_project/src/Components/GraphContainer.tsx

@@ -11,6 +11,7 @@ import { colorToEmoji, positionToColor, positionToEmoji } from "../ColorHelper";
 import { ColorToHexa } from "../model/EnumExtender";
 import Bot from "../model/Bot";
 import NodePerson from "../model/Graph/NodePerson";
+import { useAuth } from "../Contexts/AuthContext";
 
 
 interface MyGraphComponentProps {
@@ -43,6 +44,7 @@ let lastNodes: NodePerson[] = []
 const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, addToHistory, showLast, setNetwork}) => {
 let cptTour: number = 0
 
+  const {user} = useAuth()
   const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, setTurnPlayerIndexData, setWinnerData } = useGame();
   const params = new URLSearchParams(window.location.search);
 
@@ -309,7 +311,7 @@ let cptTour: number = 0
             cptHistory++
             if (cptHistory % 2 == 0){
               lastNodes.push(node)
-              addToHistory(players[askedIndex].name + " à mis un " + positionToEmoji(askedIndex, works) + " à " + personNetwork.getPersons()[id].getName())
+              addToHistory(players[askedIndex].pseudo + " à mis un " + positionToEmoji(askedIndex, works) + " à " + personNetwork.getPersons()[id].getName())
             }
           }
 

cryptide_project/src/Components/PlayerItemList.tsx

@@ -47,7 +47,7 @@ const PlayerItemList:React.FC<MyPlayerItemListProps> =({ player, room }) => {
             <div className='item-horizontal-div'>
                 <div>
                     <img src={pdp} alt='player-image' height='100' width='100' />
-                    <h4>{player.name}</h4>
+                    <h4>{player.pseudo}</h4>
                 </div>
                 {isBot && (
                     <Button className='suprButton' onClick={delBot} variant="danger">

cryptide_project/src/Components/PlayerList.tsx

@@ -25,7 +25,7 @@ const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlay
                 {
                     //@ts-ignore
                     players.map((player, index) => (
-                        player.id!=socket.id && <PersonStatus img={Person} state={Person} key={index} name={player.name + " " + colorToEmoji(positionToColor(index), true)} playerTouched={playerTouched} setPlayerTouched={setPlayerTouched} index={index} showCircle={true}/>
+                        player.id!=socket.id && <PersonStatus img={Person} state={Person} key={index} name={player.pseudo + " " + colorToEmoji(positionToColor(index), true)} playerTouched={playerTouched} setPlayerTouched={setPlayerTouched} index={index} showCircle={true}/>
                     ))
                 }
             </div>

cryptide_project/src/Components/ScoreBoard.tsx

@@ -20,12 +20,12 @@ import Col from 'react-bootstrap/Col';
 
 /* Component */
 import ButtonImgNav from './ButtonImgNav';
+import User from '../model/User';
 
 /* Types */
-import { PlayerProps } from '../types/Player';
 
 //@ts-ignore
-const ScoreBoard: React.FC<{ Player: PlayerProps }> = ({ Player }) => {
+const ScoreBoard: React.FC<{ Player: User }> = ({ Player }) => {
     const theme=useTheme();
 
     return (

cryptide_project/src/Contexts/AuthContext.tsx

@@ -1,22 +1,31 @@
 // AuthContext.js
 import React, { createContext, useContext, useState, ReactNode } from 'react';
+import Player from '../model/Player';
+import User from '../model/User';
 import AuthService from '../services/AuthService';
 
 interface AuthContextProps {
   isLoggedIn: boolean;
   login: () => void;
   logout: () => void;
+  user: User | null
+  setUserData: (newPlayer: User) => void
 }
 
 const AuthContext = createContext<AuthContextProps | undefined>(undefined);
 
 const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
   const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
+  const [user, setUser] = useState<User| null>(null)
 
   const login = () => {
     setIsLoggedIn(true);
   };
 
+  const setUserData = (player: User | null) => {
+    setUser(player)
+  }
+
   const logout = async() => {
     try {
         await AuthService.logout();
@@ -28,7 +37,7 @@ const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
   };
 
   return (
-    <AuthContext.Provider value={{ isLoggedIn, login, logout }}>
+    <AuthContext.Provider value={{ isLoggedIn, login, logout, user, setUserData }}>
       {children}
     </AuthContext.Provider>
   );

cryptide_project/src/JSONParser.ts

@@ -1,5 +1,5 @@
 import EasyBot from "./model/EasyBot";
-import Human from "./model/Human";
+import Human from "./model/User";
 import AgeIndice from "./model/Indices/AgeIndice";
 import ColorEdgesIndice from "./model/Indices/ColorEdgesIndice";
 import ColorIndice from "./model/Indices/ColorIndice";
@@ -10,6 +10,7 @@ import SportIndice from "./model/Indices/SportIndice";
 import Person from "./model/Person";
 import PersonNetwork from "./model/PersonsNetwork";
 import Player from "./model/Player";
+import User from "./model/User";
 
 class JSONParser{
 
@@ -84,10 +85,10 @@ class JSONParser{
 
     static JSONToPlayer(json: any): Player{
         switch (json.type){
-            case "Human":
+            case "User":
-                return new Human(json.id, json.name)
+                return new User(json.id, json.pseudo, json.profilePicture, json.soloStats, json.onlineStats)
             case "EasyBot":
-                return new EasyBot(json.id, json.name)
+                return new EasyBot(json.id, json.pseudo, json.profilePicture)
             default:
                 throw new Error("PARSER unable to parse player: " + json.type);
         }

cryptide_project/src/Pages/EndGame.tsx

@@ -55,7 +55,7 @@ function EndGame() {
         <div>
             <div className="head">
                 <header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
-                    <h1>{winner?.name} a gagné !</h1>
+                    <h1>{winner?.pseudo} a gagné !</h1>
                     <h3>Le tueur était <u>{person?.getName()}</u></h3>
                 </header>
             </div>
@@ -72,7 +72,7 @@ function EndGame() {
                         <div className="playerContainer" key={index}>
                             {player.id !== winner?.id && (
                                 <div>
-                                    <PersonStatus img={Person} state={Person} key={index} name={player.name} playerTouched={1} setPlayerTouched={() => {}} index={index} showCircle={false}/>
+                                    <PersonStatus img={Person} state={Person} key={index} name={player.pseudo} playerTouched={1} setPlayerTouched={() => {}} index={index} showCircle={false}/>
                                     <h6 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}</h6>
                                 </div>
                             )}

cryptide_project/src/Pages/InGame.tsx

@@ -390,9 +390,6 @@ const InGame = ({locale, changeLocale}) => {
 
           </Offcanvas.Body>
         </Offcanvas>
-        <div id="bottom-container">
-          {showChoiceBar && <ChoiceBar />}
-        </div>
         {/*
         <div id="endgamebutton" > {/*  tmp 
           <ButtonImgNav dest="/endgame" img={Leave} text='endgame'/>

cryptide_project/src/Pages/Lobby.tsx

@@ -22,9 +22,11 @@ import { useNavigate } from 'react-router-dom';
 import { socket } from "../SocketConfig";
 import { random } from 'lodash';
 import Player from '../model/Player';
-import Human from '../model/Human';
 import EasyBot from '../model/EasyBot';
 import Bot from '../model/Bot';
+import User from '../model/User';
+import { useAuth } from '../Contexts/AuthContext';
+import SessionService from '../services/SessionService';
 
 
 let gameStarted = false
@@ -36,23 +38,64 @@ function Lobby() {
 
     const { indices, setIndicesData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, setActualPlayerIndexData, setTurnPlayerIndexData, setRoomData } = useGame();
     
+    const {user, setUserData} = useAuth()
     let first = true
 
     const params = new URLSearchParams(window.location.search);
     const room = params.get('room');
 
     function addBot(){
-        socket.emit("lobby joined", room, new EasyBot("botId" + Math.floor(Math.random() * 1000), "Bot" + Math.floor(Math.random() * 100)).toJson())
+        socket.emit("lobby joined", room, new EasyBot("botId" + Math.floor(Math.random() * 1000), "Bot" + Math.floor(Math.random() * 100), "").toJson())
     }
 
-    // function delBot(selectedBot: Bot){
-        
-    // }
-
     useEffect(() => {
         if (first){
             first=false
-            socket.emit("lobby joined", room, new Human("test", "Test" + Math.floor(Math.random() * 100)).toJson())
+
+            if (user == null){
+                try {
+                    const sessionData = SessionService.getSession();
+                    sessionData.then((s) => {
+                        if (s.user) {
+                            // Il y a une session on récupère les infos du joueur
+                            const updatedPlayer: User = new User(socket.id, s.user.pseudo, s.user.profilePicture, {
+                                nbGames: s.user.soloStats.nbGames,
+                                bestScore: s.user.soloStats.bestScore,
+                                avgNbTry: s.user.soloStats.avgNbTry,
+                            },
+                            {
+                                nbGames: s.user.onlineStats.nbGames,
+                                nbWins: s.user.onlineStats.nbWins,
+                                ratio: s.user.onlineStats.ratio,
+                            })
+                            setUserData(updatedPlayer);
+                            socket.emit("lobby joined", room, updatedPlayer.toJson())
+                        } else {
+                            // Pas de session on génère un guest random
+                            const guestPlayer: User = new User(socket.id, 'Guest_' + Math.floor(Math.random() * 1000000), '',
+                            {
+                                nbGames: 0,
+                                bestScore: 0,
+                                avgNbTry: 0,
+                            },
+                            {
+                                nbGames: 0,
+                                nbWins: 0,
+                                ratio: 0,
+                            })
+                            setUserData(guestPlayer);
+                            socket.emit("lobby joined", room, guestPlayer.toJson())
+
+                        }
+                    })
+                }
+                catch (error) {
+                    console.error(error);
+                }
+            }
+            else{
+                socket.emit("lobby joined", room, user.toJson())
+            }
 
             return () => {
                 socket.off('game created');
@@ -114,7 +157,12 @@ function Lobby() {
         setPersonData(choosenPerson)
         setPersonNetworkData(networkPerson)
         setIndicesData(choosenIndices)
-        let start = 0
+        let users = players.filter((p) => p instanceof User)
+        let u = users[Math.floor(Math.random() * users.length)]
+        let start = players.findIndex((p) => p.id == u.id)
+        if (start == -1){
+            start = 0
+        }
         socket.emit('network created', JSON.stringify(networkPerson, null, 2), JSON.stringify(choosenPerson), JSON.stringify(choosenIndices), room, start);
     }
 

cryptide_project/src/Pages/Play.tsx

@@ -23,12 +23,14 @@ import ScoreBoard from '../Components/ScoreBoard';
 
 /* Types */
 import { PlayerProps } from '../types/Player';
+import Player from '../model/Player';
+import Human from '../model/User';
+import User from '../model/User';
 
 
 function Play() {
     const theme=useTheme()
-    const {isLoggedIn, login} = useAuth();
+    const {isLoggedIn, login, user, setUserData } = useAuth();
-    const [player, setPlayer] = useState<PlayerProps | null>(null);
 
     useEffect(() => {
         const fetchUserInformation = async () => {
@@ -38,39 +40,32 @@ function Play() {
                 // Vérifie si il y a une session
                 if (sessionData.user) {
                     // Il y a une session on récupère les infos du joueur
-                    const updatedPlayer: PlayerProps = {
+                    const updatedPlayer: User = new User(socket.id, sessionData.user.pseudo, sessionData.user.profilePicture, {
-                        pseudo: sessionData.user.pseudo,
-                        profilePicture: sessionData.user.profilePicture,
-                        soloStats: {
                         nbGames: sessionData.user.soloStats.nbGames,
                         bestScore: sessionData.user.soloStats.bestScore,
                         avgNbTry: sessionData.user.soloStats.avgNbTry,
                     },
-                        onlineStats: {
+                    {
                         nbGames: sessionData.user.onlineStats.nbGames,
                         nbWins: sessionData.user.onlineStats.nbWins,
                         ratio: sessionData.user.onlineStats.ratio,
-                        },
+                    })
-                    };
                     login();
-                    setPlayer(updatedPlayer);
+                    setUserData(updatedPlayer);
                 } else {
                     // Pas de session on génère un guest random
-                    const guestPlayer: PlayerProps = {
+                    const guestPlayer: User = new User(socket.id, 'Guest_' + Math.floor(Math.random() * 1000000), '',
-                        pseudo: 'Guest_' + Math.floor(Math.random() * 1000000),
+                    {
-                        profilePicture: '',
-                        soloStats: {
                         nbGames: 0,
                         bestScore: 0,
                         avgNbTry: 0,
                     },
-                        onlineStats: {
+                    {
                         nbGames: 0,
                         nbWins: 0,
                         ratio: 0,
-                        },
+                    })
-                    };
+                    setUserData(guestPlayer);
-                    setPlayer(guestPlayer);
                 }
             } catch (error) {
                 console.error(error);
@@ -136,7 +131,7 @@ function Play() {
             <div className="MidContainer">
                 <div>
                     <h2>
-                        {player && player.pseudo}
+                        {user && user.pseudo}
                     </h2>
                     <img src={Person}
                             height='300'
@@ -152,7 +147,7 @@ function Play() {
                 </div>
             </div>
             <div className='rightContainer'>
-                {player && (<ScoreBoard Player={player}/>)}
+                {user && (<ScoreBoard Player={user}/>)}
             </div>
         </div>
     );

cryptide_project/src/SocketConfig.ts

@@ -1,6 +1,6 @@
 import { io } from "socket.io-client";
 
 
-const socket = io("http://localhost:3002");
+const socket = io("http://172.20.10.4:3002");
 
 export {socket}

cryptide_project/src/model/Bot.ts

@@ -13,8 +13,8 @@ abstract class Bot extends Player{
 
     public actualNetwork: Map<Person, Pair<number, boolean>[]>
 
-    constructor( id: string, name: string){
+    constructor( id: string, name: string, profilePicture: string){
-        super(id, name);
+        super(id, name, profilePicture);
         this.actualNetwork = new Map<Person, Pair<number, boolean>[]>()
         this.index = -1
 

cryptide_project/src/model/EasyBot.ts

@@ -11,15 +11,16 @@ import Player from "./Player";
 
 class EasyBot extends Bot{
 
-    constructor(id: string, name: string){
+    constructor(id: string, name: string, profilePicture: string){
-        super(id, name)
+        super(id, name, profilePicture)
     }
 
     toJson() {
         return {
             type: "EasyBot",
             id: this.id,
-            name: this.name,
+            pseudo: this.pseudo,
+            profilePicture: this.profilePicture
         };
     }
 

cryptide_project/src/model/Human.tsx

@@ -1,18 +0,0 @@
-import Player from "./Player";
-
-class Human extends Player{
-
-    constructor(id: string, name: string){
-        super(id, name)
-    }
-    
-    toJson() {
-        return {
-            type: "Human",
-            id: this.id,
-            name: this.name,
-        };
-    }
-}
-
-export default Human

cryptide_project/src/model/Player.ts

@@ -1,10 +1,13 @@
 abstract class Player{
     public id: string
-    public name: string;
+    public pseudo: string;
+    public profilePicture: string
 
-    constructor(id: string, name: string){
+
+    constructor(id: string, pseudo: string, profilePicture: string){
         this.id=id
-        this.name=name
+        this.pseudo=pseudo
+        this.profilePicture=profilePicture
     }
 
     abstract toJson(): any

cryptide_project/src/model/User.tsx

@@ -0,0 +1,25 @@
+import Player from "./Player";
+
+class User extends Player{
+
+    public soloStats: any
+    public onlineStats: any
+
+    constructor(id: string, name: string, profilePicture: string, soloStats: any, onlineStats: any){
+        super(id, name, profilePicture)
+        this.soloStats=soloStats
+        this.onlineStats=onlineStats
+    }
+    
+    toJson() {
+        return {
+            type: "User",
+            id: this.id,
+            pseudo: this.pseudo,
+            soloStats: this.soloStats,
+            onlineStats: this.onlineStats
+        };
+    }
+}
+
+export default User

cryptide_project/src/server/controllers/AuthController.js

@@ -71,6 +71,7 @@ class AuthController {
         }
 
         // Stocker l'utilisateur dans la session){
+        console.log("SESSION")
         console.log(req.session);
         req.session.user = user;
 

cryptide_project/src/server/server.js

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

cryptide_project/src/services/AuthService.tsx

@@ -12,7 +12,7 @@ class AuthService{
 
     static async signUp(data: any) {
         try {
-            const response = await fetch('http://localhost:3003/auth/signup', {
+            const response = await fetch('http://172.20.10.4:3003/auth/signup', {
                 method: 'POST',
                 headers: {
                 'Content-Type': 'application/json',
@@ -36,7 +36,7 @@ class AuthService{
 
     static async signIn(data: any) {
         try {
-            const response = await fetch('http://localhost:3003/auth/signin', {
+            const response = await fetch('http://172.20.10.4:3003/auth/signin', {
                 method: 'POST',
                 headers: {
                 'Content-Type': 'application/json',
@@ -61,7 +61,7 @@ class AuthService{
 
     static async logout() {
         try {
-            const response = await fetch('http://localhost:3003/auth/logout', {
+            const response = await fetch('http://172.20.10.4:3003/auth/logout', {
                 method: 'DELETE',
                 headers: {
                     'Content-Type': 'application/json',

cryptide_project/src/services/SessionService.tsx

@@ -1,7 +1,7 @@
 class SessionService {
     static async getSession() {
         try {
-            const response = await fetch('http://localhost:3003/session', {
+            const response = await fetch('http://172.20.10.4:3003/session', {
                 method: 'GET',
                 headers: {
                     'Content-Type': 'application/json',