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

fix bug pong decconection and win/loss fix history fix mute ? ban

Browse Source
This commit is contained in:
kinou-p 2023-06-21 02:11:11 +02:00
parent b53151ac5f
commit 90c3e3e0b7
14 changed files with 230 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.env
View File

@ -14,9 +14,9 @@
NGINX_ENVSUBST_TEMPLATE_SUFFIX=".conf" NGINX_ENVSUBST_TEMPLATE_SUFFIX=".conf"
# BASE_URL=http://localhost # BASE_URL=http://localhost
BASE_URL=localhost BASE_URL=92.143.191.152
REACT_APP_BASE_URL=localhost REACT_APP_BASE_URL=92.143.191.152
REDIRECT_URI=http://localhost/api/auth/login REDIRECT_URI=http://92.143.191.152/api/auth/login
#postgres var #postgres var
# POSTGRES_HOST=127.0.0.1 # POSTGRES_HOST=127.0.0.1
# DB_TYPE=postgres # DB_TYPE=postgres

24
containers/api/src/app.controller.ts
View File

@ -6,7 +6,7 @@
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */ /* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2023/06/17 01:00:00 by apommier #+# #+# */ /* Created: 2023/06/17 01:00:00 by apommier #+# #+# */
/* Updated: 2023/06/19 19:48:52 by apommier ### ########.fr */ /* Updated: 2023/06/21 01:19:01 by apommier ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -220,7 +220,10 @@ export class AppController {
@UseGuards(JwtAuthGuard) @UseGuards(JwtAuthGuard)
@Post('/win') @Post('/win')
async addWin(@Request() req, @Body() data: any) { async addWin(@Request() req, @Body() data: any) {
console.log("WIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIN: ", req.user.username)
const user = await this.userService.findOne(req.user.username); const user = await this.userService.findOne(req.user.username);
console.log("User", user)
// const user2 = await this.userService.findOne(data.opName);
user.win++; user.win++;
const Esp = 1 / (1 + Math.pow(10, (data.opRank - user.rank) / this.scaleFactor)) const Esp = 1 / (1 + Math.pow(10, (data.opRank - user.rank) / this.scaleFactor))
const newRank = user.rank + this.kFactor * (1 - Esp); const newRank = user.rank + this.kFactor * (1 - Esp);
@ -234,14 +237,16 @@ export class AppController {
newMatch.opScore = data.opScore; newMatch.opScore = data.opScore;
newMatch.opponent = data.opName; newMatch.opponent = data.opName;
newMatch.parent = user; newMatch.parent = user;
console.log(`newMatch WIIIN = ${newMatch}`);
await this.userService.saveChild(user, newMatch); await this.userService.saveChild(user, newMatch);
} }
@UseGuards(JwtAuthGuard) @UseGuards(JwtAuthGuard)
@Post('/loss') @Post('/loss')
async addLoss(@Request() req, @Body() data: any) { async addLoss(@Request() req, @Body() data: any) {
console.log("LOOOOOOOOOOOOOOOSE: ", req.user.username)
const user = await this.userService.findOne(req.user.username); const user = await this.userService.findOne(req.user.username);
console.log("User", user)
user.loss++; user.loss++;
const Esp = 1 / (1 + Math.pow(10, (data.opRank - user.rank) / this.scaleFactor)) const Esp = 1 / (1 + Math.pow(10, (data.opRank - user.rank) / this.scaleFactor))
@ -256,7 +261,7 @@ export class AppController {
newMatch.opScore = data.opScore; newMatch.opScore = data.opScore;
newMatch.opponent = data.opName; newMatch.opponent = data.opName;
newMatch.parent = user; newMatch.parent = user;
console.log(`newMatch Loose= ${newMatch}`);
await this.userService.saveChild(user, newMatch); await this.userService.saveChild(user, newMatch);
} }
@ -292,10 +297,10 @@ export class AppController {
@UseGuards(JwtAuthGuard) @UseGuards(JwtAuthGuard)
@Get('/partyInvite') @Get('/partyInvite')
async getPartyInvite(@Body() data: any) async getPartyInvite(@Request() req, @Body() data: any)
{ {
//find data.username and add invite to list //find data.username and add invite to list
const user = await this.userService.findOne(data.username); const user = await this.userService.findOne(req.user.username);
user.partyInvite = user.partyInvite || []; user.partyInvite = user.partyInvite || [];
// this.userService.save(user); // this.userService.save(user);
// user.partyInvite.push(data); // user.partyInvite.push(data);
@ -308,8 +313,13 @@ export class AppController {
async deleteInvite(@Request() req, @Body() data: any) async deleteInvite(@Request() req, @Body() data: any)
{ {
console.log("delete invite user= ", data.username) console.log("delete invite user= ", data.username)
const user = await this.userService.findOne(data.username); const user = await this.userService.findOne(req.user.username);
user.partyInvite = user.partyInvite.filter(item => Object.values(item)[1] !== req.user.username);
// user.partyInvite = user.partyInvite.filter(item => Object.values(item)[1] !== req.user.username);
console.log("user.partyInvite before", user.partyInvite)
user.partyInvite = user.partyInvite.filter((item) => Object.values(item)[1] !== data.username);
console.log("user.partyInvite after", user.partyInvite)
this.userService.save(user); this.userService.save(user);
} }

3
containers/api/src/chat/chat.service.ts
View File

@ -6,7 +6,7 @@
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */ /* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2023/06/17 01:00:25 by apommier #+# #+# */ /* Created: 2023/06/17 01:00:25 by apommier #+# #+# */
/* Updated: 2023/06/18 13:14:51 by apommier ### ########.fr */ /* Updated: 2023/06/20 16:47:02 by apommier ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -85,6 +85,7 @@ async banUser(convId: number, username: string) {
conv.banned = conv.banned || []; conv.banned = conv.banned || [];
if (conv.banned.find(item => item === username)) if (conv.banned.find(item => item === username))
return (1); return (1);
conv.members = conv.members.filter((item) => item !== username);
conv.banned.push(username); conv.banned.push(username);
this.save(conv); this.save(conv);
} }

3
containers/api/src/users/users.service.ts
View File

@ -6,7 +6,7 @@
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */ /* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2023/06/17 01:00:07 by apommier #+# #+# */ /* Created: 2023/06/17 01:00:07 by apommier #+# #+# */
/* Updated: 2023/06/17 01:00:08 by apommier ### ########.fr */ /* Updated: 2023/06/21 01:31:44 by apommier ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -47,6 +47,7 @@ export class UsersService {
async saveChild(user: User, match: MatchLog): Promise<User> { async saveChild(user: User, match: MatchLog): Promise<User> {
// user.match = savedChild; // user.match = savedChild;
user.children.push(match)
await this.matchRepository.save(match); await this.matchRepository.save(match);
return await this.userRepository.save(user); return await this.userRepository.save(user);
} }

157
containers/chat/src/chat/chat.gateway.ts
View File

@ -98,85 +98,80 @@ export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
} }
} }
@SubscribeMessage('socket.io') // @SubscribeMessage('socket.io')
socketConnect(client: any, payload: any): void { // socketConnect(client: any, payload: any): void {
console.log("/socket.io") // console.log("/socket.io")
// }
@SubscribeMessage('ban')
banUser(client: any, payload: any): void {
if (!this.clientsNames.has(payload.username))
{
console.log("No user found.");
return;
}
const bannedClients = this.clientsNames.get(payload.username);
bannedClients.forEach(client => {
console.log("Banning client:", client);
// Perform ban operation on each client, e.g., emit a 'ban' event
console.log("clietn socket=", this.clients[client])
this.clients[client].emit('ban', payload);
});
// console.log("/ban")
// console.log("in ban username=", payload.username)
// if (!this.clientsNames[payload.username])
// {
// console.log("no user ??")
// return ;
// }
// this.clientsNames[payload.username].forEach()
// console.log("client=", this.clientsNames)
// this.clients[payload.username].emit('ban', payload)
} }
@SubscribeMessage('mute')
muteUser(client: any, payload: any): void {
if (!this.clientsNames.has(payload.username))
{
console.log("No user found.");
return;
}
const mutedClients = this.clientsNames.get(payload.username);
mutedClients.forEach(client => {
console.log("Banning client:", client);
// Perform ban operation on each client, e.g., emit a 'ban' event
console.log("clietn socket=", this.clients[client])
this.clients[client].emit('mute', payload);
});
console.log("/mute")
}
// @SubscribeMessage('sendMessage')
// handleMessage(user: any, payload: any): void {
// console.log(`message recceveid: ${payload}`)
// console.log(`message recceveid: ${payload.sender}`)
// console.log(`message recceveid: ${payload.convId}`)
// console.log(`message recceveid: ${payload.members}`)
// console.log(`client id: ${user.id}`)
// this.clientsNames.forEach((clientArray, clientName) => {
// console.log(`Clients with name ${clientName}:`);
// // clientArray.forEach((client) => {
// this.clientsNames[clientName]
// // .forEach(client => {
// // // if(client.id != user.id)
// // // {
// // console.log("send to someone")
// // console.log(client); // Perform actions on each client
// // // clients.emit('message', payload)
// // client.emit('message')
// // // }
// // });
// // .forEach((client) => {
// // if(client.id != user.id)
// // {
// // console.log("send to someone")
// // console.log(client); // Perform actions on each client
// // // clients.emit('message', payload)
// // client.emit('message')
// // }
// });
// };
@SubscribeMessage('sendMessage') @SubscribeMessage('sendMessage')
handleMessage(client: Socket, payload: any): void { handleMessage(client: Socket, payload: any): void {
// console.log(`message received: ${payload}`); // console.log(`message received: ${payload}`);
console.log(`message sender: ${payload.sender}`); // console.log(`message sender: ${payload.sender}`);
console.log(`client id: ${client.id}`); // console.log(`client id: ${client.id}`);
console.log(`conversation ID: ${payload.convId}`); // console.log(`conversation ID: ${payload.convId}`);
console.log(`members: ${payload.members}`); // console.log(`members: ${payload.members}`);
this.clientsNames.forEach((clientArray, clientName) => this.clientsNames.forEach((clientArray, clientName) =>
{ {
console.log(` 5Clients with name ${clientName}:`); // console.log(` 5Clients with name ${clientName}:`);
if (payload.members.includes(clientName)) if (payload.members.includes(clientName))
{ {
clientArray.forEach((targetClient, index) => clientArray.forEach((targetClient, index) =>
{ {
console.log(`client id: ${client.id}`); // console.log(`client id: ${client.id}`);
console.log(`target: ${targetClient}`); // console.log(`target: ${targetClient}`);
console.log(`target id: ${targetClient}`); // console.log(`target id: ${targetClient}`);
if (targetClient && targetClient !== client.id) if (targetClient && targetClient !== client.id)
{ {
console.log("Sending to someone"); // console.log("Sending to someone");
console.log(`index= ${index}`); // console.log(`index= ${index}`);
console.log(`target: ${targetClient}`); // Perform actions on each target client // console.log(`target: ${targetClient}`); // Perform actions on each target client
// targetClient.emit('message')
// this.clientsNames[clientName].emit('message')
// this.clientsNames["apommier"].emit('message')
this.clients[targetClient].emit('message', payload) this.clients[targetClient].emit('message', payload)
// console.log(test)
// console.log(test)
// this.clientsNames[clientName][index].emit('message');
// const socket = this.server.sockets.sockets.get(targetClient.id);
// if (socket) {
// socket.emit('message', payload);
// } else {
// console.log(`Socket with ID ${client.id} not found.`);
// }
// targetClient.emit('message', payload);
// targetClient.emit('message', payload);
} }
else { else {
console.log("not sending"); console.log("not sending");
@ -191,41 +186,3 @@ export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
// for (let key in this.clientsNames) {
// if (payload.members.includes(key)) {
// console.log("Key exists in the array");
// // if (key !== payload.sender)
// // {
// for (let key2 in this.clientsNames[key])
// {
// if (client.id !== this.clientsNames[key][key2])
// {
// console.log("send to someone")
// this.clientsNames[key][key2].emit('message', payload)
// }
// }
// // }
// //if member socket different from mine
// //send
// } else {
// console.log("Key does not exist in the array");
// }
//if key is in member
// let socket = this.clients[key];
// console.log("Clé:", key);
// console.log("Socket:", socket);
// }
// payload.convId // conv user instead ?
//find user to send message to
//const res = {
//convId: payload.convId
//sender: payload.sender
// }
//while (user of conv)//how to get conv user
// if (user connected)
//send res to user
// }

81
containers/pong/src/pong/pong.gateway.ts
View File

@ -6,7 +6,7 @@
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */ /* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2023/06/19 15:18:38 by apommier #+# #+# */ /* Created: 2023/06/19 15:18:38 by apommier #+# #+# */
/* Updated: 2023/06/19 21:38:55 by apommier ### ########.fr */ /* Updated: 2023/06/21 00:59:39 by apommier ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -53,26 +53,53 @@ export class PongGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
// console.log(`Client disconnected: ${client.id}`); // console.log(`Client disconnected: ${client.id}`);
console.log(`Normal disconnected: ${client.id}`); console.log(`Normal disconnected: ${client.id}`);
// this.waitingClients.delete(client); // this.waitingClients.delete(client);
this.waitingClients.forEach((waitingClient) => { // this.waitingClients.forEach((waitingClient) => {
if (waitingClient.client === client) { // if (waitingClient.client === client) {
this.waitingClients.delete(waitingClient); // this.waitingClients.delete(waitingClient);
}}) // }})
delete this.clients[client.id]; // delete this.clients[client.id];
console.log(`Total connected clients: ${Object.keys(this.clients).length}`);
}
this.waitingClients.forEach((item) => {
@SubscribeMessage('pong:disconnect') if (item.client === client)
disconnectClient(client: Socket, payload: any): void { this.waitingClients.delete(item);
console.log("disconnect forced client= ", client.id) });
for (const key in this.clients) { // Delete the socket from the 'games' map
if (this.clients.hasOwnProperty(key) && this.clients[key] === client) this.games.forEach((sockets, gameId) => {
delete this.clients[key]; const index = sockets.indexOf(client);
} if (index !== -1)
{
// Delete the socket from the 'waitingClients' set if (index === 0)
this.waitingClients.forEach((item) => { {
console.log("emit boy1")
sockets[1].emit("pong:win")
// sockets[0].emit("/win")
}
else
{
console.log("emit boy2")
sockets[0].emit("pong:win")
// sockets[1].emit("/win")
}
this.games.delete(gameId);
delete this.clients[client.id];
}
})
console.log(`Total connected clients: ${Object.keys(this.clients).length}`);
}
@SubscribeMessage('pong:disconnect')
disconnectClient(client: Socket, payload: any): void {
console.log("disconnect forced client= ", client.id)
for (const key in this.clients) {
if (this.clients.hasOwnProperty(key) && this.clients[key] === client)
delete this.clients[key];
}
// Delete the socket from the 'waitingClients' set
this.waitingClients.forEach((item) => {
if (item.client === client) if (item.client === client)
this.waitingClients.delete(item); this.waitingClients.delete(item);
}); });
@ -82,7 +109,6 @@ export class PongGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
const index = sockets.indexOf(client); const index = sockets.indexOf(client);
if (index !== -1) if (index !== -1)
{ {
if (index === 0) if (index === 0)
{ {
console.log("emit boy1") console.log("emit boy1")
@ -95,19 +121,6 @@ export class PongGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
sockets[0].emit("pong:win") sockets[0].emit("pong:win")
// sockets[1].emit("/win") // sockets[1].emit("/win")
} }
// let playersIds =
// const playersIds = this.games.get(gameId).map(socket => socket.id);
// // if (playersIds[0] === payload.id)
// // {
// if (this.clients[playersIds[1]])
// this.clients[playersIds[1]].emit('pong:win');
// if (this.clients[playersIds[0]])
// this.clients[playersIds[0]].emit('pong:win');
// }
// if (playersIds[1] === payload.id)
// {
// }
//send victory to the other one
this.games.delete(gameId); this.games.delete(gameId);
delete this.clients[client.id]; delete this.clients[client.id];
} }

2
containers/react/.env
View File

@ -1,4 +1,4 @@
REACT_APP_BASE_URL=localhost REACT_APP_BASE_URL=92.143.191.152
REACT_APP_API_SECRET=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 REACT_APP_API_SECRET=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
REACT_APP_CLIENT_UID=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41 REACT_APP_CLIENT_UID=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41
# REACT_APP_BASE_URL=92.143.191.152 # REACT_APP_BASE_URL=92.143.191.152

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

@ -97,6 +97,7 @@ function Chats(){
// let socket: Socket; // let socket: Socket;
const socket = useRef<Socket | null>(null); const socket = useRef<Socket | null>(null);
// const socket = Socket<DefaultEventsMap, DefaultEventsMap> | null
// socket = useRef( useRef<SocketIOClient.Socket | null>(null)); // socket = useRef( useRef<SocketIOClient.Socket | null>(null));
@ -115,15 +116,22 @@ function Chats(){
setConversation(convs.data); setConversation(convs.data);
// console.log(`connection....`); // console.log(`connection....`);
socket.current = io('http://' + process.env.REACT_APP_BASE_URL + ':4001', { transports: ['polling'] }); socket.current = io('http://' + process.env.REACT_APP_BASE_URL + ':4001', { transports: ['polling'] });
// console.log(`connection done`);
socket.current.emit('connection', {username: tmpUser.data.username}) socket.current.emit('connection', {username: tmpUser.data.username})
socket.current.on('message', (data) => { //data should be a message ? socket.current.on('message', (data) => { //data should be a message ?)
// console.log(`message received data= ${data.sender}`)
// console.log(`message received data= ${data.convId}`)
// console.log(`message received data= ${data.sender}`)
// console.log(`current chat = ${currentChat}`)
setIncomingMessage(data); setIncomingMessage(data);
}); });
socket.current.on('ban', (data) => {
// setIncomingMessage(data);
console.log("banned hehe");
window.location.reload()
});
socket.current.on('mute', (data) => {
console.log("muted hehe");
//set mute var to true and do nothing
});
setIsLoading(false) setIsLoading(false)
} }
@ -134,6 +142,14 @@ function Chats(){
}; };
getConv(); getConv();
return () => {
console.log("Cleanup");
if (socket.current)
socket.current.disconnect();
// cleanup(); // Call the cleanup function to stop the ongoing process or perform necessary cleanup tasks
// cleanup();
};
}, []) }, [])
useEffect(()=> { useEffect(()=> {
@ -175,6 +191,7 @@ function Chats(){
try { try {
const res = await api.post('/getMessage', data); const res = await api.post('/getMessage', data);
console.log("message of conv=", res.data)
setMessage(res.data); setMessage(res.data);
} catch(err) { } catch(err) {
@ -198,6 +215,14 @@ function Chats(){
id: null, id: null,
}; };
try{ try{
const allowed = await api.post('/allowed', {convId: currentChat.id});
console.log("convid:", currentChat.id);
if (!allowed.data)
{
console.log("muted or banned");
return ;
}
console.log("not muted or banned");
const res = await api.post('/message', message); const res = await api.post('/message', message);
const convMember = await api.post('/member', message); const convMember = await api.post('/member', message);
message.members = convMember.data.members; message.members = convMember.data.members;
@ -437,7 +462,7 @@ function Chats(){
initial={false} initial={false}
onExitComplete={() => null} onExitComplete={() => null}
> >
{setting && <ModalSetting handleClose={closeSetting} convId={currentChat.id.toString()}/>} {setting && <ModalSetting handleClose={closeSetting} convId={currentChat.id.toString()} socket={socket.current}/>}
</AnimatePresence> </AnimatePresence>
</motion.div> </motion.div>
</TouchDiv> </TouchDiv>

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

@ -29,6 +29,7 @@ interface ModalGame {
const GameModal = ({ handleClose }: ModalGame) => { const GameModal = ({ handleClose }: ModalGame) => {
const [users, setUsers] = useState([]); const [users, setUsers] = useState([]);
// const [user, setUser] = useState();
const [selectedUser, setSelectedUser] = useState(''); const [selectedUser, setSelectedUser] = useState('');
// const [convs, setConvs] = useState([]); // const [convs, setConvs] = useState([]);
const [channel, setChannel] = useState(''); const [channel, setChannel] = useState('');
@ -39,8 +40,10 @@ const GameModal = ({ handleClose }: ModalGame) => {
const fetchData = async () => { const fetchData = async () => {
try { try {
const tmpUsers = await api.get("/users"); const tmpUsers = await api.get("/users");
// const tmpUser = await api.get("/profile");
// const tmpConvs = await api.get("/convs"); // const tmpConvs = await api.get("/convs");
setUsers(tmpUsers.data); setUsers(tmpUsers.data);
// setUser(tmpUser.data);
// setConvs(tmpConvs.data); // setConvs(tmpConvs.data);
} catch (err) { } catch (err) {
console.log(err); console.log(err);
@ -53,20 +56,20 @@ const GameModal = ({ handleClose }: ModalGame) => {
setSelectedUser(event.target.value); setSelectedUser(event.target.value);
}; };
const joinChannel = async () => { // const joinChannel = async () => {
try { // try {
await api.post("/join", { convId: channel }); // await api.post("/join", { convId: channel });
} catch (err) { // } catch (err) {
console.log(err); // console.log(err);
} // }
}; // };
const handleCheckButtonClick = () => { // const handleCheckButtonClick = () => {
// Perform your check action here // // Perform your check action here
console.log("Checking user:", selectedUser); // console.log("Checking user:", selectedUser);
}; // };
const handleButtonClick = () => { const handleButtonClick = async () => {
// let path = `play?`; // let path = `play?`;
let path = `http://` + process.env.REACT_APP_BASE_URL + `/pong/play?`; let path = `http://` + process.env.REACT_APP_BASE_URL + `/pong/play?`;
@ -93,6 +96,8 @@ const GameModal = ({ handleClose }: ModalGame) => {
// path = path.slice(0, -1); // path = path.slice(0, -1);
// console.log(path) // console.log(path)
// await api.post("/partyInvite", {username: selectedUser, gameId})
// console.log("path= ", path) // console.log("path= ", path)
// history(path, { replace: true }); // history(path, { replace: true });
// window.location.replace(path); // window.location.replace(path);

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

@ -6,7 +6,7 @@
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */ /* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2023/06/01 18:24:46 by apommier #+# #+# */ /* Created: 2023/06/01 18:24:46 by apommier #+# #+# */
/* Updated: 2023/06/20 12:47:33 by apommier ### ########.fr */ /* Updated: 2023/06/20 19:05:10 by apommier ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -42,6 +42,8 @@ function MessageMe({message, own}: MessageMeProps){
const [user, setUser] = useState<User>(); const [user, setUser] = useState<User>();
const scrollRef = useRef<HTMLDivElement>(null); const scrollRef = useRef<HTMLDivElement>(null);
// console.log("Message eher")
useEffect(() => { useEffect(() => {
if (scrollRef.current) if (scrollRef.current)
{ {
@ -80,13 +82,20 @@ function MessageMe({message, own}: MessageMeProps){
}; };
if (!user || !sender || !conv) if (!user || !sender || !conv)
{
// console.log("return")
return (<></>); return (<></>);
}
// console.log("result includes=", conv.banned.includes(user.username)) // console.log("result includes=", conv.banned.includes(user.username))
// console.log("result includes=", conv.blocked.includes(user.username)) // console.log("result includes=", conv.blocked.includes(user.username))
if (user.blocked && user.blocked.includes(message.sender)) if (user.blocked && user.blocked.includes(message.sender))
return (<></>); 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))/ // if (user.blocked.includes(message.sender))/
return ( return (

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

@ -100,11 +100,11 @@ const Modal = ({handleClose}) => {
// let new_name; // let new_name;
return ( return (
<Backdrop> <Backdrop onClick={handleClose}>
<motion.div <motion.div
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
className="modal" className="modal"
variant={dropIn} // variant={dropIn}
initial="hidden" initial="hidden"
animate="visible" animate="visible"
exit="exit" exit="exit"

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

@ -8,6 +8,7 @@ import { Link } from "react-router-dom";
import api from "../../script/axiosApi.tsx"; import api from "../../script/axiosApi.tsx";
import React from "react"; import React from "react";
import {User} from "../../../interfaces.tsx" import {User} from "../../../interfaces.tsx"
import { Socket } from "socket.io-client";
const dropIn = { const dropIn = {
@ -28,10 +29,11 @@ const dropIn = {
interface ModalSettingProps { interface ModalSettingProps {
handleClose: Function, handleClose: Function,
convId: string convId: string,
socket: Socket | null,
} }
const ModalSetting = ({handleClose, convId}: ModalSettingProps) => { const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
const [password, setPassword] = useState(false); const [password, setPassword] = useState(false);
const [users, setUsers] = useState<User[]>([]); const [users, setUsers] = useState<User[]>([]);
const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: ''}]); const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: ''}]);
@ -101,6 +103,7 @@ const ModalSetting = ({handleClose, convId}: ModalSettingProps) => {
return ; return ;
try{ try{
api.post("/name", {convId: convId, name: newName}) api.post("/name", {convId: convId, name: newName})
window.location.reload()
} catch(err) { } catch(err) {
console.log(err); console.log(err);
} }
@ -111,51 +114,56 @@ const ModalSetting = ({handleClose, convId}: ModalSettingProps) => {
if (e.key !== "Enter") if (e.key !== "Enter")
return ; return ;
try{ try{
api.post("/password", {convId: convId, password: newPassword}) await api.post("/password", {convId: convId, password: newPassword})
} catch(err) { } catch(err) {
console.log(err); console.log(err);
} }
handleClose(); handleClose();
} }
const handleBan = () => { const handleBan = async () => {
// console.log("ban option= ", selectedUser) // console.log("ban option= ", selectedUser)
try{ try{
// console.log("user select=", selectedUser.length) // console.log("user select=", selectedUser.length)
if (!selectedUser.length) if (!selectedUser.length)
return ; return ;
api.post("/ban", {convId: convId, username: selectedUser}) await api.post("/ban", {convId: convId, username: selectedUser})
if (socket)
{
console.log("emit to ban server")
socket.emit("ban", {username: selectedUser})
}
} catch(err) { } catch(err) {
console.log(err); console.log(err);
} }
handleClose(); handleClose();
}; };
const handleAdmin = () => { const handleAdmin = async () => {
if (!selectedUser.length) if (!selectedUser.length)
return ; return ;
try{ try{
api.post("/admin", {convId: convId, username: selectedUser}) await api.post("/admin", {convId: convId, username: selectedUser})
} catch(err) { } catch(err) {
console.log(err); console.log(err);
} }
handleClose(); handleClose();
}; };
const handleMute = () => { const handleMute = async () => {
if (!selectedUser.length) if (!selectedUser.length)
return ; return ;
try{ try{
api.post("/mute", {convId: convId, username: selectedUser}) await api.post("/mute", {convId: convId, username: selectedUser})
} catch(err) { } catch(err) {
console.log(err); console.log(err);
} }
handleClose(); handleClose();
}; };
const handleInvite = () => { const handleInvite = async () => {
try{ try{
api.post("/invite", {convId: convId, username: selectedUser}) await api.post("/invite", {convId: convId, username: selectedUser})
} catch(err) { } catch(err) {
console.log(err); console.log(err);
} }

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

@ -6,7 +6,7 @@
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */ /* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2023/06/19 16:44:29 by apommier #+# #+# */ /* Created: 2023/06/19 16:44:29 by apommier #+# #+# */
/* Updated: 2023/06/20 03:47:52 by apommier ### ########.fr */ /* Updated: 2023/06/20 23:53:01 by apommier ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -83,9 +83,6 @@ export default function PartyInvite({currentInvite}: UserProps)
window.location.reload(); window.location.reload();
}; };
const Accept = async (request: User) => { const Accept = async (request: User) => {
try{ try{
//call canvas ?? //call canvas ??
@ -118,6 +115,7 @@ export default function PartyInvite({currentInvite}: UserProps)
// Vérifier si le contenu doit être caché // Vérifier si le contenu doit être caché
if (clickEvent) { if (clickEvent) {
console.log("retrun true")
return null; // Rendre null pour ne pas afficher le contenu return null; // Rendre null pour ne pas afficher le contenu
} }

28
containers/react/src/pages/canvas.tsx
View File

@ -61,7 +61,7 @@ function DrawCanvas(option: number, gameParam: GameProps) {
if(!ctx) if(!ctx)
return ; return ;
const socket = io('http://' + process.env.REACT_APP_BASE_URL + ':4000'); const socket = io('http://' + process.env.REACT_APP_BASE_URL + ':4000', { transports: ['polling'] });
// useEffect(() => { // useEffect(() => {
// console.log("useeffect?????????????????") // console.log("useeffect?????????????????")
// return () => { // return () => {
@ -137,14 +137,14 @@ function DrawCanvas(option: number, gameParam: GameProps) {
socket.on('pong:win', async () => { socket.on('pong:win', async () => {
myScore = maxScore; myScore = maxScore;
console.log("instant win opponent disconnect") console.log("instant win opponent disconnect")
const data = { // const data = {
myScore: myScore, // myScore: myScore,
opScore: hisScore, // opScore: hisScore,
opName: opName, // opName: opName,
opRank: opRank, // opRank: opRank,
}; // };
await api.post('/win', data); // await api.post('/win', data);
console.log("after request1") console.log("after request1")
await api.post('/status', {status: 1}); await api.post('/status', {status: 1});
console.log("after request2") console.log("after request2")
@ -152,7 +152,7 @@ socket.on('pong:win', async () => {
running = false; running = false;
socket.emit('pong:disconnect', {id: myId}); socket.emit('pong:disconnect', {id: myId});
console.log("before reload") console.log("before reload")
window.location.replace("http://" + process.env.REACT_APP_BASE_URL + "/pong"); // window.location.replace("http://" + process.env.REACT_APP_BASE_URL + "/pong");
// window.location.reload(); // window.location.reload();
return ; return ;
// console.log("send all ?? win"); // console.log("send all ?? win");
@ -468,6 +468,7 @@ async function draw(timestamp: number)
} }
if (myScore === maxScore || hisScore === maxScore) if (myScore === maxScore || hisScore === maxScore)
{ {
console.log("maxScore!!!!")
const data = { const data = {
myScore: myScore, myScore: myScore,
opScore: hisScore, opScore: hisScore,
@ -485,8 +486,9 @@ async function draw(timestamp: number)
} }
else else
{ {
// await api.post('/loss', data); await api.post('/loss', data);
// await api.post('/status', {status: 1}); await api.post('/status', {status: 1});
socket.emit('pong:disconnect', {id: myId});
//disconnect ? //disconnect ?
console.log("send loose"); console.log("send loose");
} }
@ -604,7 +606,9 @@ async function draw(timestamp: number)
} }
if (ballX > canvas.width) if (ballX > canvas.width)
{ {
console.log("win point") // if (ballX > canvas.width * 2)
// socket.emit
// console.log("win point")
// if (ballY <= paddleY + paddleHeight + ballRadius && ballY >= paddleY - ballRadius) // if (ballY <= paddleY + paddleHeight + ballRadius && ballY >= paddleY - ballRadius)
// { // {
// console.log('true hehe'); // console.log('true hehe');