Merge pull request #45 from ishythefishy/show-scales-same-as-current

Show similar modes to standard modes, clean up tests and some styles

Author: whitep4nth3r

apps/fretonator-web/src/app/common/fret-map/fret-map.service.spec.ts

@@ -12,6 +12,9 @@ import {
   cIonianChordMap,
   cIonianFretMappings,
   cIonianMode,
+  cIonianSimilarModes,
+  cLydianMode,
+  cLydianSimilarModes,
   cMajorPentatonicChordMap,
   cMinorPentatonicChordMap,
   cPhrygianMode,
@@ -1351,3 +1354,70 @@ describe('FretMapService:convertFretMapConfigurationToDisplayString', () => {
     expect(result).toBe('A flat Minor Pentatonic');
   });
 });
+
+describe('FretMapService:getNoteExtenderStringFromNoteObject', () => {
+  let service: FretMapService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(FretMapService);
+  });
+
+  it('returns NoteExtenderString.flat for a flat note', () => {
+    const result = service.getNoteExtenderStringFromNoteObject({
+      name: 'b',
+      flat: true,
+      sharp: false,
+      doubleSharp: false,
+      doubleFlat: false
+    });
+    expect(result).toBe('flat');
+  });
+
+
+  it('returns NoteExtenderString.sharp for a sharp note', () => {
+    const result = service.getNoteExtenderStringFromNoteObject({
+      name: 'd',
+      flat: false,
+      sharp: true,
+      doubleSharp: false,
+      doubleFlat: false
+    });
+    expect(result).toBe('sharp');
+  });
+
+  it('returns NoteExtenderString.natural for a natural note', () => {
+    const result = service.getNoteExtenderStringFromNoteObject({
+      name: 'd',
+      flat: false,
+      sharp: false,
+      doubleSharp: false,
+      doubleFlat: false
+    });
+    expect(result).toBe('natural');
+  });
+});
+
+describe('FretMapService:getSimilarModes', () => {
+  let service: FretMapService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(FretMapService);
+  });
+
+  it('returns correctly for an input of c natural ionian', () => {
+    const result = service.getSimilarModes(cIonianMode, Mode.ionian);
+    expect(result).toEqual(cIonianSimilarModes);
+  });
+
+  it('returns correctly for an input of c natural lydian', () => {
+    const result = service.getSimilarModes(cLydianMode, Mode.lydian);
+    expect(result).toEqual(cLydianSimilarModes);
+  });
+
+  it('returns an empty array for a mode not in the StandardModePatterns array', () => {
+    const result = service.getSimilarModes(fSharpHarmonicMinor, Mode.harmonicMinor);
+    expect(result).toEqual([]);
+  });
+});

apps/fretonator-web/src/app/common/fret-map/fret-map.service.testConstants.ts

@@ -446,6 +446,65 @@ export const cIonianMode: ModeMap = [
   },
 ];
 
