Merge pull request 'fixCSS' (#78) from fixCSS into master

Reviewed-on: #78

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,31 +1,69 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
+
+/* 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';
-import Bot from '../res/img/bot.png';
 
 /* 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,
+    room : string | null
+}
 
 //@ts-ignore
-function PlayerItemList({ pdp, name, id}) {
+const PlayerItemList:React.FC<MyPlayerItemListProps> =({ player, room }) => {
-    const isBot = pdp === Bot;
+    // 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' />
+                <div>
-                <h4>{name}</h4>
+                    <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-${id}`} defaultValue={1}>
+                <ToggleButtonGroup type='radio' name={`options-${player.id}`} defaultValue={1}>
-                    <ToggleButton id={`tbg-radio-1-${id}`} value={1}>
+                    <ToggleButton id={`tbg-radio-1-${player.id}`} value={1}>
                         Facile
                     </ToggleButton>
-                    <ToggleButton id={`tbg-radio-2-${id}`} value={2}>
+                    <ToggleButton id={`tbg-radio-2-${player.id}`} value={2}>
                         Intermédiaire
                     </ToggleButton>
-                    <ToggleButton id={`tbg-radio-3-${id}`} value={3}>
+                    <ToggleButton id={`tbg-radio-3-${player.id}`} value={3}>
                         Fort
                     </ToggleButton>
                 </ToggleButtonGroup>

cryptide_project/src/Components/ScoreBoard.tsx

@@ -28,7 +28,7 @@ function ScoreBoard({Player = null}) {
         // <div className='LeaderBoardiv'>
         <div className='LeaderBoardiv'>
             <Tabs style={{width:"100%"}}
-                defaultActiveKey="profile"
+                defaultActiveKey="daily"
                 id="ScoreBoard"
                 className="mb-3">
                 

cryptide_project/src/Pages/EndGame.css

@@ -33,10 +33,50 @@
     align-items: center;
 }
 
-.playerContainer {
+.playersContainer {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding-left: "5px";
+    /* padding-left: "5px"; */
-  }
+
-  
+    width: 100px;
+    background-color: red;
+}
+
+.playerContainer{
+    /* display: flex;
+    align-items: center; */
+    /* flex-direction: column; */
+
+    /* width: 300px; */
+    width: 30%;
+    margin-bottom: 20px;
+    /* margin-bottom: 10px; */
+
+    border: solid 1px whitesmoke;
+    border-radius: 15px;
+    
+    background-color: white;
+}
+
+.losingPlayersContainer{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    
+    margin: 10px 0; 
+    
+    max-width: 50%;
+    
+    overflow-y: scroll;
+    max-height: 200px;
+    /* background-color: yellow; */
+}
+
+.indiceDisplay{
+    border: solid 2px whitesmoke;
+    border-radius: 10px;
+    margin: 0 15px 0 15px;
+    padding: 10px;  
+    box-shadow: 5px 5px 5px rgb(246, 246, 246);    
+}

cryptide_project/src/Pages/EndGame.tsx

@@ -28,7 +28,17 @@ function EndGame() {
 
     const {winner, person, players, indices} =useGame()
     console.log(winner)
+
+    let losingPlayers;
+
+    if (winner != null) {
+        losingPlayers = players.filter(player => player.id !== winner.id);
+    } else {
+        losingPlayers = players;
+    }
+
     const theme = useTheme();
+    
     return (
         <div>
             <div className="head">
@@ -38,28 +48,25 @@ function EndGame() {
                 </header>
             </div>
             <div className='winner'>
-                <img src={Person} width='300' height='300'/>
+                <img src={Person} width='250' height='250'/>
-                <h3>{indices[players.findIndex((p) => p.id == winner?.id)].ToString("fr")}</h3>
+                <h3 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == winner?.id)].ToString("fr")}</h3>
             </div>
             <div className='bottom'>
                 <div className='centerDivH'>
                     <BigButtonNav dest="/play" img={Leave}/>
                 </div>
