* Changing username now changes it in game too

front/volume/src/App.svelte

@@ -89,12 +89,12 @@
     setAppState(APPSTATE.PROFILE);
   }
 
-  let profileUsername: string = "";
+  let profileUsername: string = $store?.username ?? "";
   async function openIdProfile(event: CustomEvent<string>) {
     profileUsername = event.detail;
     setAppState(APPSTATE.PROFILE_ID);
   }
-  $: console.log(profileUsername)
+  $: console.log("New profileUsername:", profileUsername)
 
   async function getDMs(username: string): Promise<Response | null> {
 	const res = await fetch(API_URL + "/channels/dms/" + username, {
@@ -177,6 +177,7 @@
   // GAME
   let pong: Pong;
   let gamePlaying: boolean = false;
+  let resetGameConnection: () => void;
 
   // FAKE LOGIN
   let usernameFake = "test";
@@ -268,7 +269,7 @@
     {/if}
     {#if appState === APPSTATE.PROFILE}
       <div on:click={resetAppState} on:keydown={resetAppState}>
-        <Profile {gamePlaying} on:view-history={() => setAppState(APPSTATE.HISTORY_ID)} />
+        <Profile {resetGameConnection} {gamePlaying} bind:username={profileUsername} on:view-history={() => setAppState(APPSTATE.HISTORY_ID)} />
       </div>
     {/if}
     {#if appState === APPSTATE.PROFILE_ID}
@@ -280,7 +281,7 @@
       >
         <Profile
           {gamePlaying}
-          username={profileUsername}
+          bind:username={profileUsername}
           on:view-history={() => setAppState(APPSTATE.HISTORY_ID)}
         />
       </div>
@@ -291,7 +292,7 @@
       <button on:click={impersonate}>Impersonate</button>
       <button on:click={() => (fakemenu = false)}>No impersonate</button>
     {:else}
-      <Pong bind:gamePlaying={gamePlaying} bind:this={pong} {appState} {setAppState} {fakeUser} />
+      <Pong bind:gamePlaying={gamePlaying} bind:this={pong} {appState} {setAppState} {fakeUser} bind:resetGameConnection={resetGameConnection} />
     {/if}
   {/if}
 

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

@@ -18,6 +18,13 @@
     invitedUsername = event.detail;
   }
 
+  export function resetGameConnection() {
+    connected = false;
+    loggedIn = false;
+    failedLogIn = false;
+    setupSocket(renderCanvas, canvas, context);
+  }
+
   export let fakeUser: boolean;
   export let appState: string;
   export let setAppState: (newState: APPSTATE | string) => void;
@@ -56,6 +63,8 @@
       backgroundColor
     );
 
+    socket.on("connect", onSocketOpen);
+    socket.on("disconnect", onSocketClose);
     socket.on(GAME_EVENTS.START_GAME, () => {
       game.start(socket);
     });
@@ -100,9 +109,6 @@
     socket.on(GAME_EVENTS.READY, (succeeded: boolean) => {
       game.youAreReady = succeeded;
     });
-
-    socket.on("connect", onSocketOpen);
-    socket.on("disconnect", onSocketClose);
   }
 
   async function onSocketOpen() {

front/volume/src/components/Profile.svelte

@@ -20,9 +20,11 @@
 
   export let username: string = $store.username;
   export let gamePlaying: boolean;
+  export let resetGameConnection: () => void = () => {};
 
   let edit: boolean = true;
   let user: Player = $store;
+  let newUsername: string = $store.username;
 
   let avatarForm: HTMLFormElement;
 
@@ -46,16 +48,22 @@
       popup.set(bind(Alert, { message: "Cannot change username while playing.", form: false }))
       return;
     }
+    if ($store.username === newUsername) {
+      popup.set(bind(Alert, { message: `Username is already set to ${newUsername}.`, form: false }))
+      return;
+    }
 
     let response = await fetch(API_URL + "/users", {
       headers: { "content-type": "application/json" },
       method: "POST",
-      body: JSON.stringify({ username: user.username }),
+      body: JSON.stringify({ username: newUsername }),
       credentials: "include",
     });
     if (response.ok) {
-      $store.username = user.username;
+      $store.username = newUsername;
+      username = newUsername;
       popup.set(bind(Alert, { message: "Succefully changed username.", form: false }))
+      resetGameConnection();
     }
   }
 
@@ -79,7 +87,7 @@
 
 <div class="overlay">
   <div class="profile" on:click|stopPropagation on:keydown|stopPropagation>
-    <h3>===| <mark>{user.username}'s Profile</mark> |===</h3>
+    <h3>===| <mark>{username}'s Profile</mark> |===</h3>
     <div class="profile-header">
       {#if !edit}
         <img src={`${API_URL}/users/${user.ftId}/avatar`} alt="avatar" class="profile-img" />
@@ -109,7 +117,7 @@
     </div>
     <div class="profile-body">
       <p>
-        <button on:click={() => dispatch("view-history", user.username)}
+        <button on:click={() => dispatch("view-history")}
           >View History</button
         >
       </p>
@@ -124,7 +132,7 @@
         class="username"
         on:submit|preventDefault={handleSubmit}
       >
-        <input type="text" id="username" bind:value={user.username} required/>
+        <input type="text" id="username" bind:value={newUsername} required/>
         <button type="submit" class="username" form="username-form"
           >Change</button
         >