add apommier commit without messages/modal.tsx change and with useEffect in canvas commented

.env

@@ -14,6 +14,7 @@
 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

.gitignore

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

README.md

@@ -1,153 +0,0 @@
-# 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 'pass';
+ALTER USER postgres WITH PASSWORD 'postgres';

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:8001;
+        proxy_pass http://react_app:8081;
     }
 
     location /api {
@@ -21,7 +21,7 @@ server {
         proxy_pass http://api:3000/api;
     }
 
-    location /socket {
+    location /socket.io {
         # 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

@@ -1,22 +0,0 @@
-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.module.ts

@@ -2,16 +2,8 @@ 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({
@@ -23,7 +15,5 @@ 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,23 +1,8 @@
-// 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';
@@ -28,7 +13,6 @@ import { JwtStrategy } from './jwt.strategy';
     PassportModule,
     JwtModule.register({
       secret: jwtConstants.secret,
-    //   signOptions: { expiresIn: '60000s' },
     }),
   ],
   providers: [AuthService, LocalStrategy, JwtStrategy],

containers/api/src/auth/constants.ts

@@ -1,4 +1,3 @@
 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/login42.ts

@@ -1,12 +1,7 @@
-// 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) {};
@@ -16,19 +11,16 @@ 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 || 'u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41',
-			// client_secret: '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',
+			client_id: process.env.CLIENT_UID,
 			client_secret: process.env.API_SECRET,
 			code: code,
-			redirect_uri: process.env.REDIRECT_URI || 'http://' + process.env.REACT_APP_BASE_URL + '/api/auth/login',
+			redirect_uri: process.env.REDIRECT_URI,
 		  };
 		   
 		try {
@@ -42,20 +34,14 @@ 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,
@@ -76,15 +62,11 @@ export class loginClass {
 				friends: null,
 				blocked: null,
 				photo: null,
+				sessionNumber: 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,8 +1,3 @@
-// import { Module } from '@nestjs/common';
-
-// @Module({})
-// export class ChatModule {}
-
 import { Module } from '@nestjs/common';
 import { ChatService} from './chat.service';
 
@@ -17,7 +12,6 @@ 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/20 16:47:02 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/26 06:56:08 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -15,163 +15,169 @@ 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 {
- constructor(@InjectRepository(Conv) private chatRepository: Repository<Conv>,
- 	@InjectRepository(Message) private messageRepository: Repository<Message>,
- ) {}
+	constructor(@InjectRepository(Conv) private chatRepository: Repository<Conv>,
+		@InjectRepository(Message) private messageRepository: Repository<Message>,
+	) { }
 
- async save(conv: Conv): Promise<Conv> {
-	return await this.chatRepository.save(conv);
-}
+	async save(conv: Conv): Promise<Conv> {
+		return await this.chatRepository.save(conv);
+	}
 
-async findAll(): Promise<Conv[]> {
-	return await this.chatRepository.find();
-}
+	async findAll(): Promise<Conv[]> {
+		return await this.chatRepository.find();
+	}
 
- async createConv(conv: Conv): Promise<Conv> {
-	return await this.chatRepository.save(conv);
-  }
+	async createConv(conv: Conv): Promise<Conv> {
+		return await this.chatRepository.save(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 getConv(username: string): Promise<Conv[]> {
+		const convs = await this.chatRepository.query("SELECT * FROM \"conv\" WHERE $1 = ANY (ARRAY[members]);", [username])
+		return convs;
+	}
 
-async findConv(number: number){
-	// username = "apommier"
-	console.log(`fincConv; ${number}`)
-	const conv = await this.chatRepository.findOneBy({id: number})
-	return conv;
-}
+	async findConv(number: number) {
+		const conv = await this.chatRepository.findOneBy({ id: number })
+		return conv;
+	}
 
- async createMessage(message: Message, username: string): Promise<Message> {
-	const conv = await this.findConv(message.convid);
-	if (conv.banned && conv.banned.find(item => item === username))
-		return ;
-	if (conv.muted && conv.muted.find(item => item === username))
-		return ;
-	return await this.messageRepository.save(message);
- }
+	async createMessage(message: Message, username: string): Promise<Message> {
+		const conv = await this.findConv(message.convid);
+		if (conv.banned && conv.banned.find(item => item === username))
+			return;
+		if (conv.muted && conv.muted.find(item => item === username))
+			return;
+		return await this.messageRepository.save(message);
+	}
 
- async isAllowed(convId: number, username: string) {
-	const conv = await this.findConv(convId);
-	if (conv.banned && conv.banned.find(item => item === username))
-		return (0);
-	if (conv.muted && conv.muted.find(item => item === username))
-		return (0);
-	return (1);
- }
+	async isAllowed(convId: number, username: string) {
+		const conv = await this.findConv(convId);
+		if (conv.banned && conv.banned.find(item => item === username))
+			return (0);
+		if (conv.muted && conv.muted.find(item => item === username))
+			return (0);
+		return (1);
+	}
 
- async getMessages(convId: number): Promise<Message[]> {
-	const convs = await this.chatRepository
-	.query("SELECT * FROM \"message\" WHERE $1 = message.convid;", [convId])
+	async getMessages(convId: number): Promise<Message[]> {
+		const convs = await this.chatRepository
+			.query("SELECT * FROM \"message\" WHERE $1 = message.convid;", [convId])
 
-	return (convs)
-}
+		return (convs)
+	}
 
-async banUser(convId: number, username: string) {
-	const conv = await this.findConv(convId);
+	async banUser(convId: number, username: string) {
+		const conv = await this.findConv(convId);
 
-	conv.banned = conv.banned || [];
-	if (conv.banned.find(item => item === username))
+		if (conv.owner === username)
+			return (0);
+		conv.banned = conv.banned || [];
+		if (conv.banned.find(item => item === username)) {
+			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);
+
+		if (conv.members.find(item => item === username))
 			return (1);
-	conv.members = conv.members.filter((item) => item !== username);
-	conv.banned.push(username);
-	this.save(conv);
-}
-
-async inviteUser(convId: number, username: string) {
-	// const conv = await this.findConv(convId);
-	// this.save(conv);
-
-	//find user
-	//add in chanInvite chanID
-	//save user
-}
+		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 setPassword(convId: number, password: string) {
+		const conv = await this.findConv(convId);
+		const saltRounds = 10;
+		const hashedPassword = await bcrypt.hash(password, saltRounds);
+		conv.password = hashedPassword
+		this.save(conv);
+	}
 
-async verifyPassword(convId: number, password: string) {
-	//verify is user is admin ?
-	const conv = await this.findConv(convId);
-	return await bcrypt.compare(password, conv.password);
+	// async verifyPassword(convId: number, password: string) {
+	async verifyPassword(convId: number, password: string, username: string) {
+		const conv = await this.findConv(convId);
+		// return await bcrypt.compare(password, conv.password);
+		const ret = await bcrypt.compare(password, conv.password);
+		if (ret === true) {
+			conv.members = conv.members || [];
+			conv.members.push(username);
+			this.save(conv);
+		}
+		return ret;
+	}
+yy
 
-	// conv.password = password
-}
+	async muteUser(convId: number, username: string, time: 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);
 
-async muteUser(convId: number, username: string) {
-	const conv = await this.findConv(convId);
+		setTimeout(() => {
+			conv.muted = conv.muted.filter((item) => item !== username)
+			this.save(conv);
+		}, intTime);
+	}
 
-	conv.muted = conv.muted || [];
-	if (conv.muted.find(item => item === username))
-		return (1);
-	conv.muted.push(username);
-	this.save(conv);
-}
+	async setAdmin(convId: number, username: string) {
+		const conv = await this.findConv(convId);
 
-async setAdmin(convId: number, username: string) {
-	const conv = await this.findConv(convId);
+		conv.admin = conv.admin || [];
+		if (conv.admin.find(item => item === username))
+			return (1);
+		conv.admin.push(username);
+		this.save(conv);
+	}
 
-	conv.admin = conv.admin || [];
-	if (conv.admin.find(item => item === username))
-		return (1);
-	conv.admin.push(username);
-	this.save(conv);
-}
+	async isAdmin(convId: number, username: string) {
+		const conv = await this.findConv(convId);
 
-async isAdmin(convId: number, username: string) {
-	const conv = await this.findConv(convId);
+		conv.admin = conv.admin || [];
+		if (conv.admin.find(item => item === username))
+			return (1);
+		console.log("nope");
+		return (0);
+	}
 
-	conv.admin = conv.admin || [];
-	if (conv.admin.find(item => item === username))
-		return (1);
-	console.log("nope");
-	return (0);
-}
+	async setPrivate(convId: number, bool: boolean) {
+		const conv = await this.findConv(convId);
+		console.log("bool= ", bool);
+		conv.private = bool;
+		this.save(conv);
+	}
 
-async setPrivate(convId: number) {
-	const conv = await this.findConv(convId);
-	if (conv.private === true)
-		conv.private = false;
-	else
-		conv.private = true;
-	this.save(conv);
-}
+	async setName(convId: number, name: string) {
+		const conv = await this.findConv(convId);
+		conv.name = name;
+		this.save(conv);
+	}
 
-async setName(convId: number, name: string) {
-	const conv = await this.findConv(convId);
-	conv.name = name;
-	this.save(conv);
-}
-
-async joinChannel(convId: number, username: string) {
-	const conv = await this.findConv(convId);
-	conv.members = conv.members || [];
-	if (conv.members.find(item => item === username))
-		return ;
-	conv.members.push(username);
-	// conv.name = name;
-	this.save(conv);
-}
+	async joinChannel(convId: number, username: string) {
+		const conv = await this.findConv(convId);
+		conv.members = conv.members || [];
+		if (conv.members.find(item => item === username))
+			return;
+		conv.members.push(username);
+		this.save(conv);
+	}
 
 }

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

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   config.service.ts                                  :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: apommier <apommier@student.42.fr>          +#+  +:+       +#+        */
+/*   By: sadjigui <sadjigui@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/04/09 14:53:49 by apommier          #+#    #+#             */
-/*   Updated: 2023/06/22 20:42:32 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/24 15:09:20 by sadjigui         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 

containers/api/src/main.ts

@@ -6,20 +6,11 @@ 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/23 15:18:19 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/26 06:55:03 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -29,9 +29,6 @@ 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[];
 
@@ -49,18 +46,6 @@ 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()
@@ -77,7 +62,6 @@ import { Entity, Column, PrimaryGeneratedColumn, CreateDateColumn, BaseEntity }
    @Column()
    text: string;
    
-
    @CreateDateColumn({ nullable: true })
    createdAt?: Date;
    

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

@@ -20,9 +20,6 @@ export class User {
 	@PrimaryGeneratedColumn()
 	id: number;
 
-	// otp_enabled  Boolean @default(false)
-	// otp_verified Boolean @default(false)
-
 	@Column({ default: false })
 	otp_enabled: boolean;
 
@@ -50,6 +47,9 @@ export class User {
 	@Column({ default: 0 })
 	loss: number;
 
+	@Column({ default: 0 })
+	sessionNumber: number;
+
 	@Column({ default: 0 })
 	rank: number;
 
@@ -59,18 +59,12 @@ export class User {
 	@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[];
 
@@ -82,7 +76,7 @@ export class User {
 
 }
 
-@Entity()
+@Entity({name: 'MatchLog' })
 export class MatchLog {
   @PrimaryGeneratedColumn()
   id: number;

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

@@ -1,18 +1,7 @@
-// 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);
@@ -36,35 +25,22 @@ export const generateOTP = async (user) => {
 	let otpauth_url = totp.toString();
 	const qrCodeDataUrl = await qr.toDataURL(otpauth_url, { errorCorrectionLevel: 'H' });
 
-	const filePath = 'qrcode.png'; // Specify the file path where the QR code should be saved
+	const filePath = 'qrcode.png';
 	
 	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)
 	}
@@ -84,13 +60,11 @@ 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) {
@@ -110,194 +84,11 @@ export const generateOTP = async (user) => {
 	});
 	  let delta = totp.validate({ token });
 
-	  if (delta === null) {
-		console.log("error validate token")
+	  if (delta === null)
 		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,7 +11,6 @@ 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/21 01:31:44 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/26 07:52:08 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -41,12 +41,15 @@ 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);
@@ -54,9 +57,7 @@ export class UsersService {
 
 	async getFriends(username: string) {
 		const user = await this.findOne(username)
-		let friendsTab = user.friends
-		console.log(friendsTab)
-		// friendsTab = ['apommier', 'syd']
+		let friendsTab = user.friends || [];
 		const friends = await this.userRepository.query("SELECT * FROM \"User\" WHERE username = ANY ($1);", [friendsTab]);
 		console.log(friends)
 		return (friends)
@@ -65,12 +66,12 @@ export class UsersService {
 	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);	
 		return (1);
@@ -79,10 +80,7 @@ export class UsersService {
 	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)
@@ -96,18 +94,13 @@ export class UsersService {
 	async getHistory(username: string) {
 		const user = await this.findOne(username);
 
-		if (user) {
-		  const children = user.children;
-		  console.log(user); 
-		  console.log(user.children); // or perform any operations with the children
-		  return children;
-		}
+		return await this.userRepository.query("SELECT * FROM \"MatchLog\" WHERE \"parentId\" = ANY ($1);", [[user.id]]);
 	}
 
 	async addFriend(user: User, username: string) {
-		if (!(await this.findOne(username)))
+		const user2 = await this.findOne(username)
+		if (!user)
 			return (0);
-			// user.friendRequest = user.friendRequest || [];
 		user.friends = user.friends || [];
 		if (user.friends.find(item => item === username))
 		{
@@ -117,6 +110,9 @@ export class UsersService {
 		}
 		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);
 	}
@@ -126,7 +122,11 @@ 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);
@@ -137,40 +137,11 @@ 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,58 +8,35 @@ 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 
 						}
@@ -69,16 +46,11 @@ 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}`);
 		}
@@ -86,22 +58,14 @@ 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)) {
-			console.log("get it")
-			const clientArray = this.clientsNames.get(payload.username); // Retrieve the array
-			clientArray.push(client.id); // Add the new client to the array
+			const clientArray = this.clientsNames.get(payload.username);
+			clientArray.push(client.id);
 		  } else {
-			console.log("create")
-			this.clientsNames.set(payload.username, [client.id]); // Create a new array with the new client as the value
+			this.clientsNames.set(payload.username, [client.id]);
 		  }
   }
 
-//   @SubscribeMessage('socket.io')
-//   socketConnect(client: any, payload: any): void {
-// 	console.log("/socket.io")
-// }
 
 @SubscribeMessage('ban')
 banUser(client: any, payload: any): void {
@@ -113,20 +77,9 @@ 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')
@@ -138,51 +91,28 @@ 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 {
+			  else
 				console.log("not sending");
-			  }
 			});
 		}
-	});
-	}
-
-
-	}
+	  });
+    }
+}
 
 
 

containers/chat/src/main.ts

@@ -13,25 +13,18 @@ async function bootstrap() {
 	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,25 +1,5 @@
-// 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';
 
@@ -31,13 +11,9 @@ async function bootstrap() {
 	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/23 15:19:12 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/26 07:04:47 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -28,7 +28,6 @@ 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)
@@ -39,46 +38,31 @@ 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}`);
 	}
 
@@ -91,29 +75,19 @@ export class PongGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
 			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];
 			}
@@ -129,29 +103,18 @@ 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]; // Add the current client to the players array
+    const players = [matchingClients[0].client, client];
     players.forEach((player) => {
-    //   this.waitingClients.delete(
-    //     this.waitingClients.find(
-    //       (waitingClient) => waitingClient.client === player
-    //     )
-    //   );
 		const matchingClient = Array.from(this.waitingClients).find(
 			(waitingClient) => waitingClient.client === player
 	  	);
@@ -165,12 +128,11 @@ 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', gameId);
+      player.emit('pong:gameId', payload);
     });
   }
-
-  // console.log(`from: ${client.id}`);
 }
 
 
@@ -182,48 +144,27 @@ 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.gameId);
-		this.clients[playersIds[1]].emit('pong:gameId', payload.gameId);
+		this.clients[playersIds[0]].emit('pong:gameId', payload);
+		this.clients[playersIds[1]].emit('pong:gameId', payload);
 	}
 	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)
 
 }
 
@@ -244,7 +185,6 @@ addPrivateParty(client: Socket, payload: any): void {
 	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);
@@ -252,14 +192,12 @@ addPrivateParty(client: Socket, payload: any): void {
 					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);
@@ -273,20 +211,14 @@ 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);
@@ -295,20 +227,13 @@ 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);
@@ -317,7 +242,6 @@ addPrivateParty(client: Socket, payload: any): void {
 		{
 			this.clients[playersIds[0]].emit('pong:paddle', payload);
 		}
-		console.log("END OF HANDLE");
 	}
 
 	@SubscribeMessage('pong:point')
@@ -337,21 +261,32 @@ 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);
+		console.log(`id of 0 mypoint= ${playersIds[0]}`);
+
+		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) 
 		{
-			this.clients[playersIds[1]].emit('pong:name', payload.name);
+			this.clients[playersIds[1]].emit('pong:name', payload);
 		}
 		if (playersIds[1] === payload.id)
 		{
-			this.clients[playersIds[0]].emit('pong:name', payload.name);
+			this.clients[playersIds[0]].emit('pong:name', payload);
 		}
 	}
 

containers/react/.env

@@ -1,5 +1,11 @@
-REACT_APP_BASE_URL=localhost:8080
-REACT_APP_API_SECRET=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
-REACT_APP_CLIENT_UID=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41
+REACT_APP_BASE_URL=bess-f2r5s13:8080
+REACT_APP_SOCKET_URL=bess-f2r5s13
+REACT_APP_API_SECRET=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
+REACT_APP_CLIENT_UID=u-s4t2ud-2bd3c5d4f41e776f2e3d5d699d2a8421f6d0c0468ec882516d9ca89b0c211789
+
+# REACT_APP_BASE_URL=92.143.191.152
+# 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%2Fbess-f2r5s13%3A8080%2Fapi%2Fauth%2Flogin&response_type=code"
+
 # REACT_APP_BASE_URL=92.143.191.152
 # REACT_APP_BASE_URL=192.168.1.19

containers/react/interfaces.tsx

@@ -16,6 +16,7 @@ export interface User {
 	partyInvite: Record<string, string>[];
 	friends: string[];
 	blocked: string[];
+	sessionNumber: 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=8001 react-scripts start",
+    "start": "HOST=0.0.0.0 PORT=8081 react-scripts start",
     "start:dev": "npm run start --watch",
     "build": "react-scripts build",
     "test": "react-scripts test",

containers/react/public/index.html

@@ -2,14 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+<link rel="shortcut icon" type="image/jpeg" href="/favicon.jpeg"/>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <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/
@@ -24,7 +23,6 @@
       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>
     <noscript>You need to enable JavaScript to run this app.</noscript>

containers/react/src/DataBase/DataRank.js

@@ -1,58 +0,0 @@
-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

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

containers/react/src/DataBase/DummyDBWinLoss.js

@@ -1,37 +0,0 @@
-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

@@ -7,26 +7,27 @@ import React from "react";
 
 const dropIn = {
     hidden: {
-		y: "-100vh",
-	},
-	visible: {
-		y: "0",
-	},
-	exit: {
-		y: "-100vh",
-	},
+        y: "-100vh",
+    },
+    visible: {
+        y: "0",
+    },
+    exit: {
+        y: "-100vh",
+    },
 };
 
 interface AlertProps {
-	handleClose: Function,
-	text: string
-  }
+    handleClose: Function,
+    text: string
+}
 
-function GreenAlert ({handleClose, text}: AlertProps){
+function GreenAlert({ handleClose, text }: AlertProps) {
+    { setTimeout(handleClose, 1500) }
+    return (
 
-        return(
-            <Backdrop onClick={handleClose}>
-        <motion.div
+        <Backdrop onClick={handleClose}>
+            <motion.div
                 onClick={(e) => e.stopPropagation()}
                 className="greenAlert"
                 // variant={dropIn}
@@ -34,10 +35,11 @@ function GreenAlert ({handleClose, text}: AlertProps){
                 animate="visible"
                 exit="exit"
             >
-                <AiOutlineCheckCircle/>
-               <p>{text}</p>
+                <AiOutlineCheckCircle />
+                <div className="text_alert">
+                    <h5>{text}</h5>
+                </div>
             </motion.div>
-               {setTimeout(handleClose, 1500)}
         </Backdrop>
     )
 }

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

@@ -23,6 +23,7 @@ interface AlertProps {
   }
 
 function RedAlert ({handleClose, text}: AlertProps) {
+    {setTimeout(handleClose, 1500)}
     return(
         <Backdrop onClick={handleClose}>
         <motion.div
@@ -32,11 +33,12 @@ function RedAlert ({handleClose, text}: AlertProps) {
                 initial="hidden"
                 animate="visible"
                 exit="exit"
-            >
+                >
             <BiErrorCircle/>
-            <p>{text}</p>
+            <div className="text_alert">
+                <h5>{text}</h5>
+            </div>
             </motion.div>
-            {setTimeout(handleClose, 1500)}
         </Backdrop>
     )
 }

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

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

containers/react/src/components/AnimatedRoute.tsx

@@ -1,26 +0,0 @@
-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,16 +1,15 @@
-import React from "react";
-import {Routes, Route, Navigate} from 'react-router-dom';
-import HomeLogin from "../pages/Home.js";
+import React, { useEffect } from "react";
+import { Routes, Route, Navigate } from 'react-router-dom';
+import HomeLogin from "../pages/LoginButton.tsx";
 
 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'
 
@@ -19,50 +18,68 @@ 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 handleBeforeUnload = async (event: { preventDefault: () => void; returnValue: string; }) => {
+			console.log("git ")
+			if (!localStorage.getItem('token'))
+				return;
+			try {
+				await api.post("/quit");
+			} catch (err) {
+				console.log(err);
+			}
+		};
+
+		const handleLoad = async () => {
+			if (!localStorage.getItem('token'))
+				return;
+			try {
+				await api.post("/addSession");
+			} catch (err) {
+				console.log(err);
+			}
+		};
+
+		handleLoad();
+		window.addEventListener('beforeunload', handleBeforeUnload);
+		return () => {
+			window.removeEventListener('beforeunload', handleBeforeUnload);
+		};
+	}, []);
 
-function AnimatedRoute () {
-	// const location = useLocation();
 	const location = useLocation();
-	if (!localStorage.getItem('token'))
-	{
+	if (!localStorage.getItem('token')) {
 		return (
 			<AnimatePresence>
-			<Routes location={location} key={location.pathname}>
-				<Route path="/" element={<HomeLogin/>}/>
-				<Route path="/token" element={<SuccessToken />}/>
-
-				{/* <Route path="/404" element={<HomeLogin/>} /> */}
-          		{/* <Route path="*" element={<Navigate to="/404" />} /> */}
-			</Routes>
-		</AnimatePresence>
+				<Routes location={location} key={location.pathname}>
+					<Route path="/" element={<HomeLogin />} />
+					<Route path="/token" element={<SuccessToken />} />
+				</Routes>
+			</AnimatePresence>
 		)
 	}
 
 	return (
 		<AnimatePresence>
 			<Routes location={location} key={location.pathname}>
-
-				{/* <Route path="/login" element={<HomeLogin/>}/> */}
-				<Route path="/" element={<Home/>}/>
-				<Route path="/profile" element={<Home/>}/>
-				<Route path="/profile/:username" element={<Home/>}/>
-				<Route path="/qr" element={<QrCode/>}/>
-				
-				<Route path="/2fa" element={<DoubleAuth/>}/>
-				<Route path="/Social" element={<Social/>}/>
-
-				<Route path="/token" element={<SuccessToken />}/>
-				<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="/" element={<Home />} />
+				<Route path="/profile" element={<Home />} />
+				<Route path="/profile/:username" element={<Home />} />
+				<Route path="/qr" element={<QrCode />} />
+				<Route path="/2fa" element={<DoubleAuth />} />
+				<Route path="/Social" element={<Social />} />
+				<Route path="/token" element={<SuccessToken />} />
+				<Route path="/game" element={<PlayButton />} />
+				<Route path="/pong" element={<Game />} />
+				<Route path="/pong/play" element={<Field />} />
+				<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>
 	)

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

@@ -1,16 +1,10 @@
 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?`;
 
@@ -19,17 +13,11 @@ function PlayButton() {
 		  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);
@@ -40,9 +28,8 @@ function PlayButton() {
 			<button onClick={handleButtonClick} className="playButton">Play</button>
 			{/* !buttonClicked && <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>
+				<p><input className="inside_checkbox" type="checkbox" value="superpower"/> Super Power <br/> ( w = wall power ) </p>
+				<p><input className="inside_checkbox" type="checkbox" value="speed"/> Faster and Faster </p>
 			</div>
 		</div>
 		);

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

@@ -6,7 +6,7 @@
 /*   By: apommier <apommier@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/06/09 08:49:24 by apommier          #+#    #+#             */
-/*   Updated: 2023/06/20 13:06:35 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/23 17:16:40 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -41,7 +41,7 @@ function Rank({user, index}: RankProps){
 		  };
 		
 		  fetchProfilePicture();
-	})
+	}, [])
 	
 	// console.log(index);
 	return (

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

@@ -21,18 +21,15 @@ function Ranking(){
 				// setFriends(tmpFriends.data);
 				// return tmpUser;
 				// console.log(`user= ${tmpUser.data.username}`);
-				setIsLoading(false)
-
+				setIsLoading(false);
 			}
 			catch(err){
 				console.log(err);
 			}
 		};
 		getRanking();
-
-	}, [])
-
-	console.log(`ranking after= ${ranking}`)
+	}, []);
+	console.log(`ranking after= ${ranking}`);
 
 	return (
 		<div>

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

@@ -2,14 +2,12 @@ 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';
@@ -17,16 +15,15 @@ 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;
@@ -57,11 +54,6 @@ const UserChat = styled.div `
 	}
 `
 
-// const SideSpan = styled.span`
-// 	font-size: 18px;
-// 	font-weight: 500;
-// `
-
 const SideP = styled.p`
 	font-size: 14px;
 	color: lightgray;
@@ -90,15 +82,11 @@ function Chats(){
 	const [user, setUser] = useState<User>();
 	const [currentChat, setCurrentChat] = useState<Conv>(); // false is good?
 	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(()=> {
@@ -112,47 +100,38 @@ function Chats(){
 
 				console.log(convs);
 
-				// console.log("invite data use effect= ", tmpInvite.data);
 				setPartyInvite(tmpInvite.data);
 				setUser(tmpUser.data);
 				setConversation(convs.data);
 				setUsers(tmpUsers.data);
 
-				// console.log(`connection....`);
-				socket.current = io('http://' + process.env.REACT_APP_BASE_URL + ':4001', { transports: ['polling'] });
-				// console.log(`connection done`);
+				socket.current = io('http://' + process.env.REACT_APP_SOCKET_URL + ':4001', { transports: ['polling'] });
 				socket.current.emit('connection', {username: tmpUser.data.username})
 				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
-				});
+				// 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();
 		  };
 
 	}, [])
@@ -160,14 +139,11 @@ function Chats(){
 	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);
@@ -175,13 +151,7 @@ function Chats(){
 			}
 			// console.log(`result1 = ${currentChat.id !== incomingMessage.convId}`)
 			if (currentChat && incomingMessage && currentChat.id === incomingMessage.convId)
-			{
-				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]);
-			}
+				setMessage((prev) => [...prev, incomingMessage]);
 		}
 		updateChat();
 
@@ -196,7 +166,6 @@ function Chats(){
 
 			try {
 				const res = await api.post('/getMessage', data);
-				console.log("message of conv=", res.data)
 				setMessage(res.data);
 			} catch(err) {
 
@@ -205,11 +174,8 @@ function Chats(){
 		getMessage();
 	}, [currentChat]);
 
-	const handleSubmit = async (e: { preventDefault: () => void; })=>{
+	const handleSubmit = async (e: { key?: any; preventDefault: any; })=>{
 		e.preventDefault();
-		// console.log(`e= ${e.key}`)
-		// console.log(`name= ${user.username}`)
-		// let message;
 		if (!user || !currentChat)
 			return ;
 		const message = {
@@ -221,13 +187,8 @@ 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;
@@ -242,39 +203,15 @@ function Chats(){
 		}
 	}
 
-	const handleKeyPress = async (e: { key: string; })=> {
-		// console.log(`e in press= ${e.key}`)
+	const handleKeyPress = async (e: { key?: any; preventDefault: () => void; })=> {
 		if (e.key !== "Enter")
 			return ;
-		// 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)
-		}
+		handleSubmit(e);
 	}
 	
 	
 	
 	const [friend, setFriend] = useState("");
-	// const [modalOpen, setModalOpen] = useState(false);
 	const [addFriend, setAddFriend] = useState(false);
 	const [block, setBlock] = useState(false);
 	
@@ -289,6 +226,8 @@ function Chats(){
     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);
@@ -306,26 +245,16 @@ function Chats(){
 	  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{
+			console.log("friend= ", friend);
 			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)
 			{
@@ -341,14 +270,17 @@ function Chats(){
 		}
 	  };
 
+
 	  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); // Reset addFriend state
+				setAddFriend(false);
 				setShowAddFriendAlert(false);
 			}
 			else
@@ -371,6 +303,7 @@ function Chats(){
 
 	  const handleOptionChange = (selectId: number, selectedOption: string) => {
 		console.log("selected Option=", selectedOption)
+		setFriend(selectedOption);
         setSelectTag((prevTags) =>
             prevTags.map((tag) =>
                 tag.id === selectId ? { ...tag, selectedOption } : tag
@@ -389,58 +322,14 @@ function Chats(){
 		<div className="chat">
 
 			<div className='navbar'>
-				<img src={DefaultPic} alt="profile" className="pic"/>
+				<IoLogoOctocat className="catchat"/>
 				<span>
 					{isLoading || !user ? (
         				<h4>Loading...</h4>
       				) : (
-        				<h4>{user.nickname}</h4>
+        				<h2>Chat</h2>
       				)}
 	  			</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) => (
@@ -451,11 +340,11 @@ function Chats(){
 				      onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}
 				    >
 				      <option value="">{
-					selectTag.selectedOption ? selectTag.selectedOption : "Select an option"
+					selectTag.selectedOption ? selectTag.selectedOption : "Select a user"
 					}</option>
 				      {users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.username)).map((item, index) => (
 				        <option key={index} value={item.username}>
-				          {item.username}
+				          {item.nickname}
 				        </option>
 				      ))}
 				    </select>
@@ -463,7 +352,7 @@ function Chats(){
 				))}
       	<TouchDiv>
         <motion.div onClick={handleAddFriend}>
-          <MdOutlineGroupAdd />
+          <MdOutlineGroupAdd className="catchat"/>
         </motion.div>
         <AnimatePresence initial={false} onExitComplete={() => null}>
 			{showAddFriendAlert && addFriend && (
@@ -476,7 +365,7 @@ function Chats(){
       </TouchDiv>
       <TouchDiv>
         <motion.div onClick={handleBlockFriend}>
-          <ImBlocked />
+          <ImBlocked  className="block"/>
         </motion.div>
         <AnimatePresence initial={false} onExitComplete={() => null}>
           {showBlockAlert && block && (
@@ -485,6 +374,9 @@ function Chats(){
           {showBlockAlert && !block && (
             <RedAlert handleClose={closeBlock} text={friend + ' was not found'} />
           )}
+		  {unblock ? (
+            <GreenAlert handleClose={closeUnblock} text={friend + ' was unblocked'} />
+		  ):("")}
         </AnimatePresence>
       </TouchDiv>
 	  {currentChat && isAdmin ? (
@@ -492,7 +384,7 @@ function Chats(){
 		<motion.div
 		onClick={() => (setting ? setSetting(false) : setSetting(true))}
 		>
-		<RiListSettingsLine/>
+		<RiListSettingsLine className="block"/>
 		<AnimatePresence
 			initial={false}
 			onExitComplete={() => null}
@@ -527,13 +419,6 @@ function Chats(){
       				  )}
       				</UserChat>
 
-
-					{/* {partyInvite.map((c) => {
-						return (
-
-						)})
-					} */}
-
 					{partyInvite.map( i =>(
 						<PartyInvite currentInvite={i}/>
 					))}
@@ -543,9 +428,9 @@ function Chats(){
 						<div key={index}
 							onClick={() => setCurrentChat(c)}>
 							<UserChat>
-							<img className="pic-user" src={DefaultPic} alt="User" />
+							<HiChatBubbleLeft className="catchat"/>
 							<div className="infoSideBar">
-								<span>{c.name}</span>
+								<h2>{c.name}</h2>
 								{/* <SideP>Desc?</SideP> */}
 							</div>
 							</UserChat>
@@ -563,7 +448,6 @@ function Chats(){
 								<Message key={m.id} message= {m} own={m.sender === user.username}/>
 								))}
 						</div>
-						{/* <Input/> */}
 						<div className="input">
 							<input
 								onKeyDown={handleKeyPress}
@@ -571,7 +455,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>
@@ -585,7 +469,6 @@ function Chats(){
 				)}
 			</div>
 		</div>
-		// </div>
 	);
 }
 

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

@@ -79,10 +79,6 @@ 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) {
@@ -122,7 +118,7 @@ const GameModal = ({ handleClose }: ModalGame) => {
             <option value="">Select a user</option>
             {users.map((user: User) => (
               <option key={user.id} value={user.username}>
-                {user.username}
+                {user.nickname}
               </option>
             ))}
           </select>
@@ -132,10 +128,9 @@ const GameModal = ({ handleClose }: ModalGame) => {
 			{/* <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="submit" onClick={handleButtonClick} >Play</button>
+			<button className="playInvite" onClick={handleButtonClick} >Play</button>
           	{/* <button className="submit" onClick={handleClose}>Cancel</button> */}
 		</div>
 

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/20 19:05:10 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/25 23:24:46 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -23,9 +23,9 @@ import React from "react";
 const MeStyleP = styled.p`
 	background-color: #5843e4;
 	padding 10px 20px;
-	border-radius 10px 0px 10px 10px;
+	border-radius 10px;
 	color: white;
-	margin-right: 20px;
+	margin: 10px;
 `
 
 interface MessageMeProps {
@@ -42,15 +42,16 @@ function MessageMe({message, own}: MessageMeProps){
 	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 {
+				console.log("useEffect message")
 			//   const user = await api.get("/profile");
 				const tmpSender = await api.post("/user", {username: message.sender})
 				const tmpConv = await api.post("/convId", {convId: message.convId})
@@ -68,7 +69,7 @@ function MessageMe({message, own}: MessageMeProps){
 			}
 		  };
 		fetchProfilePicture();
-	}, [])
+	}, []);
 
 	const handleButtonClick = () => {
 		if (!sender)
@@ -81,23 +82,37 @@ function MessageMe({message, own}: MessageMeProps){
 		window.location.reload();
 	};
 
+	// const isAllowed = async () => {
+	// 	const ret = await api.post("/allowed", {convId: message.convId});
+	// 	return ret.data;
+	// }
+
 	if (!user || !sender || !conv)
-	{
-		// console.log("return")
 		return (<></>);
-	}
 	// console.log("result includes=", conv.banned.includes(user.username))
 	// console.log("result includes=", conv.blocked.includes(user.username))
+	// const conv2: Conv = getConv();
+	// if (!conv)
+	// isAllowed().then((ret: number) => {
+	// 	if (!ret)
+	// 	{
+	// 		console.log("return not allowed");
+	// 		return ;
+	// 	}
+	// 	// Use the resolved currentConv here
+	//   });
+
 	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")
+	else if (conv.banned && conv.banned.includes(user.username))
+		return (<></>);
+	else if (conv.muted && conv.muted.includes(user.username))
+	{
+		// console.log("muted00")
+		return (<></>);
+	}
 	// if (user.blocked.includes(message.sender))/
-
+	console.log("no return message good");
 	return (
 		<div className={own ? "meMessage" : "youMessage"} ref={scrollRef}>
 			<div>

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

@@ -7,6 +7,7 @@ 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"
 
 const dropIn = {
     hidden:{y:"-100vh",
@@ -21,16 +22,19 @@ const dropIn = {
             }},
     exit:{y: "100vh",
             opacity: 0,},
-
 };
 
-const Modal = ({handleClose}) => {
+interface ModalProps {
+	handleClose: Function,
+  }
+
+const Modal = ({handleClose}: ModalProps) => {
     // const [multi, setMulti] = useState(false);
     const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: ''}]);
-    const [selectedOptionArray, setSelectedOptionArray] = useState([]);
-	const [users, setUsers] = useState([]);
-	const [user, setUser] = useState();
-	const [convs, setConvs] = useState([]);
+    const [selectedOptionArray, setSelectedOptionArray] = useState<string[]>([]);
+	const [users, setUsers] = useState<User[]>([]);
+	const [user, setUser] = useState<User>();
+	const [convs, setConvs] = useState<Conv[]>([]);
 
 	const [channel, setChannel] = useState('');
 
@@ -53,7 +57,46 @@ const Modal = ({handleClose}) => {
 		getConv();
 	}, []);
 
-    const handleOptionChange = (selectId, selectedOption) => {
+	const [askPass, setAskPass] = useState(false);
+	const [PassWord, setPassWord] = useState('');
+	useEffect(()=> {
+
+		const getConv = async ()=>{
+			console.log("chan changed")
+			console.log("chan = ", channel);
+			try{
+
+				const tmpConv = await api.post("/convId", {convId: channel});
+				if (tmpConv.data.password)
+					setAskPass(true);
+			}
+			catch(err){
+				console.log(err);
+			}
+			// if (channel.password)
+			// 	console.log("password true")
+			// else 
+			// 	console.log("password false")
+		}
+		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)
+				console.log("ici ret password", ret);
+
+				// window.location.reload();
+		} catch (err) {
+			console.log(err);
+		}
+		handleClose();
+	}
+
+    const handleOptionChange = (selectId: number, selectedOption: string) => {
 		console.log("selected Option=", selectedOption)
         setSelectTag((prevTags) =>
             prevTags.map((tag) =>
@@ -71,6 +114,8 @@ const Modal = ({handleClose}) => {
 	const joinChannel = async () => {
 		try {
 			console.log("channel= ", channel)
+			console.log("ici test channel= ", channel)
+
 			await api.post("/join", {convId: channel})
 		} catch(err) {
 			console.log(err);
@@ -103,24 +148,27 @@ const Modal = ({handleClose}) => {
         <Backdrop onClick={handleClose}>
             <motion.div
                 onClick={(e) => e.stopPropagation()}
-                className="modal"
+                className="modalSetting"
                 // variant={dropIn}
                 initial="hidden"
                 animate="visible"
                 exit="exit"
             >
+                {/* <p>New Conversation</p> */}
+				<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 an option"
-				      }</option>
-				      {users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.name)).map((item, index) => (
-				        <option key={index} value={item.username}>
-				          {item.username}
+						  selectTag.selectedOption ? selectTag.selectedOption : "Select a user"
+						}</option>
+				      {users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.nickname)).map((item, index) => (
+						  <option key={index} value={item.username}>
+				          {item.nickname}
 				        </option>
 				      ))}
 				    </select>
@@ -130,33 +178,38 @@ const Modal = ({handleClose}) => {
             	    <GrAdd onClick={addNewSelectedTag}/>
             	</div>
 				<div className="div_submit">
-					<Link to='#' className="submit" onClick={ saveSelectedOptions}>Submit</Link>
-						
-					<Link to="#" className="submit" onClick={handleClose}>Cancel</Link>
+					<Link to='#' className="submit" onClick={saveSelectedOptions}>Submit</Link>
+				</div>
 				</div>
 
 
+				<div className="settingSecondPart">
 
 				{convs.length > 0 && (
-        			<select
-        			  value={channel}
-        			  onChange={(event) => setChannel(event.target.value)}
+					<select
+					value={channel}
+					onChange={(event) => setChannel(event.target.value)}
 
         			>
-        			  <option value="">Select an option</option>
+        			  <option value="">Select a channel</option>
         			  {convs.map((conv) => (
-        			    !(!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}>
+						  !(!conv.group || conv.private || (conv.banned && user && conv.banned.includes(user.username)) || (conv.members && user && conv.members.includes(user.username))) && (
+							  <option key={conv.id} value={conv.id}>
         			        {conv.name}
         			      </option> 
         			    )
-        			  ))}
+						// {conv.password ? (console.log("here is test")):("")}
+						))}
         			</select>
       			)}
-				  {channel.private ? (
-					<input className="mdp" placeholder="password" type="text" />
-				  ):("")}
+				  {/* {console.log("here is channel == ",channel.password)} */}
  				
+				<div>
+
+				  {askPass ? (
+					  <input className="mdp" placeholder="password" type="password" onChange={(e) => setPassWord(e.target.value)} onKeyDown={handlePassword}/>
+					  ):("") }
+					  </div>
 
 				<div className="div_submit">
 					<Link to='#' className="submit" onClick={ joinChannel }>Join</Link>
@@ -164,6 +217,7 @@ const Modal = ({handleClose}) => {
 
 
 
+				</div>
             </motion.div>
         </Backdrop>
     )

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

@@ -1,31 +1,13 @@
-import { motion } from "framer-motion";
+import { AnimatePresence, 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";
-
-
-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,},
-
-};
+import GreenAlert from "../Alert/GreenAlert.tsx";
 
 interface ModalSettingProps {
 	handleClose: Function,
@@ -33,14 +15,16 @@ interface ModalSettingProps {
 	socket: Socket | null,
 }
 
-const ModalSetting = ({handleClose, convId,  socket }: ModalSettingProps) => {
-    const [password, setPassword] = useState(false);
+const ModalSetting = ({ handleClose, convId, socket }: ModalSettingProps) => {
+	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(false);
+	const [privateConv, setPrivateConv] = useState<Boolean>();
+	const [loading, setLoading] = useState<Boolean>(true);
 	const dark = () => setPrivateConv(true);
 	const light = () => setPrivateConv(false);
 	const [mute, setMute] = useState(false);
@@ -48,218 +32,237 @@ const ModalSetting = ({handleClose, convId,  socket }: ModalSettingProps) => {
 	const lightMute = () => setMute(true);
 
 
-	useEffect(()=> {
+	useEffect(() => {
 
 		console.log("convid =", convId)
-		const getUsers = async ()=>{
+		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);
-			} catch(err){
+				setLoading(false);
+			} catch (err) {
 				console.log(err)
 			}
 		}
 		getUsers();
 	}, []);
 
-    // const [multi, setMulti] = useState(false);
-    // const [selectedOptionArray, setSelectedOptionArray] = useState([]);
+	useEffect(() => {
+		const handleVariableChange = () => {
+			console.log('Variable changed:', privateConv);
+			if (privateConv === undefined) {
+				console.log("return")
+				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) => {
+	const handleOptionChange = (selectId: number, selectedOption: string) => {
 		console.log("tag= ", selectTags)
 		console.log("option= ", selectedOption)
-        setSelectTag((prevTags) => 
-		prevTags.map((tag) =>
-		tag.id === selectId ? { ...tag, selectedOption } : tag
-		)
-        );
+		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)
+		console.log("password??", e.target.checked);
 	}
 
-	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; })=>{
+	const handleName = async (e: { key: string; }) => {
 		if (e.key !== "Enter")
-			return ;
-		try{
-			api.post("/name", {convId: convId, name: newName})
+			return;
+		try {
+			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 ;
-		try{
-			await api.post("/password", {convId: convId, password: newPassword})
-		} catch(err) {
+			return;
+		try {
+			await api.post("/password", { convId: convId, password: newPassword })
+		} catch (err) {
 			console.log(err);
 		}
 		handleClose();
 	}
 
-    const handleBan = async () => {
-		// console.log("ban option= ", selectedUser)
-		try{
-			// console.log("user select=", selectedUser.length)
+	const [unban, setUnban] = useState(false);
+	const closeUnban = () => setUnban(false);
+	
+	const handleBan = async () => {
+		try {
 			if (!selectedUser.length)
-				return ;
-			await api.post("/ban", {convId: convId, username: selectedUser})
-			if (socket)
-			{
-				console.log("emit to ban server")
-				socket.emit("ban", {username: selectedUser})
+				return;
+			const res = await api.post("/ban", { convId: convId, username: selectedUser })
+			console.log("res of ban", res.data)
+
+			if (res.data === 2) {
+				console.log("hehe true");
+				setUnban(true);
 			}
-		} catch(err) {
+			if (socket) {
+				console.log("emit to ban server")
+				socket.emit("ban", { username: selectedUser })
+			}
+		} catch (err) {
 			console.log(err);
 		}
-		handleClose();
+		setTimeout(handleClose, 1500);
 	};
 
 	const handleAdmin = async () => {
 		if (!selectedUser.length)
-			return ;
-		try{
-			await api.post("/admin", {convId: convId, username: selectedUser})
-		} catch(err) {
+			return;
+		try {
+			await api.post("/admin", { convId: convId, username: selectedUser })
+		} catch (err) {
 			console.log(err);
 		}
 		handleClose();
 	};
 
-	const handleMute = async () => {
-		if (!selectedUser.length)
-			return ;
-		try{
-			await api.post("/mute", {convId: convId, username: selectedUser})
-		} catch(err) {
+	const [muteAlert, setMuteAlert] = useState(false);
+	const closeMuteAlert = () => setMuteAlert(false);
+
+	const handleMute = async (e: { key: string; }) => {
+		console.log(`e in press= ${e.key}`)
+		if (e.key != "Enter")
+			return;
+		console.log("value mute = ", time);
+		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{
-			await api.post("/invite", {convId: convId, username: selectedUser})
-		} catch(err) {
+		try {
+			console.log("post invite bitch");
+			await api.post("/inviteConv", { convId: convId, username: selectedUser });
+		} catch (err) {
 			console.log(err);
 		}
 		handleClose();
 	};
 
-    return (
-        <Backdrop onClick={handleClose}>
-            <motion.div
-                onClick={(e) => e.stopPropagation()}
-                className="modalSetting"
-                initial="hidden"
-                animate="visible"
-                exit="exit"
-            >
-
-{/* First selection  */}
-                <div className="settingFirstPart">
-                    <div>
+	return (
+		<Backdrop onClick={handleClose}>
+			<motion.div
+				onClick={(e) => e.stopPropagation()}
+				className="modalSetting"
+				initial="hidden"
+				animate="visible"
+				exit="exit"
+			>
+				<div className="settingFirstPart">
+					<div>
 						<div>
-                    		<Link to="#" onClick={light} className={ privateConv ?  "submit" : "darkSubmit"}>Public</Link>
-							<Link to="#" onClick={dark} className={ privateConv ?  "darkSubmit" : "submit"}>Private</Link>
+							<Link to="#" onClick={light} className={privateConv ? "submit" : "darkSubmit"}>Public</Link>
+							<Link to="#" onClick={dark} className={privateConv ? "darkSubmit" : "submit"}>Private</Link>
 						</div>
-                        {/* <p className="checkbox">Private<input className="check"type="checkbox" value="private" onChange={handleCheckPriv}/></p> */}
-                        <p className="checkbox">Password<input type="checkbox" value="password" checked={password} onChange={handleCheckPass}/> </p>
-                        
-						
-						{password || privateConv ? (
+						<p className="checkbox">Password<input className="inside_ckeckbox" type="checkbox" value="password" checked={password} onChange={handleCheckPass} /> </p>
+						{password ? (
 							<input
 								onChange={(e) => setNewPassword(e.target.value)}
 								onKeyDown={handlePassword}
 								type="password"
 								className="in"
-								placeholder="Password"/>
-							):
+								placeholder="Password" />
+						) :
 							("")}
 
-
-                    </div>
-                    <div className="forName">
-                        <input 
+					</div>
+					<div className="forName">
+						<input
 							onChange={(e) => setNewName(e.target.value)}
 							onKeyDown={handleName}
+							maxLength={20}
 							type="text"
 							className="in"
 							placeholder="New Name"
 						/>
-                    </div>
-                </div>
+					</div>
+				</div>
 
-{/* Second selection  */}
-                
-                <div className="settingSecondPart">
+				<div className="settingSecondPart">
 
 
-				{selectTags.map((selectTag) => (
-				  <div key={selectTag.id}>
-				    <select
-				      value={selectTag.selectedOption}
-				      onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}
-				    >
-				      <option value="">
-				        {selectTag.selectedOption ? selectTag.selectedOption : "Select an option"}
-				      </option>
-				      {users.map((item, index) => (
-				        <option key={index} value={item.username}>
-				          {item.username}
-				        </option>
-				      ))}
-				    </select>
-				  </div>
-				))}
+					{selectTags.map((selectTag) => (
+						<div key={selectTag.id}>
+							<select
+								value={selectTag.selectedOption}
+								onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}
+							>
+								<option value="">
+									{selectTag.selectedOption ? selectTag.selectedOption : "Select an option"}
+								</option>
+								{users.map((item, index) => (
+									<option key={index} value={item.username}>
+										{item.nickname}
+									</option>
+								))}
+							</select>
+						</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>
-					<Link to="#" onClick={handleInvite} className="submit">Send</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>
+				{mute ? (
+					<input
+						onKeyDown={handleMute}
+						type="number"
+						className="in_howLong"
+						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>
 
-                </div>
-					{mute ? (
-						<input type="text" className="in_howLong" placeholder="How long ?" />
-					):("")}
-
-            </motion.div>
-        </Backdrop>
-    )
+			</motion.div>
+		</Backdrop>
+	)
 }
 
 export default ModalSetting

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

@@ -1,12 +1,13 @@
-import {motion} from "framer-motion"
+import { AnimatePresence, motion } from "framer-motion"
 // import Backdrop from "../Sidebar/Backdrop"
-import {Link} from 'react-router-dom';
-import { UserProfile } from "../../DataBase/DataUserProfile";
-import {useState} from 'react';
+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: {
@@ -26,37 +27,58 @@ const dropIn = {
 // 	)
 // }
 
-const ModalEdit = ( handleClose ) => {
+const ModalEdit = () => {
 	// let new_name = "";
 	const [nickname, setNickname] = useState("");
+	const [errTaken, setErrTaken] = useState(false);
+	const closeTaken = () => setErrTaken(false);
+	const [errTooShort, setErrTooShort] = useState(false);
+	const closeTooShort = () => setErrTooShort(false);
 
-	const handler = e =>
-	{
+	const handler = (e: { target: { value: React.SetStateAction<string>; }; }) => {
 		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);
-			}
+		const postNickname = async () => {
+			// try{
+			// 	await api.post("/nickname", {nickname: nickname})
+			// 	// setUser(tmpUser.data);
+			// 	// setIsLoading(false)
+			// }
+			// catch(err){
+			// 	console.log(err);
+			// }
 		};
 		postNickname();
 	}
 
-	const handlePostNickname = async () => 
-	{
-		console.log("nickname=" ,nickname)
-		try{
-			await api.post("/nickname", {nickname: nickname})
-			window.location.reload();
+	const handlePostNickname = async () => {
+		console.log("nickname=", nickname)
+		try {
+			// console.log("cest ici = ",ret);
+			// if (!ret)
+			// console.log("test ret =", ret.data);
+			if (nickname.length > 3) {
+				const ret = await api.post("/nickname", { nickname: nickname });
+				if (ret.data) {
+					console.log("ici error = ", ret.data);
+					window.location.reload();
+				}
+				else {
+					console.log("nickname already set = ", ret.data);
+	
+					setErrTaken(true);
+				}
+			}
+			else if (nickname.length < 3)
+			{
+				setErrTooShort(true);
+			}
+
+
 			// setUser(tmpUser.data);
 			// setIsLoading(false)
 		}
-		catch(err){
+		catch (err) {
 			console.log(err);
 		}
 	}
@@ -66,23 +88,34 @@ const ModalEdit = ( handleClose ) => {
 	// 	//do nothing
 	// }
 	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>
+		<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
+					{/* <Link className="button" to={""}>change</Link> */}
 				</div>
-			</motion.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>
+			</div>
+		</motion.div>
 	)
 }
 

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

@@ -1,9 +1,18 @@
 import React from "react";
-
+import api from "../../script/axiosApi"
 
 
 function Logout(){
+	const logout = async () =>{
 
+		try {
+			await api.post("/logout")	
+		} catch (err) {
+			console.log(err);
+		}
+	}
+
+	logout();
 	localStorage.clear();
 	const path = 'http://' + process.env.REACT_APP_BASE_URL + '/'; 
 	// history(path, { replace: true });

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

@@ -62,8 +62,20 @@ function WinLoss() {
 		const getUser = async ()=>{
 			try{
 				// const tmpUser = await api.get("/profile")
-				const tmpUser = await api.post("/user", {username: username})
-				const tmpHistory = await api.post("/history", {username: username})
+				console.log("username win loss=", username)
+				let tmpUser;
+				let tmpHistory;
+
+				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)
@@ -94,7 +106,7 @@ function WinLoss() {
 			// <span>Loading...</span>
 		  ) : (
 			  <div className='scroll'>
-				 <h2 className='title'>Match history Win/Loss</h2>
+				 <h2 className='title'>Match history {user.win}/{user.loss}</h2>
                 {history.map((c: Matchlog, index) => {
                     return (
                         <div key={index} className='elements'>

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

@@ -26,7 +26,7 @@ export const SidebarData = [
 		cName: 'nav-text'
 	},
 	{
-		title: 'Friend',
+		title: 'Friends',
 		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/20 13:41:44 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/23 17:12:07 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -27,6 +27,7 @@ const UserChat = styled.div `
 	gap: 5px;
 	color: white;
 	cursor: pointer;
+    margin-top: 15px;
 
 	&:hover{
 		background-color: #3e3c61;
@@ -59,13 +60,14 @@ export default function  Friend({currentUser}: UserProps)
 				console.error('Error fetching profile picture:', error);
 			}
 		  };
-		
 		  fetchProfilePicture();
-	})
+	}, []);
 
 	function getStatus(friend: User)
 	{
 		let status = friend.status		
+		let session =friend.sessionNumber
+		console.log(`session= ${session}`)
 		console.log(`status= ${status}`)
 		let statusColor;
 
@@ -94,24 +96,24 @@ export default function  Friend({currentUser}: UserProps)
 	};
 
 	return (
-		<UserChat>
+		<UserChat className="centermargin">
 		{profilePicture ? (
 			<img className="pic-user" src={`data:image/jpeg;base64,${profilePicture}`} />
 		 ) : (
 			 <img className="pic-user" src={DefaultPicture} alt="Default Profile Picture" />
 		 )}
-		<div className="infoSideBar">
+		<div className="end">
 			<span onClick={() => handleButtonClick(currentUser)}>{currentUser.nickname}</span>
-			 <RxCircle color={getStatus(currentUser)} />
-			 <button onClick={() => handleSpectate(currentUser)} >Invite</button>
-			 {getStatus(currentUser) !== 'blue' ? (
-				<></>
-			  ) : (
-				<button onClick={() => handleSpectate(currentUser)} >Spectate</button>
-			  )}
-		</div>
+			<div className="end">
+			 <RxCircle className="friendRequest" color={getStatus(currentUser)} />
+			  </div>
+		 </div>
 		</UserChat>
 	)
 }
