Kinou/ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/reborn' into apommier

Browse Source
This commit is contained in:
Alexandre POMMIER 2023-06-28 17:05:32 +02:00
commit 49f3626948
14 changed files with 31 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.vscode/settings.json vendored Normal file
View File

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

1
containers/react/src/components/Alert/RedAlert.tsx
View File

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

1
containers/react/src/components/Alert/YellowAlert.tsx
View File

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

3
containers/react/src/components/Game/PlayButton.tsx
View File

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

7
containers/react/src/components/Game/Rank.tsx
View File

@ -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>
)
}

7
containers/react/src/components/Game/Ranking.tsx
View File

@ -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}/>

19
containers/react/src/components/Messages/Chats.tsx
View File

@ -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 [isAdmin, setIsAdmin] = useState<boolean>(false); // false is good?
const [currentChat, setCurrentChat] = useState<Conv>();
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>

44
containers/react/src/components/Messages/GameModal.tsx
View File

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

30
containers/react/src/components/Messages/Message.tsx
View File

@ -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>
): ""}

1
containers/react/src/components/Messages/MessageMe.tsx
View File

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

15
containers/react/src/components/Messages/Modal.tsx
View File

@ -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]);
@ -94,7 +85,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
@ -105,14 +95,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) {
@ -123,7 +109,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,
}

13
containers/react/src/components/Messages/ModalSetting.tsx
View File

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

18
containers/react/src/components/Messages/PartyInvite.tsx
View File

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

24
containers/react/src/pages/index.tsx Normal file
View File

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