ajout de la gestion de suppression des bots ⚡

cryptide_project/server/server.js

@@ -54,6 +54,19 @@ io.on('connection', (socket) => {
     io.to(room).emit("new player", map.get(room))
   })
 
+
+  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){
+        tab.splice(i, 1)
+      }
+    }
+    io.to(room).emit("new player", map.get(room))
+  })
+
+
   socket.on("lobby created", () =>{
     io.to(socket.id).emit("lobby created", Math.floor(Math.random() * 10000))
   })

cryptide_project/src/Components/PlayerItemList.tsx

@@ -1,35 +1,59 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import '../Style/Global.css';
 
 /* img */
 import BotPDP from '../res/img/bot.png';
 import PersonPDP from '../res/img/Person.png';
+import Trash from '../res/icon/trash.png';
+
+/* style */
+import '../Style/Global.css';
 
 /* Boostrap */
 import ToggleButton from 'react-bootstrap/ToggleButton';
 import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';
+import Button from 'react-bootstrap/Button';
 
+/* model */
 import Player from '../model/Player';
 import Bot from '../model/Bot';
 
+/* server */
+import { socket } from '../SocketConfig';
 
 interface MyPlayerItemListProps {
-    player : Player
+    player : Player,
+    room : string | null
 }
 
 //@ts-ignore
-const PlayerItemList:React.FC<MyPlayerItemListProps> =({ player }) => {
+const PlayerItemList:React.FC<MyPlayerItemListProps> =({ player, room }) => {
     // const isBot = pdp === Bot;
     let pdp;
     const isBot = player instanceof Bot;
     isBot ? pdp = BotPDP :  pdp = PersonPDP;
     
+
+    const delBot = () => {
+        if (isBot && room != null) {
+            console.log(room);
+            socket.emit("bot deleted", player, room);
+        }
+    };
+
     return (
         <div className='item-horizontal-div-container'>
+            
             <div className='item-horizontal-div'>
-                <img src={pdp} alt='player-image' height='100' width='100' />
-                <h4>{player.name}</h4>
+                <div>
+                    <img src={pdp} alt='player-image' height='100' width='100' />
+                    <h4>{player.name}</h4>
+                </div>
+                {isBot && (
+                    <Button className='suprButton' onClick={delBot} variant="danger">
+                        <img src={Trash} alt='Trash-icon' height='30' width='30' />
+                    </Button>
+                )}
             </div>
             {isBot && (
                 <ToggleButtonGroup type='radio' name={`options-${player.id}`} defaultValue={1}>

cryptide_project/src/Pages/Lobby.tsx

@@ -45,6 +45,10 @@ function Lobby() {
         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
@@ -130,7 +134,7 @@ function Lobby() {
                     {/* //! voir pour la gestion avec un liste, utilisateur avec le "+ (vous)" et les pdp avec les lettres grecs (?)*/}
                     {players.map((player, index) => (
                         // <PlayerItemList key={player.id} pdp={PersonImg} name={player.name} id={player.id}/>
-                        <PlayerItemList key={player.id} player={player}/>
+                        <PlayerItemList key={player.id} player={player} room={room}/>
                     ))}
                     <div className='centerButton'>
                             <button className='button' onClick={addBot}

cryptide_project/src/Style/Global.css

@@ -22,12 +22,32 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    justify-content: space-between;
     background-color:#fff;
     border-radius: 15px;
     width: 500px;
     margin: 10px 20px;
 }
 
+.item-horizontal-div div{
+    display: flex;
+    align-items: center;
+}
+.delButtonDiv{
+    display: flex;
+    justify-content: end;
+}
+
+.suprButton{    
+    margin: auto 50px;
+
+    border: solid 1px darkred;
+    border-radius: 10px;
+
+    background-color: red;
+    
+}
+
 .statusDiv{
     /* background-color: #A7E2DC; */
     border-radius: 15px;
@@ -79,4 +99,4 @@ form{
 .leftRow{
     display: flex;
     justify-content: end;
-}
+}