Add an option to set the bottom-right chord

autokalimba.js

@@ -263,6 +263,11 @@ window.addEventListener("DOMContentLoaded", (event) => {
   $("#strum").onchange = (e) => {
     strumSetting = Number(e.target.value);
   };
+  $("#select-special-chord").onchange = (e) => {
+    const [label, data] = e.target.value.split(",");
+    $("#special-chord-button").innerText = label;
+    $("#special-chord-button").dataset.chord = data;
+  };
   $("#hue").value = 0;
   $("#hue").oninput = $("#hue").onchange = (e) => {
     document.body.style.filter = `hue-rotate(${e.target.value}deg)`;
@@ -363,9 +368,9 @@ window.addEventListener("DOMContentLoaded", (event) => {
 
   const chordButtons = [...$$(".chord-button")];
   for (const b of chordButtons) {
-    const attr = b.attributes["data-chord"].value;
-    const voicing = attr.split(" ").map(Number);
     b.addEventListener("pointerdown", (e) => {
+      const attr = b.dataset.chord;
+      const voicing = attr.split(" ").map(Number);
       e.target.style.background = "#f80";
       const rect = e.target.getBoundingClientRect();
 

index.html

@@ -67,6 +67,15 @@
       <!-- populated by javascript -->
     </select>
     <br>
+    <label for="special-chord">Special chord:</label>
+    <select name="special-chord" id="select-special-chord">
+      <option value="II/,9 14 12 18" selected>II/</option>
+      <option value="lyd,11 14 16 18">maj7#11</option>
+      <option value="mΔ,7 11 12 15">mmaj7</option>
+      <option value="7b5,6 10 12 16">7b5</option>
+      <option value="2,7 12 14 16">add2</option>
+    </select>
+    <br>
     <label for="hue">Hue</label>
     <input type="range" id="hue" min="-180" max="180" value="0" step="1">
     <br>
@@ -120,7 +129,7 @@
           <div class="button chord-button" data-chord="7 9 12 15">m6</div>
           <div class="button chord-button" data-chord="6 10 12 15">ø</div>
           <div class="button chord-button" data-chord="6 9 12 15">o</div>
-          <div class="button chord-button" data-chord="9 14 12 18">II/</div>
+          <div id="special-chord-button" class="button chord-button" data-chord="9 14 12 18">II/</div>
         </div>
       </div>
     </div>