Merge pull request #8 from harmendv/feature/improve-scales

Add modes
harmendv · Aug 9, 2023 · 361ed7b · 361ed7b
2 parents 5574bf7 + b8eecc5
commit 361ed7b
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 132 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,67 +1,30 @@
 <template>
-    <div class="view" :class="{ 'view--mobile': !breakpoints.greaterOrEqual.lg }">
+    <div class="view">
 
         <div class="fixed" v-if="breakpoints.greaterOrEqual.lg">
             <lv-theme-toggle class="theme-toggle" v-model="theme"></lv-theme-toggle>
         </div>
 
-        <lv-drawer :show="showFilters" placement="right" @click-backdrop="showFilters = false">
-            <lv-fieldset label="Options" v-space-after="1">
-                <lv-flex fill direction="column">
-                    <lv-select v-model="note" :options="notes" :clearable="false"></lv-select>
-                    <lv-select v-model="scale" :options="scales" :clearable="false"></lv-select>
-                    <lv-select v-model="showDegrees" :options="showDegreesOptions" :clearable="false"></lv-select>
-                    <lv-select v-model="showRest" :options="showRestOptions" :clearable="false"></lv-select>
-                </lv-flex>
-            </lv-fieldset>
-            <lv-fieldset label="Degrees"  v-space-after="1">
-                <lv-card>
-                    <lv-flex direction="column">
-                        <lv-checkbox label="1st degree" v-model="degrees['1']"
-                                     :disabled="!availableDegrees.includes(1)"/>
-                        <lv-checkbox label="2nd degree" v-model="degrees['2']"
-                                     :disabled="!availableDegrees.includes(2)"/>
-                        <lv-checkbox label="3rd degree" v-model="degrees['3']"
-                                     :disabled="!availableDegrees.includes(3)"/>
-                        <lv-checkbox label="4th degree" v-model="degrees['4']"
-                                     :disabled="!availableDegrees.includes(4)"/>
-                        <lv-checkbox label="5th degree" v-model="degrees['5']"
-                                     :disabled="!availableDegrees.includes(5)"/>
-                        <lv-checkbox label="6th degree" v-model="degrees['6']"
-                                     :disabled="!availableDegrees.includes(6)"/>
-                        <lv-checkbox label="7th degree" v-model="degrees['7']"
-                                     :disabled="!availableDegrees.includes(7)"/>
-                        <lv-checkbox label="Blue note" v-model="degrees['b']"
-                                     :disabled="!availableDegrees.includes('b')"/>
-                    </lv-flex>
-                </lv-card>
-            </lv-fieldset>
-            <lv-fieldset label="Theme">
-                <lv-theme-toggle class="theme-toggle" v-model="theme"></lv-theme-toggle> Toggle Light/Dark
-            </lv-fieldset>
-        </lv-drawer>
-        <lv-button
-            class="mobile-button"
-            v-if="!breakpoints.greaterOrEqual.lg"
-            @click="showFilters = !showFilters"
-            size="small"
-            color="solid-dimmed-primary"
-            icon="cog"
-        ></lv-button>
         <vue-fretboard
             :strings="strings"
             :highlight="highlight"
             :frets="frets"
             :show-degrees="showDegrees"
             :degrees="degrees"
+            :root="note"
             :show-rest="showRest"
-            v-space-after="breakpoints.greaterOrEqual.lg ? 1 : 0"
+            v-space-after="2"
         />
-        <div class="options" v-if="breakpoints.greaterOrEqual.lg">
-            <lv-fieldset label="Options" v-space-after="1">
+        <div class="options">
+            <lv-fieldset label="Scale" v-space-after="1">
                 <lv-flex fill>
                     <lv-select v-model="note" :options="notes" :clearable="false"></lv-select>
                     <lv-select v-model="scale" :options="scales" :clearable="false"></lv-select>
+                    <lv-select v-model="mode" :options="modes" :clearable="false"></lv-select>
+                </lv-flex>
+            </lv-fieldset>
+            <lv-fieldset label="Options" v-space-after="1">
+                <lv-flex fill>
                     <lv-select v-model="showDegrees" :options="showDegreesOptions" :clearable="false"></lv-select>
                     <lv-select v-model="showRest" :options="showRestOptions" :clearable="false"></lv-select>
                 </lv-flex>
