Allow scale map component to receive a modeMap object so playback service can use this to construct an audio scale

Salma Alam-Naylor · Salma Alam-Naylor · commit d88ac051a8ff · 2020-06-15T20:46:23.000+01:00
diff --git a/apps/fretonator-web/src/app/common/fret-map/fret-map.service.testConstants.ts b/apps/fretonator-web/src/app/common/fret-map/fret-map.service.testConstants.ts
diff --git a/apps/fretonator-web/src/app/common/fret-map/fret-map.service.ts b/apps/fretonator-web/src/app/common/fret-map/fret-map.service.ts
@@ -88,10 +88,10 @@ export class FretMapService {
       }
     } else {
       return noteName === 'g'
-          ? 'a'
-          : Octave[Octave.indexOf(noteName) + 1];
+        ? 'a'
+        : Octave[Octave.indexOf(noteName) + 1];
     }
-}
+  };
 
   generateNextNote = (currentNote: NoteObject, interval: number): NoteObject => {
     const nextNote = {
@@ -243,16 +243,22 @@ export class FretMapService {
   };
 
   generateMode = (startingNote: NoteObject, mode: string): ModeMap => {
-    let currentNote = startingNote;
-    let newNote;
+    let currentNote = {
+      ...startingNote,
+      displayName: this.convertNoteObjectToHumanReadable(startingNote)
+    };
 
     const newMode: ModeMap = [];
     newMode.push(currentNote);
 
+    let newNote;
+
     const modePattern = ModePatterns[mode];
 
     for (let i = 0; i < modePattern.length - 1; i++) {
       newNote = this.generateNextNote(currentNote, modePattern[i]);
+      newNote.displayName = this.convertNoteObjectToHumanReadable(newNote)
+
       newMode.push(newNote);
       currentNote = newNote;
     }
diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html
@@ -63,7 +63,7 @@ <h4 class="fretonator__playCta">
 
 <div class="infoContainer">
   <app-scale-map [mode]="mode"
-                 [scale]="scale"
+                 [modeMap]="modeMap"
                  [isTheoretical]="scale | isTheoreticalScale"
                  [modeDisplayString]="modeDisplayString"
                  [note]="note"
diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.ts b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { ChordMap, FretMap, Mode, Scale } from '../../util/types';
+import { ChordMap, FretMap, Mode, ModeMap, Scale } from '../../util/types';
 import { NotePlaybackService } from '../playback/note-playback.service';
 
 @Component({
@@ -9,6 +9,7 @@ import { NotePlaybackService } from '../playback/note-playback.service';
 })
 export class FretonatorComponent {
   @Input() fretMap: FretMap;
+  @Input() modeMap: ModeMap;
   @Input() scale: Scale;
   @Input() intervalMap: [];
   @Input() chordMap: ChordMap;
diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.html b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.html
@@ -3,10 +3,9 @@
     <h4 class="scaleDisplay__title"
         [class.infoHighlight]="isTheoretical"><span *ngIf="isTheoretical">Theoretical &nbsp;</span>Scale</h4>
     <div class="scaleDisplay__notes">
-      <ng-container *ngFor="let scaleNote of scale; let i = index">
+      <ng-container *ngFor="let note of modeMap; let i = index">
         <h5 class="scaleDisplay__note">
-          {{ scaleNote }}
-          <span *ngIf="i < scale.length - 1"> - </span>
+          {{ note.displayName }}
         </h5>
       </ng-container>
     </div>
diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.scss b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.scss
@@ -84,6 +84,7 @@
   justify-content: center;
   align-items: center;
   margin-bottom: pxToRem($grid-unit * 8);
+  width: 100%;
 
   @media screen and (min-width: $screen-med) {
     flex-basis: 70%;
@@ -98,11 +99,29 @@
   flex-direction: row;
 }
 
+.scaleDisplay__notes {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
 .scaleDisplay__note {
-  display: inline;
-  font-size: pxToRem(24);
+  display: inline-block;
+  text-align: center;
+  font-size: pxToRem(18);
   font-family: var(--font-family-main);
   font-weight: var(--font-weight-bold);
+  margin: 0 pxToRem($grid-unit);
+
+  @media screen and (min-width: $screen-sm) {
+    font-size: pxToRem(24);
+  }
+
+  @media screen and (min-width: $screen-med) {
+    &:first-of-type {
+      margin-left: 0;
+    }
+  }
 }
 
 
diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.ts b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { Mode, Scale } from '../../../util/types';
+import { Mode, ModeMap, Scale } from '../../../util/types';
 
 enum ScaleDegreesToggleText {
   hidden = 'What is this?',
@@ -20,6 +20,7 @@ export class ScaleMapComponent {
   @Input() mode: Mode;
   @Input() note: string;
   @Input() noteExtenderString: string;
+  @Input() modeMap: ModeMap;
   @Input() scale: Scale;
   @Input() isTheoretical: boolean;
   @Input() modeDisplayString: string;
diff --git a/apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap b/apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap
@@ -1069,67 +1069,42 @@ exports[`HomeIndexComponent should create 1`] = `
                       class="scaleDisplay__note"
                     >
                        C 
-                      
-                      <span>
-                         - 
-                      </span>
                     </h5>
                     
                     <h5
                       class="scaleDisplay__note"
                     >
                        D 
-                      
-                      <span>
-                         - 
-                      </span>
                     </h5>
                     
                     <h5
                       class="scaleDisplay__note"
                     >
                        E 
-                      
-                      <span>
-                         - 
-                      </span>
                     </h5>
                     
                     <h5
                       class="scaleDisplay__note"
                     >
                        F 
-                      
-                      <span>
-                         - 
-                      </span>
                     </h5>
                     
                     <h5
                       class="scaleDisplay__note"
                     >
                        G 
-                      
-                      <span>
-                         - 
-                      </span>
                     </h5>
                     
                     <h5
                       class="scaleDisplay__note"
                     >
                        A 
-                      
-                      <span>
-                         - 
-                      </span>
                     </h5>
                     
                     <h5
                       class="scaleDisplay__note"
                     >
                        B 
-                      
                     </h5>
                   </div>
                   
diff --git a/apps/fretonator-web/src/app/pages/home/home-index/generate-mode-map.pipe.spec.ts b/apps/fretonator-web/src/app/pages/home/home-index/generate-mode-map.pipe.spec.ts
@@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing';
+
+import { GenerateModeMapPipe } from './generate-mode-map.pipe';
+import { Mode, ModeMap } from '../../../util/types';
+import { FretMapService } from '../../../common/fret-map/fret-map.service';
+import { GenerateFretMapPipe } from './generate-fret-map.pipe';
+
+describe('GenerateModeMapPipe', () => {
+  let pipe: GenerateModeMapPipe;
+
+  beforeEach(() => {
+    const service = TestBed.inject(FretMapService);
+    pipe = new GenerateModeMapPipe(service);
+  });
+
+  it('create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+
+  it('calls GenerateFretMapService.generateMode', () => {
+    const spy = spyOn(pipe.generateFretMapService, 'generateMode');
+
+    const note = {
+      name: 'c',
+      flat: false,
+      sharp: false,
+      doubleFlat: false,
+      doubleSharp: false,
+    };
+
+    pipe.transform(note, 'ionian' as Mode);
+    expect(spy).toHaveBeenCalledWith(note, 'ionian');
+  });
+});
diff --git a/apps/fretonator-web/src/app/pages/home/home-index/generate-mode-map.pipe.ts b/apps/fretonator-web/src/app/pages/home/home-index/generate-mode-map.pipe.ts
@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { FretMap, Mode, ModeMap, NoteObject } from '../../../util/types';
+import { FretMapService } from '../../../common/fret-map/fret-map.service';
+
+@Pipe({
+  name: 'generateModeMap'
+})
+export class GenerateModeMapPipe implements PipeTransform {
+  constructor(public generateFretMapService: FretMapService) {}
+
+  transform(note: NoteObject, mode: Mode): ModeMap {
+    return this.generateFretMapService.generateMode(note, mode);
+  }
+
+}
diff --git a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.html b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.html
@@ -79,7 +79,8 @@ <h2 class="modeSelector__label">Mode</h2>
 
     </div>
 
-    <app-fretonator [scale]="note | symbolToNoteObj: noteExtender | getScaleFromModeMap: mode"
+    <app-fretonator [modeMap]="note | symbolToNoteObj: noteExtender | generateModeMap: mode"
+                    [scale]="(note | symbolToNoteObj: noteExtender) | getScaleFromModeMap: mode"
                     [fretMap]="note | symbolToNoteObj: noteExtender | generateFretMap: mode"
                     [intervalMap]="mode | getIntervalPatternFromMode"
                     [chordMap]="note | symbolToNoteObj: noteExtender | getChordMap: mode"
diff --git a/apps/fretonator-web/src/app/pages/home/home.module.ts b/apps/fretonator-web/src/app/pages/home/home.module.ts
@@ -14,6 +14,7 @@ import { FretonatorModule } from '../../common/fretonator/fretonator.module';
 import { GetIntervalPatternFromModePipe } from './home-index/get-interval-pattern-from-mode.pipe';
 import { GetChordMapPipe } from './home-index/get-chord-map.pipe';
 import { CreateModeDisplayStringPipe } from './home-index/create-mode-display-string.pipe';
+import { GenerateModeMapPipe } from './home-index/generate-mode-map.pipe';
 
 @NgModule({
   declarations: [
@@ -25,6 +26,7 @@ import { CreateModeDisplayStringPipe } from './home-index/create-mode-display-st
     GetIntervalPatternFromModePipe,
     GetChordMapPipe,
     CreateModeDisplayStringPipe,
+    GenerateModeMapPipe,
   ],
   imports: [
     CommonModule,
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
@@ -1069,67 +1069,42 @@ exports[`HomeIndexComponent should create 1`] = `
`1069`	`1069`	`class="scaleDisplay__note"`
`1070`	`1070`	`>`
`1071`	`1071`	`C`
`1072`		`-`
`1073`		`- <span>`
`1074`		`- -`
`1075`		`- </span>`
`1076`	`1072`	`</h5>`
`1077`	`1073`
`1078`	`1074`	`<h5`
`1079`	`1075`	`class="scaleDisplay__note"`
`1080`	`1076`	`>`
`1081`	`1077`	`D`
`1082`		`-`
`1083`		`- <span>`
`1084`		`- -`
`1085`		`- </span>`
`1086`	`1078`	`</h5>`
`1087`	`1079`
`1088`	`1080`	`<h5`
`1089`	`1081`	`class="scaleDisplay__note"`
`1090`	`1082`	`>`
`1091`	`1083`	`E`
`1092`		`-`
`1093`		`- <span>`
`1094`		`- -`
`1095`		`- </span>`
`1096`	`1084`	`</h5>`
`1097`	`1085`
`1098`	`1086`	`<h5`
`1099`	`1087`	`class="scaleDisplay__note"`
`1100`	`1088`	`>`
`1101`	`1089`	`F`
`1102`		`-`
`1103`		`- <span>`
`1104`		`- -`
`1105`		`- </span>`
`1106`	`1090`	`</h5>`
`1107`	`1091`
`1108`	`1092`	`<h5`
`1109`	`1093`	`class="scaleDisplay__note"`
`1110`	`1094`	`>`
`1111`	`1095`	`G`
`1112`		`-`
`1113`		`- <span>`
`1114`		`- -`
`1115`		`- </span>`
`1116`	`1096`	`</h5>`
`1117`	`1097`
`1118`	`1098`	`<h5`
`1119`	`1099`	`class="scaleDisplay__note"`
`1120`	`1100`	`>`
`1121`	`1101`	`A`
`1122`		`-`
`1123`		`- <span>`
`1124`		`- -`
`1125`		`- </span>`
`1126`	`1102`	`</h5>`
`1127`	`1103`
`1128`	`1104`	`<h5`
`1129`	`1105`	`class="scaleDisplay__note"`
`1130`	`1106`	`>`
`1131`	`1107`	`B`
`1132`		`-`
`1133`	`1108`	`</h5>`
`1134`	`1109`	`</div>`
`1135`	`1110`