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

canvas background page, fix message mute, win loss in profile

Browse Source
This commit is contained in:
Alexandre POMMIER 2023-06-24 00:51:32 +02:00
parent d5e3532bd0
commit 071f30764a
11 changed files with 156 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.env
View File

@ -14,9 +14,10 @@
NGINX_ENVSUBST_TEMPLATE_SUFFIX=".conf" NGINX_ENVSUBST_TEMPLATE_SUFFIX=".conf"
# BASE_URL=http://localhost # BASE_URL=http://localhost
BASE_URL=localhost:8080 # SOCKET_URL=bess-f2r2s16:8080
REACT_APP_BASE_URL=localhost:8080 BASE_URL=bess-f2r2s16:8080
REDIRECT_URI=http://localhost:8080/api/auth/login REACT_APP_BASE_URL=bess-f2r2s16:8080
REDIRECT_URI=http://bess-f2r2s16:8080/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

7
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/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 // let user = req.user
// user.nickname = data.nickname // user.nickname = data.nickname
console.log(`user= ${req.user.username}`) 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) let user = await this.userService.findOne(req.user.username)
user.nickname = data.nickname; user.nickname = data.nickname;
// return await this.userService.getFriends(req.user.username); // return await this.userService.getFriends(req.user.username);
@ -480,8 +483,6 @@ export class AppController {
// res.json(messages); // res.json(messages);
} }
@UseGuards(JwtAuthGuard) @UseGuards(JwtAuthGuard)
@Get('/conv') @Get('/conv')
async getConv(@Request() req) { async getConv(@Request() req) {

11
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/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}); return await this.userRepository.findOneBy({username: username});
} }
async findNickname(username: string): Promise<User> {
return await this.userRepository.findOneBy({nickname: username});
}
async save(user: User): Promise<User> { async save(user: User): Promise<User> {
return await this.userRepository.save(user); return await this.userRepository.save(user);
} }
@ -105,7 +109,8 @@ export class UsersService {
} }
async addFriend(user: User, username: string) { async addFriend(user: User, username: string) {
if (!(await this.findOne(username))) const user2 = await this.findOne(username)
if (!user)
return (0); return (0);
// user.friendRequest = user.friendRequest || []; // user.friendRequest = user.friendRequest || [];
user.friends = user.friends || []; user.friends = user.friends || [];
@ -117,6 +122,8 @@ export class UsersService {
} }
user.friends.push(username); user.friends.push(username);
user.friendRequest = user.friendRequest.filter((item) => item !== username); user.friendRequest = user.friendRequest.filter((item) => item !== username);
user2.friends.push(user.username);
this.save(user2);
this.save(user); this.save(user);
return (1); return (1);
} }

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

