docs: add comprehensive README for full-stack Pong gaming platform

.env

@@ -14,7 +14,6 @@
 NGINX_ENVSUBST_TEMPLATE_SUFFIX=".conf"
 
 # BASE_URL=http://localhost
-# SOCKET_URL=localhost:8080
 BASE_URL=localhost:8080
 REACT_APP_BASE_URL=localhost:8080
 REDIRECT_URI=http://localhost:8080/api/auth/login
@@ -44,4 +43,4 @@ REACT_HOST=0.0.0.0
 JWT_SECRET=secrethere
 # REDIRECT_URI=http://localhost:80/api/auth/login
 API_SECRET=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
-CLIENT_UID=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41
+CLIENT_UID=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41

.gitignore

@@ -1,5 +1,4 @@
-.env
+#.env
-containers/react/.env
 backend/node_modules/
 containers/backend/dist/
 

.vscode/settings.json

@@ -1,2 +0,0 @@
-{
-}

README.md

@@ -0,0 +1,153 @@
+# ft_transcendence
+
+## Description
+ft_transcendence est le projet final du tronc commun de l'École 42. Il s'agit de créer une application web complète permettant de jouer au Pong en ligne avec des fonctionnalités modernes comme les tournois, le chat en temps réel, et l'authentification.
+
+## Fonctionnalités principales
+- 🎮 **Jeu Pong** en temps réel multijoueur
+- 🏆 **Système de tournois** avec brackets
+- 💬 **Chat en temps réel** avec channels
+- 👤 **Profils utilisateurs** et amis
+- 🔐 **Authentification 2FA** (Google, 42)
+- 📊 **Statistiques** et historique des parties
+- 🎨 **Interface moderne** et responsive
+- 🔒 **Sécurité** web avancée
+
+## Technologies utilisées
+
+### Frontend
+- **Framework** : React/Vue.js/Angular ou Vanilla JS
+- **Styling** : CSS3, Bootstrap/Tailwind
+- **WebSockets** : Pour le temps réel
+
+### Backend
+- **Framework** : Django/Flask/Node.js
+- **Base de données** : PostgreSQL
+- **API** : REST ou GraphQL
+- **Authentication** : OAuth2, JWT
+
+### DevOps
+- **Containerisation** : Docker & Docker Compose
+- **Reverse Proxy** : Nginx
+- **SSL/TLS** : Certificats HTTPS
+- **Base de données** : PostgreSQL en conteneur
+
+## Architecture
+```
+ft_transcendence/
+├── docker-compose.yml    # Orchestration des services
+├── frontend/            # Application client
+│   ├── src/
+│   ├── public/
+│   └── Dockerfile
+├── backend/             # API serveur
+│   ├── api/
+│   ├── models/
+│   ├── services/
+│   └── Dockerfile
+├── database/            # Configuration PostgreSQL
+├── nginx/               # Configuration reverse proxy
+└── ssl/                 # Certificats SSL
+```
+
+## Modules bonus
+- **Module Web** : Framework moderne (React/Vue/Angular)
+- **Module User Management** : Authentification avancée
+- **Module Gaming** : Variantes de Pong ou autres jeux
+- **Module AI-Algo** : IA pour jouer contre
+- **Module Cybersecurity** : Sécurité renforcée
+- **Module DevOps** : Infrastructure monitoring
+- **Module Graphics** : Interface 3D avancée
+
+## Installation et déploiement
+
+### Prérequis
+- Docker et Docker Compose
+- Domaine avec certificat SSL
+- Clés API (42, Google) pour OAuth
+
+### Lancement
+```bash
+git clone <repository-url>
+cd ft_transcendence
+docker-compose up --build
+```
+
+### Configuration
+1. Configurer les variables d'environnement
+2. Générer les certificats SSL
+3. Configurer OAuth applications
+4. Initialiser la base de données
+
+## Gameplay
+
+### Pong multijoueur
+- Contrôles clavier fluides
+- Synchronisation en temps réel
+- Système de score et timer
+- Reconnexion automatique
+
+### Tournois
+- Création de tournois public/privé
+- Système d'élimination
+- Classements et récompenses
+- Notifications en temps réel
+
+## Sécurité implémentée
+- 🔒 **HTTPS** obligatoire
+- 🛡️ **Protection CSRF/XSS**
+- 🔑 **Authentification 2FA**
+- 💾 **Hashage sécurisé** des mots de passe
+- 🚫 **Protection injection SQL**
+- 🔐 **Validation** côté serveur
+- 🍪 **Gestion sécurisée** des sessions
+
+## Fonctionnalités sociales
+- **Profils utilisateurs** personnalisables
+- **Système d'amis** avec invitations
+- **Chat global** et channels privés
+- **Statut en ligne** des utilisateurs
+- **Historique des parties**
+- **Achievements** et badges
+
+## Performance et scalabilité
+- **WebSockets** pour le temps réel
+- **Cache Redis** pour les sessions
+- **Optimisation** des requêtes DB
+- **Load balancing** pour la montée en charge
+- **Monitoring** des performances
+
+## Tests et qualité
+- **Tests unitaires** backend
+- **Tests d'intégration** API
+- **Tests end-to-end** Selenium
+- **Sécurité** avec OWASP ZAP
+- **Performance** avec JMeter
+
+## Compétences développées
+- Architecture d'applications web modernes
+- Développement full-stack
+- Sécurité web avancée
+- DevOps et containerisation
+- Gestion de projet complexe
+- Programmation temps réel
+- UI/UX design
+
+## Contraintes 42
+- **Single Page Application** obligatoire
+- **3 frameworks/langages** différents minimum
+- **Docker** pour tous les services
+- **Sécurité** de niveau production
+- **Code maintenable** et documenté
+
+## Auteur
+Alexandre Pommier (apommier) - École 42
+
+## Équipe (si applicable)
+- Développeur Frontend
+- Développeur Backend  
+- DevOps Engineer
+- Security Specialist
+
+## Licence
+Projet académique - École 42

conf/init.sql

@@ -1 +1 @@
-ALTER USER postgres WITH PASSWORD 'postgres';
+ALTER USER postgres WITH PASSWORD 'pass';

conf/nginx.conf

