Merge branch 'reborn' of github.com:kinou-p/ft_transcendence into reborn

.vscode/settings.json

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

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

@@ -29,7 +29,6 @@ function RedAlert ({handleClose, text}: AlertProps) {
         <motion.div
                 onClick={(e) => e.stopPropagation()}
                 className="redAlert"
-                // variant={dropIn}
                 initial="hidden"
                 animate="visible"
                 exit="exit"

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

@@ -31,7 +31,6 @@ function YellowAlert({ handleClose, text, icon }: AlertProps) {
             <motion.div
                 onClick={(e) => e.stopPropagation()}
                 className="yellowAlert"
-                // variant={dropIn}
                 initial="hidden"
                 animate="visible"
                 exit="exit"

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

@@ -19,14 +19,13 @@ function PlayButton() {
 		}
 
 		path = path.slice(0, -1);
-		console.log(path)
 		history(path);
 	  };
 
 	return (
 		<div className="notClicked" id="canvas_container">
 			<button onClick={handleButtonClick} className="playButton">Play</button>
-			{/* !buttonClicked && <button onClick={handleButtonClick}>Draw on Canvas</button> */}
+			{}
 			<div className='checkbox'>
 				<p><input className="inside_checkbox" type="checkbox" value="superpower"/> Super Power <br/> ( w = wall power ) </p>
 				<p><input className="inside_checkbox" type="checkbox" value="speed"/> Faster and Faster </p>

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

@@ -30,10 +30,7 @@ function Rank({user, index}: RankProps){
 	useEffect(() => {
 		const fetchProfilePicture = async () => {
 			try {
-			//   const user = await api.get("/profile");
 				const pic = await api.post("/getPicture", {username: user.username})
-				// console.log(`user naem profile pic222= ${currentUser.username}`)
-				// console.log(` profile pic222= ${pic.data}`)
 				setProfilePicture(pic.data);
 			} catch (error) {
 				console.error('Error fetching profile picture:', error);
@@ -43,11 +40,9 @@ function Rank({user, index}: RankProps){
 		  fetchProfilePicture();
 	}, [])
 	
-	// console.log(index);
 	return (
 		<div className='rank_elements'>
 			<div >
-				{/* <p>{(index + 1).toString()}</p> */}
 				<p>{(index + 1)}</p> 
 				<h4>{user.rank}: {user.nickname} 
 					{profilePicture ? (
@@ -55,10 +50,8 @@ function Rank({user, index}: RankProps){
 					) : (
 						<img className="profilePic" src={DefaultPicture} alt="Default Profile Picture" />
 					)}
-					{/* <img className="profilePic" src={defaultpic}/> */}
 				</h4>
 			</div>
-			{/* <h4 className='content'>{user.opponent}</h4> */}
 		</div>
 	)
 }

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

@@ -14,13 +14,8 @@ function Ranking(){
 
 		const getRanking = async ()=>{
 			try{
-				// const tmpFriends = await api.get("/friends")
 				const Ranking = await api.get("/ranking")
 				setRanking(Ranking.data);
-				console.log(`ranking= ${Ranking.data}`)
-				// setFriends(tmpFriends.data);
-				// return tmpUser;
-				// console.log(`user= ${tmpUser.data.username}`);
 				setIsLoading(false);
 			}
 			catch(err){
@@ -29,14 +24,12 @@ function Ranking(){
 		};
 		getRanking();
 	}, []);
-	console.log(`ranking after= ${ranking}`);
 
 	return (
 		<div>
 			{isLoading ? (
         		<></>
       		) : (
-				//   <h1 className='title'>Ranking</h1>
             <div className='scroll'>
                 {ranking.map((user, index) => (
 					<Rank user={user} index={index} key={user.username}/>

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

@@ -80,8 +80,8 @@ function Chats(){
 	const [conversations, setConversation] = useState([]);
 	const [partyInvite, setPartyInvite] = useState([]);
 	const [user, setUser] = useState<User>();
-	const [currentChat, setCurrentChat] = useState<Conv>(); // false is good?
+	const [currentChat, setCurrentChat] = useState<Conv>(); 
-	const [isAdmin, setIsAdmin] = useState<boolean>(false); // false is good?
+	const [isAdmin, setIsAdmin] = useState<boolean>(false); 
 	const [messages, setMessage] = useState<MessageProps[]>([]);
 	const [newMessages, setNewMessage] = useState("");
 	const [incomingMessage, setIncomingMessage] = useState<MessageProps>();
@@ -98,8 +98,6 @@ function Chats(){
 				const tmpUser = await api.get("/profile")
 				const tmpUsers = await api.get("/users");
 
-				console.log(convs);
-
 				setPartyInvite(tmpInvite.data);
 				setUser(tmpUser.data);
 				setConversation(convs.data);
@@ -107,19 +105,13 @@ function Chats(){
 
 				socket.current = io('http://' + process.env.REACT_APP_SOCKET_URL + ':4001', { transports: ['polling'] });
 				socket.current.emit('connection', {username: tmpUser.data.username})
-				socket.current.on('message', (data) => { //data should be a message ?)
+				socket.current.on('message', (data) => {
 					setIncomingMessage(data);
 				});
 
 				socket.current.on('ban', (data) => {
 					window.location.reload()
 				});
-
-				// socket.current.on('mute', (data) => {
-				// 	console.log("muted hehe");
-				// 	//set mute var to true and do nothing
-				// });
-
 				setIsLoading(false)
 
 			}
@@ -149,7 +141,6 @@ function Chats(){
 					console.log(err);
 				}
 			}
-			// console.log(`result1 = ${currentChat.id !== incomingMessage.convId}`)
 			if (currentChat && incomingMessage && currentChat.id === incomingMessage.convId)
 				setMessage((prev) => [...prev, incomingMessage]);
 		}
@@ -253,9 +244,7 @@ function Chats(){
 
 	  const handleAddFriend = async () => {
 		try{
-			console.log("friend= ", friend);
 			const res = await api.post("/invite", {username: friend})
-			console.log("res in friend= ", res.data)
 			if(res.data === 1)
 			{
 			  setAddFriend(true);
@@ -302,7 +291,6 @@ function Chats(){
 	  };
 
 	  const handleOptionChange = (selectId: number, selectedOption: string) => {
-		console.log("selected Option=", selectedOption)
 		setFriend(selectedOption);
         setSelectTag((prevTags) =>
             prevTags.map((tag) =>
@@ -431,7 +419,6 @@ function Chats(){
 							<HiChatBubbleLeft className="catchat"/>
 							<div className="infoSideBar">
 								<h2>{c.name}</h2>
-								{/* <SideP>Desc?</SideP> */}
 							</div>
 							</UserChat>
 						</div>

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

@@ -5,7 +5,6 @@ import { useState, useEffect } from "react";
 import api from "../../script/axiosApi.tsx";
 import React from "react";
 import {User} from "../../../interfaces.tsx"
-// import { useNavigate } from "react-router-dom";
 
 const dropIn = {
   hidden: { y: "-100vh", opacity: 0 },
@@ -24,27 +23,18 @@ const dropIn = {
 
 interface ModalGame {
 	handleClose: Function,
-	// convId: string
 }
 
 const GameModal = ({ handleClose }: ModalGame) => {
   const [users, setUsers] = useState([]);
-//   const [user, setUser] = useState();
   const [selectedUser, setSelectedUser] = useState('');
-//   const [convs, setConvs] = useState([]);
   const [channel, setChannel] = useState('');
 
-//   const history = useNavigate();
-
   useEffect(() => {
     const fetchData = async () => {
       try {
         const tmpUsers = await api.get("/users");
-		// const tmpUser = await api.get("/profile");
-        // const tmpConvs = await api.get("/convs");
         setUsers(tmpUsers.data);
-	    // setUser(tmpUser.data);
-        // setConvs(tmpConvs.data);
       } catch (err) {
         console.log(err);
       }
@@ -56,21 +46,8 @@ const GameModal = ({ handleClose }: ModalGame) => {
     setSelectedUser(event.target.value);
   };
 
-//   const joinChannel = async () => {
-//     try {
-//       await api.post("/join", { convId: channel });
-//     } catch (err) {
-//       console.log(err);
-//     }
-//   };
-
-//   const handleCheckButtonClick = () => {
-//     // Perform your check action here
-//     console.log("Checking user:", selectedUser);
-//   };
 
   const handleButtonClick = async () => {
-	// let path = `play?`;
 	let path = `http://` + process.env.REACT_APP_BASE_URL + `/pong/play?`;
 	
 
@@ -86,21 +63,11 @@ const GameModal = ({ handleClose }: ModalGame) => {
 	}
 
 	if (selectedUser.length > 0)
-		path += 'username=' + selectedUser;//important here
+		path += 'username=' + selectedUser;
   
-	// Remove the trailing '&' character
-	// path = path.slice(0, -1);
-	// console.log(path)
-
-	// await api.post("/partyInvite", {username: selectedUser, gameId})
-
-	// console.log("path= ", path)
-	// history(path, { replace: true });
-	// window.location.replace(path);
 	window.history.pushState({}, '', path);
 	window.location.reload();
 
-	// history(path);
   };
 
   return (
@@ -108,7 +75,6 @@ const GameModal = ({ handleClose }: ModalGame) => {
       <motion.div
         onClick={(e) => e.stopPropagation()}
         className="modal"
-        // variant={dropIn}
         initial="hidden"
         animate="visible"
         exit="exit"
@@ -125,20 +91,12 @@ const GameModal = ({ handleClose }: ModalGame) => {
         </div>
 
 		<div className="notClicked" id="canvas_container">
-			{/* <button onClick={handleButtonClick}>Draw on Canvas</button> */}
 			<div className='checkbox'>
 				<p><input type="checkbox" value="superpower"/> Super Power </p>
 				<p><input type="checkbox" value="speed"/> Faster and Faster </p>
 			</div>
 			<button className="playInvite" onClick={handleButtonClick} >Play</button>
-          	{/* <button className="submit" onClick={handleClose}>Cancel</button> */}
 		</div>
-
-        {/* <div className="div_submit">
-          <button className="submit" onClick={handleCheckButtonClick}>
-            Invite to play
-          </button>
-        </div> */}
       </motion.div>
     </Backdrop>
   );

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

@@ -14,8 +14,6 @@ import { useEffect, useState, useRef } from "react";
 import api from '../../script/axiosApi.tsx';
 import styled from "styled-components"
 import DefaultPicture from '../../assets/profile.jpg'
-// import { useRef } from "react";
-// import { useEffect } from "react";
 import '../../styles/Messages.css'
 import {User, Conv, Message} from "../../../interfaces.tsx"
 import React from "react";
@@ -51,15 +49,10 @@ function MessageMe({message, own}: MessageMeProps){
 	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})
-				// const tmpSender = await api.post("/user", {username: message.sender})
 				const tmpUser = await api.get("/profile")
 				const pic = await api.post("/getPicture", {username: message.sender})
-				// console.log(`user naem profile pic222= ${currentUser.username}`)
-				// console.log(` profile pic222= ${pic.data}`)
 				setConv(tmpConv.data);
 				setUser(tmpUser.data);
 				setSender(tmpSender.data);
@@ -75,32 +68,13 @@ function MessageMe({message, own}: MessageMeProps){
 		if (!sender)
 			return ;
 		let path = `http://` + process.env.REACT_APP_BASE_URL + `/profile/${sender.username}`;
-		// console.log("path= ", path)
-		// history(path, { replace: true });
-		// window.location.replace(path);
 		window.history.pushState({}, '', path);
 		window.location.reload();
 	};
 
-	// const isAllowed = async () => {
-	// 	const ret = await api.post("/allowed", {convId: message.convId});
-	// 	return ret.data;
-	// }
 
 	if (!user || !sender || !conv)
 		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 (<></>);
@@ -108,11 +82,8 @@ function MessageMe({message, own}: MessageMeProps){
 		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>
@@ -122,7 +93,6 @@ function MessageMe({message, own}: MessageMeProps){
 					<img className="messageInfo" onClick={() => handleButtonClick()} src={DefaultPicture} alt="Default Profile Picture" />
 				)}
 			</div>
-			{/* <div className="usernameMesage">{message.senderNickname}</div>	 */}
 			{sender ? (
 			<div className="usernameMesage">{sender.nickname}</div>
 			): ""}

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

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

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

@@ -1,6 +1,5 @@
 import { motion } from "framer-motion";
 import Backdrop from "../Sidebar/Backdrop.tsx";
-// import { Rank } from "../../DataBase/DataRank"
 import '../../styles/Messages.css'
 import { useState, useEffect } from "react";
 import { GrAdd } from "react-icons/gr";
@@ -43,8 +42,6 @@ const Modal = ({handleClose}: ModalProps) => {
 				const tmpUsers = await api.get("/users");
 				const tmpUser = await api.get("/profile");
 				const tmpConvs = await api.get("/convs");
-				console.log("users=", tmpUsers.data);
-				console.log("convs=", tmpConvs.data);
 				setUsers(tmpUsers.data);
 				setUser(tmpUser.data);
 				setConvs(tmpConvs.data);
@@ -60,8 +57,6 @@ const Modal = ({handleClose}: ModalProps) => {
 	useEffect(()=> {
 
 		const getConv = async ()=>{
-			console.log("chan changed")
-			console.log("chan = ", channel);
 			try{
 
 				const tmpConv = await api.post("/convId", {convId: channel});
@@ -71,10 +66,6 @@ const Modal = ({handleClose}: ModalProps) => {
 			catch(err){
 				console.log(err);
 			}
-			// if (channel.password)
-			// 	console.log("password true")
-			// else 
-			// 	console.log("password false")
 		}
 		getConv();
 	}, [channel]);
@@ -84,10 +75,6 @@ const Modal = ({handleClose}: ModalProps) => {
 			return;
 		try {
 			const ret = await api.post("/verifyPassword", {convId: channel, password: PassWord})
-			if (ret)
-				console.log("ici ret password", ret);
-
-				// window.location.reload();
 		} catch (err) {
 			console.log(err);
 		}
@@ -95,7 +82,6 @@ const Modal = ({handleClose}: ModalProps) => {
 	}
 
     const handleOptionChange = (selectId: number, selectedOption: string) => {
-		console.log("selected Option=", selectedOption)
         setSelectTag((prevTags) =>
             prevTags.map((tag) =>
                 tag.id === selectId ? { ...tag, selectedOption } : tag
@@ -106,14 +92,10 @@ const Modal = ({handleClose}: ModalProps) => {
     const addNewSelectedTag = () => {
         const newSelectedId = Math.max (...selectTags.map((tag) => tag.id)) + 1;
         setSelectTag([...selectTags, { id: newSelectedId, selectedOption: ''}]);
-		console.log(selectTags)
     };
 
 	const joinChannel = async () => {
 		try {
-			console.log("channel= ", channel)
-			console.log("ici test channel= ", channel)
-
 			await api.post("/join", {convId: channel})
 			window.location.reload();
 		} catch(err) {
@@ -124,7 +106,6 @@ const Modal = ({handleClose}: ModalProps) => {
     const saveSelectedOptions = async () => {
 		const selectedOptions = selectTags.map((tag) => tag.selectedOption).filter((option) => option !== '');
 
-		console.log("selected= ", selectedOptions);
 		const data = {
 			members: selectedOptions,
 		}

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

@@ -34,14 +34,12 @@ const ModalSetting = ({ handleClose, convId, socket }: ModalSettingProps) => {
 
 	useEffect(() => {
 
-		console.log("convid =", convId)
 		const getUsers = async () => {
 			try {
 				const currentConv = await api.post("/convId", { convId: convId });
 				if (currentConv.data.private)
 					setPrivateConv(true);
 				const tmpUsers = await api.get("/users");
-				console.log("users=", tmpUsers.data);
 				setUsers(tmpUsers.data);
 				setLoading(false);
 			} catch (err) {
@@ -53,9 +51,7 @@ const ModalSetting = ({ handleClose, convId, socket }: ModalSettingProps) => {
 
 	useEffect(() => {
 		const handleVariableChange = () => {
-			console.log('Variable changed:', privateConv);
 			if (privateConv === undefined) {
-				console.log("return")
 				return;
 			}
 			try {
@@ -72,8 +68,6 @@ const ModalSetting = ({ handleClose, convId, socket }: ModalSettingProps) => {
 	}, [privateConv]);
 
 	const handleOptionChange = (selectId: number, selectedOption: string) => {
-		console.log("tag= ", selectTags)
-		console.log("option= ", selectedOption)
 		setSelectTag((prevTags) =>
 			prevTags.map((tag) =>
 				tag.id === selectId ? { ...tag, selectedOption } : tag
@@ -84,7 +78,6 @@ 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);
 	}
 
 	const handleName = async (e: { key: string; }) => {
@@ -118,14 +111,11 @@ const ModalSetting = ({ handleClose, convId, socket }: ModalSettingProps) => {
 			if (!selectedUser.length)
 				return;
 			const res = await api.post("/ban", { convId: convId, username: selectedUser })
-			console.log("res of ban", res.data)
 
 			if (res.data === 2) {
-				console.log("hehe true");
 				setUnban(true);
 			}
 			if (socket) {
-				console.log("emit to ban server")
 				socket.emit("ban", { username: selectedUser })
 			}
 		} catch (err) {
@@ -149,10 +139,8 @@ const ModalSetting = ({ handleClose, convId, socket }: ModalSettingProps) => {
 	const closeMuteAlert = () => setMuteAlert(false);
 
 	const handleMute = async (e: { key: string; }) => {
-		console.log(`e in press= ${e.key}`)
 		if (e.key != "Enter")
 			return;
-		console.log("value mute = ", time);
 		try {
 			const ret = await api.post("/mute", { convId: convId, username: selectedUser, time: time })
 			if (ret.data)
@@ -165,7 +153,6 @@ const ModalSetting = ({ handleClose, convId, socket }: ModalSettingProps) => {
 
 	const handleInvite = async () => {
 		try {
-			console.log("post invite bitch");
 			await api.post("/inviteConv", { convId: convId, username: selectedUser });
 		} catch (err) {
 			console.log(err);

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

@@ -53,19 +53,13 @@ export default function  PartyInvite({currentInvite}: UserProps)
 	const [profilePicture, setProfilePicture] = useState('');
 	const [request, setRequest] = useState<User>(); //user who invite
 	const [clickEvent, setClickEvent] = useState(false);
-	// const [user, setUser] = useState(null);
 	
 	useEffect(() => {
 		const fetchProfilePicture = async () => {
 			try {
-			//   const user = await api.get("/profile");\
-				// const tmpUser = await api.get("/profile")
 				const pic = await api.post("/getPicture", {username: currentInvite.username})
 				const tmpRequest = await api.post("/user", {username: currentInvite.username})
-				// setUser(tmpUser.data);
 				setRequest(tmpRequest.data);
-				// console.log(`user naem profile pic222= ${currentInvite.username}`)
-				// console.log(` profile pic222= ${pic.data}`)
 				setProfilePicture(pic.data);
 			} catch (error) {
 				console.error('Error fetching profile picture:', error);
@@ -77,45 +71,33 @@ export default function  PartyInvite({currentInvite}: UserProps)
 
 	const handleButtonClick = (user: InviteProps) => {
 		let path = `http://` + process.env.REACT_APP_BASE_URL + `/profile/${user.username}`; 
-		// history(path, { replace: true });
-		// window.location.replace(path);
 		window.history.pushState({}, '', path);
 		window.location.reload();
 	};
 	
 	const Accept = async (request: User) => {
 		try{
-			//call canvas ??
-			// await api.post("/friend", {username: request.username})
 			await api.post("/deleteInvite", {username: request.username})
 			let path = `http://` + process.env.REACT_APP_BASE_URL + `/pong/play?` 
 			path += 'username=' + request.username;
 			path += '&gameId=' + currentInvite.gameId;
-			// setClickEvent(true);
 			window.history.pushState({}, '', path);
 			window.location.reload();
 		} catch(err) {
 			console.log(err);
 		}
-		console.log("accept")
-		console.log(`request = ${request}`)
 	}
 
 	const Refuse = async (request: User) => {
 		try{
 			await api.post("/deleteInvite", {username: request.username})
-			// await api.post("/refuseInvite", {username: request.username})
 			setClickEvent(true);
 		} catch(err) {
 			console.log(err);
 		}
-		console.log("refuse")
-		console.log(`request = ${request}`)
 	}
 
-  // Vérifier si le contenu doit être caché
   	if (clickEvent) {
-		console.log("retrun true")
     	return null; // Rendre null pour ne pas afficher le contenu
   	}
 

containers/react/src/pages/index.tsx

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