-	
-
+// spectate visible
+// {getStatus(currentUser) !== 'blue' ? (
+// 	<></>
+// ) : (
+// 	<button className="friendRequest" onClick={() => handleSpectate(currentUser)} >Spectate</button>
+// )}

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

@@ -15,7 +15,7 @@ const UserChat = styled.div `
 	gap: 5px;
 	color: white;
 	cursor: pointer;
-
+	margin-top: 10px;
 	&:hover{
 		background-color: #3e3c61;
 	}
@@ -94,20 +94,21 @@ export default function  Friend({currentUser}: UserProps)
   	}
 
 	return (
-		<UserChat>
+		<UserChat className="centermargin">
 		{profilePicture ? (
 			<img className="pic-user" src={`data:image/jpeg;base64,${profilePicture}`} />
 		 ) : (
 			 <img className="pic-user" src={DefaultPicture} alt="Default Profile Picture" />
 		 )}
 		{request ? (
-		<div className="infoSideBar">
+			<div className="end">
 			<span onClick={() => handleButtonClick(currentUser)}>{currentUser.nickname}</span>
-			 <RxCheckCircled onClick={() => Accept(request)} color={'green'}/>
-			 <RxCircleBackslash onClick={() => Refuse(request)} color={'red'}/>
+			<div className="end">
+			 <RxCheckCircled className="friendRequest" onClick={() => Accept(request)} color={'green'}/>
+			 <RxCircleBackslash className="friendRequest" onClick={() => Refuse(request)} color={'red'}/>
+			 </div>
 		</div>
 			) : ( "" )}
 		</UserChat>
 	)
 }
-	

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

@@ -7,6 +7,7 @@ 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"
@@ -86,28 +87,17 @@ function Social (){
 
     return (
         <div>
-			<div className='navbar'>
+			<div className='navbarSocial'>
 				{/* <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" />
- 				)}
+				<IoMdPeople className="catchat"/>
 				<span>
 					{isLoading || !user ? (
         				<h4>Loading...</h4>
       				) : (
-        				<h4>{user.nickname}</h4>
+        				<h2>Friends</h2>
       				)}
 	  			</span>
-				<div className="end">
-					<TouchDiv>
-						<MdOutlineGroupAdd/>
-					</TouchDiv>
-					<TouchDiv>
-						<ImBlocked/>
-					</TouchDiv>
-				</div>
+
 			</div>
 
 {/* map with fiend request */}
@@ -119,6 +109,7 @@ function Social (){
 			{friends.map(c=> (
 				<Friend currentUser={c}/>
 			))}
+
 		</div>
     )
 }

containers/react/src/index.js

@@ -1,27 +0,0 @@
-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

@@ -0,0 +1,22 @@
+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,146 +1,38 @@
-import React, { useCallback, useState, useEffect } from 'react';
+import React, { 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('');
-  
+	// const [imageSrc, setImageSrc] = useState('');
+	const [imageSrc, setImageSrc] = useState<string | ArrayBuffer | null>('');
 	useEffect(() => {
-		async function getCode(){
-		await api.get('/QRcode', { responseType: 'blob' })
-		.then(response => {
-		  const reader = new FileReader();
-		  reader.onloadend = () => {
-			setImageSrc(reader.result);
-		  };
-		  reader.readAsDataURL(response.data);
-		})
-		.catch(error => {
-		  console.error(error);
-		});
-	}
-	getCode();
-}, []);
-  
-	// return (
-	//   <div>
-	// 	{imageSrc && <img src={imageSrc} alt="QR Code" />}
-	//   </div>
-	// );
-
-	// <img src={sourceCode} />
+		async function getCode() {
+			await api.get('/QRcode', { responseType: 'blob' })
+				.then(response => {
+					const reader = new FileReader();
+					if (!reader)
+						return;
+					reader.onloadend = () => {
+						setImageSrc(reader.result);
+					};
+					reader.readAsDataURL(response.data);
+				})
+				.catch(error => {
+					console.error(error);
+				});
+		}
+		getCode();
+	}, []);
 
 	return (
 		<div>
 			<div>
-			  <p>Scan the QR code on your authenticator app</p>
-			  {imageSrc && <img src={imageSrc} alt="QR Code" />}
-			</div>
-			{/* <form onSubmit={handleSubmit}>
-				<button type="submit">Confirm</button>
-  			</form> */}
+				<p>Scan the QR code on your authenticator app</p>
+				{/* {imageSrc && <img src={imageSrc} alt="QR Code" />} */}
+				{imageSrc && <img src={imageSrc.toString()} alt="QR Code" />}</div>
 		</div>
-	  );
+	);
+};
 
 
-  };
-
-
-  export default DoubleAuth;
+export default DoubleAuth;

containers/react/src/pages/Field.tsx

@@ -1,13 +1,9 @@
 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 { withRouter } from 'react-router-dom';
 
 interface GameProps {
 	privateParty: boolean,
@@ -18,7 +14,6 @@ interface GameProps {
 function Field()
 {
 	useEffect(() => {
-		// const location = useLocation();
 		const queryParams = queryString.parse(window.location.search);
 		
 		console.log("launch canva hehe")
@@ -56,7 +51,6 @@ function Field()
 	
 		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,9 +7,7 @@ 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

@@ -1,50 +0,0 @@
-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,65 +6,40 @@
 /*   By: apommier <apommier@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/06/09 08:19:04 by apommier          #+#    #+#             */
-/*   Updated: 2023/06/23 15:58:14 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/26 07:06:35 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
-// import { React, useState } from "react";
 import '../styles/Profile.css'
-// import '../styles/App.css'
+import RedAlert from "../components/Alert/RedAlert.tsx";
 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 {AiOutlineHistory} from 'react-icons/ai'
+import {AiOutlineCloseCircle, 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 * as React from 'react';
-// import { useState, useEffect, useParams} from "react";
-import React, { useState, useEffect, useRef, ChangeEventHandler } from "react";
+import React, { useState, useEffect } from "react";
 import { useParams } from 'react-router-dom';
-import {User, Conv} from "../../interfaces.tsx"
+import {User} 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) {
@@ -76,49 +51,18 @@ function Profile () {
 				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 ()=>{
 			console.log(`username= ${username}`)
-			// const pic
-			let pic
+			let pic;
 			try{
+				console.log("before request")
 				const me = await api.get("/profile")
 				if (!username)
 				{
@@ -126,7 +70,6 @@ function Profile () {
 					setUser(me.data);
 					console.log(`mine= true = ${mine}`)
 					pic = await api.post("/getPicture", {username: me.data.username}) //good one?
-					// username = me.data.username
 				}
 				else
 				{
@@ -135,9 +78,7 @@ 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){
@@ -149,8 +90,6 @@ 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}`} />
  			) : (
@@ -160,12 +99,9 @@ function Profile () {
 					{isLoading || !user ? (
         				<h1>Loading...</h1>
       				) : (
-        				<h1>{user.nickname}</h1>
+        				<h1 className='user_name'>{user.nickname}</h1>
       				)}
 	  		</span>
-
-
-
 			  {mine ? (
 			<div>
 				<motion.div >
@@ -176,25 +112,22 @@ 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={modalOpen} handleclose={close}/>}
+				{modalOpen && <ModalEdit/>}
 			</AnimatePresence>
 		</div>
 	)
@@ -202,8 +135,7 @@ function Profile () {
 
 function Home () {
 	const [move, setmove ] = useState(false);
-	const [user, setUser] = useState([]);
-
+	const [user, setUser] = useState<User>();
 	const [successQr, setSuccessQr] = useState(false);
 	const [successSword, setSuccessSword] = useState(false);
 	const [successCrown, setSuccessCrown] = useState(false);
@@ -211,12 +143,21 @@ function Home () {
 	const closeSword = () => setSuccessSword(false);
 	const closeCrown = () => setSuccessCrown(false);
 
+	const { username } = useParams();
 
 	useEffect(() => {
 		const fetchSuccess = async () => {
 			try {
-				const tmpUser = await api.get("/profile");
-				setUser(tmpUser.data);
+				if (!username)
+				{
+					const tmpUser = await api.get("/profile");
+					setUser(tmpUser.data);
+				}
+				else
+				{
+					const tmpUser = await api.post("/user", {username: username});
+					setUser(tmpUser.data);
+				}
 			}
 			catch (error)
 			{
@@ -224,7 +165,7 @@ function Home () {
 			}
 		};
 		fetchSuccess();
-	})
+	}, []);
 
     return (
 		<motion.div className="page"
@@ -232,19 +173,19 @@ function Home () {
 		animate={{opacity: 1}}
 		exit={{opacity: -1}}>
 			<div>
-				{user.otp_verified ? (
+				{user && user.otp_verified ? (
 					<MdQrCodeScanner className='success' onClick={() => setSuccessQr(true)}/>
 					 ):("")}
-				{user.win >= 2 ? (
+				{user && user.win >= 2 ? (
 					<GiWingedSword className="success" onClick={() => setSuccessSword(true)}/>
 					 ):("")}
-
-				{user.win >= 5 ? (
+				{user && user.win >= 5 ? (
 					<GiCrownedSkull className="success" onClick={() => setSuccessCrown(true)}/>
 					 ):("")}
 			</div>
 		<div className="home">
-			<motion.div animate={{x: move ? -200: 120}}
+			<motion.div
+				animate={{x: move ? '-50%' : '25%'}}
 				transition={{type: "tween", duration: 0.5}}>
 					<Profile/>
 			</motion.div>
@@ -254,9 +195,8 @@ function Home () {
 			</div>
 			<motion.div
 				className="div_history"
-			// className="history"
 				onClick={ () => setmove(!move)}>
-					<Link to="#" className="history"><AiOutlineHistory/>  Match History</Link>
+					<Link to="#" className="history"> {move ? (<AiOutlineCloseCircle/>):(<AiOutlineHistory/>)}  Match History</Link>
 			</motion.div>
 			<AnimatePresence initial={false} onExitComplete={() => null}>
           		{successQr ? (

containers/react/src/pages/Login42.tsx

@@ -1,47 +0,0 @@
-// 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

@@ -0,0 +1,23 @@
+import '../styles/old.css';
+import '../styles/field.css';
+import React from 'react';
+ 
+function HomeLogin()
+{
+	const handleButtonClick = () => {
+		const token = localStorage.getItem('token')
+		console.log(`token type= ${typeof 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,29 +1,9 @@
 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"
@@ -31,7 +11,6 @@ function Messages() {
 		animate={{opacity: 1}}
 		exit={{opacity: 0}}>
 			<div className="container">
-				{/* <Sidebar/> */}
 				<Chats/>
 			</div>
 		</motion.div>

containers/react/src/pages/NewLogin.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import '../styles/field.css';
-// import { useHistory } from 'react-router-dom';
 import { useNavigate } from "react-router-dom";
 
 function PlayButton() {
@@ -15,8 +14,6 @@ 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 { motion } from 'framer-motion'
+import { AnimatePresence, 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,16 +28,14 @@ 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 history = useHistory();
+	const [err, setErr] = useState(false);
+	const closeErr = () => setErr(false);
 
     useEffect(() => {
 		if (ref.current)
@@ -80,6 +78,10 @@ function QrCode () {
 			const res = await api.post("/verifyOtp", {token: code})
 			console.log("res= ", res.data)
 			console.log("res= ", res)
+			if (!res.data)
+			{
+				setErr(true);
+			}
 			if (res.data === 1)
 			{
 				console.log("registered")
@@ -148,7 +150,7 @@ function QrCode () {
           <h1>Double Auth Validation</h1>
           <input
             onKeyDown={handleKeyPress}
-            type="text"
+            type="number"
             className="qr"
             placeholder="6 Digits Code"
             value={code}
@@ -156,8 +158,13 @@ function QrCode () {
           />
         </>
       ) : (
-        <button onClick={handleDesactivate}>Desactivate 2FA</button>
+        <button className="desactivate" onClick={handleDesactivate}>Desactivate 2FA</button>
       )}
+	  <AnimatePresence
+			initial={false}
+			onExitComplete={() => null}>
+				{err ? (<RedAlert handleClose={closeErr} text="Error: Bad intput. Try again"/>):("")}
+			</AnimatePresence>
     </>
 
 		{/* {!localStorage.getItem('token') && (

containers/react/src/pages/Social.tsx

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

containers/react/src/pages/canvas.tsx

@@ -1,12 +1,6 @@
-// import io from 'socket.io-client';
-
+import { useEffect } from 'react';
 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,
@@ -16,6 +10,21 @@ interface GameProps {
 
 function DrawCanvas(option: number, gameParam: GameProps) {
 
+	// useEffect(() => {
+	// 	const handleBeforeUnload = async (event: { preventDefault: () => void; returnValue: string; }) => {
+	// 		try {
+	// 			await api.post("/status", {status: 1});
+	// 		} catch (err) {
+	// 			console.log(err);
+	// 		}
+	// 	};
+
+	// 	window.addEventListener('beforeunload', handleBeforeUnload);
+	// 	return () => {
+	// 		window.removeEventListener('beforeunload', handleBeforeUnload);
+	// 	};
+	// }, []);
+
 	console.log(`option= ${option}`);
 	const superpowerModifier = option & 1;  // Retrieves the superpower modifier
     const obstacleModifier = (option >> 1) & 1;  // Retrieves the obstacle modifier
@@ -25,11 +34,6 @@ function DrawCanvas(option: number, gameParam: GameProps) {
     console.log(`obstacleModifier = ${obstacleModifier}`);
     console.log(`speedModifier = ${speedModifier}`);
 	
-	
-	
-	// const socketRef = useRef(null);
-	// socketRef.current = io('http://localhost:4000');
-	
 	function launchGame()
 	{
 		if (!gameParam.privateParty)
@@ -49,11 +53,8 @@ function DrawCanvas(option: number, gameParam: GameProps) {
 		}
 	}
 	
-	// const socket = socketRef.current
 	console.log("start function");
-	
-	// let canvas: HTMLElement | null;
-	const canvas = document.getElementById('myCanvas') as HTMLCanvasElement | null;;
+	const canvas = document.getElementById('myCanvas') as HTMLCanvasElement | null;
 	if (!canvas)
 		return ;
 
@@ -61,15 +62,7 @@ function DrawCanvas(option: number, gameParam: GameProps) {
 	if(!ctx)
 		return ;
 	
-	const socket = io('http://localhost:4000', { transports: ['polling'] });
-	// useEffect(() => {
-		// 	console.log("useeffect?????????????????")
-	// 	return () => {
-	// 		console.log("000000000000000000000000000000000")
-	// 	  socketRef.current.disconnect();
-	// 	};
-	//   }, []);
-
+	const socket = io('http://' + process.env.REACT_APP_SOCKET_URL + ':4000', { transports: ['polling'] });
 
 //========================================================================================================
 //========================================================================================================
@@ -87,7 +80,6 @@ function DrawCanvas(option: number, gameParam: GameProps) {
 	let running = true;
 	const scale = window.devicePixelRatio; 
 	canvas.width = canvas.offsetWidth;
-	// canvas.height = canvas.width * 0.7
 	canvas.height = canvas.offsetHeight;
 
 	//paddle var
@@ -124,6 +116,8 @@ 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;
@@ -137,25 +131,13 @@ function DrawCanvas(option: number, gameParam: GameProps) {
 socket.on('pong:win', async () => {
 	myScore = maxScore;
 	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");
 
 });
 
@@ -170,7 +152,9 @@ socket.on('pong:privateId', async (data) => {
 
 socket.on('pong:gameId', async (data) => {
 	console.log("gameId received");
-	gameId = data;
+	gameId = data.gameId;
+	console.log("gameid = ", gameId);
+	console.log("data gameid = ", data);
   
 	try {
 	  let response = await api.get('/profile');
@@ -190,15 +174,24 @@ socket.on('pong:gameId', async (data) => {
   
 	  console.log("emit to name");
 	  socket.emit('pong:name', info);
+	  if (data.id === myId)
+	  {
+		console.log("myId= true")
+	  	vX = 0.0005;
+	  }
+	  else
+	  {
+		console.log("myId= false")
+	  	vX = -0.0005;
+	  }
 	} catch (error) {
 	  console.log(error);
-	  // Handle error here
 	  return;
 	}
   });
 
 socket.on('pong:name', (data) => {
-	opName = data;
+	opName = data.name;
 	console.log(`opponent Name= ${opName}`)
 });
 
@@ -222,7 +215,6 @@ 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
@@ -235,23 +227,25 @@ socket.on('pong:power', (data) => {
 	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;
+	vX = -0.0005;
+	vY = 0;
+	ballX = canvas.width / 2;
+	ballY = canvas.height / 2;
+});
+
+socket.on('pong:hisPoint', (data) => {
+	console.log("myPointawdawdawdawd point");
+	hisScore = data.point;
+	vX = -0.0005;
 	vY = 0;
 	ballX = canvas.width / 2;
 	ballY = canvas.height / 2;
@@ -323,6 +317,25 @@ socket.on('pong:point', (data) => {
 			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()
@@ -332,7 +345,6 @@ socket.on('pong:point', (data) => {
 		const info = {
 			id: myId,
 			paddleY: paddleY,
-			// width: canvas.width,
 			height: canvas.height,
 			gameId: gameId,
 		};
@@ -385,7 +397,6 @@ socket.on('pong:point', (data) => {
 		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
@@ -411,7 +422,6 @@ socket.on('pong:point', (data) => {
 			return ;
 		ctx.beginPath();
 		ctx.arc(ballX, ballY, ballRadius, 0, 2 * Math.PI);
-		// ctx.lineWidth = 2;
 		ctx.fillStyle = 'red ';
 		ctx.fill();
 	}
@@ -423,11 +433,6 @@ socket.on('pong:point', (data) => {
 //========================================================================================================
 //========================================================================================================
 
-
-// while (!gameId)
-// 	;
-
-  // Define a function to stop the drawing process
   const stopDrawCanvas = async () => {
     running = false;
 
@@ -437,32 +442,38 @@ socket.on('pong:point', (data) => {
 	{
 		console.log("stopDrawCanvas2")
 		try{
-			// const info = {
-				// 	id: myId,
-				// 	option: option,
-				// };
-				
+				await api.post('/status', {status: 1});
 				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);
+		// await api.post('/status', {status: 1});
+	}
 	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)
 {
 	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 ;
 	}
@@ -479,9 +490,7 @@ async function draw(timestamp: number)
 		{
 			await api.post('/win', data);
 			await api.post('/status', {status: 1});
-			//disconnect ?
 			socket.emit('pong:disconnect', {id: myId});
-
 			console.log("send all ?? win");	
 		}
 		else
@@ -489,11 +498,9 @@ async function draw(timestamp: number)
 			await api.post('/loss', data);
 			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 ;
 	}
 
@@ -504,7 +511,6 @@ async function draw(timestamp: number)
 
 	if (!ctx)
 		return ;
-		// requestAnimationFrame(draw);
 	ctx.clearRect(0, 0, canvas.width, canvas.height);
 	drawPaddle();
 	drawcenter();
@@ -568,13 +574,11 @@ 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();
 		}
 	}
 
@@ -593,31 +597,15 @@ async function draw(timestamp: number)
 			}
 			ballX = canvas.width / 2;
 			ballY = canvas.height / 2;
-			vX = 0;
+			vX = 0.0005;
 			vY = 0;
 			hisScore += 1;
 			send_point();
-			// send_forced_info();
 		}
-		if (ballX > canvas.width)
+		if (ballX > (canvas.width * 1.2) && ballX - (vX * 2) > canvas.width)
 		{
-			// 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();
+			console.log("ball out win point pls")
+			send_my_point();
 		}
 
 	}
@@ -646,21 +634,14 @@ async function draw(timestamp: number)
 
     document.addEventListener("touchmove", event => {
         const touchY = event.touches[0].pageY;
-
-        // 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)
@@ -673,50 +654,24 @@ async function draw(timestamp: number)
 				paddleY += paddleSpeed; // déplacer la raquette vers le bas
 			send_paddle_info();
 		}
-		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")
+		else if (event.code === "KeyW")
 		{
+			let date = new Date();
+			console.log("last time =", date.getTime() - lastPower)
+			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();
 		}
 	});
 

containers/react/src/reportWebVitals.js

@@ -1,13 +0,0 @@
-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/tokenSuccess.tsx

@@ -3,17 +3,20 @@ import { useState, useEffect } from 'react'
 import queryString from 'query-string';
 import api from "./axiosApi.tsx";
 import axios from 'axios';
+import React from 'react';
+
+import {Matchlog, User} from "../../interfaces.tsx"
 
 function SuccessToken() {
 	const location = useLocation();
 	const { data } = queryString.parse(location.search);
 	const [code, setCode] = useState('');
-	const [user, setUser] = useState(false);
+	const [user, setUser] = useState<User>();
   
 	useEffect(() => {
 	  if (!data) {
 		console.log("No data");
-		return;
+		return ;
 	  }
   
 	  const cleanData = data.slice(1, -1); // Declare cleanData here
@@ -37,7 +40,7 @@ function SuccessToken() {
 	  getUser();
 	}, [data]);
   
-	const handleKeyPress = async (e)=>{
+	const handleKeyPress = async (e: { key: string; })=>{
 		// console.log(`e in press= ${e.key}`)
 		if (e.key !== "Enter")
 			return ;
@@ -90,7 +93,8 @@ function SuccessToken() {
 	  // 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) {

containers/react/src/styles/App.css

@@ -5,19 +5,41 @@
   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: 20%;
+  width: auto;
   border-radius: 5px;
   background-color: rgb(0, 0, 0);
   margin : 1%;
-  color:white;
+  border-color:rgb(42, 41, 41);
+  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 {
@@ -48,3 +70,9 @@ input.qr{
     transform: rotate(360deg);
   }
 }
+
+.friendRequest {
+	margin-left: 4vh;
+	stroke-width: 0.5;
+	font-size: x-large;
+}

containers/react/src/styles/Game.css

@@ -3,6 +3,7 @@
 	margin: 50px;
 }
 
+
 .rank_elements {
 	border-width:1px;
 	border-style:solid;
@@ -18,11 +19,23 @@
 	/* background-color: #5843e4; */
 	/* border-color: white; */
 	overflow: scroll;
-	height: 70vh;
+	height: 68vh;
 }
 
 .profilePic{
+	margin-left: 10px;
+	/* margin-top: 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

@@ -127,4 +127,5 @@ span {
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	z-index: 1;
 }

containers/react/src/styles/Messages.css

@@ -1,6 +1,6 @@
 .home{
 	background-color: rgb(0, 0, 0);
-	height: 90vh;
+	height: 70vh;
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -19,7 +19,8 @@ select{
 	border: 0!important;
 	margin: 5px;
 	font-size: 18px;
-	border-radius: 6px;
+	padding: 5px;
+	border-radius: 1000px;
 }
 
 .modal{
@@ -54,6 +55,7 @@ select{
 	height: 74vh;
 	width: 30%;
 	overflow: scroll;
+	border-radius: 0px 0px 0px 10px;
 	/* width: 2rem; */
 	/* height: 4rem; */
 }
@@ -106,6 +108,19 @@ select{
 	margin-top: 0px;
 }
 
+.navbarSocial{
+	/* width: clamp(50%, 500px, 20%); */
+	/* height: min(50%, 100px); */
+	display: flex;
+	align-items: center;
+	/* background-color: yellow; */
+	margin: 10px;
+	background-image: linear-gradient(90deg, #5843e4, #5a0760);
+	color: white;
+	padding: 3px;
+	border-radius: 100px;
+}
+
 .pic{
 	height: 35px;
 	width: 35px;
@@ -131,16 +146,17 @@ select{
 }
 
 .messages{
-	background-color: rgb(26, 26, 26);
+	/* background-color: rgb(26, 26, 26); */
 	/* height: calc(100% - 118px); */
 	width: 70%;
 	/* height: 300px; */
+	border-radius: 0px 0px 10px 0px;
 	overflow: scroll;
 }
 
 .input{
 	display: flex;
-	height: 50px;
+	height: 6vh;
 	background-color: white;
 	color:#060b26;
 	border: none;
@@ -170,6 +186,7 @@ input{
 	width: 40px;
 	height: 40px;
 	border-radius: 50%;
+	margin: 10px;
 }
 
 .messageContent{
@@ -202,8 +219,19 @@ 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;
@@ -228,9 +256,9 @@ p {
 	backdrop-filter: sepia(90%);
 	background-color: rgba(0, 0, 0, 0.3);
 	border-radius: 4px;
-	width: 11rem;
-	height: 1.5rem;
-	margin-top: 1rem;
+	width: 15rem;
+	height: 2rem;
+	margin-top: 1.3rem;
 }
 
 .greenAlert{
@@ -248,7 +276,7 @@ p {
 	color: rgba(255, 255, 255, 1);
 }
 
-.redAlert{
+/* .redAlert{
 	width: clamp(50%, 500px, 90%);
 	height: min(50%, 100px);
 
@@ -257,23 +285,30 @@ p {
 	border-radius: 12px;
 	flex-direction: row;
 	align-items: center;
+	text-align: center;
+	background-color: rgba(133, 6, 6, 0.7);
+	font-size: 25px;
+	color: rgba(255, 255, 255, 1);
+} */
+
+.redAlert{
+	width: clamp(50%, 500px, 90%);
+	height: min(50%, 100px);
+
+	margin: auto;
+	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);
 }
 
-.redAlert{
-	width: clamp(50%, 500px, 90%);
-	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);
+.text_alert{
+	text-align: center;
+	justify-content: center;
 }
 
 .yellowAlert{
@@ -285,17 +320,13 @@ 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);
@@ -307,11 +338,17 @@ p {
 	/* flex-direction: column; */
 	/* align-items: center; */
 	background-color: #3e3c61;
+	overflow: scroll;
 }
 
 .settingFirstPart{
 	margin-top: 10%;
-	margin-left: 15%;
+	margin-left: 20%;
+}
+
+.settingFirstPart2{
+	margin-top: 10%;
+	margin-left: 30%;
 }
 
 .settingSecondPart{
@@ -324,6 +361,7 @@ p {
 .checkbox{
 	display:flex;
 	flex-direction:row;
+	margin-left: 60px;
 }
 
 input.in{
@@ -331,23 +369,59 @@ input.in{
 	margin-left: 0px;
 	background-color: black;
 	color: white;
-	border-radius: 12px;
+	border-radius: 4px;
 	width: 70%;
+	height: 100%;
+	font-weight:100;
+	font-size: 20px;
+	padding: 7px;
 }
 
 input.in_howLong{
-	margin-top: 14.5%;
+	margin-top: 13%;
 	margin-left: 0px;
 	background-color: black;
 	color: white;
-	border-radius: 12px;
-	width: 15%;
+	border-radius: 4px;
+	width: 10%;
+	height: 10%;
+	font-weight:100;
+	font-size: 20px;
+	padding: 7px;
 }
 
 .mdp{
 	background-color : black;
 	border-radius: 8px;
 	color: white;
-	width: 20%;
+	width: 60%;
+	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

@@ -62,6 +62,7 @@
 .page {
 	text-align: center;
 	overflow-y: scroll;
+	/* height: 80vh; */
 	/* height: 50vh; */
 	/* width: 50vh; */
 	/* background-color: black; */
@@ -80,9 +81,9 @@
 	border-radius: 50%;
 	border: thick;
 	border-color: red;
+	margin-left: 20px;
 	/* border-image: linear-gradient(90deg, #5843e4, #5a0760); */
 
-	/* margin-top: 20px; */
 }
 
 .home{
@@ -96,11 +97,11 @@
 }
 
 .history{
-	display: inline-block;
+	display:inline-block;
 	color: white;
 	background-color:  #5843e4;
 	border-radius: 20px;
-	padding: 14px;
+	padding: 1.3% 30%;
 	font-size: 1.7rem;
 	text-decoration: none;
 	font-weight: bold;
@@ -153,6 +154,13 @@
 	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/field.css

@@ -1,20 +1,20 @@
 .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 4vw;
+	padding: 2vh 5vw;
 	height: 10vh;
 	width: 20vw;
-	font-size: 250%;
-	text-align: center;
+	font-size: 300%;
   }
 
+  .inside_checkbox{
+	height : 70%;
+	width:  70%;
+  }
   
   .field {
 	background-color: rgb(249, 249, 249);
@@ -69,6 +69,18 @@
   }
 }
 
+.responsive{
+	display: flex;
+	flex-direction: column;
+}
+
+/* @media screen and (max-width: 350px){
+	.responsive{
+		display:list-item;
+		flex-direction: column;
+	}
+  } */
+
 #myCanvas {
 	background-color: rgb(124, 47, 47);
 	/* position: absolute; */

docker-compose.yml

@@ -3,6 +3,7 @@ version: "3.3"
 services:
 
   nginx:
+    restart: unless-stopped
     image: nginx:alpine
     container_name: nginx
     env_file: .env
@@ -14,20 +15,11 @@ 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
@@ -44,6 +36,7 @@ services:
 
 
   api:
+    restart: unless-stopped
     image: node:latest
     container_name: api
     working_dir: /app
@@ -59,9 +52,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
@@ -75,6 +68,7 @@ services:
       - pongNetwork
 
   pong:
+    restart: unless-stopped
     image: node:latest
     container_name: pong
     working_dir: /app
@@ -88,6 +82,7 @@ services:
     entrypoint: ["sh", "-c" , "npm install && npm run start:dev"]
 
   chat:
+    restart: unless-stopped
     image: node:latest
     container_name: chat
     working_dir: /app