merge

.env

@@ -29,7 +29,7 @@ MODE=DEV
 #port
 API_PORT=3000
 # REACT_PORT=3000 (current = 8080)
-NGINX_PORT=80
+NGINX_PORT=8080
 PONG_PORT=4000
 CHAT_PORT=4001
 POSTGRES_PORT=5432

conf/.nfs000000000358102100000482

@@ -0,0 +1,23 @@
+server {
+    # listen 443 ssl;
+    # listen 80 ssl;
+    # listen 443 ssl;
+    # listen ${NGINX_PORT};
+	listen 8080;
+
+    location /{
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_pass http://react_app:8081;
+    }
+
+    location /api {
+        proxy_set_header Host $host;
+        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://api:3000/api;
+    }
+}

conf/nginx.conf

@@ -20,4 +20,18 @@ server {
         proxy_set_header X-Forwarded-Proto $scheme;
         proxy_pass http://api:3000/api;
     }
+
+    location /socket.io {
+        # Forward requests to socket server running on port 4001
+        if ($request_uri ~ ^/socket/4001) {
+          proxy_pass http://chat:4001;
+          break;
+        }
+
+        # Forward requests to socket server running on port 4000
+        if ($request_uri ~ ^/socket/4000) {
+          proxy_pass http://pong:4000;
+          break;
+        }
+    }
 }

containers/api/src/app.controller.ts

@@ -6,7 +6,7 @@
 /*   By: apommier <apommier@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/23 19:15:56 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -588,7 +588,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 +598,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/23 19:37:41 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)
+	console.log("bool= ", bool);
-		conv.private = false;
+	conv.private = bool;
-	else
+	// if (conv.private === true)
-		conv.private = true;
+	// 	conv.private = false;
+	// else
+	// 	conv.private = true;
 	this.save(conv);
 }
 

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

@@ -6,7 +6,7 @@
 /*   By: sadjigui <sadjigui@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/04/09 14:53:49 by apommier          #+#    #+#             */
-/*   Updated: 2023/06/22 21:19:44 by sadjigui         ###   ########.fr       */
+/*   Updated: 2023/06/24 15:09:20 by sadjigui         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 

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/17 01:31:29 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/23 15:18:19 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 

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/21 00:59:39 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/23 15:19:12 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -50,14 +50,7 @@ export class PongGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
 
 	handleDisconnect(client: Socket)
 	{
-		// console.log(`Client disconnected: ${client.id}`);
 		console.log(`Normal disconnected: ${client.id}`);
-		// this.waitingClients.delete(client);
-		// this.waitingClients.forEach((waitingClient) => {
-		// 	if (waitingClient.client === client) {
-		// 	  this.waitingClients.delete(waitingClient);
-		// 	}})
-		// delete this.clients[client.id];
 
 		this.waitingClients.forEach((item) => {
 			if (item.client === client)

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

@@ -43,15 +43,6 @@ function Ranking(){
             <div className='scroll'>
                 {ranking.map((user, index) => (
 					<Rank user={user} index={index} key={user.username}/>
-					// return (
-						// <div className='rank_elements'>
-                        //         <div>
-						// 			<p>{index + 1}</p>
-                        //             <h4>{user.rank}: {user.nickname} <img className="profilePic" src={defaultpic}/></h4>
-                        //         </div>
-                        //         <h4 className='content'>{user.opponent}</h4>
-                        // </div>
-                        // )
                     ))}
             </div>
 			)}

containers/react/src/components/Header.tsx

@@ -40,10 +40,6 @@ function Header() {
 			fetchProfilePicture();
 	  }, []);
 
-	// console.log(`profile pic= ${profilePicture}`)
-
-	// photo.toString('base64')
-
   return (
 	<div className='Header'>
 		<motion.div

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

@@ -120,7 +120,8 @@ 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://localhost: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 ?)
 					setIncomingMessage(data);
@@ -287,7 +288,7 @@ function Chats(){
 	const [newConversationModalOpen, setNewConversationModalOpen] = useState(false);
 
     const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: ''}]);
-	const [users, setUsers] = useState([]);
+	const [users, setUsers] = useState<User[]>([]);
 
   
 	const openNewGameModal = () => {
@@ -369,7 +370,7 @@ function Chats(){
 		setShowBlockAlert(false);
 	  };
 
-	  const handleOptionChange = (selectId, selectedOption) => {
+	  const handleOptionChange = (selectId: number, selectedOption: string) => {
 		console.log("selected Option=", selectedOption)
         setSelectTag((prevTags) => 
             prevTags.map((tag) =>
@@ -454,7 +455,7 @@ function Chats(){
 				      <option value="">{
 					selectTag.selectedOption ? selectTag.selectedOption : "Select an option"
 					}</option>
-				      {users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.name)).map((item, index) => (
+				      {users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.username)).map((item, index) => (
 				        <option key={index} value={item.username}>
 				          {item.username}
 				        </option>

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

@@ -6,7 +6,7 @@
 /*   By: sadjigui <sadjigui@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/06/01 18:24:46 by apommier          #+#    #+#             */
