Merge remote-tracking branch 'origin' into ConnexionAPI

cryptide_project/server/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:3001"], // Remplacez par l'URL de votre application React
+    origin: ["http://172.20.10.4:3000", "http://localhost:3000"], // Remplacez par l'URL de votre application React
     methods: ["GET", "POST"],
     credentials: true
   }
@@ -80,7 +80,7 @@ io.on('connection', (socket) => {
         for (let i = 0; i<tab.length; i++){
           if (tab[i].id === socket.id){
             tab.splice(i, 1)
-            io.to(k).emit("new player", tab)
+            io.to(k).emit("player left", tab, socket.id)
           }
         }
     }

cryptide_project/src/Components/ButtonImgNav.css

@@ -1,5 +1,6 @@
 .buttonNabImg{
     margin: 15px 0;
+    padding: 10px;
     width: auto;
     height: 65px;
 

cryptide_project/src/Components/GraphContainer.tsx

@@ -482,8 +482,11 @@ let cptTour: number = 0
               }
             }
             else{
-              socket.emit("ask player", params.nodes[0], players[touchedPlayer].id, players.find((p) => p.id === socket.id, actualPlayerIndex))
+              if (touchedPlayer > 0){
-              socket.emit("put correct background", socket.id)
+                console.log(touchedPlayer)
+                socket.emit("ask player", params.nodes[0], players[touchedPlayer].id, players.find((p) => p.id === socket.id, actualPlayerIndex))
+                socket.emit("put correct background", socket.id)
+              }
               touchedPlayer=-1
             }
           }

cryptide_project/src/Components/ScoreBoard.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+
+/* Style */
+import '../Pages/Play.css';
+import '../Style/Global.css'
+import { useTheme } from '../Style/ThemeContext';
+
+/* Ressources */
+import Person from '../res/img/Person.png'
+import leave from '../res/img/bot.png'
+import trophy from '../res/icon/trophy.png'
+import share from '../res/icon/share.png';
+
+/* Boostrap */
+import Tab from 'react-bootstrap/Tab';
+import Tabs from 'react-bootstrap/Tabs';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+/* Component */
+import ButtonImgNav from './ButtonImgNav';
+
+//@ts-ignore
+function ScoreBoard({Player = null}) {
+    const theme=useTheme();
+    return (
+        // <div className='LeaderBoardiv'>
+        <div className='LeaderBoardiv'>
+            <Tabs style={{width:"100%"}}
+                defaultActiveKey="profile"
+                id="ScoreBoard"
+                className="mb-3">
+                
+                <Tab eventKey="perso" title="Vos Stats" disabled>
+                    Tab content for Contact
+                </Tab>
+                <Tab eventKey="daily" title="Daily"
+                    style={{display:"flex", flexDirection:'column', alignItems:'center'}}>
+                    <img src={trophy}
+                            height='100'
+                            width='100'
+                            alt="Person2"/>
+                    <Container fluid>
+                        <Row>
+                            <Col sm={8}>Partie Jouées :</Col>
+                            <Col className='leftRow'>10</Col>
+                        </Row>
+                        <Row>
+                            <Col sm={8}>Partie gagnées :</Col>
+                            <Col className='leftRow'>2</Col>
+                        </Row>
+                        <Row>
+                            <Col sm={8}>Pions posés :</Col>
+                            <Col className='leftRow'>2</Col>
+                        </Row>
+                        <hr/>
+                        <Row>
+                            <Col sm={8}>Partie solo :</Col>
+                            <Col className='leftRow'>21</Col>
+                        </Row>
+                        <Row>
+                            <Col sm={8}>Nombre de coups moyen :</Col>
+                            <Col className='leftRow'>19</Col>
+                        </Row>
+                    </Container>
+                </Tab>
+                <Tab eventKey="weekly" title="Weekly">
+                    <img src={trophy}
+                                height='100'
+                                width='100'
+                                alt="Person2"/>
+                </Tab>
+            </Tabs>
+            
+                <ButtonImgNav dest='/' img={share}/>
+                </div>
+        //</div>
+    );
+}
+
+export default ScoreBoard;

cryptide_project/src/Pages/Lobby.tsx

