* In-game: now displaying players info

back/volume/src/chat/chat.service.ts

@@ -118,10 +118,8 @@ export class ChatService {
 
   @Cron('*/6 * * * * *')
   async updateBanlists (): Promise<void> {
-    console.log('checking bans')
     const channels = await this.ChannelRepository.find({})
     for (const channel of channels) {
-      console.log((channel.banned.length) > 0)
       channel.banned = channel.banned.filter((data) => {
         return Date.now() - data[1] > 0
       })

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

@@ -9,4 +9,5 @@ export class GameInfo {
   ballSize!: Point
   winScore!: number
   ranked!: boolean
+  playerNames!: string[]
 }

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

@@ -63,7 +63,8 @@ export class Game {
       paddleSize: DEFAULT_PADDLE_SIZE,
       ballSize: DEFAULT_BALL_SIZE,
       winScore: DEFAULT_WIN_SCORE,
-      ranked: this.ranked
+      ranked: this.ranked,
+      playerNames: this.players.map((p) => p.name)
     }
   }
 

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

@@ -85,7 +85,8 @@ export class Games {
       paddleSize: DEFAULT_PADDLE_SIZE,
       ballSize: DEFAULT_BALL_SIZE,
       winScore: DEFAULT_WIN_SCORE,
-      ranked: false
+      ranked: false,
+      playerNames: []
     }
   }
 

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

@@ -72,7 +72,7 @@ export class Game {
       ),
       data.paddleSize
     );
-    this.players = [new Player(paddle1), new Player(paddle2)];
+    this.players = [new Player(paddle1, data.playerNames[0]), new Player(paddle2, data.playerNames[1])];
     if (data.yourPaddleIndex != -1)
       this.my_paddle = this.players[data.yourPaddleIndex].paddle;
     this.id = data.gameId;

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Socket } from "socket.io-client";
   import { onMount } from "svelte";
+    import { API_URL, getUser } from "../../Auth";
   import { GAME_EVENTS } from "./constants";
   import type { Game } from "./Game";
 
@@ -15,6 +16,7 @@
 
   let gameCanvas: HTMLCanvasElement;
   let renderCanvas: HTMLCanvasElement;
+  let gameUsers: any[] = [];
 
   onMount(() => {
     if (gameCanvas && renderCanvas) {
@@ -24,9 +26,33 @@
       }
     }
   });
+
+  $: {
+    if (game && game.players.length > 1) {
+      getGameUsers();
+    }
+  }
+
+  function getGameUsers() {
+    gameUsers = [];
+    game.players.forEach(player => {
+      fetch(API_URL + "/users/" + player.name + "/byname", {
+        credentials: "include",
+        method: "GET",
+        mode: "cors",
+      }).then((response) => {
+        if (response.ok) {
+          response.json().then((user) => {
+            gameUsers.push(user);
+            gameUsers = gameUsers;
+          });
+        }
+      });
+    });
+  }
 </script>
 
-<div hidden={!gamePlaying} class="gameDiv">
+<div hidden={!gamePlaying}>
   {#if game && !game.ranked}
     <button on:click={() => socket.emit(GAME_EVENTS.LEAVE_GAME)}>Leave</button>
     <button
@@ -34,25 +60,75 @@
       on:click={() => socket.emit(GAME_EVENTS.READY)}>Ready</button
     >
   {/if}
+  {#if gameUsers.length > 1}
+    <div class="game-header">
+      <div class="empty-header-space" />
+      <div class="user-header">
+        <img alt="avatar" src={API_URL + '/users/' + gameUsers[0].ftId + '/avatar' } />
+        <p>
+          {gameUsers[0].username}
+          <br />
+          ({(gameUsers[0].winrate).toFixed(1)} WR%)
+        </p>
+      </div>
+      <div class="vs">
+        VS
+      </div>
+      <div class="user-header">
+        <img alt="avatar" src={API_URL + '/users/' + gameUsers[1].ftId + '/avatar' } />
+        <p>
+          {gameUsers[1].username}
+          <br />
+          ({(gameUsers[1].winrate).toFixed(1)} WR%)
+        </p>
+      </div>
+      <div class="empty-header-space" />
+    </div>
+  {/if}
+
   <canvas hidden bind:this={gameCanvas} />
   <canvas bind:this={renderCanvas} class="renderCanvas" />
 </div>
 
 <style>
-  .gameDiv {
+  .game-header {
-    width: 100%;
+    display: flex;
-    height: 100%;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.8em;
+    text-align: center;
+  }
+
+  .user-header {
+    flex: 1;
+  }
+  
+  .user-header img {
+    position: relative;
+    height: 50px;
+    margin-right: 10px;
+  }
+
+  .empty-header-space {
+    flex: 1;
+  }
+
+  .vs {
+    flex: 2;
+    grid-area: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 2em;
   }
 
   .renderCanvas {
-    width: 100%;
+    display: block;
-    max-height: 70vh;
+    width: 80vw;
     height: auto;
-    padding-left: 0;
-    padding-right: 0;
     margin-left: auto;
     margin-right: auto;
-    display: block;
+    max-height: 70vh;
     touch-action: none;
     object-fit: contain;
   }

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

@@ -3,10 +3,12 @@ import type { Paddle } from "./Paddle";
 export class Player {
   paddle: Paddle;
   score: number;
+  name: string;
 
-  constructor(paddle: Paddle) {
+  constructor(paddle: Paddle, name: string) {
     this.paddle = paddle;
     this.score = 0;
+    this.name = name;
   }
 
   draw(context: CanvasRenderingContext2D, color: string) {

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

@@ -9,4 +9,5 @@ export class GameInfo {
   ballSize!: Point;
   winScore!: number;
   ranked!: boolean;
+  playerNames!: string[];
 }