quit branch

.env

@@ -12,14 +12,9 @@
 
 #URL
 NGINX_ENVSUBST_TEMPLATE_SUFFIX=".conf"
-
-# BASE_URL=http://localhost
-BASE_URL=localhost:8080
-REACT_APP_BASE_URL=localhost:8080
-REDIRECT_URI=http://localhost:8080/api/auth/login
-#postgres var
-# POSTGRES_HOST=127.0.0.1
-# DB_TYPE=postgres
+BASE_URL=bess-f2r2s14:8080
+REACT_APP_BASE_URL=bess-f2r2s14:8080
+REDIRECT_URI=http://bess-f2r2s14:8080/api/auth/login
 POSTGRES_HOST=postgresql
 POSTGRES_USER=postgres
 POSTGRES_PASSWORD=postgres
@@ -42,5 +37,5 @@ REACT_HOST=0.0.0.0
 #auth var
 JWT_SECRET=secrethere
 # REDIRECT_URI=http://localhost:80/api/auth/login
-API_SECRET=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
-CLIENT_UID=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41
+API_SECRET=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
+CLIENT_UID=u-s4t2ud-a58c0bac83e6a599129ff519650335526c634890b80bd360bce3a8007db4897e

.gitignore

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

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.ts

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   app.controller.ts                                  :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: apommier <apommier@student.42.fr>          +#+  +:+       +#+        */
+/*   By: sadjigui <sadjigui@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/06/17 01:00:00 by apommier          #+#    #+#             */
-/*   Updated: 2023/06/21 01:19:01 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/24 20:37:12 by sadjigui         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -180,6 +180,9 @@ export class AppController {
 	// let user = req.user
 	// user.nickname = data.nickname
 	console.log(`user= ${req.user.username}`)
+	const taken = await this.userService.findNickname(data.nickname)
+	if (taken)
+		return (0);
 	let user = await this.userService.findOne(req.user.username)
 	user.nickname = data.nickname;
 	// return await this.userService.getFriends(req.user.username);
@@ -480,8 +483,6 @@ export class AppController {
 	// res.json(messages);
   }
 
-
-
   @UseGuards(JwtAuthGuard)
   @Get('/conv')
   async getConv(@Request() req) {
@@ -560,7 +561,7 @@ export class AppController {
   async verifyPassword(@Body() data: any) {
 	  return await this.chatService.verifyPassword(data.convId, data.password)
 	}
-	
+
   @UseGuards(JwtAuthGuard)
   @Post('/invite')
   async inviteUser(@Body() data: any) {
@@ -588,7 +589,7 @@ export class AppController {
   async muteUser(@Body() data: any) {
 	if (!data.username)
 		return ;
-	return await this.chatService.muteUser(data.convId, data.username)
+	return await this.chatService.muteUser(data.convId, data.username, data.time)
   }
   
   @UseGuards(JwtAuthGuard)
@@ -598,11 +599,16 @@ export class AppController {
 	return await this.chatService.isAdmin(data.convId, req.user.username)
   }
   
-  
   @UseGuards(JwtAuthGuard)
   @Post('/private')
   async setPrivate(@Body() data: any) {
-	return await this.chatService.setPrivate(data.convId)
+	return await this.chatService.setPrivate(data.convId, true)
+  }
+
+  @UseGuards(JwtAuthGuard)
+  @Post('/public')
+  async setPublic(@Body() data: any) {
+	return await this.chatService.setPrivate(data.convId, false)
   }
 
   @UseGuards(JwtAuthGuard)

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/24 18:47:59 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -119,14 +119,22 @@ async verifyPassword(convId: number, password: string) {
 	// conv.password = password
 }
 
-async muteUser(convId: number, username: string) {
+async muteUser(convId: number, username: string, time: string) {
 	const conv = await this.findConv(convId);
 
+	console.log("MUTE USER");
+
 	conv.muted = conv.muted || [];
 	if (conv.muted.find(item => item === username))
 		return (1);
 	conv.muted.push(username);
 	this.save(conv);
+
+	setTimeout(() => {
+		conv.muted = conv.muted.filter((item) => item !== username)
+		this.save(conv);
+	  }, 5000);
+	  console.log("END MUTE USER");
 }
 
 async setAdmin(convId: number, username: string) {
@@ -149,12 +157,14 @@ async isAdmin(convId: number, username: string) {
 	return (0);
 }
 
-async setPrivate(convId: number) {
+async setPrivate(convId: number, bool: boolean) {
 	const conv = await this.findConv(convId);
-	if (conv.private === true)
-		conv.private = false;
-	else
-		conv.private = true;
+	console.log("bool= ", bool);
+	conv.private = bool;
+	// if (conv.private === true)
+	// 	conv.private = false;
+	// else
+	// 	conv.private = true;
 	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/model/user.entity.ts

@@ -82,7 +82,7 @@ export class User {
 
 }
 
-@Entity()
+@Entity({name: 'MatchLog' })
 export class MatchLog {
   @PrimaryGeneratedColumn()
   id: number;

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

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   users.service.ts                                   :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: apommier <apommier@student.42.fr>          +#+  +:+       +#+        */
+/*   By: sadjigui <sadjigui@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/24 19:45:28 by sadjigui         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -18,6 +18,7 @@ import { User } from '../model/user.entity';
 import { MatchLog } from '../model/user.entity';
 
 
+
 @Injectable()
 export class UsersService {
 	constructor(
@@ -36,11 +37,22 @@ export class UsersService {
 	async findAll(): Promise<User[]> {
 		return await this.userRepository.find();
 	}
+
+	// async findNickname(username: string): Promise<User> {
+	// 	console.log("nick in find =", username)
+	// 	const ret= await this.userRepository.findOneBy({nickname: username});
+	// 	console.log("ret noick=", ret )
+	// 	return ret;
+	// }
 	
 	async findOne(username: string): Promise<User> {
 		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);
 	}
@@ -71,8 +83,10 @@ export class UsersService {
 		user.friendRequest = user.friendRequest || [];
 		if (user.friendRequest.find(item => item === username))
 			return (1);
+		if (user.friends.find(item => item === username))
+			return (1);
 		user.friendRequest.push(username);
-		this.save(user);
+		this.save(user);	
 		return (1);
 	}
 
@@ -95,28 +109,39 @@ 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;
+
+		if (user)
+		{
+
+			// const ret = await this.matchRepository.query("SELECT * FROM \"MatchLog\" WHERE id = ($1);", [user.id]);
+			const ret = await this.matchRepository.query("SELECT * FROM \"MatchLog\"");
+			console.log("all match= ", ret);
 		}
+		//   const children = user.children;
+		//   console.log(user); 
+		//   console.log(user.children); // or perform any operations with the children
+		//   return children;
+			
+		// }
 	}
 
 	async addFriend(user: User, username: string) {
-		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))
-		{		
+		{
 			user.friendRequest = user.friendRequest.filter((item) => item !== username);
 			this.save(user);
 			return (1);
 		}
 		user.friends.push(username);
 		user.friendRequest = user.friendRequest.filter((item) => item !== username);
+		user2.friends = user2.friends || [];
+		user2.friends.push(user.username);
+		this.save(user2);
 		this.save(user);
 		return (1);
 	}

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

@@ -6,10 +6,12 @@
 /*   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/24 17:20:24 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
+//0.0001
+
 import { SubscribeMessage, WebSocketGateway, OnGatewayInit, WebSocketServer, OnGatewayConnection, OnGatewayDisconnect } from '@nestjs/websockets';
 import { Server, Socket } from 'socket.io';
 import { v4 as uuidv4 } from 'uuid';
@@ -165,8 +167,9 @@ 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);
     });
   }
 
@@ -200,8 +203,8 @@ joinPrivateParty(client: Socket, payload: any): void {
 	{
 		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
 	{
@@ -337,6 +340,24 @@ 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
 	{
@@ -345,13 +366,13 @@ addPrivateParty(client: Socket, payload: any): void {
 		
 		console.log(`name of client= ${payload.name}`);
 
-		if (playersIds[0] === payload.id)
+		if (playersIds[0] === payload.id) 
 		{
-			this.clients[playersIds[1]].emit('pong:name', payload.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,7 @@
-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-f2r2s14:8080
+REACT_APP_SOCKET_URL=bess-f2r2s14:8080
+REACT_APP_API_SECRET=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
+REACT_APP_CLIENT_UID=u-s4t2ud-a58c0bac83e6a599129ff519650335526c634890b80bd360bce3a8007db4897e
+
 # REACT_APP_BASE_URL=92.143.191.152
 # REACT_APP_BASE_URL=192.168.1.19

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/src/components/Alert/RedAlert.tsx

@@ -32,11 +32,11 @@ function RedAlert ({handleClose, text}: AlertProps) {
                 initial="hidden"
                 animate="visible"
                 exit="exit"
-            >
+                >
             <BiErrorCircle/>
             <p>{text}</p>
             </motion.div>
-            {setTimeout(handleClose, 1500)}
+                {setTimeout(handleClose, 1500)}
         </Backdrop>
     )
 }

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

@@ -40,9 +40,9 @@ 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 </p>
+				<p><input className="inside_checkbox" type="checkbox" value="obstacle"/> Obstacle </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

@@ -17,6 +17,7 @@ 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";
@@ -27,6 +28,7 @@ import PartyInvite from "./PartyInvite.tsx";
 
 // import {User, Conv, Message} from "../../../interfaces.tsx"
 import {User, Conv} from "../../../interfaces.tsx"
+import { IoChatbox, IoLogoOctocat } from "react-icons/io5";
 
 const TouchDiv = styled.div`
 	margin-left: 10px;
@@ -83,7 +85,7 @@ interface MessageProps {
   }
 
 function Chats(){
-
+	
 	const [isLoading, setIsLoading] = useState<boolean>(true);
 	const [conversations, setConversation] = useState([]);
 	const [partyInvite, setPartyInvite] = useState([]);
@@ -119,7 +121,7 @@ function Chats(){
 				setUsers(tmpUsers.data);
 
 				// console.log(`connection....`);
-				socket.current = io('http://' + process.env.REACT_APP_BASE_URL + ':4001', { transports: ['polling'] });
+				socket.current = io('http://' + process.env.REACT_APP_SOCKET_URL + ':4001', { transports: ['polling'] });
 				// console.log(`connection done`);
 				socket.current.emit('connection', {username: tmpUser.data.username})
 				socket.current.on('message', (data) => { //data should be a message ?)
@@ -205,11 +207,12 @@ 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;
+		console.log("in handle");
 		if (!user || !currentChat)
 			return ;
 		const message = {
@@ -242,33 +245,11 @@ function Chats(){
 		}
 	}
 
-	const handleKeyPress = async (e: { key: string; })=> {
+	const handleKeyPress = async (e: { key?: any; preventDefault: () => void; })=> {
 		// console.log(`e in press= ${e.key}`)
 		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);
 	}
 
 
@@ -323,6 +304,7 @@ function Chats(){
 	
 	  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)
@@ -371,6 +353,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,12 +372,13 @@ function Chats(){
 		<div className="chat">
 		
 			<div className='navbar'>
-				<img src={DefaultPic} alt="profile" className="pic"/>
+				{/* <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">
@@ -463,7 +447,7 @@ function Chats(){
 				))}
       	<TouchDiv>
         <motion.div onClick={handleAddFriend}>
-          <MdOutlineGroupAdd />
+          <MdOutlineGroupAdd className="catchat"/>
         </motion.div>
         <AnimatePresence initial={false} onExitComplete={() => null}>
 			{showAddFriendAlert && addFriend && (
@@ -476,7 +460,7 @@ function Chats(){
       </TouchDiv>
       <TouchDiv>
         <motion.div onClick={handleBlockFriend}>
-          <ImBlocked />
+          <ImBlocked  className="block"/>
         </motion.div>
         <AnimatePresence initial={false} onExitComplete={() => null}>
           {showBlockAlert && block && (
@@ -492,7 +476,7 @@ function Chats(){
 		<motion.div 
 		onClick={() => (setting ? setSetting(false) : setSetting(true))}
 		>
-		<RiListSettingsLine/>
+		<RiListSettingsLine className="inline"/>
 		<AnimatePresence
 			initial={false}
 			onExitComplete={() => null}
@@ -543,7 +527,8 @@ function Chats(){
 						<div key={index}
 							onClick={() => setCurrentChat(c)}>
 							<UserChat>
-							<img className="pic-user" src={DefaultPic} alt="User" />
+							{/* <img className="pic-user" src={DefaultPic} alt="User" /> */}
+							{/* <HiChatBubbleLeft className="catchat"/> */}
 							<div className="infoSideBar">
 								<span>{c.name}</span>
 								{/* <SideP>Desc?</SideP> */}
