Identify theoretical modes and provide a link to the enharmonic

Author: Salma Alam-Naylor

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

@@ -55,7 +55,11 @@
 
 <div class="infoContainer">
   <app-scale-map [mode]="mode"
-                 [scale]="scale"></app-scale-map>
+                 [scale]="scale"
+                 [isTheoretical]="scale | isTheoreticalScale"
+                 [modeDisplayString]="modeDisplayString"
+                 [note]="note"
+                 [noteExtenderString]="noteExtenderString"></app-scale-map>
 
   <app-interval-map [intervalMap]="intervalMap"></app-interval-map>
 

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

@@ -12,5 +12,9 @@ export class FretonatorComponent {
   @Input() intervalMap: [];
   @Input() chordMap: ChordMap;
   @Input() mode: Mode;
+  @Input() modeDisplayString: string;
+  @Input() note: string;
+  @Input() noteExtenderString: string;
+
   frets = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 }

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

@@ -5,11 +5,13 @@ import { GetFretFromFretMapPipe } from './get-fret-from-fret-map.pipe';
 import { ChordMapModule } from './chord-map/chord-map.module';
 import { IntervalMapModule } from './interval-map/interval-map.module';
 import { ScaleMapModule } from './scale-map/scale-map.module';
+import { IsTheoreticalScalePipe } from './is-theoretical-scale.pipe';
 
 @NgModule({
   declarations: [
     FretonatorComponent,
     GetFretFromFretMapPipe,
+    IsTheoreticalScalePipe,
   ],
   imports: [
     CommonModule,

apps/fretonator-web/src/app/common/fretonator/is-theoretical-scale.pipe.spec.ts

@@ -0,0 +1,24 @@
+import { IsTheoreticalScalePipe } from './is-theoretical-scale.pipe';
+
+describe('IsTheoreticalScalePipe', () => {
+  let pipe: IsTheoreticalScalePipe;
+
+  beforeEach(() => {
+    pipe = new IsTheoreticalScalePipe();
+  });
+  it('create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('returns true for a scale with a double flat in', () => {
+    expect(pipe.transform(['C', 'D𝄫'])).toBe(true);
+  });
+
+  it('returns true for a scale with a double sharp in', () => {
+    expect(pipe.transform(['Cx', 'D'])).toBe(true);
+  });
+
+  it('returns false for scales without double flat or double sharp', () => {
+    expect(pipe.transform(['C', 'D'])).toBe(false);
+  });
+});

apps/fretonator-web/src/app/common/fretonator/is-theoretical-scale.pipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Scale } from '../../util/types';
+
+@Pipe({
+  name: 'isTheoreticalScale'
+})
+export class IsTheoreticalScalePipe implements PipeTransform {
+
+  transform(scale: Scale): boolean {
+    for (const note of scale) {
+      if(note.indexOf('x') !== -1 || note.indexOf('𝄫') !== -1) {
+        return true;
+      }
+    }
+    return false;
+  }
+}

apps/fretonator-web/src/app/common/fretonator/scale-map/get-enharmonic-equivalent.pipe.spec.ts

@@ -0,0 +1,13 @@
+import { GetEnharmonicEquivalentPipe } from './get-enharmonic-equivalent.pipe';
+
+describe('GetHarmonicEquivalentPipe', () => {
+  it('create an instance', () => {
+    const pipe = new GetEnharmonicEquivalentPipe();
+    expect(pipe).toBeTruthy();
+  });
+
+  it('returns A♭ for G#', () => {
+    const pipe = new GetEnharmonicEquivalentPipe();
+    expect(pipe.transform('G#')).toBe('A♭');
+  })
+});

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

@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Enharmonics } from '../../../util/constants';
+
+@Pipe({
+  name: 'getEnharmonicEquivalent'
+})
+export class GetEnharmonicEquivalentPipe implements PipeTransform {
+
+  transform(note: string): string {
+    for (const group of Enharmonics) {
+      if (group.indexOf(note) === 0) {
+        return group[1]
+      }
+
+      if (group.indexOf(note) === 1) {
+        return group[0]
+      }
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+import { GetEnharmonicRouterLinkPipe } from './get-enharmonic-router-link.pipe';
+
+describe('GetEnharmonicRouterLinkPipe', () => {
+  let pipe;
+  beforeEach(() => {
+    pipe = new GetEnharmonicRouterLinkPipe();
+  });
+  it('create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('returns correctly for g sharp ionian', () => {
+    expect(pipe.transform('g', 'sharp', 'ionian')).toStrictEqual(['/', 'a', 'flat', 'ionian']);
+  });
+});

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

@@ -0,0 +1,28 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { Enharmonics } from '../../../util/constants';
+
+@Pipe({
+  name: 'getEnharmonicRouterLink'
+})
+export class GetEnharmonicRouterLinkPipe implements PipeTransform {
+
+  transform(note: string, noteExtenderString: string, mode: string): string[] {
+    let newNote;
+
+    for(const group of Enharmonics) {
+        if (group[0].includes(note.toUpperCase())) {
+            newNote = group[1].charAt(0).toLowerCase();
+        }
+
+        if (group[1].includes(note.toUpperCase())) {
+          newNote = group[0].charAt(0).toLowerCase();
+        }
+    }
+
+    const newNoteExtender = noteExtenderString === 'sharp' ? 'flat' : 'sharp';
+
+    return ['/', newNote, newNoteExtender, mode];
+  }
+
+}

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

@@ -1,67 +1,99 @@
-  <div class="scaleMap__row">
-    <div class="scaleMap__degrees" *ngIf="mode | displayScaleDegrees">
-      <h4 class="scaleMap__title">Degrees</h4>
-      <div class="degreesDisplay">
-        <span class="degreesDisplay__degree degreesDisplay__degree--tonic">1</span>
-        <span class="degreesDisplay__degree degreesDisplay__degree--mediant"
-        >3</span
-        >
-        <span class="degreesDisplay__degree degreesDisplay__degree--dominant"
-        >5</span>
-      </div>
-      <button class="scaleDegrees__toggle"
-              aria-label="Scale Degrees Info Toggle"
-              type="button"
-              (click)="toggleScaleMapInfo()">{{scaleDegreesToggleText}}
-      </button>
+<div class="scaleMap__row">
+  <div class="scaleDisplay">
+    <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">
+        <h5 class="scaleDisplay__note">
+          {{ scaleNote }}
+          <span *ngIf="i < scale.length - 1"> - </span>
+        </h5>
+      </ng-container>
     </div>
+    <button *ngIf="isTheoretical"
+            class="button__infoToggle"
+            aria-label="Theoretical Scales Info Toggle"
+            type="button"
+            (click)="toggleTheoreticalScaleInfo()">{{theoreticalScalesToggleText}}
+    </button>
+  </div>
 
-    <div class="scaleDisplay">
-      <h4 class="scaleDisplay__title">Scale</h4>
-      <div class="scaleDisplay__notes">
-        <ng-container *ngFor="let scaleNote of scale; let i = index">
-          <h5 class="scaleDisplay__note">
-            {{ scaleNote }}
-            <span *ngIf="i < scale.length - 1"> - </span>
-          </h5>
-        </ng-container>
-      </div>
+  <div class="scaleMap__degrees" *ngIf="mode | displayScaleDegrees">
+    <h4 class="scaleMap__title">Degrees</h4>
+    <div class="degreesDisplay">
+      <span class="degreesDisplay__degree degreesDisplay__degree--tonic">1</span>
+      <span class="degreesDisplay__degree degreesDisplay__degree--mediant"
+      >3</span
+      >
+      <span class="degreesDisplay__degree degreesDisplay__degree--dominant"
+      >5</span>
     </div>
+    <button class="button__infoToggle"
+            aria-label="Scale Degrees Info Toggle"
+            type="button"
+            (click)="toggleScaleMapInfo()">{{scaleDegreesToggleText}}
+    </button>
   </div>
+</div>
 
-  <div class="scaleMapInfo"
-       [attr.aria-expanded]="showScaleMapInfo"
-       *ngIf="showScaleMapInfo">
-    <h2 class="scaleMapInfo__title">About Scale Degrees
-      <button class="scaleMapInfo__close"
-              aria-label="Scale Degrees Info Close"
-              type="button"
-              (click)="toggleScaleMapInfo()">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
-          <path fill="#474350" fill-rule="evenodd"
-                d="M14 1.41L12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7z"></path>
-        </svg>
-      </button>
-    </h2>
-    <p class="scaleMapInfo__copy">
-      Each of the 7 notes of a mode or scale is called a <em>scale degree</em>, and has a specific name.
-    </p>
-    <ol class="scaleMapInfo__list">
-      <li class="scaleMapInfo__listItem">Tonic</li>
-      <li class="scaleMapInfo__listItem">Supertonic</li>
-      <li class="scaleMapInfo__listItem">Mediant</li>
-      <li class="scaleMapInfo__listItem">Subdominant</li>
-      <li class="scaleMapInfo__listItem">Dominant</li>
-      <li class="scaleMapInfo__listItem">Submediant</li>
-      <li class="scaleMapInfo__listItem">Leading note</li>
-    </ol>
-    <p class="scaleMapInfo__copy">
-      Notes 1, 3 and 5 of a scale make up the <em>tonic triad</em>, which is simply a chord of three notes built on
-      the first note of the scale. This is the the most important chord to learn when jamming as it is the <em>home</em>
-      chord - meaning it's usually the chord that the jam track starts on and returns to often.
-    </p>
-    <p class="scaleMapInfo__copy">
-      Scale degrees 1, 3, and 5 are highlighted on the fretboard to give you a helpful point of reference when learning
-      the mode.
-    </p>
-  </div>
+<div class="infoBlock"
+     [attr.aria-expanded]="showTheoreticalScalesInfo"
+     *ngIf="showTheoreticalScalesInfo">
+  <h2 class="infoBlock__title">About Theoretical Scales
+    <button class="infoBlock__close"
+            aria-label="Theoretical Scales Info Close"
+            type="button"
+            (click)="toggleTheoreticalScaleInfo()">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
+        <path fill="#474350" fill-rule="evenodd"
+              d="M14 1.41L12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7z"></path>
+      </svg>
+    </button>
+  </h2>
+  <p class="infoBlock__copy">A theoretical scale or <em>impossible key</em> is a key whose key signature has at least
+    one double flat (𝄫) or double sharp (x).</p>
+  <p class="infoBlock__copy">{{modeDisplayString}} is a theoretical scale and looks unnecessarily complicated. We can make things simpler!</p>
+  <p class="infoBlock__copy">Switch to the enharmonic equivalent note of {{scale[0] | getEnharmonicEquivalent }} to make
+    the notes easier to read. (It'll sound exactly the same!)</p>
+  <a class="actionButton"
+     (click)="toggleTheoreticalScaleInfo()"
+     [routerLink]="note | getEnharmonicRouterLink: noteExtenderString: mode"
+  >Switch to {{scale[0] | getEnharmonicEquivalent }}</a>
+</div>
+
+<div class="infoBlock"
+     [attr.aria-expanded]="showScaleMapInfo"
+     *ngIf="showScaleMapInfo">
+  <h2 class="infoBlock__title">About Scale Degrees
+    <button class="infoBlock__close"
+            aria-label="Scale Degrees Info Close"
+            type="button"
+            (click)="toggleScaleMapInfo()">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
+        <path fill="#474350" fill-rule="evenodd"
+              d="M14 1.41L12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7z"></path>
+      </svg>
+    </button>
+  </h2>
+  <p class="infoBlock__copy">
+    Each of the 7 notes of a mode or scale is called a <em>scale degree</em>, and has a specific name.
+  </p>
+  <ol class="infoBlock__list">
+    <li class="infoBlock__listItem">Tonic</li>
+    <li class="infoBlock__listItem">Supertonic</li>
+    <li class="infoBlock__listItem">Mediant</li>
+    <li class="infoBlock__listItem">Subdominant</li>
+    <li class="infoBlock__listItem">Dominant</li>
+    <li class="infoBlock__listItem">Submediant</li>
+    <li class="infoBlock__listItem">Leading note</li>
+  </ol>
+  <p class="infoBlock__copy">
+    Notes 1, 3 and 5 of a scale make up the <em>tonic triad</em>, which is simply a chord of three notes built on
+    the first note of the scale. This is the the most important chord to learn when jamming as it is the <em>home</em>
+    chord - meaning it's usually the chord that the jam track starts on and returns to often.
+  </p>
+  <p class="infoBlock__copy">
+    Scale degrees 1, 3, and 5 are highlighted on the fretboard to give you a helpful point of reference when learning
+    the mode.
+  </p>
+</div>