Update cimbar.js with 0.6 modes

We're replacing the old 8-color config in the UI with the 0.6 version of 8x8 4-color -- "mode B". The old (0.5) 4-color config will be "mode 4C", kept for backwards compatibility reasons.
sz3 · Feb 4, 2024 · 4862400 · 4862400
1 parent 796f481
commit 4862400
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 32 deletions.
diff --git a/web/index.html b/web/index.html
@@ -80,10 +80,10 @@
 }
 
 /* options */
-#nav-container a.c4, #nav-container a.c8 {
+#nav-container a.mode-b, #nav-container a.mode-4c {
   color: #555;
 }
-#nav-container.c4 a.c4, #nav-container.c8 a.c8 {
+#nav-container.mode-b a.mode-b, #nav-container.mode-4c a.mode-4c {
   color: #9fa6b2;
 }
 
@@ -157,23 +157,6 @@
   box-shadow: 0px 0px 5px #ff00ff, 0px 0px 2px #ff00ff;
 }
 
-#nav-container.c8 .icon-bar:nth-of-type(1) {
-  background-image: linear-gradient(90deg, rgb(255,255,255) 45%,rgb(127,127,255) 55%);
-  box-shadow: 0px 0px 5px #ffffff, 0px 0px 2px #7f7fff;
-}
-#nav-container.c8 .icon-bar:nth-of-type(2) {
-  background-image: linear-gradient(90deg, rgb(255,0,255) 45%,rgb(255,159,0) 55%);
-  box-shadow: 0px 0px 5px #ff00ff, 0px 0px 2px #ff00ff;
-}
-#nav-container.c8 .icon-bar:nth-of-type(3) {
-  background-image: linear-gradient(90deg, rgb(255,255,0) 45%,rgb(255,65,65) 55%);
-  box-shadow: 0px 0px 5px #ffff00, 0px 0px 2px #ff0000;
-}
-#nav-container.c8 .icon-bar:nth-of-type(4) {
-  background-image: linear-gradient(90deg, rgb(0,255,255) 45%,rgb(0,255,0) 55%);
-  box-shadow: 0px 0px 5px #00ff00, 0px 0px 2px #00ff00;
-}
-
 #nav-container:focus-within #nav-button {
   pointer-events: none;
 }
@@ -271,7 +254,7 @@
 
 <input style="display:none;" type="file" name="file_input" id="file_input" onchange="Main.fileInput(this);" />
 
-<div id="nav-container" class="c4">
+<div id="nav-container" class="mode-b">
     <div class="bg" onclick="Main.blurNav();"></div>
     <button id="nav-button" tabindex="0" onclick="Main.clickNav();">
       <span class="icon-bar"></span>
@@ -285,8 +268,8 @@
         <li><a class="attention" id="nav-find-file-link" href="javascript:void(0)" onclick="Main.clickFileInput()">Find File</a></li>
         <li><a href="javascript:void(0)" onclick="Main.toggleFullscreen()">Fullscreen</a></li>
         <hr>
-        <li><a class="c4" href="javascript:void(0)" onclick="Main.setColorBits(2)">4-color</a></li>
-        <li><a class="c8" href="javascript:void(0)" onclick="Main.setColorBits(3)">8-color</a></li>
+        <li><a class="mode-b" href="javascript:void(0)" onclick="Main.setMode('B')">Mode B</a></li>
+        <li><a class="mode-4c" href="javascript:void(0)" onclick="Main.setMode('4C')">Mode 4C</a></li>
         <li class="small"><a href="https://github.com/sz3/libcimbar">github</a></li>
         <li class="small"><a href="https://github.com/sz3/cfc/releases/latest">android app</a></li>
       </ul>

diff --git a/web/main.js b/web/main.js
@@ -154,20 +154,21 @@ return {
     invisi.classList.add("active");
   },
 
-  setColorBits : function(color_bits)
+  setMode : function(mode_str)
   {
-    Module._configure(color_bits, 255, 255, true);
+    var is_4c = (mode_str == "4C");
+    Module._configure(2, 255, 255, is_4c);
 
     var nav = document.getElementById("nav-container");
-    if (color_bits == 2) {
-      nav.classList.remove("c8");
-      nav.classList.add("c4");
-    } else if (color_bits >= 3) {
-      nav.classList.add("c8");
-      nav.classList.remove("c4");
+    if (is_4c) {
+      nav.classList.remove("mode-b");
+      nav.classList.add("mode-4c");
+    } else if (mode_str == "B") {
+      nav.classList.add("mode-b");
+      nav.classList.remove("mode-4c");
     } else {
-      nav.classList.remove("c4");
-      nav.classList.remove("c8");
+      nav.classList.remove("mode-b");
+      nav.classList.remove("mode-4c");
     }
   },