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

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

@ -6,7 +6,7 @@
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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) {

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

@ -6,7 +6,7 @@
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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<User> {
return await this.userRepository.findOneBy({nickname: username});
}
async save(user: User): Promise<User> {
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);
}

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

@ -6,10 +6,12 @@
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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);
}

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_CLIENT_UID=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41
# REACT_APP_BASE_URL=92.143.191.152
# REACT_APP_BASE_URL=192.168.1.19

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

@ -83,7 +83,7 @@ interface MessageProps {
}
function Chats(){
const [isLoading, setIsLoading] = useState<boolean>(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}
/>
/>
<div className="send">
<TbSend onClick={handleSubmit}></TbSend>
</div>

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

@ -6,7 +6,7 @@
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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 (
<div className={own ? "meMessage" : "youMessage"} ref={scrollRef}>
<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 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<string[]>([]);
const [users, setUsers] = useState<User[]>([]);
const [user, setUser] = useState<User>();
const [convs, setConvs] = useState<Conv[]>([]);
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 (
<Backdrop>
<Backdrop onClick={handleClose}>
<motion.div
onClick={(e) => e.stopPropagation()}
className="modalSetting"
variant={dropIn}
// variant={dropIn}
initial="hidden"
animate="visible"
exit="exit"
@ -120,9 +125,9 @@ const Modal = ({handleClose}) => {
<option value="">{
selectTag.selectedOption ? selectTag.selectedOption : "Select an 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}>
{item.username}
{item.nickname}
</option>
))}
</select>
@ -134,7 +139,7 @@ const Modal = ({handleClose}) => {
<div className="div_submit">
<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>
@ -149,7 +154,7 @@ const Modal = ({handleClose}) => {
>
<option value="">Select an option</option>
{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}>
{conv.name}
</option>
@ -157,9 +162,9 @@ const Modal = ({handleClose}) => {
))}
</select>
)}
{channel.private ? (
<input className="mdp" placeholder="password" type="text" />
):("")}
{/* {channel.private ? (
<input className="mdp" placeholder="passdddddword" type="text" />
):("")} */}
<div className="div_submit">

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

@ -83,7 +83,7 @@ function WinLoss() {
// {isLoading ? (
// <h1>Loading...</h1>
// ) : (
// <h1>{user.username}</h1>
// <h1>{user.username}</h1>
// )}
// </div>
@ -94,7 +94,7 @@ function WinLoss() {
// <span>Loading...</span>
) : (
<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) => {
return (
<div key={index} className='elements'>

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

@ -6,7 +6,7 @@
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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)
{

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

@ -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)
// {