@@ -10,7 +10,7 @@ server {
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header X-Forwarded-Proto $scheme;
-        proxy_pass http://react_app:8081;
+        proxy_pass http://react_app:8001;
     }
 
     location /api {
@@ -21,7 +21,7 @@ server {
         proxy_pass http://api:3000/api;
     }
 
-    location /socket.io {
+    location /socket {
         # Forward requests to socket server running on port 4001
         if ($request_uri ~ ^/socket/4001) {
           proxy_pass http://chat:4001;

containers/api/src/app.controller.spec.ts

@@ -0,0 +1,22 @@
+import { Test, TestingModule } from '@nestjs/testing';
+import { AppController } from './app.controller';
+import { AppService } from './app.service';
+
+describe('AppController', () => {
+  let appController: AppController;
+
+  beforeEach(async () => {
+    const app: TestingModule = await Test.createTestingModule({
+      controllers: [AppController],
+      providers: [AppService],
+    }).compile();
+
+    appController = app.get<AppController>(AppController);
+  });
+
+  describe('root', () => {
+    it('should return "Hello World!"', () => {
+      expect(appController.getHello()).toBe('Hello World!');
+    });
+  });
+});

containers/api/src/app.controller.ts

@@ -6,255 +6,274 @@
 /*   By: apommier <apommier@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/06/17 01:00:00 by apommier          #+#    #+#             */
-/*   Updated: 2023/06/28 18:49:39 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/21 01:19:01 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
-import { Controller, Request, Req, Get, Post, UseGuards, Redirect, Res, Body, UploadedFile, UseInterceptors } from '@nestjs/common';
+import { Controller, Request, Req, Get, Post, UseGuards, Redirect, Res, Body, UploadedFile, UseInterceptors} from '@nestjs/common';
 import { FileInterceptor } from '@nestjs/platform-express';
+
 import { JwtAuthGuard } from './auth/jwt-auth.guard';
 import { AuthService } from './auth/auth.service';
 import { loginClass } from './auth/login42'
 import { ChatService } from './chat/chat.service';
 import { UsersService } from './users/users.service';
+
 import { MatchLog } from './model/user.entity'
+import { generate } from 'rxjs';
+
+// import { generateQRcode } from './users/2fa';
 import { generateOTP } from './users/2fa';
 import { VerifyOTP } from './users/2fa';
 import { ValidateOTP } from './users/2fa';
+import { privateDecrypt } from 'crypto';
+import { formatWithOptions } from 'util';
 
 
+//2fa
+
+
+// import { initStorage, getUser, setUser } from './storage';
+
+// import { AuthGuard } from '@nestjs/passport';
+// import { Login42 } from './auth/login42'
+// import { loginClass } from './auth/test'
+
 
 @Controller('/api')
 export class AppController {
-	constructor(private authService: AuthService,
+  constructor(private authService: AuthService, 
-		private loginClass: loginClass,
+			  private loginClass: loginClass,
-		private chatService: ChatService,
+			  private chatService: ChatService,
-		private userService: UsersService,) { }
+			  private userService: UsersService, ) {}
 
 	kFactor = 36;
 	scaleFactor = 400;
 
+
 //========================================================================================================
 //========================================================================================================
-//                                              User
+//                                              User			                                  
 //========================================================================================================
 //========================================================================================================
 
-	@UseGuards(JwtAuthGuard)
+  @UseGuards(JwtAuthGuard)
-	@Get('/profile')
+  @Get('/profile')
-	async getProfile(@Request() req) {
+  async getProfile(@Request() req) {
-		return await this.userService.findOne(req.user.username);
+	//   const myJSON = JSON.stringify(req.user);
-	}
+	//   console.log(`req user api= ${req.user}`)
+	//   console.log(`json user api= ${myJSON}`)
+	//   return req.user;
+	return await this.userService.findOne(req.user.username);
+  }
 
-	@UseGuards(JwtAuthGuard)
+  @UseGuards(JwtAuthGuard)
-	@Post('/logout')
+  @Post('/user')
-	async logout(@Request() req, @Body() data: any) {
+  async getUser( @Body() data: any) {
-		const user = await this.userService.findOne(req.user.username)
+	console.log(`usernamewwww= ${data.username}`)
-		if(!user)
+	return await this.userService.findOne(data.username);
-			return ;
+  }
-		if (user.sessionNumber > 0)
-			user.sessionNumber--;
-		if (!user.sessionNumber)
-			  user.status = 0;
-		this.userService.save(user);
-	}
 
-	@UseGuards(JwtAuthGuard)
+  @UseGuards(JwtAuthGuard)
-	@Post('/user')
+  @Get('/users')
-	async getUser(@Body() data: any) {
+  async getUsers( @Body() data: any) {
-		return await this.userService.findOne(data.username);
+	console.log(`usernamewwww= ${data.username}`)
-	}
+	return await this.userService.findAll();
+  }
 
-	@UseGuards(JwtAuthGuard)
+  @UseGuards(JwtAuthGuard)
-	@Get('/users')
+  @Get('/friends')
-	async getUsers(@Body() data: any) {
+  async getFriends(@Request() req) {
-		return await this.userService.findAll();
+	// return await this.userService.getFriends(req.user.username);
-	}
+	return await this.userService.getFriends(req.user.username);
+  }
 
-	@UseGuards(JwtAuthGuard)
+  @UseGuards(JwtAuthGuard)
-	@Get('/friends')
+  @Post('/friend')//need to do it 2 time when user accept one for each
-	async getFriends(@Request() req) {
+  async newFriend(@Request() req, @Body() data: any) {
-		return await this.userService.getFriends(req.user.username);
+	// return await this.userService.getFriends(req.user.username);
-	}
+	console.log(`user= ${req.user.username}`)
+	const user = await this.userService.findOne(req.user.username)
+	if (!user)
+		return (0);
+	//create personnal conv for user
+	//await this.userService.addFriend(user, data.username);
 
-	@UseGuards(JwtAuthGuard)
-	@Post('/friend')
-	async newFriend(@Request() req, @Body() data: any) {
-		const user = await this.userService.findOne(req.user.username)
-		if (!user)
-			return (0);
-		if (user.friends.find(item => item === data.username)) {
-			user.friendRequest = user.friendRequest.filter((item) => item !== data.username);
-			this.userService.save(user);
-			return (1);
-		}
-		const conv = {
-			id: null,
-			name: req.user.username + ", " + data.username,
-			banned: [],
-			admin: [],
-			muted: [],
-			members: [],
-			owner: req.user.username,
-			password: null,
-			messages: null,
-			group: false,
-			private: false,
-		};
-		conv.members.push(req.user.username);
-		conv.members.push(data.username);
-		await this.chatService.createConv(conv);
 
-		return await this.userService.addFriend(user, data.username);
 
-	}
+	// const amIhere = data.members.includes(req.user.username);
+	// if (!amIhere)
+	const conv = {
+		id: null,
+		name: req.user.username + ", " + data.username,
+		banned: [],
+		admin: [],
+		muted: [],
+		members: [],
+		owner: req.user.username,
+		password: null,
+		messages: null,
+		group: false,
+		private: false,
 
-	@UseGuards(JwtAuthGuard)
+	};
-	@Post('/block')
+	conv.members.push(req.user.username);
-	async newBlocked(@Request() req, @Body() data: any) {
+	conv.members.push(data.username);
-		if (data.username === req.user.username)
+	await this.chatService.createConv(conv);
-			return (0);
-		const user = await this.userService.findOne(req.user.username)
-		return await this.userService.addBlocked(user, data.username);
-	}
 
-	@UseGuards(JwtAuthGuard)
+	return await this.userService.addFriend(user, data.username);
-	@Post('/invite')
+  }
-	async newInvite(@Request() req, @Body() data: any) {
-		if (data.username === req.user.username)
-			return (0);
-		const user = await this.userService.findOne(data.username)
-		if (!user)
-			return (0);
-		return await this.userService.newInvite(user, req.user.username);
-	}
 
-	@UseGuards(JwtAuthGuard)
+  @UseGuards(JwtAuthGuard)
-	@Get('/inviteRequest')
+  @Post('/block')
-	async getInvite(@Request() req) {
+  async newBlocked(@Request() req, @Body() data: any) {
-		return await this.userService.getInvite(req.user.username);
+	// return await this.userService.getFriends(req.user.username);
-	}
+	console.log(`user= ${req.user.username}`)
+	if (data.username === req.user.username)
+		return (0);
+	const user = await this.userService.findOne(req.user.username)
+	return await this.userService.addBlocked(user, data.username);
+  }
 
-	@UseGuards(JwtAuthGuard)
+  @UseGuards(JwtAuthGuard)
-	@Post('/refuseInvite')
+  @Post('/invite')
-	async refuseInvite(@Request() req, @Body() data: any) {
+  async newInvite(@Request() req, @Body() data: any) {
-		const user = await this.userService.findOne(req.user.username)
+	console.log(`user= ${req.user.username}`)
-		return await this.userService.refuseInvite(user, data.username);
+	if (data.username === req.user.username)
-	}
+		return (0);
+	const user = await this.userService.findOne(data.username)
+	if (!user)
+		return (0);
+	return await this.userService.newInvite(user, req.user.username);
+  }
 
-	@UseGuards(JwtAuthGuard)
+  @UseGuards(JwtAuthGuard)
-	@Post('/status')
+  @Get('/inviteRequest')
-	async setStatus(@Request() req, @Body() data: any) {
+  async getInvite(@Request() req) {
-		const user = await this.userService.findOne(req.user.username);
+	// return await this.userService.getFriends(req.user.username);
+	console.log(`useawdawd\n\n\nr= ${req.user.username}`)
+	// const user = await this.userService.findOne(req.user.username)
+	return await this.userService.getInvite(req.user.username);
+  }
 
-		user.status = data.status;
+  @UseGuards(JwtAuthGuard)
-		await this.userService.save(user);
+  @Post('/refuseInvite')
-	}
+  async refuseInvite(@Request() req, @Body() data: any) {
+	// return await this.userService.getFriends(req.user.username);
+	// console.log(`useawdawd\n\n\nr= ${req.user.username}`)
+	const user = await this.userService.findOne(req.user.username) 
+	return await this.userService.refuseInvite(user, data.username);
+  }
+
+  @UseGuards(JwtAuthGuard)
+  @Post('/status')
+  async setStatus(@Request() req, @Body() data: any) {
+  	const user = await this.userService.findOne(req.user.username);
+
+  	user.status = data.status;
+  	await this.userService.save(user);
+  }
 
   @UseGuards(JwtAuthGuard)
   @Post('/nickname')
   async setNickname(@Request() req, @Body() data: any) {
-	const taken = await this.userService.findNickname(data.nickname)
+	// let user = req.user
-	if (taken)
+	// user.nickname = data.nickname
-		return (0);
+	console.log(`user= ${req.user.username}`)
 	let user = await this.userService.findOne(req.user.username)
 	user.nickname = data.nickname;
+	// return await this.userService.getFriends(req.user.username);
 	return await this.userService.save(user);
   }
 
-	@UseGuards(JwtAuthGuard)
+  @UseGuards(JwtAuthGuard)
-	@Post('/picture')
+  @Post('/picture')
-	@UseInterceptors(FileInterceptor('photo'))
+  @UseInterceptors(FileInterceptor('photo'))
-	async setProfilPicture(@Request() req, @UploadedFile() file: Express.Multer.File) {
+  async setProfilPicture(@Request() req, @UploadedFile() file: Express.Multer.File) {
-		let user = await this.userService.findOne(req.user.username)
+	let user = await this.userService.findOne(req.user.username)
-		if (!file)
+	if (!file)
-			user.photo = null;
+		user.photo = null;
-		else
+	else
-			user.photo = file.buffer;
+		user.photo = file.buffer;
-		return await this.userService.save(user);
+	return await this.userService.save(user);
-	}
+  }
 
   @UseGuards(JwtAuthGuard)
   @Post('/getPicture')
   async getProfilPicture(@Body() data: any) {
+	// console.log(`dataaaaa= ${data.username}`)
 	return await this.userService.getPic(data.username)
+
+	// return user.photo
+	// const photoData = user.photo;
+	// Buffer.from(user.photo, 'binary').buffer;
+	// const arrayBuffer = ArrayBuffer.from(photoData, 'binary');
+	// return await this.userService.save(user);
   }
 
-  @UseGuards(JwtAuthGuard)
+//========================================================================================================
-  @Post('/addSession')
+//========================================================================================================
-  async addSession(@Request() req) {
+//                                              Pong			                                  
-	  const user = await this.userService.findOne(req.user.username);
+//========================================================================================================
-	  user.sessionNumber += 1;
+//========================================================================================================
-	  if (user.status !== 2)
-		  user.status = 1;
-	  await this.userService.save(user);
-  }
-
-	//========================================================================================================
-	//========================================================================================================
-	//                                              Pong
-	//========================================================================================================
-	//========================================================================================================
-
-	@UseGuards(JwtAuthGuard)
-	@Post('/addGame')
-	async addGame(@Request() req, @Body() data: any) {
-	  const user = await this.userService.findOne(req.user.username);
-	  user.gameSession += 1;
-	  await this.userService.save(user);
-	}
-
-	@UseGuards(JwtAuthGuard)
-	@Post('/rmGame')
-	async removeGame(@Request() req, @Body() data: any) {
-	  const user = await this.userService.findOne(req.user.username);
-	  if (user.gameSession > 0)
-	  	user.gameSession -= 1;
-	  if (user.gameSession === 0)
-		user.status = 1;
-	  await this.userService.save(user);
-	}
 
   @UseGuards(JwtAuthGuard)
   @Post('/win')
   async addWin(@Request() req, @Body() data: any) {
+	console.log("WIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIN: ", req.user.username)
 	const user = await this.userService.findOne(req.user.username);
+	console.log("User", user)
+	// const user2 = await this.userService.findOne(data.opName);
 	user.win++;
 	const Esp = 1 / (1 + Math.pow(10, (data.opRank - user.rank) / this.scaleFactor))
 	const newRank = user.rank + this.kFactor * (1 - Esp);
+
 	user.rank = newRank;
+	console.log(`win new rank= ${newRank}`);
+	console.log(`data win = ${data}`)
+
 	const newMatch = new MatchLog;
 	newMatch.myScore = data.myScore;
 	newMatch.opScore = data.opScore;
 	newMatch.opponent = data.opName;
 	newMatch.parent = user;
+	console.log(`newMatch WIIIN = ${newMatch}`);
 	await this.userService.saveChild(user, newMatch);
   }
 
   @UseGuards(JwtAuthGuard)
   @Post('/loss')
   async addLoss(@Request() req, @Body() data: any) {
+	console.log("LOOOOOOOOOOOOOOOSE: ", req.user.username)
 	const user = await this.userService.findOne(req.user.username);
+	console.log("User", user)
 	user.loss++;
-	user.status = 1;
+
 	const Esp = 1 / (1 + Math.pow(10, (data.opRank - user.rank) / this.scaleFactor))
 	const newRank = user.rank + this.kFactor * (0 - Esp);
+	
 	user.rank = newRank;
+	console.log(`loss new rank= ${newRank}`);
+	console.log(`data loss = ${data}`)
+
 	const newMatch = new MatchLog;
 	newMatch.myScore = data.myScore;
 	newMatch.opScore = data.opScore;
 	newMatch.opponent = data.opName;
 	newMatch.parent = user;
+	console.log(`newMatch Loose= ${newMatch}`);
 	await this.userService.saveChild(user, newMatch);
   }
 
-	@UseGuards(JwtAuthGuard)
+  @UseGuards(JwtAuthGuard)
-	@Get('/rank')
+  @Get('/rank')
-	async getRank(@Request() req) {
+  async getRank(@Request() req)
-		const user = await this.userService.findOne(req.user.username);
+  {
-		return user.rank;
+	const user = await this.userService.findOne(req.user.username);
-	}
+	return user.rank;
+  }
 
+//   @UseGuards(JwtAuthGuard)
   @Get('/ranking')
   async getRanking()
   {
@@ -265,27 +284,42 @@ export class AppController {
   @Post('/partyInvite')
   async partyInvite(@Request() req, @Body() data: any)
   {
+		//find data.username and add invite to list
+		console.log("data post priv invite=", data);
 		const user = await this.userService.findOne(data.username);
 		user.partyInvite = user.partyInvite || [];
 		user.partyInvite.push({ username: req.user.username, gameId: data.gameId });
+		console.log("usr === ", user)
 		await this.userService.save(user);
+		// user.partyInvite.push(data);
+		console.log("invite === ", user.partyInvite)
   }
 
   @UseGuards(JwtAuthGuard)
   @Get('/partyInvite')
-  async getPartyInvite(@Request() req)
+  async getPartyInvite(@Request() req, @Body() data: any)
   {
+		//find data.username and add invite to list
 		const user = await this.userService.findOne(req.user.username);
 		user.partyInvite = user.partyInvite || [];
+		// this.userService.save(user);
+		// user.partyInvite.push(data);
+		// console.log("data invite === ", data.username)
 		return user.partyInvite;
-	}
+  }
 
   @UseGuards(JwtAuthGuard)
   @Post('/deleteInvite')
   async deleteInvite(@Request() req, @Body() data: any)
   {
+	console.log("delete invite user= ", data.username)
 	const user = await this.userService.findOne(req.user.username);
+	
+	
+	// user.partyInvite = user.partyInvite.filter(item => Object.values(item)[1] !== req.user.username);
+	console.log("user.partyInvite before", user.partyInvite)
 	user.partyInvite = user.partyInvite.filter((item) => Object.values(item)[1] !== data.username);
+	console.log("user.partyInvite after", user.partyInvite)
 	this.userService.save(user);
   }
 
@@ -293,37 +327,54 @@ export class AppController {
   @Post('/history')
   async getHistory(@Body() data: any)
   {
+	// const user = await this.userService.findOne(req.user.username);
+	// return user.rank;
 	return await this.userService.getHistory(data.username);
+	
+	//   if (user) {
+	// 	const children = user.children;
+	// 	console.log(user); 
+	// 	console.log(user.children); // or perform any operations with the children
+	// 	return children;
+	// 	// You can also access specific properties of each child
+	// 	// children.forEach((child) => {
+	// 	//   console.log(child.id);
+	// 	//   console.log(child.opponent);
+	// 	//   // Access other child properties as needed
+	// 	// });
+	//   }
   }
 
-  @UseGuards(JwtAuthGuard)
-  @Post('/quit')
-  async setOffline(@Request() req) {
-	  const user = await this.userService.findOne(req.user.username);
-	  if (!user)
-	  	return ;
-	  if (user.sessionNumber > 0)
-	    user.sessionNumber--;
-	  if (!user.sessionNumber)
-		  user.status = 0;
-	  await this.userService.save(user);
-  }
 
 //========================================================================================================
 //========================================================================================================
-//                                              Auth
+//                                              Auth			                                  
 //========================================================================================================
 //========================================================================================================
 
+// import { Prisma } from "@prisma/client";
+// import { Request, Response, NextFunction } from "express";
+// import { prisma } from "../server";
+
+
 
 @Redirect('http://' + process.env.BASE_URL + '/token', 302)
 @Get('auth/login')
   async login2(@Req() request: Request) {
 	  const url = request.url;
 	  const user = await this.loginClass.Login42(url);
+	  console.log(`user in auth/login= ${user}`);
+	  console.log(`user in auth/login= ${user.username}`);
 	  const data = await this.authService.login(user);
+	  console.log(`all data in api = ${data}`)
+
 	  const myJSON = JSON.stringify(data);
-  	  const token = (await data).access_token;
+	  console.log(`all data json version= ${myJSON}`)
+
+	  console.log(`data in api = ${(await data).access_token}`)
+	//   console.log(`data i = ${(await data).access_token}`)
+	  const token = (await data).access_token;
+	//   console
 	  await this.userService.save(user);
 	  return { url: 'http://' + process.env.BASE_URL + `/token?data=${encodeURIComponent(JSON.stringify(token))}` };
   }
@@ -336,13 +387,16 @@ export class AppController {
 	return user.otp_enabled;
   }
 
+
   @UseGuards(JwtAuthGuard)
   @Post('/otp')
   async createOTP(@Request() req)
   {
 	const user = await this.userService.findOne(req.user.username);
+	// const user2 = await this.userService.findOne(req.user.username);
 	const res = await generateOTP(user);
 	await this.userService.save(user);
+	// console.log(user);
 	return res;
   }
 
@@ -352,6 +406,8 @@ export class AppController {
   {
 	const user = await this.userService.findOne(req.user.username);
 	const res = await VerifyOTP(user, data.token)
+	console.log('token in verify=', data.token)
+	console.log('res in verify=', res)
 	await this.userService.save(user);
 	return res
   }
@@ -362,6 +418,7 @@ export class AppController {
   {
 	const user = await this.userService.findOne(req.user.username);
 	const res = await ValidateOTP(user, data.token)
+	// await this.userService.save(user);
 	return res
   }
 
@@ -372,147 +429,192 @@ export class AppController {
 	const user = await this.userService.findOne(req.user.username);
 	user.otp_verified = false;
 	await this.userService.save(user);
+	// const res = await ValidateOTP(user, data.token)
+	// await this.userService.save(user);
+	// return res
   }
 
+//   @UseGuards(JwtAuthGuard)
+//   @Get('/QRcode')
+//   async createQrCode(@Request() req)
+//   {
+// 	return (await generateQRcode(req));
+//   }
+
+  @UseGuards(JwtAuthGuard)
+  @Post('/quit')
+  async setOffline(@Request() req) {
+	
+	const user = await this.userService.findOne(req.user.username);
+
+	user.status = 0;
+	await this.userService.save(user);
+	console.log("User quit");
+  }
+
+
 //========================================================================================================
 //========================================================================================================
-//                                              Chat
+//                                              Chat			                                  
 //========================================================================================================
 //========================================================================================================
 
-	@UseGuards(JwtAuthGuard)
+  @UseGuards(JwtAuthGuard)
-	@Post('/conv')
+  @Post('/conv')
-	async createConv(@Request() req, @Body() data: any) {
+  async createConv(@Request() req, @Body() data: any) {
-		const amIhere = data.members.includes(req.user.username);
+	///create conv and return it ? id?
-		if (!amIhere)
+	console.log(`data post /conv= ${data}`);
-			data.members.push(req.user.username)
+	console.log(`data post /conv= ${data.members}`);
-		data.admin = []
+	// console.log(`data post /conv= ${data.name}`);
-		data.admin.push(req.user.username)
+
-		data.owner = req.user.username
+	// const param = data;
-		data.group = true;
+	const amIhere = data.members.includes(req.user.username);
-		return await this.chatService.createConv(data);
+	if (!amIhere)
+		data.members.push(req.user.username)
+	// let test = {id: 2, members: "cc"};
+	data.admin = []
+	data.admin.push(req.user.username)
+	data.owner = req.user.username
+	data.group = true;
+	return await this.chatService.createConv(data);
+	// res.json(messages);
+  }
+
+
+
+  @UseGuards(JwtAuthGuard)
+  @Get('/conv')
+  async getConv(@Request() req) {
+	return await this.chatService.getConv(req.user.username);
+  }
+
+  @UseGuards(JwtAuthGuard)
+  @Get('/convs')
+  async getConvs() {
+	return await this.chatService.findAll();
+  }
+
+  @UseGuards(JwtAuthGuard)
+  @Post('/convId')
+  async getConvById(@Body() data: any) {
+	return await this.chatService.findConv(data.convId);
+  }
+
+
+  @UseGuards(JwtAuthGuard)
+  @Post('/message')
+  async postMessage(@Request() req, @Body() data: any) {
+	//if i can post post ?
+	let message = 
+	{
+		convid: data.convId,
+		sender: data.sender,
+		text: data.text,
+		// createdAt: null,
+		id: null,
+	}
+	console.log(data);
+	return await this.chatService.createMessage(message, req.user.username);
+  }
+  
+  @UseGuards(JwtAuthGuard)
+  @Post('/member')
+  async getMember(@Body() data: any) {
+	console.log(data);
+	console.log(`get member= ${data.convId}`);
+	return await this.chatService.findConv(data.convId);
+  }
+  
+  @UseGuards(JwtAuthGuard)
+  @Post('/getMessage')
+  async getMessage(@Body() data: any) {
+	console.log(data);
+	// console.log(req.query)
+	console.log(`data get /conv= ${data.convId}`);
+	// let test = {id: 2, members: "cc"};
+
+
+	return await this.chatService.getMessages(data.convId);
+	// return await this.chatService.getConv(req.user.username);
+	
+	
+	// res.json(messages);
+  }
+  
+  @UseGuards(JwtAuthGuard)
+  @Post('/name')
+  async setName(@Body() data: any) {
+	//find conv
+	// data.convId
+	return await this.chatService.setName(data.convId, data.name)
+  }
+  
+  @UseGuards(JwtAuthGuard)
+  @Post('/password')
+  async setPassword(@Body() data: any) {
+	  return await this.chatService.setPassword(data.convId, data.password)
+  }
+  
+  @UseGuards(JwtAuthGuard)
+  @Post('/verifyPassword')
+  async verifyPassword(@Body() data: any) {
+	  return await this.chatService.verifyPassword(data.convId, data.password)
+	}
+	
+  @UseGuards(JwtAuthGuard)
+  @Post('/invite')
+  async inviteUser(@Body() data: any) {
+      return await this.chatService.inviteUser(data.convId, data.username)
 	}
 
-	@UseGuards(JwtAuthGuard)
+  @UseGuards(JwtAuthGuard)
-	@Get('/conv')
+  @Post('/ban')
-	async getConv(@Request() req) {
+  async banUser(@Body() data: any) {
-		return await this.chatService.getConv(req.user.username);
+	if (!data.username)
+		return ;
+	  return await this.chatService.banUser(data.convId, data.username)
 	}
+	
+  @UseGuards(JwtAuthGuard)
+  @Post('/admin')
+  async setAdmin(@Body() data: any) {
+	if (!data.username)
+		return ;
+	return await this.chatService.setAdmin(data.convId, data.username)
+  }
+  
+  @UseGuards(JwtAuthGuard)
+  @Post('/mute')
+  async muteUser(@Body() data: any) {
+	if (!data.username)
+		return ;
+	return await this.chatService.muteUser(data.convId, data.username)
+  }
+  
+  @UseGuards(JwtAuthGuard)
+  @Post('/isAdmin')
+  async isAdmin(@Request() req, @Body() data: any) {
+	console.log("isdamin= ", req.user.username, " id=", data.convId)
+	return await this.chatService.isAdmin(data.convId, req.user.username)
+  }
+  
+  
+  @UseGuards(JwtAuthGuard)
+  @Post('/private')
+  async setPrivate(@Body() data: any) {
+	return await this.chatService.setPrivate(data.convId)
+  }
 
-	@UseGuards(JwtAuthGuard)
+  @UseGuards(JwtAuthGuard)
-	@Get('/convs')
+  @Post('/allowed')
-	async getConvs() {
+  async isAllowed(@Request() req, @Body() data: any) {
-		return await this.chatService.findAll();
+	return await this.chatService.isAllowed(data.convId, req.user.username)
-	}
+  }
 
-	@UseGuards(JwtAuthGuard)
+  @UseGuards(JwtAuthGuard)
-	@Post('/convId')
+  @Post('/join')
-	async getConvById(@Body() data: any) {
+  async joinChannel(@Request() req, @Body() data: any) {
-		return await this.chatService.findConv(data.convId);
+	return await this.chatService.joinChannel(data.convId, req.user.username)
-	}
+  }
 
-
+} 
-	@UseGuards(JwtAuthGuard)
-	@Post('/message')
-	async postMessage(@Request() req, @Body() data: any) {
-		let message =
-		{
-			convid: data.convId,
-			sender: data.sender,
-			text: data.text,
-			id: null,
-		}
-		return await this.chatService.createMessage(message, req.user.username);
-	}
-
-	@UseGuards(JwtAuthGuard)
-	@Post('/member')
-	async getMember(@Body() data: any) {
-		return await this.chatService.findConv(data.convId);
-	}
-
-	@UseGuards(JwtAuthGuard)
-	@Post('/getMessage')
-	async getMessage(@Body() data: any) {
-		return await this.chatService.getMessages(data.convId);
-	}
-
-	@UseGuards(JwtAuthGuard)
-	@Post('/name')
-	async setName(@Body() data: any) {
-		return await this.chatService.setName(data.convId, data.name)
-	}
-
-	@UseGuards(JwtAuthGuard)
-	@Post('/password')
-	async setPassword(@Body() data: any) {
-		return await this.chatService.setPassword(data.convId, data.password)
-	}
-
-	@UseGuards(JwtAuthGuard)
-	@Post('/verifyPassword')
-	async verifyPassword(@Request() req, @Body() data: any) {
-		return await this.chatService.verifyPassword(data.convId, data.password, req.user.username)
-	}
-
-	@UseGuards(JwtAuthGuard)
-	@Post('/inviteConv')
-	async inviteUser(@Body() data: any) {
-		return await this.chatService.inviteUser(data.convId, data.username)
-	}
-
-	@UseGuards(JwtAuthGuard)
-	@Post('/ban')
-	async banUser(@Body() data: any) {
-		if (!data.username)
-			return;
-		return await this.chatService.banUser(data.convId, data.username)
-	}
-
-	@UseGuards(JwtAuthGuard)
-	@Post('/admin')
-	async setAdmin(@Body() data: any) {
-		if (!data.username)
-			return;
-		return await this.chatService.setAdmin(data.convId, data.username)
-	}
-
-	@UseGuards(JwtAuthGuard)
-	@Post('/mute')
-	async muteUser(@Body() data: any) {
-		if (!data.username)
-			return;
-		return await this.chatService.muteUser(data.convId, data.username, data.time)
-	}
-
-	@UseGuards(JwtAuthGuard)
-	@Post('/isAdmin')
-	async isAdmin(@Request() req, @Body() data: any) {
-		return await this.chatService.isAdmin(data.convId, req.user.username)
-	}
-
-	@UseGuards(JwtAuthGuard)
-	@Post('/private')
-	async setPrivate(@Body() data: any) {
-		return await this.chatService.setPrivate(data.convId, true)
-	}
-
-	@UseGuards(JwtAuthGuard)
-	@Post('/public')
-	async setPublic(@Body() data: any) {
-		return await this.chatService.setPrivate(data.convId, false)
-	}
-
-	@UseGuards(JwtAuthGuard)
-	@Post('/allowed')
-	async isAllowed(@Request() req, @Body() data: any) {
-		return await this.chatService.isAllowed(data.convId, req.user.username)
-	}
-
-	@UseGuards(JwtAuthGuard)
-	@Post('/join')
-	async joinChannel(@Request() req, @Body() data: any) {
-		return await this.chatService.joinChannel(data.convId, req.user.username)
-	}
-
-}

containers/api/src/app.module.ts

@@ -2,8 +2,16 @@ import { Module } from '@nestjs/common';
 import { AppController } from './app.controller';
 import { AppService } from './app.service';
 import { AuthModule } from './auth/auth.module';
+
 import { loginClass } from './auth/login42';
+// import { UsersService } from './users/users.service'; // in add
+
+// import { TypeOrmModule } from '@nestjs/typeorm';
+// import { getTypeOrmConfig } from './config/config.service';
+// import { User } from './model/item.entity';
+// import { UsersService } from './users/users.service';
 import { UsersModule } from './users/users.module';
+// import { ChatService } from './chat/chat.service';
 import { ChatModule } from './chat/chat.module';
 
 @Module({
@@ -15,5 +23,7 @@ import { ChatModule } from './chat/chat.module';
 ],
 controllers: [AppController],
 providers: [AppService, loginClass,],
+
+//   providers: [AppService, UsersService],//in add
 })
 export class AppModule {}

containers/api/src/auth/auth.module.ts

@@ -1,8 +1,23 @@
+// import { Module } from '@nestjs/common';
+// import { AuthService } from './auth.service';
+// import { UsersModule } from '../users/users.module';
+// import { PassportModule } from '@nestjs/passport';
+// import { LocalStrategy } from './local.strategy';
+
+// @Module({
+//   imports: [UsersModule, PassportModule],
+//   providers: [AuthService, LocalStrategy],
+// })
+// export class AuthModule {}
+
+
 import { Module } from '@nestjs/common';
+
 import { AuthService } from './auth.service';
 import { UsersModule } from '../users/users.module';
 import { PassportModule } from '@nestjs/passport';
 import { LocalStrategy } from './local.strategy';
+
 import { JwtModule } from '@nestjs/jwt';
 import { jwtConstants } from './constants';
 import { JwtStrategy } from './jwt.strategy';
@@ -13,6 +28,7 @@ import { JwtStrategy } from './jwt.strategy';
     PassportModule,
     JwtModule.register({
       secret: jwtConstants.secret,
+    //   signOptions: { expiresIn: '60000s' },
     }),
   ],
   providers: [AuthService, LocalStrategy, JwtStrategy],

containers/api/src/auth/auth.service.ts

@@ -21,7 +21,12 @@ export class AuthService {
   }
 
   async login(user: User) {
+	// const myJSON = JSON.stringify(user);
+	// console.log(`in login all user= ${myJSON}`)
+	console.log(`in login user= ${user.username}`)
     const payload = { username: user.username, sub: user.userId };
+	console.log(`in login payload name= ${payload.username}`)
+	console.log(`in login payload sub= ${payload.sub}`)
     return {
       access_token: this.jwtService.sign(payload),
     };

containers/api/src/auth/constants.ts

@@ -1,3 +1,4 @@
 export const jwtConstants = {
+	// secret: 'DO NOT USE THIS VALUE. INSTEAD, CREATE A COMPLEX SECRET AND KEEP IT SAFE OUTSIDE OF THE SOURCE CODE.',
 	secret: process.env.JWT_SECRET,
   };

containers/api/src/auth/jwt.strategy.ts

@@ -14,6 +14,8 @@ export class JwtStrategy extends PassportStrategy(Strategy) {
   }
 
   async validate(payload: any) {
+	console.log("in validate function")
+	console.log(`userid= ${payload.sub} nickname= ${payload.username}`)
     return { userId: payload.sub, username: payload.username };
   }
 }

containers/api/src/auth/login42.ts

@@ -1,7 +1,12 @@
+// import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import { UsersService } from '../users/users.service';
 import { Injectable } from '@nestjs/common';
 
+import { Repository } from 'typeorm';
+
+import { MatchLog } from '../model/user.entity';
+
 @Injectable()
 export class loginClass {
 	constructor(private readonly usersService: UsersService) {};
@@ -11,18 +16,21 @@ export class loginClass {
 		let token = null;
 		let userId = null;
 		let userName = null;
+		// let  = null;
 
+		
 		const params = new URLSearchParams(url.split('?')[1]);
 		const code = params.get('code');
 
 		const data = {
 			grant_type: 'authorization_code',
-			client_id: process.env.CLIENT_UID,
+			client_id: process.env.CLIENT_UID || 'u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41',
+			// client_secret: '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',
 			client_secret: process.env.API_SECRET,
 			code: code,
-			redirect_uri: process.env.REDIRECT_URI,
+			redirect_uri: process.env.REDIRECT_URI || 'http://' + process.env.REACT_APP_BASE_URL + '/api/auth/login',
 		  };
-		   
+
 		try {
 		const response = await axios.post('https://api.intra.42.fr/oauth/token', data);
 		token = response.data.access_token;
@@ -34,39 +42,49 @@ export class loginClass {
 		});
 		userName = response2.data.login;
 		userId = parseInt(response2.data.id, 10);
+		// console.log(`all user data= ${response2.data}`)
+		// const myJSON = JSON.stringify(response2.data);
+		// console.log(`json version= ${myJSON}`)
 		}
 		catch(error)
 		{
 			console.log(error);
 			return ;
 		}
+		console.log(`username before serach= ${userName}`)
+		console.log(`ID before serach= ${userId}`)
 		let user = await this.usersService.findOne(userName);
 		if (!user) {
+			console.log(`no user, creating one`);
 			user = {
 				id: null,
 				partyInvite: null,
 				password: null,
 				username: userName,
 				nickname: userName,
-				win: 0,
+				win: 0, 
 				loss: 0,
 				rank: 1200,
 				userId: userId,
-				otp_base32: null,
+				otp_base32: null,	
 				children: null,
 				status: 1,
+				// doubleAuth: 0,
 				otp_enabled: false,
 				otp_verified: false,
 				friendRequest: null,
 				friends: null,
 				blocked: null,
 				photo: null,
-				sessionNumber: 0,
-				gameSession: 0,
 			  };
 			await this.usersService.create(user);
 		}
+		// console.log(`in login42 user= ${user}`)
 		const myJSON = JSON.stringify(user);
+		console.log(`in login42 user= ${myJSON}`)
+		
+		console.log("end of login");
 		return (user);
+		// return (await this.usersService.findOne(userName));
 	}
-}
+}

containers/api/src/chat/chat.module.ts

@@ -1,3 +1,8 @@
+// import { Module } from '@nestjs/common';
+
+// @Module({})
+// export class ChatModule {}
+
 import { Module } from '@nestjs/common';
 import { ChatService} from './chat.service';
 
@@ -12,6 +17,7 @@ import { Message } from '../model/chat.entity';
 	TypeOrmModule.forRoot(getTypeOrmConfig()),
 	TypeOrmModule.forFeature([Conv]),
 	TypeOrmModule.forFeature([Message]),
+	// TypeOrmModule.forFeature([UserRepository]),
   ],
   providers:[ChatService],
   exports: [ChatService],

containers/api/src/chat/chat.service.ts

@@ -6,7 +6,7 @@
 /*   By: apommier <apommier@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/06/17 01:00:25 by apommier          #+#    #+#             */
-/*   Updated: 2023/06/28 18:20:07 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/20 16:47:02 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -15,8 +15,13 @@ import { InjectRepository } from '@nestjs/typeorm';
 import { Repository } from 'typeorm';
 import { Conv } from '../model/chat.entity';
 import { Message } from '../model/chat.entity';
+
 import * as bcrypt from 'bcrypt';
 
+import { ArrayContains } from "typeorm"
+import { query } from 'express';
+import { InitializeOnPreviewAllowlist } from '@nestjs/core';
+
  
 @Injectable()
 export class ChatService {
@@ -38,10 +43,13 @@ async findAll(): Promise<Conv[]> {
 
   async getConv(username: string): Promise<Conv[]>{
 	const convs = await this.chatRepository.query("SELECT * FROM \"conv\" WHERE $1 = ANY (ARRAY[members]);", [username])
+	console.log(`convs= ${convs}`)
 	return convs;
 }
 
 async findConv(number: number){
+	// username = "apommier"
+	console.log(`fincConv; ${number}`)
 	const conv = await this.chatRepository.findOneBy({id: number})
 	return conv;
 }
@@ -74,69 +82,51 @@ async findConv(number: number){
 async banUser(convId: number, username: string) {
 	const conv = await this.findConv(convId);
 
-	if (conv.owner === username)
-		return (0);
 	conv.banned = conv.banned || [];
 	if (conv.banned.find(item => item === username))
-	{
+			return (1);
-		conv.banned = conv.banned.filter((item) => item !== username);
-		this.save(conv);
-		return (2);
-	}
 	conv.members = conv.members.filter((item) => item !== username);
 	conv.banned.push(username);
 	this.save(conv);
-	return (1);
 }
 
 async inviteUser(convId: number, username: string) {
-	const conv = await this.findConv(convId);
+	// const conv = await this.findConv(convId);
+	// this.save(conv);
 
-	if (conv.members.find(item => item === username))
+	//find user
-		return (1);
+	//add in chanInvite chanID
-	if (conv.banned.find(item => item === username))
+	//save user
-		return (0);
-	conv.members.push(username);
-	this.save(conv);
 }
 
 
 
 async setPassword(convId: number, password: string) {
+	//verify is user is admin ?
 	const conv = await this.findConv(convId);
 	const saltRounds = 10;
     const hashedPassword = await bcrypt.hash(password, saltRounds);
+    // return hashedPassword;
 	conv.password = hashedPassword
 	this.save(conv);
 }
 
-async verifyPassword(convId: number, password: string, username: string) {
+async verifyPassword(convId: number, password: string) {
+	//verify is user is admin ?
 	const conv = await this.findConv(convId);
-	const ret = await bcrypt.compare(password, conv.password);
+	return await bcrypt.compare(password, conv.password);
-	if (ret === true)
+	
-	{
+	// conv.password = password
-		conv.members = conv.members || [];
-		conv.members.push(username);
-		this.save(conv);
-	}
-	return ret;
 }
 
-async muteUser(convId: number, username: string, time: string) {
+async muteUser(convId: number, username: string) {
 	const conv = await this.findConv(convId);
-	const intTime = parseInt(time) * 1000;
+
-	if (conv.owner === username)
-		return (0);
 	conv.muted = conv.muted || [];
 	if (conv.muted.find(item => item === username))
 		return (1);
 	conv.muted.push(username);
 	this.save(conv);
-
-	setTimeout(() => {
-		conv.muted = conv.muted.filter((item) => item !== username)
-		this.save(conv);
-	  }, intTime);
 }
 
 async setAdmin(convId: number, username: string) {
@@ -155,12 +145,16 @@ async isAdmin(convId: number, username: string) {
 	conv.admin = conv.admin || [];
 	if (conv.admin.find(item => item === username))
 		return (1);
+	console.log("nope");
 	return (0);
 }
 
-async setPrivate(convId: number, bool: boolean) {
+async setPrivate(convId: number) {
 	const conv = await this.findConv(convId);
-	conv.private = bool;
+	if (conv.private === true)
+		conv.private = false;
+	else
+		conv.private = true;
 	this.save(conv);
 }
 
@@ -176,6 +170,7 @@ async joinChannel(convId: number, username: string) {
 	if (conv.members.find(item => item === username))
 		return ;
 	conv.members.push(username);
+	// conv.name = name;
 	this.save(conv);
 }
 

containers/api/src/config/config.service.ts

@@ -6,7 +6,7 @@
 /*   By: apommier <apommier@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/04/09 14:53:49 by apommier          #+#    #+#             */
-/*   Updated: 2023/06/28 17:41:26 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/22 20:42:32 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -20,6 +20,8 @@ export const getTypeOrmConfig = (): TypeOrmModuleOptions => ({
 	password: process.env.POSTGRES_PASSWORD || 'postgres',
 	database: process.env.POSTGRES_DATABASE || 'postgres',
 	entities: ["dist/**/*.entity.js"],
+	// entities: [join(__dirname, '**', '*.entity.{ts,js}')]
+	// entities: ['**/*.entity{.ts,.js}'], //basic
 	migrationsTableName: 'migration',
 	migrations: ['src/migration/*.ts'],
 	ssl: process.env.MODE !== 'DEV',

containers/api/src/main.ts

@@ -4,12 +4,22 @@ import * as session from 'express-session';
 import * as dotenv from 'dotenv';
 
 dotenv.config();
+console.log(process.env);
+
+// async function bootstrap() {
+//   const app = await NestFactory.create(AppModule);
+//   await app.listen(3000);
+// }
+// bootstrap();
+
 
 async function bootstrap() {
 	const app = await NestFactory.create(AppModule, {
 		cors: {
 		  origin: '*',
 		  methods: '*',
+		//   preflightContinue: false,
+		//   optionsSuccessStatus: 204,
 		  credentials: true,
 		  allowedHeaders: '*',
 		},

containers/api/src/model/chat.entity.ts

@@ -6,7 +6,7 @@
 /*   By: apommier <apommier@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/06/17 01:00:20 by apommier          #+#    #+#             */
-/*   Updated: 2023/06/26 06:55:03 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/23 15:18:19 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -29,6 +29,9 @@ import { Entity, Column, PrimaryGeneratedColumn, CreateDateColumn, BaseEntity }
 	@Column({ nullable: true })
     private: boolean
 
+	// @Column()
+	// members: string;// arry ??? one to many ???
+
 	@Column('text', { array: true, nullable: true })
 	banned: string[];
 
@@ -46,6 +49,18 @@ import { Entity, Column, PrimaryGeneratedColumn, CreateDateColumn, BaseEntity }
 	
 	@Column({ nullable: true })
 	messages: string;
+	 
+	// @CreateDateColumn()
+	// createdAt: Date;
+
+
+
+	//ban user
+	//user list
+	//blocked user (in user model ?)
+	//op list
+	//a way to stock conv ?
+	
    }
 
    @Entity()
@@ -62,6 +77,7 @@ import { Entity, Column, PrimaryGeneratedColumn, CreateDateColumn, BaseEntity }
    @Column()
    text: string;
    
+
    @CreateDateColumn({ nullable: true })
    createdAt?: Date;
    

containers/api/src/model/user.entity.ts

@@ -1,12 +1,28 @@
+// item.entity.ts
+// import { BaseEntity } from './base.entity';
+
+//   @Column({ type: 'varchar', length: 300 , nullable: true})
+//   name: string;
+
+//   @Column({ type: 'varchar', length: 300 , nullable: true})
+//   description: string;
+
+
 import { Entity, Column, PrimaryGeneratedColumn } from 'typeorm';
 import { ManyToOne, OneToMany } from 'typeorm';
 
+
+
+
 @Entity({ name: 'User' })
 export class User {
 
 	@PrimaryGeneratedColumn()
 	id: number;
 
+	// otp_enabled  Boolean @default(false)
+	// otp_verified Boolean @default(false)
+
 	@Column({ default: false })
 	otp_enabled: boolean;
 
@@ -18,7 +34,7 @@ export class User {
 
 	@Column({ nullable: true })
 	nickname: string;
-
+	
 	@Column({ nullable: true })
 	username: string;
 
@@ -30,31 +46,31 @@ export class User {
 
 	@Column({ default: 0 })
 	win: number;
-
+	
 	@Column({ default: 0 })
 	loss: number;
-
+	
-	@Column({ default: 0 })
-	sessionNumber: number;
-
-	@Column({ default: 0 })
-	gameSession: number;
-
 	@Column({ default: 0 })
 	rank: number;
 
-	@Column({ default: 0 })
+	@Column({ default: 0 }) //0 = offline | 1 = connected | 2 = in game
 	status: number;
-
+	
 	@Column({ default: 0 })
 	userId: number;
 
+	// @Column({ default: 0 })
+	// doubleAuth: number;
+	
 	@Column('text', { array: true, nullable: true })
 	friendRequest: string[];
 
 	@Column({ type: 'jsonb', nullable: true })
 	partyInvite: Record<string, string>[];
 
+	// @Column('text', { array: true, nullable: true })
+	// friendRequest: string[];
+
 	@Column('text', { array: true, nullable: true })
 	friends: string[];
 
@@ -66,7 +82,7 @@ export class User {
 
 }
 
-@Entity({name: 'MatchLog' })
+@Entity()
 export class MatchLog {
   @PrimaryGeneratedColumn()
   id: number;
@@ -82,4 +98,4 @@ export class MatchLog {
 
   @ManyToOne(() => User, parent => parent.children)
   parent: User;
-}
+}

containers/api/src/users/2fa.ts

@@ -1,7 +1,18 @@
+// import crypto from 'crypto';
+import base32Decode from 'base32-decode';
+
+import crypto from "crypto";
 import * as OTPAuth from "otpauth";
 import { encode } from "hi-base32";
+
 import * as qr from 'qrcode';
 
+// [...] Register user
+
+// [...] Login user
+
+// [...] Generate OTP
+
 const generateRandomBase32 = async () => {
 	const {randomBytes} = await import('crypto');
 	const buffer = randomBytes(15);
@@ -25,22 +36,35 @@ export const generateOTP = async (user) => {
 	let otpauth_url = totp.toString();
 	const qrCodeDataUrl = await qr.toDataURL(otpauth_url, { errorCorrectionLevel: 'H' });
 
-	const filePath = 'qrcode.png';
+	const filePath = 'qrcode.png'; // Specify the file path where the QR code should be saved
 	
 	qr.toFile(filePath, qrCodeDataUrl, (error) => {
 	  if (error) {
 		console.error(error);
+		// Handle the error appropriately
 		return;
 	  }
+	  // QR code image has been generated and saved to the file
+	  // Or, you can create a buffer of the image data directly
 	})
 
+
+
+
+
+
 	const res = {
 		otpauth_url: otpauth_url, 
 		base32_secret: base32_secret
 	}
+
+	console.log("res= ", res)
+
+	//update db with otp var
 	user.otp_enabled = true;
 	user.otp_base32 = base32_secret;
-	return (res);
+	return (res)
+
 	} catch (error) {
 		console.log(error)
 	}
@@ -60,11 +84,13 @@ export const generateOTP = async (user) => {
 	  let delta = totp.validate({ token });
 
 	  if (delta === null) {
+		console.log("error verify token")
 		return (0)
 	  }
 	  else
 	  {
 		user.otp_verified = true;
+		console.log("token verified")
 		return (1)
 	  }
 	} catch (error) {
@@ -84,11 +110,194 @@ export const generateOTP = async (user) => {
 	});
 	  let delta = totp.validate({ token });
 
-	  if (delta === null)
+	  if (delta === null) {
+		console.log("error validate token")
 		return (0);
+	  }
 	  else
+	  {
+		// user.otp_verified = true;
+		console.log("token validated")
 		return (1);
+	  }
 	} catch (error) {
 		console.log(error)
 	}
-  };
+  };
+
+// import { randomBytes} from 'crypto';
+// import { promisify } from 'util';
+
+// export function generateHOTP(secret, counter) {
+//   const decodedSecret = base32Decode(secret, 'RFC4648');
+
+//   const buffer = Buffer.alloc(8);
+//   for (let i = 0; i < 8; i++)
+//   {
+//     buffer[7 - i] = counter & 0xff;
+//     counter = counter >> 8;
+//   }
+
+//   // Step 1: Generate an HMAC-SHA-1 value
+//   const hmac = crypto.createHmac('sha1', Buffer.from(decodedSecret));
+//   hmac.update(buffer);
+//   const hmacResult = hmac.digest();
+
+//   // Step 2: Generate a 4-byte string (Dynamic Truncation)
+//   const offset = hmacResult[hmacResult.length - 1] & 0xf;
+//   const code =
+//     ((hmacResult[offset] & 0x7f) << 24) |
+//     ((hmacResult[offset + 1] & 0xff) << 16) |
+//     ((hmacResult[offset + 2] & 0xff) << 8) |
+//     (hmacResult[offset + 3] & 0xff);
+
+//   // Step 3: Compute an HOTP value
+//   return `${code % 10 ** 6}`.padStart(6, '0');
+// }
+
+// type QRcode = any;
+
+// export function generateHOTP(secret, counter) {
+// 	const decodedSecret = base32Decode(secret, 'RFC4648');
+  
+// 	const buffer = Buffer.alloc(8);
+// 	for (let i = 0; i < 8; i++) {
+// 	  buffer[7 - i] = counter & 0xff;
+// 	  counter = counter >> 8;
+// 	}
+
+// 	// Step 1: Generate an HMAC-SHA-1 value
+// 	const hmac = crypto.createHmac('sha1', Buffer.from(decodedSecret));
+// 	hmac.update(buffer);
+// 	const hmacResult = hmac.digest();
+
+// 	// Step 2: Generate a 4-byte string (Dynamic Truncation)
+// 	const offset = hmacResult[hmacResult.length - 1] & 0xf;
+// 	const code =
+// 	  ((hmacResult[offset] & 0x7f) << 24) |
+// 	  ((hmacResult[offset + 1] & 0xff) << 16) |
+// 	  ((hmacResult[offset + 2] & 0xff) << 8) |
+// 	  (hmacResult[offset + 3] & 0xff);
+  
+// 	// Step 3: Compute an HOTP value
+// 	return code % 10 ** 6;
+//   }
+
+// export function generateTOTP(secret, window = 0)
+// {
+//   const counter = Math.floor(Date.now() / 30000);
+//   return generateHOTP(secret, counter + window);
+// }
+
+// export function verifyTOTP(token, secret, window = 1)
+// {
+//   for (let errorWindow = -window; errorWindow <= +window; errorWindow++)
+//   {
+//     const totp = generateTOTP(secret, errorWindow);
+//     if (token === totp)
+//       return true;
+//   }
+//   return false;
+// }
+
+
+
+// import { initStorage, getUser, setUser } from './storage';
+// import util from 'util';
+// import qrcode from 'qrcode';
+// // import base32Encode from 'base32-encode';
+// import * as util from 'util';
+// import * as qrcode from 'qrcode';
+// import * as base32Encode from 'base32-encode';
+
+// import * as util from 'util';
+// import * as qrcode from 'qrcode';
+// import * as crypto from 'crypto';
+// import { Response } from 'express';
+// import { Readable } from 'stream';
+// import * as base32Encode from 'base32-encode';
+// import { base32Encode } from 'base32-encode';
+// import base32Encode from 'base32-encode';
+// import { encode } from 'thirty-two';
+
+// // ...
+
+// import * as qrcode from 'qrcode';
+// import * as fs from 'fs';
+
+
+// import { nanoid } from "nanoid";
+// // import * as nanoid from 'nanoid'
+
+// export async function generateQRcode(req)
+// {
+// 	// const base32Encode = (await import('base32-encode'));
+// 	// const nanoid = (await import('nanoid'));
+	
+// 	// const util = (await import('util'));
+// 	// const qrcode = (await import('qrcode'));
+
+// 	const user = req.user;
+// 	let res;
+// 	// For security, we no longer show the QR code after is verified
+// 	// if (user.mfaEnabled) return res.status(404).end();
+	
+// 	// if (!user.mfaSecret) { //to do
+// 	const buffer = nanoid(14);
+// 	// generate unique secret for user
+// 	// this secret will be used to check the verification code sent by user
+// 	// const buffer = await util.promisify(crypto.randomBytes)(14);
+// 	// const buffer = crypto.lib.WordArray.random(32)
+// 	user.mfaSecret = encode(buffer).toString('utf8');
+// 	//   user.mfaSecret = base32Encoded(buffer, 'RFC4648', { padding: false });
+	
+// 	  //   setUser(user); // to do !!
+
+
+// 	// }
+  
+// 	const issuer = 'Google';
+// 	const algorithm = 'SHA1';
+// 	const digits = '6';
+// 	const period = '30';
+// 	const otpType = 'totp';
+// 	const configUri = `otpauth://${otpType}/${issuer}:${user.username}?algorithm=${algorithm}&digits=${digits}&period=${period}&issuer=${issuer}&secret=${user.mfaSecret}`;
+  
+// 	// res.setHeader('Content-Type', 'image/png');
+// 	const QRCode = require('qrcode');
+// 	console.log(`before done`);
+// 	// QRCode.toFileStream(res, configUri);
+// 	// const filePath = 'qrcode.png'; // Specify the file path where the QR code should be saved
+
+
+// 	const qrCodeData = buffer; // Replace with your actual QR code data
+// 	const filePath = 'qrcode.png'; // Specify the file path where the QR code should be saved
+	
+// 	qrcode.toFile(filePath, qrCodeData, (error) => {
+// 	  if (error) {
+// 		console.error(error);
+// 		// Handle the error appropriately
+// 		return;
+// 	  }
+// 	  // QR code image has been generated and saved to the file
+// 	  // Or, you can create a buffer of the image data directly
+// 	})
+
+// // qrcode.toFile(filePath, configUri, (error) => {
+// //   if (error) {
+// //     console.error(error);
+// //     // Handle the error appropriately
+// //     return;
+// //   }
+// //   const readableStream = fs.createReadStream(filePath);
+// //   res.data = readableStream;
+//   // Use the readable stream as needed
+// // });
+
+
+	
+// 	// qrcode.toFileStream(res, configUri);
+// 	console.log(`QRcode done`);
+// 	return res;
+// 	// return
+//   }

containers/api/src/users/users.module.ts

@@ -11,6 +11,7 @@ import { MatchLog, User } from '../model/user.entity';
 	TypeOrmModule.forRoot(getTypeOrmConfig()),
 	TypeOrmModule.forFeature([User]),
 	TypeOrmModule.forFeature([MatchLog]),
+	// TypeOrmModule.forFeature([UserRepository]),
   ],
   providers:[UsersService],
   exports: [UsersService],

containers/api/src/users/users.service.ts

@@ -6,7 +6,7 @@
 /*   By: apommier <apommier@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/06/17 01:00:07 by apommier          #+#    #+#             */
-/*   Updated: 2023/06/28 17:43:46 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/21 01:31:44 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -41,15 +41,12 @@ export class UsersService {
 		return await this.userRepository.findOneBy({username: username});
 	}
 
-	async findNickname(username: string): Promise<User> {
-		return await this.userRepository.findOneBy({nickname: username});
-	}
-
 	async save(user: User): Promise<User> {
 		return await this.userRepository.save(user);
 	}
 
 	async saveChild(user: User, match: MatchLog): Promise<User> {
+		// user.match = savedChild;
 		user.children.push(match)
 		await this.matchRepository.save(match);
 		return await this.userRepository.save(user);
@@ -57,29 +54,37 @@ export class UsersService {
 
 	async getFriends(username: string) {
 		const user = await this.findOne(username)
-		let friendsTab = user.friends || [];
+		let friendsTab = user.friends
+		console.log(friendsTab)
+		// friendsTab = ['apommier', 'syd']
 		const friends = await this.userRepository.query("SELECT * FROM \"User\" WHERE username = ANY ($1);", [friendsTab]);
+		console.log(friends)
 		return (friends)
 	}
 
 	async newInvite(user: User, username: string) {
 		if (!(await this.findOne(username)))
 			return (0);
+		// user.friendRequest = user.friendRequest || [];
+		// console.log("newInvite")
+		// console.log(user.friendRequest)
 		user.friendRequest = user.friendRequest || [];
 		if (user.friendRequest.find(item => item === username))
 			return (1);
-		user.friends = user.friends || [];
-		if (user.friends.find(item => item === username))
-			return (1);
 		user.friendRequest.push(username);
-		this.save(user);	
+		this.save(user);
 		return (1);
 	}
 
 	async getInvite(username: string) {
 		const user = await this.findOne(username)
 		let friendsTab = user.friendRequest
+		// console.log(friendsTab[0])
+		// console.log(friendsTab[1])
+		console.log(friendsTab)
+		// friendsTab = ['apommier', 'syd']
 		const friends = await this.userRepository.query("SELECT * FROM \"User\" WHERE username = ANY ($1);", [friendsTab]);
+		console.log(friends)
 		return (friends)
 	}
 
@@ -90,26 +95,28 @@ export class UsersService {
 
 	async getHistory(username: string) {
 		const user = await this.findOne(username);
-
+		
-		return await this.userRepository.query("SELECT * FROM \"MatchLog\" WHERE \"parentId\" = ANY ($1);", [[user.id]]);
+		if (user) {
+		  const children = user.children;
+		  console.log(user); 
+		  console.log(user.children); // or perform any operations with the children
+		  return children;
+		}
 	}
 
 	async addFriend(user: User, username: string) {
-		const user2 = await this.findOne(username)
+		if (!(await this.findOne(username)))
-		if (!user)
 			return (0);
+			// user.friendRequest = user.friendRequest || [];
 		user.friends = user.friends || [];
 		if (user.friends.find(item => item === username))
-		{
+		{		
 			user.friendRequest = user.friendRequest.filter((item) => item !== username);
 			this.save(user);
 			return (1);
 		}
 		user.friends.push(username);
 		user.friendRequest = user.friendRequest.filter((item) => item !== username);
-		user2.friends = user2.friends || [];
-		user2.friends.push(user.username);
-		this.save(user2);
 		this.save(user);
 		return (1);
 	}
@@ -119,11 +126,7 @@ export class UsersService {
 			return (0);
 		user.blocked = user.blocked || [];
 		if (user.blocked.find(item => item === username))
-		{
+			return (1);
-			this.save(user);
-			user.blocked = user.blocked.filter((item) => item !== username);
-			return (2);
-		}
 		user.blocked.push(username);
 		this.save(user);
 		return (1);
@@ -134,11 +137,40 @@ export class UsersService {
 	}
 
 	async getPic( username: string) {
+		// const user = await this.findOne(username);
 		let result =  await this.userRepository.query("select encode(photo, 'base64') FROM public.\"User\" WHERE username = $1;", [username]);
 		if (result.length > 0) {
 			const encodedPhoto = result[0].encode;
+			console.log(`pic!!! =`)
 			return encodedPhoto;
 		  }
+		  console.log(`no pic`)
 		return undefined
 	}
-}
+}
+
+
+// }
+// type orm here
+
+// This should be a real class/interface representing a user entity
+// export type User = any;
+
+// @Injectable()
+// export class UsersService {
+//   private readonly users = [
+//     {
+//       userId: 1,
+//       username: 'john',
+//       password: 'changeme',
+//     },
+//     {
+//       userId: 2,
+//       username: 'maria',
+//       password: 'guess',
+//     },
+//   ];
+
+//   async findOne(username: string): Promise<User | undefined> {
+//     return this.users.find(user => user.username === username);
+//   }

containers/chat/src/chat/chat.gateway.ts

@@ -8,35 +8,58 @@ export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
 	@WebSocketServer()
 	server: Server;
 
+
 	private clients: Record<string, Socket> = {};
+	// private clientsNames: Record<string, Socket[]> = {};
 	private clientsNames: Map<string, string[]> = new Map();
+	// private games: Map<string, Socket[]> = new Map();// Chat en cours, identifiées par un ID
+
+
 
 	afterInit(server: Server)
 	{
 		console.log('ChatGateway initialized');
 	}
+	
 
 	handleConnection(client: Socket, ...args: any[])
 	{
 		console.log(`Client connected: ${client.id}`);
+		// console.log(`Client connected: ${args[0].username}`);
+
+		// const clientId = args[0].username;
 		const clientId = client.id;
     	this.clients[clientId] = client;
+		// client.emit('chat:clientId', clientId);
 		console.log(`Total connected clients: ${Object.keys(this.clients).length}`);
 	}
 
 	handleDisconnect(client: Socket)
 	{
+		console.log(`Client want to deco: ${client.id}`);
+
+		// const disconnectedClientId = Object.keys(this.clients).find(clientId => this.clients[clientId] === client);
 		const disconnectedClientId = client.id
 		if (disconnectedClientId)
 		{
 			this.clientsNames.forEach((clientArray, clientName) =>
 			{
+				// clientArray.
+				console.log(`Clients with name ${clientName}:`);
+				console.log(`array= ${clientArray}`)
+				console.log(`lenght= ${clientArray.length}`)
 				clientArray.forEach((targetClient, index) =>
 				{
+					console.log(`index= ${index}`)
+					console.log(`lenght2= ${clientArray.length}`)
 					if (targetClient === disconnectedClientId)
 					{
+						console.log("find it")
+						console.log(`target= ${clientArray[index]}`)
+						// delete this.clientsNames[clientName][index];
 						if (clientArray.length === 1)
 						{
+							console.log("delete true")
 							this.clientsNames.delete(clientName);
 							return 
 						}
@@ -46,11 +69,16 @@ export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
 							this.clientsNames.delete(clientName);
 							this.clientsNames.set(clientName, newArray);
 						}
+							// 
+						// this.clientsNames[clientName].delete(index);
+						// else
+							
 						return ;
 					}
 				});
 			});
 			delete this.clients[disconnectedClientId];
+			// delete this.clientsNames;
 			console.log(`Client disconnected: ${disconnectedClientId}`);
 			console.log(`Total connected clients: ${Object.keys(this.clients).length}`);
 		}
@@ -58,14 +86,22 @@ export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
 	
 	@SubscribeMessage('connection')
 	connectClient(client: any, payload: any): void {
+		console.log("connect client")
+		console.log(`connect name: ${payload.username}`);
 		if (this.clientsNames.has(payload.username)) {
-			const clientArray = this.clientsNames.get(payload.username);
+			console.log("get it")
-			clientArray.push(client.id);
+			const clientArray = this.clientsNames.get(payload.username); // Retrieve the array
+			clientArray.push(client.id); // Add the new client to the array
 		  } else {
-			this.clientsNames.set(payload.username, [client.id]);
+			console.log("create")
+			this.clientsNames.set(payload.username, [client.id]); // Create a new array with the new client as the value
 		  }
   }
 
+//   @SubscribeMessage('socket.io')
+//   socketConnect(client: any, payload: any): void {
+// 	console.log("/socket.io")
+// }
 
 @SubscribeMessage('ban')
 banUser(client: any, payload: any): void {
@@ -76,8 +112,21 @@ banUser(client: any, payload: any): void {
 	}
 	const bannedClients = this.clientsNames.get(payload.username);
 	bannedClients.forEach(client => {
+		console.log("Banning client:", client);
+		// Perform ban operation on each client, e.g., emit a 'ban' event
+		console.log("clietn socket=", this.clients[client])
 		this.clients[client].emit('ban', payload);
 	  });
+	//   console.log("/ban")
+//   console.log("in ban username=", payload.username)
+//   if (!this.clientsNames[payload.username])
+//   {
+// 	console.log("no user ??")
+// 	return ;	
+//   }
+// 	this.clientsNames[payload.username].forEach()
+// 	console.log("client=", this.clientsNames)
+//   this.clients[payload.username].emit('ban', payload)
 }
 
 @SubscribeMessage('mute')
@@ -89,26 +138,51 @@ muteUser(client: any, payload: any): void {
 	}
 	const mutedClients = this.clientsNames.get(payload.username);
 	mutedClients.forEach(client => {
+		console.log("Banning client:", client);
+		// Perform ban operation on each client, e.g., emit a 'ban' event
+		console.log("clietn socket=", this.clients[client])
 		this.clients[client].emit('mute', payload);
 	});
+	console.log("/mute")
 }
   
 
 	@SubscribeMessage('sendMessage')
 	handleMessage(client: Socket, payload: any): void {
+	//   console.log(`message received: ${payload}`);
+	//   console.log(`message sender: ${payload.sender}`);
+	//   console.log(`client id: ${client.id}`);
+	//   console.log(`conversation ID: ${payload.convId}`);
+	//   console.log(`members: ${payload.members}`);
+	
 	  this.clientsNames.forEach((clientArray, clientName) =>
 	  {
+		// console.log(`		5Clients with name ${clientName}:`);
 		if (payload.members.includes(clientName))
 		{
 			clientArray.forEach((targetClient, index) =>
 			{
+			//   console.log(`client id: ${client.id}`);
+			//   console.log(`target: ${targetClient}`);
+			//   console.log(`target id: ${targetClient}`);
 			  if (targetClient && targetClient !== client.id)
+			  {
+				// console.log("Sending to someone");
+				// console.log(`index= ${index}`);
+				// console.log(`target: ${targetClient}`); // Perform actions on each target client
 				this.clients[targetClient].emit('message', payload)
+
+			  }
+			  else {
+				console.log("not sending");
+			  }
 			});
 		}
-	  });
+	});
-    }
+	}
-}
+
+
+	}
 
 
 

containers/chat/src/main.ts

@@ -6,24 +6,32 @@ import * as socketio from 'socket.io';
 import * as dotenv from 'dotenv';
 
 dotenv.config();
+console.log(process.env);
 
 async function bootstrap() {
 	const app = await NestFactory.create(AppModule, {
 	cors: {
 	  origin: '*',
 	  methods: '*',
+	//   preflightContinue: false,
+	//   optionsSuccessStatus: 204,
+	//   credentials: true,
 	  allowedHeaders: '*',
 	},
   });
+// const app = await NestFactory.create(AppModule);
+
   const httpServer = app.getHttpServer();
   const io = new socketio.Server(httpServer);
 
   io.on('connection', (socket) => {
 	console.log('Client connected:', socket.id);
   
+	// Gestion des événements personnalisés ici
 	socket.on('customEvent', (data) => {
 	  console.log('Custom event received:', data);
   
+	  // Exemple de réponse à un événement personnalisé
 	  socket.emit('customEventResponse', { message: 'Event processed.' });
 	});
   

containers/pong/src/main.ts

@@ -1,18 +1,43 @@
+// import { NestFactory } from '@nestjs/core';
+// import { AppModule } from './app.module';
+// import * as cors from 'cors';
+
+// async function bootstrap() {
+//   const app = await NestFactory.create(AppModule);
+
+//   app.enableCors({
+// 	origin: 'http://localhost:8080',
+// 	methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
+// 	allowedHeaders: ['Content-Type', 'Authorization'],
+// 	credentials: true,
+//   });
+
+//   await app.listen(3000);
+// }
+// bootstrap();
+
 import { NestFactory } from '@nestjs/core';
 import { AppModule } from './app.module';
+import * as cors from 'cors';
+import { Server } from 'socket.io';
 import * as socketio from 'socket.io';
 import * as dotenv from 'dotenv';
 
 dotenv.config();
+console.log(process.env);
 
 async function bootstrap() {
 	const app = await NestFactory.create(AppModule, {
 	cors: {
 	  origin: '*',
 	  methods: '*',
+	//   preflightContinue: false,
+	//   optionsSuccessStatus: 204,
+	//   credentials: true,
 	  allowedHeaders: '*',
 	},
   });
+// const app = await NestFactory.create(AppModule);
 
   const httpServer = app.getHttpServer();
   const io = new socketio.Server(httpServer);

containers/pong/src/pong/pong.gateway.ts

@@ -6,7 +6,7 @@
 /*   By: apommier <apommier@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/06/19 15:18:38 by apommier          #+#    #+#             */
-/*   Updated: 2023/06/28 17:46:12 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/23 15:19:12 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -28,6 +28,7 @@ export class PongGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
 	private clients: Record<string, Socket> = {};
 
 	private waitingClients: Set<{ client: Socket, option: number }> = new Set();
+	// private waitingClients: Set<Socket> = new Set(); // Utilisateurs cherchant un match
 	private games: Map<string, Socket[]> = new Map(); // Parties en cours, identifiées par un ID
 
 	afterInit(server: Server)
@@ -38,56 +39,81 @@ export class PongGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
 	handleConnection(client: Socket, ...args: any[])
 	{
 		console.log(`Client connected: ${client.id}`);
+
 		const clientId = client.id;
     	this.clients[clientId] = client;
+		// client.emit('pong:clientId', clientId);
 		client.emit('pong:clientId', client.id);
+
 		console.log(`Total connected clients: ${Object.keys(this.clients).length}`);
 	}
 
 	handleDisconnect(client: Socket)
 	{
+		console.log(`Normal disconnected: ${client.id}`);
+
 		this.waitingClients.forEach((item) => {
 			if (item.client === client)
 				this.waitingClients.delete(item);
 		  });
 
+		  // Delete the socket from the 'games' map
 		  this.games.forEach((sockets, gameId) => {
 			const index = sockets.indexOf(client);
 			if (index !== -1)
 			{
 				if (index === 0)
+				{
+					console.log("emit boy1")
 					sockets[1].emit("pong:win")
+					// sockets[0].emit("/win")
+				}
 				else
+				{
+					console.log("emit boy2")
 					sockets[0].emit("pong:win")
+					// sockets[1].emit("/win")
+				}
 				this.games.delete(gameId);
 				delete this.clients[client.id];
 			}
 		})
+
 		console.log(`Total connected clients: ${Object.keys(this.clients).length}`);
 	}
 
 
 	@SubscribeMessage('pong:disconnect')
 	disconnectClient(client: Socket, payload: any): void {
-		console.log("Forced disconnect client= ", client.id)
+		console.log("disconnect forced client= ", client.id)
 		
 		for (const key in this.clients) {
 			if (this.clients.hasOwnProperty(key) && this.clients[key] === client) 
 				delete this.clients[key];
 		}
+		  // Delete the socket from the 'waitingClients' set
 		  this.waitingClients.forEach((item) => {
 			if (item.client === client)
 				this.waitingClients.delete(item);
 		  });
 
+		  // Delete the socket from the 'games' map
 		  this.games.forEach((sockets, gameId) => {
 			const index = sockets.indexOf(client);
 			if (index !== -1)
 			{
 				if (index === 0)
+				{
+					console.log("emit boy1")
 					sockets[1].emit("pong:win")
+					// sockets[0].emit("/win")
+				}
 				else
+				{
+					console.log("emit boy2")
 					sockets[0].emit("pong:win")
+					// sockets[1].emit("/win")
+				}
 				this.games.delete(gameId);
 				delete this.clients[client.id];
 			}
@@ -103,18 +129,29 @@ export class PongGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
 
 @SubscribeMessage('pong:matchmaking')
 addMatchmaking(client: Socket, payload: any): void {
+  console.log("matchmaking");
+  console.log(payload);
+  console.log(`option= ${payload.option}`);
+  // Add the client to the waitingClients set along with their chosen option
   this.waitingClients.add({ client, option: payload.option });
   console.log("Adding client to waiting list...");
 
+  // Filter the waitingClients set to find clients with the same option
   const matchingClients = Array.from(this.waitingClients).filter(
     (waitingClient) =>
       waitingClient.option === payload.option && waitingClient.client !== client
   );
 
+
   if (matchingClients.length > 0) {
     console.log("Creating new game...");
-    const players = [matchingClients[0].client, client];
+    const players = [matchingClients[0].client, client]; // Add the current client to the players array
     players.forEach((player) => {
+    //   this.waitingClients.delete(
+    //     this.waitingClients.find(
+    //       (waitingClient) => waitingClient.client === player
+    //     )
+    //   );
 		const matchingClient = Array.from(this.waitingClients).find(
 			(waitingClient) => waitingClient.client === player
 	  	);
@@ -128,11 +165,12 @@ addMatchmaking(client: Socket, payload: any): void {
       player.join(gameId);
       console.log(`Player ${player.id} joined game ${gameId}`);
     });
-	payload.gameId = gameId;
     players.forEach((player) => {
-      player.emit('pong:gameId', payload);
+      player.emit('pong:gameId', gameId);
     });
   }
+
+  // console.log(`from: ${client.id}`);
 }
 
 
@@ -144,27 +182,48 @@ addMatchmaking(client: Socket, payload: any): void {
 //========================================================================================================
 
 
+
+// @SubscribeMessage('pong:invite')
+// createPrivateGame(client: Socket, payload: any): void {
+// 	//after invite accepted ?
+// 	//set the two user in a game ?
+
+// }
+
+
 @SubscribeMessage('pong:joinParty')
 joinPrivateParty(client: Socket, payload: any): void {
+	console.log(" join PrivateParty")
+	
 	const game = this.games.get(payload.gameId);
 	if (game)
 	{
 		game.push(client);
 		const playersIds = game.map(socket => socket.id);
-		this.clients[playersIds[0]].emit('pong:gameId', payload);
+		this.clients[playersIds[0]].emit('pong:gameId', payload.gameId);
-		this.clients[playersIds[1]].emit('pong:gameId', payload);
+		this.clients[playersIds[1]].emit('pong:gameId', payload.gameId);
 	}
 	else
+	{
+		console.log("emit else")
 		client.emit("pong:win")
+	}
+		// console.log("no game ???")
+
 }
 
 
 @SubscribeMessage('pong:privateParty')
 addPrivateParty(client: Socket, payload: any): void {
+	console.log("addPrivateParty")
+
     const gameId = uuidv4();
 	const players = [client];
     this.games.set(gameId, players);
+	console.log("game created private")
 	client.emit('pong:privateId', gameId);
+	//create game 
+	//emit private gameId to canvas (don't launch canvas)
 
 }
 
@@ -184,17 +243,24 @@ addPrivateParty(client: Socket, payload: any): void {
 	@SubscribeMessage('pong:power')
 	sendPower(client: Socket, payload: any): void
 	{
+		console.log(`from: ${client.id}`);
+		console.log(payload);
+		
 		const game = this.games.get(payload.gameId);
 		const playersIds = game.map(socket => socket.id);
 			if (playersIds[0] === payload.id)
 					this.clients[playersIds[1]].emit('pong:power', payload);
 			else if (playersIds[1] === payload.id)
 					this.clients[playersIds[0]].emit('pong:power', payload);
+		console.log("END OF HANDLE");
 	}
 
 	@SubscribeMessage('pong:message')
 	handleMessage(client: Socket, payload: any): void
 	{
+		console.log(`from: ${client.id}`);
+		console.log(payload);
+		
 		const game = this.games.get(payload.gameId);
 		const playersIds = game.map(socket => socket.id);
 			if (playersIds[0] === payload.id)
@@ -207,14 +273,20 @@ addPrivateParty(client: Socket, payload: any): void {
 				if (payload.ballX < payload.width / 2)
 					this.clients[playersIds[0]].emit('pong:info', payload);
 			}
+		console.log("END OF HANDLE");
 	}
 
 	@SubscribeMessage('pong:forced')
 	forcedMessage(client: Socket, payload: any): void
 	{
+		console.log(`from: ${client.id}`);
+		console.log(payload);
+
 		const game = this.games.get(payload.gameId);
 		const playersIds = game.map(socket => socket.id);
 
+		console.log(`id of 0= ${playersIds[0]}`);
+
 		if (playersIds[0] === payload.id)
 		{
 				this.clients[playersIds[1]].emit('pong:info', payload);
@@ -223,13 +295,20 @@ addPrivateParty(client: Socket, payload: any): void {
 		{
 				this.clients[playersIds[0]].emit('pong:info', payload);
 		}
+		console.log("END OF HANDLE");
 	}
 
 	@SubscribeMessage('pong:paddle')
 	handlePaddle(client: Socket, payload: any): void
 	{
+		console.log(`from: ${client.id}`);
+		console.log(payload);
+
 		const game = this.games.get(payload.gameId);
 		const playersIds = game.map(socket => socket.id);
+
+		console.log(`id of 0= ${playersIds[0]}`);
+
 		if (playersIds[0] === payload.id)
 		{
 			this.clients[playersIds[1]].emit('pong:paddle', payload);
@@ -238,6 +317,7 @@ addPrivateParty(client: Socket, payload: any): void {
 		{
 			this.clients[playersIds[0]].emit('pong:paddle', payload);
 		}
+		console.log("END OF HANDLE");
 	}
 
 	@SubscribeMessage('pong:point')
@@ -245,6 +325,7 @@ addPrivateParty(client: Socket, payload: any): void {
 	{
 		const game = this.games.get(payload.gameId);
 		const playersIds = game.map(socket => socket.id);
+		console.log(`id of 0= ${playersIds[0]}`);
 
 		if (playersIds[0] === payload.id)
 		{
@@ -256,31 +337,21 @@ addPrivateParty(client: Socket, payload: any): void {
 		}
 	}
 
-	@SubscribeMessage('pong:myPoint')
-	handleMyPoint(client: Socket, payload: any): void
-	{
-		const game = this.games.get(payload.gameId);
-		const playersIds = game.map(socket => socket.id);
-
-		if (playersIds[0] === payload.id)
-			this.clients[playersIds[1]].emit('pong:hisPoint', payload);
-		else if (playersIds[1] === payload.id)
-			this.clients[playersIds[0]].emit('pong:hisPoint', payload);
-	}
-
 	@SubscribeMessage('pong:name')
 	getName(client: Socket, payload: any): void
 	{
 		const game = this.games.get(payload.gameId);
 		const playersIds = game.map(socket => socket.id);
+		
+		console.log(`name of client= ${payload.name}`);
 
-		if (playersIds[0] === payload.id) 
+		if (playersIds[0] === payload.id)
 		{
-			this.clients[playersIds[1]].emit('pong:name', payload);
+			this.clients[playersIds[1]].emit('pong:name', payload.name);
 		}
 		if (playersIds[1] === payload.id)
 		{
-			this.clients[playersIds[0]].emit('pong:name', payload);
+			this.clients[playersIds[0]].emit('pong:name', payload.name);
 		}
 	}
 

containers/react/.env

@@ -1,6 +1,5 @@
-
+REACT_APP_BASE_URL=localhost:8080
-REACT_APP_BASE_URL=paul-f5Ar4s4:8080
+REACT_APP_API_SECRET=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
-REACT_APP_SOCKET_URL=paul-f5Ar4s4
+REACT_APP_CLIENT_UID=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41
-REACT_APP_API_SECRET=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
+# REACT_APP_BASE_URL=92.143.191.152
-REACT_APP_CLIENT_UID=u-s4t2ud-2bd3c5d4f41e776f2e3d5d699d2a8421f6d0c0468ec882516d9ca89b0c211789
+# REACT_APP_BASE_URL=192.168.1.19
-REACT_APP_INTRA_URL="https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-2bd3c5d4f41e776f2e3d5d699d2a8421f6d0c0468ec882516d9ca89b0c211789&redirect_uri=http%3A%2F%2Fpaul-f5Ar4s4%3A8080%2Fapi%2Fauth%2Flogin&response_type=code"

containers/react/interfaces.tsx

@@ -16,8 +16,6 @@ export interface User {
 	partyInvite: Record<string, string>[];
 	friends: string[];
 	blocked: string[];
-	sessionNumber: number;
-	gameSession : number;
   }
 
 export interface Conv {

containers/react/package.json

@@ -22,7 +22,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "HOST=0.0.0.0 PORT=8081 react-scripts start",
+    "start": "HOST=0.0.0.0 PORT=8001 react-scripts start",
     "start:dev": "npm run start --watch",
     "build": "react-scripts build",
     "test": "react-scripts test",

containers/react/public/index.html

@@ -2,10 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <link rel="shortcut icon" type="image/jpeg" href="/favicon.jpeg"/>
+    <meta
-
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -20,8 +24,10 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <title>React App</title>
   </head>
-  <body >
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root" style=" height: 100%;"></div>
     <!--
       This HTML file is a template.

containers/react/src/DataBase/DataRank.js

@@ -0,0 +1,58 @@
+export const Rank = [
+	{
+		rank: '1',
+		name: 'jean',
+	},
+	{
+		rank: '2',
+		name: 'marc',
+	},
+	{
+		rank: '3',
+		name: 'dujardain',
+	},
+	{
+		rank: '4',
+		name: 'mom',
+	},
+	{
+		rank: '5',
+		name: 'fary',
+	},
+	{
+		rank: '6',
+		name: 'aba',
+	},
+	{
+		rank: '7',
+		name: 'preach',
+	},
+	{
+		rank: '1',
+		name: 'jean',
+	},
+	{
+		rank: '2',
+		name: 'marc',
+	},
+	{
+		rank: '3',
+		name: 'dujardain',
+	},
+	{
+		rank: '4',
+		name: 'mom',
+	},
+	{
+		rank: '5',
+		name: 'fary',
+	},
+	{
+		rank: '6',
+		name: 'aba',
+	},
+	{
+		rank: '7',
+		name: 'preach',
+	},
+]

containers/react/src/DataBase/DataUserProfile.js

@@ -0,0 +1,8 @@
+import DefaultPic from '../assets/profile.jpg';
+
+export const UserProfile = {
+		Pic: DefaultPic,
+		UserName: 'Dipper Ratman',
+	}
+
+// export default UserProfile

containers/react/src/DataBase/DummyDBWinLoss.js

@@ -0,0 +1,37 @@
+export const DBWinLoss = [
+	{
+		title: 'Victory',
+		score: '10 - 6',
+		opponent: 'chef bandit'
+	},
+	{
+		title: 'Defeat',
+		score: '9 - 10',
+		opponent: 'ex tueur'
+	},
+	{
+		title: 'Victory',
+		score: '10 - 0',
+		opponent: 'tueur'
+	},
+	{
+		title: 'Victory',
+		score: '10 - 9',
+		opponent: 'boulanger'
+	},
+	{
+		title: 'Defeat',
+		score: '3 - 10',
+		opponent: 'charcutier'
+	},
+	{
+		title: 'Deafet',
+		score: '9 - 10',
+		opponent: 'preach'
+	},
+	{
+		title: 'Victory',
+		score: '10 - 9',
+		opponent: 'aba'
+	},
+]

containers/react/src/components/Alert/GreenAlert.tsx

@@ -4,28 +4,40 @@ import { AiOutlineCheckCircle } from "react-icons/ai";
 import '../../styles/Messages.css'
 import React from "react";
 
+
+const dropIn = {
+    hidden: {
+		y: "-100vh",
+	},
+	visible: {
+		y: "0",
+	},
+	exit: {
+		y: "-100vh",
+	},
+};
+
 interface AlertProps {
-    handleClose: Function,
+	handleClose: Function,
-    text: string
+	text: string
-}
+  }
 
-function GreenAlert({ handleClose, text }: AlertProps) {
+function GreenAlert ({handleClose, text}: AlertProps){
-    { setTimeout(handleClose, 1500) }
+        
-    return (
+        return(
-
+            <Backdrop onClick={handleClose}>
-        <Backdrop onClick={handleClose}>
+        <motion.div
-            <motion.div
                 onClick={(e) => e.stopPropagation()}
                 className="greenAlert"
+                // variant={dropIn}
                 initial="hidden"
                 animate="visible"
                 exit="exit"
             >
-                <AiOutlineCheckCircle />
+                <AiOutlineCheckCircle/>
-                <div className="text_alert">
+               <p>{text}</p>
-                    <h5>{text}</h5>
-                </div>
             </motion.div>
+               {setTimeout(handleClose, 1500)}
         </Backdrop>
     )
 }

containers/react/src/components/Alert/RedAlert.tsx

@@ -4,27 +4,39 @@ import { BiErrorCircle } from "react-icons/bi";
 import '../../styles/Messages.css'
 import React from "react";
 
+
+const dropIn = {
+    hidden: {
+		y: "-100vh",
+	},
+	visible: {
+		y: "0",
+	},
+	exit: {
+		y: "-100vh",
+	},
+};
+
 interface AlertProps {
 	handleClose: Function,
 	text: string
   }
 
 function RedAlert ({handleClose, text}: AlertProps) {
-    {setTimeout(handleClose, 1500)}
     return(
         <Backdrop onClick={handleClose}>
         <motion.div
                 onClick={(e) => e.stopPropagation()}
                 className="redAlert"
+                // variant={dropIn}
                 initial="hidden"
                 animate="visible"
                 exit="exit"
-                >
+            >
             <BiErrorCircle/>
-            <div className="text_alert">
+            <p>{text}</p>
-                <h5>{text}</h5>
-            </div>
             </motion.div>
+            {setTimeout(handleClose, 1500)}
         </Backdrop>
     )
 }

containers/react/src/components/Alert/YellowAlert.tsx

@@ -6,43 +6,54 @@ import React from "react";
 import { MdQrCodeScanner } from "react-icons/md";
 import { GiCrownedSkull, GiWingedSword } from "react-icons/gi";
 
-interface AlertProps {
+const dropIn = {
-    handleClose: Function,
+    hidden: {
-    text: string,
+		y: "-100vh",
-    icon: number
+	},
-}
+	visible: {
+		y: "0",
+	},
+	exit: {
+		y: "-100vh",
+	},
+};
 
-function YellowAlert({ handleClose, text, icon }: AlertProps) {
+interface AlertProps {
-    { setTimeout(handleClose, 3000) }
+	handleClose: Function,
-    return (
+	text: string,
+    icon: number
+  }
+
+function YellowAlert ({handleClose, text, icon}: AlertProps) {
+    return(
         <Backdrop onClick={handleClose}>
-            <motion.div
+        <motion.div
                 onClick={(e) => e.stopPropagation()}
                 className="yellowAlert"
+                // variant={dropIn}
                 initial="hidden"
                 animate="visible"
                 exit="exit"
             >
 
-                {icon === 0 ? (
+            {icon === 0 ? (
-                    <GrTrophy />
+                <GrTrophy/>
-                ) : ("")}
+            ):("")}
-                {icon === 1 ? (
+            {icon === 1 ? (
-                    <MdQrCodeScanner />
+                <MdQrCodeScanner/>
-                ) : ("")}
+            ):("")}
 
-                {icon === 2 ? (
+            {icon === 2 ? (
-                    <GiCrownedSkull />
+                <GiCrownedSkull/>
-                ) : ("")}
+            ):("")}
+            
+            {icon === 3 ? (
+                <GiWingedSword/>
+            ):("")}
 
-                {icon === 3 ? (
+            <h5>{text}</h5>
-                    <GiWingedSword />
-                ) : ("")}
-
-                <div className="text_alert">
-                    <h5>{text}</h5>
-                </div>
             </motion.div>
+            {setTimeout(handleClose, 3000)}
         </Backdrop>
     )
 }

containers/react/src/components/AnimatedRoute.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import {Routes, Route} from 'react-router-dom';
+import Home from "../pages/Home.jsx";
+import PlayButton from "./Game/PlayButton.tsx";
+import Field from "../pages/Field";
+import Login42 from "../pages/Login42.js";
+import Messages from "../pages/Messages.jsx";
+import { useLocation } from "react-router-dom";
+import {AnimatePresence} from "framer-motion";
+
+function AnimatedRoute () {
+	const location = useLocation();
+	return (
+		<AnimatePresence>
+			<Routes location={location} key={location.pathname}>
+				<Route path="/" element={<Home/>}/>
+				<Route path="/game" element={<PlayButton />}/>
+				<Route path="/pong/play" element={<Field />}/>
+				<Route path="/login42" element={<Login42 />}/>
+				<Route path="/messages" element={<Messages />}/>
+			</Routes>
+		</AnimatePresence>
+	)
+}
+
+export default AnimatedRoute

containers/react/src/components/App.tsx

@@ -1,15 +1,16 @@
-import React, { useEffect } from "react";
+import React from "react";
-import { Routes, Route, Navigate } from 'react-router-dom';
+import {Routes, Route, Navigate} from 'react-router-dom';
-import HomeLogin from "../pages/LoginButton.tsx";
+import HomeLogin from "../pages/Home.js";
 
 import Home from "../pages/Home.tsx";
 
 import PlayButton from "./Game/PlayButton.tsx";
 import Field from "../pages/Field.tsx";
+import Login42 from "../pages/Login42.tsx";
 import Messages from "../pages/Messages.tsx";
 import QrCode from '../pages/QrCode.tsx'
 import { useLocation } from "react-router-dom";
-import { AnimatePresence } from "framer-motion";
+import {AnimatePresence} from "framer-motion";
 
 import SuccessToken from '../script/tokenSuccess.tsx'
 
@@ -18,63 +19,53 @@ import DoubleAuth from "../pages/2fa.tsx";
 import Game from "../pages/Game.tsx";
 import Social from "./Social/Social.tsx";
 import Logout from "./Profile/Logout.tsx";
-import api from "../script/axiosApi.tsx"
-
-
-function AnimatedRoute() {
-	useEffect(() => {	
-		const handleLoad = async () => {
-			if (!localStorage.getItem('token'))
-				return;
-			try {
-				await api.post("/addSession");
-			} catch (err) {
-				console.log(err);
-			}
-		};
-
-		handleLoad();
-
-		window.addEventListener("beforeunload", async (event) => {
-			if (!localStorage.getItem('token'))
-				return;
-			await api.post("/quit");
-		});
-		return () => {};
-	}, []);
 
+function AnimatedRoute () {
+	// const location = useLocation();
 	const location = useLocation();
-	if (!localStorage.getItem('token')) {
+	if (!localStorage.getItem('token'))
+	{
 		return (
 			<AnimatePresence>
-				<Routes location={location} key={location.pathname}>
+			<Routes location={location} key={location.pathname}>
-					<Route path="/" element={<HomeLogin />} />
+				<Route path="/" element={<HomeLogin/>}/>
-					<Route path="/token" element={<SuccessToken />} />
+				<Route path="/token" element={<SuccessToken />}/>
-				</Routes>
+
-			</AnimatePresence>
+				{/* <Route path="/404" element={<HomeLogin/>} /> */}
+          		{/* <Route path="*" element={<Navigate to="/404" />} /> */}
+			</Routes>
+		</AnimatePresence>
 		)
 	}
-
+	
 	return (
 		<AnimatePresence>
 			<Routes location={location} key={location.pathname}>
-				<Route path="/" element={<Home />} />
+
-				<Route path="/profile" element={<Home />} />
+				{/* <Route path="/login" element={<HomeLogin/>}/> */}
-				<Route path="/profile/:username" element={<Home />} />
+				<Route path="/" element={<Home/>}/>
-				<Route path="/qr" element={<QrCode />} />
+				<Route path="/profile" element={<Home/>}/>
-				<Route path="/2fa" element={<DoubleAuth />} />
+				<Route path="/profile/:username" element={<Home/>}/>
-				<Route path="/Social" element={<Social />} />
+				<Route path="/qr" element={<QrCode/>}/>
-				<Route path="/token" element={<SuccessToken />} />
+				
-				<Route path="/game" element={<PlayButton />} />
+				<Route path="/2fa" element={<DoubleAuth/>}/>
-				<Route path="/pong" element={<Game />} />
+				<Route path="/Social" element={<Social/>}/>
-				<Route path="/pong/play" element={<Field />} />
+
-				<Route path="/logout" element={<Logout />} />
+				<Route path="/token" element={<SuccessToken />}/>
-				<Route path="/messages" element={<Messages />} />
+				<Route path="/game" element={<PlayButton />}/>
+				<Route path="/pong" element={<Game />}/>
+				<Route path="/pong/play" element={<Field />}/>
+				{/* <Route path="/profile" element={<PlayButton />}/> */}
+
+				<Route path="/login42" element={<Login42 />}/>
+				<Route path="/logout" element={<Logout />}/>
+				<Route path="/messages" element={<Messages />}/>
+
 				<Route path="/404" element={<PageNotFound />} />
-				<Route path="*" element={<Navigate to="/404" />} />
+          		<Route path="*" element={<Navigate to="/404" />} />
 			</Routes>
 		</AnimatePresence>
 	)
 }
 
-export default AnimatedRoute
+export default AnimatedRoute

containers/react/src/components/Footer.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+// import './Header.scss';
+
+function Footer() {
+  return (
+    <footer className="footer">
+      <p>&copy; 2023 Paris France</p>
+    </footer>
+  );
+}
+
+export default Footer;

containers/react/src/components/Game/PlayButton.tsx

@@ -1,37 +1,51 @@
 import React from 'react';
 import '../../styles/field.css';
+// import { useHistory } from 'react-router-dom';
 import { useNavigate } from "react-router-dom";
 
 function PlayButton() {
+
 	const history = useNavigate();
 
+	// const handleButtonClick = () => {
+	// 	let path = `play`; 
+	// 	history(path);
+	// };
 	const handleButtonClick = () => {
 		let path = `play?`;
-
+		
 		const superpowerCheckbox = document.querySelector<HTMLInputElement>('input[value="superpower"]');
 		if (superpowerCheckbox && superpowerCheckbox.checked) {
 		  path += 'superpower=true&';
 		}
-
+	  
+		const obstacleCheckbox = document.querySelector<HTMLInputElement>('input[value="obstacle"]');
+		if (obstacleCheckbox && obstacleCheckbox.checked) {
+		  path += 'obstacle=true&';
+		}
+	  
 		const speedCheckbox = document.querySelector<HTMLInputElement>('input[value="speed"]');
 		if (speedCheckbox && speedCheckbox.checked) {
 		  path += 'speed=true&';
 		}
-
+	  
+		// Remove the trailing '&' character
 		path = path.slice(0, -1);
+		console.log(path)
 		history(path);
 	  };
 
 	return (
 		<div className="notClicked" id="canvas_container">
 			<button onClick={handleButtonClick} className="playButton">Play</button>
-			{}
+			{/* !buttonClicked && <button onClick={handleButtonClick}>Draw on Canvas</button> */}
 			<div className='checkbox'>
-				<p><input className="inside_checkbox" type="checkbox" value="superpower"/> Super Power <br/> ( w = wall power ) </p>
+				<p><input type="checkbox" value="superpower"/> Super Power </p>
-				<p><input className="inside_checkbox" type="checkbox" value="speed"/> Faster and Faster </p>
+				<p><input type="checkbox" value="obstacle"/> Obstacle </p>
+				<p><input type="checkbox" value="speed"/> Faster and Faster </p>
 			</div>
 		</div>
 		);
 }
 
-export default PlayButton;
+export default PlayButton;

containers/react/src/components/Game/Rank.tsx

@@ -3,17 +3,20 @@
 /*                                                        :::      ::::::::   */
 /*   Rank.tsx                                           :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: sadjigui <sadjigui@student.42.fr>          +#+  +:+       +#+        */
+/*   By: apommier <apommier@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/06/09 08:49:24 by apommier          #+#    #+#             */
-/*   Updated: 2023/06/28 17:55:55 by sadjigui         ###   ########.fr       */
+/*   Updated: 2023/06/20 13:06:35 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
-import React, { useState, useEffect } from "react";
+// import React from "react"
+import React, { useState, useEffect, useRef } from "react";
+// import {Rank} from '../../DataBase/DataRank.js'
 import DefaultPicture from '../../assets/profile.jpg'
 import api from '../../script/axiosApi.tsx';
-import {User} from "../../../interfaces.tsx"
+import {Matchlog, User} from "../../../interfaces.tsx"
+// import { Match } from "@testing-library/react";
 
 interface RankProps {
 	user: User
@@ -27,7 +30,10 @@ function Rank({user, index}: RankProps){
 	useEffect(() => {
 		const fetchProfilePicture = async () => {
 			try {
+			//   const user = await api.get("/profile");
 				const pic = await api.post("/getPicture", {username: user.username})
+				// console.log(`user naem profile pic222= ${currentUser.username}`)
+				// console.log(` profile pic222= ${pic.data}`)
 				setProfilePicture(pic.data);
 			} catch (error) {
 				console.error('Error fetching profile picture:', error);
@@ -35,11 +41,13 @@ function Rank({user, index}: RankProps){
 		  };
 		
 		  fetchProfilePicture();
-	}, [])
+	})
 	
+	// console.log(index);
 	return (
 		<div className='rank_elements'>
 			<div >
+				{/* <p>{(index + 1).toString()}</p> */}
 				<p>{(index + 1)}</p> 
 				<h4>{user.rank}: {user.nickname} 
 					{profilePicture ? (
@@ -47,8 +55,10 @@ function Rank({user, index}: RankProps){
 					) : (
 						<img className="profilePic" src={DefaultPicture} alt="Default Profile Picture" />
 					)}
+					{/* <img className="profilePic" src={defaultpic}/> */}
 				</h4>
 			</div>
+			{/* <h4 className='content'>{user.opponent}</h4> */}
 		</div>
 	)
 }

containers/react/src/components/Game/Ranking.tsx

@@ -1,5 +1,7 @@
-import React, { useState, useEffect } from "react";
+// import React from "react"
+import React, { useState, useEffect, useRef } from "react";
 import Rank from './Rank.tsx'
+import defaultpic from '../../assets/profile.jpg'
 import api from '../../script/axiosApi.tsx';
 import {User} from "../../../interfaces.tsx"
 
@@ -12,22 +14,32 @@ function Ranking(){
 
 		const getRanking = async ()=>{
 			try{
+				// const tmpFriends = await api.get("/friends")
 				const Ranking = await api.get("/ranking")
 				setRanking(Ranking.data);
-				setIsLoading(false);
+				console.log(`ranking= ${Ranking.data}`)
+				// setFriends(tmpFriends.data);
+				// return tmpUser;
+				// console.log(`user= ${tmpUser.data.username}`);
+				setIsLoading(false)
+
 			}
 			catch(err){
 				console.log(err);
 			}
 		};
 		getRanking();
-	}, []);
+
+	}, [])
+
+	console.log(`ranking after= ${ranking}`)
 
 	return (
 		<div>
 			{isLoading ? (
         		<></>
       		) : (
+				//   <h1 className='title'>Ranking</h1>
             <div className='scroll'>
                 {ranking.map((user, index) => (
 					<Rank user={user} index={index} key={user.username}/>

containers/react/src/components/Header.tsx

@@ -4,13 +4,23 @@ import {Link} from 'react-router-dom';
 import DefaultPicture from '../assets/profile.jpg'
 import { motion, AnimatePresence } from 'framer-motion'
 import Modal from './Sidebar/Modal.tsx';
+import YellowAlert from './Alert/YellowAlert.tsx';
 import '../styles/Header.css';
+
 import api from '../script/axiosApi.tsx';
 
+import { MdQrCodeScanner } from 'react-icons/md';
+import { GiWingedSword, GiCrownedSkull } from 'react-icons/gi';
+
 function Header() {
+	// const [sidebar, setSidebar] = useState(false);
+	// const showSidebar = () => setSidebar(!sidebar);
 	const [modalOpen, setModalOpen] = useState(false);
 	const close = () => setModalOpen(false);
-	const open = () => setModalOpen(true);	
+	const open = () => setModalOpen(true);
+
+	const [success, setSuccess] = useState([]);
+	
 	const [profilePicture, setProfilePicture] = useState('');
 
 	useEffect(() => {
@@ -19,6 +29,9 @@ function Header() {
 			const user = await api.get("/profile");
 			const pic = await api.post("/getPicture", {username: user.data.username})
         	setProfilePicture(pic.data);
+			// console.log("test ===", user.data)
+			setSuccess(user.data);
+			// console.log(`profile pic222= ${pic.data}`)
 		  } catch (error) {
 			console.error('Error fetching profile picture:', error);
 		  }
@@ -41,7 +54,9 @@ function Header() {
 			<div>
 				
  				{profilePicture ? (
+ 				    // <img className='Header-pic' src={profilePicture} alt="Profile Picture" />
 					 <img className='Header-pic' src={`data:image/jpeg;base64,${profilePicture}`} />
+					// <img className='Header-pic' src={`data:image/jpeg;base64,${profilePicture.data}`} alt="Profile Picture" />
  				) : (
  				    <img className='Header-pic' src={DefaultPicture} alt="Default Profile Picture" />
  				)}

containers/react/src/components/Messages/Chats.tsx

@@ -2,12 +2,14 @@ import React, { useState, useEffect, useRef } from "react";
 import io, { Socket } from 'socket.io-client';
 import '../../styles/Messages.css'
 import styled from "styled-components";
+import DefaultPic from '../../assets/profile.jpg'
 import api from '../../script/axiosApi.tsx';
 import { motion , AnimatePresence} from "framer-motion";
 import Modal from "./Modal.tsx";
 import GameModal from "./GameModal.tsx";
 
 import Message from "./Message.tsx"
+// import Input from "./Input";
 
 //react icons
 import { TbSend } from 'react-icons/tb';
@@ -15,15 +17,16 @@ import { ImBlocked } from 'react-icons/im';
 import { MdOutlineGroupAdd } from 'react-icons/md';
 import { GrAdd } from 'react-icons/gr';
 import { RiListSettingsLine } from 'react-icons/ri'
-import { HiChatBubbleLeft } from 'react-icons/hi2'
 
+// import { Rank } from "../../DataBase/DataRank";
 import GreenAlert from "../Alert/GreenAlert.tsx";
 import RedAlert from "../Alert/RedAlert.tsx";
+import YellowAlert from "../Alert/YellowAlert";
 import ModalSetting from "./ModalSetting.tsx";
 import PartyInvite from "./PartyInvite.tsx";
 
+// import {User, Conv, Message} from "../../../interfaces.tsx"
 import {User, Conv} from "../../../interfaces.tsx"
-import { IoLogoOctocat } from "react-icons/io5";
 
 const TouchDiv = styled.div`
 	margin-left: 10px;
@@ -32,7 +35,7 @@ const TouchDiv = styled.div`
 	margin-top: 21px;
 	cursor: pointer;
 	justify-content: space-around;
-
+	
 	&:hover {
 		color: #F4F3EF;
 	}
@@ -54,9 +57,20 @@ const UserChat = styled.div `
 	}
 `
 
+// const SideSpan = styled.span`
+// 	font-size: 18px;
+// 	font-weight: 500;
+// `
+
+const SideP = styled.p`
+	font-size: 14px;
+	color: lightgray;
+	margin-left: 15px;
+`
+
 //========================================================================================================
 //========================================================================================================
-//                                              Logical part
+//                                              Logical part			                                  
 //========================================================================================================
 //========================================================================================================
 
@@ -74,14 +88,18 @@ function Chats(){
 	const [conversations, setConversation] = useState([]);
 	const [partyInvite, setPartyInvite] = useState([]);
 	const [user, setUser] = useState<User>();
-	const [currentChat, setCurrentChat] = useState<Conv>(); 
+	const [currentChat, setCurrentChat] = useState<Conv>(); // false is good?
-	const [isAdmin, setIsAdmin] = useState<boolean>(false); 
+	const [isAdmin, setIsAdmin] = useState<boolean>(false); // false is good?
+	// const [currentChat, setCurrentChat] = useState(false); // false is good?
 	const [messages, setMessage] = useState<MessageProps[]>([]);
 	const [newMessages, setNewMessage] = useState("");
 	const [incomingMessage, setIncomingMessage] = useState<MessageProps>();
 
+	// let socket: Socket;
 	const socket = useRef<Socket | null>(null);
-
+	// const socket = Socket<DefaultEventsMap, DefaultEventsMap> | null
+	// socket = useRef( useRef<SocketIOClient.Socket | null>(null));
+	
 
 	useEffect(()=> {
 
@@ -92,57 +110,84 @@ function Chats(){
 				const tmpUser = await api.get("/profile")
 				const tmpUsers = await api.get("/users");
 
+				console.log(convs);
+
+				// console.log("invite data use effect= ", tmpInvite.data);
 				setPartyInvite(tmpInvite.data);
 				setUser(tmpUser.data);
 				setConversation(convs.data);
 				setUsers(tmpUsers.data);
 
-				socket.current = io('http://' + process.env.REACT_APP_SOCKET_URL + ':4001', { transports: ['polling'] });
+				// console.log(`connection....`);
+				socket.current = io('http://' + process.env.REACT_APP_BASE_URL + ':4001', { transports: ['polling'] });
+				// console.log(`connection done`);
 				socket.current.emit('connection', {username: tmpUser.data.username})
-				socket.current.on('message', (data) => {
+				socket.current.on('message', (data) => { //data should be a message ?)
 					setIncomingMessage(data);
 				});
 
 				socket.current.on('ban', (data) => {
+					// setIncomingMessage(data);
+					console.log("banned hehe");
 					window.location.reload()
 				});
+
+				socket.current.on('mute', (data) => {
+					console.log("muted hehe");
+					//set mute var to true and do nothing
+				});
+				
 				setIsLoading(false)
 
 			}
 			catch(err){
+				console.log("ERRORRRRR")
 				console.log(err);
 			}
 		};
 		getConv();
 
 		return () => {
+			console.log("Cleanup");
 			if (socket.current)
 				socket.current.disconnect();
+		  //   cleanup(); // Call the cleanup function to stop the ongoing process or perform necessary cleanup tasks
+				// cleanup();
 		  };
 
 	}, [])
 
 	useEffect(()=> {
-
+		
 		const updateChat = async ()=> {
+			// if (currentChat)
+			// 	console.log(currentChat.id)
 			if (currentChat)
 			{
 
 				try {
 					const res = await api.post("/isAdmin", {convId: currentChat.id})
+					console.log("isadmin= ", res.data)
 					setIsAdmin(res.data);
 				} catch (err) {
 					console.log(err);
 				}
 			}
+			// console.log(`result1 = ${currentChat.id !== incomingMessage.convId}`)
 			if (currentChat && incomingMessage && currentChat.id === incomingMessage.convId)
-				setMessage((prev) => [...prev, incomingMessage]);
+			{
+				console.log("incoming meaasge=",incomingMessage)
+				// if (user && !user.blocked.find(incomingMessage.sender))
+					// setMessage((prev) => [...prev, incomingMessage, key: incomingMessage.id]);
+					// setMessage((prev) => [...prev, { ...incomingMessage, key: incomingMessage.id }]);
+					setMessage((prev) => [...prev, incomingMessage]);
+			}
 		}
 		updateChat();
 
 	}, [incomingMessage, currentChat])
 
-	useEffect(()=> {
+	useEffect(()=> { 
 		const getMessage = async ()=>
 		{
 			if (!currentChat)
@@ -151,6 +196,7 @@ function Chats(){
 
 			try {
 				const res = await api.post('/getMessage', data);
+				console.log("message of conv=", res.data)
 				setMessage(res.data);
 			} catch(err) {
 
@@ -159,8 +205,11 @@ function Chats(){
 		getMessage();
 	}, [currentChat]);
 
-	const handleSubmit = async (e: { key?: any; preventDefault: any; })=>{
+	const handleSubmit = async (e: { preventDefault: () => void; })=>{
 		e.preventDefault();
+		// console.log(`e= ${e.key}`)
+		// console.log(`name= ${user.username}`)
+		// let message;
 		if (!user || !currentChat)
 			return ;
 		const message = {
@@ -172,8 +221,13 @@ function Chats(){
 		};
 		try{
 			const allowed = await api.post('/allowed', {convId: currentChat.id});
+			console.log("convid:", currentChat.id);
 			if (!allowed.data)
+			{
+				console.log("muted or banned");
 				return ;
+			}
+			console.log("not muted or banned");
 			const res = await api.post('/message', message);
 			const convMember = await api.post('/member', message);
 			message.members = convMember.data.members;
@@ -182,59 +236,97 @@ function Chats(){
 			setNewMessage("");
 			if (socket.current)
 				socket.current.emit('sendMessage', message);
-		}
+		} 
 		catch(err){
 			 console.log(err)
 		}
 	}
 
-	const handleKeyPress = async (e: { key?: any; preventDefault: () => void; })=> {
+	const handleKeyPress = async (e: { key: string; })=> {
+		// console.log(`e in press= ${e.key}`)
 		if (e.key !== "Enter")
 			return ;
-		handleSubmit(e);
+		// console.log(`name= ${user.username}`)
+		if (!user || !currentChat)
+			return ;
+		const message = {
+			sender: user.username,
+			text: newMessages,
+			convId: currentChat.id,
+			members: null,
+			id: null,
+		};
+		try{
+			const res = await api.post('/message', message);
+			const convMember = await api.post('/member', message);
+			message.members = convMember.data.members;
+			message.id = res.data.id
+			setMessage([...messages, res.data]);
+			setNewMessage("");
+			if (socket.current)
+				socket.current.emit('sendMessage', message);
+		} 
+		catch(err){
+			 console.log(err)
+		}
 	}
-	
+
-	
+
 	
 	const [friend, setFriend] = useState("");
+	// const [modalOpen, setModalOpen] = useState(false);
 	const [addFriend, setAddFriend] = useState(false);
 	const [block, setBlock] = useState(false);
-	
+
 	const [showAddFriendAlert, setShowAddFriendAlert] = useState(false);
 	const [showBlockAlert, setShowBlockAlert] = useState(false);
-	
+
 	const [setting, setSetting] = useState(false);
-	
+
 	const [newGameModalOpen, setNewGameModalOpen] = useState(false);
 	const [newConversationModalOpen, setNewConversationModalOpen] = useState(false);
-	
+
     const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: ''}]);
 	const [users, setUsers] = useState<User[]>([]);
-	
-	const [unblock, setUnblock] = useState(false);
-	const closeUnblock = () => setUnblock(false);
 
+  
 	const openNewGameModal = () => {
 	  setNewGameModalOpen(true);
 	};
-
+  
 	const closeNewGameModal = () => {
 	  setNewGameModalOpen(false);
 	};
-
+  
 	const openNewConversationModal = () => {
 	  setNewConversationModalOpen(true);
 	};
-
+  
 	const closeNewConversationModal = () => {
 	  setNewConversationModalOpen(false);
 	};
 
+	// const close = () => setModalOpen(false);
+	// const open = () => setModalOpen(true);
+	// const closeAddFriend = () => setAddFriend(false);
+	// const closeBlock = () => setBlock(false);
 	const closeSetting = () => setSetting(false);
 
+
+	// const closeAddFriend = () => setAddFriend(false);
+	// const closeBlock = () => setBlock(false);
+
+
+	const handleFriend = (event: { target: { value: React.SetStateAction<string>; }; }) => {
+		setFriend(event.target.value);
+	  };
+	
 	  const handleAddFriend = async () => {
 		try{
 			const res = await api.post("/invite", {username: friend})
+			// if (res.data === 1)
+			// console.log("res in friend= ", res)
+			console.log("res in friend= ", res.data)
 			if(res.data === 1)
 			{
 			  setAddFriend(true);
@@ -248,18 +340,15 @@ function Chats(){
 			console.log(err)
 		}
 	  };
-
+	
-
 	  const handleBlockFriend = async () => {
 		try{
 			const res = await api.post("/block", {username: friend})
 			// if(1)
-			if (res.data === 2)
-				setUnblock(true);
 			if (res.data === 1)
 			{
 				setBlock(true);
-				setAddFriend(false);
+				setAddFriend(false); // Reset addFriend state
 				setShowAddFriendAlert(false);
 			}
 			else
@@ -269,20 +358,20 @@ function Chats(){
 			console.log(err)
 		}
 	  };
-
+	
 	  const closeAddFriend = () => {
 		setAddFriend(false);
 		setShowAddFriendAlert(false);
 	  };
-
+	
 	  const closeBlock = () => {
 		setBlock(false);
 		setShowBlockAlert(false);
 	  };
 
 	  const handleOptionChange = (selectId: number, selectedOption: string) => {
-		setFriend(selectedOption);
+		console.log("selected Option=", selectedOption)
-        setSelectTag((prevTags) =>
+        setSelectTag((prevTags) => 
             prevTags.map((tag) =>
                 tag.id === selectId ? { ...tag, selectedOption } : tag
             )
@@ -291,23 +380,67 @@ function Chats(){
 
 //========================================================================================================
 //========================================================================================================
-//                                              HTML
+//                                              HTML			                                  
 //========================================================================================================
 //========================================================================================================
 
 
 	return (
 		<div className="chat">
-
+		
 			<div className='navbar'>
-				<IoLogoOctocat className="catchat"/>
+				<img src={DefaultPic} alt="profile" className="pic"/>
 				<span>
 					{isLoading || !user ? (
         				<h4>Loading...</h4>
       				) : (
-        				<h2>Chat</h2>
+        				<h4>{user.nickname}</h4>
       				)}
 	  			</span>
+				{/* <div className="end">
+					<input className="lookForFriends" type="text" value={friend} onChange={handleFriend}/>
+					<TouchDiv>
+						<motion.div
+						onClick={() => (addFriend ? setAddFriend(false) : setAddFriend(true))}>
+							<MdOutlineGroupAdd/>
+						</motion.div>
+						<AnimatePresence
+							initial={false}
+							onExitComplete={() => null}
+						>
+							{addFriend && <GreenAlert handleClose={closeAddFriend} text={friend + " was successfuly added"}/>}
+						</AnimatePresence>
+					</TouchDiv>
+					<TouchDiv>
+						<motion.div 
+						onClick={() => (block ? setBlock(false) : setBlock(true))}
+						>
+						<ImBlocked/>
+						<AnimatePresence
+							initial={false}
+							onExitComplete={() => null}
+							>
+							{block && <RedAlert handleClose={closeBlock} text={friend + " was successfuly blocked"}/>}
+						</AnimatePresence>
+						</motion.div>
+					</TouchDiv>
+					{currentChat ? (
+
+						<TouchDiv>
+						<motion.div 
+						onClick={() => (setting ? setSetting(false) : setSetting(true))}
+						>
+						<RiListSettingsLine/>
+						<AnimatePresence
+							initial={false}
+							onExitComplete={() => null}
+							>
+							{setting && <ModalSetting handleClose={closeSetting} convId={currentChat.id}/>}
+						</AnimatePresence>
+						</motion.div>
+					</TouchDiv>
+					):("")}
+				</div> */}
 
 				<div className="end">
 					{selectTags.map((selectTag) => (
@@ -318,11 +451,11 @@ function Chats(){
 				      onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}
 				    >
 				      <option value="">{
-					selectTag.selectedOption ? selectTag.selectedOption : "Select a user"
+					selectTag.selectedOption ? selectTag.selectedOption : "Select an option"
 					}</option>
 				      {users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.username)).map((item, index) => (
 				        <option key={index} value={item.username}>
-				          {item.nickname}
+				          {item.username}
 				        </option>
 				      ))}
 				    </select>
@@ -330,7 +463,7 @@ function Chats(){
 				))}
       	<TouchDiv>
         <motion.div onClick={handleAddFriend}>
-          <MdOutlineGroupAdd className="catchat"/>
+          <MdOutlineGroupAdd />
         </motion.div>
         <AnimatePresence initial={false} onExitComplete={() => null}>
 			{showAddFriendAlert && addFriend && (
@@ -343,7 +476,7 @@ function Chats(){
       </TouchDiv>
       <TouchDiv>
         <motion.div onClick={handleBlockFriend}>
-          <ImBlocked  className="block"/>
+          <ImBlocked />
         </motion.div>
         <AnimatePresence initial={false} onExitComplete={() => null}>
           {showBlockAlert && block && (
@@ -352,17 +485,14 @@ function Chats(){
           {showBlockAlert && !block && (
             <RedAlert handleClose={closeBlock} text={friend + ' was not found'} />
           )}
-		  {unblock ? (
-            <GreenAlert handleClose={closeUnblock} text={friend + ' was unblocked'} />
-		  ):("")}
         </AnimatePresence>
       </TouchDiv>
 	  {currentChat && isAdmin ? (
 		<TouchDiv>
-		<motion.div
+		<motion.div 
 		onClick={() => (setting ? setSetting(false) : setSetting(true))}
 		>
-		<RiListSettingsLine className="block"/>
+		<RiListSettingsLine/>
 		<AnimatePresence
 			initial={false}
 			onExitComplete={() => null}
@@ -397,6 +527,13 @@ function Chats(){
       				  )}
       				</UserChat>
 
+
+					{/* {partyInvite.map((c) => {
+						return (
+
+						)})
+					} */}
+
 					{partyInvite.map( i =>(
 						<PartyInvite currentInvite={i}/>
 					))}
@@ -406,13 +543,14 @@ function Chats(){
 						<div key={index}
 							onClick={() => setCurrentChat(c)}>
 							<UserChat>
-							<HiChatBubbleLeft className="catchat"/>
+							<img className="pic-user" src={DefaultPic} alt="User" />
 							<div className="infoSideBar">
-								<h2>{c.name}</h2>
+								<span>{c.name}</span>
+								{/* <SideP>Desc?</SideP> */}
 							</div>
 							</UserChat>
 						</div>
-
+				
 						)})}
 				</div>
 
@@ -425,6 +563,7 @@ function Chats(){
 								<Message key={m.id} message= {m} own={m.sender === user.username}/>
 								))}
 						</div>
+						{/* <Input/> */}
 						<div className="input">
 							<input
 								onKeyDown={handleKeyPress}
@@ -432,7 +571,7 @@ function Chats(){
 								placeholder="What do you want to say"
 								onChange={(e) => setNewMessage(e.target.value)}
 								value={newMessages}
-							/>
+								/>
 							<div className="send">
 								<TbSend onClick={handleSubmit}></TbSend>
 							</div>
@@ -446,7 +585,8 @@ function Chats(){
 				)}
 			</div>
 		</div>
-	);
+		// </div>
+	);	
 }
 
-export default Chats
+export default Chats

containers/react/src/components/Messages/GameModal.tsx

@@ -5,20 +5,46 @@ import { useState, useEffect } from "react";
 import api from "../../script/axiosApi.tsx";
 import React from "react";
 import {User} from "../../../interfaces.tsx"
+// import { useNavigate } from "react-router-dom";
+
+const dropIn = {
+  hidden: { y: "-100vh", opacity: 0 },
+  visible: {
+    y: "0",
+    opacity: 1,
+    transition: {
+      duration: 0.3,
+      type: "spring",
+      damping: 100,
+      stiffness: 500,
+    },
+  },
+  exit: { y: "100vh", opacity: 0 },
+};
 
 interface ModalGame {
 	handleClose: Function,
+	// convId: string
 }
 
 const GameModal = ({ handleClose }: ModalGame) => {
   const [users, setUsers] = useState([]);
+//   const [user, setUser] = useState();
   const [selectedUser, setSelectedUser] = useState('');
-  
+//   const [convs, setConvs] = useState([]);
+  const [channel, setChannel] = useState('');
+
+//   const history = useNavigate();
+
   useEffect(() => {
     const fetchData = async () => {
       try {
         const tmpUsers = await api.get("/users");
+		// const tmpUser = await api.get("/profile");
+        // const tmpConvs = await api.get("/convs");
         setUsers(tmpUsers.data);
+	    // setUser(tmpUser.data);
+        // setConvs(tmpConvs.data);
       } catch (err) {
         console.log(err);
       }
@@ -30,8 +56,21 @@ const GameModal = ({ handleClose }: ModalGame) => {
     setSelectedUser(event.target.value);
   };
 
+//   const joinChannel = async () => {
+//     try {
+//       await api.post("/join", { convId: channel });
+//     } catch (err) {
+//       console.log(err);
+//     }
+//   };
+
+//   const handleCheckButtonClick = () => {
+//     // Perform your check action here
+//     console.log("Checking user:", selectedUser);
+//   };
 
   const handleButtonClick = async () => {
+	// let path = `play?`;
 	let path = `http://` + process.env.REACT_APP_BASE_URL + `/pong/play?`;
 	
 
@@ -40,18 +79,32 @@ const GameModal = ({ handleClose }: ModalGame) => {
 	  path += 'superpower=true&';
 	}
   
-
+	const obstacleCheckbox = document.querySelector<HTMLInputElement>('input[value="obstacle"]');
+	if (obstacleCheckbox && obstacleCheckbox.checked) {
+	  path += 'obstacle=true&';
+	}
+  
 	const speedCheckbox = document.querySelector<HTMLInputElement>('input[value="speed"]');
 	if (speedCheckbox && speedCheckbox.checked) {
 	  path += 'speed=true&';
 	}
 
 	if (selectedUser.length > 0)
-		path += 'username=' + selectedUser;
+		path += 'username=' + selectedUser;//important here
   
+	// Remove the trailing '&' character
+	// path = path.slice(0, -1);
+	// console.log(path)
+
+	// await api.post("/partyInvite", {username: selectedUser, gameId})
+
+	// console.log("path= ", path)
+	// history(path, { replace: true });
+	// window.location.replace(path);
 	window.history.pushState({}, '', path);
 	window.location.reload();
 
+	// history(path);
   };
 
   return (
@@ -59,6 +112,7 @@ const GameModal = ({ handleClose }: ModalGame) => {
       <motion.div
         onClick={(e) => e.stopPropagation()}
         className="modal"
+        // variant={dropIn}
         initial="hidden"
         animate="visible"
         exit="exit"
@@ -68,19 +122,28 @@ const GameModal = ({ handleClose }: ModalGame) => {
             <option value="">Select a user</option>
             {users.map((user: User) => (
               <option key={user.id} value={user.username}>
-                {user.nickname}
+                {user.username}
               </option>
             ))}
           </select>
         </div>
 
 		<div className="notClicked" id="canvas_container">
+			{/* <button onClick={handleButtonClick}>Draw on Canvas</button> */}
 			<div className='checkbox'>
 				<p><input type="checkbox" value="superpower"/> Super Power </p>
+				<p><input type="checkbox" value="obstacle"/> Obstacle </p>
 				<p><input type="checkbox" value="speed"/> Faster and Faster </p>
 			</div>
-			<button className="playInvite" onClick={handleButtonClick} >Play</button>
+			<button className="submit" onClick={handleButtonClick} >Play</button>
+          	{/* <button className="submit" onClick={handleClose}>Cancel</button> */}
 		</div>
+
+        {/* <div className="div_submit">
+          <button className="submit" onClick={handleCheckButtonClick}>
+            Invite to play
+          </button>
+        </div> */}
       </motion.div>
     </Backdrop>
   );

containers/react/src/components/Messages/Message.tsx

@@ -6,7 +6,7 @@
 /*   By: apommier <apommier@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/06/01 18:24:46 by apommier          #+#    #+#             */
-/*   Updated: 2023/06/25 23:24:46 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/20 19:05:10 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -14,6 +14,8 @@ import { useEffect, useState, useRef } from "react";
 import api from '../../script/axiosApi.tsx';
 import styled from "styled-components"
 import DefaultPicture from '../../assets/profile.jpg'
+// import { useRef } from "react";
+// import { useEffect } from "react";
 import '../../styles/Messages.css'
 import {User, Conv, Message} from "../../../interfaces.tsx"
 import React from "react";
@@ -21,9 +23,9 @@ import React from "react";
 const MeStyleP = styled.p`
 	background-color: #5843e4;
 	padding 10px 20px;
-	border-radius 10px;
+	border-radius 10px 0px 10px 10px;
 	color: white;
-	margin: 10px;
+	margin-right: 20px;
 `
 
 interface MessageMeProps {
@@ -32,27 +34,31 @@ interface MessageMeProps {
   }
 
 function MessageMe({message, own}: MessageMeProps){
-
+	
 	const [profilePicture, setProfilePicture] = useState('');
 	const [sender, setSender] = useState<User>();
 	const [conv, setConv] = useState<Conv>();
-
+	
 	const [user, setUser] = useState<User>();
 	const scrollRef = useRef<HTMLDivElement>(null);
 
+	// console.log("Message eher")
 
 	useEffect(() => {
 		if (scrollRef.current)
 		{
-			scrollRef.current.scrollIntoView({ behavior: "smooth"});
+			scrollRef.current.scrollIntoView({ behavior: "smooth",})
-		}})
+		}
-	useEffect(() => {
 		const fetchProfilePicture = async () => {
 			try {
+			//   const user = await api.get("/profile");
 				const tmpSender = await api.post("/user", {username: message.sender})
 				const tmpConv = await api.post("/convId", {convId: message.convId})
+				// const tmpSender = await api.post("/user", {username: message.sender})
 				const tmpUser = await api.get("/profile")
 				const pic = await api.post("/getPicture", {username: message.sender})
+				// console.log(`user naem profile pic222= ${currentUser.username}`)
+				// console.log(` profile pic222= ${pic.data}`)
 				setConv(tmpConv.data);
 				setUser(tmpUser.data);
 				setSender(tmpSender.data);
@@ -62,28 +68,36 @@ function MessageMe({message, own}: MessageMeProps){
 			}
 		  };
 		fetchProfilePicture();
-	}, []);
+	}, [])
 
 	const handleButtonClick = () => {
 		if (!sender)
 			return ;
 		let path = `http://` + process.env.REACT_APP_BASE_URL + `/profile/${sender.username}`;
+		// console.log("path= ", path)
+		// history(path, { replace: true });
+		// window.location.replace(path);
 		window.history.pushState({}, '', path);
 		window.location.reload();
 	};
 
-
 	if (!user || !sender || !conv)
-		return (<></>);
-
-	if (user.blocked && user.blocked.includes(message.sender))
-		return (<></>);
-	else if (conv.banned && conv.banned.includes(user.username))
-		return (<></>);
-	else if (conv.muted && conv.muted.includes(user.username))
 	{
+		// console.log("return")
 		return (<></>);
 	}
+	// console.log("result includes=", conv.banned.includes(user.username))
+	// console.log("result includes=", conv.blocked.includes(user.username))
+	if (user.blocked && user.blocked.includes(message.sender))
+		return (<></>);
+	// else if (conv.banned && conv.banned.includes(user.username))
+	// {
+		// console.log("return2")	
+		// return (<></>);
+	// }
+		// console.log("noy return")
+	// if (user.blocked.includes(message.sender))/
+
 	return (
 		<div className={own ? "meMessage" : "youMessage"} ref={scrollRef}>
 			<div>
@@ -93,6 +107,7 @@ function MessageMe({message, own}: MessageMeProps){
 					<img className="messageInfo" onClick={() => handleButtonClick()} src={DefaultPicture} alt="Default Profile Picture" />
 				)}
 			</div>
+			{/* <div className="usernameMesage">{message.senderNickname}</div>	 */}
 			{sender ? (
 			<div className="usernameMesage">{sender.nickname}</div>
 			): ""}
@@ -100,8 +115,8 @@ function MessageMe({message, own}: MessageMeProps){
 				<MeStyleP>{message.text}</MeStyleP>
 			</div>
 		</div>
-
+		
 	)
 }
 
-export default MessageMe
+export default MessageMe

containers/react/src/components/Messages/MessageMe.tsx

@@ -14,6 +14,7 @@ const MeStyleP = styled.p`
 `
 
 function MessageMe(){
+	// const scrollRef = useRef();
 	const scrollRef = useRef<HTMLDivElement>(null);
 
 	useEffect(() => {

containers/react/src/components/Messages/Modal.tsx

@@ -1,75 +1,61 @@
 import { motion } from "framer-motion";
 import Backdrop from "../Sidebar/Backdrop.tsx";
+// import { Rank } from "../../DataBase/DataRank"
 import '../../styles/Messages.css'
 import { useState, useEffect } from "react";
 import { GrAdd } from "react-icons/gr";
 import { Link } from "react-router-dom";
 import api from "../../script/axiosApi.tsx";
 import React from "react";
-import {User, Conv} from "../../../interfaces.tsx"
 
-interface ModalProps {
+const dropIn = {
-	handleClose: Function,
+    hidden:{y:"-100vh",
-  }
+            opacity: 0,},
+    visible:{y: "0",
+            opacity: 0,
+            transotion:{
+                duration:0.1,
+                type:"spring",
+                damping: 100,
+                stiffness: 500,
+            }},
+    exit:{y: "100vh",
+            opacity: 0,},
 
-const Modal = ({handleClose}: ModalProps) => {
+};
+
+const Modal = ({handleClose}) => {
+    // const [multi, setMulti] = useState(false);
     const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: ''}]);
-	const [users, setUsers] = useState<User[]>([]);
+    const [selectedOptionArray, setSelectedOptionArray] = useState([]);
-	const [user, setUser] = useState<User>();
+	const [users, setUsers] = useState([]);
-	const [convs, setConvs] = useState<Conv[]>([]);
+	const [user, setUser] = useState();
+	const [convs, setConvs] = useState([]);
 
 	const [channel, setChannel] = useState('');
 
-	
 	useEffect(()=> {
+
 		const getConv = async ()=>{
 			try {
 				const tmpUsers = await api.get("/users");
 				const tmpUser = await api.get("/profile");
 				const tmpConvs = await api.get("/convs");
+				console.log("users=", tmpUsers.data);
+				console.log("convs=", tmpConvs.data);
 				setUsers(tmpUsers.data);
 				setUser(tmpUser.data);
 				setConvs(tmpConvs.data);
-			} catch(err) {
+			} catch(err){
 				console.log(err)
 			}
 		}
 		getConv();
 	}, []);
 
-	const [askPass, setAskPass] = useState(false);
+    const handleOptionChange = (selectId, selectedOption) => {
-	const [PassWord, setPassWord] = useState('');
+		console.log("selected Option=", selectedOption)
-	useEffect(()=> {
+        setSelectTag((prevTags) => 
-
-		const getConv = async ()=>{
-			try{
-
-				const tmpConv = await api.post("/convId", {convId: channel});
-				if (tmpConv.data.password)
-					setAskPass(true);
-			}
-			catch(err){
-				console.log(err);
-			}
-		}
-		getConv();
-	}, [channel]);
-
-	const handlePassword = async (e: { key: string; }) => {
-		if (e.key !== "Enter")
-			return;
-		try {
-			const ret = await api.post("/verifyPassword", {convId: channel, password: PassWord})
-			if (ret.data)
-				window.location.reload();
-		} catch (err) {
-			console.log(err);
-		}
-		handleClose();
-	}
-
-    const handleOptionChange = (selectId: number, selectedOption: string) => {
-        setSelectTag((prevTags) =>
             prevTags.map((tag) =>
                 tag.id === selectId ? { ...tag, selectedOption } : tag
             )
@@ -79,55 +65,62 @@ const Modal = ({handleClose}: ModalProps) => {
     const addNewSelectedTag = () => {
         const newSelectedId = Math.max (...selectTags.map((tag) => tag.id)) + 1;
         setSelectTag([...selectTags, { id: newSelectedId, selectedOption: ''}]);
+		console.log(selectTags)
     };
 
 	const joinChannel = async () => {
 		try {
+			console.log("channel= ", channel)
 			await api.post("/join", {convId: channel})
-			window.location.reload();
 		} catch(err) {
 			console.log(err);
 		}
     };
 
     const saveSelectedOptions = async () => {
+        // const selectedOptions = selectTags.map((tag) => tag.selectedOption);
 		const selectedOptions = selectTags.map((tag) => tag.selectedOption).filter((option) => option !== '');
 
+		console.log("selected= ", selectedOptions);
+		//do db stuff here
 		const data = {
 			members: selectedOptions,
 		}
 		try{
+			// test
 			await api.post("/conv", data);
 			handleClose();
 			window.location.reload();
 		} catch(err) {
 			console.log(err);
 		}
+        setSelectedOptionArray(selectedOptions);
+
     }
+    // let new_name;
 
     return (
         <Backdrop onClick={handleClose}>
             <motion.div
                 onClick={(e) => e.stopPropagation()}
-                className="modalSetting"
+                className="modal"
+                // variant={dropIn}
                 initial="hidden"
                 animate="visible"
                 exit="exit"
             >
-			  <div className="settingFirstPart2">
-
 				{selectTags.map((selectTag) => (
-					<div key={selectTag.id}>
+				  <div key={selectTag.id}>
 				    <select
 				      value={selectTag.selectedOption}
 				      onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}
-					  >
+				    >
 				      <option value="">{
-						  selectTag.selectedOption ? selectTag.selectedOption : "Select a user"
+				        selectTag.selectedOption ? selectTag.selectedOption : "Select an option"
-						}</option>
+				      }</option>
-				      {users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.nickname)).map((item, index) => (
+				      {users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.name)).map((item, index) => (
-						  <option key={index} value={item.username}>
+				        <option key={index} value={item.username}>
-				          {item.nickname}
+				          {item.username}
 				        </option>
 				      ))}
 				    </select>
@@ -137,46 +130,43 @@ const Modal = ({handleClose}: ModalProps) => {
             	    <GrAdd onClick={addNewSelectedTag}/>
             	</div>
 				<div className="div_submit">
-					<Link to='#' className="submit" onClick={saveSelectedOptions}>Submit</Link>
+					<Link to='#' className="submit" onClick={ saveSelectedOptions}>Submit</Link>
-				</div>
+						
+					<Link to="#" className="submit" onClick={handleClose}>Cancel</Link>
 				</div>
 
 
-				<div className="settingSecondPart">
 
 				{convs.length > 0 && (
-					<select
+        			<select
-					value={channel}
+        			  value={channel}
-					onChange={(event) => setChannel(event.target.value)}
+        			  onChange={(event) => setChannel(event.target.value)}
 
         			>
-        			  <option value="">Select a channel</option>
+        			  <option value="">Select an option</option>
         			  {convs.map((conv) => (
-						  !(!conv.group || conv.private || (conv.banned && user && conv.banned.includes(user.username)) || (conv.members && user && conv.members.includes(user.username))) && (
+        			    !(!conv.group || conv.private || (conv.banned && conv.banned.includes(user.username)) || (conv.members && conv.members.includes(user.username))) && (
-							  <option key={conv.id} value={conv.id}>
+        			      <option key={conv.id} value={conv.id}>
         			        {conv.name}
-        			      </option> 
+        			      </option>
         			    )
-						))}
+        			  ))}
         			</select>
       			)}
- 				
+				  {channel.private ? (
-				<div>
+					<input className="mdp" placeholder="password" type="text" />
-
+				  ):("")}
-				  {askPass ? (
+
-					  <input className="mdp" placeholder="password" type="password" onChange={(e) => setPassWord(e.target.value)} onKeyDown={handlePassword}/>
+
-					  ):(
+				<div className="div_submit">
-						<div className="div_submit">
+					<Link to='#' className="submit" onClick={ joinChannel }>Join</Link>
-							<Link to='#' className="submit" onClick={ joinChannel }>Join</Link>
+				</div>
-						</div>
+
-					  )}
-					  </div>
 
 
-			  </div>
             </motion.div>
         </Backdrop>
     )
 }
 
-export default Modal
+export default Modal

containers/react/src/components/Messages/ModalSetting.tsx

@@ -1,13 +1,31 @@
-import { AnimatePresence, motion } from "framer-motion";
+import { motion } from "framer-motion";
 import Backdrop from "../Sidebar/Backdrop.tsx";
+// import { Rank } from "../../DataBase/DataRank"
 import '../../styles/Messages.css'
 import { useState, useEffect } from "react";
+import { GrAdd } from "react-icons/gr";
 import { Link } from "react-router-dom";
 import api from "../../script/axiosApi.tsx";
 import React from "react";
-import { User } from "../../../interfaces.tsx"
+import {User} from "../../../interfaces.tsx"
 import { Socket } from "socket.io-client";
-import GreenAlert from "../Alert/GreenAlert.tsx";
+
+
+const dropIn = {
+    hidden:{y:"-100vh",
+            opacity: 0,},
+    visible:{y: "0",
+            opacity: 0,
+            transotion:{
+                duration:0.1,
+                type:"spring",
+                damping: 100,
+                stiffness: 500,
+            }},
+    exit:{y: "100vh",
+            opacity: 0,},
+
+};
 
 interface ModalSettingProps {
 	handleClose: Function,
@@ -15,16 +33,14 @@ interface ModalSettingProps {
 	socket: Socket | null,
 }
 
-const ModalSetting = ({ handleClose, convId, socket }: ModalSettingProps) => {
+const ModalSetting = ({handleClose, convId,  socket }: ModalSettingProps) => {
-	const [password, setPassword] = useState(false);
+    const [password, setPassword] = useState(false);
 	const [users, setUsers] = useState<User[]>([]);
-	const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: '' }]);
+	const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: ''}]);
 	const [selectedUser, setSelectedUser] = useState("");
 	const [newName, setNewName] = useState("");
-	const [time, setTime] = useState("");
 	const [newPassword, setNewPassword] = useState("");
-	const [privateConv, setPrivateConv] = useState<Boolean>();
+	const [privateConv, setPrivateConv] = useState(false);
-	const [loading, setLoading] = useState<Boolean>(true);
 	const dark = () => setPrivateConv(true);
 	const light = () => setPrivateConv(false);
 	const [mute, setMute] = useState(false);
@@ -32,224 +48,218 @@ const ModalSetting = ({ handleClose, convId, socket }: ModalSettingProps) => {
 	const lightMute = () => setMute(true);
 
 
-	useEffect(() => {
+	useEffect(()=> {
 
-		const getUsers = async () => {
+		console.log("convid =", convId)
+		const getUsers = async ()=>{
 			try {
-				const currentConv = await api.post("/convId", { convId: convId });
-				if (currentConv.data.private)
-					setPrivateConv(true);
 				const tmpUsers = await api.get("/users");
+				console.log("users=", tmpUsers.data);
 				setUsers(tmpUsers.data);
-				setLoading(false);
+			} catch(err){
-			} catch (err) {
 				console.log(err)
 			}
 		}
 		getUsers();
 	}, []);
 
-	useEffect(() => {
+    // const [multi, setMulti] = useState(false);
-		const handleVariableChange = () => {
+    // const [selectedOptionArray, setSelectedOptionArray] = useState([]);
-			if (privateConv === undefined) {
-				return;
-			}
-			try {
-				if (privateConv)
-					api.post("/private", { convId: convId })
-				else
-					api.post("/public", { convId: convId })
-			} catch (err) {
-				console.log(err);
-			}
-		};
-		if (!loading)
-			handleVariableChange();
-	}, [privateConv]);
 
-	const handleOptionChange = (selectId: number, selectedOption: string) => {
+
-		setSelectTag((prevTags) =>
+    const handleOptionChange = (selectId: number, selectedOption: string) => {
-			prevTags.map((tag) =>
+		console.log("tag= ", selectTags)
-				tag.id === selectId ? { ...tag, selectedOption } : tag
+		console.log("option= ", selectedOption)
-			)
+        setSelectTag((prevTags) => 
-		);
+		prevTags.map((tag) =>
+		tag.id === selectId ? { ...tag, selectedOption } : tag
+		)
+        );
 		setSelectedUser(selectedOption)
-	};
+    };
 
 	const handleCheckPass = (e: { target: { checked: boolean | ((prevState: boolean) => boolean); }; }) => {
 		setPassword(e.target.checked);
+		console.log("password??", e.target.checked)
 	}
 
-	const handleName = async (e: { key: string; }) => {
+	const handleCheckPriv = (e: { target: { checked: any; }; }) => {
+		// setPassword(e.target.checked);
+		if (e.target.checked)
+		{
+			console.log("chack true", e.target.checked)
+			try{
+				api.post("/private", {convId: convId})
+			} catch(err) {
+				console.log(err);
+			}
+		}
+		else
+		{
+			console.log("chack false", e.target.checked)
+			try{
+				api.post("/private", {convId: convId})
+			} catch(err) {
+				console.log(err);
+			}
+		}
+	}
+
+	const handleName = async (e: { key: string; })=>{
 		if (e.key !== "Enter")
-			return;
+			return ;
-		try {
+		try{
-			api.post("/name", { convId: convId, name: newName })
+			api.post("/name", {convId: convId, name: newName})
 			window.location.reload()
-		} catch (err) {
+		} catch(err) {
 			console.log(err);
 		}
 		handleClose();
 	}
 
-	const handlePassword = async (e: { key: string; }) => {
+	const handlePassword = async (e: { key: string; })=>{
 		if (e.key !== "Enter")
-			return;
+			return ;
-		try {
+		try{
-			await api.post("/password", { convId: convId, password: newPassword })
+			await api.post("/password", {convId: convId, password: newPassword})
-		} catch (err) {
+		} catch(err) {
 			console.log(err);
 		}
 		handleClose();
 	}
 
-	const [unban, setUnban] = useState(false);
+    const handleBan = async () => {
-	const closeUnban = () => setUnban(false);
+		// console.log("ban option= ", selectedUser)
-	
+		try{
-	const handleBan = async () => {
+			// console.log("user select=", selectedUser.length)
-		try {
 			if (!selectedUser.length)
-				return;
+				return ;
-			const res = await api.post("/ban", { convId: convId, username: selectedUser })
+			await api.post("/ban", {convId: convId, username: selectedUser})
-
+			if (socket)
-			if (res.data === 2) {
+			{
-				setUnban(true);
+				console.log("emit to ban server")
+				socket.emit("ban", {username: selectedUser})
 			}
-			if (socket) {
+		} catch(err) {
-				socket.emit("ban", { username: selectedUser })
-			}
-		} catch (err) {
 			console.log(err);
 		}
-		setTimeout(handleClose, 1500);
+		handleClose();
 	};
 
 	const handleAdmin = async () => {
 		if (!selectedUser.length)
-			return;
+			return ;
-		try {
+		try{
-			await api.post("/admin", { convId: convId, username: selectedUser })
+			await api.post("/admin", {convId: convId, username: selectedUser})
-		} catch (err) {
+		} catch(err) {
 			console.log(err);
 		}
 		handleClose();
 	};
 
-	const [muteAlert, setMuteAlert] = useState(false);
+	const handleMute = async () => {
-	const closeMuteAlert = () => setMuteAlert(false);
+		if (!selectedUser.length)
-
+			return ;
-	const handleMute = async (e: { key: string; }) => {
+		try{
-		if (e.key !== "Enter")
+			await api.post("/mute", {convId: convId, username: selectedUser})
-			return;
+		} catch(err) {
-		try {
-			const ret = await api.post("/mute", { convId: convId, username: selectedUser, time: time })
-			if (ret.data)
-				setMuteAlert(true);
-		} catch (err) {
 			console.log(err);
 		}
 		handleClose();
 	};
 
 	const handleInvite = async () => {
-		try {
+		try{
-			await api.post("/inviteConv", { convId: convId, username: selectedUser });
+			await api.post("/invite", {convId: convId, username: selectedUser})
-		} catch (err) {
+		} catch(err) {
 			console.log(err);
 		}
 		handleClose();
 	};
 
-	return (
+    return (
-		<Backdrop onClick={handleClose}>
+        <Backdrop onClick={handleClose}>
-			<motion.div
+            <motion.div
-				onClick={(e) => e.stopPropagation()}
+                onClick={(e) => e.stopPropagation()}
-				className="modalSetting"
+                className="modalSetting"
-				initial="hidden"
+                initial="hidden"
-				animate="visible"
+                animate="visible"
-				exit="exit"
+                exit="exit"
-			>
+            >
-				<div className="settingFirstPart">
+
-					<div>
+{/* First selection  */}
+                <div className="settingFirstPart">
+                    <div>
 						<div>
-							<Link to="#" onClick={light} className={privateConv ? "submit" : "darkSubmit"}>Public</Link>
+                    		<Link to="#" onClick={light} className={ privateConv ?  "submit" : "darkSubmit"}>Public</Link>
-							<Link to="#" onClick={dark} className={privateConv ? "darkSubmit" : "submit"}>Private</Link>
+							<Link to="#" onClick={dark} className={ privateConv ?  "darkSubmit" : "submit"}>Private</Link>
 						</div>
-						<p className="checkbox">Password<input className="inside_ckeckbox" type="checkbox" value="password" checked={password} onChange={handleCheckPass} /> </p>
+                        {/* <p className="checkbox">Private<input className="check"type="checkbox" value="private" onChange={handleCheckPriv}/></p> */}
-						{password ? (
+                        <p className="checkbox">Password<input type="checkbox" value="password" checked={password} onChange={handleCheckPass}/> </p>
-							<input
+                        
+						
+						{password || privateConv ? (
+							<input 
 								onChange={(e) => setNewPassword(e.target.value)}
-								onKeyDown={handlePassword}
+								onKeyDown={handlePassword} 
 								type="password"
 								className="in"
-								placeholder="Password" />
+								placeholder="Password"/>
-						) :
+							):
 							("")}
 
-					</div>
+
-					<div className="forName">
+                    </div>
-						<input
+                    <div className="forName">
+                        <input 
 							onChange={(e) => setNewName(e.target.value)}
-							onKeyDown={handleName}
+							onKeyDown={handleName} 
-							maxLength={20}
+							type="text" 
-							type="text"
+							className="in" 
-							className="in"
 							placeholder="New Name"
 						/>
-					</div>
+                    </div>
-				</div>
+                </div>
 
-				<div className="settingSecondPart">
+{/* Second selection  */}
+                
+                <div className="settingSecondPart">
 
 
-					{selectTags.map((selectTag) => (
+				{selectTags.map((selectTag) => (
-						<div key={selectTag.id}>
+				  <div key={selectTag.id}>
-							<select
+				    <select
-								value={selectTag.selectedOption}
+				      value={selectTag.selectedOption}
-								onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}
+				      onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}
-							>
+				    >
-								<option value="">
+				      <option value="">
-									{selectTag.selectedOption ? selectTag.selectedOption : "Select an option"}
+				        {selectTag.selectedOption ? selectTag.selectedOption : "Select an option"}
-								</option>
+				      </option>
-								{users.map((item, index) => (
+				      {users.map((item, index) => (
-									<option key={index} value={item.username}>
+				        <option key={index} value={item.username}>
-										{item.nickname}
+				          {item.username}
-									</option>
+				        </option>
-								))}
+				      ))}
-							</select>
+				    </select>
-						</div>
+				  </div>
-					))}
+				))}
 
-					<div>
-						<Link to="#" onClick={handleInvite} className="submit">Invite</Link>
-						<Link to="#" onClick={handleBan} className="submit">Ban</Link>
-						<Link to="#" onClick={mute ? darkMute : lightMute} className={mute ? "darkSubmit" : "submit"}>Mute</Link>
-						<Link to="#" onClick={handleAdmin} className="submit">Admin</Link>
-					</div>
 
-				</div>
+                <div>
-				{mute ? (
+					<Link to="#" onClick={handleInvite} className="submit">Send</Link>
-					<input
+                    <Link to="#" onClick={handleBan} className="submit">Ban</Link>
-						onKeyDown={handleMute}
+                    <Link to="#" onClick={mute ? darkMute : lightMute} className={mute ? "darkSubmit": "submit"}>Mute</Link>
-						type="number"
+                    <Link to="#" onClick={handleAdmin} className="submit">Admin</Link>
-						className="in_howLong"
+                </div>
-						placeholder="Time"
-						value={time}
-						onChange={(e) => setTime(e.target.value)}
-					/>
-				) : ("")}
-				<AnimatePresence initial={false} onExitComplete={() => null}>
-					{unban ? (
-						<GreenAlert handleClose={closeUnban} text={selectedUser + ": was unbanned"} />
-					) : ("")}
-					{muteAlert ? (
-						<GreenAlert handleClose={closeMuteAlert} text="Mute" />
-					) : ("")}
-				</AnimatePresence>
 
-			</motion.div>
+                </div>
-		</Backdrop>
+					{mute ? (
-	)
+						<input type="text" className="in_howLong" placeholder="How long ?" />
+					):("")}
+
+            </motion.div>
+        </Backdrop>
+    )
 }
 
 export default ModalSetting

containers/react/src/components/Messages/PartyInvite.tsx

@@ -6,7 +6,7 @@
 /*   By: apommier <apommier@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/06/19 16:44:29 by apommier          #+#    #+#             */
-/*   Updated: 2023/06/28 18:08:11 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/20 23:53:01 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -33,6 +33,12 @@ const UserChat = styled.div `
 	}
 `
 
+const SideP = styled.p`
+	font-size: 14px;
+	color: lightgray;
+	margin-left: 15px;
+`
+
 interface InviteProps {
 	username: string,
 	gameId: string
@@ -47,13 +53,19 @@ export default function  PartyInvite({currentInvite}: UserProps)
 	const [profilePicture, setProfilePicture] = useState('');
 	const [request, setRequest] = useState<User>(); //user who invite
 	const [clickEvent, setClickEvent] = useState(false);
+	// const [user, setUser] = useState(null);
 	
 	useEffect(() => {
 		const fetchProfilePicture = async () => {
 			try {
+			//   const user = await api.get("/profile");\
+				// const tmpUser = await api.get("/profile")
 				const pic = await api.post("/getPicture", {username: currentInvite.username})
 				const tmpRequest = await api.post("/user", {username: currentInvite.username})
+				// setUser(tmpUser.data);
 				setRequest(tmpRequest.data);
+				// console.log(`user naem profile pic222= ${currentInvite.username}`)
+				// console.log(` profile pic222= ${pic.data}`)
 				setProfilePicture(pic.data);
 			} catch (error) {
 				console.error('Error fetching profile picture:', error);
@@ -65,33 +77,45 @@ export default function  PartyInvite({currentInvite}: UserProps)
 
 	const handleButtonClick = (user: InviteProps) => {
 		let path = `http://` + process.env.REACT_APP_BASE_URL + `/profile/${user.username}`; 
+		// history(path, { replace: true });
+		// window.location.replace(path);
 		window.history.pushState({}, '', path);
 		window.location.reload();
 	};
 	
 	const Accept = async (request: User) => {
 		try{
+			//call canvas ??
+			// await api.post("/friend", {username: request.username})
 			await api.post("/deleteInvite", {username: request.username})
 			let path = `http://` + process.env.REACT_APP_BASE_URL + `/pong/play?` 
 			path += 'username=' + request.username;
 			path += '&gameId=' + currentInvite.gameId;
+			// setClickEvent(true);
 			window.history.pushState({}, '', path);
 			window.location.reload();
 		} catch(err) {
 			console.log(err);
 		}
+		console.log("accept")
+		console.log(`request = ${request}`)
 	}
 
 	const Refuse = async (request: User) => {
 		try{
 			await api.post("/deleteInvite", {username: request.username})
+			// await api.post("/refuseInvite", {username: request.username})
 			setClickEvent(true);
 		} catch(err) {
 			console.log(err);
 		}
+		console.log("refuse")
+		console.log(`request = ${request}`)
 	}
 
+  // Vérifier si le contenu doit être caché
   	if (clickEvent) {
+		console.log("retrun true")
     	return null; // Rendre null pour ne pas afficher le contenu
   	}
 

containers/react/src/components/Profile/EditName.tsx

@@ -1,10 +1,12 @@
-import { AnimatePresence, motion } from "framer-motion"
+import {motion} from "framer-motion"
-import { useState } from 'react';
+// import Backdrop from "../Sidebar/Backdrop"
+import {Link} from 'react-router-dom';
+import { UserProfile } from "../../DataBase/DataUserProfile";
+import {useState} from 'react';
 import "../../styles/Profile.css"
 
 import api from '../../script/axiosApi.tsx';
 import React from "react";
-import RedAlert from "../Alert/RedAlert.tsx";
 
 const dropIn = {
 	hidden: {
@@ -18,64 +20,69 @@ const dropIn = {
 	},
 }
 
-const ModalEdit = () => {
+// const changeName = ({handleclose, name}) => {
-	const [nickname, setNickname] = useState("");
+// 	return (
-	const [errTaken, setErrTaken] = useState(false);
+// 		UserProfile.UserName = name
-	const closeTaken = () => setErrTaken(false);
+// 	)
-	const [errTooShort, setErrTooShort] = useState(false);
+// }
-	const closeTooShort = () => setErrTooShort(false);
 
-	const handler = (e: { target: { value: React.SetStateAction<string>; }; }) => {
+const ModalEdit = ( handleClose ) => {
+	// let new_name = "";
+	const [nickname, setNickname] = useState("");
+	
+	const handler = e =>
+	{
 		setNickname(e.target.value);
+		console.log("testeeeee")
+		const postNickname = async ()=>{
+			try{
+				await api.post("/nickname", {nickname: nickname})
+				// setUser(tmpUser.data);
+				// setIsLoading(false)
+			}
+			catch(err){
+				console.log(err);
+			}
+		};
+		postNickname();
 	}
 
-	const handlePostNickname = async () => {
+	const handlePostNickname = async () => 
-		try {
+	{
-			if (nickname.length > 3) {
+		console.log("nickname=" ,nickname)
-				const ret = await api.post("/nickname", { nickname: nickname });
+		try{
-				if (ret.data) {
+			await api.post("/nickname", {nickname: nickname})
-					window.location.reload();
+			window.location.reload();
-				}
+			// setUser(tmpUser.data);
-				else {
+			// setIsLoading(false)
-					setErrTaken(true);
-				}
-			}
-			else if (nickname.length < 3)
-				setErrTooShort(true);
 		}
-		catch (err) {
+		catch(err){
 			console.log(err);
 		}
 	}
 
-	return (
-		<motion.div
-			className="modal"
-			variants={dropIn}
-			initial="hidden"
-			animate="visible"
-			exit="exit">
-			<h1>Type your new name</h1>
-			<input className="text" minLength={2} maxLength={10} type="text" value={nickname} onChange={handler} />
-			<div>
-				<div className="button" onClick={handlePostNickname}>
-					change
-				</div>
-				<AnimatePresence initial={false} onExitComplete={() => null}>
-				{
-					errTaken ? (
-						<RedAlert handleClose={closeTaken} text="Error: Nickname already taken" />
-					) : ("")
-				}
-				{
-					errTooShort ? (
-						<RedAlert handleClose={closeTooShort} text="Error: Nickname it too short" />
-					) : ("")
-				}
 
-				</AnimatePresence>
+	// function handleClose(){
-			</div>
+	// 	//do nothing
-		</motion.div>
+	// }
+	return (
+			<motion.div 
+						className="modal"
+						variants={dropIn}
+						initial="hidden"
+						animate="visible"
+						exit="exit">
+				<h2>Type your new name</h2>
+				<input className="text" maxLength="10" type="text" value={nickname} onChange={handler} handleClose/>
+				<div>
+					<div className="button" onClick={ () => handlePostNickname()}>
+						change
+						{/* <Link className="button" to={""}>change</Link> */}
+					</div>
+				</div>
+			</motion.div>
+			
+		
 	)
 }
 

containers/react/src/components/Profile/Logout.tsx

@@ -1,21 +1,17 @@
-import api from "../../script/axiosApi"
+import React from "react";
+
 
 
 function Logout(){
-	
+
-	const logout = async () =>{
+	localStorage.clear();
-		
+	const path = 'http://' + process.env.REACT_APP_BASE_URL + '/'; 
-		try {
+	// history(path, { replace: true });
-			await api.post("/logout");	
+	// window.location.replace(path);
-			localStorage.clear();
+	// window.history.pushState({}, '', path);
-			const path = 'http://' + process.env.REACT_APP_BASE_URL + '/'; 
+	window.history.pushState({}, '', path);
-			window.history.pushState({}, '', path);
+	window.location.reload();
-			window.location.reload();
+	return (<></>)
-		} catch (err) {
-			console.log(err);
-		}
-	}
-	logout();
 }
 
 export default Logout;

containers/react/src/components/Profile/Win_Loss.tsx

@@ -1,32 +1,69 @@
+// import PropTypes from "prop-types"
+// import styled from 'styled-components';
+// import '../DataBase/DummyDBWinLoss.js'
+// import '../DataBase/DataProfileUser.js'
+// import { DBWinLoss } from '../../DataBase/DummyDBWinLoss.js';
 import '../../styles/Win_Loss.css'
-import { User, Matchlog } from "../../../interfaces.tsx"  
+import { User, Matchlog } from "../../../interfaces.tsx"
-import React, { useState, useEffect} from "react";
+// import { UserProfile } from '../../DataBase/DataUserProfile';
+// import color from '../../utils/style/color.js';
+
+
+
+// const CardWrapper = styled.div`
+//         display: flex;
+//         flex-direction: column;
+//         padding: 15px;
+//         background-color: black;
+//         border-radius: 30px;
+//         width: 350px;
+//         transition: 200ms;
+// 		margin-top: 50px;
+//         &:hover {
+//             cursor: pointer;
+//             box-shadow: 2px 2px 10px #b6b6b6;
+//         }
+// `
+
+// const CardLabel1 = styled.h1`
+//     color: #5843e4;
+//     // font-size: 22px;
+//     font-weight: bold;
+// 	margin-bottom: 25px;
+// `
+// const CardLabel2 = styled.span`
+// 	color: #5843e4;
+//     font-size: 22px;
+//     font-weight: bold;
+// 	display: flex;
+// 	flex-direction: column;
+// `
+
+// const CardImage = styled.img`
+//     heigh: 80px;
+//     width: 80px;
+//     border-radius: 50%;
+// `
+  
+import React, { useState, useEffect, useRef } from "react";
 import { useParams } from 'react-router-dom';
 import api from '../../script/axiosApi.tsx';
 
+
 function WinLoss() {
 	
 	const [user, setUser] = useState<User>();
 	const [history, setHistory] = useState([]);
 	const [isLoading, setIsLoading] = useState(true);
+	
 	const { username } = useParams();
 
 	useEffect(()=> {
 		const getUser = async ()=>{
 			try{
-				let tmpUser;
+				// const tmpUser = await api.get("/profile")
-				let tmpHistory;
+				const tmpUser = await api.post("/user", {username: username})
-
+				const tmpHistory = await api.post("/history", {username: username})
-				if (username)
-				{
-					tmpUser = await api.post("/user", {username: username});
-					tmpHistory = await api.post("/history", {username: username})
-				}
-				else
-				{
-					tmpUser = await api.get("/profile");
-					tmpHistory = await api.post("/history", {username: tmpUser.data.username})
-				}
 				setHistory(tmpHistory.data);
 				setUser(tmpUser.data);
 				setIsLoading(false)
@@ -38,28 +75,65 @@ function WinLoss() {
 		getUser();
 	}, [])
 
+	// console.log(`user= ${user.children}`)
+
     return (
+
+// 		<div>
+// 		{isLoading ? (
+// 			<h1>Loading...</h1>
+// 		  ) : (
+// 			<h1>{user.username}</h1>
+// 		  )}
+//   	</div>
+
+
         <div className='tab'>
 		{isLoading || !history || !user ? (
 			<h1>Loading...</h1>
+			// <span>Loading...</span>
 		  ) : (
 			  <div className='scroll'>
-				 <h2 className='title'>Match history {user.win}/{user.loss}</h2>
+				 <h2 className='title'>Match history Win/Loss</h2>
                 {history.map((c: Matchlog, index) => {
                     return (
                         <div key={index} className='elements'>
                         <li key={index}>
+                                {/* <h4 className='content'>{c.id}</h4> */}
                                 <div className='content2nd'>
                                     <h4 className='me'>{user.username}</h4>  <h4 className='score'>{c.myScore} - {c.opScore} </h4>  <h4 className="opponent">{c.opponent}</h4>
                                 </div>
+                                {/* <h4 className='content'>{c.openent}</h4> */}
                             </li>
                         </div>
                         )
                     })}
             </div>
+
+
+			
+		// 	<div>
+		// 	<h1>User: {user.name}</h1>
+		// 	<div>
+		// 	  <h2>Children:</h2>
+		// 	  {history.map((child) => (
+		// 		<div key={child.id}>
+		// 		  <p>Child ID: {child.id}</p>
+		// 		  <p>Child Name: {child.name}</p>
+		// 		  {/* Render other child properties as needed */}
+		// 		</div>
+		// 	  ))}
+		// 	</div>
+		//   </div>
 		)}
         </div>
     )
 }
+
+// Card.propTypes = {
+//     label: PropTypes.string,
+//     title: PropTypes.string.isRequired,
+//     picture: PropTypes.string,
+// }
  
 export default WinLoss

containers/react/src/components/Sidebar/Backdrop.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { MouseEventHandler, ReactNode, HTMLAttributes } from "react";
 import { motion } from "framer-motion"
 import "../../styles/Header.css"
 

containers/react/src/components/Sidebar/SidebarData.tsx

@@ -26,7 +26,7 @@ export const SidebarData = [
 		cName: 'nav-text'
 	},
 	{
-		title: 'Friends',
+		title: 'Friend',
 		path: '/social',
 		icon: <IoIcons.IoMdPeople />,
 		cName: 'nav-text'

containers/react/src/components/Social/Friend.tsx

@@ -6,7 +6,7 @@
 /*   By: apommier <apommier@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/06/09 08:18:58 by apommier          #+#    #+#             */
-/*   Updated: 2023/06/28 17:59:49 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/20 13:41:44 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -16,6 +16,7 @@ import DefaultPicture from '../../assets/profile.jpg'
 import styled from "styled-components";
 
 import { RxCircle } from "react-icons/rx";
+import { CgFontSpacing } from "react-icons/cg";
 import React from "react";
 import {User} from "../../../interfaces.tsx"
 
@@ -26,66 +27,91 @@ const UserChat = styled.div `
 	gap: 5px;
 	color: white;
 	cursor: pointer;
-    margin-top: 15px;
 
 	&:hover{
 		background-color: #3e3c61;
 	}
 `
 
+const SideP = styled.p`
+	font-size: 14px;
+	color: lightgray;
+	margin-left: 15px;
+`
 interface UserProps {
 	currentUser: User
   }
 
+//   export default function  Friend({currentUser})
 export default function  Friend({currentUser}: UserProps)
 {
 	const [profilePicture, setProfilePicture] = useState('');
-
+	
 	useEffect(() => {
 		const fetchProfilePicture = async () => {
 			try {
+			//   const user = await api.get("/profile");
 				const pic = await api.post("/getPicture", {username: currentUser.username})
+				// console.log(`user naem profile pic222= ${currentUser.username}`)
+				// console.log(` profile pic222= ${pic.data}`)
 				setProfilePicture(pic.data);
 			} catch (error) {
 				console.error('Error fetching profile picture:', error);
 			}
 		  };
+		
 		  fetchProfilePicture();
-	}, []);
+	})
 
 	function getStatus(friend: User)
 	{
-		let status = friend.status		
+		let status = friend.status
+		console.log(`status= ${status}`)
 		let statusColor;
 
 		if (status === 0)
 			statusColor = 'grey';
-		else if (status === 1)
+		else if (status === 1) 
 			statusColor = 'green';
-		else if (status === 2)
+		else if (status === 2) 
 			statusColor = 'blue';
 		return statusColor;
 	}
 
+	const handleSpectate = (user: User) => {
+		//socket connection and add to party with one with username
+		console.log(`spectate hehe`)
+		console.log(`user= ${user}`)
+	};
+
 	const handleButtonClick = (user: User) => {
 		let path = `http://` + process.env.REACT_APP_BASE_URL + `/profile/${user.username}`;
+		console.log("path= ", path)
+		// history(path, { replace: true });
+		// window.location.replace(path);
 		window.history.pushState({}, '', path);
 		window.location.reload();
 	};
 
 	return (
-		<UserChat className="centermargin">
+		<UserChat>
 		{profilePicture ? (
 			<img className="pic-user" src={`data:image/jpeg;base64,${profilePicture}`} />
 		 ) : (
 			 <img className="pic-user" src={DefaultPicture} alt="Default Profile Picture" />
 		 )}
-		<div className="end">
+		<div className="infoSideBar">
 			<span onClick={() => handleButtonClick(currentUser)}>{currentUser.nickname}</span>
-			<div className="end">
+			 <RxCircle color={getStatus(currentUser)} />
-			 <RxCircle className="friendRequest" color={getStatus(currentUser)} />
+			 <button onClick={() => handleSpectate(currentUser)} >Invite</button>
-			  </div>
+			 {getStatus(currentUser) !== 'blue' ? (
-		 </div>
+				<></>
+			  ) : (
+				<button onClick={() => handleSpectate(currentUser)} >Spectate</button>
+			  )}
+		</div>
 		</UserChat>
 	)
 }
+	
+

containers/react/src/components/Social/FriendRequest.tsx

@@ -15,12 +15,18 @@ const UserChat = styled.div `
 	gap: 5px;
 	color: white;
 	cursor: pointer;
-	margin-top: 10px;
+
 	&:hover{
 		background-color: #3e3c61;
 	}
 `
 
+const SideP = styled.p`
+	font-size: 14px;
+	color: lightgray;
+	margin-left: 15px;
+`
+
 interface UserProps {
 	currentUser: User
   }
@@ -28,26 +34,34 @@ interface UserProps {
 export default function  Friend({currentUser}: UserProps)
 {
 	const [profilePicture, setProfilePicture] = useState('');
-	const [request, setRequest] = useState<User>();
+	const [request, setRequest] = useState<User>(); //user who invite
 	const [clickEvent, setClickEvent] = useState(false);
-
+	// const [user, setUser] = useState(null);
+	
 	useEffect(() => {
 		const fetchProfilePicture = async () => {
 			try {
+			//   const user = await api.get("/profile");\
+				// const tmpUser = await api.get("/profile")
 				const pic = await api.post("/getPicture", {username: currentUser.username})
 				const tmpRequest = await api.post("/user", {username: currentUser.username})
+				// setUser(tmpUser.data);
 				setRequest(tmpRequest.data);
+				// console.log(`user naem profile pic222= ${currentUser.username}`)
+				// console.log(` profile pic222= ${pic.data}`)
 				setProfilePicture(pic.data);
 			} catch (error) {
 				console.error('Error fetching profile picture:', error);
 			}
 		  };
-
+		
 		  fetchProfilePicture();
 	}, [clickEvent])
 
 	const handleButtonClick = (user: User) => {
-		let path = `http://` + process.env.REACT_APP_BASE_URL + `/profile/${user.username}`;
+		let path = `http://` + process.env.REACT_APP_BASE_URL + `/profile/${user.username}`; 
+		// history(path, { replace: true });
+		// window.location.replace(path);
 		window.history.pushState({}, '', path);
 		window.location.reload();
 	};
@@ -59,7 +73,8 @@ export default function  Friend({currentUser}: UserProps)
 		} catch(err) {
 			console.log(err);
 		}
-		window.location.reload();
+		console.log("accept")
+		console.log(`request = ${request}`)
 	}
 
 	const Refuse = async (request: User) => {
@@ -69,29 +84,30 @@ export default function  Friend({currentUser}: UserProps)
 		} catch(err) {
 			console.log(err);
 		}
-		window.location.reload();
+		console.log("refuse")
+		console.log(`request = ${request}`)
 	}
 
+  // Vérifier si le contenu doit être caché
   	if (clickEvent) {
-    	return (<></>);
+    	return null; // Rendre null pour ne pas afficher le contenu
   	}
 
 	return (
-		<UserChat className="centermargin">
+		<UserChat>
 		{profilePicture ? (
 			<img className="pic-user" src={`data:image/jpeg;base64,${profilePicture}`} />
 		 ) : (
 			 <img className="pic-user" src={DefaultPicture} alt="Default Profile Picture" />
 		 )}
 		{request ? (
-			<div className="end">
+		<div className="infoSideBar">
 			<span onClick={() => handleButtonClick(currentUser)}>{currentUser.nickname}</span>
-			<div className="end">
+			 <RxCheckCircled onClick={() => Accept(request)} color={'green'}/>
-			 <RxCheckCircled className="friendRequest" onClick={() => Accept(request)} color={'green'}/>
+			 <RxCircleBackslash onClick={() => Refuse(request)} color={'red'}/>
-			 <RxCircleBackslash className="friendRequest" onClick={() => Refuse(request)} color={'red'}/>
-			 </div>
 		</div>
 			) : ( "" )}
 		</UserChat>
 	)
 }
+	

containers/react/src/components/Social/Social.tsx

@@ -1,27 +1,58 @@
+import DefaultPicture from '../../assets/profile.jpg'
 import api from '../../script/axiosApi.tsx';
-import React, { useState, useEffect} from "react";
+import React, { useState, useEffect, useRef } from "react";
+import styled from "styled-components";
+
+
 import Friend  from './Friend.tsx';
 import FriendRequest  from './FriendRequest.tsx';
-import {IoMdPeople} from 'react-icons/io'
+
+import { ImBlocked } from 'react-icons/im';
+import { MdOutlineGroupAdd } from 'react-icons/md';
 import {User} from "../../../interfaces.tsx"
 
+// import React from "react";
+
+import { useNavigate } from "react-router-dom";
+
+
+
+
+const TouchDiv = styled.div`
+	margin-left: 10px;
+	margin-right: 4px;
+	margin-bottom: 21px;
+	margin-top: 21px;
+	cursor: pointer;
+	justify-content: space-around;
+	
+	&:hover {
+		color: #F4F3EF;
+	}
+`
+
 function Social (){
 
 	const [friends, setFriends] = useState([]);
 	const [invite, setInvite] = useState([]);
 	const [isLoading, setIsLoading] = useState<boolean>(true);
 	const [user, setUser] = useState<User>();
+	const [profilePicture, setProfilePicture] = useState('');
 
 	useEffect(()=> {
 		const getFriend = async ()=>{
 			try{
-				const tmpFriends = await api.get("/friends")
+				const tmpFriends = await api.get("/friends")	
 				const tmpUser = await api.get("/profile")
 				const tmpInv = await api.get("/inviteRequest")
+				const pic = await api.post("/getPicture", {username: tmpUser.data.username})
 
 				setInvite(tmpInv.data);
+				setProfilePicture(pic.data);
 				setUser(tmpUser.data);
 				setFriends(tmpFriends.data);
+				// return tmpUser;
+				console.log(`user= ${tmpUser.data.username}`);
 				setIsLoading(false)
 
 			}
@@ -33,30 +64,63 @@ function Social (){
 
 	}, [])
 
+
+
+
+
+	// const { status } = this.props;
+    // let statusColor = '';
+	// // let statusIcon = RxCircle;
+	// let status = 0
+
+    // if (status === 0) {
+    // //   statusIcon = faCircle;
+    //   statusColor = 'green';
+    // } else if (status === 1) {
+    // //   statusIcon = faCircle;
+    //   statusColor = 'red';
+    // } else if (status === 2) {
+    // //   statusIcon = faCircle;
+    //   statusColor = 'blue';
+    // }
+
     return (
         <div>
-			<div className='navbarSocial'>
+			<div className='navbar'>
-				<IoMdPeople className="catchat"/>
+				{/* <img src={DefaultPic} alt="profile" className="pic"/> */}
+				{profilePicture ? (
+					<img className="pic" src={`data:image/jpeg;base64,${profilePicture}`} />
+ 				) : (
+ 					<img className="pic" src={DefaultPicture} alt="Default Profile Picture" />
+ 				)}
 				<span>
 					{isLoading || !user ? (
         				<h4>Loading...</h4>
       				) : (
-        				<h2>Friends</h2>
+        				<h4>{user.nickname}</h4>
       				)}
 	  			</span>
-
+				<div className="end">
+					<TouchDiv>
+						<MdOutlineGroupAdd/>
+					</TouchDiv>
+					<TouchDiv>
+						<ImBlocked/>
+					</TouchDiv>
+				</div>
 			</div>
 
-			{invite.map((c: User)=> (
+{/* map with fiend request */}
-				<FriendRequest currentUser={c} key={c.username}/>
+
+			{invite.map(c=> (
+				<FriendRequest currentUser={c}/>
 			))}
 
-			{friends.map((c: User)=> (
+			{friends.map(c=> (
-				<Friend currentUser={c} key={c.username}/>
+				<Friend currentUser={c}/>
 			))}
-
 		</div>
     )
 }
 
-export default Social
+export default Social

containers/react/src/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+
+import reportWebVitals from './reportWebVitals';
+import Header from './components/Header.tsx';
+import Head from './pages/Head.tsx';
+import App from './components/App.tsx';
+
+import './styles/index.css';
+import './styles/App.css'
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <div className="App">
+	<Head />
+	<BrowserRouter>
+	<Header />
+    	<App/>
+  	</BrowserRouter>
+  </div>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

containers/react/src/index.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom';
-
-import Header from './components/Header';
-import Head from './pages/Head';
-import App from './components/App';
-
-import './styles/index.css';
-import './styles/App.css';
-
-const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-
-root.render(
-  <div className="App">
-	<Head />
-	<BrowserRouter>
-	<Header />
-    	<App/>
-  	</BrowserRouter>
-  </div>
-);

containers/react/src/pages/2fa.tsx

@@ -1,17 +1,112 @@
-import React, { useState, useEffect } from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
 import api from '../script/axiosApi.tsx';
 
+// function DoubleAuth() {
+
+// //   const enabled = await api.get("/2fa");
+
+// //   const response = await api.get("/2fa");
+// //   const enabled = response.data;
+// //   console.log(`enable= ${enabled.data}`)
+// 	// const enabled = 0;
+// 	let enabled;
+
+// 	useEffect(() => {
+// 		async function get2fa()
+// 		{
+// 			const response = await api.get("/2fa");
+// 			  const enabled = response.data;
+// 			  console.log(`enable= ${enabled.data}`)
+// 		}
+// 		// const enabled = 0;
+// 	}, [])
+
+
+	  
+	// useEffect(() => {
+	// async function get2fa()
+	// {
+	// 	api.get('/api/QRcode', { responseType: 'blob' })
+	// 	  .then(response => {
+	// 		const reader = new FileReader();
+	// 		reader.onloadend = () => {
+	// 		  setImageSrc(reader.result);
+	// 		};
+	// 		reader.readAsDataURL(response.data);
+	// 	  })
+	// 	  .catch(error => {
+	// 		console.error(error);
+	// 	  });
+	
+  	// }  }, []);
+
+// //   const [verificationCode, setVerificationCode] = useState('');
+// //   const [invalidCode, setInvalidCode] = useState(false);
+
+// 	const handleSubmit = () => {
+//     // async (e) => {
+//     //   e.preventDefault();
+
+//     //   const result = await verifyOtp(verificationCode);
+
+//     //   if (result) return (window.location = '/');
+
+//     //   setInvalidCode(true);
+//     // },
+//     // [verificationCode]
+// 	};
+
+// 	let sourceCode
+
+// 	if (!enabled)
+// 	{
+// 		api.get('/QRcode')
+//   		.then(response => {
+//   		  sourceCode = response.data;
+//   		  console.log(sourceCode);
+//   		})
+//   		.catch(error => {
+//   		  console.error(error);
+//   		});
+// 	}
+
+//   return (
+//     <div>
+//       {!enabled && (
+//         <div>
+//           <p>Scan the QR code on your authenticator app</p>
+//           <img src={sourceCode} />
+//         </div>
+//       )}
+
+//       <form onSubmit={handleSubmit}>
+//         {/* <Input
+//           id="verificationCode"
+//           label="Verification code"
+//           type="text"
+//           value={verificationCode}
+//           onChange={(e) => setVerificationCode(e.target.value)}
+//         /> */}
+
+//         <button type="submit">Confirm</button>
+
+//         {/* {invalidCode && <p>Invalid verification code</p>} */}
+//       </form>
+//     </div>
+//   );
+// }
+
+
+// import { toFileStream } from 'qrcode';
 
 const DoubleAuth = () => {
-	const [imageSrc, setImageSrc] = useState<string | ArrayBuffer | null>('');
+	const [imageSrc, setImageSrc] = useState('');
-
+  
 	useEffect(() => {
 		async function getCode(){
 		await api.get('/QRcode', { responseType: 'blob' })
 		.then(response => {
 		  const reader = new FileReader();
-		  if (!reader)
-			return ;
 		  reader.onloadend = () => {
 			setImageSrc(reader.result);
 		  };
@@ -24,12 +119,23 @@ const DoubleAuth = () => {
 	getCode();
 }, []);
   
+	// return (
+	//   <div>
+	// 	{imageSrc && <img src={imageSrc} alt="QR Code" />}
+	//   </div>
+	// );
+
+	// <img src={sourceCode} />
+
 	return (
 		<div>
 			<div>
 			  <p>Scan the QR code on your authenticator app</p>
-			  {imageSrc && <img src={imageSrc.toString()} alt="QR Code" />}
+			  {imageSrc && <img src={imageSrc} alt="QR Code" />}
 			</div>
+			{/* <form onSubmit={handleSubmit}>
+				<button type="submit">Confirm</button>
+  			</form> */}
 		</div>
 	  );
 

containers/react/src/pages/Field.tsx

@@ -1,9 +1,13 @@
 import { useEffect } from 'react';
+// import { useState, useRef } from 'react';
 import DrawCanvas from './canvas.tsx';
 import queryString from 'query-string';
 import '../styles/field.css';
+
+import { useParams } from "react-router-dom";
 import React from 'react';
-import api from '../script/axiosApi.tsx';
+
+// import { withRouter } from 'react-router-dom';
 
 interface GameProps {
 	privateParty: boolean,
@@ -13,37 +17,11 @@ interface GameProps {
 
 function Field()
 {
-
-	useEffect(() => {
-
-		const addGameSession = async () => {
-			try {
-				await api.post("/addGame");
-			} catch (err) {
-				console.log(err);
-			}
-		};
-
-		addGameSession();
-
-		const handleBeforeUnload = async () => {
-			try {
-				await api.post("/rmGame");
-			} catch (err) {
-				console.log(err);
-			}
-		};
-
-		window.addEventListener('beforeunload', handleBeforeUnload);
-		return () => {
-			window.removeEventListener('beforeunload', handleBeforeUnload);
-		};
-	}, []);
-
-
 	useEffect(() => {
+		// const location = useLocation();
 		const queryParams = queryString.parse(window.location.search);
 		
+		console.log("launch canva hehe")
 		let Modifiers = 0;
 		let info: GameProps;
 
@@ -65,16 +43,20 @@ function Field()
 		}
 		if (queryParams.username)
 		{
+				console.log("user= ", queryParams.username)
 				info = {
 					privateParty: true,
 					username: queryParams.username as string,
 					gameId: queryParams.gameId as unknown as number
 				}
+			console.log("info of param vefore canvas=", info)
 		}
 
 		const cleanup = DrawCanvas(Modifiers, info);
 	
 		return () => {
+		  console.log("Cleanup");
+		//   cleanup(); // Call the cleanup function to stop the ongoing process or perform necessary cleanup tasks
 			if (cleanup)
 				cleanup();
 		};

containers/react/src/pages/Head.tsx

@@ -7,7 +7,9 @@ function Head()
     		<meta charSet="utf-8"></meta>
     		<link href="./css/header.css" rel="stylesheet"></link>
 			<title>BEST PONG EVER</title>
+    		{/* <script src="./script/login.js"></script> */}
 			<link rel="preconnect" href="https://fonts.googleapis.com"></link>
+			{/* <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true"></link> */}
 			<link href="https://fonts.googleapis.com/css2?family=Rubik+Iso&display=swap" rel="stylesheet"></link>
 		</div>
 	);

containers/react/src/pages/Home.js

@@ -0,0 +1,50 @@
+import '../styles/old.css';
+import '../styles/field.css';
+
+import { useLocation } from 'react-router-dom';
+import api from '../script/axiosApi.tsx';
+ 
+function HomeLogin()
+{
+	const login2 = () => {
+		console.log('Hello from myFunction');
+		api.get('/profile').then((response) => {
+			const data = response;
+			const myJSON = JSON.stringify(response.data);
+			console.log(`data response= ${myJSON}`)
+		});
+	  }
+
+	  const location = useLocation();
+
+	const handleButtonClick = () => {
+		const token = localStorage.getItem('token')
+		console.log(`token type= ${typeof token}`);
+		if (token !== null && typeof token === 'string')
+		{
+			console.log(`already token= ${localStorage.getItem('token')}`)
+			return ;
+		}
+		// else
+		// let path = "https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41&redirect_uri=http%3A%2F%2F" + process.env.REACT_APP_BASE_URL + "%3A80%2Fapi%2Fauth%2Flogin&response_type=code"; 
+		let path = "https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41&redirect_uri=http%3A%2F%2F" + process.env.REACT_APP_BASE_URL + "%2Fapi%2Fauth%2Flogin&response_type=code"
+		window.location.replace(path);
+	};
+
+	return (
+		<div className="notClicked">
+			<button onClick={handleButtonClick} className="playButton" >LOGIN</button>
+			{/* <div className ="loginForm">
+	 			<button className="submit" onClick={login2}>test button</button>
+			</div> */}
+			{/* <div className ="loginForm">
+	 			<button className="submit" onClick={() => api.post('/win')}>add win</button>
+			</div>
+			<div className ="loginForm">
+	 			<button className="submit" onClick={() => api.post('/loss')}>add loss</button>
+			</div> */}
+    	</div>
+	);
+}
+
+export default HomeLogin;

containers/react/src/pages/Home.tsx

@@ -6,64 +6,127 @@
 /*   By: apommier <apommier@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/06/09 08:19:04 by apommier          #+#    #+#             */
-/*   Updated: 2023/06/28 17:47:35 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/23 15:58:14 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
+// import { React, useState } from "react";
 import '../styles/Profile.css'
-import RedAlert from "../components/Alert/RedAlert.tsx";
+// import '../styles/App.css'
 import DefaultPicture from "../assets/profile.jpg";
 import WinLoss from "../components/Profile/Win_Loss.tsx";
 import { motion, AnimatePresence } from 'framer-motion'
+// import { AiFillEdit } from 'react-icons/ai'
+// import { GrClose } from 'react-icons/gr'
 import { Link } from "react-router-dom";
 import ModalEdit from "../components/Profile/EditName.tsx";
-import {AiOutlineCloseCircle, AiOutlineHistory} from 'react-icons/ai'
+import {AiOutlineHistory} from 'react-icons/ai'
 import { MdQrCodeScanner, MdOutlinePhotoLibrary } from 'react-icons/md';
 import { GiWingedSword, GiCrownedSkull } from 'react-icons/gi';
+
+// import { Link } from "react-router-dom";
+// import {UserProfile} from "../DataBase/DataUserProfile";
+// import axios from "axios";
 import api from '../script/axiosApi.tsx';
 import { CgEditMarkup } from 'react-icons/cg'
 import { IoCloseCircleOutline } from "react-icons/io5";
-import React, { useState, useEffect } from "react";
+
+// import * as React from 'react';
+// import { useState, useEffect, useParams} from "react";
+import React, { useState, useEffect, useRef, ChangeEventHandler } from "react";
 import { useParams } from 'react-router-dom';
-import {User} from "../../interfaces.tsx"
+import {User, Conv} from "../../interfaces.tsx"
 import YellowAlert from '../components/Alert/YellowAlert.tsx';
+	// axios.get("http://localhost/api")
+	// .then((response) => {
+	// 	response = response.json()
+	// 	response.then((result) => {
+	// 		console.log(result)
+	// 		console.log("ceci est un test")
+	// 	})
+	// })
+
 
 function Profile () {
 	const [user, setUser] = useState<User>();
 	const [isLoading, setIsLoading] = useState<boolean>(true);
 	const [modalOpen, setModalOpen] = useState<boolean>(false);
 	const [mine, setMine] = useState<boolean>(false);
-	const [error, setError] = useState<boolean>(false);
 	const close = () => setModalOpen(false);
-	const closeError = () => setError(false);
 	const open = () => setModalOpen(true);
+
 	const { username } = useParams();
+
+	// const [selectedPhoto, setSelectedPhoto] = useState();
+	// const [selectedPhoto, setSelectedPhoto] = useState(null);
+
 	const [profilePicture, setProfilePicture] = useState('');
+
 	const handleFileChange = async (event: { target: { files: any; }; }) => {
+		// const files = event.target.files;
+		// if (files && files.length > 0) {
 		  const photo = (event.target.files[0]);
+		  console.log("file selected")
 		  if (photo) {
+			console.log("selected photo")
 			  const formData = new FormData();
 			  formData.append('photo', photo);
 			  try {
 				await api.post('/picture', formData);
+				console.log('File uploaded successfully');
 				window.location.reload();
 			  } catch (error) {
-				setError(true);
 				console.error('Error uploading file:', error);
 			  }
-			}
+			} 
+		// }
 	  };
 
+	// const handleUpload = async () => {
+	// 	const formData = new FormData();
+	// 	formData.append('photo', selectedPhoto);
+	// 	try {
+	// 	  await api.post('/picture', formData);
+	// 	  console.log('File uploaded successfully');
+	// 	  window.location.reload();
+	// 	} catch (error) {
+	// 	  console.error('Error uploading file:', error);
+	// 	}
+	//   };
+
+	// const handleUpload = async (event: React.FormEvent) => {
+	// 	event.preventDefault()
+	// 	console.log("up photo")
+	// 	if (selectedPhoto) {
+	// 	console.log("selected photo")
+	// 	  const formData = new FormData();
+	// 	  formData.append('photo', selectedPhoto);
+	// 	  try {
+	// 		await api.post('/picture', formData);
+	// 		console.log('File uploaded successfully');
+	// 		window.location.reload();
+	// 	  } catch (error) {
+	// 		console.error('Error uploading file:', error);
+	// 	  }
+	// 	} else {
+	// 	  console.log('No file selected');
+	// 	}
+	//   };
+
 	useEffect(()=> {
 		const getUser = async ()=>{
-			let pic;
+			console.log(`username= ${username}`)
+			// const pic
+			let pic
 			try{
 				const me = await api.get("/profile")
 				if (!username)
 				{
 					setMine(true);
 					setUser(me.data);
+					console.log(`mine= true = ${mine}`)
 					pic = await api.post("/getPicture", {username: me.data.username}) //good one?
+					// username = me.data.username
 				}
 				else
 				{
@@ -72,7 +135,9 @@ function Profile () {
 					pic = await api.post("/getPicture", {username: username}) //good one?
 
 				}
+				// const pic = await api.get("/picture")//pic du user
 				setProfilePicture(pic.data);
+				// console.log(`user= ${tmpUser.data.username}`)
 				setIsLoading(false)
 			}
 			catch(err){
@@ -84,6 +149,8 @@ function Profile () {
 
 	return (
 		<div className="profile">
+			{/* <img className="profile-pic" src={DefaultPicture} alt="Profile pic" />
+			 */}
 			{profilePicture ? (
 				<img className="profile-pic" src={`data:image/jpeg;base64,${profilePicture}`} />
  			) : (
@@ -93,9 +160,12 @@ function Profile () {
 					{isLoading || !user ? (
         				<h1>Loading...</h1>
       				) : (
-        				<h1 className='user_name'>{user.nickname}</h1>
+        				<h1>{user.nickname}</h1>
       				)}
 	  		</span>
+
+
+
 			  {mine ? (
 			<div>
 				<motion.div >
@@ -106,22 +176,25 @@ function Profile () {
 						<>
 							<label htmlFor="file-input" className="edit_name"><MdOutlinePhotoLibrary/></label>
 							<input type="file" id="file-input" className="file-input" accept="image/*" onChange={handleFileChange} />
-							<AnimatePresence initial={false} onExitComplete={() => null}>
-							{error ? (
-								<RedAlert handleClose={closeError} text={'Error : upload failed'} />
-							): ("")}
-							</AnimatePresence>
 						</>
 					)}
 				</motion.div>
+			
+				{/* <div className="file-upload-container"> */}
+  					{/* <button onClick={handleUpload} className="upload-button">Upload</button> */}
+					  {/* <button onClick={handleUpload} className="upload-button">Upload</button> */}
+				{/* </div> */}
 			</div>
 				  ) : (
 						  <></>
 				)}
+
+
+
 			<AnimatePresence
 			initial={false}
 			onExitComplete={() => null}>
-				{modalOpen && <ModalEdit/>}
+				{modalOpen && <ModalEdit modalOpen={modalOpen} handleclose={close}/>}
 			</AnimatePresence>
 		</div>
 	)
@@ -129,7 +202,8 @@ function Profile () {
 
 function Home () {
 	const [move, setmove ] = useState(false);
-	const [user, setUser] = useState<User>();
+	const [user, setUser] = useState([]);
+
 	const [successQr, setSuccessQr] = useState(false);
 	const [successSword, setSuccessSword] = useState(false);
 	const [successCrown, setSuccessCrown] = useState(false);
@@ -137,21 +211,12 @@ function Home () {
 	const closeSword = () => setSuccessSword(false);
 	const closeCrown = () => setSuccessCrown(false);
 
-	const { username } = useParams();
 
 	useEffect(() => {
 		const fetchSuccess = async () => {
 			try {
-				if (!username)
+				const tmpUser = await api.get("/profile");
-				{
+				setUser(tmpUser.data);
-					const tmpUser = await api.get("/profile");
-					setUser(tmpUser.data);
-				}
-				else
-				{
-					const tmpUser = await api.post("/user", {username: username});
-					setUser(tmpUser.data);
-				}
 			}
 			catch (error)
 			{
@@ -159,7 +224,7 @@ function Home () {
 			}
 		};
 		fetchSuccess();
-	}, []);
+	})
 
     return (
 		<motion.div className="page"
@@ -167,19 +232,19 @@ function Home () {
 		animate={{opacity: 1}}
 		exit={{opacity: -1}}>
 			<div>
-				{user && user.otp_verified ? (
+				{user.otp_verified ? (
 					<MdQrCodeScanner className='success' onClick={() => setSuccessQr(true)}/>
-					 ):("")}
+					 ):("")} 
-				{user && user.win >= 2 ? (
+				{user.win >= 2 ? (
 					<GiWingedSword className="success" onClick={() => setSuccessSword(true)}/>
-					 ):("")}
+					 ):("")} 
-				{user && user.win >= 5 ? (
+
+				{user.win >= 5 ? (
 					<GiCrownedSkull className="success" onClick={() => setSuccessCrown(true)}/>
-					 ):("")}
+					 ):("")} 
 			</div>
 		<div className="home">
-			<motion.div
+			<motion.div animate={{x: move ? -200: 120}}
-				animate={{x: move ? '-50%' : '25%'}}
 				transition={{type: "tween", duration: 0.5}}>
 					<Profile/>
 			</motion.div>
@@ -189,8 +254,9 @@ function Home () {
 			</div>
 			<motion.div
 				className="div_history"
+			// className="history"
 				onClick={ () => setmove(!move)}>
-					<Link to="#" className="history"> {move ? (<AiOutlineCloseCircle/>):(<AiOutlineHistory/>)}  Match History</Link>
+					<Link to="#" className="history"><AiOutlineHistory/>  Match History</Link>
 			</motion.div>
 			<AnimatePresence initial={false} onExitComplete={() => null}>
           		{successQr ? (
@@ -205,8 +271,8 @@ function Home () {
 			  	<YellowAlert handleClose={closeSword} text={"Success: 2 victory ? You won the noobi warrior success!"} icon={3}/>
 			  	) : ("")}
         </AnimatePresence>
-		</motion.div>
+		</motion.div> 
     )
 }
 
-export default Home
+export default Home

containers/react/src/pages/Login42.tsx

@@ -0,0 +1,47 @@
+// import GoogleLogin from 'react-google-login';
+import { useEffect } from 'react';
+import axios from 'axios';
+import React from 'react';
+// import setupLogin from '../script/login42';
+// import React, { useEffect } from 'react';
+
+function Login42()
+{
+	useEffect(() => {
+		console.log("you said yes to connect with 42");
+		const url = new URL(window.location.href);
+		// console.log(`url is= ${url}`);
+		const code = url.searchParams.get('code');
+		console.log(`code is= ${code}`);
+
+		const data = {
+			grant_type: 'authorization_code',
+			// client_id: 'u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41',
+			// client_secret: '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',
+			client_id: process.env.REACT_APP_CLIENT_UID,
+			client_secret: process.env.REACT_APP_API_SECRET,
+			code: code,
+			redirect_uri: 'http://' + process.env.REACT_APP_BASE_URL + '/login42',
+		  };
+		
+		  	
+		axios.post('https://api.intra.42.fr/oauth/token', data)
+		.then(response => {
+    		// handle success response
+    		console.log(response);
+  		})
+		.catch(error => {
+			// handle error response
+			console.error(error);
+		});
+	  }, []);
+
+	return (
+		<div>
+			<p>"COUCOU LOGIN" </p>
+			{/* <script src="../script/login42.js"></script> */}
+		</div>
+	);
+}
+
+export default Login42;

containers/react/src/pages/LoginButton.tsx

@@ -1,22 +0,0 @@
-import '../styles/old.css';
-import '../styles/field.css';
-import React from 'react';
- 
-function HomeLogin()
-{
-	const handleButtonClick = () => {
-		const token = localStorage.getItem('token')
-		if (token !== null && typeof token === 'string')
-			return ;
-		let path = process.env.REACT_APP_INTRA_URL || "";
-		window.location.replace(path);
-	};
-
-	return (
-		<div className="notClicked">
-			<button onClick={handleButtonClick} className="playButton" >LOGIN</button>
-    	</div>
-	);
-}
-
-export default HomeLogin;

containers/react/src/pages/Messages.tsx

@@ -1,9 +1,29 @@
 import React from "react";
+// import Sidebar from '../components/Messages/Sidebar'
 import Chats from "../components/Messages/Chats.tsx"
 import '../styles/Messages.css'
 import { motion } from 'framer-motion'
 
+// import {io} from 'socket.io-client'
+
 function Messages() {
+	// const socket = useRef(io("ws://localhost:8900"))
+
+	// useEffect(() => {
+	// 	setSocket(io("ws://localhost:8900"))
+	// }, [])
+	// const socket = socketIO.connect('http://localhost:4000');
+
+	// axios.get('http://localhost/api/user/id')
+	// 	.then(function());
+
+	// console.log(socket)
+	// useEffect(() => {
+	// 	socket.current.emit("addUser", user._id);
+		// socket.current.on("getUsers", users=>{
+		// 	console.log(users)
+		// })
+	// }, [user])
 	return (
 		<>
 		<motion.div className="home"
@@ -11,6 +31,7 @@ function Messages() {
 		animate={{opacity: 1}}
 		exit={{opacity: 0}}>
 			<div className="container">
+				{/* <Sidebar/> */}
 				<Chats/>
 			</div>
 		</motion.div>

containers/react/src/pages/NewLogin.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import '../styles/field.css';
+// import { useHistory } from 'react-router-dom';
 import { useNavigate } from "react-router-dom";
 
 function PlayButton() {
@@ -14,6 +15,8 @@ function PlayButton() {
 	return (
 		<div className="notClicked" id="canvas_container">
 			<button onClick={handleButtonClick} className="playButton">Play</button>
+			{/* !buttonClicked && <button onClick={handleButtonClick}>Draw on Canvas</button> */}
+
 		</div>
 		);
 }

containers/react/src/pages/QrCode.tsx

@@ -6,14 +6,14 @@ import "../styles/App.css";
 import api from '../script/axiosApi.tsx';
 
 import QRCodeStyling from "qr-code-styling";
-import { AnimatePresence, motion } from 'framer-motion'
+import { motion } from 'framer-motion'
-import RedAlert from "../components/Alert/RedAlert.tsx";
 
 
 
 const qrCode = new QRCodeStyling({
     width: 300,
     height: 300,
+    // image: "../assets/profile.jpg",
     dotsOptions: {
         color: "black",
         type: "rounded"
@@ -28,13 +28,16 @@ const qrCode = new QRCodeStyling({
     });
 
 function QrCode () {
+    // const url = "https://www.youtube.com";
+    // const ref = useRef(null);
 	const ref = useRef<HTMLDivElement>(null);
+	const [user, setUser] = useState(false);
 	const [url, setUrl] = useState("");
 	const [secret, setSecret] = useState(false);
 	const [code, setCode] = useState('');
 	const [activated, setActivated] = useState(false);
-	const [err, setErr] = useState(false);
+
-	const closeErr = () => setErr(false);
+	// const history = useHistory();
 
     useEffect(() => {
 		if (ref.current)
@@ -42,6 +45,7 @@ function QrCode () {
 		const getUser = async ()=>{
 			try{
 				const tmpUser = await api.get("/profile");
+				setUser(tmpUser.data);
 				if (tmpUser.data.otp_verified)
 				{
 					setActivated(true);
@@ -50,6 +54,9 @@ function QrCode () {
 				const otpData = await api.post("/otp");
 				setUrl(otpData.data.otpauth_url);
 				setSecret(otpData.data.base32_secret);
+				// const tmpUser = await api.get("/profile")
+				// console.log("test")
+				// console.table(convs);
 			}
 			catch(err){
 				console.log(err);
@@ -65,23 +72,31 @@ function QrCode () {
 
 
 	const handleKeyPress = async (e: { key: string; })=>{
+		// console.log(`e in press= ${e.key}`)
 		if (e.key !== "Enter")
 			return ;
 		try{
+			console.log("code= ", code)
 			const res = await api.post("/verifyOtp", {token: code})
-			if (!res.data)
+			console.log("res= ", res.data)
-			{
+			console.log("res= ", res)
-				setErr(true);
-			}
 			if (res.data === 1)
 			{
-				const path = 'http://' + process.env.REACT_APP_BASE_URL + '/';
+				console.log("registered")
+				// history.push('/login')
+
+				const path = 'http://' + process.env.REACT_APP_BASE_URL + '/'; 
 				window.history.pushState({}, '', path);
 				window.location.reload();
+
 			}
 			else
-				console.log("Bad code")
+			{
-		}
+				console.log("bad code")
+				//alert ?? retry
+			}
+			// redirect('/test')
+		} 
 		catch(err){
 			 console.log(err)
 		}
@@ -90,6 +105,8 @@ function QrCode () {
 	const handleDesactivate = async () => {
 		try {
 			await api.post("/deleteOtp")
+			// const path = 'http://' + process.env.REACT_APP_BASE_URL + '/'; 
+			// window.history.pushState({}, '', path);
 			window.location.reload();
 		} catch(err) {
 			console.log(err);
@@ -97,6 +114,18 @@ function QrCode () {
     };
 
     return (
+		// <motion.div className="page"
+		// initial={{opacity: -1}}
+		// animate={{opacity: 1}}
+		// exit={{opacity: -1}}>
+        //     <h1>QRcode</h1>
+        //     <h3>{secret}</h3>
+        //     <div ref={ref} />
+        //     <input type="text" className="qr" placeholder="Type The Code"/>
+        //     {}
+
+		// </motion.div>
+
 		<motion.div
 		className="page"
 		initial={{ opacity: -1 }}
@@ -109,6 +138,7 @@ function QrCode () {
 			<h3>{secret}</h3>
 			<h1>Or Scan The QRCode</h1>
 			<div ref={ref} />
+			{/* <div>{ref}</div> */}
 		  </>
 		)}
 
@@ -118,7 +148,7 @@ function QrCode () {
           <h1>Double Auth Validation</h1>
           <input
             onKeyDown={handleKeyPress}
-            type="number"
+            type="text"
             className="qr"
             placeholder="6 Digits Code"
             value={code}
@@ -126,16 +156,27 @@ function QrCode () {
           />
         </>
       ) : (
-        <button className="desactivate" onClick={handleDesactivate}>Desactivate 2FA</button>
+        <button onClick={handleDesactivate}>Desactivate 2FA</button>
       )}
-	  <AnimatePresence
-			initial={false}
-			onExitComplete={() => null}>
-				{err ? (<RedAlert handleClose={closeErr} text="Error: Bad intput. Try again"/>):("")}
-			</AnimatePresence>
     </>
+
+		{/* {!localStorage.getItem('token') && (
+		<>
+		  <h1>Double Auth</h1>
+		  <input onKeyDown={handleKeyPress}
+		  		type="text" 
+				className="qr" 
+				placeholder="6 Digits Code"
+				onChange={(e) => setCode(e.target.value)}
+		  />
+		</>
+		) : (<button onClick={ handleDesactivate }>Desactivate 2FA</button>)}
+		 */}
+		{/* {!activated && (
+		  <button onClick={() => setActivated(true)}>Activate</button>
+		)} */}
 	  </motion.div>
     )
 }
 
-export default QrCode
+export default QrCode

containers/react/src/pages/Social.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+function Social (){
+    return (
+        <div>je suis la partie social</div>
+    )
+}
+
+export default Social

containers/react/src/pages/canvas.tsx

@@ -1,6 +1,12 @@
-// import { useEffect } from 'react';
+// import io from 'socket.io-client';
+
 import api from '../script/axiosApi.tsx';
+
+// import { useEffect, useRef } from 'react';
 import io from 'socket.io-client';
+// const socket = io('http://192.168.1.14:4000');
+// const socket = io('http://86.209.110.20:4000');
+// const socket = io('http://172.29.113.91:4000');
 
 interface GameProps {
 	privateParty: boolean,
@@ -10,20 +16,44 @@ interface GameProps {
 
 function DrawCanvas(option: number, gameParam: GameProps) {
 
+	console.log(`option= ${option}`);
 	const superpowerModifier = option & 1;  // Retrieves the superpower modifier
+    const obstacleModifier = (option >> 1) & 1;  // Retrieves the obstacle modifier
     const speedModifier = (option >> 2) & 1;  // Retrieves the speed modifier
 
+    console.log(`superpowerModifier = ${superpowerModifier}`);
+    console.log(`obstacleModifier = ${obstacleModifier}`);
+    console.log(`speedModifier = ${speedModifier}`);
+	
+	
+	
+	// const socketRef = useRef(null);
+	// socketRef.current = io('http://localhost:4000');
+	
 	function launchGame()
 	{
 		if (!gameParam.privateParty)
+		{
+			console.log("laucnh matchmaking")
 			matchmaking();
+		}
 		else if (!gameParam.gameId)
+		{
+			console.log("laucnh private")
 			privateParty();
+		}
 		else
+		{
+			console.log("join private")
 			joinPrivateParty();
+		}
 	}
 	
-	const canvas = document.getElementById('myCanvas') as HTMLCanvasElement | null;
+	// const socket = socketRef.current
+	console.log("start function");
+	
+	// let canvas: HTMLElement | null;
+	const canvas = document.getElementById('myCanvas') as HTMLCanvasElement | null;;
 	if (!canvas)
 		return ;
 
@@ -31,7 +61,15 @@ function DrawCanvas(option: number, gameParam: GameProps) {
 	if(!ctx)
 		return ;
 	
-	const socket = io('http://' + process.env.REACT_APP_SOCKET_URL + ':4000', { transports: ['polling'] });
+	const socket = io('http://localhost:4000', { transports: ['polling'] });
+	// useEffect(() => {
+		// 	console.log("useeffect?????????????????")
+	// 	return () => {
+	// 		console.log("000000000000000000000000000000000")
+	// 	  socketRef.current.disconnect();
+	// 	};
+	//   }, []);
+
 
 //========================================================================================================
 //========================================================================================================
@@ -47,7 +85,9 @@ function DrawCanvas(option: number, gameParam: GameProps) {
 
 	//general canvas
 	let running = true;
+	const scale = window.devicePixelRatio; 
 	canvas.width = canvas.offsetWidth;
+	// canvas.height = canvas.width * 0.7
 	canvas.height = canvas.offsetHeight;
 
 	//paddle var
@@ -84,8 +124,6 @@ function DrawCanvas(option: number, gameParam: GameProps) {
 	const maxScore = 5;
 	
 	let lastUpdateTime = performance.now();
-	let lastPower = 0;
-
 
 	const maxAngle = 50;
 	let maxBounceAngle = (maxAngle * Math.PI) / 180;
@@ -98,14 +136,31 @@ function DrawCanvas(option: number, gameParam: GameProps) {
 
 socket.on('pong:win', async () => {
 	myScore = maxScore;
-	await api.post('/rmGame');
+	console.log("instant win opponent disconnect")
+	// const data = {
+	// 	myScore: myScore,
+	// 	opScore: hisScore,
+	// 	opName: opName,
+	// 	opRank: opRank,
+	// };
+
+	// await api.post('/win', data);
+	console.log("after request1")
+	await api.post('/status', {status: 1});
+	console.log("after request2")
+	//disconnect ?
 	running = false;
 	socket.emit('pong:disconnect', {id: myId});
+	console.log("before reload")
+	// window.location.replace("http://" + process.env.REACT_APP_BASE_URL + "/pong");
+	// window.location.reload();
 	return ;
+	// console.log("send all ?? win");
 
 });
 
 socket.on('pong:privateId', async (data) => {
+	console.log("private id = ", data)
 	try{
 		await api.post("/partyInvite", {username: gameParam.username, gameId: data});
 	} catch(err) {
@@ -114,14 +169,18 @@ socket.on('pong:privateId', async (data) => {
 });
 
 socket.on('pong:gameId', async (data) => {
-	gameId = data.gameId;
+	console.log("gameId received");
+	gameId = data;
+  
 	try {
 	  let response = await api.get('/profile');
 	  const myName = response.data.username;
 	  response = await api.get('/rank');
 	  await api.post('/status', {status: 2});
 	  opRank = response.data
-
+	  console.log(`rank= ${opRank}`);
+	  console.log(`myname= ${myName}`);
+  
 	  const info = {
 		id: myId,
 		name: myName,
@@ -129,19 +188,18 @@ socket.on('pong:gameId', async (data) => {
 		rank: opRank,
 	  };
   
+	  console.log("emit to name");
 	  socket.emit('pong:name', info);
-	  if (data.id === myId)
-	  	vX = 0.0005;
-	  else
-	  	vX = -0.0005;
 	} catch (error) {
 	  console.log(error);
+	  // Handle error here
 	  return;
 	}
   });
 
 socket.on('pong:name', (data) => {
-	opName = data.name;
+	opName = data;
+	console.log(`opponent Name= ${opName}`)
 });
 
 socket.on('connect', () => {
@@ -149,7 +207,9 @@ socket.on('connect', () => {
 });
 
 socket.on('pong:clientId', (data) => {
+	console.log("receive id")
 	myId = data;
+	console.log(`id is= ${myId}`)
 	launchGame();
 });
 
@@ -162,32 +222,36 @@ socket.on('pong:info', (data) => {
 	vY = data.vY;
 });
 
+
 socket.on('pong:paddle', (data) => {
+	console.log("paddle info receive")
 	oPaddleY = (data.paddleY / data.height) * canvas.height
 });
 
 socket.on('pong:power', (data) => {
+	console.log("paddle info receive")
 	
 	oPaddleY = 0;
 	opPaddleHeight = canvas.height;
 
 	setTimeout(() => {
+		// code à exécuter après 5 secondes
 		opPaddleHeight = canvas.height * 0.25;
 		oPaddleY = canvas.height / 2 - paddleHeight / 2;
+		console.log('Cinq secondes se sont écoulées.');
 	}, 5000);
+	// oPaddleY = (data.paddleY / data.height) * canvas.height
 });
 
 socket.on('pong:point', (data) => {
+	// hisScore += 1;
+	console.log("gain point");
+	// if (vX != 0)
+	// {
+		// console.log("up point");
 	myScore = data.point;
-	vX = -0.0005;
+	// }
-	vY = 0;
+	vX = 0;
-	ballX = canvas.width / 2;
-	ballY = canvas.height / 2;
-});
-
-socket.on('pong:hisPoint', (data) => {
-	hisScore = data.point;
-	vX = -0.0005;
 	vY = 0;
 	ballX = canvas.width / 2;
 	ballY = canvas.height / 2;
@@ -201,6 +265,7 @@ socket.on('pong:hisPoint', (data) => {
 
 	function matchmaking()
 	{
+		console.log(`id ion matcj= ${myId}`)
 		const info = {
 			id: myId,
 			option: option,
@@ -210,6 +275,7 @@ socket.on('pong:hisPoint', (data) => {
 
 	function privateParty()
 	{
+		console.log(`id private party= ${myId}`)
 		const info = {
 			id: myId,
 			option: option,
@@ -219,6 +285,7 @@ socket.on('pong:hisPoint', (data) => {
 
 	function joinPrivateParty()
 	{
+		console.log(`id private party= ${myId}`)
 		const info = {
 			id: myId,
 			gameId: gameParam.gameId,
@@ -249,31 +316,13 @@ socket.on('pong:hisPoint', (data) => {
 	{
 		if (!gameId || !canvas)
 			return ;
+		console.log("send point");
 		const info = {
 			id: myId,
 			gameId: gameId,
 			point: hisScore,
 		}
 		socket.emit('pong:point', info);
-		vX = 0.0005;
-	}
-
-	function send_my_point()
-	{
-		if (!gameId || !canvas)
-			return ;
-		const info = {
-			id: myId,
-			gameId: gameId,
-			point: myScore,
-		}
-		socket.emit('pong:myPoint', info);
-		myScore++;
-		vX = 0.0005;
-		vY = 0;
-		ballX = canvas.width / 2;
-		ballY = canvas.height / 2;
-		send_forced_info();
 	}
 
 	function send_paddle_info()
@@ -283,6 +332,7 @@ socket.on('pong:hisPoint', (data) => {
 		const info = {
 			id: myId,
 			paddleY: paddleY,
+			// width: canvas.width,
 			height: canvas.height,
 			gameId: gameId,
 		};
@@ -328,12 +378,14 @@ socket.on('pong:hisPoint', (data) => {
 
 	function drawcenter()
 	{
+		// ctx.restore();
 		if (!ctx || !canvas)
 			return ;
 		ctx.fillStyle = 'white';
 		ctx.fillRect(canvas.width / 2 - ctx.lineWidth / 2, 0, canvas.width / 300, canvas.height);
 		
 		ctx.beginPath();
+		// ctx.lineWidth = 5;
 		ctx.arc(canvas.width / 2, canvas.height / 2, circleRadius, 0, 2 * Math.PI);
 		ctx.strokeStyle = 'white'; // couleur de dessin
 		ctx.stroke(); // dessin du contour
@@ -359,6 +411,7 @@ socket.on('pong:hisPoint', (data) => {
 			return ;
 		ctx.beginPath();
 		ctx.arc(ballX, ballY, ballRadius, 0, 2 * Math.PI);
+		// ctx.lineWidth = 2;
 		ctx.fillStyle = 'red ';
 		ctx.fill();
 	}
@@ -370,48 +423,52 @@ socket.on('pong:hisPoint', (data) => {
 //========================================================================================================
 //========================================================================================================
 
+
+// while (!gameId)
+// 	;
+
+  // Define a function to stop the drawing process
   const stopDrawCanvas = async () => {
     running = false;
 
+	console.log("stopDrawCanvas 1")
+
 	if (gameParam.privateParty && !gameId) //delete invite
 	{
+		console.log("stopDrawCanvas2")
 		try{
-				await api.post('/rmGame');
+			// const info = {
-				await api.post("deleteInvite", {username: gameParam.username});
+				// 	id: myId,
+				// 	option: option,
+				// };
+				
+				await api.post("deleteInvite", {username: gameParam.username})
 		}
 		catch (err){
 			console.log(err)
 		}
 	}
-	else 
-	{
-		const data = {
-			myScore: myScore,
-			opScore: 5,
-			opName: opName,
-			opRank: opRank,
-		};
-		await api.post('/loss', data);
-	}
-
 	socket.emit('pong:disconnect', {id: myId});
 	window.location.replace("http://" + process.env.REACT_APP_BASE_URL + "/pong");
+	// window.location.reload();
+    // Perform any necessary cleanup tasks
+    // ...
   };
 
 async function draw(timestamp: number)
 {
-	if (!running)
+	console.log("turning, running= ", running);
-	{
+	if (!running)	
-		window.location.replace("http://" + process.env.REACT_APP_BASE_URL + "/pong")
 		return ;
-	}
 	if (!gameId || !canvas )
 	{
+		// console.log("nogameid score= ", myScore);
 		requestAnimationFrame(draw);
 		return ;
 	}
 	if (myScore === maxScore || hisScore === maxScore)
 	{
+		console.log("maxScore!!!!")
 		const data = {
 			myScore: myScore,
 			opScore: hisScore,
@@ -421,16 +478,22 @@ async function draw(timestamp: number)
 		if (myScore === maxScore)
 		{
 			await api.post('/win', data);
-			await api.post('/rmGame');
+			await api.post('/status', {status: 1});
+			//disconnect ?
 			socket.emit('pong:disconnect', {id: myId});
+
+			console.log("send all ?? win");	
 		}
 		else
 		{
 			await api.post('/loss', data);
-			await api.post('/rmGame');
+			await api.post('/status', {status: 1});
 			socket.emit('pong:disconnect', {id: myId});
+			//disconnect ?
+			console.log("send loose");
 		}
 		window.location.replace("http://" + process.env.REACT_APP_BASE_URL + "/pong");
+		// window.location.reload();
 		return ;
 	}
 
@@ -441,6 +504,7 @@ async function draw(timestamp: number)
 
 	if (!ctx)
 		return ;
+		// requestAnimationFrame(draw);
 	ctx.clearRect(0, 0, canvas.width, canvas.height);
 	drawPaddle();
 	drawcenter();
@@ -493,7 +557,10 @@ async function draw(timestamp: number)
 			if (ballY <= paddleY + paddleHeight + ballRadius && ballY >= paddleY - ballRadius)//touch paddle
 			{
 				if (ballX +  ballRadius > paddleX && ballX - ballRadius < paddleX + paddleWidth)
+				{
+					console.log("hehe here")
 					ballX = paddleX + paddleWidth + ballRadius;
+				}
 				updateVector();
 			}
 			send_info();
@@ -501,11 +568,13 @@ async function draw(timestamp: number)
 		}
 		if (ballY - ballRadius - 2 <= 0 || ballY + ballRadius + 2 >= canvas.height) //touch up or down wall
 		{
+			// if ()
 			vY = -vY;
 			if (ballY > (canvas.height / 2))//down wall
 				ballY = canvas.height - ballRadius - 2
 			else
 				ballY = ballRadius + 2
+			// send_info();
 		}
 	}
 
@@ -517,19 +586,40 @@ async function draw(timestamp: number)
 		{
 			if (ballY <= paddleY + paddleHeight + ballRadius && ballY >= paddleY - ballRadius)
 			{
+				console.log('true hehe');
 				ballX = paddleX + paddleWidth + ballRadius;
 				updateVector();
 				return ;
 			}
 			ballX = canvas.width / 2;
 			ballY = canvas.height / 2;
-			vX = 0.0005;
+			vX = 0;
 			vY = 0;
 			hisScore += 1;
 			send_point();
+			// send_forced_info();
 		}
-		if (ballX > (canvas.width * 1.2) && ballX - (vX * 2) > canvas.width)
+		if (ballX > canvas.width)
-			send_my_point();
+		{
+			// if (ballX > canvas.width * 2)
+				// socket.emit
+			// console.log("win point")
+			// if (ballY <= paddleY + paddleHeight + ballRadius && ballY >= paddleY - ballRadius)
+			// {
+			// 	console.log('true hehe');
+			// 	ballX = paddleX + paddleWidth + ballRadius;
+			// 	updateVector();
+			// 	return ;
+			// }
+			// ballX = canvas.width / 2;
+			// ballY = canvas.height / 2;
+			// vX = 0;
+			// vY = 0;
+			// hisScore += 1;
+			// send_point();
+			// // send_forced_info();
+		}
+
 	}
 
 
@@ -556,14 +646,21 @@ async function draw(timestamp: number)
 
     document.addEventListener("touchmove", event => {
         const touchY = event.touches[0].pageY;
-        const newY = touchY > lastTouchY ? paddleY - (lastTouchY - touchY) : paddleY + (touchY - lastTouchY);
 
+        // if (!lastTouchY)
+		// {
+		// 	vX = -0.01;
+        //     lastTouchY = touchY;
+        //     return;
+        // }
+        const newY = touchY > lastTouchY ? paddleY - (lastTouchY - touchY) : paddleY + (touchY - lastTouchY);
         updatePaddlePosition(newY);
         lastTouchY = touchY;
 		send_paddle_info();
     });
 
 	document.addEventListener("keydown", event => {
+		// console.log(event.code);
 		if (event.code === "ArrowUp")
 		{
 			if ((paddleY - paddleSpeed) > 0)
@@ -576,26 +673,55 @@ async function draw(timestamp: number)
 				paddleY += paddleSpeed; // déplacer la raquette vers le bas
 			send_paddle_info();
 		}
-		else if (event.code === "KeyW")
+		else if (event.code === "Space")//space
+		{
+			console.log('vx change to -1');
+			vX = -0.0001;
+
+			// ballSpeed = 0.0001;
+			vY = 0;
+			send_forced_info();
+			// vX = 0.0001;
+		}
+		else if (event.code === "KeyE")
+		{
+			// console.log('vx change to -1');
+			vX = 0;
+			vY = 0;
+			ballX = canvas.width / 2;
+			ballY = canvas.height / 2;
+			send_forced_info();
+		}
+		else if (event.code === "KeyQ" )
+		{
+			if (vX < 0.003 * canvas.width && vX > -0.003 * canvas.width)
+			{
+				if (vX > 0)
+					vX += 0.0001;
+				else
+					vX -= 0.0001;
+			}
+			send_forced_info();
+			// console.log(`vx = ${vX}`);
+		}
+		else if (event.code === "KeyR")
 		{
-			let date = new Date();
-			if (date.getTime() - lastPower < 15000)//10000 + 5000
-				return ;
 			if (!superpowerModifier)
 				return ;
 			paddleY = 0;
 			paddleHeight = canvas.height;
 			use_power();
 			setTimeout(() => {
+				// code à exécuter après 5 secondes
 				paddleHeight = canvas.height * 0.25;
 				paddleY = canvas.height / 2 - paddleHeight / 2;
+				console.log('Cinq secondes se sont écoulées.');
 			  }, 5000);
-			date = new Date();
-			lastPower = date.getTime();
 		}
 	});
 
 	requestAnimationFrame(draw);
+	console.log("retuuuuuuuuuuurn")
 	return (stopDrawCanvas);
 }
 

containers/react/src/pages/index.tsx

@@ -1,24 +0,0 @@
-
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-import Header from '../components/Header.tsx';
-import Head from './Head.tsx';
-import App from '../components/App.tsx';
-import { BrowserRouter } from 'react-router-dom';
-
-import './styles/index.css';
-import './styles/App.css'
-
-ReactDOM.render(
-  <html >
-     	<Head />
-   	<BrowserRouter>
-   	<Header />
-    	<App />
-   	</BrowserRouter>
-  </html>,
-  document.getElementById('root') as HTMLElement
-);
-
-

containers/react/src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

containers/react/src/script/axiosApi.tsx

@@ -1,9 +1,30 @@
 
 import axios from 'axios';
 
+function getToken() {
+	const token = localStorage.getItem('token');
+	if (typeof token === 'string') {
+		console.log("is a string !!!")
+	  }
+	return token;
+}
+
+console.log(`getToken = ${getToken()}`)
+console.log(`Bearer ${localStorage.getItem("token")}`)
+
+// const test = "192.168.1.19"
+// const url = 'http://' + process.env.REACT_APP_BASE_URL + '/api'
+// const url = 'http://' + test + '/api'
+
+// console.log("url= ", url)
+// console.log("test= ", test)
+// console.log("env= ", process.env.REACT_APP_BASE_URL)
+
 let api = axios.create({
+//   baseURL: 'http://localhost/api', 
 baseURL: 'http://' + process.env.REACT_APP_BASE_URL + '/api', 
   headers: {
+	//   Authorization: `Bearer ${getToken()}`,
 		Authorization : `Bearer ${localStorage.getItem("token")}`
 	},
   withCredentials: true,

containers/react/src/script/login.tsx

@@ -0,0 +1,13 @@
+// export const login()
+// {
+//     alert("Le bouton a été cliqué !");
+//     var formulaire = document.getElementById("loginForm");
+//     formulaire.submit();
+// }
+
+export const login = () => {
+	console.log('Hello from myFunction');
+    // alert("Le bouton a été cliqué !");
+    var formulaire = document.getElementById("loginForm");
+    formulaire.submit();
+  }

containers/react/src/script/login42.tsx

@@ -0,0 +1,7 @@
+// function setupLogin()
+// {	
+// 	// alert("Le bouton a été cliqué !");
+// 	console.log('Hello from login42');
+// }
+
+// export default setupLogin;

containers/react/src/script/tokenSuccess.tsx

@@ -1,20 +1,19 @@
 import { useLocation } from 'react-router-dom';
 import { useState, useEffect } from 'react'
 import queryString from 'query-string';
+import api from "./axiosApi.tsx";
 import axios from 'axios';
-import React from 'react';
-
-import {User} from "../../interfaces.tsx"
 
 function SuccessToken() {
 	const location = useLocation();
 	const { data } = queryString.parse(location.search);
 	const [code, setCode] = useState('');
-	const [user, setUser] = useState<User>();
+	const [user, setUser] = useState(false);
   
 	useEffect(() => {
 	  if (!data) {
-		return ;
+		console.log("No data");
+		return;
 	  }
   
 	  const cleanData = data.slice(1, -1); // Declare cleanData here
@@ -38,10 +37,15 @@ function SuccessToken() {
 	  getUser();
 	}, [data]);
   
-	const handleKeyPress = async (e: { key: string; })=>{
+	const handleKeyPress = async (e)=>{
+		// console.log(`e in press= ${e.key}`)
 		if (e.key !== "Enter")
 			return ;
 		try{
+			console.log("code= ", code)
+			// const res = await api.post("/verifyOtp", {token: code})
+
+
 			const res = await axios({
 				method: 'POST',
 				url: 'http://' + process.env.REACT_APP_BASE_URL + '/api/verifyOtp',
@@ -52,13 +56,28 @@ function SuccessToken() {
 				data: { token: code }
 			  });
 
+			console.log("res= ", res.data)
+			console.log("res= ", res)
 			if (res.data === 1)
 			{
+				console.log("registered")
+				// history.push('/login')
+	
 				localStorage.setItem('token', `${cleanData}`);
+				console.log(`prout token2= ${localStorage.getItem('token')}`);
 				window.location.replace("http://" + process.env.REACT_APP_BASE_URL + "/pong");
+
+				// const path = 'http://' + process.env.REACT_APP_BASE_URL + '/'; 
+				// window.history.pushState({}, '', path);
+				// window.location.reload();
+	
 			}
 			else
-				console.log("Bad code")
+			{
+				console.log("bad code")
+				//alert ?? retry
+			}
+			// redirect('/test')
 		} 
 		catch(err){
 			 console.log(err)
@@ -68,14 +87,16 @@ function SuccessToken() {
 
   
 	if (!user) {
+	  // Render a loading indicator or return null while user is being fetched
 	  return <h1>Loading...</h1>;
 	}
-	if (!data)
+  
-		return (<></>);
 	const cleanData = data.slice(1, -1); // Declare cleanData here as well
   
 	if (!user.otp_verified) {
+	  console.log("false");
 	  localStorage.setItem('token', `${cleanData}`);
+	  console.log(`prout token2= ${localStorage.getItem('token')}`);
 	  window.location.replace("http://" + process.env.REACT_APP_BASE_URL + "/pong");
 	  return null; // or return a message or component indicating not verified
 	}
@@ -95,4 +116,132 @@ function SuccessToken() {
 	  );
 	}
 	
-	export default SuccessToken;
+	export default SuccessToken;
+
+// function SuccessToken() {
+
+//   const location = useLocation();
+//   const { data } = queryString.parse(location.search);
+
+//   if ( !data)
+//   {
+// 	console.log("no data")
+//   	return ;
+//   }
+//   const cleanData = data.slice(1, -1);
+
+
+//   const [code, setCode] = useState('');
+//   const [user, setUser] = useState(false);
+
+//   useEffect(()=> {
+
+// 	const getUser = async ()=>{
+// 		try {
+// 			// const tmpUser = await api.get("/profile");
+
+// 			const tmpUser = await axios({
+// 				method: 'GET',
+// 				url: 'http://' + process.env.REACT_APP_BASE_URL + '/api/profile',
+// 				headers: {
+// 				  Authorization: `Bearer ${cleanData}`,
+// 				},
+// 				withCredentials: true,
+// 			  });
+// 			  setUser(tmpUser.data);
+
+// 			// setUser(tmpUser.data);
+// 			// if (tmpUser.data.otp_verified)
+// 			// {
+// 			// 	console.log("true");
+// 			// 	return (
+// 			// 		<>
+// 			// 		<h1>Double Auth</h1>
+// 			// 		<input
+// 			// 		  onKeyDown={handleKeyPress}
+// 			// 		  type="text"
+// 			// 		  className="qr"
+// 			// 		  placeholder="6 Digits Code"
+// 			// 		  value={code}
+// 			// 		  onChange={(e) => setCode(e.target.value)}
+// 			// 		/>
+// 			// 	  </>
+// 			// 	)
+// 			// }
+// 			// else 
+// 			// {
+// 			// 	console.log("false");
+// 			// 	localStorage.setItem('token', `${cleanData}`);
+// 			// 	console.log(`prout token2= ${localStorage.getItem('token')}`)
+// 			// 	window.location.replace("http://" + process.env.REACT_APP_BASE_URL + "/pong");
+// 			// }
+// 		} catch(err) {
+// 			console.log(err)
+// 		}
+// 	}
+// 	getUser();
+//   }, []);
+
+//   const handleKeyPress = async (e)=>{
+// 	// console.log(`e in press= ${e.key}`)
+// 	if (e.key !== "Enter")
+// 		return ;
+// 	try{
+// 		console.log("code= ", code)
+// 		const res = await api.post("/verifyOtp", {token: code})
+// 		console.log("res= ", res.data)
+// 		console.log("res= ", res)
+// 		if (res.data === 1)
+// 		{
+// 			console.log("registered")
+// 			// history.push('/login')
+
+// 			const path = 'http://' + process.env.REACT_APP_BASE_URL + '/'; 
+// 			window.history.pushState({}, '', path);
+// 			window.location.reload();
+
+// 		}
+// 		else
+// 		{
+// 			console.log("bad code")
+// 			//alert ?? retry
+// 		}
+// 		// redirect('/test')
+// 	} 
+// 	catch(err){
+// 		 console.log(err)
+// 	}
+//   }
+
+
+//   console.log("start while...")
+//   while(user === false)
+//   	;
+//   console.log("end while")
+//   if (!user.otp_verified)
+//   {
+// 	console.log("false");
+// 	localStorage.setItem('token', `${cleanData}`);
+// 	console.log(`prout token2= ${localStorage.getItem('token')}`)
+// 	window.location.replace("http://" + process.env.REACT_APP_BASE_URL + "/pong");
+// 	return ;
+//   }
+  
+//   return (
+// 	  <>
+// 		<h1>Double Auth</h1>
+// 		<input
+// 		  onKeyDown={handleKeyPress}
+// 		  type="text"
+// 		  className="qr"
+// 		  placeholder="6 Digits Code"
+// 		  value={code}
+// 		  onChange={(e) => setCode(e.target.value)}
+// 		/>
+// 	  </>
+//   )
+
+
+// }
+
+// export default SuccessToken;

containers/react/src/styles/App.css

@@ -5,41 +5,19 @@
   background-color: black;
   height: 100%;
 }
-input.qr::-webkit-outer-spin-button,
+
-input.qr::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
 input.qr{
-  width: auto;
+  width: 20%;
   border-radius: 5px;
   background-color: rgb(0, 0, 0);
   margin : 1%;
-  border-color:rgb(42, 41, 41);
+  color:white;
-  border-style: solid;
-  border-width: 1px;
-  color: #ccc;
 }
 
-.desactivate {
-    margin: 20%;
-    color: ghostwhite;
-    outline: 0;
-    border-radius: 100px;
-    padding: 2%;
-    background-image: linear-gradient(90deg, #5843e4, #5a0760);
-    border: 0;
-	font-size: x-large;
-}
 .App-logo {
   height: 40vmin;
   pointer-events: none;
 }
-.centermargin
-{
-  margin-left: 40px;
-  margin-right: 40px;
-}
 
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
@@ -70,9 +48,3 @@ input.qr{
     transform: rotate(360deg);
   }
 }
-
-.friendRequest {
-	margin-left: 4vh;
-	stroke-width: 0.5;
-	font-size: x-large;
-}

containers/react/src/styles/Game.css

@@ -3,10 +3,10 @@
 	margin: 50px;
 }
 
-
 .rank_elements {
 	border-width:1px;
 	border-style:solid;
+	/* background-color: #5843e4; */
 	border-color: grey;
 	/* overflow: scroll; */
 	padding: 5px 100px;
@@ -14,23 +14,15 @@
 }
 
 .scroll {
+	/* border:3px; */
+	/* background-color: #5843e4; */
+	/* border-color: white; */
 	overflow: scroll;
-	height: 68vh;
+	height: 70vh;
 }
 
 .profilePic{
-	margin-left: 10px;
 	height: 30px;
 	width: 30px;
 	border-radius: 50%;
-}
+}
-
-@media screen and (max-width: 755px){
-	.game{
-		display: grid;
-		height: 20vh;
-	}
-	.scroll{
-		height: 20vh;
-	}
-  }

containers/react/src/styles/Header.css

@@ -1,7 +1,10 @@
 .Header {
 	background-image: linear-gradient(90deg, #5843e4, #5a0760);
+	/* background-color: blue; */
+
 	height: 80px;
 	display: flex;
+	/* justify-content: start; */
 	align-items: center;
 }
 
@@ -19,9 +22,13 @@
 	display: grid;
 	justify-content: center;
 	position: fixed;
-	top: 0;
+	top: 0; 
 	left: 0;
 	transition: 350ms;
+	/* margin-top: 10px; */
+
+	/* left: -100%; */
+	/* transition: 850ms; */
 }
 
 .nav-menu.active {
@@ -31,8 +38,10 @@
 
 .nav-text {
 	display: flex;
+	/* justify-content: start; */
 	align-items:  center;
 	padding: 8px 0px 8px 16px;
+
 	list-style: none;
 	height: 60px;
 }
@@ -45,7 +54,9 @@
 	height: 100%;
 	display: flex;
 	align-items: center;
+	/* padding: 0 16px; */
 	padding: 8px 8px 8px 8px;
+
 	border-radius: 20px;
 }
 
@@ -62,6 +73,7 @@
 	width: 100%;
 	height: 80px;
 	display: flex;
+	/* justify-content: start; */
 	align-items: center;
 }
 
@@ -80,12 +92,17 @@ span {
 .success {
 	height: 2%;
 	width: 2%;
+	/* border: solid; */
 	margin-top: 1%;
 	margin: 3vh;
+	/* margin-bottom: -12vh; */
+	/* border-color: black; */
+	/* border-radius: 50%; */
 }
 
 .header-pic{
 	text-align: end;
+	/* id: right; */
 }
 
 .footer {
@@ -105,9 +122,9 @@ span {
 	left: 0;
 	height: 100%;
 	width: 100%;
+	/* background: #000000e1; */
 	backdrop-filter: blur(1.5rem);
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	z-index: 1;
+}
-}

containers/react/src/styles/Messages.css

@@ -1,10 +1,10 @@
 .home{
 	background-color: rgb(0, 0, 0);
-	height: 70vh;
+	height: 90vh;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-
+	
 }
 
 select{
@@ -19,8 +19,7 @@ select{
 	border: 0!important;
 	margin: 5px;
 	font-size: 18px;
-	padding: 5px;
+	border-radius: 6px;
-	border-radius: 1000px;
 }
 
 .modal{
@@ -55,14 +54,18 @@ select{
 	height: 74vh;
 	width: 30%;
 	overflow: scroll;
-	border-radius: 0px 0px 0px 10px;
+	/* width: 2rem; */
+	/* height: 4rem; */
 }
 
 .messages_box{
 	background-color: rgb(0, 0, 0);
+	/* height: 90vh; */
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	/* position:relative;	 */
+	
 }
 
 .container{
@@ -91,8 +94,11 @@ select{
 }
 
 .navbar{
+	/* width: clamp(50%, 500px, 20%); */
+	/* height: min(50%, 100px); */
 	display: flex;
 	align-items: center;
+	/* background-color: yellow; */
 	background-image: linear-gradient(90deg, #5843e4, #5a0760);
 	color: white;
 	padding: 3px;
@@ -100,16 +106,6 @@ select{
 	margin-top: 0px;
 }
 
-.navbarSocial{
-	display: flex;
-	align-items: center;
-	margin: 10px;
-	background-image: linear-gradient(90deg, #5843e4, #5a0760);
-	color: white;
-	padding: 3px;
-	border-radius: 100px;
-}
-
 .pic{
 	height: 35px;
 	width: 35px;
@@ -131,17 +127,20 @@ select{
 	width: 50px;
 	border-radius: 50%;
 	object-fit: cover;
+	/* margin-right: 10px; */
 }
 
 .messages{
+	background-color: rgb(26, 26, 26);
+	/* height: calc(100% - 118px); */
 	width: 70%;
-	border-radius: 0px 0px 10px 0px;
+	/* height: 300px; */
 	overflow: scroll;
 }
 
 .input{
 	display: flex;
-	height: 6vh;
+	height: 50px;
 	background-color: white;
 	color:#060b26;
 	border: none;
@@ -171,7 +170,6 @@ input{
 	width: 40px;
 	height: 40px;
 	border-radius: 50%;
-	margin: 10px;
 }
 
 .messageContent{
@@ -204,19 +202,8 @@ p {
 	text-decoration: none;
 	font-weight:lighter;
 	margin: 1%;
-	height: 25px;
 }
 
-.playInvite{
-    margin: 5%;
-    color: ghostwhite;
-    outline: 0;
-    border-radius: 100px;
-    padding: 3%;
-    background-image: linear-gradient(90deg, #5843e4, #5a0760);
-    width: 42%;
-    font-size: x-large;
-}
 .darkSubmit{
 	display: inline-block;
 	color: white;
@@ -232,6 +219,8 @@ p {
 .div_submit {
 	flex-direction: row;
 	align-items: center;
+	/* margin-left: 4px;
+	margin-right: 4px; */
 }
 
 .lookForFriends{
@@ -239,9 +228,9 @@ p {
 	backdrop-filter: sepia(90%);
 	background-color: rgba(0, 0, 0, 0.3);
 	border-radius: 4px;
-	width: 15rem;
+	width: 11rem;
-	height: 2rem;
+	height: 1.5rem;
-	margin-top: 1.3rem;
+	margin-top: 1rem;
 }
 
 .greenAlert{
@@ -251,6 +240,7 @@ p {
 	margin: auto;
 	padding: 1rem;
 	border-radius: 12px;
+	/* display: flex; */
 	flex-direction: row;
 	align-items: center;
 	background-color: rgba(0, 86, 27, 0.7);
@@ -266,15 +256,24 @@ p {
 	padding: 1rem;
 	border-radius: 12px;
 	flex-direction: row;
-	text-align: center;
+	align-items: center;
 	background-color: rgba(133, 6, 6, 0.7);
 	font-size: 25px;
 	color: rgba(255, 255, 255, 1);
 }
 
-.text_alert{
+.redAlert{
-	text-align: center;
+	width: clamp(50%, 500px, 90%);
-	justify-content: center;
+	height: min(50%, 100px);
+
+	margin: auto;
+	padding: 1rem;
+	border-radius: 12px;
+	flex-direction: row;
+	align-items: center;
+	background-color: rgba(133, 6, 6, 0.7);
+	font-size: 25px;
+	color: rgba(255, 255, 255, 1);
 }
 
 .yellowAlert{
@@ -286,13 +285,17 @@ p {
 	border-radius: 12px;
 	flex-direction: row;
 	align-items: center;
-	text-align: center;
 	background-color: rgba(212, 175, 55, 0.7);
 	font-size: 25px;
 	color: rgba(255, 255, 255, 1);
 	flex-wrap: wrap;
 }
 
+.yellowAlert::p {
+	overflow-wrap: break-word;
+	max-width: 1000px;
+}
+
 .modalSetting{
 	width: clamp(50%, 700px, 90%);
 	height: min(50%, 300px);
@@ -301,29 +304,26 @@ p {
 	padding: 2rem;
 	border-radius: 12px;
 	display: flex;
+	/* flex-direction: column; */
+	/* align-items: center; */
 	background-color: #3e3c61;
-	overflow: scroll;
 }
 
 .settingFirstPart{
 	margin-top: 10%;
-	margin-left: 20%;
+	margin-left: 15%;
-}
-
-.settingFirstPart2{
-	margin-top: 10%;
-	margin-left: 30%;
 }
 
 .settingSecondPart{
 	margin-top: 10%;
 	margin-left: 5%;
+
+	/* margin-left: 20%; */
 }
 
 .checkbox{
 	display:flex;
 	flex-direction:row;
-	margin-left: 60px;
 }
 
 input.in{
@@ -331,59 +331,23 @@ input.in{
 	margin-left: 0px;
 	background-color: black;
 	color: white;
-	border-radius: 4px;
+	border-radius: 12px;
 	width: 70%;
-	height: 100%;
-	font-weight:100;
-	font-size: 20px;
-	padding: 7px;
 }
 
 input.in_howLong{
-	margin-top: 13%;
+	margin-top: 14.5%;
 	margin-left: 0px;
 	background-color: black;
 	color: white;
-	border-radius: 4px;
+	border-radius: 12px;
-	width: 10%;
+	width: 15%;
-	height: 10%;
-	font-weight:100;
-	font-size: 20px;
-	padding: 7px;
 }
 
 .mdp{
 	background-color : black;
 	border-radius: 8px;
 	color: white;
-	width: 60%;
+	width: 20%;
-	height: 30%;
 }
 
-.case{
-	height: auto;
-	width: auto;
-	margin-left: 10px;
-}
-
-.catchat{
-	font-size: 30px;
-	margin-left: 12px;
-}
-
-.block{
-	font-size: 25px;
-	margin-left: 12px;
-	margin-top: 0.2rem;
-}
-
-.inside_ckeckbox{
-	height: 25px;
-	margin-left: -50px;
-
-}
-
-h2{
-	overflow-wrap: break-word;
-	max-width: 200px;
-}

containers/react/src/styles/Profile.css

@@ -1,6 +1,10 @@
-.file-upload-container {
+  /* Container style */
+  .file-upload-container {
+
 	margin-left: 2rem;
 	font-size: 1.7rem;
+	/* background: #5843e4; */
+	/* color:#f5f5f5; */
 	margin: 0 16px;
 	text-decoration: none;
 	padding: 10px 16px;
@@ -11,8 +15,11 @@
     gap: 10px;
   }
 
-.file-input {
+  /* File input style */
-    display: none;
+  .file-input {
+		/* background: #5843e4; */
+	/* color:#f5f5f5; */
+    display: none; /* Hide the default file input */
   }
 
   .file-label {
@@ -55,7 +62,6 @@
 .page {
 	text-align: center;
 	overflow-y: scroll;
-	/* height: 80vh; */
 	/* height: 50vh; */
 	/* width: 50vh; */
 	/* background-color: black; */
@@ -74,9 +80,9 @@
 	border-radius: 50%;
 	border: thick;
 	border-color: red;
-	margin-left: 20px;
 	/* border-image: linear-gradient(90deg, #5843e4, #5a0760); */
 
+	/* margin-top: 20px; */
 }
 
 .home{
@@ -90,11 +96,11 @@
 }
 
 .history{
-	display:inline-block;
+	display: inline-block;
 	color: white;
 	background-color:  #5843e4;
 	border-radius: 20px;
-	padding: 1.3% 30%;
+	padding: 14px;
 	font-size: 1.7rem;
 	text-decoration: none;
 	font-weight: bold;
@@ -147,13 +153,6 @@
 	text-decoration: none;
 	font-weight: bold;
 }
-
-.user_name{
-	/* background-image: linear-gradient(90deg, #5843e4, #5a0760); */
-	background: -webkit-linear-gradient(60deg, #5843e4, #5a0760);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
 /* canvas {
 	margin-top: 20px;
     border: solid 0px #ccc;

containers/react/src/styles/Win_Loss.css

@@ -1,8 +1,17 @@
 .tab{
+	/* display: flex; */
+	/* flex-direction: column; */
+	/* background-color: red; */
 	height: 60vh;
+	/* padding: 15px; */
+	/* overflow: scroll; */
+
 }
 
 .scroll {
+	/* border:3px; */
+	/* background-color: #5843e4; */
+	/* border-color: white; */
 	overflow: scroll;
 }
 
@@ -11,20 +20,26 @@
 }
 
 .elements {
+	/* display: flex; */
 	border-width:1px;
 	border-style:solid;
+	/* background-color: #5843e4; */
 	border-color: grey;
+	/* overflow: scroll; */
 }
 
 .title {
 	color: #5843e4;
+	/* font-size: 22px; */
 	font-weight: bold;
 	margin-bottom: 25px;
 }
 
 .content {
 	color: white;
+    /* font-size: 22px; */
     font-weight: bold;
+	/* display: flex; */
 	flex-direction: column;
 	margin-bottom: 5px;
 }
@@ -33,8 +48,11 @@
 	display:inline;
 	flex-direction: row;
 	color: white;
+    /* font-size: 22px; */
     font-weight: bold;
 	flex-direction: row;
+	/* text-align: justify; */
+	/* margin-bottom: 5px; */
 }
 
 .me {

containers/react/src/styles/chat.css

@@ -156,4 +156,14 @@
   bottom: 50px;
   font-size: 13px;
   font-style: italic;
-} 
+} 
+
+
+/* Messages.css */
+/* import '../../styles/Messages.css' */
+
+/* General styles */
+/* Messages.css */
+/* import '../../styles/Messages.css' */
+
+/* General styles

containers/react/src/styles/field.css

@@ -1,39 +1,49 @@
 .playButton {
 	background-image: linear-gradient(90deg, #5843e4, #5a0760);
+	display: flex;
+	flex-wrap: wrap;
+	overflow: hidden;
 	border-radius: 5vh;
 	color: white;
-	display: block;
+	/* display: block; */
 	margin: auto;
 	margin-top: 30vh;
-	padding: 2vh 5vw;
+	padding: 2vh 4vw;
 	height: 10vh;
 	width: 20vw;
-	font-size: 300%;
+	font-size: 250%;
+	text-align: center;
   }
 
-  .inside_checkbox{
-	height : 70%;
-	width:  70%;
-  }
   
   .field {
 	background-color: rgb(249, 249, 249);
+	/* border-radius: 5vh; */
+	/* color: rgb(100, 42, 42); */
 	display: block;
 	margin: auto;
 	margin-top: 5vh;
+	/* padding: 2vh 5vw; */
 	height: 80%;
 	width: 80%;
+	/* font-size: 300%; */
 }
 
 .clicked{
+	/* justify-content: center; */
+	/* display: flex;
+	justify-content: center; */
 	background-color: rgb(0, 0, 0);
 	width: 70vw;
+	/* height: 70vh; */
 	margin:auto;
 	margin-right: 15vw;
 	margin-left: 15vw;
 	margin-top: 10vh;
 	position: relative;
 	padding-top: 35%;
+	/* padding-top: 25; */
+	/* padding-top: 177.77% */
 }
 @media screen and (max-width: 900px){
   .playButton{
@@ -59,14 +69,29 @@
   }
 }
 
-.responsive{
-	display: flex;
-	flex-direction: column;
-}
-
 #myCanvas {
 	background-color: rgb(124, 47, 47);
+	/* position: absolute; */
+	/* top: 0; */
+	/* left: 0; */
+	/* cursor: none; */
 	width: 100%;
 	height: 100%;
 	margin: 0;
-}
+}
+
+/* @media screen and (max-width: 768px) { */
+	/* #canvas_container { */
+		/* width: 50%; */
+	  /* transform: rotate(90deg);
+	  transform-origin: top right;
+	  position: relative;
+	  /* margin-right: 100vw; */
+	  /* height: 100vw; */
+	  /* width: 100vh; */
+	/* } */
+	/* #myCanvas {
+	  height: 100%;
+	  width: 100%;
+	} */
+  /* } */

containers/react/src/styles/index.css

@@ -5,6 +5,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  /* height: 100%; */
 }
 
 code {

containers/react/src/styles/old.css

@@ -1,4 +1,5 @@
 body {
+	/* display: flex; */
 	margin: 0%;
 	width: 100vw;
 	height: 100vh;
@@ -19,6 +20,7 @@ footer {
 	width: 7vw;
 	max-height: 7vh;
 	max-width: 7vh;
+	/* max-width: ; */
 	border-radius: 50%;
 	border: 5px solid rgb(255, 255, 255);
 }
@@ -64,6 +66,7 @@ input{
 }
 
 .username {
+	/* justify-content: center; */
 	margin-right: 1vw;
 	display: flex;
 	align-items: center;
@@ -87,6 +90,7 @@ input{
 .menu {
 	margin-left: 2vw;
 	color: aqua;
+	/* font-size: 4vh; */
 	font-size: 2vw;
 	text-decoration: none;
 }
@@ -107,7 +111,9 @@ input{
 	display:flex;
 	max-width: 33%;
 	height: 100%;
+	/* font-size: 50px; */
 	color:blueviolet;
+	/* font-size: 10vw; */
 	font-size: min(10vw, 10vh);
 	justify-content: center;
 }

docker-compose.yml

@@ -3,7 +3,6 @@ version: "3.3"
 services:
 
   nginx:
-    restart: unless-stopped
     image: nginx:alpine
     container_name: nginx
     env_file: .env
@@ -15,11 +14,20 @@ services:
       - 8080:8080
     volumes:
      - ./conf/nginx.conf:/etc/nginx/conf.d/default.conf
+    # volumes:
+    #   - "./conf:/etc/nginx/templates/"
+    # ports:
+    #   - 80:80
+    # volumes:
+    #   - ./conf/nginx.conf:/etc/nginx/conf.d/default.conf
+    # command: sh -c "envsubst < /etc/nginx/conf.d/default.conf > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"
+      # - ./containers/frontend:/var/www/html
     networks:
       - pongNetwork
 
+
+
   react_app:
-    restart: unless-stopped
     image: node:latest
     container_name: react_app
     working_dir: /app
@@ -36,7 +44,6 @@ services:
 
 
   api:
-    restart: unless-stopped
     image: node:latest
     container_name: api
     working_dir: /app
@@ -52,9 +59,9 @@ services:
     entrypoint: ["sh", "-c" , "npm install && npm run start:dev"]
 
   postgresql:
-    restart: unless-stopped
     env_file: .env
     image: postgres:14.1-alpine
+    restart: unless-stopped
     container_name: postgresql
     environment:
       - POSTGRES_USER=postgres
@@ -63,12 +70,11 @@ services:
       - 5432:5432
     volumes:
       - db:/var/lib/postgresql/data
-      # - ./conf/init.sql:/docker-entrypoint-initdb.d/create_tables.sql
+      - ./conf/init.sql:/docker-entrypoint-initdb.d/create_tables.sql
     networks:
       - pongNetwork
 
   pong:
-    restart: unless-stopped
     image: node:latest
     container_name: pong
     working_dir: /app
@@ -82,7 +88,6 @@ services:
     entrypoint: ["sh", "-c" , "npm install && npm run start:dev"]
 
   chat:
-    restart: unless-stopped
     image: node:latest
     container_name: chat
     working_dir: /app