From ef74f2111cef25f69058d45a5bbc87488316773f Mon Sep 17 00:00:00 2001 From: Takumi Hara Date: Mon, 4 Mar 2024 23:54:53 -0600 Subject: [PATCH 1/4] Remove unnecessary code --- frontend/app/pong/[id]/PongGame.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/app/pong/[id]/PongGame.ts b/frontend/app/pong/[id]/PongGame.ts index baf2caf8..44b20caa 100644 --- a/frontend/app/pong/[id]/PongGame.ts +++ b/frontend/app/pong/[id]/PongGame.ts @@ -10,7 +10,6 @@ import { TARGET_FRAME_MS, } from "./const"; -type setFunction = (value: T | ((prevState: T) => T)) => void; type movingDirectionType = "none" | "left" | "right"; type onActionType = (action: string) => void; type userModeType = "player" | "viewer"; From 606b5e4659c16912b21e03b7aba1885c0edb9dd0 Mon Sep 17 00:00:00 2001 From: Takumi Hara Date: Mon, 4 Mar 2024 23:57:54 -0600 Subject: [PATCH 2/4] Handle user leaving in the middle of game --- backend/src/events/events.gateway.ts | 4 ++++ frontend/app/lib/hooks/game/useGameSocket.ts | 17 +++++++++++------ frontend/app/pong/[id]/PongGame.ts | 8 ++++++++ 3 files changed, 23 insertions(+), 6 deletions(-) diff --git a/backend/src/events/events.gateway.ts b/backend/src/events/events.gateway.ts index db22b03b..ff36e29f 100644 --- a/backend/src/events/events.gateway.ts +++ b/backend/src/events/events.gateway.ts @@ -161,6 +161,10 @@ export class EventsGateway implements OnGatewayDisconnect { this.emitUpdateStatusToRoomId(client, roomId, 'friend-left', { playerNumber: this.players[roomId][client.id], }); + const opponent = getOpponent(this.players, roomId, client.id); + if (opponent) { + this.lostPoints[opponent] = 0; + } removePlayer(this.players, roomId, client.id); delete this.lostPoints[client.id]; } diff --git a/frontend/app/lib/hooks/game/useGameSocket.ts b/frontend/app/lib/hooks/game/useGameSocket.ts index 02d52ae4..71cc66b9 100644 --- a/frontend/app/lib/hooks/game/useGameSocket.ts +++ b/frontend/app/lib/hooks/game/useGameSocket.ts @@ -89,11 +89,14 @@ export default function useGameSocket( setUserMode("viewer"); break; case "friend-joined": - const { playerNumber, user } = payload; - const setter = getPlayerSetterFromPlayerNumber(playerNumber); - setter(user); - currentUser && setStartDisabled(false); - game.resetPlayerPosition(); + { + const { playerNumber, user } = payload; + const setter = getPlayerSetterFromPlayerNumber(playerNumber); + setter(user); + currentUser && setStartDisabled(false); + game.resetPlayerPosition(); + game.reset(); + } break; case "friend-left": { @@ -101,6 +104,8 @@ export default function useGameSocket( const setter = getPlayerSetterFromPlayerNumber(playerNumber); setter(undefined); setStartDisabled(true); + const game = getGame(); + game.reset(); } break; case "joined-as-viewer": @@ -212,7 +217,7 @@ export default function useGameSocket( const handleFinish = () => { const game = getGame(); - game.stop(); + game.reset(); }; socket.on("connect", handleConnect); diff --git a/frontend/app/pong/[id]/PongGame.ts b/frontend/app/pong/[id]/PongGame.ts index 44b20caa..98769a95 100644 --- a/frontend/app/pong/[id]/PongGame.ts +++ b/frontend/app/pong/[id]/PongGame.ts @@ -166,6 +166,14 @@ export class PongGame { this.isPlaying = false; }; + reset = () => { + this.stop(); + this.score = { + player1: 0, + player2: 0, + }; + }; + resetPlayerPosition = () => { const color = this.player1.color; this.player1 = this.initPlayer1(color); From 8092cd65678204a0683c81918e30ad17c9670251 Mon Sep 17 00:00:00 2001 From: Takumi Hara Date: Tue, 5 Mar 2024 00:06:03 -0600 Subject: [PATCH 3/4] Hide start button when viewer --- frontend/app/pong/[id]/PongBoard.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/frontend/app/pong/[id]/PongBoard.tsx b/frontend/app/pong/[id]/PongBoard.tsx index f1a43c50..ab11a9e7 100644 --- a/frontend/app/pong/[id]/PongBoard.tsx +++ b/frontend/app/pong/[id]/PongBoard.tsx @@ -34,9 +34,11 @@ export default function PongBoard({ id }: PongBoardProps) { >
- + {userMode === "player" && ( + + )}
Date: Tue, 5 Mar 2024 00:19:55 -0600 Subject: [PATCH 4/4] Change direction name --- backend/src/events/events.gateway.ts | 14 ++++++------- .../app/lib/hooks/game/useGameKeyboard.ts | 4 ++-- frontend/app/lib/hooks/game/useGameSocket.ts | 20 +++++++++---------- frontend/app/pong/[id]/PongGame.ts | 18 ++++++++--------- 4 files changed, 27 insertions(+), 29 deletions(-) diff --git a/backend/src/events/events.gateway.ts b/backend/src/events/events.gateway.ts index ff36e29f..8d15b462 100644 --- a/backend/src/events/events.gateway.ts +++ b/backend/src/events/events.gateway.ts @@ -189,32 +189,30 @@ export class EventsGateway implements OnGatewayDisconnect { } @UseGuards(UserGuardWs) - @SubscribeMessage('left') - async left( + @SubscribeMessage('up') + async up( @MessageBody() data: string, @ConnectedSocket() client: Socket, ): Promise { const roomId = client.handshake.query['game_id'] as string; if (!isPlayer(this.players, roomId, client.id)) return; - this.logger.log(`left: ${client.id}`); - - this.broadcastToRooms(client, 'left', { + this.broadcastToRooms(client, 'up', { playerNumber: this.players[roomId][client.id], }); return; } @UseGuards(UserGuardWs) - @SubscribeMessage('right') - async right( + @SubscribeMessage('down') + async down( @MessageBody() data: string, @ConnectedSocket() client: Socket, ): Promise { const roomId = client.handshake.query['game_id'] as string; if (!isPlayer(this.players, roomId, client.id)) return; - this.broadcastToRooms(client, 'right', { + this.broadcastToRooms(client, 'down', { playerNumber: this.players[roomId][client.id], }); return; diff --git a/frontend/app/lib/hooks/game/useGameKeyboard.ts b/frontend/app/lib/hooks/game/useGameKeyboard.ts index 12908809..1495f723 100644 --- a/frontend/app/lib/hooks/game/useGameKeyboard.ts +++ b/frontend/app/lib/hooks/game/useGameKeyboard.ts @@ -12,9 +12,9 @@ export default function useGameKeyboard(getGame: () => PongGame) { }; const handleKeyDown = (event: KeyboardEvent) => { if (event.key == "ArrowDown") { - game.setMovingDirection("right"); + game.setMovingDirection("down"); } else if (event.key == "ArrowUp") { - game.setMovingDirection("left"); + game.setMovingDirection("up"); } }; diff --git a/frontend/app/lib/hooks/game/useGameSocket.ts b/frontend/app/lib/hooks/game/useGameSocket.ts index 71cc66b9..aadd3366 100644 --- a/frontend/app/lib/hooks/game/useGameSocket.ts +++ b/frontend/app/lib/hooks/game/useGameSocket.ts @@ -174,19 +174,19 @@ export default function useGameSocket( setStartDisabled(true); }; - const handleRight = ({ playerNumber }: HandleActionProps) => { + const handleDown = ({ playerNumber }: HandleActionProps) => { if (userMode !== "player" && playerNumber == 1) { - game.movePlayer1Left(); + game.movePlayer1Down(); } else { - game.movePlayer2Left(); + game.movePlayer2Up(); } }; - const handleLeft = ({ playerNumber }: HandleActionProps) => { + const handleUp = ({ playerNumber }: HandleActionProps) => { if (userMode !== "player" && playerNumber == 1) { - game.movePlayer1Right(); + game.movePlayer1Up(); } else { - game.movePlayer2Right(); + game.movePlayer2Down(); } }; @@ -222,8 +222,8 @@ export default function useGameSocket( socket.on("connect", handleConnect); socket.on("start", handleStart); - socket.on("right", handleRight); - socket.on("left", handleLeft); + socket.on("down", handleDown); + socket.on("up", handleUp); socket.on("bounce", handleBounce); socket.on("collide", handleCollide); socket.on("update-status", handleUpdateStatus); @@ -232,8 +232,8 @@ export default function useGameSocket( return () => { socket.off("connect", handleConnect); socket.off("start", handleStart); - socket.off("right", handleRight); - socket.off("left", handleLeft); + socket.off("down", handleDown); + socket.off("up", handleUp); socket.off("bounce", handleBounce); socket.off("collide", handleCollide); socket.off("update-status", handleUpdateStatus); diff --git a/frontend/app/pong/[id]/PongGame.ts b/frontend/app/pong/[id]/PongGame.ts index 98769a95..430e491f 100644 --- a/frontend/app/pong/[id]/PongGame.ts +++ b/frontend/app/pong/[id]/PongGame.ts @@ -10,7 +10,7 @@ import { TARGET_FRAME_MS, } from "./const"; -type movingDirectionType = "none" | "left" | "right"; +type movingDirectionType = "none" | "up" | "down"; type onActionType = (action: string) => void; type userModeType = "player" | "viewer"; @@ -120,16 +120,16 @@ export class PongGame { this.elapsed = this.updatedAt === undefined ? 0 : now - this.updatedAt; this.updatedAt = now; if (this.userMode === "player") { - if (this.movingDirection === "left") { + if (this.movingDirection === "up") { this.player1.clear(this.ctx); this.player1.moveTop(); this.player1.draw(this.ctx); - this.onAction && this.onAction("left"); - } else if (this.movingDirection === "right") { + this.onAction && this.onAction("up"); + } else if (this.movingDirection === "down") { this.player1.clear(this.ctx); this.player1.moveDown(); this.player1.draw(this.ctx); - this.onAction && this.onAction("right"); + this.onAction && this.onAction("down"); } } if (this.isPlaying) { @@ -207,25 +207,25 @@ export class PongGame { return this.ball.bounceOffPaddle(this.player2); }; - movePlayer1Left = () => { + movePlayer1Up = () => { this.player1.clear(this.ctx); this.player1.moveTop(); this.player1.draw(this.ctx); }; - movePlayer1Right = () => { + movePlayer1Down = () => { this.player1.clear(this.ctx); this.player1.moveDown(); this.player1.draw(this.ctx); }; - movePlayer2Left = () => { + movePlayer2Up = () => { this.player2.clear(this.ctx); this.player2.moveTop(); this.player2.draw(this.ctx); }; - movePlayer2Right = () => { + movePlayer2Down = () => { this.player2.clear(this.ctx); this.player2.moveDown(); this.player2.draw(this.ctx);