diff --git a/ballon-de-basket.png b/ballon-de-basket.png new file mode 100644 index 0000000..130d587 Binary files /dev/null and b/ballon-de-basket.png differ diff --git a/ballon-de-foot.png b/ballon-de-foot.png new file mode 100644 index 0000000..f10124a Binary files /dev/null and b/ballon-de-foot.png differ diff --git a/baseball.png b/baseball.png new file mode 100644 index 0000000..dcc6c76 Binary files /dev/null and b/baseball.png differ diff --git a/bowling.png b/bowling.png new file mode 100644 index 0000000..d6b9b20 Binary files /dev/null and b/bowling.png differ diff --git a/cryptide_project/package-lock.json b/cryptide_project/package-lock.json index e257a1c..1ddf1c9 100644 --- a/cryptide_project/package-lock.json +++ b/cryptide_project/package-lock.json @@ -24,6 +24,7 @@ "cors": "^2.8.5", "express": "^4.18.2", "express-session": "^1.17.3", + "file-saver": "^2.0.5", "lodash": "^4.17.21", "mysql": "^2.18.1", "react": "^18.2.0", @@ -44,6 +45,7 @@ "web-vitals": "^2.1.4" }, "devDependencies": { + "@types/file-saver": "^2.0.7", "@types/react-router-hash-link": "^2.4.9", "@types/uuid": "^9.0.7" } @@ -4345,6 +4347,12 @@ "@types/send": "*" } }, + "node_modules/@types/file-saver": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz", + "integrity": "sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==", + "dev": true + }, "node_modules/@types/graceful-fs": { "version": "4.1.9", "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz", @@ -8870,6 +8878,11 @@ "webpack": "^4.0.0 || ^5.0.0" } }, + "node_modules/file-saver": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz", + "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==" + }, "node_modules/filelist": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz", diff --git a/cryptide_project/package.json b/cryptide_project/package.json index d1934ec..f959614 100644 --- a/cryptide_project/package.json +++ b/cryptide_project/package.json @@ -18,6 +18,7 @@ "cors": "^2.8.5", "express": "^4.18.2", "express-session": "^1.17.3", + "file-saver": "^2.0.5", "lodash": "^4.17.21", "mysql": "^2.18.1", "react": "^18.2.0", @@ -62,6 +63,7 @@ ] }, "devDependencies": { + "@types/file-saver": "^2.0.7", "@types/react-router-hash-link": "^2.4.9", "@types/uuid": "^9.0.7" } diff --git a/cryptide_project/server/server.js b/cryptide_project/server/server.js index ba01cfe..14d53df 100644 --- a/cryptide_project/server/server.js +++ b/cryptide_project/server/server.js @@ -18,7 +18,7 @@ const map = new Map() // ... le reste de votre configuration du serveur server.listen(3002, () => { - console.log('Serveur Socket.IO écoutant sur le port 3001'); + console.log('Serveur Socket.IO écoutant sur le port 3002'); }); io.on('connection', (socket) => { @@ -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)) }) @@ -80,7 +93,7 @@ io.on('connection', (socket) => { for (let i = 0; i { io.to(id).emit("put imossible grey") }) + socket.on("opacity activated", (id) => { + io.to(id).emit("opacity activated") + }) + + socket.on("opacity deactivated", (id) => { + io.to(id).emit("opacity deactivated") + }) + + socket.on("reset graph", (id) => { + io.to(id).emit("reset graph") + }) + socket.on("end game", (winnerIndex, room) =>{ - console.log("endgame") io.to(room).emit("end game", winnerIndex) }) }); diff --git a/cryptide_project/src/ColorHelper.ts b/cryptide_project/src/ColorHelper.ts index 6e10218..acbf46d 100644 --- a/cryptide_project/src/ColorHelper.ts +++ b/cryptide_project/src/ColorHelper.ts @@ -53,4 +53,41 @@ function colorToEmoji(color: string, works: boolean): string{ } } -export {colorToEmoji, positionToColor} + + +function positionToEmoji(pos: number, works: boolean): string{ + if (works){ + switch (pos) { + case 0: + return "🔵"; + case 1: + return "🟢"; + case 2: + return "🟡"; + case 3: + return "🟣"; + case 4: + return "🔴"; + default: + return "🟤"; + } + } + else{ + switch (pos) { + case 0: + return "🟦"; + case 1: + return "🟩"; + case 2: + return "🟨"; + case 3: + return "🟪"; + case 4: + return "🟥"; + default: + return "🟫"; + } + } +} + +export {colorToEmoji, positionToColor, positionToEmoji} diff --git a/cryptide_project/src/Components/GraphContainer.css b/cryptide_project/src/Components/GraphContainer.css index 2fd8b58..07ff037 100644 --- a/cryptide_project/src/Components/GraphContainer.css +++ b/cryptide_project/src/Components/GraphContainer.css @@ -11,4 +11,4 @@ align-items: center; background-color: #f5f5f5; -} \ No newline at end of file +} diff --git a/cryptide_project/src/Components/GraphContainer.tsx b/cryptide_project/src/Components/GraphContainer.tsx index 415c419..dded479 100644 --- a/cryptide_project/src/Components/GraphContainer.tsx +++ b/cryptide_project/src/Components/GraphContainer.tsx @@ -1,27 +1,16 @@ import React, { useEffect, useState } from "react"; import { DataSet, Network} from "vis-network/standalone/esm/vis-network"; -import EdgesCreator from "../model/EdgesCreator"; import GraphCreator from "../model/Graph/GraphCreator"; -import IndiceChooser from "../model/IndiceChooser"; -import SportIndice from "../model/Indices/SportIndice"; -import NetworkGenerator from "../model/NetworkGenerator"; -import Sport from "../model/Sport"; -import Stub from "../model/Stub"; import "./GraphContainer.css"; -import NodePerson from "../model/Graph/NodePerson"; import IndiceTesterFactory from "../model/Factory/IndiceTesterFactory"; -import GameCreator from "../model/GameCreator"; -import io from 'socket.io-client'; -import JSONParser from "../JSONParser"; -import PersonNetwork from "../model/PersonsNetwork"; import Person from "../model/Person"; -import Indice from "../model/Indices/Indice"; import { Navigate, useLocation, useNavigate } from "react-router-dom"; import { useGame } from "../Contexts/GameContext"; import { socket } from "../SocketConfig" -import { colorToEmoji, positionToColor } from "../ColorHelper"; +import { colorToEmoji, positionToColor, positionToEmoji } from "../ColorHelper"; import { ColorToHexa } from "../model/EnumExtender"; import Bot from "../model/Bot"; +import NodePerson from "../model/Graph/NodePerson"; interface MyGraphComponentProps { @@ -33,24 +22,25 @@ interface MyGraphComponentProps { changecptTour: (newcptTour : number) => void addToHistory: (message : string) => void solo : boolean + setNetwork: (network: Network) => void + showLast: boolean } let lastAskingPlayer = 0 let lastNodeId = -1 let first = true let askedWrong = false -let solo: boolean = true let mapIndexPersons: Map = new Map() let touchedPlayer = -1 let botIndex = -1 let askedWrongBot = false -let botTurnToCube = false let lastSocketId= "" let firstLap = true let cptHistory = 0 +let lastNodes: NodePerson[] = [] -const MyGraphComponent: React.FC = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, addToHistory}) => { +const MyGraphComponent: React.FC = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, addToHistory, showLast, setNetwork}) => { let cptTour: number = 0 const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, setTurnPlayerIndexData, setWinnerData } = useGame(); @@ -78,6 +68,25 @@ let cptTour: number = 0 } }, [playerTouched]) + + useEffect(() => { + const tab: NodePerson[] = [] + for(const n of lastNodes.reverse()){ + if (!tab.find((node) => node.id == n.id)){ + tab.push(n) + if (tab.length > players.length * 2) break + } + } + lastNodes = tab + if (showLast){ + socket.emit("opacity activated", socket.id) + } + else{ + socket.emit("opacity deactivated", socket.id) + } + + }, [showLast]) + let playerIndex: number = turnPlayerIndex let index = 0 for (let i=0; i{ if (actualPlayerIndex==0){ @@ -121,6 +129,13 @@ let cptTour: number = 0 } if(!works){ socket.emit("node checked", personIndex, works, playerIndex, room, nextPlayerIndex) + const ind = bot.placeSquare(personNetwork, players) + console.log(lastIndex + " pose carré sur " + personNetwork.getPersons()[ind].getName()) + playerIndex = lastIndex + 1 + if(playerIndex == players.length){ + playerIndex = 0 + } + socket.emit("node checked", ind, false, lastIndex, room, playerIndex) return } playerIndex ++ @@ -179,6 +194,7 @@ let cptTour: number = 0 if (first){ first = false + if (!solo){ for(let i = 0; i{ const pers = personNetwork.getPersons().find((p) => p.getId() == id) @@ -244,11 +263,30 @@ let cptTour: number = 0 askedPersons.push(pers) } }) + + socket.on("opacity activated", () => { + nodes.forEach(node => { + if (!lastNodes.find((n) => n.id == node.id)){ + networkData.nodes.update({id: node.id, opacity: 0.2}) + } + }); + }) + + socket.on("opacity deactivated", () => { + nodes.forEach(node => { + networkData.nodes.update({id: node.id, opacity: 1}) + }); + }) + + socket.on("reset graph", () => { + initialOptions.physics.enabled = true + network.setOptions(initialOptions) + }) socket.on("node checked",(id, works, askedIndex, newPlayerIndex, socketId) => { + console.log(newPlayerIndex) const node = nodes.get().find((n) => id == n.id) if (node!=undefined){ - onNodeClick(false) playerIndex = newPlayerIndex if (mapIndexPersons.get(askedIndex)?.find((p) => p.getId() == id) == undefined){ @@ -267,14 +305,15 @@ let cptTour: number = 0 } if (!node.label.includes(colorToEmoji(positionToColor(askedIndex), works))){ - networkData.nodes.update({id: id, label: node.label + colorToEmoji(positionToColor(askedIndex), works)}) + networkData.nodes.update({id: id, label: node.label + positionToEmoji(askedIndex, works)}) cptHistory++ if (cptHistory % 2 == 0){ - addToHistory(players[askedIndex].name + " à mis un " + colorToEmoji(positionToColor(askedIndex), works)) + lastNodes.push(node) + addToHistory(players[askedIndex].name + " à mis un " + positionToEmoji(askedIndex, works) + " à " + personNetwork.getPersons()[id].getName()) } } - if (playerIndex === thisPlayerIndex){ + if (playerIndex === actualPlayerIndex){ handleTurnBarTextChange("À vous de jouer") handleShowTurnBar(true) } @@ -297,7 +336,7 @@ let cptTour: number = 0 askedWrongBot=true handleShowTurnBar(true) handleTurnBarTextChange("Mauvais choix, posez un carré !") - socket.emit("put grey background", socket.id, thisPlayerIndex) + socket.emit("put grey background", socket.id, actualPlayerIndex) }) @@ -316,16 +355,16 @@ let cptTour: number = 0 const node = nodes.get().find((n) => nodeId == n.id) if (node != undefined && indice != null){ var tester = IndiceTesterFactory.Create(indice) - let maybe = thisPlayerIndex + let maybe = actualPlayerIndex if (tester.Works(pers)){ playerIndex = playerIndex + 1 if(playerIndex == players.length){ playerIndex = 0 } - socket.emit("node checked", nodeId, true, thisPlayerIndex, room, playerIndex) + socket.emit("node checked", nodeId, true, actualPlayerIndex, room, playerIndex) } else{ - maybe = thisPlayerIndex - 1 + maybe = actualPlayerIndex - 1 if(maybe == 0){ maybe = players.length - 1 } @@ -337,7 +376,7 @@ let cptTour: number = 0 } } if (index != undefined){ - socket.emit("node checked", nodeId, false, thisPlayerIndex, room, index) + socket.emit("node checked", nodeId, false, actualPlayerIndex, room, index) socket.emit("asked wrong", askingPlayer, room) } @@ -369,7 +408,7 @@ let cptTour: number = 0 if (personNetwork != null){ const tab = mapIndexPersons.get(player) if (tab != undefined){ - if (player != thisPlayerIndex){ + if (player != actualPlayerIndex){ for(const person of personNetwork.getPersons().filter((p) => tab.includes(p))){ networkData.nodes.update({id: person.getId(), color: "#808080"}) } @@ -392,7 +431,7 @@ let cptTour: number = 0 const node = nodes.get().find((n) => pers.getId() == n.id) if (node != undefined){ for(let i=0; i{ + setNodeIdData(-1) + setActualPlayerIndexData(-1) + setLastIndex(-1) + setPlayerTouched(-1) setWinnerData(players[winnerIndex]) + first = true + cptHistory = 0 + askedWrong=false + askedWrongBot=false + socket.off("end game") + socket.off("asked all") + socket.off("opacity activated") + socket.off("opacity deactivated") + socket.off("reset graph") + socket.off("node checked") + socket.off("already asked") + socket.off("asked wrong") + socket.off("asked") + socket.off("put correct background") + socket.off("put grey background") + socket.off("put imossible grey") + navigate("/endgame") }) @@ -435,6 +495,7 @@ let cptTour: number = 0 // Un nœud a été cliqué initialOptions.physics.enabled = false; network.setOptions(initialOptions); + setNetwork(network) } }); @@ -449,11 +510,11 @@ let cptTour: number = 0 if (person !== undefined && indice !== null){ const tester = IndiceTesterFactory.Create(indice) if (!tester.Works(person) && !askedPersons.includes(person)){ - playerIndex = thisPlayerIndex + 1 + playerIndex = actualPlayerIndex + 1 if(playerIndex == players.length){ playerIndex = 0 } - socket.emit("node checked", params.nodes[0], false, thisPlayerIndex, room, playerIndex) + socket.emit("node checked", params.nodes[0], false, actualPlayerIndex, room, playerIndex) socket.emit("put correct background", socket.id) touchedPlayer=-1 askedPersons.push(person) @@ -474,10 +535,12 @@ let cptTour: number = 0 nextPlayerIndex = 0 } socket.emit("node checked", params.nodes[0], true, touchedPlayer, room, nextPlayerIndex) + setPlayerTouched(-1) } else{ socket.emit("node checked", params.nodes[0], false, touchedPlayer, room, actualPlayerIndex) socket.emit("asked wrong", players[actualPlayerIndex]) + setPlayerTouched(-1) } } } @@ -486,8 +549,9 @@ let cptTour: number = 0 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 + setPlayerTouched(-1) } - touchedPlayer=-1 } } else if(playerIndex == actualPlayerIndex && touchedPlayer==players.length){ @@ -516,9 +580,11 @@ let cptTour: number = 0 socket.emit("node checked", params.nodes[0], true, playerIndex, room, actualPlayerIndex) } if(!works){ - socket.emit("node checked", params.nodes[0], works, playerIndex, room, nextPlayerIndex) + socket.emit("node checked", params.nodes[0], works, playerIndex, room, actualPlayerIndex) socket.emit("put correct background", socket.id) + socket.emit("asked wrong", players[actualPlayerIndex]) touchedPlayer=-1 + setPlayerTouched(-1) return } if (i == players.length - 1){ @@ -531,6 +597,7 @@ let cptTour: number = 0 i++ } touchedPlayer=-1 + setPlayerTouched(-1) socket.emit("put correct background", socket.id) await delay(1000) socket.emit("end game", actualPlayerIndex, room) @@ -548,8 +615,8 @@ let cptTour: number = 0 const test = tester.Works(person) const node = nodes.get().find((n) => params.nodes[0] == n.id) if (node!=undefined){ - if (!node.label.includes(colorToEmoji(positionToColor(index), test))){ - networkData.nodes.update({id: params.nodes[0], label: node.label + colorToEmoji(positionToColor(index), test)}) + if (!node.label.includes(positionToEmoji(index, test))){ + networkData.nodes.update({id: params.nodes[0], label: node.label + positionToEmoji(index, test)}) await delay(500) if(!test){ works = false 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 1d253ee..75f60c0 100644 --- a/cryptide_project/src/Components/ScoreBoard.tsx +++ b/cryptide_project/src/Components/ScoreBoard.tsx @@ -32,7 +32,7 @@ const ScoreBoard: React.FC<{ Player: PlayerProps }> = ({ Player }) => { //
diff --git a/cryptide_project/src/Contexts/GameContext.tsx b/cryptide_project/src/Contexts/GameContext.tsx index bfc46ef..32da9d2 100644 --- a/cryptide_project/src/Contexts/GameContext.tsx +++ b/cryptide_project/src/Contexts/GameContext.tsx @@ -29,6 +29,7 @@ interface GameContextProps { setRoomData: (newRoom: string) => void; setOnlyFalseData: (newOnlyFalse: boolean) => void setWinnerData: (winner: Player) => void + reset: () => void } const GameContext = createContext(undefined); @@ -101,8 +102,22 @@ export const GameProvider: React.FC = ({ children }) => { setWinner(winner) } + const reset = () => { + setIndices([]) + setActualPlayerIndex(-1) + setAskedPersons([]) + setPlayers([]) + setPerson(null) + setPersonNetwork(null) + setRoom("") + setWinner(null) + setTurnPlayerIndex(-1) + setNodeId(-1) + setIndice(null) + } + return ( - + {children} ); 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 8915a15..581664e 100644 --- a/cryptide_project/src/Pages/EndGame.tsx +++ b/cryptide_project/src/Pages/EndGame.tsx @@ -26,6 +26,12 @@ import { useGame } from '../Contexts/GameContext'; function EndGame() { + const {reset} = useGame() + + const resetAll = () => { + reset() + } + const {winner, person, players, indices} =useGame() console.log(winner) let indice = indices[0] @@ -34,7 +40,17 @@ function EndGame() { indice = indices[index] } + + let losingPlayers; + + if (winner != null) { + losingPlayers = players.filter(player => player.id !== winner.id); + } else { + losingPlayers = players; + } + const theme = useTheme(); + return (
@@ -44,28 +60,25 @@ function EndGame() {
- -

{indice.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 654e21f..81b99e3 100644 --- a/cryptide_project/src/Pages/InGame.css +++ b/cryptide_project/src/Pages/InGame.css @@ -32,6 +32,22 @@ right: 10px; } +.opacityDiv{ + z-index: 1; + position: absolute; + top: 100px; + right: 10px; +} + +.resetDiv{ + right: 10px; + + display: flex; + justify-content: center; + align-items: center; + +} + #graphDiv{ display: flex; diff --git a/cryptide_project/src/Pages/InGame.tsx b/cryptide_project/src/Pages/InGame.tsx index 65f525a..4031b3c 100644 --- a/cryptide_project/src/Pages/InGame.tsx +++ b/cryptide_project/src/Pages/InGame.tsx @@ -1,5 +1,6 @@ import React, { useState, useEffect } from 'react'; import Switch from "react-switch"; +import {saveAs} from "file-saver" /* Style */ import "./InGame.css" @@ -20,6 +21,10 @@ 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 Download from "../res/icon/download.png" +import Reset from "../res/icon/reset.png"; +import Oeye from "../res/icon/eye.png"; +import Ceye from "../res/icon/hidden.png"; /* nav */ import { Link } from 'react-router-dom'; @@ -31,12 +36,16 @@ 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'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { NavLink } from 'react-router-dom'; +import { last } from 'lodash'; +import { socket } from '../SocketConfig'; +import { Network } from 'vis-network'; +import generateLatexCode from '../Script/LatexScript'; //@ts-ignore const InGame = ({locale, changeLocale}) => { @@ -55,12 +64,18 @@ const InGame = ({locale, changeLocale}) => { //* Historique const [history, setHistory] = useState([]); + const [showLast, setShowLast] = useState(false) // Fonction pour ajouter un élément à l'historique const addToHistory = (message: string) => { setHistory(prevHistory => [...prevHistory, message]); }; + const setShowLastData = () =>{ + setLastVisible(!showLast); + setShowLast(!showLast); + } + useEffect(() => { const historyContainer = document.getElementById('history-container'); if (historyContainer) { @@ -69,13 +84,19 @@ const InGame = ({locale, changeLocale}) => { }, [history]); - + const {personNetwork, person, indices} = useGame() const [showChoiceBar, setShowChoiceBar] = useState(false); const [showTurnBar, setShowTurnBar] = useState(false); const [turnBarText, setTurnBarText] = useState(""); const [playerTouched, setPlayerTouched] = useState(-2) + const [network, setNetwork] = useState(null) + + const setNetworkData = (network: Network) => { + setNetwork(network) + } + const handleNodeClick = (shouldShowChoiceBar: boolean) => { setShowChoiceBar(shouldShowChoiceBar); }; @@ -93,6 +114,24 @@ const InGame = ({locale, changeLocale}) => { setTurnBarText(newTurnBarText) } + const generateTEX = () => { + if (network != null && personNetwork != null && person != null){ + const tex = generateLatexCode(personNetwork, person, indices, network) + const blob = new Blob([tex], { type: 'application/x-latex;charset=utf-8' }); + + // Utiliser FileSaver pour télécharger le fichier + saveAs(blob, 'socialGraph.tex'); + } + } + + const resetGraph = () => { + setisLoading(true); + socket.emit("reset graph", socket.id) + setTimeout(() => { + setisLoading(false); + }, 2000); + } + /* offcanvas */ //? faire une fonction pour close et show en fonction de l'etat du canva ? //? comment faire pour eviter la recopie de tout le code a chaque canvas boostrap ? @@ -110,6 +149,11 @@ const InGame = ({locale, changeLocale}) => { const [cptTour, setcptTour] = useState(0); + const [LastVisible, setLastVisible] = useState(false); + + const [isLoading, setisLoading] = useState(false); + + //@ts-ignore const changecptTour = (newcptTour) => { setcptTour(newcptTour); @@ -142,6 +186,11 @@ const InGame = ({locale, changeLocale}) => { } }; + const changeVisibility = () => { + setLastVisible(!LastVisible); + } + const eye = LastVisible ? Oeye : Ceye; //icon que l'on affiche pour l'oeil : fermé ou ouvert. + /* Windows open */ //@ts-ignore const openInNewTab = (url) => { //! avec url ==> dangereux @@ -149,7 +198,7 @@ const InGame = ({locale, changeLocale}) => { }; const [SwitchEnabled, setSwitchEnabled] = useState(false) - const indices = Stub.GenerateIndice() + const allIndices = Stub.GenerateIndice() const { indice, players } = useGame(); @@ -164,7 +213,9 @@ const InGame = ({locale, changeLocale}) => { addToHistory={addToHistory} solo={IsSolo} setPlayerTouched={handleSetPlayerTouched} - playerTouched={playerTouched}/> + playerTouched={playerTouched} + setNetwork={setNetworkData} + showLast={showLast}/>
@@ -195,7 +246,33 @@ const InGame = ({locale, changeLocale}) => {
+ +
+
+ +
+ + + + {/* //? redirection impossible apparament (securité des navigateur */} @@ -229,6 +306,22 @@ const InGame = ({locale, changeLocale}) => { }}> indice + + + +
{/* @@ -243,10 +336,12 @@ const InGame = ({locale, changeLocale}) => { */} -
- -
+ { !IsSolo && +
+ +
+ } { if (first){ first=false @@ -81,6 +85,8 @@ function Lobby() { setIndicesData(choosenIndices) first = true gameStarted = true + socket.off("player left") + socket.off("new player") navigate('/game?solo=false'); }); @@ -92,25 +98,12 @@ 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) + socket.on("player left", (tab, i) => { + const tmpTab: Player[] = [] + for (const p of tab){ + tmpTab.push(JSONParser.JSONToPlayer(p)) } - const index = players + setPlayersData(tmpTab) }) const [codeShowed, setCodeShowed] = useState(true); @@ -140,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) => ( - + // + ))}