Crypteam
/
Cryptid
4
0
Fork 0
Code Issues 10 Pull Requests Packages Projects 9 Releases Wiki Activity

Merge branch 'Server' of https://codefirst.iut.uca.fr/git/Crypteam/Cryptid into Mastermind

Browse Source
pull/67/head
Pierre Ferreira 1 year ago
parent 73b049f348 55f2a35414
commit 54e4a7a0e0
12 changed files with 8491 additions and 8411 deletions
Show Stats Download Patch File Download Diff File

14
cryptide_project/server/server.js
Unescape View File

@ -48,15 +48,23 @@ io.on('connection', (socket) => {
})
socket.on("lobby created", () =>{
io.to(socket.id).emit("lobby created", 134)
io.to(socket.id).emit("lobby created", Math.floor(Math.random() * 10000))
})
socket.on("already asked", (nodeId, askingPlayer, askedPlayer) =>{
io.to(askingPlayer.id).emit("already asked", nodeId, askedPlayer)
})
socket.on("ask player", (nodeId, playerId, askingPlayer) =>{
io.to(playerId).emit("asked", nodeId, askingPlayer)
socket.on("ask player", (nodeId, playerId, askingPlayer, askingPlayerIndex) =>{
io.to(playerId).emit("asked", nodeId, askingPlayer, askingPlayerIndex)
})
socket.on("asked all 1by1", (id, playerId) =>{
io.to(playerId).emit("asked all", id)
})
socket.on("asked wrong", (askingPlayer) =>{
io.to(askingPlayer.id).emit("asked wrong")
})
socket.on("disconnect", () =>{

2
cryptide_project/src/App.tsx
Unescape View File

@ -79,7 +79,7 @@ function App() {
<Route path="/endgame" element={<EndGame/>} />
<Route path="/game" element={<InGame locale={locale} changeLocale={changeLocale}/>}/>
<Route path="/info" element={<InfoPage/>} />
<Route path="/solo" element={<SoloGame locale={locale} changeLocale={changeLocale} />}/>
{/* <Route path="/solo" element={<SoloGame locale={locale} changeLocale={changeLocale} />}/> */}
</Routes>
</BrowserRouter>
</ThemeProvider>

12
cryptide_project/src/Components/ChoiceBar.tsx
Unescape View File

@ -13,11 +13,11 @@ const ChoiceBar = () => {
function askPlayer(playerId: string){
if (nodeId !== null){
socket.emit("ask player", nodeId, playerId, players.find((p) => p.id === socket.id))
socket.emit("ask player", nodeId, playerId, players.find((p) => p.id === socket.id, actualPlayerIndex))
}
}
function askEveryone(){
async function askEveryone(){
if (nodeId !== null){
const person = personNetwork?.getPersons().find((p) => p.getId() == nodeId)
if (person != undefined){
@ -36,6 +36,8 @@ const ChoiceBar = () => {
}
const tester = IndiceTesterFactory.Create(indices[playerIndex])
const works = tester.Works(person)
await delay(500);
socket.emit("asked all 1by1", person.getId(), players[playerIndex].id)
socket.emit("node checked", nodeId, works, positionToColor(playerIndex), room, nextPlayerIndex)
if(!works){
return
@ -47,11 +49,15 @@ const ChoiceBar = () => {
}
}
function delay(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}
return (
<div className="choice-bar-container">
<h3 className="choice-bar-heading">Quel joueur voulez-vous interroger ?</h3>
<div>
<button className="choice-bar-button" onClick={() => askEveryone()} style={{ backgroundColor: theme.colors.primary }}>Tout le monde</button>
<button className="choice-bar-button" onClick={async () => await askEveryone()} style={{ backgroundColor: theme.colors.primary }}>Tout le monde</button>
{players.map((player, index) => (
player.id !== socket.id &&
<button key={index} className="choice-bar-button" onClick={() => askPlayer(player.id)} style={{ backgroundColor: theme.colors.primary }}>

228
cryptide_project/src/Components/GraphContainer.tsx
Unescape View File

@ -24,17 +24,24 @@ import { colorToEmoji, positionToColor } from "../ColorHelper";
interface MyGraphComponentProps {
onNodeClick: (shouldShowChoiceBar: boolean) => void;
handleShowTurnBar: (shouldShowTurnBar: boolean) => void;
FromSolo: boolean;
handleShowTurnBar: (shouldShowTurnBar: boolean) => void
handleTurnBarTextChange: (newTurnBarText: string) => void
}
let lastAskingPlayer = 0
let lastNodeId = -1
let first = true
let askedWrong = false
let solo: boolean = true
const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, FromSolo}) => {
const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex } = useGame();
const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange}) => {
const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, onlyFalse, setOnlyFalseData } = useGame();
const params = new URLSearchParams(window.location.search);
const solotmp = params.get('solo');
let playerIndex: number = turnPlayerIndex
let index = 0
@ -49,13 +56,16 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
if (first){
first = false
setActualPlayerIndexData(index)
if (playerIndex == thisPlayerIndex){
handleShowTurnBar(true)
if (solotmp == "false"){
solo=false
}
if (!solo){
setActualPlayerIndexData(index)
if (playerIndex == thisPlayerIndex){
handleTurnBarTextChange("À vous de jouer")
handleShowTurnBar(true)
}
}
indices.forEach(i => {
console.log(i.ToString("en"))
});
}
useEffect(() => {
@ -69,7 +79,6 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
console.error("Container not found");
return;
}
// Charger les données dans le graph
const nodes = new DataSet(graph.nodesPerson);
@ -96,82 +105,86 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
const networkData = { nodes: nodes, edges: graph.edges };
const network = new Network(container, networkData, initialOptions);
if(FromSolo){
//* lsti = Generate indice (paramNbIndice) //une couleur par indice
/*
Onclick :
nbcoup = 0;
pour chaque indice i :
jeton = IsNodeInIndice(node,i)
lstJ.add(jeton)
if jeton == X :
rep = false
if(rep) :
endgame()
break
afficheJeton(jeton)
*/
}
else {
socket.on("node checked",(id, works, color, newPlayerIndex) => {
const node = nodes.get().find((n) => id == n.id)
if (node!=undefined){
onNodeClick(false)
playerIndex = newPlayerIndex
if (!solo){
socket.on("asked all", (id) =>{
const pers = personNetwork.getPersons().find((p) => p.getId() == id)
if (pers!=undefined){
askedPersons.push(pers)
}
})
socket.on("node checked",(id, works, color, newPlayerIndex) => {
const node = nodes.get().find((n) => id == n.id)
if (node!=undefined){
onNodeClick(false)
playerIndex = newPlayerIndex
if (!node.label.includes(colorToEmoji(color, works))){
networkData.nodes.update({id: id, label: node.label + colorToEmoji(color, works)})
if (playerIndex === thisPlayerIndex){
handleShowTurnBar(true)
}
if (playerIndex === thisPlayerIndex){
handleTurnBarTextChange("À vous de jouer")
handleShowTurnBar(true)
}
else{
handleShowTurnBar(false)
}
}
lastAskingPlayer = 0
lastNodeId = -1
})
socket.on("already asked", (nodeId, askedPlayer) =>{
console.log("player: " + askedPlayer + " already asked on node " + nodeId)
})
socket.on("asked wrong", () =>{
setOnlyFalseData(true)
askedWrong = true
handleShowTurnBar(true)
handleTurnBarTextChange("Mauvais choix, posez un carré !")
})
socket.on("asked", (nodeId, askingPlayer, askingPlayerIndex) => {
console.log(askingPlayerIndex)
if (askingPlayer.id !== lastAskingPlayer || nodeId !== lastNodeId ){
lastAskingPlayer = askingPlayer.id
lastNodeId = nodeId
const pers = personNetwork.getPersons().find((p) => p.getId() == nodeId)
if (pers!=undefined){
if (askedPersons.includes(pers)){
socket.emit("already asked", nodeId, askingPlayer, socket.id)
return
}
else{
handleShowTurnBar(false)
console.log("je passe bien ici ?????")
}
}
lastAskingPlayer = 0
lastNodeId = -1
})
socket.on("already asked", (nodeId, askedPlayer) =>{
console.log("player: " + askedPlayer + " already asked on node " + nodeId)
})
socket.on("asked", (nodeId, askingPlayer) => {
if (askingPlayer.id !== lastAskingPlayer || nodeId !== lastNodeId ){
lastAskingPlayer = askingPlayer.id
lastNodeId = nodeId
const pers = personNetwork.getPersons().find((p) => p.getId() == nodeId)
if (pers!=undefined){
if (askedPersons.includes(pers)){
socket.emit("already asked", nodeId, askingPlayer, socket.id)
return
}
else{
askedPersons.push(pers)
const node = nodes.get().find((n) => nodeId == n.id)
if (node != undefined && indice != null){
var tester = IndiceTesterFactory.Create(indice)
playerIndex = playerIndex + 1
if(playerIndex == players.length){
playerIndex = 0
}
if (tester.Works(pers)){
socket.emit("node checked", nodeId, true, positionToColor(thisPlayerIndex), room, playerIndex)
}
else{
socket.emit("node checked", nodeId, false, positionToColor(thisPlayerIndex), room, playerIndex)
askedPersons.push(pers)
const node = nodes.get().find((n) => nodeId == n.id)
if (node != undefined && indice != null){
var tester = IndiceTesterFactory.Create(indice)
let maybe = thisPlayerIndex
playerIndex = playerIndex + 1
if(playerIndex == players.length){
playerIndex = 0
}
if (tester.Works(pers)){
socket.emit("node checked", nodeId, true, positionToColor(thisPlayerIndex), room, playerIndex)
}
else{
maybe = maybe - 1
if(maybe == 0){
maybe = players.length - 1
}
socket.emit("node checked", nodeId, false, positionToColor(thisPlayerIndex), room, maybe)
socket.emit("asked wrong", askingPlayer, room)
}
}
}
}
}
}
}
)
})
}
@ -200,13 +213,27 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
}
});
network.on("click", (params) => {
if(params.nodes.length > 0){
setNodeIdData(params.nodes[0])
// Renvoyer un true pour afficher la choice bar
if (thisPlayerIndex == playerIndex){
network.on("click", (params) => {
if(params.nodes.length > 0){
setNodeIdData(params.nodes[0])
if (!solo){
if (askedWrong){
const person = personNetwork?.getPersons().find((p) => p.getId() == params.nodes[0])
if (person !== undefined && indice !== null){
const tester = IndiceTesterFactory.Create(indice)
if (!tester.Works(person) && !askedPersons.includes(person)){
playerIndex = thisPlayerIndex + 1
if(playerIndex == players.length){
playerIndex = 0
}
socket.emit("node checked", params.nodes[0], false, positionToColor(thisPlayerIndex), room, playerIndex)
askedPersons.push(person)
askedWrong = false
}
}
}
else if (thisPlayerIndex == playerIndex){
onNodeClick(true)
}
else{
@ -214,12 +241,25 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
}
}
else{
// Renvoyer un false pour cacher la choice bar
onNodeClick(false)
const person = personNetwork?.getPersons().find((p) => p.getId() == params.nodes[0]) //person sélectionnée
if (person != undefined){
indices.forEach(async (i, index) =>{
const tester = IndiceTesterFactory.Create(i)
const test = tester.Works(person)
const node = nodes.get().find((n) => params.nodes[0] == n.id)
if (node!=undefined){
networkData.nodes.update({id: params.nodes[0], label: node.label + colorToEmoji(positionToColor(index), test)})
}
})
}
}
});
} //notfromsolo
}
// Renvoyer un true pour afficher la choice bar
else{
// Renvoyer un false pour cacher la choice bar
onNodeClick(false)
}
});
}, []); // Le tableau vide signifie que cela ne s'exécutera qu'une fois après le premier rendu
return (
@ -227,6 +267,10 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
<div id="graph-container"/>
</>
);
function delay(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}
}

2
cryptide_project/src/Components/NavBar.tsx
Unescape View File

@ -20,6 +20,8 @@ import ReactCountryFlag from "react-country-flag"
/* Style */
import './NavBar.css';
/* Style */
import { useTheme } from '../Style/ThemeContext';
// @ts-ignore

3
cryptide_project/src/Components/PlayerList.tsx
Unescape View File

@ -1,5 +1,6 @@
import React from 'react';
import { colorToEmoji, positionToColor } from '../ColorHelper';
import PersonStatus from './PersonStatus';
//@ts-ignore
@ -9,7 +10,7 @@ function PlayerList({ players }) {
{
//@ts-ignore
players.map((player, index) => (
<PersonStatus key={index} state={player.state} name={player.name} />
<PersonStatus key={index} state={player.state} name={player.name + " " + colorToEmoji(positionToColor(index), true)} />
))
}
</div>

7
cryptide_project/src/Components/TurnBar.tsx
Unescape View File

@ -1,8 +1,11 @@
import React from "react";
import { useTheme } from "../Style/ThemeContext";
//@ts-ignore
const TurnBar = ({text}) => {
interface TurnBarProps{
text: string
}
const TurnBar: React.FC<TurnBarProps> = ({text})=> {
const theme = useTheme();
return (
<div className='upperInfo'

9
cryptide_project/src/Contexts/GameContext.tsx
Unescape View File

@ -15,6 +15,7 @@ interface GameContextProps {
actualPlayerIndex: number;
turnPlayerIndex: number;
room: string;
onlyFalse: boolean
setIndicesData: (newIndices: Indice[]) => void;
setIndiceData: (newIndice: Indice) => void;
setPersonData: (newPerson: Person) => void;
@ -25,6 +26,7 @@ interface GameContextProps {
setActualPlayerIndexData: (newActualPlayerIndex: number) => void;
setTurnPlayerIndexData: (newTurnPlayerIndex: number) => void;
setRoomData: (newRoom: string) => void;
setOnlyFalseData: (newOnlyFalse: boolean) => void
}
const GameContext = createContext<GameContextProps | undefined>(undefined);
@ -44,6 +46,7 @@ export const GameProvider: React.FC<GameProviderProps> = ({ children }) => {
const [actualPlayerIndex, setActualPlayerIndex] = useState<number>(-1)
const [turnPlayerIndex, setTurnPlayerIndex] = useState<number>(-1)
const [room, setRoom] = useState<string>("")
const [onlyFalse, setOnlyFalse] = useState<boolean>(false)
const setIndicesData = (newIndices: Indice[]) => {
@ -87,8 +90,12 @@ export const GameProvider: React.FC<GameProviderProps> = ({ children }) => {
setRoom(newRoom)
}
const setOnlyFalseData = (newOnlyFalse: boolean) =>{
setOnlyFalse(newOnlyFalse)
}
return (
<GameContext.Provider value={{ indices, setIndicesData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, nodeId, setNodeIdData, askedPersons, setAskedPersonsData, actualPlayerIndex, setActualPlayerIndexData, turnPlayerIndex, setTurnPlayerIndexData, room, setRoomData }}>
<GameContext.Provider value={{ indices, setIndicesData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, nodeId, setNodeIdData, askedPersons, setAskedPersonsData, actualPlayerIndex, setActualPlayerIndexData, turnPlayerIndex, setTurnPlayerIndexData, room, setRoomData, onlyFalse, setOnlyFalseData }}>
{children}
</GameContext.Provider>
);

10
cryptide_project/src/Pages/InGame.tsx
Unescape View File

@ -42,7 +42,7 @@ const InGame = ({locale, changeLocale}) => {
const [showChoiceBar, setShowChoiceBar] = useState(false);
const [showTurnBar, setShowTurnBar] = useState(false);
const [turnBarText, setTurnBarText] = useState("");
const handleNodeClick = (shouldShowChoiceBar: boolean) => {
setShowChoiceBar(shouldShowChoiceBar);
@ -52,6 +52,10 @@ const InGame = ({locale, changeLocale}) => {
const handleShowTurnBar = (shouldShowTurnBar: boolean) => {
setShowTurnBar(shouldShowTurnBar);
};
const handleTurnBarTextChange = (newTurnBarText: string) =>{
setTurnBarText(newTurnBarText)
}
/* offcanvas */
//? faire une fonction pour close et show en fonction de l'etat du canva ?
@ -108,9 +112,9 @@ const InGame = ({locale, changeLocale}) => {
return (
<div id="mainDiv">
{showTurnBar && <TurnBar text="je suis dans la page InGame"/>}
{showTurnBar && <TurnBar text={turnBarText}/>}
<div id='graphDiv'>
<GraphContainer onNodeClick={handleNodeClick} handleShowTurnBar={handleShowTurnBar} FromSolo={false}/>
<GraphContainer onNodeClick={handleNodeClick} handleShowTurnBar={handleShowTurnBar} handleTurnBarTextChange={handleTurnBarTextChange} />
</div>
<div className='playerlistDiv'>

19
cryptide_project/src/Pages/Lobby.tsx
Unescape View File

@ -28,20 +28,6 @@ import Player from '../model/Player';
function Lobby() {
const theme=useTheme();
const [codeShowed, setCodeShowed] = useState(true);
const playerslst = [
{ pdp: Person, name: "Dummy (vous)", id: 1 },
{ pdp: Person, name: "Dummy2)", id: 1 },
//{ pdp: Bot, name: "Boat", id: 2 },
// { pdp: Bot, name: "Bot-tom", id: 3 },
];
while (playerslst.length < 3) {
playerslst.push({ pdp: Bot, name: "BotAdded", id: playerslst.length + 1 });
}
const navigate = useNavigate();
@ -86,7 +72,7 @@ function Lobby() {
setPersonNetworkData(network)
setIndicesData(choosenIndices)
first = true
navigate('/game');
navigate('/game?solo=false');
});
socket.on("new player", (tab) =>{
@ -97,6 +83,9 @@ function Lobby() {
setPlayersData(tab.map((p: any) => new Player(p.id, p.name)))
})
const [codeShowed, setCodeShowed] = useState(true);
function StartGame(){
const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(players.length, 30)
setPersonData(choosenPerson)

31
cryptide_project/src/Pages/Play.tsx
Unescape View File

@ -19,11 +19,16 @@ import param from '../res/icon/param.png';
import share from '../res/icon/share.png';
import { socket } from '../SocketConfig';
import { useNavigate } from 'react-router-dom';
import GameCreator from '../model/GameCreator';
import { useGame } from '../Contexts/GameContext';
function Play() {
const theme=useTheme()
const { setIndicesData, setPersonData, setPersonNetworkData } = useGame();
const [room, setRoom] = useState(null);
const navigate = useNavigate();
@ -31,6 +36,15 @@ function Play() {
socket.emit("lobby created")
}
function launchMastermind(){
const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(5, 30)
setPersonData(choosenPerson)
setPersonNetworkData(networkPerson)
setIndicesData(choosenIndices)
setIndicesData(choosenIndices)
navigate('/game?solo=true');
}
useEffect(() => {
@ -48,12 +62,12 @@ function Play() {
}, []); // Aucune dépendance ici
useEffect(() => {
useEffect(() => {
if (room !== null) {
const nouvelleURL = `/lobby?room=${room}`;
navigate(nouvelleURL);
const nouvelleURL = `/lobby?room=${room}`;
navigate(nouvelleURL);
}
}, [room, navigate]);
}, [room, navigate]);
@ -78,13 +92,10 @@ function Play() {
/>
</div>
<div className='buttonGroupVertical'>
<Link to="/">
<button className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Jouer seul </button>
</Link>
<button onClick={launchMastermind} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Jouer seul </button>
<button onClick={createLobby} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Créer une partie </button>
<Link to="/solo">
<button className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Rejoindre </button>
</Link>
<button className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Rejoindre </button>
</div>
</div>
<div className='rightContainer'>

16565
cryptide_project/yarn.lock
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save