Proof of Concept for similar modes - not fully working yet

Author: Salma Alam-Naylor

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

@@ -1351,3 +1351,55 @@ describe('FretMapService:convertFretMapConfigurationToDisplayString', () => {
     expect(result).toBe('A flat Minor Pentatonic');
   });
 });
+
+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).toBe([
+      {
+        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'
+      }
+    ]);
+  });
+});

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,
+  SimilarModePatterns
 } 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,36 @@ 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 = SimilarModePatterns.indexOf(inputMode);
+
+    const similarModes = modeMap
+      .map((noteObject, index) => {
+        return {
+          noteDisplayName: noteObject.displayName,
+          note: noteObject.name,
+          mode: SimilarModePatterns[firstModeInPattern + index],
+          noteExtender: this.getNoteExtenderStringFromNoteObject(noteObject),
+        } as unknown as SimilarMode;
+      });
+
+    similarModes.shift();
+    return similarModes;
   };
 }

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

@@ -85,4 +85,9 @@ <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"
+                     [modeMap]="modeMap"
+                     [mode]="mode"></app-similar-modes>
+
 </div>

apps/fretonator-web/src/app/common/fretonator/fretonator.module.ts

@@ -7,6 +7,7 @@ import { IntervalMapModule } from './interval-map/interval-map.module';
 import { ScaleMapModule } from './scale-map/scale-map.module';
 import { IsTheoreticalScalePipe } from './is-theoretical-scale.pipe';
 import { SpeakerModule } from '../svgs/speaker/speaker.module';
+import { SimilarModesModule } from './similar-modes/similar-modes.module';
 
 @NgModule({
   declarations: [
@@ -19,7 +20,8 @@ import { SpeakerModule } from '../svgs/speaker/speaker.module';
     ChordMapModule,
     IntervalMapModule,
     ScaleMapModule,
-    SpeakerModule
+    SpeakerModule,
+    SimilarModesModule
   ],
   exports: [
     FretonatorComponent

apps/fretonator-web/src/app/common/fretonator/scale-map/get-enharmonic-router-link.pipe.ts

@@ -24,5 +24,4 @@ export class GetEnharmonicRouterLinkPipe implements PipeTransform {
 
     return ['/', newNote, newNoteExtender, mode];
   }
-
 }

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

@@ -0,0 +1,13 @@
+<div class="similarModes">
+  <h4 class="similarModes__title">Did you know?</h4>
+  <p class="similarModes__copy">If you know the patterns of {{modeDisplayString}}, you'll know the modes below. Just shift your fingers along the
+    fret board.</p>
+
+  <app-chips>
+    <app-chip *ngFor="let mode of similarModes"
+              [note]="mode.note"
+              [noteExtender]="mode.noteExtender"
+              [mode]="mode.mode"
+              selectedColor="default">{{mode.displayName}} {{mode.mode | titlecase}}</app-chip>
+  </app-chips>
+</div>

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

@@ -0,0 +1,28 @@
+@import "../../../../styles/vars";
+@import "../../../../styles/functions";
+@import "../../../../styles/mixins";
+@import "../../../../styles/typography";
+
+.similarModes {
+  background-color: var(--peach);
+  padding: pxToRem($grid-unit * 4);
+  margin-left: pxToRem($grid-unit * -4);
+  margin-right: pxToRem($grid-unit * -4);
+  margin-top: pxToRem($grid-unit * 4);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  @media screen and (min-width: $screen-med) {
+    align-items: flex-start;
+  }
+}
+
+.similarModes__title {
+  @include info_container_title();
+}
+
+.similarModes__copy {
+  @include font_bodyCopy();
+  margin-bottom: pxToRem($grid-unit * 2);
+}

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SimilarModesComponent } from './similar-modes.component';
+
+describe('SimilarModesComponent', () => {
+  let component: SimilarModesComponent;
+  let fixture: ComponentFixture<SimilarModesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SimilarModesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SimilarModesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Mode, ModeMap, SimilarModes } from '../../../util/types';
+import { FretMapService } from '../../fret-map/fret-map.service';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-similar-modes',
+  templateUrl: './similar-modes.component.html',
+  styleUrls: ['./similar-modes.component.scss']
+})
+export class SimilarModesComponent implements OnInit {
+  @Input() modeMap: ModeMap;
+  @Input() mode: Mode;
+  @Input() modeDisplayString: string;
+  similarModes: SimilarModes = [];
+
+  constructor(private activatedRoute: ActivatedRoute,
+              public fretMapService: FretMapService) {
+  }
+
+  ngOnInit(): void {
+    this.activatedRoute.params.subscribe(() => this.onRouteChange());
+    this.getSimilarModes();
+  }
+
+  onRouteChange() {
+    this.getSimilarModes();
+  }
+
+  getSimilarModes() {
+    this.similarModes = this.fretMapService.getSimilarModes(this.modeMap, this.mode);
+  }
+}

apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SimilarModesComponent } from './similar-modes.component';
+import { ChipsModule } from '../../chips/chips.module';
+
+
+@NgModule({
+  declarations: [SimilarModesComponent],
+  exports: [
+    SimilarModesComponent
+  ],
+  imports: [
+    CommonModule,
+    ChipsModule
+  ]
+})
+export class SimilarModesModule { }