collapse down the UI for mode autodetect

I don't know if this is really better than the other way, but it *is*
less real estate...

Author: sz3

web/recv.html

@@ -129,16 +129,12 @@
 
     /* options */
     #nav-container a.mode-auto,
-    #nav-container a.mode-b,
-    #nav-container a.mode-bm,
-    #nav-container a.mode-4c {
+    #nav-container a.mode-b {
       color: #555;
     }
 
     #nav-container.mode-auto a.mode-auto,
-    #nav-container.mode-b a.mode-b,
-    #nav-container.mode-bm a.mode-bm,
-    #nav-container.mode-4c a.mode-4c {
+    #nav-container.mode-b a.mode-b {
       color: #9fa6b2;
     }
 
@@ -329,7 +325,7 @@
 
     #nav-content li.modesel a {
       display: inline-block;
-      width: 2em;
+      width: 4em;
     }
 
     #nav-content li:hover {
@@ -397,11 +393,10 @@
     </button>
     <div id="nav-content" tabindex="-1">
       <ul>
-        <li><a class="mode-auto" href="javascript:void(0)" onclick="Recv.setMode('Auto')">Mode auto</a></li>
         <li class="modesel">
-          <a class="mode-b" href="javascript:void(0)" onclick="Recv.setMode('B')">B</a>
-          <a class="mode-bm" href="javascript:void(0)" onclick="Recv.setMode('Bm')">Bm</a>
-          <a class="mode-4c" href="javascript:void(0)" onclick="Recv.setMode('4C')">4C</a>
+          <h4>Mode</h4>
+          <a class="mode-auto" href="javascript:void(0)" onclick="Recv.setMode('Auto')">Auto</a>
+          <a class="mode-b" id="mode-val" href="javascript:void(0)" onclick="Recv.setMode(this.textContent)">B</a>
         </li>
         <li class="small"><a href="javascript:void(0)" onclick="Recv.showDebug()">Debug</a></li>
         <li class="small"><a href="javascript:void(0)" onclick="Recv.toggleFullscreen()">Fullscreen</a></li>

web/recv.js

@@ -392,48 +392,45 @@ var Recv = function () {
       document.getElementById("nav-content").blur();
     },
 
-    setMode: function (mode_str) {
-      let modeVal = mode_str;
-      if (modeVal == "4C") {
-        modeVal = 4;
-      }
-      else if (modeVal == "Bm") {
-        modeVal = 67;
-      }
-      else if (modeVal == "B") {
-        modeVal = 68;
+    setMode: function (modeVal) {
+      // these should be moved elsewhere...
+      const modeToString = {
+        4: "4C",
+        8: "8C",
+        67: "Bm",
+        68: "B"
+      };
+      let modeStringToVal = {
+        "Auto": 0
+      };
+      for (const val in modeToString) {
+        modeStringToVal[modeToString[val]] = val;
       }
-      else if (modeVal == "Auto") {
-        modeVal = 0;
+
+      if (modeVal in modeStringToVal) {
+        modeVal = modeStringToVal[modeVal];
       }
-      // set in main thread
+
+      // configure wasm in main thread
       _mode = modeVal;
       if (_mode > 0) {
         Module._cimbard_configure_decode(_mode);
         Sink.allocate();
       }
 
+      // update ui
+      if (_mode > 0) {
+        var nav = document.getElementById("mode-val");
+        nav.innerHTML = modeToString[_mode];
+      }
+
       var nav = document.getElementById("nav-container");
-      if (modeVal == 4) {
-        nav.classList.add("mode-4c");
-        nav.classList.remove("mode-auto");
+      if (_mode == 0) {
+        nav.classList.add("mode-auto");
         nav.classList.remove("mode-b");
-        nav.classList.remove("mode-bm");
-      } else if (modeVal == 68) {
+      } else {
         nav.classList.add("mode-b");
         nav.classList.remove("mode-auto");
-        nav.classList.remove("mode-bm");
-        nav.classList.remove("mode-4c");
-      } else if (modeVal == 67) {
-        nav.classList.add("mode-bm");
-        nav.classList.remove("mode-auto");
-        nav.classList.remove("mode-b");
-        nav.classList.remove("mode-4c");
-      } else {
-        nav.classList.add("mode-auto");
-        nav.classList.remove("mode-b");
-        nav.classList.remove("mode-bm");
-        nav.classList.remove("mode-4c");
       }
     },