@@ -571,7 +556,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>

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/24 16:00:48 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -34,23 +34,24 @@ interface MessageMeProps {
   }
 
 function MessageMe({message, own}: MessageMeProps){
-	
+
 	const [profilePicture, setProfilePicture] = useState('');
 	const [sender, setSender] = useState<User>();
 	const [conv, setConv] = useState<Conv>();
-	
+
 	const [user, setUser] = useState<User>();
 	const scrollRef = useRef<HTMLDivElement>(null);
 
-	// console.log("Message eher")
 
 	useEffect(() => {
 		if (scrollRef.current)
 		{
-			scrollRef.current.scrollIntoView({ behavior: "smooth",})
-		}
+			scrollRef.current.scrollIntoView({ behavior: "smooth"});
+		}})
+	useEffect(() => {
 		const fetchProfilePicture = async () => {
 			try {
+				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})
@@ -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>
@@ -115,8 +130,8 @@ function MessageMe({message, own}: MessageMeProps){
 				<MeStyleP>{message.text}</MeStyleP>
 			</div>
 		</div>
-		
+
 	)
 }
 
-export default MessageMe
+export default MessageMe

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,7 @@ const Modal = ({handleClose}) => {
 		getConv();
 	}, []);
 
-    const handleOptionChange = (selectId, selectedOption) => {
+    const handleOptionChange = (selectId: number, selectedOption: string) => {
 		console.log("selected Option=", selectedOption)
         setSelectTag((prevTags) => 
             prevTags.map((tag) =>
@@ -103,24 +107,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 an option"
+						}</option>
+				      {users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.nickname)).map((item, index) => (
+						  <option key={index} value={item.username}>
+				          {item.nickname}
 				        </option>
 				      ))}
 				    </select>
@@ -132,30 +139,32 @@ const Modal = ({handleClose}) => {
 				<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={() => handleClose}>Cancel</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>
         			  {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>
         			    )
-        			  ))}
+						))}
         			</select>
       			)}
