Play drum sound when clicking on the name

3 files changed, 53 insertions, 2 deletions

diff --git a/README.md b/README.md
index c939efb..d437233 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,19 @@ nix develop --command bin/watch.sh
 
 Then, open your browser at `http://localhost:8000`.
 
+# Sounds
+
+- bass: https://freesound.org/people/karolist/sounds/371192/
+- snare: https://lasonotheque.org/detail-2304-caisse-claire-1.html
+- hit-hat (closed): https://lasonotheque.org/detail-2302-charleston-fermee-7.html
+
 # Todo
 
-- [ ] Augment the BPM by X after Y cycles
+Multi-sound sequencer:
+
 - [ ] Provide more drum sounds
+- [ ] Add / Remove beat integrated into sequencer
+
+Working on increasing tempo:
+
+- [ ] Augment the BPM by X after Y cycles
diff --git a/public/main.css b/public/main.css
index fbc37c4..134d92b 100644
--- a/public/main.css
+++ b/public/main.css
@@ -1,3 +1,5 @@
+/* Constants */
+
 :root {
   --color-block: lightgray;
   --color-block-checked: lightgreen;
@@ -9,6 +11,16 @@
   --spacing-elephant: 4rem;
 }
 
+/* Reset */
+
+ol {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Styles */
+
 body {
   margin: var(--spacing-dog);
 }
@@ -36,8 +48,21 @@ body {
   gap: var(--spacing-dog);
 }
 
+.g-Sequencer__Grid {
+  display: flex;
+  gap: var(--spacing-cat);
+}
+
+.g-Sequencer__Sounds > li {
+  display: flex;
+  align-items: center;
+  height: var(--spacing-horse);
+  cursor: pointer;
+}
+
 .g-Sequencer__Blocks {
   display: flex;
+  align-items: center;
   gap: var(--spacing-cat);
 }
 
diff --git a/src/view/sequencer.ts b/src/view/sequencer.ts
index 150f89b..3bca278 100644
--- a/src/view/sequencer.ts
+++ b/src/view/sequencer.ts
@@ -53,7 +53,21 @@ export function view() {
         })) 
       }
     }),
-    blocksNode
+    h('div',
+      { className: 'g-Sequencer__Grid' },
+      h('ol',
+        { className: 'g-Sequencer__Sounds' },
+        h('li', 
+          { onclick: async () => {
+              let sounds = await soundsLib.load()
+              soundsLib.playKick(sounds)
+            }
+          },
+          'Bass'
+        )
+      ),
+      blocksNode
+    )
   )
 
   return sequencer