@ -6,10 +6,12 @@
/* 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/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 { SubscribeMessage, WebSocketGateway, OnGatewayInit, WebSocketServer, OnGatewayConnection, OnGatewayDisconnect } from '@nestjs/websockets';
import { Server, Socket } from 'socket.io'; import { Server, Socket } from 'socket.io';
import { v4 as uuidv4 } from 'uuid'; 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') @SubscribeMessage('pong:name')
getName(client: Socket, payload: any): void getName(client: Socket, payload: any): void
{ {

4
containers/react/.env
View File

@ -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_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
# REACT_APP_BASE_URL=192.168.1.19 # REACT_APP_BASE_URL=192.168.1.19

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

@ -119,7 +119,7 @@ function Chats(){
setUsers(tmpUsers.data); setUsers(tmpUsers.data);
// console.log(`connection....`); // 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`); // 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 ?)
@ -205,11 +205,12 @@ function Chats(){
getMessage(); getMessage();
}, [currentChat]); }, [currentChat]);
const handleSubmit = async (e: { preventDefault: () => void; })=>{ const handleSubmit = async (e: { key?: any; preventDefault: any; })=>{
e.preventDefault(); e.preventDefault();
// console.log(`e= ${e.key}`) // console.log(`e= ${e.key}`)
// console.log(`name= ${user.username}`) // console.log(`name= ${user.username}`)
// let message; // let message;
console.log("in handle");
if (!user || !currentChat) if (!user || !currentChat)
return ; return ;
const message = { 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}`) // console.log(`e in press= ${e.key}`)
if (e.key !== "Enter") if (e.key !== "Enter")
return ; return ;
// console.log(`name= ${user.username}`) handleSubmit(e);
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)
}
} }
@ -323,6 +302,7 @@ function Chats(){
const handleAddFriend = async () => { const handleAddFriend = async () => {
try{ try{
console.log("friend= ", friend);
const res = await api.post("/invite", {username: friend}) const res = await api.post("/invite", {username: friend})
// if (res.data === 1) // if (res.data === 1)
// console.log("res in friend= ", res) // console.log("res in friend= ", res)
@ -371,6 +351,7 @@ function Chats(){
const handleOptionChange = (selectId: number, selectedOption: string) => { const handleOptionChange = (selectId: number, selectedOption: string) => {
console.log("selected Option=", selectedOption) console.log("selected Option=", selectedOption)
setFriend(selectedOption);
setSelectTag((prevTags) => setSelectTag((prevTags) =>
prevTags.map((tag) => prevTags.map((tag) =>
tag.id === selectId ? { ...tag, selectedOption } : tag tag.id === selectId ? { ...tag, selectedOption } : tag

26
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/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(() => { useEffect(() => {
const fetchProfilePicture = async () => { const fetchProfilePicture = async () => {
try { try {
console.log("useEffect message")
// const user = await api.get("/profile"); // const user = await api.get("/profile");
const tmpSender = await api.post("/user", {username: message.sender}) const tmpSender = await api.post("/user", {username: message.sender})
const tmpConv = await api.post("/convId", {convId: message.convId}) const tmpConv = await api.post("/convId", {convId: message.convId})
@ -81,16 +82,37 @@ function MessageMe({message, own}: MessageMeProps){
window.location.reload(); window.location.reload();
}; };
// const isAllowed = async () => {
// const ret = await api.post("/allowed", {convId: message.convId});
// return ret.data;
// }
if (!user || !sender || !conv) if (!user || !sender || !conv)
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))
// 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)) 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 (<></>); return (<></>);
else if (conv.muted && conv.muted.includes(user.username))
{
// console.log("muted00")
return (<></>);
}
// if (user.blocked.includes(message.sender))/ // if (user.blocked.includes(message.sender))/
console.log("no return message good");
return ( return (
<div className={own ? "meMessage" : "youMessage"} ref={scrollRef}> <div className={own ? "meMessage" : "youMessage"} ref={scrollRef}>
<div> <div>

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

@ -7,6 +7,7 @@ import { GrAdd } from "react-icons/gr";
import { Link } from "react-router-dom"; 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, Conv} from "../../../interfaces.tsx"
const dropIn = { const dropIn = {
hidden:{y:"-100vh", hidden:{y:"-100vh",
@ -23,13 +24,17 @@ const dropIn = {
opacity: 0,}, opacity: 0,},
}; };
const Modal = ({handleClose}) => { interface ModalProps {
handleClose: Function,
}
const Modal = ({handleClose}: ModalProps) => {
// const [multi, setMulti] = useState(false); // const [multi, setMulti] = useState(false);
const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: ''}]); const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: ''}]);
const [selectedOptionArray, setSelectedOptionArray] = useState([]); const [selectedOptionArray, setSelectedOptionArray] = useState<string[]>([]);
const [users, setUsers] = useState([]); const [users, setUsers] = useState<User[]>([]);
const [user, setUser] = useState(); const [user, setUser] = useState<User>();
const [convs, setConvs] = useState([]); const [convs, setConvs] = useState<Conv[]>([]);
const [channel, setChannel] = useState(''); const [channel, setChannel] = useState('');
@ -52,7 +57,7 @@ const Modal = ({handleClose}) => {
getConv(); getConv();
}, []); }, []);
const handleOptionChange = (selectId, selectedOption) => { const handleOptionChange = (selectId: number, selectedOption: string) => {
console.log("selected Option=", selectedOption) console.log("selected Option=", selectedOption)
setSelectTag((prevTags) => setSelectTag((prevTags) =>
prevTags.map((tag) => prevTags.map((tag) =>
@ -99,11 +104,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="modalSetting" className="modalSetting"
variant={dropIn} // variant={dropIn}
initial="hidden" initial="hidden"
animate="visible" animate="visible"
exit="exit" exit="exit"
@ -120,9 +125,9 @@ const Modal = ({handleClose}) => {
<option value="">{ <option value="">{
selectTag.selectedOption ? selectTag.selectedOption : "Select an option" selectTag.selectedOption ? selectTag.selectedOption : "Select an option"
}</option> }</option>
{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) => (
<option key={index} value={item.username}> <option key={index} value={item.username}>
{item.username} {item.nickname}
</option> </option>
))} ))}
</select> </select>
@ -134,7 +139,7 @@ const Modal = ({handleClose}) => {
<div className="div_submit"> <div className="div_submit">
<Link to='#' className="submit" onClick={ saveSelectedOptions}>Submit</Link> <Link to='#' className="submit" onClick={ saveSelectedOptions}>Submit</Link>
<Link to="#" className="submit" onClick={handleClose}>Cancel</Link> <Link to="#" className="submit" onClick={() => handleClose}>Cancel</Link>
</div> </div>
</div> </div>
@ -149,7 +154,7 @@ const Modal = ({handleClose}) => {
> >
<option value="">Select an option</option> <option value="">Select an option</option>
{convs.map((conv) => ( {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))) && (
<option key={conv.id} value={conv.id}> <option key={conv.id} value={conv.id}>
{conv.name} {conv.name}
</option> </option>
@ -157,9 +162,9 @@ const Modal = ({handleClose}) => {
))} ))}
</select> </select>
)} )}
{channel.private ? ( {/* {channel.private ? (
<input className="mdp" placeholder="password" type="text" /> <input className="mdp" placeholder="passdddddword" type="text" />
):("")} ):("")} */}
<div className="div_submit"> <div className="div_submit">

