FIX (#98)

backend/code/src/game/game.service.ts

@@ -37,11 +37,21 @@ export class GameService {
  //NOTE: add game modes here
  private launchGame() {
  setInterval(() => {
- console.log('waitingPlayers', this.classicwaitingPlayers.length);
+ console.log('waitingPlayers classic', this.classicwaitingPlayers.length);
+ console.log('waitingPlayers extra', this.extraWaitingPlayers.length);
+
  if (this.classicwaitingPlayers.length >= 2) {
  console.log('Game launched!');
  const two_players = this.classicwaitingPlayers.splice(0, 2);
- this.eventEmitter.emit('game.launched', two_players);
+ this.eventEmitter.emit('game.launched', two_players , "classic");
+ console.log(two_players);
+ // const user = await this.getUser(two_players[0].data.user.sub)
+ // console.log(user)
+ }
+ if (this.extraWaitingPlayers.length >= 2) {
+ console.log('Game launched!');
+ const two_players = this.extraWaitingPlayers.splice(0, 2);
+ this.eventEmitter.emit('game.launched', two_players , "extra");
  console.log(two_players);
  // const user = await this.getUser(two_players[0].data.user.sub)
  // console.log(user)

backend/code/src/game/game.ts

@@ -5,6 +5,8 @@ export class Game {
  constructor(
  private readonly eventEmitter: EventEmitter2,
  private readonly server: Server,
+ private readonly mode: string,
+
  ) {}
 
  private screenAdapter(player, x: number, y: number, ballsize: number) {
@@ -45,10 +47,12 @@ export class Game {
  // let scale_y = player2.h / this.h;
  // let center = this.paddleHeight * scale_y;
 
- if (p2PaddleY - player2.h / 6 / 6 < 0) {
+ if (p2PaddleY - ((player2.h / 6) / 6) < 0) {
  p2PaddleY = 0;
- } else if (p2PaddleY + player2.h / 6 > player2.h) {
- p2PaddleY = player2.h - player2.h / 6;
+ this.p2PaddleY = 0;
+ } else if (p2PaddleY + (player2.h / 6) > player2.h) {
+ p2PaddleY = player2.h - (player2.h / 6);
+ this.p2PaddleY = this.h - (this.paddleHeight);
  }
  return { p1PaddleY: newPos, p2PaddleY: p2PaddleY, side: side };
  }
@@ -61,8 +65,8 @@ export class Game {
  ) {
  const scale = this.h / player2.h;
  if (
- p2PaddleY * scale - this.paddleHeight / 6 >= 0 &&
- p2PaddleY * scale + this.paddleHeight <= this.h
+ (p2PaddleY * scale) - (this.paddleHeight / 6) >= 0 &&
+ ( p2PaddleY * scale) + this.paddleHeight <= this.h
  )
  this.p2PaddleY = p2PaddleY * scale;
 
@@ -73,36 +77,38 @@ export class Game {
 
  // let center = this.paddleHeight * scale_y;
 
- if (p1PaddleY - player1.h / 6 / 6 < 0) {
+ if (p1PaddleY - ((player1.h / 6) / 6) < 0) {
  p1PaddleY = 0;
- } else if (p1PaddleY + player1.h / 6 > player1.h) {
- p1PaddleY = player1.h - player1.h / 6;
+ this.p1PaddleY = 0;
+ } else if (p1PaddleY + (player1.h / 6) > player1.h) {
+ p1PaddleY = player1.h - (player1.h / 6);
+ this.p1PaddleY = this.h - this.paddleHeight;
  }
  return { p1PaddleY: p1PaddleY, p2PaddleY: newPos, side: side };
  }
  private up1() {
- this.eventp1Paddle -= this.p1Res.h / 6 / 6;
- if (this.eventp1Paddle - this.p1Res.h / 6 / 6 < 0) {
+ this.eventp1Paddle -=( (this.p1Res.h / 6) / 6);
+ if (this.eventp1Paddle - ((this.p1Res.h / 6) / 6) < 0) {
  this.eventp1Paddle = 0;
  }
  }
 
  private down1() {
- this.eventp1Paddle += this.p1Res.h / 6 / 6;
+ 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;
+ this.eventp1Paddle = this.p1Res.h - (this.p1Res.h / 6);
  }
  }
  private up2() {
- this.eventp2Paddle -= this.p2Res.h / 6 / 6;
- if (this.eventp2Paddle - this.p2Res.h / 6 / 6 < 0) {
+ this.eventp2Paddle -= ((this.p2Res.h / 6) / 6);
+ if (this.eventp2Paddle - ((this.p2Res.h / 6) / 6) < 0) {
  this.eventp2Paddle = 0;
  }
  }
 
  private down2() {
- this.eventp2Paddle += this.p2Res.h / 6 / 6;
- if (this.eventp2Paddle - this.p2Res.h / 6 / 6 < 0) {
+ this.eventp2Paddle += (this.p2Res.h / 6) / 6;
+ if (this.eventp2Paddle - (this.p2Res.h / 6) / 6 < 0) {
  this.eventp2Paddle = 0;
  }
  }
@@ -111,11 +117,11 @@ export class Game {
  if (this.closeGame) return;
  console.log('loop');
 
- if (
- this.x + this.dx + this.ballSize / 2 >= this.w ||
- this.x + this.dx - this.ballSize / 2 <= 0
- )
- this.dx *= -1;
+ // if (
+ //  this.x + this.dx + this.ballSize / 2 >= this.w ||
+ //  this.x + this.dx - this.ballSize / 2 <= 0
+ // )
+ //  this.dx *= -1;
  if (
  this.y + this.dy + this.ballSize / 2 >= this.h ||
  this.y + this.dy - this.ballSize / 2 <= 0
@@ -129,20 +135,24 @@ export class Game {
  ) {
  this.dx *= -1;
  this.dy = Math.random() * (4 - 1.5) + 1.5;
+ if (Math.random() >= .5)
+ this.dy *= -1; 
  }
 
  if (
- this.y > this.p1PaddleY &&
- this.y < this.p1PaddleY + this.paddleHeight &&
- this.x >= this.w - (this.paddleWidth + this.gap + this.ballSize / 2)
+ this.y > this.p2PaddleY &&
+ this.y < this.p2PaddleY + this.paddleHeight &&
+ this.x >= this.w - (this.gap + (this.ballSize / 2) + this.paddleWidth)
  ) {
  this.dx *= -1;
  this.dy = Math.random() * (4 - 1.5) + 1.5;
+ if (Math.random() >= .5)
+ this.dy *= -1; 
  }
  if (
  (this.y < this.p2PaddleY ||
  this.y > this.p2PaddleY + this.paddleHeight) &&
- this.x + this.ballSize / 2 >= this.w - (this.paddleWidth + this.gap)
+ this.x + this.ballSize / 2 >= this.w 
  ) {
  console.log(`${this.p1PaddleY} ${this.x} ${this.y} ${this.ballSize}`);
  this.p1Score += 1;
@@ -153,7 +163,7 @@ export class Game {
  if (
  (this.y < this.p1PaddleY ||
  this.y > this.p1PaddleY + this.paddleHeight) &&
- this.x - this.ballSize / 2 <= this.paddleWidth + this.gap
+ this.x - this.ballSize / 2 <= 0
  ) {
  console.log(`${this.p1PaddleY} ${this.x} ${this.y} ${this.ballSize}`);
  this.p2Score += 1;
@@ -261,10 +271,48 @@ export class Game {
  console.log(p2Data);
  this.server.emit('players', [p1Data, p2Data]);
  console.log('newfunc');
+
+ if (this.mode === "extra")
+ {
+ let l = 1;
+ const custom = setInterval(() => {
+ let i = 0;
+ const inter = setInterval(() => {i++; if (i > 5) 
+ {
+ this.server.to(this.gameid).emit("t",(10 - i))
+ if (i === 10)
+ clearInterval(inter);
+ if (this.closeGame)
+ clearInterval(inter)
+ }
+ },1000)
+ this.server.to(this.gameid).emit("level",l)
+ l++;
+ if (this.closeGame)
+ clearInterval(custom)
+ },10000)
+ const inter = setInterval(() => {
+ if (this.closeGame)
+ clearInterval(inter)
+ if (this.ballSize -1 > 3)
+ this.ballSize -= 2;
+ else
+ clearInterval(inter);
+ }, 10000);
+ const speed = setInterval(() => {
+ if (this.closeGame)
+ clearInterval(speed)
+ if (this.frames >= 6)
+ this.frames -= 2;
+ else
+ clearInterval(speed)
+ }, 10000);
+ }
 
- setInterval(() => {
- this.frames -= 1;
- }, 2000);
+ else {
+ this.frames = 16;
+ }
+
  this.p1socket.on('up', () => {
  this.up1();
  });
@@ -325,6 +373,9 @@ export class Game {
  private emitGameEnd(message: string) {
  console.log('game end');
  this.closeGame = true;
+ this.p1socket.removeAllListeners()
+ this.p2socket.removeAllListeners()
+
  if (message === 'p1Leave') {
  this.eventEmitter.emit('game.end', {
  resign: 1,
@@ -373,7 +424,10 @@ export class Game {
  this.dy = Math.random() > 0.5 ? this.w / 220 : (this.w / 220) * -1;
  this.p1PaddleY = this.h / 2;
  this.p2PaddleY = this.h / 2;
- this.frames = 25;
+ if (this.m === "classic")
+ this.frames = 16;
+ else
+ this.frames = 25;
  }
  private gameid: string;
  private p1socket: Socket;
@@ -387,7 +441,7 @@ export class Game {
  private y: number = this.h / 2;
  private gap: number = this.w / 100;
  private ballSize: number = this.w / 42;
-
+ private m: string = "classic"
  private dx: number = Math.random() > 0.5 ? this.w / 220 : (this.w / 220) * -1;
  private dy: number = Math.random() > 0.5 ? this.w / 220 : (this.w / 220) * -1;
  private p1PaddleY: number = this.h / 2;

backend/code/src/gateways/gateways.gateway.ts

@@ -338,14 +338,14 @@ export class Gateways implements OnGatewayConnection, OnGatewayDisconnect {
  }
 
  @OnEvent('game.launched')
- async handleGameLaunchedEvent(clients: any) {
+ async handleGameLaunchedEvent(clients: any , mode:string) {
  const game_channel = crypto.randomBytes(16).toString('hex');
- console.log(game_channel);
+ // console.log(game_channel);
  clients.forEach((client: any) => {
  client.socket.join(game_channel);
  client.socket.data.user.inGame = true;
  });
- const new_game = new Game(this.eventEmitter, this.server);
+ const new_game = new Game(this.eventEmitter, this.server , mode);
 
  new_game.setplayerScokets(
  clients[0].socket,
@@ -360,12 +360,13 @@ export class Gateways implements OnGatewayConnection, OnGatewayDisconnect {
 
  @OnEvent('game.end')
  async handleGameEndEvent(data: any) {
+ this.games_map.delete(data.gameid);
  console.log('game ended');
  console.log(data);
+ const sockets = await this.server.in(data.gameid).fetchSockets();
  this.server.to(data.gameid).emit('game.end', data);
  console.log(data);
- const sockets = await this.server.in(data.gameid).fetchSockets();
-
+
  for await (const socket of sockets) {
  socket.data.user.inGame = false;
  }
@@ -404,7 +405,6 @@ export class Gateways implements OnGatewayConnection, OnGatewayDisconnect {
  });
  }
 
- this.games_map.delete(data.gameid);
  }
 
  @SubscribeMessage('joinRoom')

backend/code/src/main.ts

@@ -16,6 +16,7 @@ async function bootstrap() {
  const corsOptions = {
  origin: [
  'http://localhost:9000',
+ 'http://localhost:8000',
  'http://localhost:3000',
  'http://142.93.161.63',
  'http://164.92.243.105',

docker-compose.yaml

@@ -46,7 +46,7 @@ services :
  depends_on:
  - backend
  ports:
- - 80:80
+ - 8000:80
  init: true
  restart: always
 

frontend/code/src/Components/Game/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from "react"
+import { useCallback, useEffect, useState } from "react"
 import { Rect, Stage , Layer , Circle, Line} from "react-konva"
 import { BsFillArrowRightCircleFill, BsFillArrowLeftCircleFill} from "react-icons/bs";
 import { useGameState } from "./States/GameState";
@@ -38,6 +38,8 @@ function throttlify(callback : any) {
 export const Game = () => {
  const gameState = useGameState();
  const socketStore = useSocketStore();
+ const [level , setLevel] = useState(1);
+ const [t , setT ] = useState(0);
  const navigate = useNavigate()
  const leave = useCallback(() => {
  socketStore.socket.emit("leave")
@@ -55,6 +57,9 @@ export const Game = () => {
  socketStore.socket.off("down");
  }
  useEffect(() => {
+ socketStore.socket.on("level", (l:number) => {setLevel(l)})
+ socketStore.socket.on("t", (t:number) => {setT(t)})
+
  document.addEventListener('keydown', (event) =>{
  if (event.key === "ArrowUp")
  socketStore.socket.emit("up");
@@ -72,7 +77,7 @@ export const Game = () => {
  })
  socketStore.socket.on("screen Error", () =>{
  console.log("you lose")
- navigate("/home", { replace: true })
+ navigate("/home")
  })
  socketStore.socket.on("players", (players:any) => {
  gameState.setP1(players[0]);
@@ -84,6 +89,9 @@ export const Game = () => {
  socketStore.socket.off("down");
  socketStore.socket.off("up");
  socketStore.socket.off("leave")
+ socketStore.socket.off("level")
+ socketStore.socket.off("t")
+
  window.removeEventListener("keydown",()=>{});
 
  }
@@ -92,7 +100,7 @@ export const Game = () => {
  /* eslint-disable */
  useEffect(() => {
  if (!gameState.p1)
- navigate("/home", { replace: true })
+ navigate("/home")
  const divh = document.getElementById('Game')?.offsetHeight
  const divw = document.getElementById('Game')?.offsetWidth
  socketStore.socket.emit("screen",{h:divh,w:divw})
@@ -146,6 +154,10 @@ export const Game = () => {
  <button className="btn" onClick={leave}>Leave</button>
 
  </div>
+ <div className="flex justify-center items-center flex-col">
+ <div className="font-poppins text-neutral font-medium">{t > 0 ? (`next level start after ${t}`) : (`level ${level}`)}</div>
+
+ </div>
  <div className="flex items-center justify-center min-h-16 max-h-[80%] max-w-[800px] 3xl:max-w-[1150px] min-w-92 w-[95%] rounded-xl aspect-video border-primary border-4" id="Game">
  <Stage onMouseMove={handleMove} width={gameState.width } height={gameState.height } style={{borderWidth:"4px",borderColor:"#7940CF",borderRadius:"4px"}} >
  <Layer >