From 471f3dde0b4b72a29cd0118ec841fead7779c4a0 Mon Sep 17 00:00:00 2001 From: ismail Date: Tue, 14 Nov 2023 15:18:10 +0100 Subject: [PATCH] FIX:GAME --- backend/code/src/game/game.ts | 409 +++++++++++------- backend/code/src/gateways/gateways.gateway.ts | 52 ++- backend/code/src/profile/profile.service.ts | 8 +- frontend/code/src/Components/Game/index.tsx | 30 +- .../src/Components/Layout/Assets/Modal.tsx | 5 +- frontend/code/src/Components/Play/index.tsx | 2 +- .../src/Components/Profile/assets/Table.tsx | 1 + 7 files changed, 314 insertions(+), 193 deletions(-) diff --git a/backend/code/src/game/game.ts b/backend/code/src/game/game.ts index f1c65c0..382a33f 100644 --- a/backend/code/src/game/game.ts +++ b/backend/code/src/game/game.ts @@ -2,189 +2,245 @@ import { EventEmitter2 } from '@nestjs/event-emitter'; import { Server, Socket } from 'socket.io'; export class Game { - - constructor(private readonly eventEmitter: EventEmitter2 , private readonly server: Server) {} - - private screenAdapter(player,x:number , y:number , ballsize:number){ - let scale_x = player.w / this.w; - let scale_y = player.h / this.h; - - let new_x = x * scale_x; - let new_y = y * scale_y; - - let new_ball_size = ballsize * Math.min(scale_x, scale_y) - return {x:new_x, y:new_y, ballsize:new_ball_size,p1Score:this.p1Score,p2Score:this.p2Score} + constructor( + private readonly eventEmitter: EventEmitter2, + private readonly server: Server, + ) {} + + private screenAdapter(player, x: number, y: number, ballsize: number) { + const scale_x = player.w / this.w; + const scale_y = player.h / this.h; + + const new_x = x * scale_x; + const new_y = y * scale_y; + + const new_ball_size = ballsize * Math.min(scale_x, scale_y); + return { + x: new_x, + y: new_y, + ballsize: new_ball_size, + p1Score: this.p1Score, + p2Score: this.p2Score, + }; } - private paddleAdapterP1toP2(player1, player2, p1PaddleY:number , p2PaddleY:number, side:boolean){ - let scale = this.h / player1.h; - - this.p1PaddleY = (p1PaddleY * scale) ; + private paddleAdapterP1toP2( + player1, + player2, + p1PaddleY: number, + p2PaddleY: number, + side: boolean, + ) { + const scale = this.h / player1.h; + if ( + p1PaddleY * scale - this.paddleHeight / 6 > 0 && + p1PaddleY * scale + this.paddleHeight < this.h + ) { + this.p1PaddleY = p1PaddleY * scale; + } - let scale2 = player2.h / this.h ; + const scale2 = player2.h / this.h; - let newPos = this.p1PaddleY * scale2; - let scale_y = player2.h / this.h; + const newPos = this.p1PaddleY * scale2; + // let scale_y = player2.h / this.h; // let center = this.paddleHeight * scale_y; - return {p1PaddleY:newPos,p2PaddleY:p2PaddleY,side:side}; + if (p2PaddleY - player2.h / 6 / 6 < 0) { + p2PaddleY = 0; + } else if (p2PaddleY + player2.h / 6 > player2.h) { + p2PaddleY = player2.h - player2.h / 6; + } + return { p1PaddleY: newPos, p2PaddleY: p2PaddleY, side: side }; } - private paddleAdapterP2toP1(player1, player2, p1PaddleY:number , p2PaddleY:number, side:boolean){ - let scale = this.h / player2.h; - - this.p2PaddleY = (p2PaddleY * scale) ; + private paddleAdapterP2toP1( + player1, + player2, + p1PaddleY: number, + p2PaddleY: number, + side: boolean, + ) { + const scale = this.h / player2.h; + if ( + p2PaddleY * scale - this.paddleHeight / 6 >= 0 && + p2PaddleY * scale + this.paddleHeight <= this.h + ) + this.p2PaddleY = p2PaddleY * scale; - let scale2 = player1.h / this.h ; + const scale2 = player1.h / this.h; - let newPos = this.p2PaddleY * scale2; - let scale_y = player1.h / this.h; + const newPos = this.p2PaddleY * scale2; + // let scale_y = player1.h / this.h; // let center = this.paddleHeight * scale_y; - return {p1PaddleY:p1PaddleY,p2PaddleY:newPos,side:side}; - + if (p1PaddleY - player1.h / 6 / 6 < 0) { + p1PaddleY = 0; + } else if (p1PaddleY + player1.h / 6 > player1.h) { + p1PaddleY = player1.h - player1.h / 6; + } + return { p1PaddleY: p1PaddleY, p2PaddleY: newPos, side: side }; } - private up1(){ - if (this.p1PaddleY - this.paddleHeight / 6 >= 0) - { - this.eventp1Paddle -= this.paddleHeight / 6 - + private up1() { + this.eventp1Paddle -= this.p1Res.h / 6 / 6; + if (this.eventp1Paddle - this.p1Res.h / 6 / 6 < 0) { + this.eventp1Paddle = 0; } } - private down1(){ - if (this.p1PaddleY + this.paddleHeight <= this.h) - { - this.eventp1Paddle += this.paddleHeight / 6 - - + private down1() { + this.eventp1Paddle += this.p1Res.h / 6 / 6; + if (this.eventp1Paddle + this.p1Res.h / 6 > this.p1Res.h) { + this.eventp1Paddle = this.p1Res.h - this.p1Res.h / 6; } } - private up2(){ - if (this.p2PaddleY - this.paddleHeight / 6 >= 0) - { - this.eventp2Paddle -= this.paddleHeight / 6 + private up2() { + this.eventp2Paddle -= this.p2Res.h / 6 / 6; + if (this.eventp2Paddle - this.p2Res.h / 6 / 6 < 0) { + this.eventp2Paddle = 0; } - } - private down2(){ - if (this.p2PaddleY+ this.paddleHeight <= this.h) - { - this.eventp2Paddle += this.paddleHeight / 6 - + private down2() { + this.eventp2Paddle -= this.p2Res.h / 6 / 6; + if (this.eventp2Paddle - this.p2Res.h / 6 / 6 < 0) { + this.eventp2Paddle = 0; } } - private async loop() { - if (this.closeGame) - return ; + if (this.closeGame) return; console.log('loop'); - if (this.x + (this.ballSize / 2) + this.dx >= this.w || this.x + this.dx <= 0) + if (this.x + this.ballSize / 2 + this.dx >= this.w || this.x + this.dx <= 0) this.dx *= -1; - if (this.y + (this.ballSize / 2) + this.dy >= this.h || this.y + this.dy <= 0) + if (this.y + this.ballSize / 2 + this.dy >= this.h || this.y + this.dy <= 0) this.dy *= -1; if ( - (this.y >= this.p1PaddleY && this.y <= this.p1PaddleY + this.paddleHeight - && (this.x + (this.ballSize )) <= this.paddleWidth + 40) - ) - { - + this.y > this.p1PaddleY && + this.y < this.p1PaddleY + this.paddleHeight && + this.x - this.ballSize / 2 < this.paddleWidth + 10 + ) { this.dx *= -1; - this.dy *= Math.random() * 2.5 - + this.dy *= Math.random() * (1.5 - 2.5) + 1.5; } if ( - (this.y >= this.p2PaddleY && this.y <= this.p2PaddleY + this.paddleHeight - && (this.x + (this.ballSize )) >= ( this.w - (this.paddleWidth + 20)) ) - ){ + this.y > this.p2PaddleY && + this.y < this.p2PaddleY + this.paddleHeight && + this.x + this.ballSize / 2 > this.w - (this.paddleWidth + 10) + ) { this.dx *= -1; - this.dy *= Math.random() * 2.5 + this.dy *= Math.random() * (1.5 - 2.5) + 1.5; } if ( - ((this.y < this.p2PaddleY || this.y > this.p2PaddleY + this.paddleHeight) - && (this.x + (this.ballSize )) >= ( this.w - (this.paddleWidth + 5)) ) - ){ + (this.y < this.p2PaddleY || + this.y > this.p2PaddleY + this.paddleHeight) && + this.x + this.ballSize >= this.w - (this.paddleWidth + 10) + ) { this.p1Score += 1; - this.init() + this.init(); this.checkForWinner(); - await new Promise(resolve => setTimeout(resolve, 1000)); + await new Promise((resolve) => setTimeout(resolve, 1000)); } if ( - ((this.y < this.p1PaddleY || this.y > this.p1PaddleY + this.paddleHeight) - && (this.x ) <= this.paddleWidth + 5) - ) - { - this.p2Score += 1; - this.init(); - this.checkForWinner(); - await new Promise(resolve => setTimeout(resolve, 1000)); - } - - console.log(this.x) - console.log(this.y) + (this.y < this.p1PaddleY || + this.y > this.p1PaddleY + this.paddleHeight) && + this.x <= this.paddleWidth + 10 + ) { + this.p2Score += 1; + this.init(); + this.checkForWinner(); + await new Promise((resolve) => setTimeout(resolve, 1000)); + } + + console.log(this.x); + console.log(this.y); this.x += this.dx; this.y += this.dy; - console.log(this.p1Res) - console.log(this.p2Res) - if (parseFloat((this.p1Res.w / this.p1Res.h).toFixed(1)) !== 1.8 && parseFloat((this.p2Res.w / this.p2Res.h).toFixed(1)) !== 1.9){ - this.p1socket.emit("screen Error") - this.emitGameEnd("end") - this.p1socket.emit("lose","trying cheat"); - this.p2socket.emit("win","you win other player try to cheat"); - }else{ - this.p1socket.emit("ball",this.screenAdapter(this.p1Res,this.x,this.y,this.ballSize)) - this.p2socket.emit("paddle",this.paddleAdapterP1toP2(this.p1Res, this.p2Res ,this.eventp1Paddle,this.eventp2Paddle,true)) + if ( + parseFloat((this.p1Res.w / this.p1Res.h).toFixed(1)) !== 1.8 && + parseFloat((this.p2Res.w / this.p2Res.h).toFixed(1)) !== 1.9 + ) { + this.p1socket.emit('screen Error'); + this.emitGameEnd('p1Leave'); + this.p1socket.emit('lose', 'trying cheat'); + this.p2socket.emit('win', 'you win other player try to cheat'); + } else { + this.p1socket.emit( + 'ball', + this.screenAdapter(this.p1Res, this.x, this.y, this.ballSize), + ); + this.p2socket.emit( + 'paddle', + this.paddleAdapterP1toP2( + this.p1Res, + this.p2Res, + this.eventp1Paddle, + this.eventp2Paddle, + true, + ), + ); } - - if (parseFloat((this.p2Res.w / this.p2Res.h).toFixed(1)) !== 1.8 && parseFloat((this.p2Res.w / this.p2Res.h).toFixed(1)) !== 1.9){ - this.p1socket.emit("screen Error") - this.emitGameEnd("end") - this.p1socket.emit("win","you win other player try to cheat"); - this.p2socket.emit("lose","trying cheat"); - }else{ - this.p2socket.emit("ball",this.screenAdapter(this.p2Res,this.x,this.y,this.ballSize)) - this.p1socket.emit("paddle",this.paddleAdapterP2toP1(this.p1Res, this.p2Res ,this.eventp1Paddle,this.eventp2Paddle,true)) + if ( + parseFloat((this.p2Res.w / this.p2Res.h).toFixed(1)) !== 1.8 && + parseFloat((this.p2Res.w / this.p2Res.h).toFixed(1)) !== 1.9 + ) { + this.p1socket.emit('screen Error'); + this.emitGameEnd('p2Leave'); + this.p1socket.emit('win', 'you win other player try to cheat'); + this.p2socket.emit('lose', 'trying cheat'); + } else { + this.p2socket.emit( + 'ball', + this.screenAdapter(this.p2Res, this.x, this.y, this.ballSize), + ); + this.p1socket.emit( + 'paddle', + this.paddleAdapterP2toP1( + this.p1Res, + this.p2Res, + this.eventp1Paddle, + this.eventp2Paddle, + true, + ), + ); } - - - await this.sleep(20); + await this.sleep(25); this.loop(); } - - - private async sleepCounter(){ + private async sleepCounter() { let timer = 5000; for (let i = 0; i < 6; i++) { - await new Promise(resolve => setTimeout(resolve, 1000)); - this.server.emit("timer", timer); + await new Promise((resolve) => setTimeout(resolve, 1000)); + this.server.to(this.gameid).emit('timer', timer); timer -= 1000; } } async start(ngameid: string) { console.log('game started', ngameid); this.gameid = ngameid; - await this.sleepCounter() + await this.sleepCounter(); // await this.setplayerScokets(this.p1socket, this.p2socket ,) this.loop(); } - - setplayerScokets(p1socket: Socket, p2socket: Socket , p1Data:any, p2Data:any) { + setplayerScokets( + p1socket: Socket, + p2socket: Socket, + p1Data: any, + p2Data: any, + ) { this.p1socket = p1socket; this.p2socket = p2socket; this.p1Data = p1Data; this.p2Data = p2Data; console.log(p1Data); console.log(p2Data); - this.server.emit("players",[p1Data,p2Data]) - console.log("newfunc") + this.server.emit('players', [p1Data, p2Data]); + console.log('newfunc'); this.p1socket.on('up', () => { this.up1(); }); @@ -197,10 +253,18 @@ export class Game { this.p2socket.on('down', () => { this.down2(); }); - this.p1socket.on("mouse", (data) => {this.eventp1Paddle = data}); - this.p2socket.on("mouse", (data) => {this.eventp2Paddle = data}); - this.p1socket.on("screen", (data) =>{this.p1Res = data}) - this.p2socket.on("screen", (data) =>{this.p2Res = data}) + this.p1socket.on('mouse', (data) => { + this.eventp1Paddle = data; + }); + this.p2socket.on('mouse', (data) => { + this.eventp2Paddle = data; + }); + this.p1socket.on('screen', (data) => { + this.p1Res = data; + }); + this.p2socket.on('screen', (data) => { + this.p2Res = data; + }); this.p1socket.on('disconnect', () => { console.log('p1 disconnected'); this.emitGameEnd('p1 disconnected'); @@ -209,44 +273,63 @@ export class Game { console.log('p2 disconnected'); this.emitGameEnd('p2 disconnected'); }); - this.p1socket.on("leave", () => {this.emitGameEnd("end"); - this.p2socket.emit("win","you win other player leave the game"); - this.p1socket.emit("lose","you win other player leave the game"); - this.emitGameEnd('leave'); - }) - this.p2socket.on("leave", () => {this.emitGameEnd("end"); - this.p1socket.emit("win","you win other player leave the game"); - this.p2socket.emit("lose","you lost other player leave the game"); - this.emitGameEnd('leave'); - }) - + this.p1socket.on('leave', () => { + this.emitGameEnd('p1Leave'); + this.p2socket.emit('win', 'you win other player leave the game'); + this.p1socket.emit('lose', 'you win other player leave the game'); + }); + this.p2socket.on('leave', () => { + this.emitGameEnd('p2Leave'); + this.p1socket.emit('win', 'you win other player leave the game'); + this.p2socket.emit('lose', 'you lost other player leave the game'); + }); } - private checkForWinner(){ - if (this.p1Score >= 5) - { - this.p1socket.emit("win","you win"); - this.p2socket.emit("lose","you lose"); - this.emitGameEnd("end") + private checkForWinner() { + if (this.p1Score >= 5) { + this.p1socket.emit('win', 'you win'); + this.p2socket.emit('lose', 'you lose'); + this.emitGameEnd('end'); } - if (this.p2Score >= 5) - { - this.p2socket.emit("win","you win"); - this.p1socket.emit("lose","you lose"); - this.emitGameEnd("end") + if (this.p2Score >= 5) { + this.p2socket.emit('win', 'you win'); + this.p1socket.emit('lose', 'you lose'); + this.emitGameEnd('end'); } - } private emitGameEnd(message: string) { console.log('game end'); - this.eventEmitter.emit('game.end', { - message: message, - gameid: this.gameid, - p1Data: this.p1Data, - p2Data: this.p2Data, - p1Score: this.p1Score, - p2Score: this.p2Score, - }); this.closeGame = true; + if (message === 'p1Leave') { + this.eventEmitter.emit('game.end', { + resign: 1, + message: message, + gameid: this.gameid, + p1Data: this.p1Data, + p2Data: this.p2Data, + p1Score: this.p1Score, + p2Score: this.p2Score, + }); + } else if (message === 'p2Leave') { + this.eventEmitter.emit('game.end', { + resign: 2, + message: message, + gameid: this.gameid, + p1Data: this.p1Data, + p2Data: this.p2Data, + p1Score: this.p1Score, + p2Score: this.p2Score, + }); + } else { + this.eventEmitter.emit('game.end', { + resign: 0, + message: message, + gameid: this.gameid, + p1Data: this.p1Data, + p2Data: this.p2Data, + p1Score: this.p1Score, + p2Score: this.p2Score, + }); + } } private sleep(ms: number) { @@ -255,14 +338,14 @@ export class Game { }); } - private init(){ - this.x = this.w / 2; - this.y = this.h / 2; - this.ballSize = this.w / 42; - this.dx = this.w / 200; - this.dy = this.w / 200; - this.p1PaddleY = this.h / 2; - this.p2PaddleY = this.h / 2; + private init() { + this.x = this.w / 2; + this.y = this.h / 2; + this.ballSize = this.w / 42; + this.dx = Math.random() > 0.5 ? this.w / 200 : (this.w / 200) * -1; + this.dy = Math.random() > 0.5 ? this.w / 200 : (this.w / 200) * -1; + this.p1PaddleY = this.h / 2; + this.p2PaddleY = this.h / 2; } private gameid: string; private p1socket: Socket; @@ -274,8 +357,8 @@ export class Game { private x: number = this.w / 2; private y: number = this.h / 2; private ballSize: number = this.w / 42; - private dx: number = this.w / 200; - private dy: number = this.w / 200; + private dx: number = Math.random() > 0.5 ? this.w / 200 : (this.w / 200) * -1; + private dy: number = Math.random() > 0.5 ? this.w / 200 : (this.w / 200) * -1; private p1PaddleY: number = this.h / 2; private p2PaddleY: number = this.h / 2; private eventp1Paddle: number = 0; @@ -283,8 +366,8 @@ export class Game { private paddleHeight: number = this.h / 6; private paddleWidth: number = this.w / 70; private p1Score: number = 0; - private p2Score: number = 0; - private p1Res = {h:0,w:0}; - private p2Res = {h:0,w:0}; + private p2Score: number = 0; + private p1Res = { h: 0, w: 0 }; + private p2Res = { h: 0, w: 0 }; private closeGame = false; } diff --git a/backend/code/src/gateways/gateways.gateway.ts b/backend/code/src/gateways/gateways.gateway.ts index 1b25dbb..8ca9e3c 100644 --- a/backend/code/src/gateways/gateways.gateway.ts +++ b/backend/code/src/gateways/gateways.gateway.ts @@ -12,7 +12,7 @@ import {} from '@nestjs/platform-socket.io'; import { EventEmitter2, OnEvent } from '@nestjs/event-emitter'; import { PrismaService } from 'src/prisma/prisma.service'; import { Game } from 'src/game/game'; -import { $Enums, Notification , Match } from '@prisma/client'; +import { $Enums, Notification } from '@prisma/client'; @WebSocketGateway(3004, { cors: { @@ -211,7 +211,7 @@ export class Gateways implements OnGatewayConnection, OnGatewayDisconnect { // } @OnEvent('game.launched') async handleGameLaunchedEvent(clients: any) { - const game_channel = `Game:${clients[0].socket.id}:${clients[1].socket.id}`; + const game_channel = `Game:${clients[0].socket.id}:${clients[1].socket.id}`; console.log(game_channel); clients.forEach((client: any) => { client.socket.join(game_channel); @@ -234,18 +234,42 @@ export class Gateways implements OnGatewayConnection, OnGatewayDisconnect { console.log('game ended'); console.log(data); this.server.to(data.gameid).emit('game.end', data); - console.log(data) - - await this.prisma.match.create({ - data: { - participant1Id: data.p1Data.userId, - participant2Id: data.p2Data.userId, - winner_id: data.p1Score > data.p2Score ? data.p1Data.userId : data.p2Data.userId , - score1: data.p1Score, - score2: data.p2Score, - }, - }); - + console.log(data); + if (data.resign === 0) { + await this.prisma.match.create({ + data: { + participant1Id: data.p1Data.userId, + participant2Id: data.p2Data.userId, + winner_id: + data.p1Score > data.p2Score + ? data.p1Data.userId + : data.p2Data.userId, + score1: data.p1Score, + score2: data.p2Score, + }, + }); + } else if (data.resign === 1) { + await this.prisma.match.create({ + data: { + participant1Id: data.p1Data.userId, + participant2Id: data.p2Data.userId, + winner_id: data.p2Data.userId, + score1: 0, + score2: 5, + }, + }); + } else if (data.resign === 2) { + await this.prisma.match.create({ + data: { + participant1Id: data.p1Data.userId, + participant2Id: data.p2Data.userId, + winner_id: data.p1Data.userId, + score1: 5, + score2: 0, + }, + }); + } + this.games_map.delete(data.gameid); } diff --git a/backend/code/src/profile/profile.service.ts b/backend/code/src/profile/profile.service.ts index d97f361..716332d 100644 --- a/backend/code/src/profile/profile.service.ts +++ b/backend/code/src/profile/profile.service.ts @@ -28,8 +28,8 @@ export class ProfileService { wonMatches === 0 ? null : wonMatches >= 100 - ? 2 - : Math.floor(Math.log10(wonMatches)); + ? 2 + : Math.floor(Math.log10(wonMatches)); return new ProfileDto({ ...user, achievement }, false); } @@ -58,8 +58,8 @@ export class ProfileService { wonMatches === 0 ? null : wonMatches >= 100 - ? 2 - : Math.floor(Math.log10(wonMatches)); + ? 2 + : Math.floor(Math.log10(wonMatches)); return new ProfileDto({ ...user, achievement }, true); } diff --git a/frontend/code/src/Components/Game/index.tsx b/frontend/code/src/Components/Game/index.tsx index cd8fc9d..672e7dc 100644 --- a/frontend/code/src/Components/Game/index.tsx +++ b/frontend/code/src/Components/Game/index.tsx @@ -1,7 +1,6 @@ -import { useCallback, useEffect , useState} from "react" +import { useCallback, useEffect } from "react" import { Rect, Stage , Layer , Circle, Line} from "react-konva" import { BsFillArrowRightCircleFill, BsFillArrowLeftCircleFill} from "react-icons/bs"; -import { useUserStore } from "../../Stores/stores"; import { useGameState } from "./States/GameState"; import { useSocketStore } from "../Chat/Services/SocketsServices"; import { useNavigate } from "react-router-dom"; @@ -42,15 +41,18 @@ export const Game = () => { const navigate = useNavigate() const leave = useCallback(() => { socketStore.socket.emit("leave") + // eslint-disable-next-line },[]) const handleMove = throttlify((e :any) => { socketStore.socket.emit("mouse",e.evt.layerY); }) const ArrowUp = () => { socketStore.socket.emit("up"); + socketStore.socket.off("up"); } const ArrowDown = () => { socketStore.socket.emit("down") + socketStore.socket.off("down"); } useEffect(() => { document.addEventListener('keydown', (event) =>{ @@ -61,12 +63,11 @@ export const Game = () => { }) socketStore.socket.on("ball", (cord:Cords) => { gameState.setBall({x:cord.x,y:cord.y,size:cord.ballsize,p1Score:cord.p1Score,p2Score:cord.p2Score}) - console.log(gameState.ball) }) socketStore.socket.on("paddle", (paddles:any) => { gameState.setLPaddle(paddles.p1PaddleY); gameState.setRPaddle(paddles.p2PaddleY); - if (gameState?.side != paddles.side) + if (gameState?.side !== paddles.side) gameState.setSide(paddles.side); }) socketStore.socket.on("screen Error", () =>{ @@ -79,11 +80,19 @@ export const Game = () => { }) return () => { socketStore.socket.off("ball"); - socketStore.socket.off("mouse") + socketStore.socket.off("mouse"); + socketStore.socket.off("down"); + socketStore.socket.off("up"); + socketStore.socket.off("leave") + window.removeEventListener("keydown",()=>{}); + } + // eslint-disable-next-line },[]) /* eslint-disable */ useEffect(() => { + if (!gameState.p1) + navigate("/home") const divh = document.getElementById('Game')?.offsetHeight const divw = document.getElementById('Game')?.offsetWidth socketStore.socket.emit("screen",{h:divh,w:divw}) @@ -102,7 +111,10 @@ export const Game = () => { return () => { socketStore.socket.off("screen"); + window.removeEventListener("resize",()=>{}); + } + // disable eslit next line },[]) @@ -123,24 +135,24 @@ export const Game = () => {
- + {gameState.ball.p1Score}
{gameState?.ball.p2Score} - +
- + - + diff --git a/frontend/code/src/Components/Layout/Assets/Modal.tsx b/frontend/code/src/Components/Layout/Assets/Modal.tsx index 8e45606..3882c45 100644 --- a/frontend/code/src/Components/Layout/Assets/Modal.tsx +++ b/frontend/code/src/Components/Layout/Assets/Modal.tsx @@ -8,7 +8,6 @@ export const Modal = () => { const [resOpacity , setResOpacity] = useState(""); const [result , setResutl] = useState(undefined); const [status , setStatus] = useState(undefined); - var gameId:string; const [timer , setTimer] = useState(undefined); const [gameid , setGameId] = useState(undefined); const socketStore = useSocketStore(); @@ -69,8 +68,10 @@ export const Modal = () => { socketStore.socket.off("lose") socketStore.socket.off("win") socketStore.socket.off("timer") + socketStore.socket.off("game.launched") + socketStore.socket.off("players") } - +// eslint-disable-next-line },[timer]) return ( diff --git a/frontend/code/src/Components/Play/index.tsx b/frontend/code/src/Components/Play/index.tsx index 3cd792e..e79ee4e 100644 --- a/frontend/code/src/Components/Play/index.tsx +++ b/frontend/code/src/Components/Play/index.tsx @@ -18,7 +18,7 @@ export const Play = () => { } return( <> -
+
diff --git a/frontend/code/src/Components/Profile/assets/Table.tsx b/frontend/code/src/Components/Profile/assets/Table.tsx index 3d15311..d73ac6d 100644 --- a/frontend/code/src/Components/Profile/assets/Table.tsx +++ b/frontend/code/src/Components/Profile/assets/Table.tsx @@ -42,6 +42,7 @@ export const Table = (props: any) => { setHasMore(true); fetchData(); offset.current += 20; + // eslint-disable-next-line }, [props.props.props]); console.log(props); return history.length > 0 || loading === true ? (