-                <ul className='centerDivH'>
+                <div className="losingPlayersContainer">
-                    {
+                    {losingPlayers.map((player, index) => (
-                    players.map((player, index) => (
+                        <div className="playerContainer" key={index}>
-                        <div className="playerContainer">
+                            {player.id !== winner?.id && (
-                            {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.name} playerTouched={1} setPlayerTouched={() => {}} index={index} showCircle={false}/>
+                                    <h6 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}</h6>
-                                <h5 style={{width: 50}}>{indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}</h5>
+                                </div>
-                            </>
+                            )}
-                            }
                         </div>
-                    ))
+                    ))}
-                    }
+                </div>
-                    
-                </ul>
                 <div className='centerDivH'>
                     <BigButtonNav dest="/lobby" img={Replay}/>
                 </div>

cryptide_project/src/Pages/InGame.css

@@ -40,10 +40,12 @@
 }
 
 .resetDiv{
-    z-index: 1;
-    position: absolute;
-    top: 190px;
     right: 10px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
 }
 
 #graphDiv{

cryptide_project/src/Pages/InGame.tsx

@@ -21,6 +21,7 @@ import Info from "../res/icon/infoGreen.png";
 import Check from "../res/icon/checkboxGreen.png";
 import Alpha from "../res/GreekLetters/alphaW.png";
 import MGlass from "../res/icon/magnifying-glass.png";
+import Reset from "../res/icon/reset.png";
 import Oeye from "../res/icon/eye.png";
 import Ceye from "../res/icon/hidden.png";
 
@@ -34,7 +35,7 @@ import Offcanvas from 'react-bootstrap/Offcanvas';
 /* Model */
 import Stub from '../model/Stub';
 import { HiLanguage } from 'react-icons/hi2';
-import { Nav, NavDropdown } from 'react-bootstrap';
+import { Nav, NavDropdown, Spinner } from 'react-bootstrap';
 import { FormattedMessage } from 'react-intl';
 import Color from '../model/Color';
 import { useGame } from '../Contexts/GameContext';
@@ -70,12 +71,8 @@ const InGame = ({locale, changeLocale}) => {
   };
   
   const setShowLastData = () =>{
-    if (showLast){
+    setLastVisible(!showLast);
-      setShowLast(false)
+    setShowLast(!showLast);
-    }
-    else{
-      setShowLast(true)
-    }
   }
 
   useEffect(() => {
@@ -127,7 +124,11 @@ const InGame = ({locale, changeLocale}) => {
   }
 
   const resetGraph = () => {
+    setisLoading(true);
     socket.emit("reset graph", socket.id)
+    setTimeout(() => {
+      setisLoading(false);
+    }, 2000);  
   }
 
   /* offcanvas */
@@ -148,6 +149,8 @@ const InGame = ({locale, changeLocale}) => {
   const [cptTour, setcptTour] = useState(0);
 
   const [LastVisible, setLastVisible] = useState(false);
+
+  const [isLoading, setisLoading] = useState(false);
   
 
   //@ts-ignore
@@ -243,18 +246,32 @@ const InGame = ({locale, changeLocale}) => {
         </div>
 
 
-        <div className='resetDiv'>
-          <button className='button'
-            style={{ 
-                backgroundColor: theme.colors.tertiary,
-                borderColor: theme.colors.secondary
-            }}
-            onClick={resetGraph}>
-            <img src={Param} alt="paramètres" height='40'/>
-          </button>
-        </div>
 
         <div className='menuGame'>
+          <div className='resetDiv'>
+            <button className='button'
+              style={{ 
+                  backgroundColor: theme.colors.tertiary,
+                  borderColor: theme.colors.secondary
+              }}
+              onClick={resetGraph}>
+              
+              {
+                isLoading ? (
+                  <Spinner animation="grow" />
+                  )
+                  : (
+                  <img src={Reset} alt="paramètres" height='40'/>
+                )
+              }
+              
+              
+            </button>
+          </div>
+
+
+
+
           {/* <Link to='/info#indice-possible' target='_blank'> 
             //? redirection impossible apparament (securité des navigateur
           */}

cryptide_project/src/Pages/Lobby.css

@@ -27,7 +27,7 @@
 
 .player-board{
     height: 100%;
-    width: max-content;
+    width: 800px;
     background-color: rgb(243, 241, 235);
     border-radius: 20px;
 

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
@@ -129,7 +133,8 @@ function Lobby() {
                     </div>
                     {/* //! 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} pdp={PersonImg} name={player.name} id={player.id}/>
+                        <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;
-}
+}