ui: better username handling

jeffkaufman · Jan 4, 2021 · 3984794 · 3984794
1 parent 8276084
commit 3984794
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 21 deletions.
diff --git a/html/demo.js b/html/demo.js
@@ -351,8 +351,6 @@ persist_checkbox("disableLatencyMeasurement");
 // Persisting select boxes is harder, so we do it manually for inSelect.
 inSelect.addEventListener("change", in_select_change);
 
-window.userName.addEventListener("change", set_controls);
-
 async function enumerate_inputs() {
   var mic_enumerator = new bb.MicEnumerator();
   var mics = await mic_enumerator.mics();
@@ -429,17 +427,11 @@ function set_controls() {
     startButton.style.display = 'none';
   }
 
-  setVisibleIn(window.mainApp,
-               window.userName.value ?
-               allStatesExcept([APP_RUNNING]) :
-               allStatesExcept([APP_TUTORIAL, APP_CHOOSE_CAMERA]));
+  setVisibleIn(window.mainApp, allStatesExcept([APP_RUNNING]))
 
   setVisibleIn(window.inputSelector,
                allStatesExcept(ACTIVE_STATES.concat(
                  [APP_TUTORIAL, APP_CHOOSE_CAMERA])));
-  setVisibleIn(window.nameSelector,
-               allStatesExcept(ACTIVE_STATES.concat(
-                 [APP_TUTORIAL, APP_CHOOSE_CAMERA])));
   setEnabledIn(window.songControls, allStatesExcept([APP_RESTARTING]));
   setEnabledIn(window.chatPost, allStatesExcept([APP_RESTARTING]));
   setEnabledIn(audioOffset, allStatesExcept([APP_RESTARTING]));
@@ -1587,14 +1579,24 @@ function hide_buttons_and_append_answer(element, answer) {
 function tutorial_answer(button) {
   const answer = button.innerText;
   const question = button.parentElement.id;
-  hide_buttons_and_append_answer(button.parentElement, button.innerText);
-  if (question === "q_singing_listening") {
+
+  if (question === "q_name") {
+    if (!window.userName.value) {
+      window.needName.style.display = "block";
+      return;
+    } else {
+      hide_buttons_and_append_answer(button.parentElement, window.userName.value);
+    }
+  } else {
+    hide_buttons_and_append_answer(button.parentElement, button.innerText);
+  }
+
+  if (question === "q_name") {
+    window.q_singing_listening.style.display = 'block';
+  } else if (question === "q_singing_listening") {
     if (answer == "Singing and Listening") {
       window.q_headphones_present.style.display = 'block';
     } else {
-      if (!window.userName.value) {
-        window.userName.value = "listener";
-      }
       start(/*spectatorMode=*/true);
     }
   } else if (question === "q_headphones_present") {

diff --git a/html/index.html b/html/index.html
@@ -79,6 +79,7 @@
   display: none;
 }
 .headphoneAdvice,
+#q_singing_listening,
 #q_headphones_present,
 #q_wired_headphones_available,
 #q_headphones_wired,
@@ -399,6 +400,10 @@
   flex-direction: row;
   justify-content: space-between;
 }
+#needName {
+  display: none;
+  color: red;
+}
 </style>
 
 <link rel="icon"
@@ -631,11 +636,19 @@ <h3>Settings that affect everyone</h3>
   <div id=tutorial_questions>
     Welcome!  This is a program for singing with people over the
     Internet. <span id=eventWelcome></span>
+
     <p>
+    <br>
 
     Before we start, a few questions:
 
-<p>
+    <p>
+
+    <div id=q_name>
+      What's your name? <input id=userName></input>
+      <button>Enter</button>
+      <div id=needName>* we need to know what to call you</div>
+    </div>
 
     <div id=q_singing_listening>
       Are you planning on singing or just listening?
@@ -693,12 +706,6 @@ <h3>Settings that affect everyone</h3>
 <div id=cameraPreview><span>loading...</span></div>
 </div>
 
-<div id=nameSelector>
-
-Enter your name and press enter: <input id=userName></input>
-
-</div>
-
 <div id=mainApp>
 
 <div id=inputSelector>