@@ -76,7 +39,6 @@
                         <lv-checkbox label="5th" v-model="degrees['5']" :disabled="!availableDegrees.includes(5)"/>
                         <lv-checkbox label="6th" v-model="degrees['6']" :disabled="!availableDegrees.includes(6)"/>
                         <lv-checkbox label="7th" v-model="degrees['7']" :disabled="!availableDegrees.includes(7)"/>
-                        <lv-checkbox label="Blue" v-model="degrees['b']" :disabled="!availableDegrees.includes('b')"/>
                     </lv-flex>
                 </lv-card>
             </lv-fieldset>
@@ -126,7 +88,8 @@ export default {
             frets: 19,
             note: params.note || 'C',
             scale: params.scale || 'major',
-            showDegrees: params.showDegrees || 'true',
+            mode: Number.parseInt(params.mode, 10) || 1,
+            showDegrees: params.showDegrees || 'false',
             degrees: params.degrees ? (JSON.parse(decodeURIComponent(params.degrees))) : ({
                 '1': true,
                 '2': true,
@@ -135,7 +98,6 @@ export default {
                 '5': true,
                 '6': true,
                 '7': true,
-                'b': true,
             }),
             showRest: params.showRest || 'true',
             showDegreesOptions: [
@@ -176,9 +138,15 @@ export default {
         },
         scale: {
             handler(value) {
+                this.mode = 1;
                 params.scale = value;
             },
         },
+        mode: {
+            handler(value) {
+                params.mode = value;
+            },
+        },
         degrees: {
             handler(value) {
                 params.degrees = JSON.stringify(value);
@@ -194,9 +162,11 @@ export default {
             })
             return options;
         },
-        selectedScale() {
-            const scaleIndex = scalesFlatMap.indexOf(this.scale);
-            return scales[scaleIndex].name;
+        selectedScaleIndex() {
+            return scalesFlatMap.indexOf(this.scale);
+        },
+        selectedModeOffset() {
+            return scales[this.selectedScaleIndex].formula[this.mode].chromatic;
         },
         notes() {
             const options = [];
@@ -205,15 +175,25 @@ export default {
             })
             return options;
         },
+        modes() {
+            const options = [];
+            const formula = scales[this.selectedScaleIndex].formula;
+            formula.forEach((entry) => {
+                options.push({label: entry.mode, value: entry.degree})
+            })
+            return options;
+        },
         highlight() {
             const highlight = [];
             const scaleIndex = scalesFlatMap.indexOf(this.scale);
             const scaleFormula = scales[scaleIndex].formula;
             const scaleFormulaLength = scaleFormula.length;
+            // Calculate the extra note offset caused by the mode
+            const modeOffset = scales[scaleIndex].formula[this.mode - 1].chromatic - 1;
             for (let i = 0; i < scaleFormulaLength; i++) {
                 highlight.push({
-                    note: getNoteByOffset(`${this.note}`, scaleFormula[i].chromatic - 1),
-                    degree: scaleFormula[i].degree,
+                    note: getNoteByOffset(`${this.note}`, scaleFormula[i].chromatic - 1 + (12 - modeOffset)),
+                    degree: scaleFormula[i].degree
                 })
             }
             return highlight;

diff --git a/src/components/VueFretboard.vue b/src/components/VueFretboard.vue
@@ -7,6 +7,7 @@
             :key="index"
             :highlight="highlight"
             :degrees="degrees"
+            :root="root"
             :show-degrees="showDegrees"
             :show-rest="showRest"
         />
@@ -56,6 +57,10 @@ export default {
             type: [Boolean, String],
             default: false,
         },
+        root: {
+            type: String,
+            required: true,
+        }
     },
     computed: {
         reversedStrings() {

diff --git a/src/components/VueString.vue b/src/components/VueString.vue
@@ -15,7 +15,7 @@
         class="vue-string__note"
         :class="{
           'vue-string__note--highlight': !!note.highlight && degrees[note.degree],
-          'vue-string__note--root': !!note.root && degrees[note.degree],
+          'vue-string__note--root': note.name === root,
           'vue-string__note--hidden': (!note.highlight && showRest !== 'true'),
         }"
       >
@@ -61,6 +61,10 @@ export default {
       type: [Boolean, String],
       default: false,
     },
+    root: {
+      type: String,
+      required: true,
+    }
   },
   computed: {
     highlightNotes() {

diff --git a/src/utils/notes.js b/src/utils/notes.js
@@ -29,14 +29,17 @@ function getNoteByOffset(start = 'C', offset = 0) {
   ) {
     // Iterate the amount the offset requires
     let outputIndex = inputIndex;
+
     for(let i = 0; i < offset; i++) {
       if(outputIndex + 1 < notes.length) {
         outputIndex += 1;
       } else {
         outputIndex = 0;
       }
     }
-    return notesFlatMap[outputIndex];
+
+    const proxy = new Proxy(notesFlatMap, {})
+    return proxy[outputIndex];
   } else {
     console.log('Something went wrong');
   }

diff --git a/src/utils/scales.js b/src/utils/scales.js
@@ -3,108 +3,82 @@
 const scales = [
   {
     id: 1,
-    name: 'Major Pentatonic',
-    slug: 'major-pentatonic',
+    name: 'Major',
+    slug: 'major',
     formula: [
-      { chromatic: 1, degree: 1 },
-      { chromatic: 3, degree: 2 },
-      { chromatic: 5, degree: 3 },
-      { chromatic: 8, degree: 5 },
-      { chromatic: 10, degree: 6 },
+      { chromatic: 1, degree: 1, mode: 'Ionian' },
+      { chromatic: 3, degree: 2, mode: 'Dorian' },
+      { chromatic: 5, degree: 3, mode: 'Phrygian' },
+      { chromatic: 6, degree: 4, mode: 'Lydian' },
+      { chromatic: 8, degree: 5, mode: 'Mixolydian' },
+      { chromatic: 10, degree: 6, mode: 'Aeolian' },
+      { chromatic: 12, degree: 7, mode: 'Locrian' },
     ]
   },
   {
     id: 2,
-    name: 'Minor Pentatonic',
-    slug: 'minor-pentatonic',
+    name: 'Major Pentatonic',
+    slug: 'major-pentatonic',
     formula: [
-      { chromatic: 1, degree: 1 },
-      { chromatic: 4, degree: 3 },
-      { chromatic: 6, degree: 4 },
-      { chromatic: 8, degree: 5 },
-      { chromatic: 11, degree: 7 },
+      { chromatic: 1, degree: 1, mode: 'Ionian Pentatonic' },
+      { chromatic: 3, degree: 2, mode: 'Dorian Pentatonic' },
+      { chromatic: 5, degree: 3, mode: 'Phrygian Pentatonic' },
+      { chromatic: 8, degree: 5, mode: 'Mixolydian Pentatonic' },
+      { chromatic: 10, degree: 6, mode: 'Aeolian Pentatonic' },
     ]
   },
   {
     id: 3,
-    name: 'Major Blues',
-    slug: 'major-blues',
+    name: 'Natural Minor',
+    slug: 'natural-minor',
     formula: [
-      { chromatic: 1, degree: 1 },
-      { chromatic: 3, degree: 2 },
-      { chromatic: 4, degree: 'b' },
-      { chromatic: 5, degree: 3 },
-      { chromatic: 8, degree: 5 },
-      { chromatic: 10, degree: 6 },
+      { chromatic: 1, degree: 1, mode: 'Aeolian' },
+      { chromatic: 3, degree: 2, mode: 'Locrian' },
+      { chromatic: 4, degree: 3, mode: 'Ionian' },
+      { chromatic: 6, degree: 4, mode: 'Dorian' },
+      { chromatic: 8, degree: 5, mode: 'Phrygian' },
+      { chromatic: 9, degree: 6, mode: 'Lydian' },
+      { chromatic: 11, degree: 7, mode: 'Mixolydian' },
     ]
   },
   {
     id: 4,
-    name: 'Minor Blues',
-    slug: 'minor-blues',
+    name: 'Minor Pentatonic',
+    slug: 'minor-pentatonic',
     formula: [
-      { chromatic: 1, degree: 1 },
-      { chromatic: 4, degree: 3 },
-      { chromatic: 6, degree: 4 },
-      { chromatic: 7, degree: 'b' },
-      { chromatic: 8, degree: 5 },
-      { chromatic: 11, degree: 7 },
+      { chromatic: 1, degree: 1, mode: 'Aeolian' },
+      { chromatic: 4, degree: 3, mode: 'Ionian' },
+      { chromatic: 6, degree: 4, mode: 'Dorian' },
+      { chromatic: 8, degree: 5, mode: 'Phrygian' },
+      { chromatic: 11, degree: 7, mode: 'Mixolydian' },
     ]
   },
   {
     id: 5,
-    name: 'Major (Ionian)',
-    slug: 'major',
-    formula: [
-      { chromatic: 1, degree: 1 },
-      { chromatic: 3, degree: 2 },
-      { chromatic: 5, degree: 3 },
-      { chromatic: 6, degree: 4 },
-      { chromatic: 8, degree: 5 },
-      { chromatic: 10, degree: 6 },
-      { chromatic: 12, degree: 7 },
-    ]
-  },
-  {
-    id: 6,
-    name: 'Natural Minor',
-    slug: 'natural-minor',
-    formula: [
-      { chromatic: 1, degree: 1 },
-      { chromatic: 3, degree: 2 },
-      { chromatic: 4, degree: 3 },
-      { chromatic: 6, degree: 4 },
-      { chromatic: 8, degree: 5 },
-      { chromatic: 9, degree: 6 },
-      { chromatic: 11, degree: 7 },
-    ]
-  },
-  {
-    id: 7,
     name: 'Harmonic Minor',
     slug: 'harmonic-minor',
     formula: [
-      { chromatic: 1, degree: 1 },
-      { chromatic: 3, degree: 2 },
-      { chromatic: 4, degree: 3 },
-      { chromatic: 6, degree: 4 },
-      { chromatic: 8, degree: 5 },
-      { chromatic: 9, degree: 6 },
-      { chromatic: 12, degree: 7 },
+      { chromatic: 1, degree: 1, mode: 'Harmonic minor' },
+      { chromatic: 3, degree: 2, mode: 'Locrian 13 (or Locrian natural 6th)' },
+      { chromatic: 4, degree: 3, mode: 'Ionian #5' },
+      { chromatic: 6, degree: 4, mode: 'Dorian #4' },
+      { chromatic: 8, degree: 5, mode: 'Phrygian dominant' },
+      { chromatic: 9, degree: 6, mode: 'Lydian #2' },
+      { chromatic: 12, degree: 7, mode: 'Super Locrian bb7' },
     ]
   },
   {
-    id: 5,
-    name: 'Dorian',
-    slug: 'dorian',
+    id: 6,
+    name: 'Melodic Minor',
+    slug: 'melodic-minor',
     formula: [
-      { chromatic: 1, degree: 1 },
-      { chromatic: 3, degree: 2 },
-      { chromatic: 4, degree: 3 },
-      { chromatic: 6, degree: 4 },
-      { chromatic: 8, degree: 5 },
-      { chromatic: 10, degree: 6 },
-      { chromatic: 11, degree: 7 },
+      { chromatic: 1, degree: 1, mode: 'Melodic minor' },
+      { chromatic: 3, degree: 2, mode: 'Dorian b2 (or Prhygian ♮6)' },
+      { chromatic: 4, degree: 3, mode: 'Lydian augmented (Lydian #5)' },
+      { chromatic: 6, degree: 4, mode: 'Lydian dominant' },
+      { chromatic: 8, degree: 5, mode: 'Mixolydian b6' },
+      { chromatic: 10, degree: 6, mode: 'Locrian ♮2 (Aeolocrian)' },
+      { chromatic: 12, degree: 7, mode: 'Super Locrian (Altered scale)' },
     ]
   },
 ];