Change section background color to yellow/red on section end #21

sonph · Apr 19, 2020 · 878355c · 878355c
1 parent 8f17a0e
commit 878355c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/pug/body.pug b/pug/body.pug
@@ -76,7 +76,12 @@ div#chart.container-fluid.collapse(v-bind:class='{show: songChart.enabled}')
     div.col
       ul.list-group.list-group-flush(v-for='(section, index) in songChart.sections')
         li.list-group-item(
-            v-bind:class='{ "list-group-item-primary": index == songChart.curSectionIndex, disabled: metronome.isPlaying && index < songChart.curSectionIndex }'
+            v-bind:class=('{'
+                + '"list-group-item-primary": index == songChart.curSectionIndex && (!songChart.visualCues.enabled || (songChart.visualCues.enabled && songChart.curMeasure <= section.length - 2)),'
+                + '"list-group-item-warning": index == songChart.curSectionIndex && songChart.visualCues.enabled && songChart.curMeasure > section.length - 2 && songChart.curMeasure <= section.length - 1,'
+                + '"list-group-item-danger": index == songChart.curSectionIndex && songChart.visualCues.enabled && songChart.curMeasure > section.length - 1,'
+                + 'disabled: metronome.isPlaying && index < songChart.curSectionIndex'
+                + '}')
             v-on:click='songChartSetStartingFromSection(index)')
           div.section.name
             div.row

diff --git a/pug/settings.pug b/pug/settings.pug
@@ -15,7 +15,8 @@ hr.invisible
 div.form-row.align-items-center
   div.col-auto
     .form-check.mb-2.custom-control.custom-checkbox
-      input#enableCountIn.custom-control-input(type='checkbox' v-model='songChart.countIn.enabled')
+      input#enableCountIn.custom-control-input(
+          type='checkbox' v-model='songChart.countIn.enabled')
       label.custom-control-label(for='enableCountIn') &nbsp;Count in measures
   div.col-3
     label.sr-only(for='countInMeasures') Measures
@@ -25,11 +26,21 @@ div.form-row.align-items-center
     		min='0' step='1' pattern='[0-9]+' title='count in measures'
     		placeholder='Measures' v-model='songChart.countIn.lengthMeasures')
 
+hr.invisible
+div.form-row.align-items-center
+  div.col
+    .form-check.mb-2.custom-control.custom-checkbox
+      input#enableSectionChangeVisualCues.custom-control-input(
+          type='checkbox' v-model='songChart.visualCues.enabled')
+      label.custom-control-label(for='enableSectionChangeVisualCues')
+        | &nbsp;Enable visual cues (highlights) before section changes
+
 hr.invisible
 div.row
   div.col
     label(for='sampleSelect') Sound
-    select#sampleSelect.custom-select(v-model='audio.sampleName' v-on:change='audioMaybeLoadSample()')
+    select#sampleSelect.custom-select(
+        v-model='audio.sampleName' v-on:change='audioMaybeLoadSample()')
       option(value='beep' selected) Beep
       option(value='hihat') Hi-hat
 

diff --git a/src/js/songchart.js b/src/js/songchart.js
@@ -114,6 +114,10 @@ class SongChart {
         curCountInMeasure: 1
       },
 
+      visualCues: {
+        enabled: true,
+      },
+
       // Current beat of the measure. 1 to BEATS (4).
       curBeat: 1,
       // Current measure of the section. 1 to `measures` in json.