* Added color customization

* Fixed frontend saying "matchmaking" after match ended

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

@@ -3,17 +3,15 @@ import { Point, Rect } from "./utils";
 export class Ball {
   rect: Rect;
   speed: Point;
-  color: string | CanvasGradient | CanvasPattern = "white";
 
   constructor(
     spawn: Point,
-    size: Point = new Point(20, 20),
-    speed: Point = new Point(10, 2)
+    size: Point = new Point(20, 20)
   ) {
     this.rect = new Rect(spawn, size);
   }
 
-  draw(context: CanvasRenderingContext2D) {
-    this.rect.draw(context, this.color);
+  draw(context: CanvasRenderingContext2D, color: string) {
+    this.rect.draw(context, color);
   }
 }

front/volume/src/components/Pong/ColorPicker.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let color: string;
+</script>
+
+<div>
+  <input type="color" bind:value={color}>
+</div>
+
+<style>
+</style>

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

@@ -6,7 +6,6 @@ import { Paddle } from "./Paddle";
 import { Player } from "./Player";
 import { formatWebsocketData, Point, Rect } from "./utils";
 
-const BG_COLOR = "black";
 const FPS = import.meta.env.VITE_FRONT_FPS;
 
 export class Game {
@@ -18,14 +17,18 @@ export class Game {
   id: string;
   walls: Rect[];
   drawInterval: NodeJS.Timer;
+  elementsColor: string;
+  backgroundColor: string;
 
-  constructor(canvas: HTMLCanvasElement, context: CanvasRenderingContext2D) {
+  constructor(canvas: HTMLCanvasElement, context: CanvasRenderingContext2D, elementsColor: string, backgroundColor: string) {
     this.canvas = canvas;
     this.context = context;
     this.players = [];
     this.my_paddle = null;
     this.walls = [];
     this.drawInterval = null;
+    this.elementsColor = elementsColor;
+    this.backgroundColor = backgroundColor;
   }
 
   setInfo(data: GameInfo) {
@@ -86,13 +89,18 @@ export class Game {
     }
   }
 
+  updateColors(elementsColor: string, backgroundColor: string) {
+    this.elementsColor = elementsColor;
+    this.backgroundColor = backgroundColor;
+  }
+
   draw() {
-    this.context.fillStyle = BG_COLOR;
+    this.context.fillStyle = this.backgroundColor;
     this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
 
-    this.walls.forEach((w) => w.draw(this.context, "white"));
-    this.players.forEach((p) => p.draw(this.context));
-    this.ball.draw(this.context);
+    this.walls.forEach((w) => w.draw(this.context, this.elementsColor));
+    this.players.forEach((p) => p.draw(this.context, this.elementsColor));
+    this.ball.draw(this.context, this.elementsColor);
 
     const max_width = 50;
     this.context.font = "50px Arial";

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

@@ -2,14 +2,13 @@ import { Point, Rect } from "./utils";
 
 export class Paddle {
   rect: Rect;
-  color: string | CanvasGradient | CanvasPattern = "white";
 
   constructor(spawn: Point, size: Point = new Point(6, 100)) {
     this.rect = new Rect(spawn, size);
   }
 
-  draw(context: CanvasRenderingContext2D) {
-    this.rect.draw(context, this.color);
+  draw(context: CanvasRenderingContext2D, color: string) {
+    this.rect.draw(context, color);
   }
 
   move(e: MouseEvent) {

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

@@ -9,8 +9,8 @@ export class Player {
     this.score = 0;
   }
 
-  draw(context: CanvasRenderingContext2D) {
-    this.paddle.draw(context);
+  draw(context: CanvasRenderingContext2D, color: string) {
+    this.paddle.draw(context, color);
   }
 
   drawScore(

front/volume/src/components/Pong/Pong.svelte

@@ -9,6 +9,7 @@
   import Matchmaking from "./Matchmaking.svelte";
   import type { MatchmakingDto } from "./dtos/MatchmakingDto";
   import { store } from "../../Auth";
+    import ColorPicker from "./ColorPicker.svelte";
 
   const SERVER_URL = `ws://${import.meta.env.VITE_HOST}:${
     import.meta.env.VITE_BACK_PORT
@@ -23,19 +24,23 @@
   let loggedIn: boolean = false;
   let socket: WebSocket;
   let username: string = $store.username;
+  let elementsColor: string = "#FFFFFF";
+  let backgroundColor: string = "#000000";
+  let game: Game;
 
   function setupSocket(
     canvas: HTMLCanvasElement,
     context: CanvasRenderingContext2D
   ) {
     socket = new WebSocket(SERVER_URL);
-    const game = new Game(canvas, context);
+    game = new Game(canvas, context, elementsColor, backgroundColor);
     socket.onmessage = function (e) {
       const event_json = JSON.parse(e.data);
       const event = event_json.event;
       const data = event_json.data;
 
       if (event == GAME_EVENTS.START_GAME) {
+        matchmaking = false;
         game.start(socket);
       } else if (event == GAME_EVENTS.GAME_TICK) {
         game.update(data);
@@ -97,6 +102,12 @@
     const data: MatchmakingDto = { matchmaking: false };
     socket.send(formatWebsocketData(GAME_EVENTS.MATCHMAKING, data));
   }
+
+  $: {
+    if (game !== undefined) {
+      game.updateColors(elementsColor, backgroundColor)
+    }
+  }
 </script>
 
 <div>
@@ -120,11 +131,16 @@
         <button on:click={() => (spectateWindow = true)}
           >Spectate a friend</button
         >
+        <label for="colorPicker">Elements color:</label>
+        <ColorPicker bind:color={elementsColor} />
+        <label for="colorPicker">Background color:</label>
+        <ColorPicker bind:color={backgroundColor} />
 
         {#if matchmaking}
           <div on:click={stopMatchmaking} on:keydown={stopMatchmaking}>
             <Matchmaking {stopMatchmaking} />
           </div>
+          <button on:click={() => console.log(elementsColor)}>tet</button>
         {:else if createMatchWindow}
           <div
             on:click={() => (createMatchWindow = false)}

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

@@ -34,7 +34,7 @@ export class Rect {
 
   draw(
     context: CanvasRenderingContext2D,
-    color: string | CanvasGradient | CanvasPattern
+    color: string
   ) {
     const offset: Point = new Point(this.size.x / 2, this.size.y / 2);