* Chat: invite user to game

front/volume/src/App.svelte

@@ -18,7 +18,6 @@
   import FakeLogin from "./FakeLogin.svelte";
 
   // PROFILE
-
   onMount(() => {
     getUser();
   });
@@ -33,7 +32,7 @@
 
   let userProfile;
   let isIdProfileOpen = false;
-  async function openIdProfile(event) {
+  async function openIdProfile(event: CustomEvent<string>) {
     console.log("Opening profile: " + event.detail);
     isIdProfileOpen = true;
     const res = await fetch(API_URL + "/user/" + event.detail, {
@@ -47,7 +46,6 @@
   }
 
   // HISTORY
-
   let matches: Array<Match>;
   let isHistoryOpen = false;
   function clickHistory() {
@@ -55,7 +53,7 @@
     getHistory();
   }
 
-  export async function getHistory(): Promise<Match[]> {
+  export async function getHistory(): Promise<void> {
     let response = await fetch(API_URL + "/history/" + $store.ftId, {
       credentials: "include",
       mode: "cors",
@@ -64,7 +62,6 @@
   }
 
   // FRIENDS
-
   let friends: Friend[] = [];
   let invits: Friend[] = [];
   let friendsInterval: ReturnType<typeof setInterval>;
@@ -146,6 +143,10 @@
     leaderboard = await getLeader();
   }
 
+  // GAME
+  let pong: Pong;
+
+  // FAKE LOGIN
   let usernameFake = "test";
   let ftIdFake = "42";
   let fakemenu = true;
@@ -184,6 +185,7 @@
               chatMessages={selectedChannel.messages}
               on:view-profile={openIdProfile}
               on:add-friend={addFriend}
+              on:invite-to-game={pong.inviteToGame}
             />
           </div>
         {/if}
@@ -256,7 +258,7 @@
         <button on:click={impersonate}>Impersonate</button>
         <button on:click={() => fakemenu = false}>No impersonate</button>
       {:else}
-        <Pong {fakeUser} />
+        <Pong bind:this={pong} {fakeUser} />
       {/if}
     {/if}
   </div>

front/volume/src/components/Chat2.svelte

@@ -50,8 +50,8 @@
         <p class="message">
           <span
             class="message-name"
-            on:click={openProfile(message.author)}
+            on:click={() => openProfile(message.author)}
-            on:keydown={openProfile(message.author)}
+            on:keydown={() => openProfile(message.author)}
             style="cursor: pointer;"
           >
             {message.author}

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

@@ -7,13 +7,13 @@
   import { store } from "../../Auth";
 
   export let socket: WebSocket;
+  export let invitedUsername: string;
 
   let map: Map = new Map(DEFAULT_MAP_SIZE.clone(), []);
-  let otherUsername: string = "Garfield";
 
   function createGame() {
     const data: GameCreationDto = {
-      playerNames: [$store.username, otherUsername],
+      playerNames: [$store.username, invitedUsername],
       map,
     };
     socket.send(formatWebsocketData(GAME_EVENTS.CREATE_GAME, data));
@@ -23,9 +23,9 @@
 <div class="overlay">
   <div class="window" on:click|stopPropagation on:keydown|stopPropagation>
     Friend:
-    <input bind:value={otherUsername} />
+    <input bind:value={invitedUsername} />
     <button on:click={createGame}>
-      Create game vs {otherUsername}
+      Create game vs {invitedUsername}
     </button>
     <MapCustomization {map} />
   </div>

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

@@ -11,7 +11,12 @@
   import { getUser, store } from "../../Auth";
   import ColorPicker from "./ColorPicker.svelte";
 
-  export let fakeUser;
+  export function inviteToGame(event: CustomEvent<string>) {
+    createMatchWindow = true;
+    invitedUsername = event.detail;
+  }
+
+  export let fakeUser: boolean;
 
   const SERVER_URL = `ws://${import.meta.env.VITE_HOST}:${
     import.meta.env.VITE_BACK_PORT
@@ -31,6 +36,7 @@
   let renderCanvas: HTMLCanvasElement;
   let canvas: HTMLCanvasElement;
   let context: CanvasRenderingContext2D;
+  let invitedUsername: string = "";
 
   function setupSocket(
     _renderCanvas: HTMLCanvasElement,
@@ -102,7 +108,8 @@
   }
 
   async function onSocketOpen() {
-    await getUser();
+    if (!fakeUser)
+      await getUser();
     void logIn();
     connected = true;
   }
@@ -173,7 +180,7 @@
         on:click={() => (createMatchWindow = false)}
         on:keydown={() => (createMatchWindow = false)}
       >
-        <GameCreation {socket} />
+        <GameCreation {socket} {invitedUsername} />
       </div>
     {:else if spectateWindow}
       <div