+export const cLydianMode: ModeMap = [
+  {
+    name: 'c',
+    sharp: false,
+    flat: false,
+    doubleFlat: false,
+    doubleSharp: false,
+    displayName: 'C'
+  },
+  {
+    name: 'd',
+    sharp: false,
+    flat: false,
+    doubleFlat: false,
+    doubleSharp: false,
+    displayName: 'D'
+  },
+  {
+    name: 'e',
+    sharp: false,
+    flat: false,
+    doubleFlat: false,
+    doubleSharp: false,
+    displayName: 'E'
+  },
+  {
+    name: 'f',
+    sharp: true,
+    flat: false,
+    doubleFlat: false,
+    doubleSharp: false,
+    displayName: 'F'
+  },
+  {
+    name: 'g',
+    sharp: false,
+    flat: false,
+    doubleFlat: false,
+    doubleSharp: false,
+    displayName: 'G'
+  },
+  {
+    name: 'a',
+    sharp: false,
+    flat: false,
+    doubleFlat: false,
+    doubleSharp: false,
+    displayName: 'A'
+  },
+  {
+    name: 'b',
+    sharp: false,
+    flat: false,
+    doubleFlat: false,
+    doubleSharp: false,
+    displayName: 'B'
+  },
+];
+
 export const dDorianMode: ModeMap = [
   {
     name: 'd',
@@ -1209,3 +1268,81 @@ export const cIonianChordMap = [
     type: ChordType.diminished,
   },
 ]
+
+export const cIonianSimilarModes = [
+  {
+    noteDisplayName: 'D',
+    note: 'd',
+    mode: 'dorian',
+    noteExtender: 'natural'
+  },
+  {
+    noteDisplayName: 'E',
+    note: 'e',
+    mode: 'phrygian',
+    noteExtender: 'natural'
+  },
+  {
+    noteDisplayName: 'F',
+    note: 'f',
+    mode: 'lydian',
+    noteExtender: 'natural'
+  },
+  {
+    noteDisplayName: 'G',
+    note: 'g',
+    mode: 'mixolydian',
+    noteExtender: 'natural'
+  },
+  {
+    noteDisplayName: 'A',
+    note: 'a',
+    mode: 'aolian',
+    noteExtender: 'natural'
+  },
+  {
+    noteDisplayName: 'B',
+    note: 'b',
+    mode: 'locrian',
+    noteExtender: 'natural'
+  }
+]
+
+export const cLydianSimilarModes = [
+  {
+    noteDisplayName: 'D',
+    note: 'd',
+    mode: 'mixolydian',
+    noteExtender: 'natural'
+  },
+  {
+    noteDisplayName: 'E',
+    note: 'e',
+    mode: 'aolian',
+    noteExtender: 'natural'
+  },
+  {
+    noteDisplayName: 'F',
+    note: 'f',
+    mode: 'locrian',
+    noteExtender: 'sharp'
+  },
+  {
+    noteDisplayName: 'G',
+    note: 'g',
+    mode: 'ionian',
+    noteExtender: 'natural'
+  },
+  {
+    noteDisplayName: 'A',
+    note: 'a',
+    mode: 'dorian',
+    noteExtender: 'natural'
+  },
+  {
+    noteDisplayName: 'B',
+    note: 'b',
+    mode: 'phrygian',
+    noteExtender: 'natural'
+  }
+]

apps/fretonator-web/src/app/common/fret-map/fret-map.service.ts

@@ -8,15 +8,18 @@ import {
   ModeMap,
   NoteExtenderString,
   NoteObject,
-  NoteSymbol
+  NoteSymbol,
+  SimilarMode,
+  SimilarModes
 } from '../../util/types';
 import {
   ChordPatterns,
   ModePatterns,
   ModeSelectorObjects,
   NoteToStringAndFretMap,
   Octave,
-  ScaleDegrees
+  ScaleDegrees,
+  StandardModePatterns
 } from '../../util/constants';
 import { JamTracksData } from '../../data/jamTracks';
 
@@ -257,7 +260,7 @@ export class FretMapService {
 
     for (let i = 0; i < modePattern.length - 1; i++) {
       newNote = this.generateNextNote(currentNote, modePattern[i]);
-      newNote.displayName = this.convertNoteObjectToHumanReadable(newNote)
+      newNote.displayName = this.convertNoteObjectToHumanReadable(newNote);
 
       newMode.push(newNote);
       currentNote = newNote;
@@ -408,6 +411,40 @@ export class FretMapService {
       note: this.convertNoteObjectToHumanReadable(noteObject),
       type: chordPattern[index]
     }));
+  };
+
+  getNoteExtenderStringFromNoteObject = (noteObject: NoteObject): NoteExtenderString => {
+    if (this.isSharp(noteObject, noteObject.name)) {
+      return NoteExtenderString.sharp;
+    }
+
+    if (this.isFlat(noteObject, noteObject.name)) {
+      return NoteExtenderString.flat;
+    }
+
+    if (this.isNatural(noteObject, noteObject.name)) {
+      return NoteExtenderString.natural;
+    }
+  };
+
+  getSimilarModes = (modeMap: ModeMap, inputMode: Mode): SimilarModes => {
+    const firstModeInPattern = StandardModePatterns.indexOf(inputMode);
+
+    if (firstModeInPattern === -1) {
+      return [];
+    }
+
+    const similarModes = modeMap
+      .map((noteObject, index) => (
+        {
+          noteDisplayName: noteObject.displayName,
+          note: noteObject.name,
+          mode: StandardModePatterns[firstModeInPattern + index],
+          noteExtender: this.getNoteExtenderStringFromNoteObject(noteObject)
+        }
+      ));
 
+    similarModes.shift();
+    return similarModes;
   };
 }

