From 071f30764a1df0663603bedecd058fdadae2f660 Mon Sep 17 00:00:00 2001 From: Alexandre POMMIER Date: Sat, 24 Jun 2023 00:51:32 +0200 Subject: [PATCH] canvas background page, fix message mute, win loss in profile --- .env | 7 +-- containers/api/src/app.controller.ts | 7 +-- containers/api/src/users/users.service.ts | 13 +++-- containers/pong/src/pong/pong.gateway.ts | 24 ++++++++- containers/react/.env | 4 +- .../react/src/components/Messages/Chats.tsx | 37 ++++---------- .../react/src/components/Messages/Message.tsx | 26 +++++++++- .../react/src/components/Messages/Modal.tsx | 35 +++++++------ .../react/src/components/Profile/Win_Loss.tsx | 4 +- containers/react/src/pages/Home.tsx | 17 +++++-- containers/react/src/pages/canvas.tsx | 50 ++++++++++++++++--- 11 files changed, 156 insertions(+), 68 deletions(-) diff --git a/.env b/.env index 6449f712..e5812e20 100644 --- a/.env +++ b/.env @@ -14,9 +14,10 @@ NGINX_ENVSUBST_TEMPLATE_SUFFIX=".conf" # BASE_URL=http://localhost -BASE_URL=localhost:8080 -REACT_APP_BASE_URL=localhost:8080 -REDIRECT_URI=http://localhost:8080/api/auth/login +# SOCKET_URL=bess-f2r2s16:8080 +BASE_URL=bess-f2r2s16:8080 +REACT_APP_BASE_URL=bess-f2r2s16:8080 +REDIRECT_URI=http://bess-f2r2s16:8080/api/auth/login #postgres var # POSTGRES_HOST=127.0.0.1 # DB_TYPE=postgres diff --git a/containers/api/src/app.controller.ts b/containers/api/src/app.controller.ts index 22d7ff29..76050290 100644 --- a/containers/api/src/app.controller.ts +++ b/containers/api/src/app.controller.ts @@ -6,7 +6,7 @@ /* By: apommier +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2023/06/17 01:00:00 by apommier #+# #+# */ -/* Updated: 2023/06/23 19:15:56 by apommier ### ########.fr */ +/* Updated: 2023/06/23 23:24:16 by apommier ### ########.fr */ /* */ /* ************************************************************************** */ @@ -180,6 +180,9 @@ export class AppController { // let user = req.user // user.nickname = data.nickname console.log(`user= ${req.user.username}`) + const taken = await this.userService.findNickname(data.nickname) + if (taken) + return (0); let user = await this.userService.findOne(req.user.username) user.nickname = data.nickname; // return await this.userService.getFriends(req.user.username); @@ -480,8 +483,6 @@ export class AppController { // res.json(messages); } - - @UseGuards(JwtAuthGuard) @Get('/conv') async getConv(@Request() req) { diff --git a/containers/api/src/users/users.service.ts b/containers/api/src/users/users.service.ts index 1e078d57..0ce83a87 100644 --- a/containers/api/src/users/users.service.ts +++ b/containers/api/src/users/users.service.ts @@ -6,7 +6,7 @@ /* By: apommier +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2023/06/17 01:00:07 by apommier #+# #+# */ -/* Updated: 2023/06/21 01:31:44 by apommier ### ########.fr */ +/* Updated: 2023/06/23 22:27:16 by apommier ### ########.fr */ /* */ /* ************************************************************************** */ @@ -41,6 +41,10 @@ export class UsersService { return await this.userRepository.findOneBy({username: username}); } + async findNickname(username: string): Promise { + return await this.userRepository.findOneBy({nickname: username}); + } + async save(user: User): Promise { return await this.userRepository.save(user); } @@ -105,18 +109,21 @@ export class UsersService { } async addFriend(user: User, username: string) { - if (!(await this.findOne(username))) + const user2 = await this.findOne(username) + if (!user) return (0); // user.friendRequest = user.friendRequest || []; user.friends = user.friends || []; if (user.friends.find(item => item === username)) - { + { user.friendRequest = user.friendRequest.filter((item) => item !== username); this.save(user); return (1); } user.friends.push(username); user.friendRequest = user.friendRequest.filter((item) => item !== username); + user2.friends.push(user.username); + this.save(user2); this.save(user); return (1); } diff --git a/containers/pong/src/pong/pong.gateway.ts b/containers/pong/src/pong/pong.gateway.ts index d5a8649f..c72da145 100644 --- a/containers/pong/src/pong/pong.gateway.ts +++ b/containers/pong/src/pong/pong.gateway.ts @@ -6,10 +6,12 @@ /* By: apommier +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2023/06/19 15:18:38 by apommier #+# #+# */ -/* Updated: 2023/06/23 15:19:12 by apommier ### ########.fr */ +/* Updated: 2023/06/24 00:43:19 by apommier ### ########.fr */ /* */ /* ************************************************************************** */ +//0.0001 + import { SubscribeMessage, WebSocketGateway, OnGatewayInit, WebSocketServer, OnGatewayConnection, OnGatewayDisconnect } from '@nestjs/websockets'; import { Server, Socket } from 'socket.io'; import { v4 as uuidv4 } from 'uuid'; @@ -337,6 +339,24 @@ addPrivateParty(client: Socket, payload: any): void { } } + @SubscribeMessage('pong:myPoint') + handleMyPoint(client: Socket, payload: any): void + { + const game = this.games.get(payload.gameId); + const playersIds = game.map(socket => socket.id); + console.log(`id of 0 mypoint= ${playersIds[0]}`); + + if (playersIds[0] === payload.id) + { + this.clients[playersIds[1]].emit('pong:hisPoint', payload); + + } + else if (playersIds[1] === payload.id) + { + this.clients[playersIds[0]].emit('pong:hisPoint', payload); + } + } + @SubscribeMessage('pong:name') getName(client: Socket, payload: any): void { @@ -345,7 +365,7 @@ addPrivateParty(client: Socket, payload: any): void { console.log(`name of client= ${payload.name}`); - if (playersIds[0] === payload.id) + if (playersIds[0] === payload.id) { this.clients[playersIds[1]].emit('pong:name', payload.name); } diff --git a/containers/react/.env b/containers/react/.env index d7d79fd5..0554a08a 100644 --- a/containers/react/.env +++ b/containers/react/.env @@ -1,5 +1,7 @@ -REACT_APP_BASE_URL=localhost:8080 +REACT_APP_BASE_URL=bess-f2r2s16:8080 +REACT_APP_SOCKET_URL=bess-f2r2s16 REACT_APP_API_SECRET=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 REACT_APP_CLIENT_UID=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41 + # REACT_APP_BASE_URL=92.143.191.152 # REACT_APP_BASE_URL=192.168.1.19 \ No newline at end of file diff --git a/containers/react/src/components/Messages/Chats.tsx b/containers/react/src/components/Messages/Chats.tsx index ce8ac4cb..24e5e3f2 100644 --- a/containers/react/src/components/Messages/Chats.tsx +++ b/containers/react/src/components/Messages/Chats.tsx @@ -83,7 +83,7 @@ interface MessageProps { } function Chats(){ - + const [isLoading, setIsLoading] = useState(true); const [conversations, setConversation] = useState([]); const [partyInvite, setPartyInvite] = useState([]); @@ -119,7 +119,7 @@ function Chats(){ setUsers(tmpUsers.data); // console.log(`connection....`); - socket.current = io('http://localhost:4001', { transports: ['polling'] }); + socket.current = io('http://' + process.env.REACT_APP_SOCKET_URL + ':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 ?) @@ -205,11 +205,12 @@ function Chats(){ getMessage(); }, [currentChat]); - const handleSubmit = async (e: { preventDefault: () => void; })=>{ + const handleSubmit = async (e: { key?: any; preventDefault: any; })=>{ e.preventDefault(); // console.log(`e= ${e.key}`) // console.log(`name= ${user.username}`) // let message; + console.log("in handle"); if (!user || !currentChat) return ; const message = { @@ -242,33 +243,11 @@ function Chats(){ } } - const handleKeyPress = async (e: { key: string; })=> { + const handleKeyPress = async (e: { key?: any; preventDefault: () => void; })=> { // console.log(`e in press= ${e.key}`) if (e.key !== "Enter") return ; - // console.log(`name= ${user.username}`) - if (!user || !currentChat) - return ; - const message = { - sender: user.username, - text: newMessages, - convId: currentChat.id, - members: null, - id: null, - }; - try{ - const res = await api.post('/message', message); - const convMember = await api.post('/member', message); - message.members = convMember.data.members; - message.id = res.data.id - setMessage([...messages, res.data]); - setNewMessage(""); - if (socket.current) - socket.current.emit('sendMessage', message); - } - catch(err){ - console.log(err) - } + handleSubmit(e); } @@ -323,6 +302,7 @@ function Chats(){ const handleAddFriend = async () => { try{ + console.log("friend= ", friend); const res = await api.post("/invite", {username: friend}) // if (res.data === 1) // console.log("res in friend= ", res) @@ -371,6 +351,7 @@ function Chats(){ const handleOptionChange = (selectId: number, selectedOption: string) => { console.log("selected Option=", selectedOption) + setFriend(selectedOption); setSelectTag((prevTags) => prevTags.map((tag) => tag.id === selectId ? { ...tag, selectedOption } : tag @@ -571,7 +552,7 @@ function Chats(){ placeholder="What do you want to say" onChange={(e) => setNewMessage(e.target.value)} value={newMessages} - /> + />
diff --git a/containers/react/src/components/Messages/Message.tsx b/containers/react/src/components/Messages/Message.tsx index 230845eb..ec1ee50a 100644 --- a/containers/react/src/components/Messages/Message.tsx +++ b/containers/react/src/components/Messages/Message.tsx @@ -6,7 +6,7 @@ /* By: apommier +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2023/06/01 18:24:46 by apommier #+# #+# */ -/* Updated: 2023/06/23 20:25:32 by apommier ### ########.fr */ +/* Updated: 2023/06/23 23:34:20 by apommier ### ########.fr */ /* */ /* ************************************************************************** */ @@ -51,6 +51,7 @@ 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}) @@ -81,16 +82,37 @@ function MessageMe({message, own}: MessageMeProps){ 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 (<>); else if (conv.banned && conv.banned.includes(user.username)) 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 (
diff --git a/containers/react/src/components/Messages/Modal.tsx b/containers/react/src/components/Messages/Modal.tsx index 0f76ba43..86c2e2f0 100644 --- a/containers/react/src/components/Messages/Modal.tsx +++ b/containers/react/src/components/Messages/Modal.tsx @@ -7,6 +7,7 @@ import { GrAdd } from "react-icons/gr"; import { Link } from "react-router-dom"; import api from "../../script/axiosApi.tsx"; import React from "react"; +import {User, Conv} from "../../../interfaces.tsx" const dropIn = { hidden:{y:"-100vh", @@ -23,13 +24,17 @@ const dropIn = { opacity: 0,}, }; -const Modal = ({handleClose}) => { +interface ModalProps { + handleClose: Function, + } + +const Modal = ({handleClose}: ModalProps) => { // const [multi, setMulti] = useState(false); const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: ''}]); - const [selectedOptionArray, setSelectedOptionArray] = useState([]); - const [users, setUsers] = useState([]); - const [user, setUser] = useState(); - const [convs, setConvs] = useState([]); + const [selectedOptionArray, setSelectedOptionArray] = useState([]); + const [users, setUsers] = useState([]); + const [user, setUser] = useState(); + const [convs, setConvs] = useState([]); const [channel, setChannel] = useState(''); @@ -52,7 +57,7 @@ const Modal = ({handleClose}) => { getConv(); }, []); - const handleOptionChange = (selectId, selectedOption) => { + const handleOptionChange = (selectId: number, selectedOption: string) => { console.log("selected Option=", selectedOption) setSelectTag((prevTags) => prevTags.map((tag) => @@ -99,11 +104,11 @@ const Modal = ({handleClose}) => { // let new_name; return ( - + e.stopPropagation()} className="modalSetting" - variant={dropIn} + // variant={dropIn} initial="hidden" animate="visible" exit="exit" @@ -120,9 +125,9 @@ const Modal = ({handleClose}) => { - {users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.name)).map((item, index) => ( + {users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.nickname)).map((item, index) => ( ))} @@ -134,7 +139,7 @@ const Modal = ({handleClose}) => {
Submit - Cancel + handleClose}>Cancel
@@ -149,7 +154,7 @@ const Modal = ({handleClose}) => { > {convs.map((conv) => ( - !(!conv.group || conv.private || (conv.banned && conv.banned.includes(user.username)) || (conv.members && conv.members.includes(user.username))) && ( + !(!conv.group || conv.private || (conv.banned && user && conv.banned.includes(user.username)) || (conv.members && user && conv.members.includes(user.username))) && ( @@ -157,9 +162,9 @@ const Modal = ({handleClose}) => { ))} )} - {channel.private ? ( - - ):("")} + {/* {channel.private ? ( + + ):("")} */}
diff --git a/containers/react/src/components/Profile/Win_Loss.tsx b/containers/react/src/components/Profile/Win_Loss.tsx index 99c0a969..15ef1e6b 100644 --- a/containers/react/src/components/Profile/Win_Loss.tsx +++ b/containers/react/src/components/Profile/Win_Loss.tsx @@ -83,7 +83,7 @@ function WinLoss() { // {isLoading ? ( //

Loading...

// ) : ( -//

{user.username}

+//

{user.username}

// )} //
@@ -94,7 +94,7 @@ function WinLoss() { // Loading... ) : (
-

Match history Win/Loss

+

Match history {user.win}/{user.loss}

{history.map((c: Matchlog, index) => { return (
diff --git a/containers/react/src/pages/Home.tsx b/containers/react/src/pages/Home.tsx index aade53a9..15f44bc2 100644 --- a/containers/react/src/pages/Home.tsx +++ b/containers/react/src/pages/Home.tsx @@ -6,7 +6,7 @@ /* By: apommier +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2023/06/09 08:19:04 by apommier #+# #+# */ -/* Updated: 2023/06/23 17:33:51 by apommier ### ########.fr */ +/* Updated: 2023/06/23 22:11:28 by apommier ### ########.fr */ /* */ /* ************************************************************************** */ @@ -181,12 +181,23 @@ function Home () { const closeSword = () => setSuccessSword(false); const closeCrown = () => setSuccessCrown(false); + const { username } = useParams(); useEffect(() => { const fetchSuccess = async () => { try { - const tmpUser = await api.get("/profile"); - setUser(tmpUser.data); + if (!username) + { + const tmpUser = await api.get("/profile"); + setUser(tmpUser.data); + } + else + { + const tmpUser = await api.post("/user", {username: username}); + setUser(tmpUser.data); + } + // const tmpUser = await api.get("/profile"); + // setUser(tmpUser.data); } catch (error) { diff --git a/containers/react/src/pages/canvas.tsx b/containers/react/src/pages/canvas.tsx index 798dcc8d..e316a6ba 100644 --- a/containers/react/src/pages/canvas.tsx +++ b/containers/react/src/pages/canvas.tsx @@ -61,7 +61,7 @@ function DrawCanvas(option: number, gameParam: GameProps) { if(!ctx) return ; - const socket = io('http://localhost:4000', { transports: ['polling'] }); + const socket = io('http://' + process.env.REACT_APP_SOCKET_URL + ':4000', { transports: ['polling'] }); // useEffect(() => { // console.log("useeffect?????????????????") // return () => { @@ -251,12 +251,27 @@ socket.on('pong:point', (data) => { // console.log("up point"); myScore = data.point; // } - vX = 0; + vX = 0.0001; vY = 0; ballX = canvas.width / 2; ballY = canvas.height / 2; }); +socket.on('pong:hisPoint', (data) => { + // hisScore += 1; + console.log("myPointawdawdawdawd point"); + // if (vX != 0) + // { + // console.log("up point"); + hisScore = data.point; + // } + vX = 0.0001; + vY = 0; + ballX = canvas.width / 2; + ballY = canvas.height / 2; + // send_forced_info(); +}); + //======================================================================================================== //======================================================================================================== // Socket EMIT @@ -325,6 +340,25 @@ socket.on('pong:point', (data) => { socket.emit('pong:point', info); } + function send_my_point() + { + if (!gameId || !canvas) + return ; + // console.log("send point"); + const info = { + id: myId, + gameId: gameId, + point: myScore, + } + socket.emit('pong:myPoint', info); + myScore++; + vX = 0.0001; + vY = 0; + ballX = canvas.width / 2; + ballY = canvas.height / 2; + send_forced_info(); + } + function send_paddle_info() { if (!gameId || !canvas) @@ -458,8 +492,11 @@ socket.on('pong:point', (data) => { async function draw(timestamp: number) { console.log("turning, running= ", running); - if (!running) + if (!running) + { + window.location.replace("http://" + process.env.REACT_APP_BASE_URL + "/pong") return ; + } if (!gameId || !canvas ) { // console.log("nogameid score= ", myScore); @@ -593,16 +630,17 @@ async function draw(timestamp: number) } ballX = canvas.width / 2; ballY = canvas.height / 2; - vX = 0; + vX = 0.0001; vY = 0; hisScore += 1; send_point(); // send_forced_info(); } - if (ballX > canvas.width) + if (ballX > (canvas.width * 1.2) && ballX - vX > canvas.width) { + console.log("ball out win point pls") + send_my_point(); // if (ballX > canvas.width * 2) - // socket.emit // console.log("win point") // if (ballY <= paddleY + paddleHeight + ballRadius && ballY >= paddleY - ballRadius) // {