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{ 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 4b2d4e9..eb7350d 100644 --- a/cryptide_project/src/Components/PlayerItemList.tsx +++ b/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 isBot = pdp === Bot; +const PlayerItemList:React.FC =({ 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 (
+
- player-image -

{name}

+
+ player-image +

{player.name}

+
+ {isBot && ( + + )}
{isBot && ( - - + + Facile - + Intermédiaire - + Fort diff --git a/cryptide_project/src/Components/ScoreBoard.tsx b/cryptide_project/src/Components/ScoreBoard.tsx index b756e4a..d0540ab 100644 --- a/cryptide_project/src/Components/ScoreBoard.tsx +++ b/cryptide_project/src/Components/ScoreBoard.tsx @@ -28,7 +28,7 @@ function ScoreBoard({Player = null}) { //
diff --git a/cryptide_project/src/Pages/EndGame.css b/cryptide_project/src/Pages/EndGame.css index 0d69be8..9af5187 100644 --- a/cryptide_project/src/Pages/EndGame.css +++ b/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"; - } - \ No newline at end of file + /* 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); +} \ No newline at end of file diff --git a/cryptide_project/src/Pages/EndGame.tsx b/cryptide_project/src/Pages/EndGame.tsx index cf3d932..411753a 100644 --- a/cryptide_project/src/Pages/EndGame.tsx +++ b/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 (
@@ -38,28 +48,25 @@ function EndGame() {
- -

{indices[players.findIndex((p) => p.id == winner?.id)].ToString("fr")}

+ +

{indices[players.findIndex((p) => p.id == winner?.id)].ToString("fr")}

-
    - { - players.map((player, index) => ( -
    - {player.id!=winner?.id && - <> - {}} index={index} showCircle={false}/> -
    {indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}
    - - } +
    + {losingPlayers.map((player, index) => ( +
    + {player.id !== winner?.id && ( +
    + {}} index={index} showCircle={false}/> +
    {indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}
    +
    + )}
    - )) - } - -
+ ))} +
diff --git a/cryptide_project/src/Pages/InGame.css b/cryptide_project/src/Pages/InGame.css index 29133ea..81b99e3 100644 --- a/cryptide_project/src/Pages/InGame.css +++ b/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{ diff --git a/cryptide_project/src/Pages/InGame.tsx b/cryptide_project/src/Pages/InGame.tsx index f3ef78f..9a6d820 100644 --- a/cryptide_project/src/Pages/InGame.tsx +++ b/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){ - setShowLast(false) - } - else{ - setShowLast(true) - } + setLastVisible(!showLast); + setShowLast(!showLast); } 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}) => {
-
- -
+
+ +
+ + + + {/* //? redirection impossible apparament (securité des navigateur */} diff --git a/cryptide_project/src/Pages/Lobby.css b/cryptide_project/src/Pages/Lobby.css index 6a6f132..60dfcf0 100644 --- a/cryptide_project/src/Pages/Lobby.css +++ b/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; diff --git a/cryptide_project/src/Pages/Lobby.tsx b/cryptide_project/src/Pages/Lobby.tsx index 8a191bb..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 @@ -129,7 +133,8 @@ function Lobby() {
{/* //! voir pour la gestion avec un liste, utilisateur avec le "+ (vous)" et les pdp avec les lettres grecs (?)*/} {players.map((player, index) => ( - + // + ))}