Allow users to update their name

html/app.js

@@ -858,6 +858,11 @@ export class SingerClient extends EventTarget {
     });
   }
 
+  updateUserName(newUserName) {
+    this.username = newUserName;
+    this.connection.updateUserName(newUserName);
+  }
+
   get speakerMuted() {
     return this.speakerMuted_;
   }
@@ -1188,6 +1193,10 @@ export class SingerClientConnection {
     this.running = true;
   }
 
+  updateUserName(newUserName) {
+    this.username = newUserName;
+  }
+
   async start_singing() {
     return this.server_connection.start();
   }

html/demo.js

@@ -1759,6 +1759,18 @@ window.headerExpandCollapse.addEventListener("click", () => {
   window.headerExpandCollapse.innerHTML = headerCollapsed ? "↓" : "↑";
 });
 
+window.changeNameButton.addEventListener("click", () => {
+  window.userName.value = window.changeName.value;
+  localStorage.setItem("userName", window.userName.value);
+  if (singer_client) {
+    singer_client.updateUserName(window.userName.value);
+  }
+});
+window.userName.addEventListener("change", () => {
+  window.changeName.value = window.userName.value;
+});
+window.changeName.value = window.userName.value;
+
 document.querySelectorAll("#tutorial_questions button").forEach(
   (button) => button.addEventListener("click", () => tutorial_answer(button)));
 

html/index.html

@@ -931,6 +931,11 @@ <h3>Settings that affect everyone</h3>
   <input type="range" min="0" max="160" value="100" id="backingVolumeSlider">
   </div>
 
+  <div>
+    <input id=changeName></input>
+    <button id=changeNameButton>Update</button>
+  </div>
+
   <!-- DELAY_INTERVAL * LAYERING_DEPTH -->
   <div>Time Travel: <input type=text id=audioOffset value="18">s</div>
 

server.py

@@ -540,6 +540,7 @@ def update_users(userid, username, server_clock, client_read_clock) -> None:
 
     users[userid].last_heard_server_clock = server_clock
     users[userid].delay_samples = delay_samples
+    users[userid].name = username
 
 def clean_users(server_clock) -> None:
     to_delete = []