ui: Add more explanatory text.

Fixes #188.  Fixeds #189.

html/demo.js

@@ -1571,6 +1571,10 @@ async function start_singing() {
       window.buckets.style.display = showBuckets ? "flex" : "none";
       window.unbucketedUsers.style.display = showBuckets ? "none" : "block";
 
+      const showBucketingGuide = hasLeader && !song_active();
+      window.bucketingGuide.style.display =
+        showBucketingGuide ? "block" : "none";
+
       update_active_users(user_summary, server_sample_rate, showBuckets,
                           hasLeader, imLeading, n_connected_users);
     }

html/index.html

@@ -213,9 +213,9 @@
 #runningStatus {
   display: inline-block;
 }
-
-
-
+#bucketingGuide {
+  display: none;
+}
 body {
   margin: 0;
 }
@@ -408,6 +408,9 @@
 #roomfull, #tutorial {
   display: none;
 }
+#aboveBuckets > * {
+  margin-bottom: 1em;
+}
 </style>
 
 <link rel="icon"
@@ -884,6 +887,23 @@ <h3>Settings that affect everyone</h3>
     <span>Due to lag, your singing is not included</span>
     <button id=unlagmute>Try Again</button>
   </div>
+
+  <div id=bucketingGuide>
+
+    Each person is in a bucket. You can hear the people in earlier
+    buckets, and you can be heard by the people in later buckets. You
+    can't hear other people in your own bucket.  You can move between
+    buckets by pressing the "join" button in the upper right.
+
+    <p>
+
+    If you are a strong singer or know the song well you might choose
+    an earlier bucket, while if you are less confident you might
+    choose a later one.  Similarly, if you are in a noisy environment
+    or are not wearing headphones, you might also choose a later one.
+
+  </div>
+
 </div>