Improve current beat highlight

2 files changed, 41 insertions, 34 deletions

diff --git a/public/main.css b/public/main.css
index 9540a7f..26c5950 100644
--- a/public/main.css
+++ b/public/main.css
@@ -1,8 +1,9 @@
 /* Constants */
 
 :root {
-  --color-block: lightgray;
-  --color-block-checked: lightgreen;
+  --color-block: #e3e3e3;
+  --color-block-checked: #90ee90;
+  --color-block-unchecked-beat: #fff7bf;
 
   --spacing-mouse: 0.25rem;
   --spacing-cat: 0.5rem;
@@ -56,7 +57,13 @@ body {
 .g-Sequencer__Blocks {
   display: flex;
   align-items: center;
-  gap: var(--spacing-cat);
+  gap: var(--spacing-mouse);
+}
+
+.g-Sequencer__Column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-mouse);
 }
 
 .g-Sequencer__Column > li {
@@ -64,35 +71,35 @@ body {
   align-items: center;
   height: var(--spacing-horse);
   cursor: pointer;
-}
-
-.g-Sequencer__Column {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-cat);
+  padding: var(--spacing-mouse);
 }
 
 .g-Sequencer__Block {
   width: var(--spacing-horse);
   height: var(--spacing-horse);
-  background-color: lightgray;
+  background-color: var(--color-block);
   cursor: pointer;
 }
 
 .g-Sequencer__Block:hover {
-  filter: brightness(110%);
+  filter: brightness(105%);
 }
 
 .g-Sequencer__Block--Checked {
-  background-color: lightgreen;
+  background-color: var(--color-block-checked);
+}
+
+.g-Sequencer__Column--Beat {
+  background-color: var(--color-block-unchecked-beat);
+  box-shadow: 0px 0px 5px 1px var(--color-block-unchecked-beat);
 }
 
-.g-Sequencer__Block--Beat {
-  animation: beat 0.2s linear;
+.g-Sequencer__Column--Beat .g-Sequencer__Block--Checked {
+  animation: checked-beat 0.2s linear;
 }
 
-@keyframes beat {
+@keyframes checked-beat {
   0%   {transform: scale(100%);}
-  30%  {transform: scale(105%);}
+  30%  {transform: scale(115%);}
   100% {transform: scale(100%);}
 }
diff --git a/src/view/sequencer.ts b/src/view/sequencer.ts
index 74eb0ea..bc26e69 100644
--- a/src/view/sequencer.ts
+++ b/src/view/sequencer.ts
@@ -7,7 +7,7 @@ import * as block from 'view/sequencer/block'
 
 export function view() {
   let index = -1
-  let blocks = [{
+  let columns = [{
     [Sound.Bass]: true,
     [Sound.Snare]: false,
     [Sound.HitHatClosed]: false,
@@ -17,38 +17,38 @@ export function view() {
     block.column([
       { 
         checked: false,
-        onCheck: checked => blocks[0][Sound.HitHatClosed] = checked
+        onCheck: checked => columns[0][Sound.HitHatClosed] = checked
       },
       { 
         checked: false,
-        onCheck: checked => blocks[0][Sound.Snare] = checked
+        onCheck: checked => columns[0][Sound.Snare] = checked
       },
       { 
         checked: true,
-        onCheck: checked => blocks[0][Sound.Bass] = checked
+        onCheck: checked => columns[0][Sound.Bass] = checked
       }
     ])
   )
 
   let onNextStep = (sounds: soundsLib.Sounds) => {
     let oldIndex = index
-    let newIndex = (index + 1) % blocks.length
+    let newIndex = (index + 1) % columns.length
     index = newIndex
 
-    let oldBlock = blocksNode.childNodes[oldIndex] as HTMLElement
-    if (oldBlock !== undefined) oldBlock.classList.remove('g-Sequencer__Block--Beat')
+    let oldColumn = blocksNode.childNodes[oldIndex] as HTMLElement
+    if (oldColumn !== undefined) oldColumn.classList.remove('g-Sequencer__Column--Beat')
 
-    let newBlock = blocksNode.childNodes[newIndex] as HTMLElement
+    let newColumn = blocksNode.childNodes[newIndex] as HTMLElement
 
     // Trigger reflow between removing and adding the classname.
     // Allow to re-trigger the animation if there is only one column.
     // See https://css-tricks.com/restart-css-animation/
-    void newBlock.offsetWidth
+    void newColumn.offsetWidth
 
-    newBlock.classList.add('g-Sequencer__Block--Beat')
+    newColumn.classList.add('g-Sequencer__Column--Beat')
 
     soundsLib.all().forEach(sound => {
-      if (blocks[newIndex][sound]) soundsLib.play(sounds, sound)
+      if (columns[newIndex][sound]) soundsLib.play(sounds, sound)
     })
   }
 
@@ -56,20 +56,20 @@ export function view() {
     play.view({
       onNextStep,
       onStop: () => {
-        let block = blocksNode.childNodes[index] as HTMLElement
-        block.classList.remove('g-Sequencer__Block--Beat')
+        let column = blocksNode.childNodes[index] as HTMLElement
+        column.classList.remove('g-Sequencer__Column--Beat')
         index = -1
       }
     }),
     addRemoveBeat.view({
       initBeats: 1,
       onRemove: index => {
-        let lastBlock = blocksNode.childNodes[index]
-        blocksNode.removeChild(lastBlock)
-        blocks.pop()
+        let lastColumn = blocksNode.childNodes[index]
+        blocksNode.removeChild(lastColumn)
+        columns.pop()
       },
       onAdd: index => {
-        blocks.push({
+        columns.push({
           [Sound.Bass]: false,
           [Sound.Snare]: false,
           [Sound.HitHatClosed]: false,
@@ -77,7 +77,7 @@ export function view() {
         blocksNode.appendChild(block.column(
           soundsLib.all().map(sound => ({
             checked: false,
-            onCheck: checked => blocks[index][sound] = checked
+            onCheck: checked => columns[index][sound] = checked
           }))
         ))
       }