Now displays a list of keyboard shortcuts

linfindel · Jan 17, 2024 · cd507b7 · cd507b7
1 parent c41474a
commit cd507b7
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 7 deletions.
diff --git a/settings.html b/settings.html
@@ -61,6 +61,42 @@ <h1>Colour</h1>
       </div>
     </div>
 
+    <div class="column-flat" style="width: 100%;">
+      <div class="card-flat-bottom text-center" style="width: 100%;">
+        <h1>Keyboard Shortcuts</h1>
+      </div>
+
+      <div class="row-flat" style="width: calc(100% + 5rem);">
+        <div class="card-flat text-center" style="flex: 1;">
+          <p>Play/pause</p>
+        </div>
+
+        <div class="card-flat text-center" style="flex: 1;">
+          <p>Spacebar</p>
+        </div>
+      </div>
+
+      <div class="row-flat" style="width: calc(100% + 5rem);">
+        <div class="card-flat text-center" style="flex: 1;">
+          <p>Stop</p>
+        </div>
+
+        <div class="card-flat text-center" style="flex: 1;">
+          <p>S</p>
+        </div>
+      </div>
+
+      <div class="row-flat" style="width: calc(100% + 5rem);">
+        <div class="card-flat-bottom-left-alt text-center" style="flex: 1;">
+          <p>Toggle repeat</p>
+        </div>
+
+        <div class="card-flat-bottom-right-alt text-center" style="flex: 1;">
+          <p>R</p>
+        </div>
+      </div>
+    </div>
+
     <div id="about-card" class="card column" style="opacity: 0; pointer-events: none; width: 100%;">
       <div class="text-center">
         <h1 id="version">Loading...</h1>

diff --git a/settings.js b/settings.js
@@ -73,7 +73,7 @@ function applyColour() {
         background-color: ${colour};
       }
 
-      .card, .card-flat-bottom {
+      .card, .card-flat-bottom, .card-flat, .card-flat-top, .card-flat-bottom-left-alt, .card-flat-bottom-right-alt {
         background-color: ${colour};
       }
 
@@ -122,13 +122,19 @@ function applyColour() {
       document.getElementById("reset").style.backgroundColor = "";
     });
 
-    document.getElementById("debug").addEventListener("mouseover", () => {
-      document.getElementById("debug").style.backgroundColor = colour.replace("0.25", "0.5");
-    });
+    try {
+      document.getElementById("debug").addEventListener("mouseover", () => {
+        document.getElementById("debug").style.backgroundColor = colour.replace("0.25", "0.5");
+      });
+
+      document.getElementById("debug").addEventListener("mouseleave", () => {
+        document.getElementById("debug").style.backgroundColor = "";
+      });
+    }
 
-    document.getElementById("debug").addEventListener("mouseleave", () => {
-      document.getElementById("debug").style.backgroundColor = "";
-    });
+    catch {
+      console.log("Debug disabled, skipping styling of button")
+    }
   }
 
   console.log("Colour:", colour);