-				  {channel.private ? (
-					<input className="mdp" placeholder="password" type="text" />
-				  ):("")}
+				  {/* {channel.private ? (
+					  <input className="mdp" placeholder="passdddddword" type="text" />
+					  ):("")} */}
 
 
 				<div className="div_submit">
@@ -164,6 +173,7 @@ const Modal = ({handleClose}) => {
 
 
 
+				</div>
             </motion.div>
         </Backdrop>
     )

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

@@ -39,8 +39,10 @@ const ModalSetting = ({handleClose, convId,  socket }: ModalSettingProps) => {
 	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);
@@ -53,9 +55,15 @@ const ModalSetting = ({handleClose, convId,  socket }: ModalSettingProps) => {
 		console.log("convid =", convId)
 		const getUsers = async ()=>{
 			try {
+				const currentConv = await api.post("/convId", {convId: convId});
+				
+				// console.log("conv private =================== ", )
+				if (currentConv.data.private)
+					setPrivateConv(true);
 				const tmpUsers = await api.get("/users");
 				console.log("users=", tmpUsers.data);
 				setUsers(tmpUsers.data);
+				setLoading(false);
 			} catch(err){
 				console.log(err)
 			}
@@ -63,6 +71,31 @@ const ModalSetting = ({handleClose, convId,  socket }: ModalSettingProps) => {
 		getUsers();
 	}, []);
 
+	useEffect(() => {
+		// Function to run when myVariable changes
+		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();
+		// return () => {
+		//   handleVariableChange();
+		// };
+	  }, [privateConv]);
+
     // const [multi, setMulti] = useState(false);
     // const [selectedOptionArray, setSelectedOptionArray] = useState([]);
 
@@ -80,30 +113,30 @@ const ModalSetting = ({handleClose, convId,  socket }: ModalSettingProps) => {
 
 	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 handleCheckPriv = (e: { target: { checked: any; }; }) => {
+	// 	// setPassword(e.target.checked);
+	// 	if (e.target.checked)
+	// 	{
+	// 		console.log("chack true", e.target.checked)
+	// 		try{
+	// 			api.post("/private", {convId: convId})
+	// 		} catch(err) {
+	// 			console.log(err);
+	// 		}
+	// 	}
+	// 	else
+	// 	{
+	// 		console.log("chack false", e.target.checked)
+	// 		try{
+	// 			api.post("/private", {convId: convId})
+	// 		} catch(err) {
+	// 			console.log(err);
+	// 		}
+	// 	}
+	// }
 
 	const handleName = async (e: { key: string; })=>{
 		if (e.key !== "Enter")
@@ -157,11 +190,15 @@ const ModalSetting = ({handleClose, convId,  socket }: ModalSettingProps) => {
 		handleClose();
 	};
 
-	const handleMute = async () => {
-		if (!selectedUser.length)
+	const handleMute = async (e: { key: string; }) => {
+		console.log(`e in press= ${e.key}`)
+		if (e.key != "Enter")
 			return ;
+
+		// console.log("value mute = ", e.target.value);
+		console.log("value mute = ", time);
 		try{
-			await api.post("/mute", {convId: convId, username: selectedUser})
+			await api.post("/mute", {convId: convId, username: selectedUser, time: time})
 		} catch(err) {
 			console.log(err);
 		}
@@ -177,6 +214,17 @@ const ModalSetting = ({handleClose, convId,  socket }: ModalSettingProps) => {
 		handleClose();
 	};
 
+	const handleKeyPress = async (e: { key: string; })=> {
+		if (e.key !== "Enter")
+			return ;
+		try{
+
+		} 
+		catch(err){
+			
+		}
+	}
+
     return (
         <Backdrop onClick={handleClose}>
             <motion.div
@@ -198,7 +246,7 @@ const ModalSetting = ({handleClose, convId,  socket }: ModalSettingProps) => {
                         <p className="checkbox">Password<input type="checkbox" value="password" checked={password} onChange={handleCheckPass}/> </p>
                         
 						
-						{password || privateConv ? (
+						{password ? (
 							<input 
 								onChange={(e) => setNewPassword(e.target.value)}
 								onKeyDown={handlePassword} 
@@ -208,7 +256,6 @@ const ModalSetting = ({handleClose, convId,  socket }: ModalSettingProps) => {
 							):
 							("")}
 
-
                     </div>
                     <div className="forName">
                         <input 
@@ -254,7 +301,14 @@ const ModalSetting = ({handleClose, convId,  socket }: ModalSettingProps) => {
 
                 </div>
 					{mute ? (
-						<input type="text" className="in_howLong" placeholder="How long ?" />
+						<input 
+							onKeyDown={handleMute} 
+							type="number" 
+							className="in_howLong" 
+							placeholder="How long ?"
+							value={time}
+            				onChange={(e) => setTime(e.target.value)}
+						/>
 					):("")}
 
             </motion.div>

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,55 @@ const dropIn = {
 // 	)
 // }
 
-const ModalEdit = ( handleClose ) => {
+const ModalEdit = (handleClose) => {
 	// let new_name = "";
 	const [nickname, setNickname] = useState("");
-	
-	const handler = e =>
-	{
+	const [errTaken, setErrTaken] = useState(false);
+	const closeTaken = () => setErrTaken(false);
+	const [errTooShort, setErrTooShort] = useState(false);
+	const closeTooShort = () => setErrTooShort(false);
+
+	const handler = e => {
 		setNickname(e.target.value);
 		console.log("testeeeee")
-		const postNickname = async ()=>{
-			try{
-				await api.post("/nickname", {nickname: nickname})
-				// setUser(tmpUser.data);
-				// setIsLoading(false)
-			}
-			catch(err){
-				console.log(err);
-			}
+		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 {
+			const ret = await api.post("/nickname", { nickname: nickname });
+			// console.log("cest ici = ",ret);
+			// if (!ret)
+			console.log("test ret =", ret.data);
+			if (nickname.length < 3) {
+				setErrTooShort(true);
+			}
+			else if (ret.data) {
+				console.log("ici error = ", ret.data);
+				window.location.reload();
+			}
+			else {
+				console.log("nickname already set = ", ret.data);
+
+				setErrTaken(true);
+			}
+
+
 			// setUser(tmpUser.data);
 			// setIsLoading(false)
 		}
-		catch(err){
+		catch (err) {
 			console.log(err);
 		}
 	}
@@ -66,23 +85,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">
+			<h2>Type your new name</h2>
+			<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/Win_Loss.tsx

@@ -83,7 +83,7 @@ function WinLoss() {
 // 		{isLoading ? (
 // 			<h1>Loading...</h1>
 // 		  ) : (
-// 			<h1>{user.username}</h1>
+// 			<h1>{user.username}</h1>	
 // 		  )}
 //   	</div>
 
@@ -94,7 +94,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/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       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -59,9 +59,8 @@ export default function  Friend({currentUser}: UserProps)
 				console.error('Error fetching profile picture:', error);
 			}
 		  };
-		
 		  fetchProfilePicture();
-	})
+	}, []);
 
 	function getStatus(friend: User)
 	{

containers/react/src/pages/Home.tsx

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   Home.tsx                                           :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: apommier <apommier@student.42.fr>          +#+  +:+       +#+        */
+/*   By: sadjigui <sadjigui@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/24 20:16:28 by sadjigui         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -20,7 +20,7 @@ import { motion, AnimatePresence } from 'framer-motion'
 // 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';
 
@@ -78,47 +78,17 @@ function Profile () {
 			  } catch (error) {
 				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)
 				{
@@ -160,7 +130,7 @@ function Profile () {
 					{isLoading || !user ? (
         				<h1>Loading...</h1>
       				) : (
-        				<h1>{user.nickname}</h1>
+        				<h1 className='user_name'>{user.nickname}</h1>
       				)}
 	  		</span>
 
@@ -179,7 +149,7 @@ function Profile () {
 						</>
 					)}
 				</motion.div>
-			
+
 				{/* <div className="file-upload-container"> */}
   					{/* <button onClick={handleUpload} className="upload-button">Upload</button> */}
 					  {/* <button onClick={handleUpload} className="upload-button">Upload</button> */}
@@ -202,7 +172,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);
@@ -211,12 +181,23 @@ 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);
+				}
+				// const tmpUser = await api.get("/profile");
+				// setUser(tmpUser.data);
 			}
 			catch (error)
 			{
@@ -224,7 +205,7 @@ function Home () {
 			}
 		};
 		fetchSuccess();
-	})
+	}, []);
 
     return (
 		<motion.div className="page"
@@ -232,20 +213,20 @@ 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}}
-				transition={{type: "tween", duration: 0.5}}>
+				transition={{type: "tween", duration: 0.5, position: "fixed",}}
+				>
 					<Profile/>
 			</motion.div>
 			<motion.div animate={{opacity: !move ? -1 : 1}}>
@@ -256,7 +237,7 @@ function Home () {
 				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 ? (
@@ -271,8 +252,8 @@ function Home () {
 			  	<YellowAlert handleClose={closeSword} text={"Success: 2 victory ? You won the noobi warrior success!"} icon={3}/>
 			  	) : ("")}
         </AnimatePresence>
-		</motion.div> 
+		</motion.div>
     )
 }
 
-export default Home
+export default Home

containers/react/src/pages/QrCode.tsx

@@ -6,30 +6,30 @@ import "../styles/App.css";
 import api from '../script/axiosApi.tsx';
 
 import QRCodeStyling from "qr-code-styling";
-import { motion } from 'framer-motion'
-
+import { motion , AnimatePresence} 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"
-    },
-    backgroundOptions: {
-        color: "#5843e4",
-    },
-    imageOptions: {
-        crossOrigin: "anonymous",
-        margin: 20
-    }
-    });
+	width: 300,
+	height: 300,
+	// image: "../assets/profile.jpg",
+	dotsOptions: {
+		color: "black",
+		type: "rounded"
+	},
+	backgroundOptions: {
+		color: "#5843e4",
+	},
+	imageOptions: {
+		crossOrigin: "anonymous",
+		margin: 20
+	}
+});
 