apps/fretonator-web/src/app/common/fretonator/fretonator.component.html

@@ -16,11 +16,11 @@
 </ng-template>
 
 <div class="fretboard__toggle">
-  <button class="fretboard__toggleButton fretboard__toggleButton--left"
+  <button class="fretboard__toggleButton fretboard__toggleButton--twelve"
           [class.fretboard__toggleButton--active]="fretMode === fretModes.twelve"
           (click)="setFretMode(fretModes.twelve)">12 frets
   </button>
-  <button class="fretboard__toggleButton fretboard__toggleButton--right"
+  <button class="fretboard__toggleButton fretboard__toggleButton--twentyFour"
           [class.fretboard__toggleButton--active]="fretMode === fretModes.twentyFour"
           (click)="setFretMode(fretModes.twentyFour)">24 frets
   </button>
@@ -85,4 +85,10 @@ <h4 class="fretonator__playCta">
   <app-interval-map [intervalMap]="intervalMap"></app-interval-map>
 
   <app-chord-map [chordMap]="chordMap"></app-chord-map>
+
+  <app-similar-modes [modeDisplayString]="modeDisplayString"
+                     [similarModes]="modeMap | getSimilarModes : mode">
+
+  </app-similar-modes>
+
 </div>

apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss

@@ -369,13 +369,13 @@
   color: var(--offwhite);
 }
 
-.fretboard__toggleButton--left {
+.fretboard__toggleButton--twelve {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-right-width: calc(var(--border-width-button) / 2);
 }
 
-.fretboard__toggleButton--right {
+.fretboard__toggleButton--twentyFour {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left-width: calc(var(--border-width-button) / 2);

apps/fretonator-web/src/app/common/fretonator/fretonator.component.spec.ts

@@ -2,9 +2,20 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { FretonatorComponent } from './fretonator.component';
 import { FretonatorModule } from './fretonator.module';
-import { Component } from '@angular/core';
+import { Component, DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
 
 describe('FretonatorComponent', () => {
+
+  const selectors = {
+    twelveButton: By.css('.fretboard__toggleButton--twelve'),
+    twentyFourButton: By.css('.fretboard__toggleButton--twentyFour')
+  }
+
+  const classNames = {
+    toggleFretButtonSelected: 'fretboard__toggleButton--active'
+  }
+
   @Component({
     selector: 'app-fretonator-spec',
     template: `
@@ -44,4 +55,26 @@ describe('FretonatorComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('setFretMode()', () => {
+    let twelveButton: DebugElement;
+    let twentyFourButton: DebugElement;
+
+    beforeEach(() => {
+      twelveButton = fixture.debugElement.query(selectors.twelveButton);
+      twentyFourButton = fixture.debugElement.query(selectors.twentyFourButton);
+    });
+
+    it('changes the fret mode to twenty four when the button is clicked', () => {
+      twentyFourButton.nativeElement.click();
+      fixture.detectChanges();
+      expect(twentyFourButton.classes[classNames.toggleFretButtonSelected]).toBeTruthy();
+    });
+
+    it('changes the fret mode to twelve when the button is clicked', () => {
+      twelveButton.nativeElement.click();
+      fixture.detectChanges();
+      expect(twelveButton.classes[classNames.toggleFretButtonSelected]).toBeTruthy();
+    });
+  });
 });