* Speed increase in pong game

back/volume/src/pong/dtos/GameInfo.ts

@@ -6,7 +6,6 @@ export class GameInfo {
   gameId!: string
   walls!: Rect[]
   paddleSize!: Point
-  playerXOffset!: number
   ballSize!: Point
   winScore!: number
   ranked!: boolean

back/volume/src/pong/game/Ball.ts

@@ -4,7 +4,9 @@ import { type MapDtoValidated } from '../dtos/MapDtoValidated'
 import {
   DEFAULT_BALL_SIZE,
   DEFAULT_BALL_INITIAL_SPEED,
-  GAME_TICKS
+  GAME_TICKS,
+  DEFAULT_BALL_SPEED_INCREMENT,
+  DEFAULT_MAX_BALL_SPEED
 } from './constants'
 
 export class Ball {
@@ -22,7 +24,7 @@ export class Ball {
   ) {
     this.rect = new Rect(spawn, size)
     this.speed = speed
-    this.initial_speed = speed
+    this.initial_speed = speed.clone()
     this.spawn = spawn.clone()
     this.indexPlayerScored = -1
     this.timeoutTime = 0
@@ -73,6 +75,19 @@ export class Ball {
     }
 
     if (!canvasRect.contains_y(this.rect)) this.speed.y = this.speed.y * -1
+
+    if (this.speed.x > 0 && this.speed.x < DEFAULT_MAX_BALL_SPEED.x) {
+      this.speed.x += DEFAULT_BALL_SPEED_INCREMENT.x
+    }
+    if (this.speed.x < 0 && this.speed.x > -DEFAULT_MAX_BALL_SPEED.x) {
+      this.speed.x -= DEFAULT_BALL_SPEED_INCREMENT.x
+    }
+    if (this.speed.y > 0 && this.speed.y > DEFAULT_MAX_BALL_SPEED.y) {
+      this.speed.y += DEFAULT_MAX_BALL_SPEED.y
+    }
+    if (this.speed.y < 0 && this.speed.y < -DEFAULT_MAX_BALL_SPEED.y) {
+      this.speed.y -= DEFAULT_MAX_BALL_SPEED.y
+    }
     this.rect.center.add_inplace(this.speed)
   }
 
@@ -85,10 +100,11 @@ export class Ball {
     }
 
     this.rect.center = this.spawn.clone()
-    this.speed.x = this.speed.x * -1
     if (this.speed.x < 0) {
+      this.speed.x = this.initial_speed.x
       this.speed.y = -this.initial_speed.y
     } else {
+      this.speed.x = -this.initial_speed.x
       this.speed.y = this.initial_speed.y
     }
 

back/volume/src/pong/game/Game.ts

@@ -5,7 +5,6 @@ import { Player } from './Player'
 import {
   DEFAULT_BALL_SIZE,
   DEFAULT_PADDLE_SIZE,
-  DEFAULT_PLAYER_X_OFFSET,
   DEFAULT_WIN_SCORE,
   GAME_EVENTS,
   GAME_TICKS
@@ -57,7 +56,6 @@ export class Game {
       gameId: this.id,
       walls: this.map.walls,
       paddleSize: DEFAULT_PADDLE_SIZE,
-      playerXOffset: DEFAULT_PLAYER_X_OFFSET,
       ballSize: DEFAULT_BALL_SIZE,
       winScore: DEFAULT_WIN_SCORE,
       ranked: this.ranked
@@ -65,10 +63,13 @@ export class Game {
   }
 
   private addPlayer (socket: Socket, uuid: string, name: string): void {
-    let paddleCoords = new Point(DEFAULT_PLAYER_X_OFFSET, this.map.size.y / 2)
+    let paddleCoords = new Point(
+      DEFAULT_PADDLE_SIZE.x / 2,
+      this.map.size.y / 2
+    )
     if (this.players.length === 1) {
       paddleCoords = new Point(
-        this.map.size.x - DEFAULT_PLAYER_X_OFFSET,
+        this.map.size.x - DEFAULT_PADDLE_SIZE.x / 2,
         this.map.size.y / 2
       )
     }
@@ -114,10 +115,13 @@ export class Game {
       this.playing = false
       clearInterval(this.timer)
       this.timer = null
-      this.pongService.saveResult(this.players, this.ranked).then(() => {
+      this.pongService
+        .saveResult(this.players, this.ranked)
+        .then(() => {
           this.gameStoppedCallback(this.players[0].name)
           this.players = []
-      }).catch(() => {
+        })
+        .catch(() => {
           this.gameStoppedCallback(this.players[0].name)
           this.players = []
         })

back/volume/src/pong/game/Games.ts

@@ -9,7 +9,6 @@ import {
   DEFAULT_BALL_SIZE,
   DEFAULT_MAP_SIZE,
   DEFAULT_PADDLE_SIZE,
-  DEFAULT_PLAYER_X_OFFSET,
   DEFAULT_WIN_SCORE
 } from './constants'
 
@@ -80,7 +79,6 @@ export class Games {
       mapSize: new Point(0, 0),
       walls: [],
       paddleSize: DEFAULT_PADDLE_SIZE,
-      playerXOffset: DEFAULT_PLAYER_X_OFFSET,
       ballSize: DEFAULT_BALL_SIZE,
       winScore: DEFAULT_WIN_SCORE,
       ranked: false

back/volume/src/pong/game/constants.ts

@@ -13,9 +13,10 @@ export const GAME_EVENTS = {
 }
 
 export const DEFAULT_MAP_SIZE = new Point(500, 400)
-export const DEFAULT_PADDLE_SIZE = new Point(6, 30)
+export const DEFAULT_PADDLE_SIZE = new Point(30, 50)
 export const DEFAULT_BALL_SIZE = new Point(10, 10)
 export const DEFAULT_BALL_INITIAL_SPEED = new Point(10, 2)
-export const DEFAULT_PLAYER_X_OFFSET = 50
+export const DEFAULT_MAX_BALL_SPEED = new Point(30, 20)
+export const DEFAULT_BALL_SPEED_INCREMENT = new Point(0.05, 0)
 export const DEFAULT_WIN_SCORE = 5
 export const GAME_TICKS = 30

front/volume/src/components/Channels.svelte

@@ -13,7 +13,6 @@
 </script>
 
 <script lang="ts">
-
   //--------------------------------------------------------------------------------/
 
   export let channels: Array<ChannelsType> = [];

front/volume/src/components/Chat.svelte

@@ -91,8 +91,7 @@
 
   //--------------------------------------------------------------------------------/
 
-  const blockUser = async (username : string) => {
-  };
+  const blockUser = async (username: string) => {};
 
   //--------------------------------------------------------------------------------/
 
@@ -102,7 +101,6 @@
     //   mode: "cors",
     // });
     // const data1 = await res1.json();
-
     // const res2 = await fetch(API_URL + "/chat/channels/" + data1.ftId + "/ban", {
     //   method: "POST",
     //   mode: "cors",
@@ -123,7 +121,6 @@
     //   mode: "cors",
     // });
     // const data1 = await res1.json();
-
     // const res2 = await fetch(API_URL + "/chat/channels/" + data1.ftId + "/kick", {
     //   method: "POST",
     //   mode: "cors",
@@ -145,7 +142,6 @@
     //   mode: "cors",
     // });
     // const data1 = await res1.json();
-
     // const res2 = await fetch(API_URL + "/chat/channels/" + data1.ftId + "/mute", {
     //   method: "POST",
     //   mode: "cors",
@@ -165,7 +161,6 @@
     //   mode: "cors",
     // });
     // const data1 = await res1.json();
-
     // const res2 = await fetch(API_URL + "/chat/channels/" + data1.ftId + "/admin", {
     //   method: "POST",
     //   mode: "cors",
@@ -185,7 +180,6 @@
     //   mode: "cors",
     // });
     // const data1 = await res1.json();
-
     // const res2 = await fetch(API_URL + "/chat/channels/" + data1.ftId + "/admin", {
     //   method: "DELETE",
     //   mode: "cors",
@@ -246,9 +240,7 @@
           </li>
           <li>
             <!-- block only if not blocked -->
-            <button on:click={() => blockUser(selectedUser)}
-              >Block User</button
-            >
+            <button on:click={() => blockUser(selectedUser)}>Block User</button>
           </li>
           <li><button on:click={closeProfileMenu}>Close</button></li>
         </ul>
@@ -277,11 +269,22 @@
                 <p>
                   {member.username}
                   <button on:click={() => banUser(member.username)}>ban</button>
-                  <button on:click={() => kickUser(member.username)}>kick</button>
-                  <button on:click={() => muteUser(member.username)}>mute</button>
-                  <button on:click={() => adminUser(member.username)}>promote</button>
-                  <button on:click={() => removeAdminUser(member.username)}>demote</button>
-                  <p> ----------------------------------------------------------------------------------- </p>
+                  <button on:click={() => kickUser(member.username)}
+                    >kick</button
+                  >
+                  <button on:click={() => muteUser(member.username)}
+                    >mute</button
+                  >
+                  <button on:click={() => adminUser(member.username)}
+                    >promote</button
+                  >
+                  <button on:click={() => removeAdminUser(member.username)}
+                    >demote</button
+                  >
+                </p>
+                <p>
+                  -----------------------------------------------------------------------------------
+                </p>
               </li>
             {/each}
           </ul>

front/volume/src/components/Pong/Game.ts

@@ -62,11 +62,14 @@ export class Game {
       data.ballSize
     );
     const paddle1: Paddle = new Paddle(
-      new Point(data.playerXOffset, this.canvas.height / 2),
+      new Point(data.paddleSize.x / 2, this.canvas.height / 2),
       data.paddleSize
     );
     const paddle2: Paddle = new Paddle(
-      new Point(this.canvas.width - data.playerXOffset, this.canvas.height / 2),
+      new Point(
+        this.canvas.width - data.paddleSize.x / 2,
+        this.canvas.height / 2
+      ),
       data.paddleSize
     );
     this.players = [new Player(paddle1), new Player(paddle2)];

front/volume/src/components/Pong/Paddle.ts

@@ -1,3 +1,4 @@
+import { DEFAULT_MAP_SIZE } from "./constants";
 import { Point, Rect } from "./utils";
 
 export class Paddle {
@@ -8,7 +9,17 @@ export class Paddle {
   }
 
   draw(context: CanvasRenderingContext2D, color: string) {
-    this.rect.draw(context, color);
+    let offset: number;
+    if (this.rect.center.x < DEFAULT_MAP_SIZE.x / 2) {
+      offset = this.rect.size.x / 3;
+    } else {
+      offset = -(this.rect.size.x / 3);
+    }
+    const render_rect: Rect = new Rect(
+      new Point(this.rect.center.x + offset, this.rect.center.y),
+      new Point(this.rect.size.x / 3, this.rect.size.y)
+    );
+    render_rect.draw(context, "yellow");
   }
 
   move(e: MouseEvent) {

front/volume/src/components/Pong/constants.ts

@@ -13,9 +13,10 @@ export const GAME_EVENTS = {
 };
 
 export const DEFAULT_MAP_SIZE = new Point(500, 400);
-export const DEFAULT_PADDLE_SIZE = new Point(6, 30);
+export const DEFAULT_PADDLE_SIZE = new Point(30, 50);
 export const DEFAULT_BALL_SIZE = new Point(10, 10);
 export const DEFAULT_BALL_INITIAL_SPEED = new Point(10, 2);
-export const DEFAULT_PLAYER_X_OFFSET = 50;
+export const DEFAULT_MAX_BALL_SPEED = new Point(30, 20);
+export const DEFAULT_BALL_SPEED_INCREMENT = new Point(0.05, 0);
 export const DEFAULT_WIN_SCORE = 5;
 export const GAME_TICKS = 30;

front/volume/src/components/Pong/dtos/GameInfo.ts

@@ -6,7 +6,6 @@ export class GameInfo {
   gameId!: string;
   walls!: Rect[];
   paddleSize!: Point;
-  playerXOffset!: number;
   ballSize!: Point;
   winScore!: number;
   ranked!: boolean;