-/*   Updated: 2023/06/23 21:14:59 by sadjigui         ###   ########.fr       */
+/*   Updated: 2023/06/24 15:10:21 by sadjigui         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -42,7 +42,6 @@ function MessageMe({message, own}: MessageMeProps){
 	const [user, setUser] = useState<User>();
 	const scrollRef = useRef<HTMLDivElement>(null);
 
-	// console.log("Message eher")
 
 	useEffect(() => {
 		if (scrollRef.current)
@@ -83,20 +82,13 @@ function MessageMe({message, own}: MessageMeProps){
 	};
 
 	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))
 	if (user.blocked && user.blocked.includes(message.sender))
 		return (<></>);
-	// else if (conv.banned && conv.banned.includes(user.username))
+	else if (conv.banned && conv.banned.includes(user.username))
-	// {
+		return (<></>);
-		// console.log("return2")	
-		// return (<></>);
-	// }
-		// console.log("noy return")
 	// if (user.blocked.includes(message.sender))/
 
 	return (

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

@@ -21,7 +21,6 @@ const dropIn = {
             }},
     exit:{y: "100vh",
             opacity: 0,},
-
 };
 
 const Modal = ({handleClose}) => {
@@ -100,11 +99,11 @@ const Modal = ({handleClose}) => {
     // let new_name;
 
     return (
-        <Backdrop onClick={handleClose}>
+        <Backdrop>
             <motion.div
                 onClick={(e) => e.stopPropagation()}
-                className="modal"
+                className="modalSetting"
-                // variant={dropIn}
+                variant={dropIn}
                 initial="hidden"
                 animate="visible"
                 exit="exit"

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; }; }) => {
+	// const handleCheckPriv = (e: { target: { checked: any; }; }) => {
-		// setPassword(e.target.checked);
+	// 	// setPassword(e.target.checked);
-		if (e.target.checked)
+	// 	if (e.target.checked)
-		{
+	// 	{
-			console.log("chack true", e.target.checked)
+	// 		console.log("chack true", e.target.checked)
-			try{
+	// 		try{
-				api.post("/private", {convId: convId})
+	// 			api.post("/private", {convId: convId})
-			} catch(err) {
+	// 		} catch(err) {
-				console.log(err);
+	// 			console.log(err);
-			}
+	// 		}
-		}
+	// 	}
-		else
+	// 	else
-		{
+	// 	{
-			console.log("chack false", e.target.checked)
+	// 		console.log("chack false", e.target.checked)
-			try{
+	// 		try{
-				api.post("/private", {convId: convId})
+	// 			api.post("/private", {convId: convId})
-			} catch(err) {
+	// 		} catch(err) {
-				console.log(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 () => {
+	const handleMute = async (e: { key: string; }) => {
-		if (!selectedUser.length)
+		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/Sidebar/Modal.tsx

@@ -20,26 +20,6 @@ const dropIn = {
 	},
 }
 
-
-// function showBar (){
-// 	return (
-// 		 {SidebarData.map((item, index) => {	
-// 					 return (	
-// 					<motion.div
-// 					className="nav-menu"
-// 					// whileHover={{scale: 1.1}}
-// 					>
-// 				 <li key={index} className={item.cName}>	
-// 					 <Link to={item.path}>	
-// 						 {item.icon}	
-// 						 <span>{item.title}</span>	
-// 					 </Link>	
-// 				 </li>	
-// 			</motion.div>
-// 			 )
-// 		 })}	
-// 	)
-// }
 interface CloseProps {
 	handleclose: Function;
   }

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/Field.tsx

@@ -62,64 +62,11 @@ function Field()
 		};
 	}, []);
 
-	// const [buttonClicked, setButtonClicked] = useState(false);
-
-	// const handleButtonClick = () => {
-	// 	drawCanvas();
-	//   setButtonClicked(true);
-	// };
-
 	return (
 		<div className="field" id="canvas_container">
 			<canvas id="myCanvas"></canvas>
-			{/* <button onClick={handleButtonClick}>Draw on Canvas</button> */}
-			{/* {buttonClicked && <canvas id="myCanvas"></canvas>}
-			{!buttonClicked && <button onClick={handleButtonClick}>Draw on Canvas</button>} */}
 		</div>
 	);
 }
 
 export default Field;