-function QrCode () {
-    // const url = "https://www.youtube.com";
-    // const ref = useRef(null);
+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("");
@@ -39,17 +39,16 @@ function QrCode () {
 
 	// const history = useHistory();
 
-    useEffect(() => {
+	useEffect(() => {
 		if (ref.current)
-        	qrCode.append(ref.current);
-		const getUser = async ()=>{
-			try{
+			qrCode.append(ref.current);
+		const getUser = async () => {
+			try {
 				const tmpUser = await api.get("/profile");
 				setUser(tmpUser.data);
-				if (tmpUser.data.otp_verified)
-				{
+				if (tmpUser.data.otp_verified) {
 					setActivated(true);
-					return ;
+					return;
 				}
 				const otpData = await api.post("/otp");
 				setUrl(otpData.data.otpauth_url);
@@ -58,125 +57,134 @@ function QrCode () {
 				// console.log("test")
 				// console.table(convs);
 			}
-			catch(err){
+			catch (err) {
 				console.log(err);
 			}
 		};
 		getUser();
 
-    }, []);
+	}, []);
 
-    useEffect(() => {
-        qrCode.update({data: url});
-    }, [url]);
+	useEffect(() => {
+		qrCode.update({ data: url });
+	}, [url]);
 
-
-	const handleKeyPress = async (e: { key: string; })=>{
+	const [errCode, setErrCode] = useState(false);
+	const closeErr = () => setErrCode(false);
+	const handleKeyPress = async (e: { key: string; }) => {
 		// console.log(`e in press= ${e.key}`)
 		if (e.key !== "Enter")
-			return ;
-		try{
+			return;
+		try {
 			console.log("code= ", code)
-			const res = await api.post("/verifyOtp", {token: code})
+			const res = await api.post("/verifyOtp", { token: code })
+			if (!res.data) {
+				setErrCode(true);
+			}
 			console.log("res= ", res.data)
 			console.log("res= ", res)
-			if (res.data === 1)
-			{
+			if (res.data === 1) {
 				console.log("registered")
 				// history.push('/login')
 
-				const path = 'http://' + process.env.REACT_APP_BASE_URL + '/'; 
+				const path = 'http://' + process.env.REACT_APP_BASE_URL + '/';
 				window.history.pushState({}, '', path);
 				window.location.reload();
 
 			}
-			else
-			{
+			else {
 				console.log("bad code")
 				//alert ?? retry
 			}
 			// redirect('/test')
-		} 
-		catch(err){
-			 console.log(err)
+		}
+		catch (err) {
+			console.log(err)
 		}
 	}
 
 	const handleDesactivate = async () => {
 		try {
 			await api.post("/deleteOtp")
-			// const path = 'http://' + process.env.REACT_APP_BASE_URL + '/'; 
+			// const path = 'http://' + process.env.REACT_APP_BASE_URL + '/';
 			// window.history.pushState({}, '', path);
 			window.location.reload();
-		} catch(err) {
+		} catch (err) {
 			console.log(err);
 		}
-    };
+	};
 
-    return (
+	return (
 		// <motion.div className="page"
 		// initial={{opacity: -1}}
 		// animate={{opacity: 1}}
 		// exit={{opacity: -1}}>
-        //     <h1>QRcode</h1>
-        //     <h3>{secret}</h3>
-        //     <div ref={ref} />
-        //     <input type="text" className="qr" placeholder="Type The Code"/>
-        //     {}
+		//     <h1>QRcode</h1>
+		//     <h3>{secret}</h3>
+		//     <div ref={ref} />
+		//     <input type="text" className="qr" placeholder="Type The Code"/>
+		//     {}
 
 		// </motion.div>
 
 		<motion.div
-		className="page"
-		initial={{ opacity: -1 }}
-		animate={{ opacity: 1 }}
-		exit={{ opacity: -1 }}
-	  >
-		{!activated && (
-		  <>
-			<h1>Enter The Secret</h1>
-			<h3>{secret}</h3>
-			<h1>Or Scan The QRCode</h1>
-			<div ref={ref} />
-			{/* <div>{ref}</div> */}
-		  </>
-		)}
+			className="page"
+			initial={{ opacity: -1 }}
+			animate={{ opacity: 1 }}
+			exit={{ opacity: -1 }}
+		>
+			{!activated && (
+				<>
+					<h1>Enter The Secret</h1>
+					<h3>{secret}</h3>
+					<h1>Or Scan The QRCode</h1>
+					<div ref={ref} />
+					{/* <div>{ref}</div> */}
+				</>
+			)}
 
-<>
-      {!activated && localStorage.getItem('token') ? (
-        <>
-          <h1>Double Auth Validation</h1>
-          <input
-            onKeyDown={handleKeyPress}
-            type="text"
-            className="qr"
-            placeholder="6 Digits Code"
-            value={code}
-            onChange={(e) => setCode(e.target.value)}
-          />
-        </>
-      ) : (
-        <button onClick={handleDesactivate}>Desactivate 2FA</button>
-      )}
-    </>
+			<>
+				{!activated && localStorage.getItem('token') ? (
+					<>
+						<h1>Double Auth Validation</h1>
+						<input
+							onKeyDown={handleKeyPress}
+							type="number"
+							className="qr"
+							placeholder="6 Digits Code"
+							value={code}
+							onChange={(e) => setCode(e.target.value)}
+						/>
+					</>
+				) : (
+					<button onClick={handleDesactivate}>Desactivate 2FA</button>
+				)}
+				<AnimatePresence initial={false} onExitComplete={() => null}>
+					{
+						errCode ? (
+							<RedAlert handleClose={closeErr} text="Error: Incorrect Code" />
+						) : ("")
+					}
+				</AnimatePresence>
+			</>
 
-		{/* {!localStorage.getItem('token') && (
+			{/* {!localStorage.getItem('token') && (
 		<>
 		  <h1>Double Auth</h1>
 		  <input onKeyDown={handleKeyPress}
-		  		type="text" 
-				className="qr" 
+		  		type="text"
+				className="qr"
 				placeholder="6 Digits Code"
 				onChange={(e) => setCode(e.target.value)}
 		  />
 		</>
 		) : (<button onClick={ handleDesactivate }>Desactivate 2FA</button>)}
 		 */}
-		{/* {!activated && (
+			{/* {!activated && (
 		  <button onClick={() => setActivated(true)}>Activate</button>
 		)} */}
-	  </motion.div>
-    )
+		</motion.div>
+	)
 }
 
-export default QrCode
+export default QrCode

containers/react/src/pages/canvas.tsx

@@ -61,7 +61,7 @@ function DrawCanvas(option: number, gameParam: GameProps) {
 	if(!ctx)
 		return ;
 	
-	const socket = io('http://localhost:4000', { transports: ['polling'] });
+	const socket = io('http://' + process.env.REACT_APP_SOCKET_URL + ':4000', { transports: ['polling'] });
 	// useEffect(() => {
 		// 	console.log("useeffect?????????????????")
 	// 	return () => {
@@ -170,7 +170,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,6 +192,16 @@ 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.0001;
+	  }
+	  else
+	  {
+		console.log("myId= false")
+	  	vX = -0.0001;
+	  }
 	} catch (error) {
 	  console.log(error);
 	  // Handle error here
@@ -198,7 +210,11 @@ socket.on('pong:gameId', async (data) => {
   });
 
 socket.on('pong:name', (data) => {
-	opName = data;
+	opName = data.name;
+	// if (data.myId === myId)
+	// 	vX = 0.0001;
+	// else
+	// 	vX = -0.0001;
 	console.log(`opponent Name= ${opName}`)
 });
 
@@ -222,7 +238,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
@@ -251,12 +266,27 @@ socket.on('pong:point', (data) => {
 		// console.log("up point");
 	myScore = data.point;
 	// }
-	vX = 0;
+	vX = -0.0001;
 	vY = 0;
 	ballX = canvas.width / 2;
 	ballY = canvas.height / 2;
 });
 
+socket.on('pong:hisPoint', (data) => {
+	// hisScore += 1;
+	console.log("myPointawdawdawdawd point");
+	// if (vX != 0)
+	// {
+		// console.log("up point");
+	hisScore = data.point;
+	// }
+	vX = -0.0001;
+	vY = 0;
+	ballX = canvas.width / 2;
+	ballY = canvas.height / 2;
+	// send_forced_info();
+});
+
 //========================================================================================================
 //========================================================================================================
 //                                       Socket EMIT			                                  
@@ -323,6 +353,26 @@ socket.on('pong:point', (data) => {
 			point: hisScore,
 		}
 		socket.emit('pong:point', info);
+		vX = 0.0001;
+	}
+
+	function send_my_point()
+	{
+		if (!gameId || !canvas)
+			return ;
+		// console.log("send point");
+		const info = {
+			id: myId,
+			gameId: gameId,
+			point: myScore,
+		}
+		socket.emit('pong:myPoint', info);
+		myScore++;
+		vX = 0.0001;
+		vY = 0;
+		ballX = canvas.width / 2;
+		ballY = canvas.height / 2;
+		send_forced_info();
 	}
 
 	function send_paddle_info()
@@ -458,8 +508,11 @@ socket.on('pong:point', (data) => {
 async function draw(timestamp: number)
 {
 	console.log("turning, running= ", running);
-	if (!running)	
+	if (!running)
+	{
+		window.location.replace("http://" + process.env.REACT_APP_BASE_URL + "/pong")
 		return ;
+	}
 	if (!gameId || !canvas )
 	{
 		// console.log("nogameid score= ", myScore);
@@ -593,16 +646,17 @@ async function draw(timestamp: number)
 			}
 			ballX = canvas.width / 2;
 			ballY = canvas.height / 2;
-			vX = 0;
+			vX = 0.0001;
 			vY = 0;
 			hisScore += 1;
 			send_point();
 			// send_forced_info();
 		}
-		if (ballX > canvas.width)
+		if (ballX > (canvas.width * 1.2) && ballX - vX > canvas.width)
 		{
+			console.log("ball out win point pls")
+			send_my_point();
 			// if (ballX > canvas.width * 2)
-				// socket.emit
 			// console.log("win point")
 			// if (ballY <= paddleY + paddleHeight + ballRadius && ballY >= paddleY - ballRadius)
 			// {
@@ -702,9 +756,8 @@ async function draw(timestamp: number)
 					vX -= 0.0001;
 			}
 			send_forced_info();
-			// console.log(`vx = ${vX}`);
 		}
-		else if (event.code === "KeyR")
+		else if (event.code === "KeyW")
 		{
 			if (!superpowerModifier)
 				return ;
@@ -717,6 +770,13 @@ async function draw(timestamp: number)
 				paddleY = canvas.height / 2 - paddleHeight / 2;
 				console.log('Cinq secondes se sont écoulées.');
 			  }, 5000);
+
+			//   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);
 		}
 	});
 

containers/react/src/script/tokenSuccess.tsx

@@ -3,12 +3,15 @@ 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) {
@@ -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,9 +5,13 @@
   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%;

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/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; */
 }
@@ -131,16 +133,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;
@@ -202,6 +205,7 @@ p {
 	text-decoration: none;
 	font-weight:lighter;
 	margin: 1%;
+	height: 25px;
 }
 
 .darkSubmit{
@@ -229,8 +233,8 @@ p {
 	background-color: rgba(0, 0, 0, 0.3);
 	border-radius: 4px;
 	width: 11rem;
-	height: 1.5rem;
-	margin-top: 1rem;
+	height: 2rem;
+	margin-top: 1.3rem;
 }
 
 .greenAlert{
@@ -307,11 +311,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 +334,7 @@ p {
 .checkbox{
 	display:flex;
 	flex-direction:row;
+	margin-left: 60px;
 }
 
 input.in{
@@ -331,17 +342,25 @@ 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{
@@ -351,3 +370,25 @@ input.in_howLong{
 	width: 20%;
 }
 
+.case{
+	height: auto;
+	width: auto;
+	margin-left: 10px; 
+}
+
+.catchat{
+	font-size: 30px;
+	margin-left: 12px;
+}
+
+.block{
+	font-size: 23px;
+	margin-left: 12px;
+	margin-top: 0.2rem;
+}
+
+.inline{
+
+	font-size: 25px;
+	margin-left: 12px;
+}

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; */
@@ -94,4 +106,4 @@
 	  height: 100%;
 	  width: 100%;
 	} */
-  /* } */
+  /* } */

docker-compose.yml

@@ -14,19 +14,9 @@ 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:
     image: node:latest
     container_name: react_app