From d88ac051a8ffaed80f6a30c642e23152c3a6b788 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Mon, 15 Jun 2020 20:46:23 +0100 Subject: [PATCH 01/20] Allow scale map component to receive a modeMap object so playback service can use this to construct an audio scale --- .../fret-map.service.testConstants.ts | 115 +++ .../app/common/fret-map/fret-map.service.ts | 16 +- .../fretonator/fretonator.component.html | 2 +- .../common/fretonator/fretonator.component.ts | 3 +- .../scale-map/scale-map.component.html | 5 +- .../scale-map/scale-map.component.scss | 23 +- .../scale-map/scale-map.component.ts | 3 +- .../home-index.component.spec.ts.snap | 25 - .../home-index/generate-mode-map.pipe.spec.ts | 35 + .../home/home-index/generate-mode-map.pipe.ts | 15 + .../home/home-index/home-index.component.html | 3 +- .../src/app/pages/home/home.module.ts | 2 + package-lock.json | 727 ++++++++++-------- package.json | 2 +- 14 files changed, 602 insertions(+), 374 deletions(-) create mode 100644 apps/fretonator-web/src/app/pages/home/home-index/generate-mode-map.pipe.spec.ts create mode 100644 apps/fretonator-web/src/app/pages/home/home-index/generate-mode-map.pipe.ts 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 index 6293bf0..686a128 100644 --- 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 @@ -7,6 +7,7 @@ export const aSharpPentatonicMajor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'A#', }, { name: 'b', @@ -14,6 +15,7 @@ export const aSharpPentatonicMajor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'B#' }, { name: 'c', @@ -21,6 +23,7 @@ export const aSharpPentatonicMajor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: true, + displayName: 'Cx' }, { name: 'e', @@ -28,6 +31,7 @@ export const aSharpPentatonicMajor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'E#' }, { name: 'f', @@ -35,6 +39,7 @@ export const aSharpPentatonicMajor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: true, + displayName: 'Fx' }, ] @@ -45,6 +50,7 @@ export const dFlatMajorPentatonic: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'D♭' }, { name: 'e', @@ -52,6 +58,7 @@ export const dFlatMajorPentatonic: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'E♭' }, { name: 'f', @@ -59,6 +66,7 @@ export const dFlatMajorPentatonic: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'F' }, { name: 'a', @@ -66,6 +74,7 @@ export const dFlatMajorPentatonic: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'A♭' }, { name: 'b', @@ -73,6 +82,7 @@ export const dFlatMajorPentatonic: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'B♭' }, ] @@ -83,6 +93,7 @@ export const fMinorPentatonic: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'F' }, { name: 'a', @@ -90,6 +101,7 @@ export const fMinorPentatonic: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'A♭' }, { name: 'b', @@ -97,6 +109,7 @@ export const fMinorPentatonic: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'B♭' }, { name: 'c', @@ -104,6 +117,7 @@ export const fMinorPentatonic: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'C' }, { name: 'e', @@ -111,6 +125,7 @@ export const fMinorPentatonic: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'E♭' }, ] @@ -121,6 +136,7 @@ export const gFlatMinorPentatonic: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'G♭' }, { name: 'b', @@ -128,6 +144,7 @@ export const gFlatMinorPentatonic: ModeMap = [ flat: false, doubleFlat: true, doubleSharp: false, + displayName: 'B𝄫' }, { name: 'c', @@ -135,6 +152,7 @@ export const gFlatMinorPentatonic: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'C♭' }, { name: 'd', @@ -142,6 +160,7 @@ export const gFlatMinorPentatonic: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'D♭' }, { name: 'f', @@ -149,6 +168,7 @@ export const gFlatMinorPentatonic: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'F♭' }, ] @@ -159,6 +179,7 @@ export const eFlatMajorPentatonic: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'E♭' }, { name: 'f', @@ -166,6 +187,7 @@ export const eFlatMajorPentatonic: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'F' }, { name: 'g', @@ -173,6 +195,7 @@ export const eFlatMajorPentatonic: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'G' }, { name: 'b', @@ -180,6 +203,7 @@ export const eFlatMajorPentatonic: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'B♭' }, { name: 'c', @@ -187,6 +211,7 @@ export const eFlatMajorPentatonic: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'C' }, ] @@ -197,6 +222,7 @@ export const fSharpMajorPentatonic: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'F#' }, { name: 'g', @@ -204,6 +230,7 @@ export const fSharpMajorPentatonic: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'G#' }, { name: 'a', @@ -211,6 +238,7 @@ export const fSharpMajorPentatonic: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'A#' }, { name: 'c', @@ -218,6 +246,7 @@ export const fSharpMajorPentatonic: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'C#' }, { name: 'd', @@ -225,6 +254,7 @@ export const fSharpMajorPentatonic: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'D#' }, ] @@ -235,6 +265,7 @@ export const eFlatMinorPentatonic: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'E♭' }, { name: 'g', @@ -242,6 +273,7 @@ export const eFlatMinorPentatonic: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'G♭' }, { name: 'a', @@ -249,6 +281,7 @@ export const eFlatMinorPentatonic: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'A♭' }, { name: 'b', @@ -256,6 +289,7 @@ export const eFlatMinorPentatonic: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'B♭' }, { name: 'd', @@ -263,6 +297,7 @@ export const eFlatMinorPentatonic: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'D♭' }, ] @@ -273,6 +308,7 @@ export const aMajorPentatonic: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'A' }, { name: 'b', @@ -280,6 +316,7 @@ export const aMajorPentatonic: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'B' }, { name: 'c', @@ -287,6 +324,7 @@ export const aMajorPentatonic: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'C#' }, { name: 'e', @@ -294,6 +332,7 @@ export const aMajorPentatonic: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'E' }, { name: 'f', @@ -301,6 +340,7 @@ export const aMajorPentatonic: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'F#' }, ] @@ -311,6 +351,7 @@ export const aMinorPentatonic: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'A' }, { name: 'c', @@ -318,6 +359,7 @@ export const aMinorPentatonic: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'C' }, { name: 'd', @@ -325,6 +367,7 @@ export const aMinorPentatonic: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'D' }, { name: 'e', @@ -332,6 +375,7 @@ export const aMinorPentatonic: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'E' }, { name: 'g', @@ -339,6 +383,7 @@ export const aMinorPentatonic: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'G' }, ] @@ -349,6 +394,7 @@ export const cIonianMode: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'C' }, { name: 'd', @@ -356,6 +402,7 @@ export const cIonianMode: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'D' }, { name: 'e', @@ -363,6 +410,7 @@ export const cIonianMode: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'E' }, { name: 'f', @@ -370,6 +418,7 @@ export const cIonianMode: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'F' }, { name: 'g', @@ -377,6 +426,7 @@ export const cIonianMode: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'G' }, { name: 'a', @@ -384,6 +434,7 @@ export const cIonianMode: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'A' }, { name: 'b', @@ -391,6 +442,7 @@ export const cIonianMode: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'B' }, ]; @@ -401,6 +453,7 @@ export const dDorianMode: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'D' }, { name: 'e', @@ -408,6 +461,7 @@ export const dDorianMode: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'E' }, { name: 'f', @@ -415,6 +469,7 @@ export const dDorianMode: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'F' }, { name: 'g', @@ -422,6 +477,7 @@ export const dDorianMode: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'G' }, { name: 'a', @@ -429,6 +485,7 @@ export const dDorianMode: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'A' }, { name: 'b', @@ -436,6 +493,7 @@ export const dDorianMode: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'B' }, { name: 'c', @@ -443,6 +501,7 @@ export const dDorianMode: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'C' }, ]; @@ -453,6 +512,7 @@ export const dHarmonicMinor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'D' }, { name: 'e', @@ -460,6 +520,7 @@ export const dHarmonicMinor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'E' }, { name: 'f', @@ -467,6 +528,7 @@ export const dHarmonicMinor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'F' }, { name: 'g', @@ -474,6 +536,7 @@ export const dHarmonicMinor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'G' }, { name: 'a', @@ -481,6 +544,7 @@ export const dHarmonicMinor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'A' }, { name: 'b', @@ -488,6 +552,7 @@ export const dHarmonicMinor: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'B♭' }, { name: 'c', @@ -495,6 +560,7 @@ export const dHarmonicMinor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'C#' }, ]; @@ -505,6 +571,7 @@ export const cHarmonicMinor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'C' }, { name: 'd', @@ -512,6 +579,7 @@ export const cHarmonicMinor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'D' }, { name: 'e', @@ -519,6 +587,7 @@ export const cHarmonicMinor: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'E♭' }, { name: 'f', @@ -526,6 +595,7 @@ export const cHarmonicMinor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'F' }, { name: 'g', @@ -533,6 +603,7 @@ export const cHarmonicMinor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'G' }, { name: 'a', @@ -540,6 +611,7 @@ export const cHarmonicMinor: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'A♭' }, { name: 'b', @@ -547,6 +619,7 @@ export const cHarmonicMinor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'B' }, ]; @@ -557,6 +630,7 @@ export const fSharpHarmonicMinor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'F#' }, { name: 'g', @@ -564,6 +638,7 @@ export const fSharpHarmonicMinor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'G#' }, { name: 'a', @@ -571,6 +646,7 @@ export const fSharpHarmonicMinor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'A' }, { name: 'b', @@ -578,6 +654,7 @@ export const fSharpHarmonicMinor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'B' }, { name: 'c', @@ -585,6 +662,7 @@ export const fSharpHarmonicMinor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'C#' }, { name: 'd', @@ -592,6 +670,7 @@ export const fSharpHarmonicMinor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'D' }, { name: 'e', @@ -599,6 +678,7 @@ export const fSharpHarmonicMinor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'E#' }, ]; @@ -609,6 +689,7 @@ export const cPhrygianMode: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'C' }, { name: 'd', @@ -616,6 +697,7 @@ export const cPhrygianMode: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'D♭' }, { name: 'e', @@ -623,6 +705,7 @@ export const cPhrygianMode: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'E♭' }, { name: 'f', @@ -630,6 +713,7 @@ export const cPhrygianMode: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'F' }, { name: 'g', @@ -637,6 +721,7 @@ export const cPhrygianMode: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'G' }, { name: 'a', @@ -644,6 +729,7 @@ export const cPhrygianMode: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'A♭' }, { name: 'b', @@ -651,6 +737,7 @@ export const cPhrygianMode: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'B♭' }, ]; @@ -661,6 +748,7 @@ export const bFlatPhrygian: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'B♭' }, { name: 'c', @@ -668,6 +756,7 @@ export const bFlatPhrygian: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'C♭' }, { name: 'd', @@ -675,6 +764,7 @@ export const bFlatPhrygian: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'D♭' }, { name: 'e', @@ -682,6 +772,7 @@ export const bFlatPhrygian: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'E♭' }, { name: 'f', @@ -689,6 +780,7 @@ export const bFlatPhrygian: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'F' }, { name: 'g', @@ -696,6 +788,7 @@ export const bFlatPhrygian: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'G♭' }, { name: 'a', @@ -703,6 +796,7 @@ export const bFlatPhrygian: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'A♭' }, ]; @@ -713,6 +807,7 @@ export const aFlatPhrygian: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'A♭' }, { name: 'b', @@ -720,6 +815,7 @@ export const aFlatPhrygian: ModeMap = [ flat: false, doubleFlat: true, doubleSharp: false, + displayName: 'B𝄫' }, { name: 'c', @@ -727,6 +823,7 @@ export const aFlatPhrygian: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'C♭' }, { name: 'd', @@ -734,6 +831,7 @@ export const aFlatPhrygian: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'D♭' }, { name: 'e', @@ -741,6 +839,7 @@ export const aFlatPhrygian: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'E♭' }, { name: 'f', @@ -748,6 +847,7 @@ export const aFlatPhrygian: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'F♭' }, { name: 'g', @@ -755,6 +855,7 @@ export const aFlatPhrygian: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'G♭' }, ]; @@ -765,6 +866,7 @@ export const bFlatLocrian: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'B♭' }, { name: 'c', @@ -772,6 +874,7 @@ export const bFlatLocrian: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'C♭' }, { name: 'd', @@ -779,6 +882,7 @@ export const bFlatLocrian: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'D♭' }, { name: 'e', @@ -786,6 +890,7 @@ export const bFlatLocrian: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'E♭' }, { name: 'f', @@ -793,6 +898,7 @@ export const bFlatLocrian: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'F♭' }, { name: 'g', @@ -800,6 +906,7 @@ export const bFlatLocrian: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'G♭' }, { name: 'a', @@ -807,6 +914,7 @@ export const bFlatLocrian: ModeMap = [ flat: true, doubleFlat: false, doubleSharp: false, + displayName: 'A♭' }, ]; @@ -817,6 +925,7 @@ export const aSharpMajor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'A#' }, { name: 'b', @@ -824,6 +933,7 @@ export const aSharpMajor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'B#' }, { name: 'c', @@ -831,6 +941,7 @@ export const aSharpMajor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: true, + displayName: 'Cx' }, { name: 'd', @@ -838,6 +949,7 @@ export const aSharpMajor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'D#' }, { name: 'e', @@ -845,6 +957,7 @@ export const aSharpMajor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: false, + displayName: 'E#' }, { name: 'f', @@ -852,6 +965,7 @@ export const aSharpMajor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: true, + displayName: 'Fx' }, { name: 'g', @@ -859,6 +973,7 @@ export const aSharpMajor: ModeMap = [ flat: false, doubleFlat: false, doubleSharp: true, + displayName: 'Gx' }, ]; 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 index ad6afcd..dbc7943 100644 --- 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 index 96f8bb0..58d3bd8 100644 --- 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 @@