-// export default withRouter(Field);
-
-
-// function Field() {
-// 	const [buttonClicked, setButtonClicked] = useState(false);
-  
-// 	const handleButtonClick = () => {
-// 	  const canvas = document.createElement('canvas');
-// 	  canvas.id = 'myCanvas';
-// 	  console.log("button clicked")
-// 	  document.getElementById('canvas_container').appendChild(canvas);
-// 	  setButtonClicked(true);
-// 	  drawCanvas(canvas);
-// 	};
-// 	setButtonClicked(true);
-// 	return (
-// 	//   <div className="field" id="canvas_container">
-// 	<div className={`notClicked ${buttonClicked ? 'clicked' : ''}`} id="canvas_container">
-// 		{!buttonClicked && <button className="playButton" onClick={handleButtonClick}>Play</button>}
-// 	  </div>
-// 	);
-//   }
-  
-//   export default Field;
-
-// function draw() {
-// 	// Effacer le canvas
-// 	ctx.clearRect(0, 0, canvas.width, canvas.height);
-  
-// 	// Dessiner la raquette
-// 	ctx.fillRect(canvas.width - paddleWidth, paddleY, paddleWidth, paddleHeight);
-  
-// 	// Appeler la fonction draw à chaque frame
-// 	requestAnimationFrame(draw);
-// }
-  
-//   draw(); // Appeler la fonction draw pour la première fois
-
-// const canvas = document.getElementById('myCanvas');
-// canvas.width = 500;
-// canvas.height = 500;
-// const ctx = canvas.getContext('2d');
-// ctx.fillRect(50, 50, 1000, 1000);

containers/react/src/pages/Home.tsx

@@ -6,7 +6,11 @@
 /*   By: sadjigui <sadjigui@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/06/09 08:19:04 by apommier          #+#    #+#             */
+<<<<<<< HEAD
 /*   Updated: 2023/06/24 14:31:22 by sadjigui         ###   ########.fr       */
