From 7085fc1f8db9799c810403336475c128aa63e27c Mon Sep 17 00:00:00 2001 From: kinou-p Date: Fri, 9 Jun 2023 17:09:08 +0200 Subject: [PATCH] friend request start --- containers/api/src/app.controller.ts | 9 ++ containers/api/src/users/users.service.ts | 14 ++- containers/pong/src/pong/pong.gateway.ts | 105 +++++++++++++----- .../src/components/Social/FriendRequest.jsx | 104 +++++++++++++++++ .../react/src/components/Social/Social.jsx | 31 ++---- 5 files changed, 213 insertions(+), 50 deletions(-) create mode 100644 containers/react/src/components/Social/FriendRequest.jsx diff --git a/containers/api/src/app.controller.ts b/containers/api/src/app.controller.ts index f8a698da..489c3ad8 100644 --- a/containers/api/src/app.controller.ts +++ b/containers/api/src/app.controller.ts @@ -68,6 +68,15 @@ export class AppController { return await this.userService.addFriend(user, data.username); } + @UseGuards(JwtAuthGuard) + @Get('/invite') + async getInvite(@Request() req) { + // return await this.userService.getFriends(req.user.username); + console.log(`useawdawd\n\n\nr= ${req.user.username}`) + // const user = await this.userService.findOne(req.user.username) + return await this.userService.getInvite(req.user.username); + } + @UseGuards(JwtAuthGuard) @Post('/status') async setStatus(@Request() req, @Body() data: any) { diff --git a/containers/api/src/users/users.service.ts b/containers/api/src/users/users.service.ts index f557c6b1..433cea6f 100644 --- a/containers/api/src/users/users.service.ts +++ b/containers/api/src/users/users.service.ts @@ -43,7 +43,19 @@ export class UsersService { const user = await this.findOne(username) let friendsTab = user.friends console.log(friendsTab) - friendsTab = ['apommier', 'syd'] + // friendsTab = ['apommier', 'syd'] + const friends = await this.userRepository.query("SELECT * FROM \"User\" WHERE username = ANY ($1);", [friendsTab]); + console.log(friends) + return (friends) + } + + async getInvite(username: string) { + const user = await this.findOne(username) + let friendsTab = user.friendRequest + // console.log(friendsTab[0]) + // console.log(friendsTab[1]) + console.log(friendsTab) + // friendsTab = ['apommier', 'syd'] const friends = await this.userRepository.query("SELECT * FROM \"User\" WHERE username = ANY ($1);", [friendsTab]); console.log(friends) return (friends) diff --git a/containers/pong/src/pong/pong.gateway.ts b/containers/pong/src/pong/pong.gateway.ts index 9ca1c80b..19b81f12 100644 --- a/containers/pong/src/pong/pong.gateway.ts +++ b/containers/pong/src/pong/pong.gateway.ts @@ -8,7 +8,7 @@ export class PongGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa private clients: Record = {}; - private waitingClients: Set = new Set(); + private waitingClients: Set<{ client: Socket, option: number }> = new Set(); // private waitingClients: Set = new Set(); // Utilisateurs cherchant un match private games: Map = new Map(); // Parties en cours, identifiées par un ID @@ -32,38 +32,85 @@ export class PongGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa handleDisconnect(client: Socket) { console.log(`Client disconnected: ${client.id}`); - this.waitingClients.delete(client); + // this.waitingClients.delete(client); + this.waitingClients.forEach((waitingClient) => { + if (waitingClient.client === client) { + this.waitingClients.delete(waitingClient); + }}) delete this.clients[client.id]; console.log(`Total connected clients: ${Object.keys(this.clients).length}`); } - @SubscribeMessage('pong:matchmaking') - addMatchmaking(client: Socket, payload: any): void - { - console.log("matchmaking"); - console.log(payload); - // this.waitingClients.add(client); - this.waitingClients.add(client); - console.log("Adding client to waiting list..."); - if (this.waitingClients.size >= 2) { - console.log("Creating new game..."); - const players = Array.from(this.waitingClients).slice(0, 2); - players.forEach((player) => { - this.waitingClients.delete(player); - }); - const gameId = uuidv4(); - this.games.set(gameId, players); - players.forEach((player) => { - player.join(gameId); - console.log(`Player ${player.id} joined game ${gameId}`); - }); - players.forEach((player) => { - // const playersIds = game.map(socket => socket.id); - player.emit('pong:gameId', gameId); - }); - } - // console.log(`from: ${client.id}`); - } + // @SubscribeMessage('pong:matchmaking') + // addMatchmaking(client: Socket, payload: any): void + // { + // console.log("matchmaking"); + // console.log(payload); + // // this.waitingClients.add(client); + // this.waitingClients.add(client); + // console.log("Adding client to waiting list..."); + // if (this.waitingClients.size >= 2) { + // console.log("Creating new game..."); + // const players = Array.from(this.waitingClients).slice(0, 2); + // players.forEach((player) => { + // this.waitingClients.delete(player); + // }); + // const gameId = uuidv4(); + // this.games.set(gameId, players); + // players.forEach((player) => { + // player.join(gameId); + // console.log(`Player ${player.id} joined game ${gameId}`); + // }); + // players.forEach((player) => { + // // const playersIds = game.map(socket => socket.id); + // player.emit('pong:gameId', gameId); + // }); + // } + // // console.log(`from: ${client.id}`); + // } + +@SubscribeMessage('pong:matchmaking') +addMatchmaking(client: Socket, payload: any): void { + console.log("matchmaking"); + console.log(payload); + // Add the client to the waitingClients set along with their chosen option + this.waitingClients.add({ client, option: payload.option }); + console.log("Adding client to waiting list..."); + + // Filter the waitingClients set to find clients with the same option + const matchingClients = Array.from(this.waitingClients).filter( + (waitingClient) => + waitingClient.option === payload.option && waitingClient.client !== client + ); + + if (matchingClients.length > 0) { + console.log("Creating new game..."); + const players = [matchingClients[0].client, client]; // Add the current client to the players array + players.forEach((player) => { + // this.waitingClients.delete( + // this.waitingClients.find( + // (waitingClient) => waitingClient.client === player + // ) + // ); + const matchingClient = Array.from(this.waitingClients).find( + (waitingClient) => waitingClient.client === player + ); + if (matchingClient) { + this.waitingClients.delete(matchingClient); + } + }); + const gameId = uuidv4(); + this.games.set(gameId, players); + players.forEach((player) => { + player.join(gameId); + console.log(`Player ${player.id} joined game ${gameId}`); + }); + players.forEach((player) => { + player.emit('pong:gameId', gameId); + }); + } + // console.log(`from: ${client.id}`); +} // @SubscribeMessage('pong:message') // handleMessage(client: Socket, payload: any): void diff --git a/containers/react/src/components/Social/FriendRequest.jsx b/containers/react/src/components/Social/FriendRequest.jsx new file mode 100644 index 00000000..bc828167 --- /dev/null +++ b/containers/react/src/components/Social/FriendRequest.jsx @@ -0,0 +1,104 @@ + +import { useEffect, useState } from "react"; +import api from '../../script/axiosApi'; +import DefaultPicture from '../../assets/profile.jpg' +import styled from "styled-components"; + +import { RxCheckCircled, RxCircleBackslash } from "react-icons/rx"; + +const UserChat = styled.div ` + padding: 5px; + display: flex; + align-items: center; + gap: 5px; + color: white; + cursor: pointer; + + &:hover{ + background-color: #3e3c61; + } +` + +const SideP = styled.p` + font-size: 14px; + color: lightgray; + margin-left: 15px; +` + +export default function Friend({currentUser}) +{ + const [profilePicture, setProfilePicture] = useState(''); + const [request, setRequest] = useState(''); + + useEffect(() => { + const fetchProfilePicture = async () => { + try { + // const user = await api.get("/profile"); + const pic = await api.post("/getPicture", {username: currentUser.username}) + const tmpRequest = await api.post("/user", {username: currentUser.username}) + setRequest(tmpRequest.data); + // 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); + } + }; + + fetchProfilePicture(); + }) + + function getStatus(friend) + { + let status = friend.status + console.log(`status= ${status}`) + let statusColor; + + if (status === 0) + statusColor = 'grey'; + else if (status === 1) + statusColor = 'green'; + else if (status === 2) + statusColor = 'blue'; + return statusColor; + } + + const handleSpectate = (user) => { + //socket connection and add to party with one with username + console.log(`spectate hehe`) + console.log(`user= ${user}`) + }; + + const handleButtonClick = (user) => { + let path = `http://localhost/profile/${user.username}`; + // history(path, { replace: true }); + // window.location.replace(path); + window.history.pushState({}, null, path); + window.location.reload(false); + }; + + const Accept = (user) => { + console.log("accept") + } + + const Refuse = (user) => { + console.log("refuse") + } + + return ( + + {profilePicture ? ( + + ) : ( + Default Profile Picture + )} +
+ handleButtonClick(currentUser)}>{currentUser.nickname} + Accept(request)} color={'green'}/> + Refuse(request)} color={'red'}/> + +
+ + ) +} + \ No newline at end of file diff --git a/containers/react/src/components/Social/Social.jsx b/containers/react/src/components/Social/Social.jsx index b4119b35..ef09288f 100644 --- a/containers/react/src/components/Social/Social.jsx +++ b/containers/react/src/components/Social/Social.jsx @@ -5,6 +5,7 @@ import styled from "styled-components"; import Friend from './Friend.jsx'; +import FriendRequest from './FriendRequest.jsx'; import { ImBlocked } from 'react-icons/im'; import { MdOutlineGroupAdd } from 'react-icons/md'; @@ -32,6 +33,7 @@ const TouchDiv = styled.div` function Social (){ const [friends, setFriends] = useState([]); + const [invite, setInvite] = useState([]); const [isLoading, setIsLoading] = useState(true); const [user, setUser] = useState(null); const [profilePicture, setProfilePicture] = useState(''); @@ -42,7 +44,10 @@ function Social (){ try{ const tmpFriends = await api.get("/friends") const tmpUser = await api.get("/profile") + const tmpInv = await api.get("/invite") const pic = await api.post("/getPicture", {username: tmpUser.data.username}) + + setInvite(tmpInv.data); setProfilePicture(pic.data); setUser(tmpUser.data); setFriends(tmpFriends.data); @@ -105,28 +110,14 @@ function Social (){ +{/* map with fiend request */} + + {invite.map(c=> ( + + ))} + {friends.map(c=> ( - // - // {profilePicture ? ( - // - // ) : ( - // Default Profile Picture - // )} - //
- // handleButtonClick(c)}>{c.nickname} - // - // - // {getStatus(c) !== 'blue' ? ( - // <> - // ) : ( - // - // )} - //
- // - - // - ))} )