@@ -27,6 +27,7 @@ import EasyBot from '../model/EasyBot';
 import Bot from '../model/Bot';
 
 
+let gameStarted = false
 
 function Lobby() {
     const theme=useTheme();
@@ -79,6 +80,7 @@ function Lobby() {
         setPersonNetworkData(network)
         setIndicesData(choosenIndices)
         first = true
+        gameStarted = true
         navigate('/game?solo=false');
     });
 
@@ -90,6 +92,27 @@ function Lobby() {
         setPlayersData(tmpTab)
     })
 
+    socket.on("player left", (tab, socketId) => {
+        if (gameStarted){
+            const i = players.findIndex((p) => p.id == socketId)
+            if (i != undefined){
+                let player = players[i]
+                player = new EasyBot("125", "BOT125")
+                if (player instanceof Bot){
+                    player.indice = indices[i]
+                }
+            }
+        }
+        else{
+            const tmpTab: Player[] = []
+            for (const p of tab){
+                tmpTab.push(JSONParser.JSONToPlayer(p))
+            }
+            setPlayersData(tmpTab)
+        }
+        const index = players
+    })
+
     const [codeShowed, setCodeShowed] = useState(true);
 
 

cryptide_project/src/Pages/Play.css

@@ -35,25 +35,7 @@
     width: 30%;
 }
 
-.LeaderBoardiv{
-    background-color: #D7D4C6;
-    opacity: 80%;
-    border-radius: 25px;
 
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-
-    margin: 15px;
-}
-
-
-.textBoard{
-    display: flex;
-    flex-wrap: column;
-    justify-content: space-between;
-    width: 300px;
-}
 
 /* .textBoard div{
     display: flex;

cryptide_project/src/Pages/Play.tsx

@@ -22,7 +22,11 @@ import { socket } from '../SocketConfig';
 import { useNavigate } from 'react-router-dom';
 import GameCreator from '../model/GameCreator';
 import { useGame } from '../Contexts/GameContext';
+<<<<<<< HEAD
 import { set } from 'lodash';
+=======
+import ScoreBoard from '../Components/ScoreBoard';
+>>>>>>> origin
 
 
 function Play() {
@@ -94,11 +98,21 @@ function Play() {
       }, []);  // Aucune dépendance ici
 
     useEffect(() => {
+<<<<<<< HEAD
         if (room !== null) {
             const nouvelleURL = `/lobby?room=${room}`;
             navigate(nouvelleURL);
         }
     }, [room, navigate]);
+=======
+    if (room !== null) {
+        const nouvelleURL = `/lobby?room=${room}`;
+        navigate(nouvelleURL);
+    }
+    }, [room, navigate]);
+
+
+>>>>>>> origin
 
     return (
 
@@ -128,6 +142,7 @@ function Play() {
                 </div>
             </div>
             <div className='rightContainer'>
+<<<<<<< HEAD
                 <div className='LeaderBoardiv'>
                     <img src={trophy}
                                 height='100'
@@ -155,6 +170,9 @@ function Play() {
                     </button> */}
                     <ButtonImgNav dest='/' img={share}/>
                 </div>
+=======
+                <ScoreBoard/>
+>>>>>>> origin
             </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/Style/Global.css

@@ -52,4 +52,31 @@ form{
 
 .listContainer{
     columns: 2 auto;
+}
+
+/* LeaderBoard */
+.LeaderBoardiv{  
+    border: solid;
+    border-width: 0px 1px 1px 1px;
+    border-color: lightgray;
+    border-radius: 0px 0px 20px 20px;
+
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    margin: 15px;
+}
+
+
+.textBoard{
+    display: flex;
+    flex-wrap: column;
+    justify-content: space-between;
+    width: 300px;
+}
+
+.leftRow{
+    display: flex;
+    justify-content: end;
 }

cryptide_project/src/Translations/en.json

@@ -104,7 +104,7 @@
     "info.composant.hair_col.title":"Hair's colors",
     "info.composant.hair_col":"The characters also have a hair colour, which can be found in the following colours :",
 
-    "hair.blanc":"Blanc",
+    "hair.blanc":"White",
     "hair.blond":"Blond",
     "hair.roux":"Red head",
     "hair.chatain":"Brown",