2
containers/react/src/components/Profile/Win_Loss.tsx
View File

@ -94,7 +94,7 @@ function WinLoss() {
// <span>Loading...</span> // <span>Loading...</span>
) : ( ) : (
<div className='scroll'> <div className='scroll'>
<h2 className='title'>Match history Win/Loss</h2> <h2 className='title'>Match history {user.win}/{user.loss}</h2>
{history.map((c: Matchlog, index) => { {history.map((c: Matchlog, index) => {
return ( return (
<div key={index} className='elements'> <div key={index} className='elements'>

13
containers/react/src/pages/Home.tsx
View File

@ -6,7 +6,7 @@
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */ /* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2023/06/09 08:19:04 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,13 +181,24 @@ function Home () {
const closeSword = () => setSuccessSword(false); const closeSword = () => setSuccessSword(false);
const closeCrown = () => setSuccessCrown(false); const closeCrown = () => setSuccessCrown(false);
const { username } = useParams();
useEffect(() => { useEffect(() => {
const fetchSuccess = async () => { const fetchSuccess = async () => {
try { try {
if (!username)
{
const tmpUser = await api.get("/profile"); const tmpUser = await api.get("/profile");
setUser(tmpUser.data); 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) catch (error)
{ {
console.log(error); console.log(error);

48
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://localhost:4000', { transports: ['polling'] }); const socket = io('http://' + process.env.REACT_APP_SOCKET_URL + ':4000', { transports: ['polling'] });
// useEffect(() => { // useEffect(() => {
// console.log("useeffect?????????????????") // console.log("useeffect?????????????????")
// return () => { // return () => {
@ -251,12 +251,27 @@ socket.on('pong:point', (data) => {
// console.log("up point"); // console.log("up point");
myScore = data.point; myScore = data.point;
// } // }
vX = 0; vX = 0.0001;
vY = 0; vY = 0;
ballX = canvas.width / 2; ballX = canvas.width / 2;
ballY = canvas.height / 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 // Socket EMIT
@ -325,6 +340,25 @@ socket.on('pong:point', (data) => {
socket.emit('pong:point', info); 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() function send_paddle_info()
{ {
if (!gameId || !canvas) if (!gameId || !canvas)
@ -459,7 +493,10 @@ async function draw(timestamp: number)
{ {
console.log("turning, running= ", running); console.log("turning, running= ", running);
if (!running) if (!running)
{
window.location.replace("http://" + process.env.REACT_APP_BASE_URL + "/pong")
return ; return ;
}
if (!gameId || !canvas ) if (!gameId || !canvas )
{ {
// console.log("nogameid score= ", myScore); // console.log("nogameid score= ", myScore);
@ -593,16 +630,17 @@ async function draw(timestamp: number)
} }
ballX = canvas.width / 2; ballX = canvas.width / 2;
ballY = canvas.height / 2; ballY = canvas.height / 2;
vX = 0; vX = 0.0001;
vY = 0; vY = 0;
hisScore += 1; hisScore += 1;
send_point(); send_point();
// send_forced_info(); // 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) // if (ballX > canvas.width * 2)
// socket.emit
// console.log("win point") // console.log("win point")
// if (ballY <= paddleY + paddleHeight + ballRadius && ballY >= paddleY - ballRadius) // if (ballY <= paddleY + paddleHeight + ballRadius && ballY >= paddleY - ballRadius)
// { // {