Theoretical  Scale

- +
- {{ scaleNote }} - - + {{ note.displayName }}
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 index 27db181..ab237d0 100644 --- 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 index be10e64..e4d7f38 100644 --- 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 index c9a31dc..8aca701 100644 --- 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 - - - - -
D - - - - -
E - - - - -
F - - - - -
G - - - - -
A - - - - -
B -
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 new file mode 100644 index 0000000..2f3bb9e --- /dev/null +++ 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 new file mode 100644 index 0000000..cdc0f26 --- /dev/null +++ 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 index 27d5faa..30232c1 100644 --- 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 @@

Mode

- =2.2.7 <3" + } + }, "abab": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.3.tgz", @@ -3779,22 +3701,20 @@ "dev": true }, "agent-base": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.0.tgz", - "integrity": "sha512-j1Q7cSCqN+AwrmDd+pzgqc0/NpC655x2bUf5ZjRIO77DcNBFmh+OgRNzF6OKdCC9RSCb19fGd99+bhXFdkRNqw==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz", + "integrity": "sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==", "dev": true, "requires": { - "debug": "4" + "es6-promisify": "^5.0.0" } }, "agentkeepalive": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.1.2.tgz", - "integrity": "sha512-waNHE7tQBBn+2qXucI8HY0o2Y0OBPWldWOWsZwY71JcCm4SvrPnWdceFfB5NIXSqE8Ewq6VR/Qt5b1i69P6KCQ==", + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-3.5.2.tgz", + "integrity": "sha512-e0L/HNe6qkQ7H19kTlRRqUibEAwDK5AFk6y3PtMsuut2VAH6+Q4xZml1tNDJD7kSAyqmbG/K08K5WEJYtUrSlQ==", "dev": true, "requires": { - "debug": "^4.1.0", - "depd": "^1.1.2", "humanize-ms": "^1.2.1" } }, @@ -5389,40 +5309,50 @@ "dev": true }, "cacache": { - "version": "15.0.3", - "resolved": "https://registry.npmjs.org/cacache/-/cacache-15.0.3.tgz", - "integrity": "sha512-bc3jKYjqv7k4pWh7I/ixIjfcjPul4V4jme/WbjvwGS5LzoPL/GzXr4C5EgPNLO/QEZl9Oi61iGitYEdwcrwLCQ==", + "version": "12.0.4", + "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz", + "integrity": "sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==", "dev": true, "requires": { - "chownr": "^2.0.0", - "fs-minipass": "^2.0.0", + "bluebird": "^3.5.5", + "chownr": "^1.1.1", + "figgy-pudding": "^3.5.1", "glob": "^7.1.4", - "infer-owner": "^1.0.4", + "graceful-fs": "^4.1.15", + "infer-owner": "^1.0.3", "lru-cache": "^5.1.1", - "minipass": "^3.1.1", - "minipass-collect": "^1.0.2", - "minipass-flush": "^1.0.5", - "minipass-pipeline": "^1.2.2", - "mkdirp": "^1.0.3", - "move-file": "^2.0.0", - "p-map": "^4.0.0", + "mississippi": "^3.0.0", + "mkdirp": "^0.5.1", + "move-concurrently": "^1.0.1", "promise-inflight": "^1.0.1", - "rimraf": "^3.0.2", - "ssri": "^8.0.0", - "tar": "^6.0.2", - "unique-filename": "^1.1.1" + "rimraf": "^2.6.3", + "ssri": "^6.0.1", + "unique-filename": "^1.1.1", + "y18n": "^4.0.0" }, "dependencies": { - "chownr": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz", - "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==", - "dev": true + "rimraf": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", + "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", + "dev": true, + "requires": { + "glob": "^7.1.3" + } }, - "mkdirp": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", - "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", + "ssri": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz", + "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==", + "dev": true, + "requires": { + "figgy-pudding": "^3.5.1" + } + }, + "y18n": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz", + "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==", "dev": true } } @@ -7388,7 +7318,6 @@ "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", "dev": true, - "optional": true, "requires": { "iconv-lite": "~0.4.13" } @@ -7575,6 +7504,21 @@ "is-symbol": "^1.0.2" } }, + "es6-promise": { + "version": "4.2.8", + "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz", + "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==", + "dev": true + }, + "es6-promisify": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz", + "integrity": "sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=", + "dev": true, + "requires": { + "es6-promise": "^4.0.3" + } + }, "escape-html": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", @@ -8562,6 +8506,12 @@ "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=", "dev": true }, + "genfun": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/genfun/-/genfun-5.0.0.tgz", + "integrity": "sha512-KGDOARWVga7+rnB3z9Sd2Letx515owfk0hSxHGuqjANb1M+x2bGZGqHLiozPsYMdM2OubeMni/Hpwmjq6qIUhA==", + "dev": true + }, "gensync": { "version": "1.0.0-beta.1", "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.1.tgz", @@ -8972,9 +8922,9 @@ "dev": true }, "http-cache-semantics": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz", - "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==", + "version": "3.8.1", + "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz", + "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==", "dev": true }, "http-deceiver": { @@ -9020,14 +8970,30 @@ } }, "http-proxy-agent": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz", - "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-2.1.0.tgz", + "integrity": "sha512-qwHbBLV7WviBl0rQsOzH6o5lwyOIvwp/BdFnvVxXORldu5TmjFfjzBcWUWS5kWAZhmv+JtiDhSuQCp4sBfbIgg==", "dev": true, "requires": { - "@tootallnate/once": "1", - "agent-base": "6", - "debug": "4" + "agent-base": "4", + "debug": "3.1.0" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "dev": true, + "requires": { + "ms": "2.0.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "dev": true + } } }, "http-proxy-middleware": { @@ -9060,13 +9026,24 @@ "dev": true }, "https-proxy-agent": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz", - "integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==", + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz", + "integrity": "sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==", "dev": true, "requires": { - "agent-base": "6", - "debug": "4" + "agent-base": "^4.3.0", + "debug": "^3.1.0" + }, + "dependencies": { + "debug": { + "version": "3.2.6", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz", + "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", + "dev": true, + "requires": { + "ms": "^2.1.1" + } + } } }, "human-signals": { @@ -9478,12 +9455,6 @@ "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz", "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==" }, - "is-lambda": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz", - "integrity": "sha1-PZh3iZ5qU+/AFgUEzeFfgubwYdU=", - "dev": true - }, "is-number": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", @@ -10813,12 +10784,6 @@ "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==", "dev": true }, - "json-parse-even-better-errors": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.2.0.tgz", - "integrity": "sha512-2tLgY7LRNZ9Hd6gmCuBG5/OjRHQpSgJQqJoYyLLOhUgn8LdOYrjaZLcxkWnDads+AD/haWWioPNziXQcgvQJ/g==", - "dev": true - }, "json-schema": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz", @@ -11772,26 +11737,33 @@ "dev": true }, "make-fetch-happen": { - "version": "8.0.7", - "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-8.0.7.tgz", - "integrity": "sha512-rkDA4c1nMXVqLkfOaM5RK2dxkUndjLOCrPycTDZgbkFDzhmaCO3P1dmCW//yt1I/G1EcedJqMsSjWkV79Hh4hQ==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-5.0.2.tgz", + "integrity": "sha512-07JHC0r1ykIoruKO8ifMXu+xEU8qOXDFETylktdug6vJDACnP+HKevOu3PXyNPzFyTSlz8vrBYlBO1JZRe8Cag==", "dev": true, "requires": { - "agentkeepalive": "^4.1.0", - "cacache": "^15.0.0", - "http-cache-semantics": "^4.0.4", - "http-proxy-agent": "^4.0.1", - "https-proxy-agent": "^5.0.0", - "is-lambda": "^1.0.1", + "agentkeepalive": "^3.4.1", + "cacache": "^12.0.0", + "http-cache-semantics": "^3.8.1", + "http-proxy-agent": "^2.1.0", + "https-proxy-agent": "^2.2.3", "lru-cache": "^5.1.1", - "minipass": "^3.1.3", - "minipass-collect": "^1.0.2", - "minipass-fetch": "^1.1.2", - "minipass-flush": "^1.0.5", - "minipass-pipeline": "^1.2.2", + "mississippi": "^3.0.0", + "node-fetch-npm": "^2.0.2", "promise-retry": "^1.1.1", - "socks-proxy-agent": "^5.0.0", - "ssri": "^8.0.0" + "socks-proxy-agent": "^4.0.0", + "ssri": "^6.0.0" + }, + "dependencies": { + "ssri": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz", + "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==", + "dev": true, + "requires": { + "figgy-pudding": "^3.5.1" + } + } } }, "makeerror": { @@ -12143,19 +12115,6 @@ "minipass": "^3.0.0" } }, - "minipass-fetch": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-1.2.1.tgz", - "integrity": "sha512-ssHt0dkljEDaKmTgQ04DQgx2ag6G2gMPxA5hpcsoeTbfDgRf2fC2gNSRc6kISjD7ckCpHwwQvXxuTBK8402fXg==", - "dev": true, - "requires": { - "encoding": "^0.1.12", - "minipass": "^3.1.0", - "minipass-pipeline": "^1.2.2", - "minipass-sized": "^1.0.3", - "minizlib": "^2.0.0" - } - }, "minipass-flush": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz", @@ -12165,16 +12124,6 @@ "minipass": "^3.0.0" } }, - "minipass-json-stream": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/minipass-json-stream/-/minipass-json-stream-1.0.1.tgz", - "integrity": "sha512-ODqY18UZt/I8k+b7rl2AENgbWE8IDYam+undIJONvigAz8KR5GWblsFTEfQs0WODsjbSXWlm+JHEv8Gr6Tfdbg==", - "dev": true, - "requires": { - "jsonparse": "^1.3.1", - "minipass": "^3.0.0" - } - }, "minipass-pipeline": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.3.tgz", @@ -12184,15 +12133,6 @@ "minipass": "^3.0.0" } }, - "minipass-sized": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/minipass-sized/-/minipass-sized-1.0.3.tgz", - "integrity": "sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==", - "dev": true, - "requires": { - "minipass": "^3.0.0" - } - }, "minizlib": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.0.tgz", @@ -12293,23 +12233,6 @@ } } }, - "move-file": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/move-file/-/move-file-2.0.0.tgz", - "integrity": "sha512-cdkdhNCgbP5dvS4tlGxZbD+nloio9GIimP57EjqFhwLcMjnU+XJKAZzlmg/TN/AK1LuNAdTSvm3CPPP4Xkv0iQ==", - "dev": true, - "requires": { - "path-exists": "^4.0.0" - }, - "dependencies": { - "path-exists": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", - "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", - "dev": true - } - } - }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -12384,6 +12307,17 @@ "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==", "dev": true }, + "node-fetch-npm": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/node-fetch-npm/-/node-fetch-npm-2.0.4.tgz", + "integrity": "sha512-iOuIQDWDyjhv9qSDrj9aq/klt6F9z1p2otB3AV7v3zBDcL/x+OfGsvGQZZCcMZbUf4Ujw1xGNQkjvGnVT22cKg==", + "dev": true, + "requires": { + "encoding": "^0.1.11", + "json-parse-better-errors": "^1.0.0", + "safe-buffer": "^5.1.1" + } + }, "node-forge": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz", @@ -12568,14 +12502,13 @@ } }, "npm-packlist": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-2.1.2.tgz", - "integrity": "sha512-eByPaP+wsKai0BJX5pmb58d3mfR0zUATcnyuvSxIudTEn+swCPFLxh7srCmqB4hr7i9V24/DPjjq5b2qUtbgXQ==", + "version": "1.4.8", + "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz", + "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==", "dev": true, "requires": { - "glob": "^7.1.6", - "ignore-walk": "^3.0.3", - "npm-bundled": "^1.1.1", + "ignore-walk": "^3.0.1", + "npm-bundled": "^1.0.1", "npm-normalize-package-bin": "^1.0.1" } }, @@ -12599,19 +12532,44 @@ } }, "npm-registry-fetch": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-8.1.0.tgz", - "integrity": "sha512-RkcugRDye2j6yEiHGMyAdKQoipgp8VToSIjm+TFLhVraXOkC/WU2kjE2URcYBpcJ4hs++VFBKo6+Zg4wmrS+Qw==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-4.0.4.tgz", + "integrity": "sha512-6jb34hX/iYNQebqWUHtU8YF6Cjb1H6ouTFPClYsyiW6lpFkljTpdeftm53rRojtja1rKAvKNIIiTS5Sjpw4wsA==", "dev": true, "requires": { - "@npmcli/ci-detect": "^1.0.0", + "JSONStream": "^1.3.4", + "bluebird": "^3.5.1", + "figgy-pudding": "^3.4.1", "lru-cache": "^5.1.1", - "make-fetch-happen": "^8.0.7", - "minipass": "^3.1.3", - "minipass-fetch": "^1.1.2", - "minipass-json-stream": "^1.0.1", - "minizlib": "^2.0.0", - "npm-package-arg": "^8.0.0" + "make-fetch-happen": "^5.0.0", + "npm-package-arg": "^6.1.0", + "safe-buffer": "^5.2.0" + }, + "dependencies": { + "hosted-git-info": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz", + "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==", + "dev": true + }, + "npm-package-arg": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz", + "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==", + "dev": true, + "requires": { + "hosted-git-info": "^2.7.1", + "osenv": "^0.1.5", + "semver": "^5.6.0", + "validate-npm-package-name": "^3.0.0" + } + }, + "safe-buffer": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", + "dev": true + } } }, "npm-run-all": { @@ -12955,6 +12913,12 @@ "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=", "dev": true }, + "os-homedir": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", + "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", + "dev": true + }, "os-locale": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz", @@ -12972,6 +12936,16 @@ "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "dev": true }, + "osenv": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz", + "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", + "dev": true, + "requires": { + "os-homedir": "^1.0.0", + "os-tmpdir": "^1.0.0" + } + }, "ospath": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/ospath/-/ospath-1.2.2.tgz", @@ -13018,15 +12992,6 @@ "p-limit": "^1.1.0" } }, - "p-map": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz", - "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==", - "dev": true, - "requires": { - "aggregate-error": "^3.0.0" - } - }, "p-retry": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-3.0.1.tgz", @@ -13050,42 +13015,100 @@ "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=" }, "pacote": { - "version": "11.1.4", - "resolved": "https://registry.npmjs.org/pacote/-/pacote-11.1.4.tgz", - "integrity": "sha512-eUGJvSSpWFZKn3z8gig/HgnBmUl6gIWByIIaHzSyEr3tOWX0w8tFEADXtpu8HGv5E0ShCeTP6enRq8iHKCHSvw==", + "version": "9.5.12", + "resolved": "https://registry.npmjs.org/pacote/-/pacote-9.5.12.tgz", + "integrity": "sha512-BUIj/4kKbwWg4RtnBncXPJd15piFSVNpTzY0rysSr3VnMowTYgkGKcaHrbReepAkjTr8lH2CVWRi58Spg2CicQ==", "dev": true, "requires": { - "@npmcli/git": "^2.0.1", - "@npmcli/installed-package-contents": "^1.0.5", - "@npmcli/promise-spawn": "^1.1.0", - "cacache": "^15.0.0", - "chownr": "^1.1.4", - "fs-minipass": "^2.1.0", + "bluebird": "^3.5.3", + "cacache": "^12.0.2", + "chownr": "^1.1.2", + "figgy-pudding": "^3.5.1", + "get-stream": "^4.1.0", + "glob": "^7.1.3", "infer-owner": "^1.0.4", "lru-cache": "^5.1.1", - "minipass": "^3.0.1", - "minipass-fetch": "^1.2.1", - "mkdirp": "^1.0.3", - "npm-package-arg": "^8.0.1", - "npm-packlist": "^2.1.0", - "npm-pick-manifest": "^6.0.0", - "npm-registry-fetch": "^8.0.0", + "make-fetch-happen": "^5.0.0", + "minimatch": "^3.0.4", + "minipass": "^2.3.5", + "mississippi": "^3.0.0", + "mkdirp": "^0.5.1", + "normalize-package-data": "^2.4.0", + "npm-normalize-package-bin": "^1.0.0", + "npm-package-arg": "^6.1.0", + "npm-packlist": "^1.1.12", + "npm-pick-manifest": "^3.0.0", + "npm-registry-fetch": "^4.0.0", + "osenv": "^0.1.5", "promise-inflight": "^1.0.1", "promise-retry": "^1.1.1", - "read-package-json-fast": "^1.1.3", - "rimraf": "^2.7.1", - "semver": "^7.1.3", - "ssri": "^8.0.0", - "tar": "^6.0.1", - "which": "^2.0.2" + "protoduck": "^5.0.1", + "rimraf": "^2.6.2", + "safe-buffer": "^5.1.2", + "semver": "^5.6.0", + "ssri": "^6.0.1", + "tar": "^4.4.10", + "unique-filename": "^1.1.1", + "which": "^1.3.1" }, "dependencies": { - "mkdirp": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", - "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", + "fs-minipass": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.7.tgz", + "integrity": "sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==", + "dev": true, + "requires": { + "minipass": "^2.6.0" + } + }, + "hosted-git-info": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz", + "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==", "dev": true }, + "minipass": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz", + "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==", + "dev": true, + "requires": { + "safe-buffer": "^5.1.2", + "yallist": "^3.0.0" + } + }, + "minizlib": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.3.3.tgz", + "integrity": "sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==", + "dev": true, + "requires": { + "minipass": "^2.9.0" + } + }, + "npm-package-arg": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz", + "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==", + "dev": true, + "requires": { + "hosted-git-info": "^2.7.1", + "osenv": "^0.1.5", + "semver": "^5.6.0", + "validate-npm-package-name": "^3.0.0" + } + }, + "npm-pick-manifest": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-3.0.2.tgz", + "integrity": "sha512-wNprTNg+X5nf+tDi+hbjdHhM4bX+mKqv6XmPh7B5eG+QY9VARfQPfCEH013H5GqfNj6ee8Ij2fg8yk0mzps1Vw==", + "dev": true, + "requires": { + "figgy-pudding": "^3.5.1", + "npm-package-arg": "^6.0.0", + "semver": "^5.4.1" + } + }, "rimraf": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", @@ -13095,11 +13118,38 @@ "glob": "^7.1.3" } }, - "semver": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz", - "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==", - "dev": true + "ssri": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz", + "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==", + "dev": true, + "requires": { + "figgy-pudding": "^3.5.1" + } + }, + "tar": { + "version": "4.4.13", + "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.13.tgz", + "integrity": "sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==", + "dev": true, + "requires": { + "chownr": "^1.1.1", + "fs-minipass": "^1.2.5", + "minipass": "^2.8.6", + "minizlib": "^1.2.1", + "mkdirp": "^0.5.0", + "safe-buffer": "^5.1.2", + "yallist": "^3.0.3" + } + }, + "which": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", + "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", + "dev": true, + "requires": { + "isexe": "^2.0.0" + } } } }, @@ -14160,6 +14210,15 @@ "sisteransi": "^1.0.4" } }, + "protoduck": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/protoduck/-/protoduck-5.0.1.tgz", + "integrity": "sha512-WxoCeDCoCBY55BMvj4cAEjdVUFGRWed9ZxPlqTKYyw1nDDTQ4pqmnIMAGfJlg7Dx35uB/M+PHJPTmGOvaCaPTg==", + "dev": true, + "requires": { + "genfun": "^5.0.0" + } + }, "proxy-addr": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz", @@ -14374,16 +14433,6 @@ "npm-normalize-package-bin": "^1.0.0" } }, - "read-package-json-fast": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/read-package-json-fast/-/read-package-json-fast-1.1.3.tgz", - "integrity": "sha512-MmFqiyfCXV2Dmm4jH24DEGhxdkUDFivJQj4oPZQPOKywxR7HWBE6WnMWDAapfFHi3wm1b+mhR+XHlUH0CL8axg==", - "dev": true, - "requires": { - "json-parse-even-better-errors": "^2.0.1", - "npm-normalize-package-bin": "^1.0.1" - } - }, "read-package-tree": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/read-package-tree/-/read-package-tree-5.3.1.tgz", @@ -15710,14 +15759,24 @@ } }, "socks-proxy-agent": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-5.0.0.tgz", - "integrity": "sha512-lEpa1zsWCChxiynk+lCycKuC502RxDWLKJZoIhnxrWNjLSDGYRFflHA1/228VkRcnv9TIb8w98derGbpKxJRgA==", + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-4.0.2.tgz", + "integrity": "sha512-NT6syHhI9LmuEMSK6Kd2V7gNv5KFZoLE7V5udWmn0de+3Mkj3UMA/AJPLyeNUVmElCurSHtUdM3ETpR3z770Wg==", "dev": true, "requires": { - "agent-base": "6", - "debug": "4", - "socks": "^2.3.3" + "agent-base": "~4.2.1", + "socks": "~2.3.2" + }, + "dependencies": { + "agent-base": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.2.1.tgz", + "integrity": "sha512-JVwXMr9nHYTUXsBFKUqhJwvlcYU/blreOEUkhNR2eXZIvwd+c+o5V4MgDPKWnMS/56awN3TRzIP+KoPn+roQtg==", + "dev": true, + "requires": { + "es6-promisify": "^5.0.0" + } + } } }, "sort-keys": { diff --git a/package.json b/package.json index 30f8f6e..81fccf6 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ }, "devDependencies": { "@angular-devkit/build-angular": "0.901.0", - "@angular/cli": "9.1.0", + "@angular/cli": "^9.1.8", "@angular/compiler-cli": "^9.1.0", "@angular/language-service": "^9.1.0", "@nguniversal/builders": "^9.1.1", From 19b9c1be1a133057859f343279f0941b886c8729 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Mon, 15 Jun 2020 21:07:31 +0100 Subject: [PATCH 02/20] Allow isTheoreticalScale to be calculated with a modeMap input to remove the need to pass around a scale [] of strings --- .../fretonator/fretonator.component.html | 2 +- .../fretonator/fretonator.component.spec.ts | 9 +++++- .../common/fretonator/fretonator.component.ts | 3 +- .../is-theoretical-scale.pipe.spec.ts | 11 +++++-- .../fretonator/is-theoretical-scale.pipe.ts | 8 ++--- .../get-enharmonic-router-link.pipe.ts | 1 - .../src/app/common/svgs/cross/cross.module.ts | 1 - .../common/svgs/speaker/speaker.component.ts | 2 +- .../app/common/svgs/speaker/speaker.module.ts | 1 - .../home-index/generate-mode-map.pipe.spec.ts | 3 +- .../home/home-index/generate-mode-map.pipe.ts | 2 +- .../get-scale-from-mode-map.pipe.spec.ts | 30 ------------------- .../get-scale-from-mode-map.pipe.ts | 16 ---------- .../home/home-index/home-index.component.html | 1 - .../src/app/pages/home/home.module.ts | 2 -- apps/fretonator-web/src/app/util/constants.ts | 2 +- 16 files changed, 26 insertions(+), 68 deletions(-) delete mode 100644 apps/fretonator-web/src/app/pages/home/home-index/get-scale-from-mode-map.pipe.spec.ts delete mode 100644 apps/fretonator-web/src/app/pages/home/home-index/get-scale-from-mode-map.pipe.ts diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html index 58d3bd8..187bac2 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html @@ -64,7 +64,7 @@

diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.spec.ts b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.spec.ts index ae3c7ce..e9e7e69 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.spec.ts +++ b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.spec.ts @@ -8,7 +8,14 @@ describe('FretonatorComponent', () => { @Component({ selector: 'app-fretonator-spec', template: ` - diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.ts b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.ts index 5b82a6c..78b79bb 100644 --- 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, ModeMap, Scale } from '../../util/types'; +import { ChordMap, FretMap, Mode, ModeMap } from '../../util/types'; import { NotePlaybackService } from '../playback/note-playback.service'; @Component({ @@ -10,7 +10,6 @@ import { NotePlaybackService } from '../playback/note-playback.service'; export class FretonatorComponent { @Input() fretMap: FretMap; @Input() modeMap: ModeMap; - @Input() scale: Scale; @Input() intervalMap: []; @Input() chordMap: ChordMap; @Input() mode: Mode; diff --git a/apps/fretonator-web/src/app/common/fretonator/is-theoretical-scale.pipe.spec.ts b/apps/fretonator-web/src/app/common/fretonator/is-theoretical-scale.pipe.spec.ts index a7ace33..f7399f8 100644 --- a/apps/fretonator-web/src/app/common/fretonator/is-theoretical-scale.pipe.spec.ts +++ b/apps/fretonator-web/src/app/common/fretonator/is-theoretical-scale.pipe.spec.ts @@ -1,4 +1,9 @@ import { IsTheoreticalScalePipe } from './is-theoretical-scale.pipe'; +import { + aSharpPentatonicMajor, + fMinorPentatonic, + gFlatMinorPentatonic +} from '../fret-map/fret-map.service.testConstants'; describe('IsTheoreticalScalePipe', () => { let pipe: IsTheoreticalScalePipe; @@ -11,14 +16,14 @@ describe('IsTheoreticalScalePipe', () => { }); it('returns true for a scale with a double flat in', () => { - expect(pipe.transform(['C', 'D𝄫'])).toBe(true); + expect(pipe.transform(gFlatMinorPentatonic)).toBe(true); }); it('returns true for a scale with a double sharp in', () => { - expect(pipe.transform(['Cx', 'D'])).toBe(true); + expect(pipe.transform(aSharpPentatonicMajor)).toBe(true); }); it('returns false for scales without double flat or double sharp', () => { - expect(pipe.transform(['C', 'D'])).toBe(false); + expect(pipe.transform(fMinorPentatonic)).toBe(false); }); }); diff --git a/apps/fretonator-web/src/app/common/fretonator/is-theoretical-scale.pipe.ts b/apps/fretonator-web/src/app/common/fretonator/is-theoretical-scale.pipe.ts index 0a34ee2..054f298 100644 --- a/apps/fretonator-web/src/app/common/fretonator/is-theoretical-scale.pipe.ts +++ b/apps/fretonator-web/src/app/common/fretonator/is-theoretical-scale.pipe.ts @@ -1,14 +1,14 @@ import { Pipe, PipeTransform } from '@angular/core'; -import { Scale } from '../../util/types'; +import { ModeMap } 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) { + transform(modeMap: ModeMap): boolean { + for (const note of modeMap) { + if(note.displayName.indexOf('x') !== -1 || note.displayName.indexOf('𝄫') !== -1) { return true; } } diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/get-enharmonic-router-link.pipe.ts b/apps/fretonator-web/src/app/common/fretonator/scale-map/get-enharmonic-router-link.pipe.ts index fd4c338..2f7c1c9 100644 --- a/apps/fretonator-web/src/app/common/fretonator/scale-map/get-enharmonic-router-link.pipe.ts +++ b/apps/fretonator-web/src/app/common/fretonator/scale-map/get-enharmonic-router-link.pipe.ts @@ -1,5 +1,4 @@ import { Pipe, PipeTransform } from '@angular/core'; -import { RouterLink } from '@angular/router'; import { Enharmonics } from '../../../util/constants'; @Pipe({ diff --git a/apps/fretonator-web/src/app/common/svgs/cross/cross.module.ts b/apps/fretonator-web/src/app/common/svgs/cross/cross.module.ts index 29d1285..f8f85e3 100644 --- a/apps/fretonator-web/src/app/common/svgs/cross/cross.module.ts +++ b/apps/fretonator-web/src/app/common/svgs/cross/cross.module.ts @@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common'; import { CrossComponent } from './cross.component'; - @NgModule({ declarations: [CrossComponent], exports: [ diff --git a/apps/fretonator-web/src/app/common/svgs/speaker/speaker.component.ts b/apps/fretonator-web/src/app/common/svgs/speaker/speaker.component.ts index dca7414..7217d54 100644 --- a/apps/fretonator-web/src/app/common/svgs/speaker/speaker.component.ts +++ b/apps/fretonator-web/src/app/common/svgs/speaker/speaker.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'app-speaker-svg', diff --git a/apps/fretonator-web/src/app/common/svgs/speaker/speaker.module.ts b/apps/fretonator-web/src/app/common/svgs/speaker/speaker.module.ts index 5d5f7dc..273a677 100644 --- a/apps/fretonator-web/src/app/common/svgs/speaker/speaker.module.ts +++ b/apps/fretonator-web/src/app/common/svgs/speaker/speaker.module.ts @@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common'; import { SpeakerComponent } from './speaker.component'; - @NgModule({ declarations: [SpeakerComponent], exports: [ 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 index 2f3bb9e..fe630a9 100644 --- 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 @@ -1,9 +1,8 @@ import { TestBed } from '@angular/core/testing'; import { GenerateModeMapPipe } from './generate-mode-map.pipe'; -import { Mode, ModeMap } from '../../../util/types'; +import { Mode } from '../../../util/types'; import { FretMapService } from '../../../common/fret-map/fret-map.service'; -import { GenerateFretMapPipe } from './generate-fret-map.pipe'; describe('GenerateModeMapPipe', () => { let pipe: GenerateModeMapPipe; 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 index cdc0f26..8eb3e4a 100644 --- 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 @@ -1,5 +1,5 @@ import { Pipe, PipeTransform } from '@angular/core'; -import { FretMap, Mode, ModeMap, NoteObject } from '../../../util/types'; +import { Mode, ModeMap, NoteObject } from '../../../util/types'; import { FretMapService } from '../../../common/fret-map/fret-map.service'; @Pipe({ diff --git a/apps/fretonator-web/src/app/pages/home/home-index/get-scale-from-mode-map.pipe.spec.ts b/apps/fretonator-web/src/app/pages/home/home-index/get-scale-from-mode-map.pipe.spec.ts deleted file mode 100644 index d1c161f..0000000 --- a/apps/fretonator-web/src/app/pages/home/home-index/get-scale-from-mode-map.pipe.spec.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { TestBed } from '@angular/core/testing'; -import { GetScaleFromModeMapPipe } from './get-scale-from-mode-map.pipe'; -import { Mode } from '../../../util/types'; -import { FretMapService } from '../../../common/fret-map/fret-map.service'; - -const cNoteObj = { - name: 'c', - flat: false, - sharp: false, - doubleFlat: false, - doubleSharp: false, -}; -describe('GetScaleFromModeMapPipe', () => { - let service: FretMapService; - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(FretMapService); - }); - - it('create an instance', () => { - const pipe = new GetScaleFromModeMapPipe(service); - expect(pipe).toBeTruthy(); - }); - - it('returns the C major scale', () => { - const pipe = new GetScaleFromModeMapPipe(service); - const result = pipe.transform(cNoteObj, Mode.ionian); - expect(result).toEqual(['C', 'D', 'E', 'F', 'G', 'A', 'B']); - }); -}); diff --git a/apps/fretonator-web/src/app/pages/home/home-index/get-scale-from-mode-map.pipe.ts b/apps/fretonator-web/src/app/pages/home/home-index/get-scale-from-mode-map.pipe.ts deleted file mode 100644 index 88fde6e..0000000 --- a/apps/fretonator-web/src/app/pages/home/home-index/get-scale-from-mode-map.pipe.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Pipe, PipeTransform } from '@angular/core'; -import { Mode, NoteObject, Scale } from '../../../util/types'; -import { FretMapService } from '../../../common/fret-map/fret-map.service'; - -@Pipe({ - name: 'getScaleFromModeMap', -}) -export class GetScaleFromModeMapPipe implements PipeTransform { - constructor(private generateFretMapService: FretMapService) { - } - - transform(note: NoteObject, mode: Mode): Scale { - const modeMap = this.generateFretMapService.generateMode(note, mode); - return modeMap.map(thisNote => this.generateFretMapService.convertNoteObjectToHumanReadable(thisNote)); - } -} 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 index 30232c1..1f36021 100644 --- 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 @@ -80,7 +80,6 @@

Mode

Date: Tue, 16 Jun 2020 01:55:09 +0100 Subject: [PATCH 03/20] Fixed npm run commans --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 81fccf6..9245fdb 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,8 @@ "build": "ng build", "test": "ng test", "test:coverage": "npm run affected:test -- --all --code-coverage", - "test:update": "nx test —-updateSnapshot", + "test:update": "nx test -- --updateSnapshot", + "test:watch": "npm run affected:test -- --watchAll", "lint": "nx workspace-lint && ng lint", "e2e": "ng e2e", "affected:apps": "nx affected:apps", From 3addab54f2d96874b18a544d356c0fd9908f63b0 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Tue, 16 Jun 2020 01:55:35 +0100 Subject: [PATCH 04/20] Small fixes --- .../app/common/fret-map/fret-map.service.ts | 1 - .../fretonator/fretonator.component.scss | 25 ++++++++++++------- apps/fretonator-web/src/styles.scss | 1 + 3 files changed, 17 insertions(+), 10 deletions(-) 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 index dbc7943..ff755a5 100644 --- 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 @@ -328,7 +328,6 @@ export class FretMapService { const modeMap = origModeMap.map((noteObject, index) => ({ ...noteObject, - displayName: this.convertNoteObjectToHumanReadable(noteObject), degree: ScaleDegrees[index] })); diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss index 0e45dab..af93d64 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss +++ b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss @@ -40,15 +40,10 @@ bottom: 50%; left: 0; right: 0; - transform: translatey(calc(50% - 1px)); - opacity: .9; + transform: translateY(calc(50% - 1px)); cursor: pointer; } - &:hover:after{ - opacity: 1; - } - &:nth-child(-n + 13) { height: calc(var(--string-height-base) / 2); @@ -102,6 +97,7 @@ content: attr(data-display-note); height: var(--note-height); width: var(--note-height); + line-height: var(--note-height); left: 50%; right: unset; box-sizing: border-box; @@ -109,15 +105,26 @@ transform: translate(-50%, 50%); background-color: var(--note-background); color: var(--note-color); - line-height: var(--note-height); text-align: center; font-weight: var(--font-weight-bold); font-family: var(--font-family-main); font-size: pxToRem(12); + opacity: 0.9; + transition-duration: 0.1s; + transition-property: line-height, height, width, opacity; + transition-timing-function: ease-in-out; + } + + &:hover:after, + &:active:after { + opacity: 1; + height: var(--note-height-hover); + width: var(--note-height-hover); + line-height: var(--note-height-hover); } &:nth-child(-n + 13):after { - transform: translate(-50%, 1px); + transform: translate(-50%, 6px); } &:nth-last-child(-n + 13):after { @@ -183,7 +190,7 @@ } &:nth-child(-n + 13):after { - transform: translate(-50%, 1px); + transform: translate(-50%, 6px); } &:nth-last-child(-n + 13):after { diff --git a/apps/fretonator-web/src/styles.scss b/apps/fretonator-web/src/styles.scss index acafec4..aaae7f7 100644 --- a/apps/fretonator-web/src/styles.scss +++ b/apps/fretonator-web/src/styles.scss @@ -18,6 +18,7 @@ --note-color: #fafac6; --note-background: #1c1c1c; --note-height: 36px; + --note-height-hover: 39px; --note-bg-tonic: #fecdaa; --note-color-tonic: #1c1c1c; From 2a263fa74e5b7087940964c78bd8d0b77583576f Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Tue, 16 Jun 2020 02:49:04 +0100 Subject: [PATCH 05/20] Added a play button for playScale and standardised some css vars --- .../app/common/chips/chip/chip.component.html | 2 +- .../app/common/chips/chip/chip.component.scss | 18 ++++++---- .../app/common/chips/chip/chip.component.ts | 2 +- .../fretonator/fretonator.component.scss | 2 +- .../scale-map/scale-map.component.html | 28 +++++++++++----- .../scale-map/scale-map.component.scss | 33 +++++++++++++++++++ .../scale-map/scale-map.component.ts | 4 +++ .../fretonator/scale-map/scale-map.module.ts | 4 ++- .../app/common/svgs/play/play.component.html | 6 ++++ .../app/common/svgs/play/play.component.scss | 6 ++++ .../common/svgs/play/play.component.spec.ts | 25 ++++++++++++++ .../app/common/svgs/play/play.component.ts | 9 +++++ .../src/app/common/svgs/play/play.module.ts | 16 +++++++++ .../home-index.component.spec.ts.snap | 30 ++++++++++++++++- .../home/home-index/home-index.component.html | 6 ++-- .../home/home-index/home-index.component.scss | 1 + .../not-found-index.component.scss | 2 -- apps/fretonator-web/src/styles.scss | 22 +++++++++++-- apps/fretonator-web/src/styles/_mixins.scss | 6 ++-- 19 files changed, 192 insertions(+), 30 deletions(-) create mode 100644 apps/fretonator-web/src/app/common/svgs/play/play.component.html create mode 100644 apps/fretonator-web/src/app/common/svgs/play/play.component.scss create mode 100644 apps/fretonator-web/src/app/common/svgs/play/play.component.spec.ts create mode 100644 apps/fretonator-web/src/app/common/svgs/play/play.component.ts create mode 100644 apps/fretonator-web/src/app/common/svgs/play/play.module.ts diff --git a/apps/fretonator-web/src/app/common/chips/chip/chip.component.html b/apps/fretonator-web/src/app/common/chips/chip/chip.component.html index 700c6ff..786bef6 100644 --- a/apps/fretonator-web/src/app/common/chips/chip/chip.component.html +++ b/apps/fretonator-web/src/app/common/chips/chip/chip.component.html @@ -4,7 +4,7 @@ class="chip" [class.chip--active]="selected" [class.chip--round]="rounded" - [class.chip--grey]="selectedColor === SelectedColor.grey" + [class.chip--muted]="selectedColor === SelectedColor.muted" > diff --git a/apps/fretonator-web/src/app/common/chips/chip/chip.component.scss b/apps/fretonator-web/src/app/common/chips/chip/chip.component.scss index e5de00a..55419c9 100644 --- a/apps/fretonator-web/src/app/common/chips/chip/chip.component.scss +++ b/apps/fretonator-web/src/app/common/chips/chip/chip.component.scss @@ -10,9 +10,10 @@ @include chip_button_base() } -.chip--grey { - border-color: var(--grey); - color: var(--grey); +.chip--muted { + border-color: var(--chip-border-color-muted); + color: var(--chip-foreground-color-muted); + background-color: var(--chip-background-color-muted); } .chip--round { @@ -25,10 +26,13 @@ } .chip--active { - background-color: var(--black); - color: var(--white); + background-color: var(--chip-background-color-active); + color: var(--chip-foreground-color-active); + border-color: var(--chip-border-color-active); - &.chip--grey { - background-color: var(--grey); + &.chip--muted { + background-color: var(--chip-background-color-muted-active); + border-color: var(--chip-border-color-muted-active); + color: var(--chip-foreground-color-muted-active); } } diff --git a/apps/fretonator-web/src/app/common/chips/chip/chip.component.ts b/apps/fretonator-web/src/app/common/chips/chip/chip.component.ts index 459df91..2dbdbc7 100644 --- a/apps/fretonator-web/src/app/common/chips/chip/chip.component.ts +++ b/apps/fretonator-web/src/app/common/chips/chip/chip.component.ts @@ -4,7 +4,7 @@ import { ActivatedRoute } from '@angular/router'; export enum SelectedColor { default = 'default', - grey = 'grey', + muted = 'muted', } @Component({ diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss index af93d64..bf81cff 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss +++ b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss @@ -233,7 +233,7 @@ @include content_wrapper(); max-width: $screen-med; margin-top: pxToRem($grid-unit * 4); - background-color: var(--white); + background-color: var(--background-color-light); padding: pxToRem($grid-unit * 4); border-radius: pxToRem($grid-unit * 4); box-shadow: 0 pxToRem(1) pxToRem(3) rgba(26, 26, 26, 0.12), 0 pxToRem(1) pxToRem(2) rgba(26, 26, 26, 0.24); 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 index 1bb94fd..956be17 100644 --- 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 @@ -9,12 +9,23 @@
- +
+ + +
@@ -43,12 +54,13 @@

About Theoretical Scales aria-label="Theoretical Scales Info Close" type="button" (click)="toggleTheoreticalScaleInfo()"> - +

A theoretical scale or impossible key is a key whose key signature has at least one double flat (𝄫) or double sharp (x).

-

{{modeDisplayString}} is a theoretical scale and looks unnecessarily complicated. We can make things simpler!

+

{{modeDisplayString}} is a theoretical scale and looks unnecessarily complicated. We can + make things simpler!

Switch to the enharmonic equivalent note of {{scale[0] | getEnharmonicEquivalent }} to make the notes easier to read. (It'll sound exactly the same!)

+ + +
-
+
-
+
C @@ -187,11 +187,11 @@ exports[`HomeIndexComponent should create 1`] = ` C# @@ -339,6 +339,20 @@ exports[`HomeIndexComponent should create 1`] = `
+
+ + +
@@ -351,7 +365,6 @@ exports[`HomeIndexComponent should create 1`] = ` >
diff --git a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss index dc1d463..ae021f2 100644 --- a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss +++ b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss @@ -135,6 +135,7 @@ .modeSelector__container { @include content_wrapper; + max-width: none; margin-top: pxToRem($grid-unit * 4); margin-bottom: pxToRem($grid-unit * 4); } diff --git a/apps/fretonator-web/src/app/util/constants.ts b/apps/fretonator-web/src/app/util/constants.ts index 5e7695c..77d330a 100644 --- a/apps/fretonator-web/src/app/util/constants.ts +++ b/apps/fretonator-web/src/app/util/constants.ts @@ -3,262 +3,439 @@ import { ChordType, Mode } from './types'; export const NoteToStringAndFretMap = { c__: [ { string: 'E', fret: 6 }, + { string: 'E', fret: 18 }, { string: 'A', fret: 1 }, + { string: 'A', fret: 13 }, { string: 'D', fret: 8 }, + { string: 'D', fret: 20 }, { string: 'G', fret: 3 }, - { string: 'B', fret: 11 } + { string: 'G', fret: 15 }, + { string: 'B', fret: 11 }, + { string: 'B', fret: 23 } ], c_: [ { string: 'E', fret: 7 }, + { string: 'E', fret: 19 }, { string: 'A', fret: 2 }, + { string: 'A', fret: 14 }, { string: 'D', fret: 9 }, + { string: 'D', fret: 21 }, { string: 'G', fret: 4 }, + { string: 'G', fret: 16 }, { string: 'B', fret: 0 }, - { string: 'B', fret: 12 } + { string: 'B', fret: 12 }, + { string: 'B', fret: 24 } ], c: [ { string: 'E', fret: 8 }, + { string: 'E', fret: 20 }, { string: 'A', fret: 3 }, + { string: 'A', fret: 15 }, { string: 'D', fret: 10 }, + { string: 'D', fret: 22 }, { string: 'G', fret: 5 }, - { string: 'B', fret: 1 } + { string: 'G', fret: 17 }, + { string: 'B', fret: 1 }, + { string: 'B', fret: 13 } ], 'c#': [ { string: 'E', fret: 9 }, + { string: 'E', fret: 21 }, { string: 'A', fret: 4 }, + { string: 'A', fret: 16 }, { string: 'D', fret: 11 }, + { string: 'D', fret: 23 }, { string: 'G', fret: 6 }, - { string: 'B', fret: 2 } + { string: 'G', fret: 18 }, + { string: 'B', fret: 2 }, + { string: 'B', fret: 14 } ], 'c##': [ { string: 'E', fret: 10 }, + { string: 'E', fret: 22 }, { string: 'A', fret: 5 }, + { string: 'A', fret: 17 }, { string: 'D', fret: 0 }, { string: 'D', fret: 12 }, + { string: 'D', fret: 12 }, + { string: 'D', fret: 24 }, { string: 'G', fret: 7 }, - { string: 'B', fret: 3 } + { string: 'G', fret: 19 }, + { string: 'B', fret: 3 }, + { string: 'B', fret: 15 } ], d__: [ { string: 'E', fret: 8 }, + { string: 'E', fret: 20 }, { string: 'A', fret: 3 }, + { string: 'A', fret: 15 }, { string: 'D', fret: 10 }, + { string: 'D', fret: 22 }, { string: 'G', fret: 5 }, - { string: 'B', fret: 1 } + { string: 'G', fret: 17 }, + { string: 'B', fret: 1 }, + { string: 'B', fret: 13 } ], d_: [ { string: 'E', fret: 9 }, + { string: 'E', fret: 21 }, { string: 'A', fret: 4 }, + { string: 'A', fret: 16 }, { string: 'D', fret: 11 }, + { string: 'D', fret: 23 }, { string: 'G', fret: 6 }, - { string: 'B', fret: 2 } + { string: 'G', fret: 18 }, + { string: 'B', fret: 2 }, + { string: 'B', fret: 14 } ], d: [ { string: 'E', fret: 10 }, + { string: 'E', fret: 22 }, { string: 'A', fret: 5 }, + { string: 'A', fret: 17 }, { string: 'D', fret: 0 }, { string: 'D', fret: 12 }, + { string: 'D', fret: 24 }, { string: 'G', fret: 7 }, - { string: 'B', fret: 3 } + { string: 'G', fret: 19 }, + { string: 'B', fret: 3 }, + { string: 'B', fret: 15 }, ], 'd#': [ { string: 'E', fret: 11 }, + { string: 'E', fret: 23 }, { string: 'A', fret: 6 }, + { string: 'A', fret: 18 }, { string: 'D', fret: 1 }, + { string: 'D', fret: 13 }, { string: 'G', fret: 8 }, - { string: 'B', fret: 4 } + { string: 'G', fret: 20 }, + { string: 'B', fret: 4 }, + { string: 'B', fret: 16 } ], 'd##': [ { string: 'E', fret: 0 }, { string: 'E', fret: 12 }, + { string: 'E', fret: 24 }, { string: 'A', fret: 7 }, + { string: 'A', fret: 19 }, { string: 'D', fret: 2 }, + { string: 'D', fret: 14 }, { string: 'G', fret: 9 }, - { string: 'B', fret: 5 } + { string: 'G', fret: 21 }, + { string: 'B', fret: 5 }, + { string: 'B', fret: 17 } ], e__: [ { string: 'E', fret: 10 }, + { string: 'E', fret: 22 }, { string: 'A', fret: 5 }, + { string: 'A', fret: 17 }, { string: 'D', fret: 0 }, { string: 'D', fret: 12 }, + { string: 'D', fret: 24 }, { string: 'G', fret: 7 }, - { string: 'B', fret: 3 } + { string: 'G', fret: 19 }, + { string: 'B', fret: 3 }, + { string: 'B', fret: 15 }, ], e_: [ { string: 'E', fret: 11 }, + { string: 'E', fret: 23 }, { string: 'A', fret: 6 }, + { string: 'A', fret: 18 }, { string: 'D', fret: 1 }, + { string: 'D', fret: 13 }, { string: 'G', fret: 8 }, - { string: 'B', fret: 4 } + { string: 'G', fret: 20 }, + { string: 'B', fret: 4 }, + { string: 'B', fret: 16 }, ], e: [ { string: 'E', fret: 0 }, { string: 'E', fret: 12 }, + { string: 'E', fret: 24 }, { string: 'A', fret: 7 }, + { string: 'A', fret: 19 }, { string: 'D', fret: 2 }, + { string: 'D', fret: 14 }, { string: 'G', fret: 9 }, - { string: 'B', fret: 5 } + { string: 'G', fret: 21 }, + { string: 'B', fret: 5 }, + { string: 'B', fret: 17 } ], 'e#': [ { string: 'E', fret: 1 }, + { string: 'E', fret: 13 }, { string: 'A', fret: 8 }, + { string: 'A', fret: 20 }, { string: 'D', fret: 3 }, + { string: 'D', fret: 15 }, { string: 'G', fret: 10 }, - { string: 'B', fret: 6 } + { string: 'G', fret: 22 }, + { string: 'B', fret: 6 }, + { string: 'B', fret: 18 }, ], 'e##': [ { string: 'E', fret: 2 }, + { string: 'E', fret: 14 }, { string: 'A', fret: 9 }, + { string: 'A', fret: 21 }, { string: 'D', fret: 4 }, + { string: 'D', fret: 16 }, { string: 'G', fret: 11 }, - { string: 'B', fret: 7 } + { string: 'G', fret: 23 }, + { string: 'B', fret: 7 }, + { string: 'B', fret: 19 }, ], f__: [ { string: 'E', fret: 11 }, + { string: 'E', fret: 23 }, { string: 'A', fret: 6 }, + { string: 'A', fret: 18 }, { string: 'D', fret: 1 }, + { string: 'D', fret: 13 }, { string: 'G', fret: 8 }, - { string: 'B', fret: 4 } + { string: 'G', fret: 20 }, + { string: 'B', fret: 4 }, + { string: 'B', fret: 16 }, ], f_: [ { string: 'E', fret: 0 }, { string: 'E', fret: 12 }, + { string: 'E', fret: 24 }, { string: 'A', fret: 7 }, + { string: 'A', fret: 19 }, { string: 'D', fret: 2 }, + { string: 'D', fret: 14 }, { string: 'G', fret: 9 }, - { string: 'B', fret: 5 } + { string: 'G', fret: 21 }, + { string: 'B', fret: 5 }, + { string: 'B', fret: 17 } ], f: [ { string: 'E', fret: 1 }, + { string: 'E', fret: 13 }, { string: 'A', fret: 8 }, + { string: 'A', fret: 20 }, { string: 'D', fret: 3 }, + { string: 'D', fret: 15 }, { string: 'G', fret: 10 }, - { string: 'B', fret: 6 } + { string: 'G', fret: 22 }, + { string: 'B', fret: 6 }, + { string: 'B', fret: 18 } ], 'f#': [ { string: 'E', fret: 2 }, + { string: 'E', fret: 14 }, { string: 'A', fret: 9 }, + { string: 'A', fret: 21 }, { string: 'D', fret: 4 }, + { string: 'D', fret: 16 }, { string: 'G', fret: 11 }, - { string: 'B', fret: 7 } + { string: 'G', fret: 23 }, + { string: 'B', fret: 7 }, + { string: 'B', fret: 19 } ], 'f##': [ { string: 'E', fret: 3 }, + { string: 'E', fret: 15 }, { string: 'A', fret: 10 }, + { string: 'A', fret: 22 }, { string: 'D', fret: 5 }, + { string: 'D', fret: 17 }, { string: 'G', fret: 0 }, { string: 'G', fret: 12 }, - { string: 'B', fret: 8 } + { string: 'G', fret: 24 }, + { string: 'B', fret: 8 }, + { string: 'B', fret: 20 } ], g__: [ { string: 'E', fret: 1 }, + { string: 'E', fret: 13 }, { string: 'A', fret: 8 }, + { string: 'A', fret: 20 }, { string: 'D', fret: 3 }, + { string: 'D', fret: 15 }, { string: 'G', fret: 10 }, - { string: 'B', fret: 6 } + { string: 'G', fret: 22 }, + { string: 'B', fret: 6 }, + { string: 'B', fret: 18 } ], g_: [ { string: 'E', fret: 2 }, + { string: 'E', fret: 14 }, { string: 'A', fret: 9 }, + { string: 'A', fret: 21 }, { string: 'D', fret: 4 }, + { string: 'D', fret: 16 }, { string: 'G', fret: 11 }, - { string: 'B', fret: 7 } + { string: 'G', fret: 23 }, + { string: 'B', fret: 7 }, + { string: 'B', fret: 19 }, ], g: [ { string: 'E', fret: 3 }, + { string: 'E', fret: 15 }, { string: 'A', fret: 10 }, + { string: 'A', fret: 22 }, { string: 'D', fret: 5 }, + { string: 'D', fret: 17 }, { string: 'G', fret: 0 }, { string: 'G', fret: 12 }, - { string: 'B', fret: 8 } + { string: 'G', fret: 24 }, + { string: 'B', fret: 8 }, + { string: 'B', fret: 20 }, ], 'g#': [ { string: 'E', fret: 4 }, + { string: 'E', fret: 16 }, { string: 'A', fret: 11 }, + { string: 'A', fret: 23 }, { string: 'D', fret: 6 }, + { string: 'D', fret: 18 }, { string: 'G', fret: 1 }, - { string: 'B', fret: 9 } + { string: 'G', fret: 13 }, + { string: 'B', fret: 9 }, + { string: 'B', fret: 21 } ], 'g##': [ { string: 'E', fret: 4 }, + { string: 'E', fret: 16 }, { string: 'A', fret: 0 }, { string: 'A', fret: 12 }, + { string: 'A', fret: 24 }, { string: 'D', fret: 7 }, + { string: 'D', fret: 19 }, { string: 'G', fret: 2 }, - { string: 'B', fret: 10 } + { string: 'G', fret: 14 }, + { string: 'B', fret: 10 }, + { string: 'B', fret: 22 } ], a__: [ { string: 'E', fret: 3 }, + { string: 'E', fret: 15 }, { string: 'A', fret: 10 }, + { string: 'A', fret: 22 }, { string: 'D', fret: 5 }, + { string: 'D', fret: 17 }, { string: 'G', fret: 0 }, { string: 'G', fret: 12 }, - { string: 'B', fret: 8 } + { string: 'G', fret: 24 }, + { string: 'B', fret: 8 }, + { string: 'B', fret: 20 } ], a_: [ { string: 'E', fret: 4 }, + { string: 'E', fret: 16 }, { string: 'A', fret: 11 }, + { string: 'A', fret: 23 }, { string: 'D', fret: 6 }, + { string: 'D', fret: 18 }, { string: 'G', fret: 1 }, - { string: 'B', fret: 9 } + { string: 'G', fret: 13 }, + { string: 'B', fret: 9 }, + { string: 'B', fret: 21 } ], a: [ { string: 'E', fret: 5 }, + { string: 'E', fret: 17 }, { string: 'A', fret: 0 }, { string: 'A', fret: 12 }, + { string: 'A', fret: 24 }, { string: 'D', fret: 7 }, + { string: 'D', fret: 19 }, { string: 'G', fret: 2 }, - { string: 'B', fret: 10 } + { string: 'G', fret: 14 }, + { string: 'B', fret: 10 }, + { string: 'B', fret: 22 } ], 'a#': [ { string: 'E', fret: 6 }, + { string: 'E', fret: 18 }, { string: 'A', fret: 1 }, + { string: 'A', fret: 13 }, { string: 'D', fret: 8 }, + { string: 'D', fret: 20 }, { string: 'G', fret: 3 }, - { string: 'B', fret: 11 } + { string: 'G', fret: 15 }, + { string: 'B', fret: 11 }, + { string: 'B', fret: 23 } ], 'a##': [ { string: 'E', fret: 7 }, + { string: 'E', fret: 19 }, { string: 'A', fret: 2 }, + { string: 'A', fret: 14 }, { string: 'D', fret: 9 }, + { string: 'D', fret: 21 }, { string: 'G', fret: 4 }, + { string: 'G', fret: 16 }, { string: 'B', fret: 0 }, - { string: 'B', fret: 12 } + { string: 'B', fret: 12 }, + { string: 'B', fret: 24 } ], b__: [ { string: 'E', fret: 5 }, + { string: 'E', fret: 17 }, { string: 'A', fret: 0 }, + { string: 'A', fret: 12 }, + { string: 'A', fret: 24 }, { string: 'D', fret: 7 }, + { string: 'D', fret: 19 }, { string: 'G', fret: 2 }, - { string: 'B', fret: 10 } + { string: 'G', fret: 14 }, + { string: 'B', fret: 10 }, + { string: 'B', fret: 22 } ], b_: [ { string: 'E', fret: 6 }, + { string: 'E', fret: 18 }, { string: 'A', fret: 1 }, + { string: 'A', fret: 13 }, { string: 'D', fret: 8 }, + { string: 'D', fret: 20 }, { string: 'G', fret: 3 }, - { string: 'B', fret: 11 } + { string: 'G', fret: 15 }, + { string: 'B', fret: 11 }, + { string: 'B', fret: 23 } ], b: [ { string: 'E', fret: 7 }, + { string: 'E', fret: 19 }, { string: 'A', fret: 2 }, + { string: 'A', fret: 14 }, { string: 'D', fret: 9 }, + { string: 'D', fret: 21 }, { string: 'G', fret: 4 }, + { string: 'G', fret: 16 }, { string: 'B', fret: 0 }, - { string: 'B', fret: 12 } + { string: 'B', fret: 12 }, + { string: 'B', fret: 24 } ], 'b#': [ { string: 'E', fret: 8 }, + { string: 'E', fret: 20 }, { string: 'A', fret: 3 }, + { string: 'A', fret: 15 }, { string: 'D', fret: 10 }, + { string: 'D', fret: 22 }, { string: 'G', fret: 5 }, - { string: 'B', fret: 1 } + { string: 'G', fret: 17 }, + { string: 'B', fret: 1 }, + { string: 'B', fret: 13 } ], 'b##': [ { string: 'E', fret: 9 }, + { string: 'E', fret: 21 }, { string: 'A', fret: 4 }, + { string: 'A', fret: 16 }, { string: 'D', fret: 11 }, + { string: 'D', fret: 23 }, { string: 'G', fret: 6 }, - { string: 'B', fret: 2 } + { string: 'G', fret: 18 }, + { string: 'B', fret: 2 }, + { string: 'B', fret: 14 } ] }; diff --git a/apps/fretonator-web/src/styles/_vars.scss b/apps/fretonator-web/src/styles/_vars.scss index 5f4fca6..4e6380a 100644 --- a/apps/fretonator-web/src/styles/_vars.scss +++ b/apps/fretonator-web/src/styles/_vars.scss @@ -11,6 +11,7 @@ $focus_box_shadow_color: #fecdaa !default; //var(--peach) $focus_box_shadow_color_alt: #474350 !default; $fretonator_max_width: 980px !default; +$fretonator_max_width-wide: 1400px !default; $mode_selector_max_width: 800px !default; $infoContainer_info_row_height: pxToRem($grid-unit * 8); From 5aa16d55f9b76cf35193ca229286433a8b5e5342 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Tue, 16 Jun 2020 14:51:42 +0100 Subject: [PATCH 10/20] Proof of Concept for similar modes - not fully working yet --- .../common/fret-map/fret-map.service.spec.ts | 52 +++++++++++++++++++ .../app/common/fret-map/fret-map.service.ts | 39 ++++++++++++-- .../fretonator/fretonator.component.html | 5 ++ .../common/fretonator/fretonator.module.ts | 4 +- .../get-enharmonic-router-link.pipe.ts | 1 - .../similar-modes.component.html | 13 +++++ .../similar-modes.component.scss | 28 ++++++++++ .../similar-modes.component.spec.ts | 25 +++++++++ .../similar-modes/similar-modes.component.ts | 33 ++++++++++++ .../similar-modes/similar-modes.module.ts | 17 ++++++ .../src/app/common/svgs/play/play.module.ts | 1 - apps/fretonator-web/src/app/util/constants.ts | 17 ++++++ apps/fretonator-web/src/app/util/types.ts | 9 ++++ package.json | 2 +- 14 files changed, 239 insertions(+), 7 deletions(-) create mode 100644 apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.html create mode 100644 apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.scss create mode 100644 apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.spec.ts create mode 100644 apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.ts create mode 100644 apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.module.ts diff --git a/apps/fretonator-web/src/app/common/fret-map/fret-map.service.spec.ts b/apps/fretonator-web/src/app/common/fret-map/fret-map.service.spec.ts index eed6ab1..23561af 100644 --- a/apps/fretonator-web/src/app/common/fret-map/fret-map.service.spec.ts +++ b/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' + } + ]); + }); +}); 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 index ff755a5..43389a5 100644 --- 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 @@ -8,7 +8,9 @@ import { ModeMap, NoteExtenderString, NoteObject, - NoteSymbol + NoteSymbol, + SimilarMode, + SimilarModes } from '../../util/types'; import { ChordPatterns, @@ -16,7 +18,8 @@ import { 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; }; } diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html index 4463595..3ee091d 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html @@ -85,4 +85,9 @@

+ + +

diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.module.ts b/apps/fretonator-web/src/app/common/fretonator/fretonator.module.ts index 4517e7b..c7dc015 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretonator.module.ts +++ b/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 diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/get-enharmonic-router-link.pipe.ts b/apps/fretonator-web/src/app/common/fretonator/scale-map/get-enharmonic-router-link.pipe.ts index 2f7c1c9..bb3c49e 100644 --- a/apps/fretonator-web/src/app/common/fretonator/scale-map/get-enharmonic-router-link.pipe.ts +++ b/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]; } - } diff --git a/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.html b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.html new file mode 100644 index 0000000..233922e --- /dev/null +++ b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.html @@ -0,0 +1,13 @@ +
+

Did you know?

+

If you know the patterns of {{modeDisplayString}}, you'll know the modes below. Just shift your fingers along the + fret board.

+ + + {{mode.displayName}} {{mode.mode | titlecase}} + +
diff --git a/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.scss b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.scss new file mode 100644 index 0000000..455b782 --- /dev/null +++ b/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); +} diff --git a/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.spec.ts b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.spec.ts new file mode 100644 index 0000000..7386400 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SimilarModesComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SimilarModesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.ts b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.ts new file mode 100644 index 0000000..1dfc626 --- /dev/null +++ b/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); + } +} diff --git a/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.module.ts b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.module.ts new file mode 100644 index 0000000..e64be66 --- /dev/null +++ b/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 { } diff --git a/apps/fretonator-web/src/app/common/svgs/play/play.module.ts b/apps/fretonator-web/src/app/common/svgs/play/play.module.ts index b1ee204..1db451b 100644 --- a/apps/fretonator-web/src/app/common/svgs/play/play.module.ts +++ b/apps/fretonator-web/src/app/common/svgs/play/play.module.ts @@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common'; import { PlayComponent } from './play.component'; - @NgModule({ declarations: [PlayComponent], exports: [ diff --git a/apps/fretonator-web/src/app/util/constants.ts b/apps/fretonator-web/src/app/util/constants.ts index 77d330a..7e0b123 100644 --- a/apps/fretonator-web/src/app/util/constants.ts +++ b/apps/fretonator-web/src/app/util/constants.ts @@ -626,3 +626,20 @@ export const StringFrequencies = { 'A': 110.00, 'E': 82.41 } + +export const SimilarModePatterns = [ + Mode.ionian, + Mode.dorian, + Mode.phrygian, + Mode.lydian, + Mode.mixolydian, + Mode.aolian, + Mode.locrian, + Mode.ionian, + Mode.dorian, + Mode.phrygian, + Mode.lydian, + Mode.mixolydian, + Mode.aolian, + Mode.locrian +] diff --git a/apps/fretonator-web/src/app/util/types.ts b/apps/fretonator-web/src/app/util/types.ts index ca1b17b..15a67ab 100644 --- a/apps/fretonator-web/src/app/util/types.ts +++ b/apps/fretonator-web/src/app/util/types.ts @@ -92,3 +92,12 @@ export enum NoteExtenderSymbol { natural = '', flat = '_' } + +export interface SimilarMode { + noteDisplayName: string, + note: string, + noteExtender: NoteExtenderString; + mode: Mode, +} + +export type SimilarModes = SimilarMode[]; diff --git a/package.json b/package.json index 9245fdb..5707a1a 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "test": "ng test", "test:coverage": "npm run affected:test -- --all --code-coverage", "test:update": "nx test -- --updateSnapshot", - "test:watch": "npm run affected:test -- --watchAll", + "test:watch": "npm run affected:test -- --watch", "lint": "nx workspace-lint && ng lint", "e2e": "ng e2e", "affected:apps": "nx affected:apps", From 928a274a06343e04b8d4a14084ae8f7a4c8bea48 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Tue, 16 Jun 2020 19:55:39 +0100 Subject: [PATCH 11/20] Move similarModes functionality to a pipe to make the component rerender automatically with home-index --- .../common/fret-map/fret-map.service.spec.ts | 40 +-------- .../fret-map.service.testConstants.ts | 39 ++++++++ .../fretonator/fretonator.component.html | 5 +- .../common/fretonator/fretonator.module.ts | 2 + .../fretonator/get-similar-modes.pipe.spec.ts | 27 ++++++ .../fretonator/get-similar-modes.pipe.ts | 16 ++++ .../similar-modes.component.html | 2 +- .../similar-modes.component.spec.ts | 24 +++-- .../similar-modes/similar-modes.component.ts | 29 +----- .../home-index.component.spec.ts.snap | 89 +++++++++++++++++++ 10 files changed, 202 insertions(+), 71 deletions(-) create mode 100644 apps/fretonator-web/src/app/common/fretonator/get-similar-modes.pipe.spec.ts create mode 100644 apps/fretonator-web/src/app/common/fretonator/get-similar-modes.pipe.ts diff --git a/apps/fretonator-web/src/app/common/fret-map/fret-map.service.spec.ts b/apps/fretonator-web/src/app/common/fret-map/fret-map.service.spec.ts index 23561af..5949e4c 100644 --- a/apps/fretonator-web/src/app/common/fret-map/fret-map.service.spec.ts +++ b/apps/fretonator-web/src/app/common/fret-map/fret-map.service.spec.ts @@ -12,6 +12,7 @@ import { cIonianChordMap, cIonianFretMappings, cIonianMode, + cIonianSimilarModes, cMajorPentatonicChordMap, cMinorPentatonicChordMap, cPhrygianMode, @@ -1363,43 +1364,6 @@ describe('FretMapService:getSimilarModes', () => { 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' - } - ]); + expect(result).toEqual(cIonianSimilarModes); }); }); 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 index 4f33ed6..6b88a9e 100644 --- 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 @@ -1209,3 +1209,42 @@ 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' + } +] diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html index 3ee091d..0e755b4 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html @@ -87,7 +87,8 @@

+ [similarModes]="modeMap | getSimilarModes : mode"> + +

diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.module.ts b/apps/fretonator-web/src/app/common/fretonator/fretonator.module.ts index c7dc015..492a459 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretonator.module.ts +++ b/apps/fretonator-web/src/app/common/fretonator/fretonator.module.ts @@ -8,12 +8,14 @@ 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'; +import { GetSimilarModesPipe } from './get-similar-modes.pipe'; @NgModule({ declarations: [ FretonatorComponent, GetFretFromFretMapPipe, IsTheoreticalScalePipe, + GetSimilarModesPipe, ], imports: [ CommonModule, diff --git a/apps/fretonator-web/src/app/common/fretonator/get-similar-modes.pipe.spec.ts b/apps/fretonator-web/src/app/common/fretonator/get-similar-modes.pipe.spec.ts new file mode 100644 index 0000000..278f33f --- /dev/null +++ b/apps/fretonator-web/src/app/common/fretonator/get-similar-modes.pipe.spec.ts @@ -0,0 +1,27 @@ +import { GetSimilarModesPipe } from './get-similar-modes.pipe'; +import { TestBed } from '@angular/core/testing'; +import { FretMapService } from '../fret-map/fret-map.service'; +import { Mode } from '../../util/types'; +import { cIonianMode } from '../fret-map/fret-map.service.testConstants'; + +describe('GetSimilarModesPipe', () => { + + let pipe: GetSimilarModesPipe; + + beforeEach(() => { + const service = TestBed.inject(FretMapService); + pipe = new GetSimilarModesPipe(service); + }); + + it('create an instance', () => { + expect(pipe).toBeTruthy(); + }); + + + it('calls GenerateFretMapService.getSimilarModes', () => { + const spy = spyOn(pipe.generateFretMapService, 'getSimilarModes'); + + pipe.transform(cIonianMode, 'ionian' as Mode); + expect(spy).toHaveBeenCalledWith(cIonianMode, 'ionian'); + }); +}); diff --git a/apps/fretonator-web/src/app/common/fretonator/get-similar-modes.pipe.ts b/apps/fretonator-web/src/app/common/fretonator/get-similar-modes.pipe.ts new file mode 100644 index 0000000..7a0cdb3 --- /dev/null +++ b/apps/fretonator-web/src/app/common/fretonator/get-similar-modes.pipe.ts @@ -0,0 +1,16 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { FretMapService } from '../fret-map/fret-map.service'; +import { Mode, ModeMap, SimilarModes } from '../../util/types'; + +@Pipe({ + name: 'getSimilarModes' +}) +export class GetSimilarModesPipe implements PipeTransform { + + constructor(public generateFretMapService: FretMapService) {} + + transform(modeMap: ModeMap, mode: Mode): SimilarModes { + return this.generateFretMapService.getSimilarModes(modeMap, mode); + } + +} diff --git a/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.html b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.html index 233922e..6c1e903 100644 --- a/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.html @@ -8,6 +8,6 @@

Did you know?

[note]="mode.note" [noteExtender]="mode.noteExtender" [mode]="mode.mode" - selectedColor="default">{{mode.displayName}} {{mode.mode | titlecase}} + selectedColor="default">{{mode.noteDisplayName}} {{mode.mode | titlecase}}
diff --git a/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.spec.ts b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.spec.ts index 7386400..48be2e9 100644 --- a/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.spec.ts +++ b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.spec.ts @@ -1,20 +1,34 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { SimilarModesComponent } from './similar-modes.component'; +import { Component } from '@angular/core'; +import { SimilarModesModule } from './similar-modes.module'; describe('SimilarModesComponent', () => { - let component: SimilarModesComponent; - let fixture: ComponentFixture; + + @Component({ + selector: 'app-similar-modes-spec', + template: ` + + + ` + }) + class SimilarModesComponentSpec { + } + + let component: SimilarModesComponentSpec; + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ SimilarModesComponent ] + declarations: [SimilarModesComponentSpec], + imports: [ SimilarModesModule ] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(SimilarModesComponent); + fixture = TestBed.createComponent(SimilarModesComponentSpec); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.ts b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.ts index 1dfc626..1f6d8ab 100644 --- a/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.ts +++ b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.ts @@ -1,33 +1,12 @@ -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'; +import { Component, Input } from '@angular/core'; +import { SimilarModes } from '../../../util/types'; @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; +export class SimilarModesComponent { + @Input() similarModes: SimilarModes; @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); - } } 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 index aadcf68..f2b50e0 100644 --- 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 @@ -1394,6 +1394,95 @@ exports[`HomeIndexComponent should create 1`] = `
+ +
+

+ Did you know? +

+

+ If you know the patterns of C Ionian (Major), you'll know the modes below. Just shift your fingers along the fret board. +

+ +
+ + + + D Dorian + + + + + E Phrygian + + + + + F Lydian + + + + + G Mixolydian + + + + + A Aolian + + + + + B Locrian + + +
+ +
+ From 27e3e6eebc2968a23b94295f8d693f811c4d010b Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Tue, 16 Jun 2020 20:12:44 +0100 Subject: [PATCH 12/20] Don't show similar modes component if array is empty due to not being one of the seven standard modes --- .../common/fret-map/fret-map.service.spec.ts | 6 + .../app/common/fret-map/fret-map.service.ts | 12 +- .../similar-modes.component.html | 27 ++-- .../similar-modes.component.scss | 5 + .../similar-modes.component.spec.ts | 2 +- .../home-index.component.spec.ts.snap | 149 ++++++++++-------- apps/fretonator-web/src/app/util/constants.ts | 2 +- 7 files changed, 120 insertions(+), 83 deletions(-) diff --git a/apps/fretonator-web/src/app/common/fret-map/fret-map.service.spec.ts b/apps/fretonator-web/src/app/common/fret-map/fret-map.service.spec.ts index 5949e4c..82f2635 100644 --- a/apps/fretonator-web/src/app/common/fret-map/fret-map.service.spec.ts +++ b/apps/fretonator-web/src/app/common/fret-map/fret-map.service.spec.ts @@ -1366,4 +1366,10 @@ describe('FretMapService:getSimilarModes', () => { expect(result).toEqual(cIonianSimilarModes); }); + + it('returns an empty array for a mode not in the StandardModePatterns array', () => { + const result = service.getSimilarModes(fSharpHarmonicMinor, Mode.harmonicMinor); + + expect(result).toEqual([]); + }); }); 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 index 43389a5..1cea5a0 100644 --- 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 @@ -19,7 +19,7 @@ import { NoteToStringAndFretMap, Octave, ScaleDegrees, - SimilarModePatterns + StandardModePatterns } from '../../util/constants'; import { JamTracksData } from '../../data/jamTracks'; @@ -428,15 +428,19 @@ export class FretMapService { }; getSimilarModes = (modeMap: ModeMap, inputMode: Mode): SimilarModes => { - const firstModeInPattern = SimilarModePatterns.indexOf(inputMode); + const firstModeInPattern = StandardModePatterns.indexOf(inputMode); + + if (firstModeInPattern === -1) { + return []; + } const similarModes = modeMap .map((noteObject, index) => { return { noteDisplayName: noteObject.displayName, note: noteObject.name, - mode: SimilarModePatterns[firstModeInPattern + index], - noteExtender: this.getNoteExtenderStringFromNoteObject(noteObject), + mode: StandardModePatterns[firstModeInPattern + index], + noteExtender: this.getNoteExtenderStringFromNoteObject(noteObject) } as unknown as SimilarMode; }); diff --git a/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.html b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.html index 6c1e903..db4c10b 100644 --- a/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.html @@ -1,13 +1,20 @@ -
+

Did you know?

-

If you know the patterns of {{modeDisplayString}}, you'll know the modes below. Just shift your fingers along the - fret board.

+

If you know the patterns of {{modeDisplayString}} on the fretboard, + you can transfer those shapes to the modes below.

- - {{mode.noteDisplayName}} {{mode.mode | titlecase}} - +
+ + {{mode.noteDisplayName}} {{mode.mode | titlecase}} + +
+ +

There are only 7 patterns you need to learn. Once you've memorised those patterns, + you can play any of the 7 standard modes (Ionian, Dorian, Phrygian, Lydian, Mixolydian, Aolian, Locrian) from + any starting note, anywhere on the fretboard.

+

These patterns always appear in the same order, one after the other.

diff --git a/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.scss b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.scss index 455b782..0a68065 100644 --- a/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.scss +++ b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.scss @@ -3,6 +3,11 @@ @import "../../../../styles/mixins"; @import "../../../../styles/typography"; +.chipsContainer { + margin-top: pxToRem($grid-unit * 2); + margin-bottom: pxToRem($grid-unit * 4); +} + .similarModes { background-color: var(--peach); padding: pxToRem($grid-unit * 4); diff --git a/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.spec.ts b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.spec.ts index 48be2e9..8bd95f7 100644 --- a/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.spec.ts +++ b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.spec.ts @@ -9,7 +9,7 @@ describe('SimilarModesComponent', () => { @Component({ selector: 'app-similar-modes-spec', template: ` - + ` }) 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 index f2b50e0..5772412 100644 --- 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 @@ -1395,6 +1395,7 @@ exports[`HomeIndexComponent should create 1`] = `
+
@@ -1406,81 +1407,95 @@ exports[`HomeIndexComponent should create 1`] = `

- If you know the patterns of C Ionian (Major), you'll know the modes below. Just shift your fingers along the fret board. + If you know the patterns of C Ionian (Major) on the fretboard, you can transfer those shapes to the modes below.

- -
- - + +
- - D Dorian - - - - + D Dorian + + + - E Phrygian - - - - + E Phrygian + + + - F Lydian - - - - + F Lydian + + + - G Mixolydian - - - - + G Mixolydian + + + - A Aolian - - - - + A Aolian + + + - B Locrian - - -
- + + B Locrian + + +
+ +
+

+ There are only 7 patterns you need to learn. Once you've memorised those patterns, you can play any of the 7 standard modes (Ionian, Dorian, Phrygian, Lydian, Mixolydian, Aolian, Locrian) from any starting note, anywhere on the fretboard. +

+

+ These patterns always appear in the same order, one after the other. +

diff --git a/apps/fretonator-web/src/app/util/constants.ts b/apps/fretonator-web/src/app/util/constants.ts index 7e0b123..acbb382 100644 --- a/apps/fretonator-web/src/app/util/constants.ts +++ b/apps/fretonator-web/src/app/util/constants.ts @@ -627,7 +627,7 @@ export const StringFrequencies = { 'E': 82.41 } -export const SimilarModePatterns = [ +export const StandardModePatterns = [ Mode.ionian, Mode.dorian, Mode.phrygian, From ddf25f05f42f9389a0d1f39f39de9dd8141ca334 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Tue, 16 Jun 2020 20:20:37 +0100 Subject: [PATCH 13/20] Styling changes --- .../fretonator/similar-modes/similar-modes.component.html | 2 +- .../fretonator/similar-modes/similar-modes.component.scss | 7 +++++++ .../app/pages/home/home-index/home-index.component.scss | 1 + 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.html b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.html index db4c10b..10b75df 100644 --- a/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.html @@ -14,7 +14,7 @@

Did you know?

There are only 7 patterns you need to learn. Once you've memorised those patterns, - you can play any of the 7 standard modes (Ionian, Dorian, Phrygian, Lydian, Mixolydian, Aolian, Locrian) from + you can play any of the 7 standard modes (Ionian, Dorian, Phrygian, Lydian, Mixolydian, Aolian, Locrian) from any starting note, anywhere on the fretboard.

These patterns always appear in the same order, one after the other.

diff --git a/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.scss b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.scss index 0a68065..cb938fe 100644 --- a/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.scss +++ b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.scss @@ -6,6 +6,9 @@ .chipsContainer { margin-top: pxToRem($grid-unit * 2); margin-bottom: pxToRem($grid-unit * 4); + display: flex; + justify-content: center; + width: 100%; } .similarModes { @@ -30,4 +33,8 @@ .similarModes__copy { @include font_bodyCopy(); margin-bottom: pxToRem($grid-unit * 2); + + &:last-of-type { + margin-bottom: 0; + } } diff --git a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss index ae021f2..1f9d7bc 100644 --- a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss +++ b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss @@ -149,6 +149,7 @@ .modeSelector__label { @include font_medium(); + font-size: pxToRem(16); font-weight: var(--font-weight-bold); margin-top: pxToRem($grid-unit * 1); margin-bottom: pxToRem($grid-unit * 1); From 88736c74191f6f9efad3f28a741b61c075746b14 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Tue, 16 Jun 2020 20:21:50 +0100 Subject: [PATCH 14/20] Update snapshot --- .../__snapshots__/home-index.component.spec.ts.snap | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) 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 index 5772412..965036b 100644 --- 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 @@ -1489,7 +1489,11 @@ exports[`HomeIndexComponent should create 1`] = `

- There are only 7 patterns you need to learn. Once you've memorised those patterns, you can play any of the 7 standard modes (Ionian, Dorian, Phrygian, Lydian, Mixolydian, Aolian, Locrian) from any starting note, anywhere on the fretboard. + There are only 7 patterns you need to learn. Once you've memorised those patterns, you can play any of the 7 standard modes + + (Ionian, Dorian, Phrygian, Lydian, Mixolydian, Aolian, Locrian + + ) from any starting note, anywhere on the fretboard.

Date: Tue, 16 Jun 2020 21:21:05 +0100 Subject: [PATCH 15/20] Update test coverage --- .../common/fret-map/fret-map.service.spec.ts | 43 +++++++++++++++++++ .../fretonator/fretonator.component.html | 4 +- .../fretonator/fretonator.component.scss | 4 +- .../fretonator/fretonator.component.spec.ts | 35 ++++++++++++++- ...rt-interval-integer-to-string.pipe.spec.ts | 12 ++++++ .../scale-map/scale-map.component.html | 8 ++-- .../scale-map/scale-map.component.spec.ts | 35 ++++++++++++--- .../common/header/header.component.spec.ts | 5 ++- .../home-index.component.spec.ts.snap | 6 +-- 9 files changed, 133 insertions(+), 19 deletions(-) diff --git a/apps/fretonator-web/src/app/common/fret-map/fret-map.service.spec.ts b/apps/fretonator-web/src/app/common/fret-map/fret-map.service.spec.ts index 82f2635..b7be049 100644 --- a/apps/fretonator-web/src/app/common/fret-map/fret-map.service.spec.ts +++ b/apps/fretonator-web/src/app/common/fret-map/fret-map.service.spec.ts @@ -1353,6 +1353,49 @@ describe('FretMapService:convertFretMapConfigurationToDisplayString', () => { }); }); +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; diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html index 0e755b4..f61ad13 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html @@ -16,11 +16,11 @@

- - diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss index 0ef3f21..e129b68 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss +++ b/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); diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.spec.ts b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.spec.ts index e9e7e69..6741646 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.spec.ts +++ b/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(); + }); + }); }); diff --git a/apps/fretonator-web/src/app/common/fretonator/interval-map/convert-interval-integer-to-string.pipe.spec.ts b/apps/fretonator-web/src/app/common/fretonator/interval-map/convert-interval-integer-to-string.pipe.spec.ts index 1e71ea3..ff9083f 100644 --- a/apps/fretonator-web/src/app/common/fretonator/interval-map/convert-interval-integer-to-string.pipe.spec.ts +++ b/apps/fretonator-web/src/app/common/fretonator/interval-map/convert-interval-integer-to-string.pipe.spec.ts @@ -23,4 +23,16 @@ describe('ConvertIntervalIntegerToStringPipe', () => { const result = pipe.transform(3); expect(result).toBe('aug 2nd'); }); + + it('returns "min 3rd" for 4', () => { + const pipe = new ConvertIntervalIntegerToStringPipe(); + const result = pipe.transform(4); + expect(result).toBe('min 3rd'); + }); + + it('returns "" for something else', () => { + const pipe = new ConvertIntervalIntegerToStringPipe(); + const result = pipe.transform(5); + expect(result).toBe(''); + }); }); 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 index 535dbb6..7d3b606 100644 --- 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 @@ -20,7 +20,7 @@
Play scale
- @@ -1180,7 +1180,7 @@ exports[`HomeIndexComponent should create 1`] = `