diff --git a/.gitignore b/.gitignore
index 74524a9..78ad554 100644
--- a/.gitignore
+++ b/.gitignore
@@ -41,4 +41,12 @@ bower_components
psd
thumb
-sketch
\ No newline at end of file
+sketch
+
+### modules ###
+yarn.lock
+package-lock.json
+
+# db
+
+socialgraph.db
diff --git a/README.md b/README.md
index 747e41e..68bf9f4 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,110 @@
-# Cryptid
+(:construction: ***Le readme n'est pas a sa version final et est susceptible de changer*** :construction:)
+# Présentation :
+
+Bienvenue dans notre jeu de déduction captivant, où l'intrigue et la malice se rejoignent dans une aventure palpitante ! Plongez-vous dans un monde de mystère et d'intrigue, où chaque interaction compte, et chaque indice vous rapproche de la vérité.Imaginez un graphique complexe où chaque sommet représente une personne, chaque axe une relation, et chaque détail compte. Vous êtes plongé dans un défi stimulant pour découvrir qui parmi ces individus est le mystérieux tueur. Chaque joueur détient un indice crucial, et seul le partage stratégique de ces indices vous mènera à la résolution du mystère. Explorez notre page de règles pour comprendre les subtilités du jeu, découvrez les indices qui peuvent vous guider, et élaborez des stratégies intelligentes pour identifier le coupable. Manipuler vos amis, afin d'être le premier à découvrir qui est le meurtrier ! Êtes-vous prêt à relever le défi et à démasquer le tueur caché dans le graphe ? Que l'enquête commence !
+
+## Comment utiliser notre projet :
+
+*Prérequis :* Avoir **git** et **npm** (et donc **Node.js**) sur son poste.
+
+### Etape 1 : Récupérer le projet
+Dans un premier terminal, exécutez les commandes suivantes :
+```bash
+ git clone https://codefirst.iut.uca.fr/git/Crypteam/Cryptid.git
+ cd cryptide_project
+ npm i --force
+```
+
+### Etape 2 : Configurer le réseau
+
+1. Pour jouer en distant, vous devez vous trouver sur le même réseau. (Il faut quand même éviter les réseaux tels qu' eduroam)
+
+2. Récupérez votre adresse IP :
+
+Sur **Windows**
+> - Ouvrez l'invite de commandes (`cmd`) et tapez la commande `ipconfig`. Repérez la section de votre connexion sans fil et notez l'adresse IPv4.
+
+Sur **MacOS** / **Linux**
+> - Ouvrez le terminal et tapez la commande `ifconfig` ou `ip addr`. Recherchez la section de votre connexion sans fil et notez l'adresse IP.
+
+### Etape 3 : Configurer les serveurs
+
+1. **Ouvrez le fichier `./src/AdressSetup.ts` :**
+ - Localisez le fichier dans le répertoire de votre application.
+
+2. **Modifiez l'adresse des serveurs :**
+ - Remplacez les adresses IP existantes par celle que vous avez notée à l'étape 2.
+
+ Exemple :
+ ```typescript
+ // ./AdressSetup.ts
+ const ADRESSE_WEBSERVER = "http://{VOTRE_IP}:3002"
+ const ADRESSE_DBSERVER = "http://{VOTRE_IP}:3003"
+ const ADRESSE_WEBSITE = ""
+
+ export {ADRESSE_DBSERVER, ADRESSE_WEBSERVER, ADRESSE_WEBSITE}
+ ```
+
+3. **Ouvrez le fichier `./server/server.js` :**
+ - Localisez le fichier dans le répertoire de votre application.
+
+4. **Modifiez les adresses qui peuvent accèder aux serveurs :**
+ - Ajoutez votre adresse notée à l'étape 2 dans le cors.
+
+ Exemple :
+ ```typescript
+ const app = express();
+ const server = http.createServer(app);
+ const io = socketIO(server, {
+ cors: {
+ origin: ["http://{VOTRE_IP}:3000", "http://localhost:3000"], // Remplacez par l'URL de votre application React
+ methods: ["GET", "POST"],
+ credentials: true
+ }
+ });
+ ```
+
+5. **Apportez la même modification au fichier `./src/server/server.js` :**
+- Une fois le fichier ouvert, appuyez-vous sur l'exemple précédent pour apporter les modifications necéssaire.
+
+### Etape 4 : Démarrer les serveurs
+
+1. **Ouvrez un second terminal :**
+- Exécutez le script `./startServer.sh`.
+
+### Etape 5 : Démarrer l'application
+
+1. Revenez dans le premier terminal et exécutez la commande suivante :
+```bash
+ npm start
+```
+
+2. L'application va s'ouvrir dans votre navigateur et vous pouvez jouez à notre jeu.
+
+### Etape bonus : Jouez avec ces amis
+
+1. Sur la première page de l'application, cliquez sur **Jouez** > **Créer une partie**.
+2. Une fois dans le lobby, **copiez le lien** de la partie et l'envoyez à vos amis.
+3. Lancez la partie et **amusez-vous** !
+
+
+# ::construction_worker:: Développeurs
+
+- Thomas Chazot : thomas.chazot@etu.uca.fr
+- Pierre Ferreira : pierre.ferreira@etu.uca.fr
+- Baptiste Marcel : baptise.marcel@etu.uca.fr
+
+
);
}
diff --git a/cryptide_project/src/Pages/Home.tsx b/cryptide_project/src/Pages/Home.tsx
index b3a1766..b0aff2a 100644
--- a/cryptide_project/src/Pages/Home.tsx
+++ b/cryptide_project/src/Pages/Home.tsx
@@ -1,14 +1,41 @@
-import React from 'react';
+import React, {useEffect} from 'react';
+import { useAuth } from '../Contexts/AuthContext';
+import SessionService from '../services/SessionService';
import './Home.css';
import '../App.css';
import { useTheme } from '../Style/ThemeContext';
import { Link } from 'react-router-dom';
import { FormattedMessage } from 'react-intl';
import ButtonImgNav from '../Components/ButtonImgNav';
+import defaultImg from "../res/img/Person.png"
+import {loadImageAsync} from "../ImageHelper"
+// @ts-ignore
function Home() {
const theme=useTheme();
+ const {isLoggedIn, login, user, setUserData, manager } = useAuth();
+
+ useEffect(() => {
+
+ if (user == null){
+ manager.userService.fetchUserInformation().then(([user, loggedIn]) =>{
+ if (user!=null){
+ if (loggedIn){
+ login()
+ setUserData(user)
+ }
+ else{
+ loadImageAsync(defaultImg).then((blob) => {
+ user.profilePicture=blob
+ setUserData(user)
+ })
+ }
+ }
+ })
+ }
+ }, [isLoggedIn]);
+
return (
@@ -16,36 +43,59 @@ function Home() {
-
+ {/*
*/}
+
Introduction
-
+ {/* */}
+ Bienvenue dans notre jeu de déduction captivant, où l'intrigue et la malice se rejoignent dans une aventure palpitante ! Plongez-vous dans un monde de mystère et d'intrigue, où chaque interaction compte, et chaque indice vous rapproche de la vérité.Imaginez un graphique complexe où chaque sommet représente une personne, chaque axe une relation, et chaque détail compte. Vous êtes plongé dans un défi stimulant pour découvrir qui parmi ces individus est le mystérieux tueur. Chaque joueur détient un indice crucial, et seul le partage stratégique de ces indices vous mènera à la résolution du mystère. Explorez notre page de règles pour comprendre les subtilités du jeu, découvrez les indices qui peuvent vous guider, et élaborez des stratégies intelligentes pour identifier le coupable. Manipuler vos amis, afin d'être le premier à découvrir qui est le meurtrier ! Êtes-vous prêt à relever le défi et à démasquer le tueur caché dans le graphe ? Que l'enquête commence !
-
+ {/* */}
+ Dans l'univers captivant de notre jeu de déduction, la tromperie et la ruse sont les maîtres mots de la réussite. Explorez le mystère qui se dissimule derrière chaque interaction de notre graphique complexe, dévoilant les liens entre les individus.
+
+ Votre mission ultime ? Découvrir qui parmi les individus est le coupable, mais n'attendez pas une collaboration ouverte. Utilisez plutôt la manipulation subtile pour embrouiller les pistes, détourner l'attention de vos adversaires. Posez des questions stratégiques, répondez avec malice et plantez des indices trompeurs pour vous rapprocher du dénouement.
+
+ Chaque occasion offre la possibilité de semer le doute parmi vos adversaires. Lorsqu'un joueur vous interroge, répondez en plaçant adroitement un jeton carré pour suggérer que "selon votre indice, cette personne ne peut être le coupable", ou un jeton rond pour indiquer qu'elle reste dans la liste des suspects. Soyez vigilant, chaque geste peut être interprété, et la vérité se dissimule souvent derrière une façade d'indices trompeurs.
+
+ Si un joueur place un jeton carré, le questionneur doit également jouer son jeu en plaçant un jeton carré de sa couleur sur un nœud du graphique. La contre-manipulation devient ainsi une arme redoutable pour détourner l'accusation et semer la confusion. Pour en savoir plus, plongez-vous dans les détails de ce passionnant récit sur une autre page.
+
+
Pour des informations plus détaillées, consulter les règles.
+
-
+ {/*
-
+ */}
+
Présentation Video :
+ (ici il y aura la vidéo)
-
+ {/*
-
-
-------------------------------
-
Hal Duncan & Ruth Veevers
-
Kwanchai Moriya
+
*/}
+
+ Temps : 20 minutes
+ Joueurs : 1 à 6
+ Âge : 8ans et +
+
+
+
+ Chazot Thomas
+ Ferreira Pierre
+ Marcel Baptiste
+
+ );
+}
+
+export default Lobbies;
diff --git a/cryptide_project/src/Pages/Lobby.css b/cryptide_project/src/Pages/Lobby.css
index 5c4bfbd..5fbe13c 100644
--- a/cryptide_project/src/Pages/Lobby.css
+++ b/cryptide_project/src/Pages/Lobby.css
@@ -11,6 +11,7 @@
padding: 20px;
margin-right: 10px;
margin-left: 30px;
+
}
.lobby-vertical-divider{
@@ -26,7 +27,7 @@
.player-board{
height: 100%;
- width: max-content;
+ width: 800px;
background-color: rgb(243, 241, 235);
border-radius: 20px;
@@ -53,4 +54,44 @@
color: gray;
font-size: 20px;
cursor: pointer;
+}
+
+.centerButton {
+ display: flex;
+ justify-content: center;
+}
+
+.lobbyR{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.lobbyR *{
+ margin: 20px 10px;
+}
+
+.valuebutton{
+ border-radius: 90px;
+ width: 50px;
+ height: 50px;
+ background-color: #fff;
+}
+
+.nbNodeDiv{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ border: solid 2px whitesmoke;
+ border-radius: 15px;
+
+ background-color: white;
+
+ width: 70%;
+}
+
+.nbNodeDiv div {
+ display: flex;
+ justify-content: center;
}
\ No newline at end of file
diff --git a/cryptide_project/src/Pages/Lobby.tsx b/cryptide_project/src/Pages/Lobby.tsx
index a6d6930..233f3b0 100644
--- a/cryptide_project/src/Pages/Lobby.tsx
+++ b/cryptide_project/src/Pages/Lobby.tsx
@@ -1,99 +1,189 @@
import React, { useEffect, useState } from 'react';
+
+/* Style */
import './Lobby.css';
+import "../Style/Global.css"
import { useTheme } from '../Style/ThemeContext';
/* res */
import PlayerItemList from '../Components/PlayerItemList'
import PersonImg from '../res/img/Person.png';
-import Bot from '../res/img/bot.png';
import param from '../res/icon/param.png';
import cible from '../res/icon/cible.png';
+import defaultImg from "../res/img/Person.png"
+
/* Component */
import ButtonImgNav from '../Components/ButtonImgNav';
+
import { io } from 'socket.io-client';
import { Link } from 'react-router-dom';
+
+/* Context */
+import { useGame } from '../Contexts/GameContext';
+import { useAuth } from '../Contexts/AuthContext';
+import { useNavigate } from 'react-router-dom';
+
+/* Model */
import PersonNetwork from '../model/PersonsNetwork';
import Person from '../model/Person';
import GameCreator from '../model/GameCreator';
-import { useGame } from '../Contexts/GameContext';
-import JSONParser from '../JSONParser';
import Indice from '../model/Indices/Indice';
-import { useNavigate } from 'react-router-dom';
+import JSONParser from '../JSONParser';
+import Player from '../model/Player';
+import EasyBot from '../model/EasyBot';
+import Bot from '../model/Bot';
+import User from '../model/User';
+import {loadImageAsync} from "../ImageHelper"
+
+
+/* serv */
import { socket } from "../SocketConfig";
import { random } from 'lodash';
-import Player from '../model/Player';
+import SessionService from '../services/SessionService';
+import { useRef } from 'react';
+import Button from 'react-bootstrap/Button';
+import Overlay from 'react-bootstrap/Overlay';
+let gameStarted = false
+
function Lobby() {
const theme=useTheme();
const navigate = useNavigate();
-
-
+
const { indices, setIndicesData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, setActualPlayerIndexData, setTurnPlayerIndexData, setRoomData } = useGame();
+ const {user, setUserData, manager, login} = useAuth()
let first = true
const params = new URLSearchParams(window.location.search);
const room = params.get('room');
+ function addBot(){
+ socket.emit("lobby joined", room, new EasyBot("botId" + Math.floor(Math.random() * 1000), "Bot" + Math.floor(Math.random() * 100), "").toJson())
+ }
+
+ //* nb Node
+ const [enteredNumber, setEnteredNumber] = useState(20);
+
+ //@ts-ignore
+ const handleNumberChange = (event) => {
+ const newNumber = Math.max(20, Math.min(60, parseInt(event.target.value, 10)));
+ setEnteredNumber(newNumber);
+ };
+
useEffect(() => {
if (first){
- first = false
- socket.emit("lobby joined", room, "test name" + Math.floor(Math.random() * 10))
-
+ first=false
+
+ if (user == null){
+ manager.userService.fetchUserInformation().then(([u, loggedIn]) => {
+ if (u!=null){
+ if (loggedIn){
+ login()
+ setUserData(u)
+ }
+ else{
+ loadImageAsync(defaultImg).then((blob) => {
+ u.profilePicture=blob
+ setUserData(u)
+ })
+ }
+ socket.emit("lobby joined", room, u.toJson())
+ }
+ })
+ }
+ else{
+ socket.emit("lobby joined", room, user.toJson())
+ }
+
return () => {
socket.off('game created');
};
}
- }, []);
+ }, [socket.id]);
socket.on("game created", (jsonNetwork, jsonPersonString, jsonIndicesString, playerIndex)=> {
const jsonPerson = JSON.parse(jsonPersonString)
const network: PersonNetwork = JSONParser.JSONToNetwork(jsonNetwork)
const choosenOne: Person = network.getPersons().filter((i) => i.getId() == jsonPerson.id)[0]
const choosenIndices : Indice[] = JSONParser.JSONToIndices(jsonIndicesString)
- let index = 0
for (let i=0; i{
const tmpTab: Player[] = []
for (const p of tab){
- tmpTab.push(new Player(p.id, p.name))
+ tmpTab.push(JSONParser.JSONToPlayer(p))
}
- setPlayersData(tab.map((p: any) => new Player(p.id, p.name)))
+ console.log(tmpTab)
+ setPlayersData(tmpTab)
+ })
+
+ socket.on("player left", (tab, i) => {
+ const tmpTab: Player[] = []
+ for (const p of tab){
+ tmpTab.push(JSONParser.JSONToPlayer(p))
+ }
+ setPlayersData(tmpTab)
})
const [codeShowed, setCodeShowed] = useState(true);
function StartGame(){
- const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(players.length, 30)
+ const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(players.length, enteredNumber)
setPersonData(choosenPerson)
setPersonNetworkData(networkPerson)
setIndicesData(choosenIndices)
- socket.emit('network created', JSON.stringify(networkPerson, null, 2), JSON.stringify(choosenPerson), JSON.stringify(choosenIndices), room);
+ let users = players.filter((p) => p instanceof User)
+ let u = users[Math.floor(Math.random() * users.length)]
+ let start = players.findIndex((p) => p.id == u.id)
+ if (start == -1){
+ start = 0
+ }
+ socket.emit('network created', JSON.stringify(networkPerson, null, 2), JSON.stringify(choosenPerson), JSON.stringify(choosenIndices), room, start);
}
+ const copyGameLink = () => {
+ setShow(!show)
+
+ const gameLink = "http://localhost:3000/lobby?room="+ room;
+ navigator.clipboard.writeText(gameLink)
+ .then(() => {
+ console.log('Lien copié avec succès !');
+ })
+ .catch((err) => {
+ console.error('Erreur lors de la copie du lien :', err);
+ });
+ };
+
+ const [show, setShow] = useState(false);
+ const target = useRef(null);
return (
@@ -109,15 +199,24 @@ function Lobby() {
{/* //! voir pour la gestion avec un liste, utilisateur avec le "+ (vous)" et les pdp avec les lettres grecs (?)*/}
{players.map((player, index) => (
-
+ //
+
))}
+
+
+
-
+ {/*
Paramètre de la partie
@@ -126,19 +225,105 @@ function Lobby() {
paramètre super important pour la partie
paramètre super important pour la partie
paramètre super important pour la partie
-
Niveau des bots : Facile
{/* mettre un dropdown ou un swiper */}
-
Thèmes : basique
{/* mettre un dropdown*/}
+
Niveau des bots : Facile
+
Thèmes : basique
*/}
{
//? mettre un timer pour chaques personne ?
//? indice avancé ? ==> négation, voisin du 2e degré etc.
}
-
-
+ {/* */}
+ {/*
-
+
*/}
+
+
Bienvenue dans votre lobby !
+
Attendez que tous vos amis rejoignent avant de lancer la partie.
+
+
+
*/}
+ {!IsSolo &&
-
+ }
-
+ }
+
+ {!IsSolo && }
+
+ {IsSolo &&
+
+
+ }
@@ -126,19 +225,105 @@ function Lobby() {