From cf4107a2e14f7da59c0b9229a3ff284da637d2b5 Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Wed, 22 Nov 2023 10:18:57 +0100
Subject: [PATCH] ajout de la gestion de suppression des bots :zap:

---
 cryptide_project/server/server.js             |  13 +++++++
 .../src/Components/PlayerItemList.tsx         |  34 +++++++++++++++---
 cryptide_project/src/Pages/Lobby.tsx          |   6 +++-
 cryptide_project/src/Style/Global.css         |  22 +++++++++++-
 cryptide_project/src/res/icon/trash.png       | Bin 0 -> 1550 bytes
 5 files changed, 68 insertions(+), 7 deletions(-)
 create mode 100644 cryptide_project/src/res/icon/trash.png

diff --git a/cryptide_project/server/server.js b/cryptide_project/server/server.js
index abdcb96..14d53df 100644
--- a/cryptide_project/server/server.js
+++ b/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))
   })
diff --git a/cryptide_project/src/Components/PlayerItemList.tsx b/cryptide_project/src/Components/PlayerItemList.tsx
index b9ef236..eb7350d 100644
--- a/cryptide_project/src/Components/PlayerItemList.tsx
+++ b/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}>
diff --git a/cryptide_project/src/Pages/Lobby.tsx b/cryptide_project/src/Pages/Lobby.tsx
index bec8f50..61193d0 100644
--- a/cryptide_project/src/Pages/Lobby.tsx
+++ b/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}
diff --git a/cryptide_project/src/Style/Global.css b/cryptide_project/src/Style/Global.css
index 2ab26a6..388b659 100644
--- a/cryptide_project/src/Style/Global.css
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/cryptide_project/src/res/icon/trash.png b/cryptide_project/src/res/icon/trash.png
new file mode 100644
index 0000000000000000000000000000000000000000..f6d6bcedc1a08870902f6fac6adfe3cce1ea28d3
GIT binary patch
literal 1550
zcmds1`7@gd82%D*#8H%Lh-16X66{h!1RE8ktq@|-rIXgGYTZiHbtRTmoV8U-$skRs
zwyLv1*7?=h7VXyAK_!wNj#i>rY8zHNv$Oxh&b-h29P|A0{_-+?iJmHoI*I@Qs1Ur|
z{q~sl1qyO|yVvFP&>q3#yn+(}KuO~ZAV5VW0sv$|f;)~(t^80mk{1|&7<``NPj|d_
zHTnXHd#>1fvNmaa;3<a--=)=h$5NV^10+Qh`hHL7p#vrKaJ)NXUH&y<J#)kibAJ?n
z_7ihV7sp6hiEVf{mnh!E8r;}O?BcIgZbqzF!v?ht!41$wp!~)`1_exA|BH?Bd#9S+
z$&uFY6QFwMqas}!*pl(?QqE{P+4E$|m7df{*YmGn14cnsFIR`+rJLT>B8S3%X96+{
z$I7S5Rl=;aI&P8X&wTudkVLIJD63GMB$p%W%!LjTPz{r=<Dd|7_=8t=2xJasU%K?!
z5<JKWjmxnWm+m*@*L|Ls1Uyjni=4j1=tri-Y)wyoP6YKS$fi4G9&ni`=n8?wid~gj
zQyPopn!Tl0=p$9=T0fe$pi^tNXe0hv?DFS3M5F*l>CH0Yv2AaT8vDddZx-`4z^I`F
z$%!($D4ML1f>ByJ0_`YS%=0-K2-Ml&#4D)!F|TQa{X;|>ly?>WOIQT1%0u|u&BZ*W
z8VefV2A3waPW*Pk8Io`uY<ZT6Dd@A!xNV)TAZt&zPSzTagi-(KGx@H|6RlokWLqVh
zTv153DDR@WXtpWjmT4d{N-H5L>g%}Ms=@=((3<0Z%|1WvA5Na8<(^J@-OU&7zHrfr
z7iSGtU%yCDM;}hdavfJjjC~Tvb|wa^(;Kq<jB{;Kr^K8!e<&6AxGBe)i(W4Urb@Cd
z2l!s@LbZ$!WcCFyh4>nL&fiT_!l;m2Yg0x&Aw$N+Vb4t;+E^$T1m&yo*?YHdM=)kZ
z#cO;jgx7h|)k*K#vb0fzk$I$1ogmS!j*-CXkyyx*oDZ#SFN#5=K<|Aj?auJ;?tz`#
z{wiw!6Npw?PySr@3njDR1u3%gtLcKRr%hMaQCWbDbM&A7SRWdlWxsHkWeWaK;6^TU
zZ16bLFr*v6R+|VfY#`+<*?3NvxhIvg&uiAU4U_B?Nuh7+b+YTN63PGXI>ajc$c-JI
z+x81aGb(ss!RgdCDc2-jH4L(4XDB=?a#%g+G-(s7%@$KZOKtIwJwX65+&xN6;r0=O
zi5V#=TTgCeTZtf>5gkt21JF1lLm_iC8i@f{@-G=M9s=*5=TO@(&M@}HnTcMxA(X%{
zZS{Aw0?rJYOp6qx4z%l?MgeF@#@Q_F$+onkvM<Y5->Xtg^5KGW9>ZwPj6Iq5z?P*4
z50jx*Vv9;*_&FXKKL;X^i;ubPwyuRS$ClM7T3e2yiAAfTmMSRLn{|nH$JY_mjN|p!
znf3+|eh1Iw@dDl60Be>zsRqu<VRBR+Uf@db6`cT=9%nT7msx<n;vfP+mJzk}wln1J
zh4dM&fukDP>-eKq4cIQZR}XTxT{_DUo11#HuilhAJut;3==z|UW4L8TY($4l@Rgmd
zt1WhB(Akz}M&E=o^^X-9ZsPq1nhu>wYMH4xwUKP9VzE4~>$E#reWC(xVkvKz;FkP4
z!s7{@JC-E4|NU^xTR>HsXN)Vxm$T<~D^*y~^csEQAhOHcGp&&No>`<14uaw9yh?LU
z@)Nz)d(1Mo)qb^?@~N83^L{mvjnh=GkYmwOtI~LmPLCe=cC-sa3>xB3^%}?~fTY&F
O2M-YNME6EFO6EU{HQew3

literal 0
HcmV?d00001