Add a new profile button that lives at the upper-right of the page

Specifically, to allow the user to change their name.

diff --git a/index.html b/index.html
index 16d1659e8d3c03351d4cc75305858e4a866bf429..9989e40608f5946a60353e6f85b6df2bde206410 100644 (file)
--- a/index.html
+++ b/index.html
@@ -88,7 +88,7 @@
     </p>
 
     <audio loop="" src="/zombo_words.mp3" type="audio/mpeg"></audio>
-    <button id="mute" class="fade volume">
+    <button id="mute" class="menu-button fade volume">
       <div>🔊</div>
       <script>
 const mute = document.querySelector("#mute");
@@ -110,6 +110,10 @@ mute.addEventListener("click", () => {
 
     </button>
 
+    <button id="profile" class="menu-button">
+      <div>👤</div>
+    </button>
+
   </div>
 
   <script src="/socket.io/socket.io.js"></script>
@@ -127,6 +131,7 @@ mute.addEventListener("click", () => {
     const code = document.querySelector("#code");
     const safety= document.querySelector("#safety");
     const spinner = document.querySelector("#spinner");
+    const profile = document.querySelector("#profile");
     var spinner_timeout;
 
     comment.addEventListener('focus', () => {
@@ -138,6 +143,10 @@ mute.addEventListener("click", () => {
         name_dialog.showModal();
     });
 
+    profile.addEventListener('click', () => {
+        name_dialog.showModal();
+    });
+
     name_dialog.addEventListener('close', () => {
         socket.emit('set-name', name.value);
     });