* (again) Modifications for fake users in pong game

front/volume/src/App.svelte

@@ -14,8 +14,8 @@
   import type { ChannelsType } from "./components/Channels.svelte";
   import Leaderboard from "./components/Leaderboard.svelte";
   import type { Player } from "./components/Leaderboard.svelte";
-
   import { store, getUser, login, logout, API_URL } from "./Auth";
+  import FakeLogin from "./FakeLogin.svelte";
 
   // PROFILE
 
@@ -145,6 +145,20 @@
     isLeaderboardOpen = true;
     leaderboard = await getLeader();
   }
+
+  let usernameFake = "test";
+  let ftIdFake = "42";
+  let fakemenu = true;
+  let fakeUser = false;
+  function impersonate() {
+    const user = {
+      username: "test",
+      socketKey: "42",
+    };
+    store.set(user)
+    fakeUser = true
+    fakemenu = false 
+  }
 </script>
 
 <main>
@@ -236,7 +250,14 @@
           <Profile user={userProfile} edit={0} />
         </div>
       {/if}
-      <Pong />
+
+      {#if fakemenu}
+        <FakeLogin username={usernameFake} ftId={ftIdFake} />
+        <button on:click={impersonate}>Impersonate</button>
+        <button on:click={() => fakemenu = false}>No impersonate</button>
+      {:else}
+        <Pong {fakeUser} />
+      {/if}
     {/if}
   </div>
 </main>

front/volume/src/FakeLogin.svelte

@@ -0,0 +1,36 @@
+<script>
+  import { API_URL } from "./Auth";
+
+  export let username;
+  export let ftId;
+  let result = null;
+
+  async function doPost() {
+      const res = await fetch(API_URL + "/" + ftId, {
+      method: "POST",
+      credentials: "include",
+      mode: "cors",
+      headers: {
+          "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+          ftId,
+          username,
+          socketKey: "42",
+          avatar: "no avatar",
+      }),
+      });
+
+      const json = await res.json();
+      result = JSON.stringify(json);
+      console.log(result);
+  }
+</script>
+
+<div>
+  <input bind:value={username} />
+  <input bind:value={ftId} />
+  <button type="button" on:click={doPost}> Post it. </button>
+  <p>Result: {result}</p>
+</div>
+  

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

@@ -4,8 +4,8 @@
   import { DEFAULT_MAP_SIZE, GAME_EVENTS } from "./constants";
   import MapCustomization from "./MapCustomization.svelte";
   import type { GameCreationDto } from "./dtos/GameCreationDto";
+  import { store } from "../../Auth";
 
-  export let username: string;
   export let socket: WebSocket;
 
   let map: Map = new Map(DEFAULT_MAP_SIZE.clone(), []);
@@ -13,7 +13,7 @@
 
   function createGame() {
     const data: GameCreationDto = {
-      playerNames: [username, otherUsername],
+      playerNames: [$store.username, otherUsername],
       map,
     };
     socket.send(formatWebsocketData(GAME_EVENTS.CREATE_GAME, data));

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

@@ -11,6 +11,8 @@
   import { getUser, store } from "../../Auth";
   import ColorPicker from "./ColorPicker.svelte";
 
+  export let fakeUser;
+
   const SERVER_URL = `ws://${import.meta.env.VITE_HOST}:${
     import.meta.env.VITE_BACK_PORT
   }`;
@@ -166,7 +168,6 @@
       <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)}