* Pong: leaver is now loser

* Updated overlay CSS class to zindex 50: lower than alert popups

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

@@ -117,13 +117,26 @@ export class Game {
     }
   }
 
-  stop (): void {
+  stop (nameWhoLeft?: string): void {
     if (this.timer !== null) {
       clearInterval(this.timer)
     }
+    let nameWhoWon: string
+    if (this.players[0].score > this.players[1].score) {
+      nameWhoWon = this.players[0].name
+    } else {
+      nameWhoWon = this.players[1].name
+    }
+    if (nameWhoLeft !== undefined) {
+      this.players.forEach((p) => {
+        if (p.name !== nameWhoLeft) {
+          nameWhoWon = p.name
+        }
+      })
+    }
     this.timer = null
     this.pongService
-      .saveResult(this.players, this.ranked, DEFAULT_WIN_SCORE)
+      .saveResult(this.players, this.ranked, nameWhoWon)
       .then(() => {
         this.gameStoppedCallback(this.players[0].name)
         this.players = []

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

@@ -46,10 +46,10 @@ export class PongGateway implements OnGatewayConnection, OnGatewayDisconnect {
   ): void {
     const name: string | undefined = this.socketToPlayerName.get(client)
     const game: Game | undefined = this.games.playerGame(name)
-    if (game !== undefined) {
-      game.stop()
-    }
     if (name !== undefined) {
+      if (game !== undefined) {
+        game.stop(name)
+      }
       console.log('Disconnected ', this.socketToPlayerName.get(client))
       this.matchmakingQueue.removePlayer(name)
       this.socketToPlayerName.delete(client)
@@ -66,7 +66,7 @@ export class PongGateway implements OnGatewayConnection, OnGatewayDisconnect {
   ): Promise<{ event: string, data: boolean }> {
     let succeeded: boolean = false
     const user = await this.usersService.findUserByName(playerName.value)
-    console.log(socketKey.value, user?.socketKey)
+    // console.log(socketKey.value, user?.socketKey)
     if (
       user !== null &&
       user.socketKey === socketKey.value &&

back/volume/src/pong/pong.service.ts

@@ -17,12 +17,10 @@ export class PongService {
 
   async updateStats (
     player: User,
-    i: number,
-    result: Result,
-    maxScore: number
+    nameWhoWon: string
   ): Promise<void> {
     player.matchs++
-    if (result.score[i] === maxScore) player.wins++
+    if (player.username === nameWhoWon) player.wins++
     else player.looses++
     player.winrate = (100 * player.wins) / player.matchs
   }
@@ -30,11 +28,11 @@ export class PongService {
   async updatePlayer (
     i: number,
     result: Result,
-    maxScore: number
+    nameWhoWon: string
   ): Promise<void> {
     const player: User | null = result.players[i]
     if (player == null) return
-    if (result.ranked) await this.updateStats(player, i, result, maxScore)
+    if (result.ranked) await this.updateStats(player, nameWhoWon)
     player.results.push(result)
     player.status = 'online'
     await this.usersService.save(player)
@@ -49,7 +47,7 @@ export class PongService {
   async saveResult (
     players: Player[],
     ranked: boolean,
-    maxScore: number
+    nameWhoWon: string
   ): Promise<void> {
     const result = new Result()
     const ply = new Array<User | null>()
@@ -59,8 +57,8 @@ export class PongService {
     result.players = ply
     result.score = [players[0].score, players[1].score]
     await this.resultsRepository.save(result)
-    await this.updatePlayer(0, result, maxScore)
-    await this.updatePlayer(1, result, maxScore)
+    await this.updatePlayer(0, result, nameWhoWon)
+    await this.updatePlayer(1, result, nameWhoWon)
   }
 
   async getHistory (

front/volume/src/App.svelte

@@ -172,6 +172,7 @@
 
   // GAME
   let pong: Pong;
+  let gamePlaying: boolean = false;
 
   // FAKE LOGIN
   let usernameFake = "test";
@@ -260,7 +261,7 @@
     {/if}
     {#if appState === APPSTATE.PROFILE}
       <div on:click={resetAppState} on:keydown={resetAppState}>
-        <Profile on:view-history={() => setAppState(APPSTATE.HISTORY_ID)} />
+        <Profile {gamePlaying} on:view-history={() => setAppState(APPSTATE.HISTORY_ID)} />
       </div>
     {/if}
     {#if appState === APPSTATE.PROFILE_ID}
@@ -271,6 +272,7 @@
           setAppState(APPSTATE.CHANNELS + "#" + selectedChannel.name)}
       >
         <Profile
+          {gamePlaying}
           username={profileUsername}
           on:view-history={() => setAppState(APPSTATE.HISTORY_ID)}
         />
@@ -282,7 +284,7 @@
       <button on:click={impersonate}>Impersonate</button>
       <button on:click={() => (fakemenu = false)}>No impersonate</button>
     {:else}
-      <Pong bind:this={pong} {appState} {setAppState} {fakeUser} />
+      <Pong bind:gamePlaying={gamePlaying} bind:this={pong} {appState} {setAppState} {fakeUser} />
     {/if}
   {/if}
 

front/volume/src/components/Alert/Alert.svelte

@@ -1,65 +1,58 @@
-	<script>
-  import { getContext } from 'svelte';
-  	export let message;
-  	export let form = true;
-	export let onCancel = () => {};
-	export let onOkay = () => {};
-	import { content, popup } from './content'
-	
-
-	let value;
-	let onChange = () => {
-		$content=''
-	};
-	
-	function _onCancel() {
-		onCancel();
-		$content=''
-		popup.set(null);
-	}
-	
-	function _onOkay() {
-		onOkay();
-		$content=value
-		popup.set(null);
-	}
-	
-	$: onChange()
+<script>
+  export let message;
+  export let form = true;
+  export let onCancel = () => {};
+  export let onOkay = () => {};
+  import { content, popup } from "./content";
+
+  let value;
+  let onChange = () => {
+    $content = "";
+  };
+
+  function _onCancel() {
+    onCancel();
+    $content = "";
+    popup.set(null);
+  }
+
+  function _onOkay() {
+    onOkay();
+    $content = value;
+    popup.set(null);
+  }
+
+  $: onChange();
 </script>
 
+<div class="overlay">
+  <h2>{message}</h2>
+  {#if form === true}
+    <input
+      type="text"
+      bind:value
+      on:keydown={(e) => e.which === 13 && _onOkay()}
+    />
+  {/if}
+
+  <div class="buttons">
+    <button on:click={_onCancel}> Cancel </button>
+    <button on:click={_onOkay}> Okay </button>
+  </div>
+</div>
+
 <style>
   h2 {
-		font-size: 2rem;
-		text-align: center;
-	}
-	
-	input {
-		width: 100%;
-	}
-	
-	.buttons {
-		display: flex;
-		justify-content: space-between;
-	}
-	
-	.hidden {
-		display: none;
-	}
+    font-size: 2rem;
+    text-align: center;
+  }
+
+  input {
+    width: 100%;
+  }
+
+  .buttons {
+    display: flex;
+    justify-content: space-between;
+  }
 </style>
-
-<h2>{message}</h2>
-{#if form === true}
-	<input
-    type="text"
-	  bind:value
-	  on:keydown={e => e.which === 13 && _onOkay()} />
-{/if}
-
-<div class="buttons">
-	<button on:click={_onCancel}>
-		Cancel
-	</button>
-	<button on:click={_onOkay}>
-		Okay
-	</button>
-</div>

front/volume/src/components/Friends.svelte

@@ -108,7 +108,7 @@
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
-    z-index: 9998;
+    z-index: 50;
     display: flex;
     justify-content: center;
     align-items: center;

front/volume/src/components/Leaderboard.svelte

@@ -60,7 +60,7 @@
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
-    z-index: 9998;
+    z-index: 50;
     display: flex;
     justify-content: center;
     align-items: center;

front/volume/src/components/MatchHistory.svelte

@@ -110,7 +110,7 @@
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
-    z-index: 9998;
+    z-index: 50;
     display: flex;
     justify-content: center;
     align-items: center;

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

@@ -67,7 +67,7 @@
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
-    z-index: 9998;
+    z-index: 50;
     display: flex;
     justify-content: center;
     align-items: center;

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

@@ -17,7 +17,7 @@
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
-    z-index: 9998;
+    z-index: 50;
     display: flex;
     justify-content: center;
     align-items: center;

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

@@ -26,7 +26,7 @@
     import.meta.env.VITE_BACK_PORT
   }`;
 
-  let gamePlaying: boolean = false;
+  export let gamePlaying: boolean;
   let connected: boolean = false;
   let loggedIn: boolean = false;
   let failedLogIn: boolean = false;

front/volume/src/components/Profile.svelte

@@ -7,14 +7,19 @@
     winrate: number;
     rank: number;
     twoFA: boolean;
+    ftId: number;
   }
 </script>
 
 <script lang="ts">
   import { createEventDispatcher, onMount } from "svelte";
+  import { bind } from 'svelte-simple-modal';
   import { API_URL, store, logout } from "../Auth";
+  import Alert from "./Alert/Alert.svelte";
+  import { popup } from "./Alert/content";
 
   export let username: string = $store.username;
+  export let gamePlaying: boolean;
 
   let edit: boolean = true;
   let user: Player = $store;
@@ -37,6 +42,11 @@
 
   const dispatch = createEventDispatcher();
   async function handleSubmit() {
+    if (gamePlaying) {
+      popup.set(bind(Alert, { message:"Cannot change username while playing.", form : false }))
+      return;
+    }
+
     let response = await fetch(API_URL + "/users", {
       headers: { "content-type": "application/json" },
       method: "POST",
@@ -44,8 +54,8 @@
       credentials: "include",
     });
     if (response.ok) {
-      alert("Succefully changed username.");
       $store.username = user.username;
+      popup.set(bind(Alert, { message: "Succefully changed username.", form : false }))
     }
   }
 
@@ -59,7 +69,10 @@
       credentials: "include",
     });
     if (response.ok) {
-      alert("Succefully " + (user.twoFA ? "enabled" : "disabled") + " 2FA");
+      popup.set(bind(Alert, {
+        message: "Succefully " + (user.twoFA ? "enabled" : "disabled") + " 2FA",
+        form : false
+      }))
     }
   }
 </script>
@@ -136,7 +149,7 @@
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
-    z-index: 9998;
+    z-index: 50;
     display: flex;
     justify-content: center;
     align-items: center;