* Removed spectate feature

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

@@ -11,7 +11,6 @@ import {
   GAME_TICKS
 } from './constants'
 import { randomUUID } from 'crypto'
-import { Spectator } from './Spectator'
 import { type MapDtoValidated } from '../dtos/MapDtoValidated'
 import { type GameUpdate } from '../dtos/GameUpdate'
 import { type GameInfo } from '../dtos/GameInfo'
@@ -23,7 +22,6 @@ export class Game {
   map: MapDtoValidated
   ball: Ball
   players: Player[] = []
-  spectators: Spectator[] = []
   playing: boolean
   ranked: boolean
   gameStoppedCallback: (name: string) => void
@@ -64,11 +62,6 @@ export class Game {
     }
   }
 
-  addSpectator (socket: WebSocket, uuid: string, name: string): void {
-    this.spectators.push(new Spectator(socket, uuid, name))
-    console.log(`Added spectator ${name}`)
-  }
-
   private addPlayer (socket: WebSocket, uuid: string, name: string): void {
     let paddleCoords = new Point(DEFAULT_PLAYER_X_OFFSET, this.map.size.y / 2)
     if (this.players.length === 1) {
@@ -136,9 +129,6 @@ export class Game {
     this.players.forEach((p) => {
       p.socket.send(data)
     })
-    this.spectators.forEach((s) => {
-      s.socket.send(data)
-    })
   }
 
   isPlaying (): boolean {

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

@@ -106,23 +106,6 @@ export class Games {
     return game
   }
 
-  spectateGame (
-    nameToSpectate: string,
-    socket: WebSocket,
-    uuid: string,
-    name: string
-  ): boolean {
-    let succeeded: boolean = false
-    const gameIndex: number | undefined =
-      this.playerNameToGameIndex.get(nameToSpectate)
-    if (gameIndex !== undefined) {
-      this.playerNameToGameIndex.set(name, gameIndex)
-      this.games[gameIndex].addSpectator(socket, uuid, name)
-      succeeded = true
-    }
-    return succeeded
-  }
-
   async leaveGame (name: string): Promise<void> {
     const game: Game | undefined = this.playerGame(name)
     if (game !== undefined && !game.ranked) {

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

@@ -1,13 +0,0 @@
-import { type WebSocket } from 'ws'
-
-export class Spectator {
-  socket: WebSocket
-  uuid: string
-  name: string
-
-  constructor (socket: WebSocket, uuid: string, name: string) {
-    this.socket = socket
-    this.uuid = uuid
-    this.name = name
-  }
-}

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

@@ -8,7 +8,6 @@ export const GAME_EVENTS = {
   GET_GAME_INFO: 'GET_GAME_INFO',
   CREATE_GAME: 'CREATE_GAME',
   REGISTER_PLAYER: 'REGISTER_PLAYER',
-  SPECTATE: 'SPECTATE',
   MATCHMAKING: 'MATCHMAKING',
   LEAVE_GAME: 'LEAVE_GAME'
 }

back/volume/src/pong/pong.gateway.ts

@@ -180,21 +180,6 @@ export class PongGateway implements OnGatewayConnection, OnGatewayDisconnect {
     return { event: GAME_EVENTS.READY, data: succeeded }
   }
 
-  @UsePipes(new ValidationPipe({ whitelist: true }))
-  @SubscribeMessage(GAME_EVENTS.SPECTATE)
-  spectate (
-    @ConnectedSocket()
-      client: WebSocketWithId,
-      @MessageBody() playerToSpectate: StringDtoValidated
-  ): { event: string, data: boolean } {
-    let succeeded: boolean = false
-    const name: string | undefined = this.socketToPlayerName.get(client)
-    if (name !== undefined) {
-      succeeded = this.games.spectateGame(playerToSpectate.value, client, client.id, name)
-    }
-    return { event: GAME_EVENTS.SPECTATE, data: succeeded }
-  }
-
   @UsePipes(new ValidationPipe({ whitelist: true }))
   @SubscribeMessage(GAME_EVENTS.MATCHMAKING)
   updateMatchmaking (

back/volume/src/users/entity/user.entity.ts

@@ -22,7 +22,7 @@ export class User {
   @Column({ unique: true })
     ftId: number
 
-  @Column({ unique: true })
+  @Column({ nullable: true, unique: true })
     email: string
 
   @Column({ select: false, nullable: true })

front/volume/src/App.svelte

@@ -5,10 +5,8 @@
     HISTORY = "/history",
     HISTORY_ID = "/history_id",
     FRIENDS = "/friends",
-    SPECTATE = "/spectate",
     CHANNELS = "/channels",
     LEADERBOARD = "/leaderboard",
-    SPECTATE_GAME = "/spectate_game",
     CREATE_GAME = "/create-game",
     MATCHMAKING = "/matchmaking",
     PROFILE_ID = "/profile_id",

front/volume/src/components/NavBar.svelte

@@ -6,7 +6,6 @@
     import.meta.env.VITE_BACK_PORT;
   export let links = [
     { text: "Home" },
-    { text: "Spectate" },
     { text: "Channels" },
     { text: "History" },
     { text: "Friends" },

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

@@ -5,7 +5,6 @@
   import GameCreation from "./GameCreation.svelte";
   import GameComponent from "./GameComponent.svelte";
   import type { StringDto } from "./dtos/StringDto";
-  import SpectateFriend from "./SpectateFriend.svelte";
   import Matchmaking from "./Matchmaking.svelte";
   import type { MatchmakingDto } from "./dtos/MatchmakingDto";
   import { getUser, store } from "../../Auth";
@@ -92,10 +91,6 @@
         } else if (!data.matchmaking && appState === APPSTATE.MATCHMAKING) {
           setAppState(APPSTATE.HOME);
         }
-      } else if (event == GAME_EVENTS.SPECTATE) {
-        if (data) {
-          gamePlaying = true;
-        }
       } else if (event == GAME_EVENTS.READY) {
         game.youAreReady = true;
       } else {
@@ -173,9 +168,6 @@
     <button on:click={() => setAppState(APPSTATE.CREATE_GAME)}
       >Play with a friend</button
     >
-    <button on:click={() => setAppState(APPSTATE.SPECTATE_GAME)}
-      >Spectate a friend</button
-    >
     <label for="colorPicker">Elements color:</label>
     <ColorPicker bind:color={elementsColor} />
     <label for="colorPicker">Background color:</label>
@@ -192,13 +184,6 @@
       >
         <GameCreation {socket} {invitedUsername} />
       </div>
-    {:else if appState === APPSTATE.SPECTATE_GAME}
-      <div
-        on:click={() => setAppState(APPSTATE.HOME)}
-        on:keydown={() => setAppState(APPSTATE.HOME)}
-      >
-        <SpectateFriend {socket} />
-      </div>
     {/if}
   {:else if !connected}
     Connecting to game server...

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

@@ -1,44 +0,0 @@
-<script lang="ts">
-  import { formatWebsocketData } from "./utils";
-  import { GAME_EVENTS } from "./constants";
-  import type { StringDto } from "./dtos/StringDto";
-
-  export let socket: WebSocket;
-
-  let spectateUsername: string = "Garfield";
-
-  function spectate() {
-    const data: StringDto = { value: spectateUsername };
-    socket.send(formatWebsocketData(GAME_EVENTS.SPECTATE, data));
-  }
-</script>
-
-<div class="overlay">
-  <div class="window" on:click|stopPropagation on:keydown|stopPropagation>
-    <input bind:value={spectateUsername} />
-    <button on:click={spectate}>Spectate</button>
-  </div>
-</div>
-
-<style>
-  .overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 9998;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .window {
-    background-color: #fff;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    padding: 1rem;
-    width: 400px;
-  }
-</style>

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

@@ -8,7 +8,6 @@ export const GAME_EVENTS = {
   GET_GAME_INFO: "GET_GAME_INFO",
   CREATE_GAME: "CREATE_GAME",
   REGISTER_PLAYER: "REGISTER_PLAYER",
-  SPECTATE: "SPECTATE",
   MATCHMAKING: "MATCHMAKING",
   LEAVE_GAME: "LEAVE_GAME",
 };