From 5944be94dfd221f41cfb5e60e007c159b617f5dc Mon Sep 17 00:00:00 2001
From: Joris
Date: Sun, 19 Jun 2022 17:07:36 +0200
Subject: Improve current beat highlight

---
 src/view/sequencer.ts | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

(limited to 'src/view')

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
           }))
         ))
       }
-- 
cgit v1.2.3