+=======
+/*   Updated: 2023/06/23 17:33:51 by apommier         ###   ########.fr       */
+>>>>>>> origin/ereali
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -62,24 +66,6 @@ function Profile () {
 
 	const [profilePicture, setProfilePicture] = useState('');
 
-	// const handleFileChange = (event: { target: { files: React.SetStateAction<null>[]; }; }) => {
-	// //   const file = event.target.files[0];
-	//   setSelectedPhoto(event.target.files[0]);
-	// //   try{
-	// // 	api.post("/picture", {picture: URL.createObjectURL(file)})
-	// // 	}
-	// //   catch(err){
-	// // 	console.log(err);
-	// //     }
-	// };
-
-	// const handleFileChange = (event: { target: { files: React.SetStateAction<null>[] | FileList; }; }) => {
-		// const files = event.target.files;
-	// 	if (event.target.files && event.target.files.length > 0) {
-	// 		setSelectedPhoto(event.target.files[0]);
-	// 	}
-	//   };
-
 	const handleFileChange = async (event: { target: { files: any; }; }) => {
 		// const files = event.target.files;
 		// if (files && files.length > 0) {
@@ -100,43 +86,13 @@ function Profile () {
 		// }
 	  };
 
-	// 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)
 				{
@@ -220,7 +176,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);
@@ -242,7 +198,7 @@ function Home () {
 			}
 		};
 		fetchSuccess();
-	},[])
+	}, []);
 
     return (
 		<motion.div className="page"
@@ -250,14 +206,13 @@ 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 && user.win >= 5 ? (
-				{user.win >= 5 ? (
 					<GiCrownedSkull className="success" onClick={() => setSuccessCrown(true)}/>
 					 ):("")} 
 			</div>

containers/react/src/pages/QrCode.tsx

@@ -148,7 +148,7 @@ function QrCode () {
           <h1>Double Auth Validation</h1>
           <input
             onKeyDown={handleKeyPress}
-            type="text"
+            type="number"
             className="qr"
             placeholder="6 Digits Code"
             value={code}

containers/react/src/pages/canvas.tsx

@@ -61,7 +61,7 @@ function DrawCanvas(option: number, gameParam: GameProps) {
 	if(!ctx)
 		return ;
 	
-	const socket = io('http://' + process.env.REACT_APP_BASE_URL + ':4000', { transports: ['polling'] });
+	const socket = io('http://localhost:4000', { transports: ['polling'] });
 	// useEffect(() => {
 		// 	console.log("useeffect?????????????????")
 	// 	return () => {
@@ -576,11 +576,6 @@ async function draw(timestamp: number)
 				ballY = ballRadius + 2
 			// send_info();
 		}
-		// else if (ballX + ballRadius + 2 >= canvas.width) //touch right wall
-		// {
-		// 	vX = -vX;
-		// 	// send_info();
-		// }
 	}
 
 	function is_out()
@@ -635,19 +630,6 @@ async function draw(timestamp: number)
 //========================================================================================================
 //========================================================================================================
 
-// interface sizeProps {
-// 	clientWidth: number,
-// 	clientHeight: number
-// }
-
-	// document.addEventListener('resize', event => {
-	// 	// event.height
-	// 	// event.width
-	// 	const { clientWidth, clientHeight } = canvas.parentElement;
-	// 	// const { clientWidth, clientHeight } = canvas.parentElement!;
-	// 	console.log(`resize detected widht= ${clientWidth} height= ${clientHeight}`)
-	// });
-
     document.addEventListener('mousemove', event => {
         const mouseY = event.clientY;
 

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

@@ -19,7 +19,7 @@
 	/* background-color: #5843e4; */
 	/* border-color: white; */
 	overflow: scroll;
-	height: 70vh;
+	height: 68vh;
 }
 
 .profilePic{

containers/react/src/styles/Messages.css

@@ -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;

containers/react/src/styles/Profile.css

@@ -81,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{
@@ -101,7 +101,7 @@
 	color: white;
 	background-color:  #5843e4;
 	border-radius: 20px;
-	padding: 20px 500px;
+	padding: 1.3% 30%;
 	font-size: 1.7rem;
 	text-decoration: none;
 	font-weight: bold;

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
@@ -34,7 +24,11 @@ services:
     # depends_on:
     #   - nginx
     ports:
+<<<<<<< HEAD
       - 8081:8081
+=======
+      - 8001:8001
+>>>>>>> origin/ereali
     volumes:
     - ./containers/react:/app
       # - ./containers/react:/app