Fix controls modal toggling behavior

README.md

@@ -3,7 +3,7 @@
 A drum kit web app that uses Nintendo Joy-Cons as controllers (connected via [WebHID](https://web.dev/hid)).
 
 > [!IMPORTANT]
-> WebHID is currently only supported on Chromium-based browsers e.g. Chrome, Edge, etc.
+> The WebHID API is currently only supported on [Chromium-based browsers](https://developer.mozilla.org/en-US/docs/Web/API/WebHID_API#browser_compatibility) e.g. Chrome, Edge, etc.
 
 ## Demo
 
@@ -39,4 +39,4 @@ Launch the app locally with `pnpm install --frozen-lockfile` and `pnpm run start
 
 - [Joy-Con WebHID](https://github.com/tomayac/joy-con-webhid) Driver
 - Joy-Con models by [Stix](https://codepen.io/stix/details/WRoweX#input_1604658346501:~:text=License)
-- Icons by [Icons8](https://icons8.com)
+- Icons by [Icons8](https://icons8.com)

src/index.html

@@ -18,20 +18,23 @@ <h1>
     </h1>
     <ol>
       <li>
-        Connect the <a href="https://en.wikipedia.org/wiki/Joy-Con" target="_blank" rel="noreferrer">Joy-Cons</a>
+        Connect the
+        <a href="https://en.wikipedia.org/wiki/Joy-Con" target="_blank" rel="noreferrer"> Joy-Cons </a>
         via the operating system's Bluetooth setup dialog
       </li>
       <li>
-        Click the button below to connect the Joy-Cons via
-        <a href="https://web.dev/hid/">WebHID</a>
+        Click the button below to connect the Joy-Cons via the
+        <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebHID_API" target="_blank" rel="noreferrer">
+          WebHID API
+        </a>
         <div>
-          <button id="connect-joy-cons" type="button">Connect Joy-Cons</button>
+          <button id="connect-joy-cons" class="instructions" type="button">Connect Joy-Cons</button>
         </div>
       </li>
       <li>
         Click the button below to toggle the drum kit controls
         <div>
-          <button id="btn-controls" type="button">Toggle Controls</button>
+          <button id="btn-controls" class="instructions" type="button">Toggle Controls</button>
         </div>
       </li>
     </ol>

src/index.js

@@ -107,12 +107,19 @@ setInterval(async () => {
 
 // Controls modal
 const controlsModal = document.getElementById("controls")
+const toggleControls = () => {
+  if (!controlsModal.style.display || controlsModal.style.display === "none") {
+    controlsModal.style.display = "block"
+  } else {
+    controlsModal.style.display = "none"
+  }
+}
 
 const controlsModalBtn = document.getElementById("btn-controls")
-controlsModalBtn.onclick = () => (controlsModal.style.display = "block")
-
 window.onclick = (event) => {
   if (event.target === controlsModal) {
     controlsModal.style.display = "none"
   }
 }
+
+controlsModalBtn.onclick = toggleControls

src/styles/controls.css

@@ -69,7 +69,7 @@
 
 .left-joycon-ctrl {
   background-color: #00b2dc;
-  padding-bottom: 8px;
+  padding-bottom: 10px;
 }
 
 .right-joycon-ctrl {

src/styles/main.css

@@ -108,3 +108,7 @@ figure {
 ol {
   line-height: 180%;
 }
+
+.instructions {
+  width: 127px;
+}