From 3b9e8ec2bbfd3ec5fecf0e41a88bb53cac709346 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Tue, 7 Jul 2020 20:44:50 +0100 Subject: [PATCH 01/12] WIP trying to make tunings work --- .../fretboard/fretboard.component.html | 18 ++++-- .../fretboard/fretboard.component.ts | 60 ++++++++++++++++++- 2 files changed, 69 insertions(+), 9 deletions(-) diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html index cc71fc6..adb6b91 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html @@ -38,32 +38,32 @@ @@ -111,4 +111,10 @@ (setOrientation)="setOrientation($event)" > + +
+ + +
+ diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts index 9a479e7..37ee749 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts @@ -1,4 +1,14 @@ -import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild } from '@angular/core'; +import { + ChangeDetectorRef, + Component, + ElementRef, + EventEmitter, + Input, + OnChanges, + OnInit, + Output, + ViewChild +} from '@angular/core'; import { FretMap, Mode } from '../../../util/types'; import { NotePlaybackService } from '../../playback/note-playback.service'; import { AbstractDataService } from '../../abstract-data/abstract-data.service'; @@ -19,6 +29,30 @@ export enum NoteDisplays { noteNames = 'noteNames' } +enum Tunings { + standard = 'standard', + dropD = 'dropD' +} + +const TuningReturner = { + 'standard': [ + { stringName: 'E', string: 'E' }, + { stringName: 'A', string: 'A' }, + { stringName: 'D', string: 'D' }, + { stringName: 'G', string: 'G' }, + { stringName: 'B', string: 'B' }, + { stringName: 'e', string: 'E' } + ], + 'dropD': [ + { stringName: 'D', string: 'D' }, + { stringName: 'A', string: 'A' }, + { stringName: 'D', string: 'D' }, + { stringName: 'G', string: 'G' }, + { stringName: 'B', string: 'B' }, + { stringName: 'e', string: 'E' } + ] +}; + const FretReturner = { 'twelve': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], 'twentyFour': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24] @@ -27,7 +61,8 @@ const FretReturner = { const StorageKeys = { fretMode: 'fretonator_fretMode', orientation: 'fretonator_orientation', - noteNameDisplay: 'fretonator_noteNameDisplay' + noteNameDisplay: 'fretonator_noteNameDisplay', + tuning: 'fretonator_tuning' }; @Component({ @@ -46,19 +81,24 @@ export class FretboardComponent implements OnChanges, OnInit { orientation; fretMode; frets; + strings; + tuning; highlightedDegrees = new Set(); noteNameDisplay = NoteDisplays.noteNames; constructor(public playbackService: NotePlaybackService, - private localStorage: AbstractDataService) { + private localStorage: AbstractDataService, + private cd: ChangeDetectorRef) { } ngOnInit() { this.loadPropFromStorage(StorageKeys.fretMode, 'fretMode', FretModes.twelve); this.loadPropFromStorage(StorageKeys.orientation, 'orientation', Orientations.right); this.loadPropFromStorage(StorageKeys.noteNameDisplay, 'noteNameDisplay', NoteDisplays.noteNames); + this.loadPropFromStorage(StorageKeys.tuning, 'tuning', Tunings.standard); this.toggleHighlight(ScaleDegrees.tonic); + this.configureStrings(); this.configureFretboard(); } @@ -84,6 +124,14 @@ export class FretboardComponent implements OnChanges, OnInit { return NoteDisplays; } + get Tunings() { + return Tunings; + } + + configureStrings() { + this.strings = TuningReturner[this.tuning]; + } + configureFretboard() { this.frets = FretReturner[this.fretMode]; this.loadExpandedChange.emit(this.fretMode === FretModes.twentyFour); @@ -101,6 +149,12 @@ export class FretboardComponent implements OnChanges, OnInit { this.configureFretboard(); } + setTuning(tuning: Tunings) { + this.tuning = tuning; + this.localStorage.setItem(StorageKeys.tuning, this.tuning); + this.configureStrings(); + } + toggleHighlight(degree: ScaleDegrees) { this.highlightedDegrees.has(degree) ? this.highlightedDegrees.delete(degree) : this.highlightedDegrees.add(degree); } From 8fa27b2a8145f8ce3f0d6e0ff87037f2ad6444a8 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Tue, 7 Jul 2020 22:15:54 +0100 Subject: [PATCH 02/12] Tunings work and are stored in local storage! --- .../fretboard/fretboard.component.html | 57 +++++++------------ .../fretboard/fretboard.component.scss | 19 +++++++ .../fretboard/fretboard.component.ts | 51 ++++++++++------- 3 files changed, 72 insertions(+), 55 deletions(-) diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html index adb6b91..18d28b6 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html @@ -1,4 +1,4 @@ - +
- - - - - - - - - - - + + +
+
+
Configure scale degrees Highlight scale degrees @@ -111,10 +90,16 @@ (setOrientation)="setOrientation($event)" >
+
-
- - -
- +
+ + +
diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss index 6fd2932..54a576b 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss @@ -547,6 +547,25 @@ $note-height: 36; } } +.fretboard__tuningGroup { + margin-left: auto; + margin-right: auto; + max-width: $screen-med; + text-align: center; +} + +.fretboard__changeTuning { + @include chip_button_base; + margin-left: pxToRem($grid-unit / 2); + margin-right: pxToRem($grid-unit / 2); +} + +.tuning--active { + background-color: var(--chip-background-color-active); + color: var(--chip-foreground-color-active); + border-color: var(--chip-border-color-active); +} + .fretboard__toggleButton { @include chip_button_base(); padding: pxToRem($grid-unit * 1.5); diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts index 37ee749..3f2a825 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts @@ -13,6 +13,8 @@ import { FretMap, Mode } from '../../../util/types'; import { NotePlaybackService } from '../../playback/note-playback.service'; import { AbstractDataService } from '../../abstract-data/abstract-data.service'; import { ScaleDegrees } from '../../../util/constants'; +import { BehaviorSubject, Subject } from 'rxjs'; +import { map } from 'rxjs/operators'; export enum FretModes { twelve = 'twelve', @@ -31,25 +33,34 @@ export enum NoteDisplays { enum Tunings { standard = 'standard', - dropD = 'dropD' + dropd = 'dropd', + dadgad = 'dadgad' } const TuningReturner = { 'standard': [ - { stringName: 'E', string: 'E' }, - { stringName: 'A', string: 'A' }, - { stringName: 'D', string: 'D' }, - { stringName: 'G', string: 'G' }, - { stringName: 'B', string: 'B' }, - { stringName: 'e', string: 'E' } + { stringName: 'E', stringNote: 'E' }, + { stringName: 'A', stringNote: 'A' }, + { stringName: 'D', stringNote: 'D' }, + { stringName: 'G', stringNote: 'G' }, + { stringName: 'B', stringNote: 'B' }, + { stringName: 'e', stringNote: 'E' } ], - 'dropD': [ - { stringName: 'D', string: 'D' }, - { stringName: 'A', string: 'A' }, - { stringName: 'D', string: 'D' }, - { stringName: 'G', string: 'G' }, - { stringName: 'B', string: 'B' }, - { stringName: 'e', string: 'E' } + 'dropd': [ + { stringName: 'D', stringNote: 'D' }, + { stringName: 'A', stringNote: 'A' }, + { stringName: 'D', stringNote: 'D' }, + { stringName: 'G', stringNote: 'G' }, + { stringName: 'B', stringNote: 'B' }, + { stringName: 'e', stringNote: 'E' } + ], + 'dadgad': [ + { stringName: 'D', stringNote: 'D' }, + { stringName: 'A', stringNote: 'A' }, + { stringName: 'D', stringNote: 'D' }, + { stringName: 'G', stringNote: 'G' }, + { stringName: 'A', stringNote: 'A' }, + { stringName: 'd', stringNote: 'D' } ] }; @@ -81,14 +92,16 @@ export class FretboardComponent implements OnChanges, OnInit { orientation; fretMode; frets; - strings; - tuning; + tuning = Tunings.standard; highlightedDegrees = new Set(); noteNameDisplay = NoteDisplays.noteNames; + strings$ = new BehaviorSubject(TuningReturner[Tunings.standard]); + reverseStrings$ = this.strings$.pipe( + map(str => str.reverse()) + ) constructor(public playbackService: NotePlaybackService, - private localStorage: AbstractDataService, - private cd: ChangeDetectorRef) { + private localStorage: AbstractDataService) { } ngOnInit() { @@ -129,7 +142,7 @@ export class FretboardComponent implements OnChanges, OnInit { } configureStrings() { - this.strings = TuningReturner[this.tuning]; + this.strings$.next(TuningReturner[this.tuning]); } configureFretboard() { From a214cf5ea9ed541fca0086a40f79770340fc42a5 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Thu, 9 Jul 2020 08:26:36 +0100 Subject: [PATCH 03/12] ngTemplateOutlet BE GONE --- .../fretboard/fretboard.component.html | 63 ++++++++----------- .../fretboard/fretboard.component.ts | 44 +++++++------ 2 files changed, 48 insertions(+), 59 deletions(-) diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html index 18d28b6..7e4e30b 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html @@ -1,28 +1,3 @@ - - -
- - - - - - - - -
@@ -36,20 +11,33 @@ [class.fretboard__leftHanded]="orientation === Orientations.left" [class.fretboard__24]="fretMode === FretModes.twentyFour"> - - + + +
+
- + + +
@@ -95,11 +83,14 @@
+ (click)="setTuning(Tunings.standard)">Standard + + (click)="setTuning(Tunings.dropd)">Drop D + + (click)="setTuning(Tunings.dadgad)">DADGAD +
diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts index 3f2a825..00d8d75 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts @@ -37,30 +37,31 @@ enum Tunings { dadgad = 'dadgad' } +//string are in reverse order const TuningReturner = { 'standard': [ - { stringName: 'E', stringNote: 'E' }, - { stringName: 'A', stringNote: 'A' }, - { stringName: 'D', stringNote: 'D' }, - { stringName: 'G', stringNote: 'G' }, - { stringName: 'B', stringNote: 'B' }, - { stringName: 'e', stringNote: 'E' } + { name: 'e', note: 'E' }, + { name: 'B', note: 'B' }, + { name: 'G', note: 'G' }, + { name: 'D', note: 'D' }, + { name: 'A', note: 'A' }, + { name: 'E', note: 'E' }, ], 'dropd': [ - { stringName: 'D', stringNote: 'D' }, - { stringName: 'A', stringNote: 'A' }, - { stringName: 'D', stringNote: 'D' }, - { stringName: 'G', stringNote: 'G' }, - { stringName: 'B', stringNote: 'B' }, - { stringName: 'e', stringNote: 'E' } + { name: 'e', note: 'E' }, + { name: 'B', note: 'B' }, + { name: 'G', note: 'G' }, + { name: 'D', note: 'D' }, + { name: 'A', note: 'A' }, + { name: 'D', note: 'D' }, ], 'dadgad': [ - { stringName: 'D', stringNote: 'D' }, - { stringName: 'A', stringNote: 'A' }, - { stringName: 'D', stringNote: 'D' }, - { stringName: 'G', stringNote: 'G' }, - { stringName: 'A', stringNote: 'A' }, - { stringName: 'd', stringNote: 'D' } + { name: 'd', note: 'D' }, + { name: 'A', note: 'A' }, + { name: 'G', note: 'G' }, + { name: 'D', note: 'D' }, + { name: 'A', note: 'A' }, + { name: 'D', note: 'D' }, ] }; @@ -95,10 +96,7 @@ export class FretboardComponent implements OnChanges, OnInit { tuning = Tunings.standard; highlightedDegrees = new Set(); noteNameDisplay = NoteDisplays.noteNames; - strings$ = new BehaviorSubject(TuningReturner[Tunings.standard]); - reverseStrings$ = this.strings$.pipe( - map(str => str.reverse()) - ) + strings = TuningReturner[Tunings.standard]; constructor(public playbackService: NotePlaybackService, private localStorage: AbstractDataService) { @@ -142,7 +140,7 @@ export class FretboardComponent implements OnChanges, OnInit { } configureStrings() { - this.strings$.next(TuningReturner[this.tuning]); + this.strings = TuningReturner[this.tuning]; } configureFretboard() { From 9376abba5f204cbe0a26a347fb7a02a7c198fc00 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Thu, 9 Jul 2020 08:56:39 +0100 Subject: [PATCH 04/12] Refactored fret markers based on string number --- .../fretboard/fretboard.component.scss | 40 +++++++++---------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss index 54a576b..a3686a8 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss @@ -215,32 +215,32 @@ $note-height: 36; } } - &[data-string="G"][data-fret="3"], - &[data-string="G"][data-fret="5"], - &[data-string="G"][data-fret="7"], - &[data-string="G"][data-fret="9"], - &[data-string="G"][data-fret="15"], - &[data-string="G"][data-fret="17"], - &[data-string="G"][data-fret="19"], - &[data-string="G"][data-fret="21"], - &[data-string="B"][data-fret="12"], - &[data-string="D"][data-fret="12"] { + &[data-string-number="3"][data-fret="3"], + &[data-string-number="3"][data-fret="5"], + &[data-string-number="3"][data-fret="7"], + &[data-string-number="3"][data-fret="9"], + &[data-string-number="3"][data-fret="15"], + &[data-string-number="3"][data-fret="17"], + &[data-string-number="3"][data-fret="19"], + &[data-string-number="3"][data-fret="21"], + &[data-string-number="2"][data-fret="12"], + &[data-string-number="4"][data-fret="12"] { background-image: var(--fret-marker-url); background-repeat: no-repeat; background-position: center calc(var(--string-height-base) - 15px); background-size: 30px 30px; } - &[data-string="D"][data-fret="3"], - &[data-string="D"][data-fret="5"], - &[data-string="D"][data-fret="7"], - &[data-string="D"][data-fret="9"], - &[data-string="D"][data-fret="15"], - &[data-string="D"][data-fret="17"], - &[data-string="D"][data-fret="19"], - &[data-string="D"][data-fret="21"], - &[data-string="G"][data-fret="12"], - &[data-string="A"][data-fret="12"] { + &[data-string-number="4"][data-fret="3"], + &[data-string-number="4"][data-fret="5"], + &[data-string-number="4"][data-fret="7"], + &[data-string-number="4"][data-fret="9"], + &[data-string-number="4"][data-fret="15"], + &[data-string-number="4"][data-fret="17"], + &[data-string-number="4"][data-fret="19"], + &[data-string-number="4"][data-fret="21"], + &[data-string-number="3"][data-fret="12"], + &[data-string-number="5"][data-fret="12"] { background-image: var(--fret-marker-url); background-repeat: no-repeat; background-position: center -15px; From f9f0faa049ed13b580793249b15fdcaf4c9071d2 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Thu, 9 Jul 2020 09:23:06 +0100 Subject: [PATCH 05/12] Styles for control panel --- .../fretboard-config.component.html | 2 - .../fretboard-config.component.scss | 15 ++- .../fretboard/fretboard.component.html | 92 ++++++++++--------- .../fretboard/fretboard.component.scss | 40 ++++---- 4 files changed, 77 insertions(+), 72 deletions(-) diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.html b/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.html index 67e6db1..100e1cb 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.html @@ -8,8 +8,6 @@ [class.fretboard__toggleButton--active]="fretMode === FretModes.twentyFour" (click)="setFretModeClick(FretModes.twentyFour)">24 frets - -
-
+
+
+

Highlight scale degrees

+ +
+
+

Scale degrees display

+
+ + +
-
- Configure scale degrees - Highlight scale degrees - - -
- -
- -
- Configure fretboard +
+

Fretboard

-
-
- - - +
+

Guitar tuning

+
+ + + +
+
+ + diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss index a3686a8..3e69458 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss @@ -484,45 +484,41 @@ $note-height: 36; .controlPanel { @include content_wrapper(); - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: flex-start; max-width: $screen-med; margin-top: pxToRem($grid-unit * 2); - margin-bottom: pxToRem($grid-unit * 2); + margin-bottom: pxToRem($grid-unit * 8); 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); +} + +.controlPanel__row { + display: flex; + flex-direction: column; + margin-bottom: pxToRem($grid-unit * 4); + justify-content: center; @media screen and (min-width: $screen-med) { + justify-content: space-between; flex-direction: row; } } -.controlPanel__section { +.controlPanel__column { display: flex; flex-direction: column; - width: 100%; - margin-bottom: pxToRem($grid-unit * 4); + margin-bottom: pxToRem($grid-unit * 8); + justify-content: center; &:last-of-type { margin-bottom: 0; } - - @media screen and (min-width: $screen-med) { - margin-bottom: 0; - } } .controlPanel__title { @include info_container_title; text-align: center; - - @media screen and (min-width: $screen-med) { - text-align: left; - } } .controlPanel__title--right { @@ -547,6 +543,12 @@ $note-height: 36; } } +.button__group--right { + @media screen and (min-width: $screen-med) { + justify-content: flex-end; + } +} + .fretboard__tuningGroup { margin-left: auto; margin-right: auto; @@ -556,8 +558,10 @@ $note-height: 36; .fretboard__changeTuning { @include chip_button_base; - margin-left: pxToRem($grid-unit / 2); - margin-right: pxToRem($grid-unit / 2); + margin-left: pxToRem($grid-unit); + margin-right: pxToRem($grid-unit); + margin-bottom: pxToRem($grid-unit); + border-color: var(--fretboard-toggle-button-border-color); } .tuning--active { From d3fa419c6ab30c68b48dad3fc38f072b5ad09fa9 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Thu, 9 Jul 2020 09:24:29 +0100 Subject: [PATCH 06/12] Update snapshot --- .../home-index.component.spec.ts.snap | 209 ++++++++++++++---- 1 file changed, 160 insertions(+), 49 deletions(-) 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 e4fda79..109bd99 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 @@ -291,8 +291,6 @@ exports[`HomeIndexComponent should create 1`] = ` Check out the fretboard - -
@@ -309,6 +307,7 @@ exports[`HomeIndexComponent should create 1`] = ` +
@@ -442,6 +454,7 @@ exports[`HomeIndexComponent should create 1`] = ` data-mode="ionian" data-string="B" data-string-name="B" + data-string-number="2" />
@@ -566,6 +591,7 @@ exports[`HomeIndexComponent should create 1`] = ` data-mode="ionian" data-string="G" data-string-name="G" + data-string-number="3" />
@@ -690,6 +728,7 @@ exports[`HomeIndexComponent should create 1`] = ` data-mode="ionian" data-string="D" data-string-name="D" + data-string-number="4" />
@@ -814,6 +865,7 @@ exports[`HomeIndexComponent should create 1`] = ` data-mode="ionian" data-string="A" data-string-name="A" + data-string-number="5" />
@@ -938,6 +1002,7 @@ exports[`HomeIndexComponent should create 1`] = ` data-mode="ionian" data-string="E" data-string-name="E" + data-string-number="6" />
@@ -1056,7 +1133,6 @@ exports[`HomeIndexComponent should create 1`] = ` > - -
- - - - Highlight scale degrees - - - -
- + + + +
+ +
+
+

+ Scale degrees display +

+
- -
- -
- - Configure fretboard - + Fretboard +
24 frets -
-
+
+

+ Guitar tuning +

+
+ + + +
+
From 45089d8eb97e8fcfb709637c208928ec8c5631ed Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Thu, 9 Jul 2020 19:45:51 +0100 Subject: [PATCH 07/12] Make strings play correct notes in new tunings --- .../fretboard/fretboard.component.html | 2 +- .../fretboard/fretboard.component.ts | 38 +++++++++---------- .../common/playback/note-playback.service.ts | 16 +++----- apps/fretonator-web/src/app/util/constants.ts | 4 +- 4 files changed, 28 insertions(+), 32 deletions(-) diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html index 2cd87ec..8fe7214 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html @@ -26,7 +26,7 @@ [attr.data-display-note]="noteNameDisplay === NoteDisplays.noteNames ? ((fretMap | getFretFromFretMap: string.name:fret:stringNamesAreCaseSensitive)?.displayName) : ((fretMap | getFretFromFretMap: string.name:fret:stringNamesAreCaseSensitive)?.degreeNumber)" [attr.data-mode]="mode" [attr.data-highlight]="highlightedDegrees.has((fretMap | getFretFromFretMap: string.name:fret:stringNamesAreCaseSensitive)?.degree)" - (click)="playbackService.playNote(string.name, fret)" + (click)="playbackService.playNote(string.frequencyMarker, fret)" >
diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts index 00d8d75..c829fb7 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts @@ -37,31 +37,31 @@ enum Tunings { dadgad = 'dadgad' } -//string are in reverse order +//strings are in reverse order const TuningReturner = { 'standard': [ - { name: 'e', note: 'E' }, - { name: 'B', note: 'B' }, - { name: 'G', note: 'G' }, - { name: 'D', note: 'D' }, - { name: 'A', note: 'A' }, - { name: 'E', note: 'E' }, + { name: 'e', note: 'E', frequencyMarker: 'e' }, + { name: 'B', note: 'B', frequencyMarker: 'B' }, + { name: 'G', note: 'G', frequencyMarker: 'G' }, + { name: 'D', note: 'D', frequencyMarker: 'D' }, + { name: 'A', note: 'A', frequencyMarker: 'A' }, + { name: 'E', note: 'E', frequencyMarker: 'E' }, ], 'dropd': [ - { name: 'e', note: 'E' }, - { name: 'B', note: 'B' }, - { name: 'G', note: 'G' }, - { name: 'D', note: 'D' }, - { name: 'A', note: 'A' }, - { name: 'D', note: 'D' }, + { name: 'e', note: 'E', frequencyMarker: 'e' }, + { name: 'B', note: 'B', frequencyMarker: 'B' }, + { name: 'G', note: 'G', frequencyMarker: 'G' }, + { name: 'D', note: 'D', frequencyMarker: 'D' }, + { name: 'A', note: 'A', frequencyMarker: 'A' }, + { name: 'D', note: 'D', frequencyMarker: 'D_' }, ], 'dadgad': [ - { name: 'd', note: 'D' }, - { name: 'A', note: 'A' }, - { name: 'G', note: 'G' }, - { name: 'D', note: 'D' }, - { name: 'A', note: 'A' }, - { name: 'D', note: 'D' }, + { name: 'd', note: 'D', frequencyMarker: 'd' }, + { name: 'A', note: 'A', frequencyMarker: 'A' }, + { name: 'G', note: 'G', frequencyMarker: 'G' }, + { name: 'D', note: 'D', frequencyMarker: 'D' }, + { name: 'A', note: 'A', frequencyMarker: 'A' }, + { name: 'D', note: 'D', frequencyMarker: 'D_' }, ] }; diff --git a/apps/fretonator-web/src/app/common/playback/note-playback.service.ts b/apps/fretonator-web/src/app/common/playback/note-playback.service.ts index 5058d9f..3f7921b 100644 --- a/apps/fretonator-web/src/app/common/playback/note-playback.service.ts +++ b/apps/fretonator-web/src/app/common/playback/note-playback.service.ts @@ -1,6 +1,5 @@ import { Injectable } from '@angular/core'; import { StringFrequencies } from '../../util/constants'; -import { ModeMap } from '../../util/types'; const SYNTH_BUFFER_SIZE = 4096; const SYNTH_PLAY_DURATION = 2000; @@ -14,7 +13,7 @@ export class NotePlaybackService { constructor() { } - playNote(stringName, fret) { + playNote(stringFrequencyMarker, fret) { if (!this.context) { try { // Feature sniff for web audio API @@ -24,19 +23,14 @@ export class NotePlaybackService { } } if (this.context) { - const noteFrequency = this.getFrequency(stringName, fret); + const noteFrequency = this.getFrequency(stringFrequencyMarker, fret); this.pluckString(noteFrequency); } } - playMode(modeMap: ModeMap) { - console.log('playMode called!'); - console.log(modeMap); - } - - private getFrequency(stringName, fret) { - // We're using stringName here, the case sensitive alt to string, to differentiate E/e strings. - const stringFrequency = StringFrequencies[stringName]; + private getFrequency(stringFrequencyMarker, fret) { + // We're using stringFrequencyMarker here, the case sensitive alt to string, to differentiate E/e strings. + const stringFrequency = StringFrequencies[stringFrequencyMarker]; const fretCents = fret * 100; return stringFrequency * Math.pow(2, (fretCents / 1200)); } diff --git a/apps/fretonator-web/src/app/util/constants.ts b/apps/fretonator-web/src/app/util/constants.ts index 4a69c6a..91acced 100644 --- a/apps/fretonator-web/src/app/util/constants.ts +++ b/apps/fretonator-web/src/app/util/constants.ts @@ -640,11 +640,13 @@ export const Enharmonics = [ export const StringFrequencies = { 'e': 329.63, + 'd': 293.66, 'B': 246.94, 'G': 196.00, 'D': 146.83, 'A': 110.00, - 'E': 82.41 + 'E': 82.41, + 'D_': 73.42, }; export const StandardModePatterns = [ From 71b14a5f2ffc8500b98d228be43a12b20b2a69e0 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Thu, 9 Jul 2020 19:55:53 +0100 Subject: [PATCH 08/12] Make a consistent experience when looking at pentatonic scales as well --- .../fretboard/fretboard.component.html | 3 +-- .../fretboard/fretboard.component.scss | 8 ------ .../display-scale-degrees.pipe.spec.ts | 27 ------------------- .../scale-map/display-scale-degrees.pipe.ts | 12 --------- .../fretonator/scale-map/scale-map.module.ts | 5 ---- .../home-index.component.spec.ts.snap | 2 -- 6 files changed, 1 insertion(+), 56 deletions(-) delete mode 100644 apps/fretonator-web/src/app/common/fretonator/scale-map/display-scale-degrees.pipe.spec.ts delete mode 100644 apps/fretonator-web/src/app/common/fretonator/scale-map/display-scale-degrees.pipe.ts diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html index 8fe7214..0f460db 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html @@ -44,9 +44,8 @@
-

Highlight scale degrees

+

Highlight scale degrees

{ - let pipe; - beforeEach(() => { - pipe = new DisplayScaleDegreesPipe(); - }); - it('create an instance', () => { - expect(pipe).toBeTruthy(); - }); - - it('returns true for ionian', () => { - const result = pipe.transform('ionian'); - expect(result).toBe(true); - }); - - it('returns false for minorPentatonic', () => { - const result = pipe.transform('minorPentatonic'); - expect(result).toBe(false); - }); - - it('returns false for majorPentatonic', () => { - const result = pipe.transform('majorPentatonic'); - expect(result).toBe(false); - }); -}); - diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/display-scale-degrees.pipe.ts b/apps/fretonator-web/src/app/common/fretonator/scale-map/display-scale-degrees.pipe.ts deleted file mode 100644 index 062b461..0000000 --- a/apps/fretonator-web/src/app/common/fretonator/scale-map/display-scale-degrees.pipe.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Pipe, PipeTransform } from '@angular/core'; -import { Mode } from '../../../util/types'; - -@Pipe({ - name: 'displayScaleDegrees' -}) -export class DisplayScaleDegreesPipe implements PipeTransform { - - transform(mode: Mode): boolean { - return (!(mode === Mode.majorPentatonic || mode === Mode.minorPentatonic)); - } -} diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.module.ts b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.module.ts index 2c35166..7d30cb0 100644 --- a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.module.ts +++ b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.module.ts @@ -1,10 +1,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ScaleMapComponent } from './scale-map.component'; -import { DisplayScaleDegreesPipe } from './display-scale-degrees.pipe'; -import { GetEnharmonicEquivalentPipe } from '../get-enharmonic-equivalent.pipe'; import { RouterModule } from '@angular/router'; -import { GetEnharmonicRouterLinkPipe } from '../get-enharmonic-router-link.pipe'; import { CrossModule } from '../../svgs/cross/cross.module'; import { PlayModule } from '../../svgs/play/play.module'; import { ScaleDegreesModule } from '../scale-degrees/scale-degrees.module'; @@ -13,11 +10,9 @@ import { ScaleDegreesModule } from '../scale-degrees/scale-degrees.module'; @NgModule({ declarations: [ ScaleMapComponent, - DisplayScaleDegreesPipe ], exports: [ ScaleMapComponent, - DisplayScaleDegreesPipe ], imports: [ CommonModule, 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 109bd99..2db58ab 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 @@ -1208,13 +1208,11 @@ exports[`HomeIndexComponent should create 1`] = `
-

Highlight scale degrees

-
Date: Thu, 9 Jul 2020 20:06:49 +0100 Subject: [PATCH 09/12] Do not show scale degrees or allow different tunings on learn/patterns --- .../fretonator/fretboard/fretboard.component.html | 4 ++-- .../fretonator/fretboard/fretboard.component.ts | 12 ++++++++---- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html index 0f460db..6b46235 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html @@ -42,7 +42,7 @@
-
+

Highlight scale degrees

Fretboard >
-
+

Guitar tuning

- - diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss index 304b7a4..9ba6cf4 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss @@ -556,7 +556,7 @@ $note-height: 36; border-color: var(--fretboard-toggle-button-border-color); } -.tuning--active { +.fretboard__changeTuning--active { background-color: var(--chip-background-color-active); color: var(--chip-foreground-color-active); border-color: var(--chip-border-color-active); diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts index 62ea316..377cc4b 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts @@ -1,20 +1,12 @@ -import { - ChangeDetectorRef, - Component, - ElementRef, - EventEmitter, - Input, - OnChanges, - OnInit, - Output, - ViewChild -} from '@angular/core'; +import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild } from '@angular/core'; import { FretMap, Mode } from '../../../util/types'; import { NotePlaybackService } from '../../playback/note-playback.service'; import { AbstractDataService } from '../../abstract-data/abstract-data.service'; import { ScaleDegrees } from '../../../util/constants'; -import { BehaviorSubject, Subject } from 'rxjs'; -import { map } from 'rxjs/operators'; + +export enum FretboardConfigurations { + learn = 'learn' +} export enum FretModes { twelve = 'twelve', @@ -108,7 +100,7 @@ export class FretboardComponent implements OnChanges, OnInit { this.loadPropFromStorage(StorageKeys.orientation, 'orientation', Orientations.right); this.loadPropFromStorage(StorageKeys.noteNameDisplay, 'noteNameDisplay', NoteDisplays.noteNames); - if (this.configuration !== 'learn') { + if (this.configuration !== FretboardConfigurations.learn) { this.loadPropFromStorage(StorageKeys.tuning, 'tuning', Tunings.standard); } @@ -123,6 +115,10 @@ export class FretboardComponent implements OnChanges, OnInit { } } + get FretboardConfigurations() { + return FretboardConfigurations; + } + get FretModes() { return FretModes; } diff --git a/apps/fretonator-web/src/app/common/svgs/chevron-right/chevron-right.module.ts b/apps/fretonator-web/src/app/common/svgs/chevron-right/chevron-right.module.ts index c29d31f..c0170bf 100644 --- a/apps/fretonator-web/src/app/common/svgs/chevron-right/chevron-right.module.ts +++ b/apps/fretonator-web/src/app/common/svgs/chevron-right/chevron-right.module.ts @@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common'; import { ChevronRightComponent } from './chevron-right.component'; - @NgModule({ declarations: [ChevronRightComponent], exports: [ diff --git a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.spec.ts b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.spec.ts index 63c88e2..6946584 100644 --- a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.spec.ts +++ b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.spec.ts @@ -2,7 +2,6 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { HomeIndexComponent } from './home-index.component'; import { Component } from '@angular/core'; import { HomeModule } from '../home.module'; -import { By } from '@angular/platform-browser'; import { BrowserTestingModule } from '@angular/platform-browser/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { RouterTestingModule } from '@angular/router/testing'; diff --git a/apps/fretonator-web/src/app/pages/learn/patterns-index/patterns-index.component.html b/apps/fretonator-web/src/app/pages/learn/patterns-index/patterns-index.component.html index f7fa1bf..81de3a5 100644 --- a/apps/fretonator-web/src/app/pages/learn/patterns-index/patterns-index.component.html +++ b/apps/fretonator-web/src/app/pages/learn/patterns-index/patterns-index.component.html @@ -36,7 +36,7 @@
Choose a pattern
diff --git a/apps/fretonator-web/src/app/pages/learn/patterns-index/patterns-index.component.ts b/apps/fretonator-web/src/app/pages/learn/patterns-index/patterns-index.component.ts index b030f83..b7b718b 100644 --- a/apps/fretonator-web/src/app/pages/learn/patterns-index/patterns-index.component.ts +++ b/apps/fretonator-web/src/app/pages/learn/patterns-index/patterns-index.component.ts @@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'; import { PatternFretMaps, PatternModeSelectors } from '../../../util/constants'; import { Mode } from '../../../util/types'; import { MetaService } from '../../../common/meta/meta.service'; +import { FretboardConfigurations } from '../../../common/fretonator/fretboard/fretboard.component'; @Component({ selector: 'app-patterns-index', @@ -29,6 +30,10 @@ export class PatternsIndexComponent implements OnInit { this.metaService.updateAllGenericMeta(this.pageUrl, this.pageTitle, this.pageDescription); } + get FretboardConfigurations() { + return FretboardConfigurations; + } + setPattern(mode: Mode) { this.selectedMode = mode; this.selectedFretMap = PatternFretMaps[mode]; From baccd7d4728bfadbab2a5ea66de0176501abef56 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Thu, 9 Jul 2020 20:22:09 +0100 Subject: [PATCH 11/12] Increased budget for sass file --- angular.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/angular.json b/angular.json index e013731..f0a5d9b 100644 --- a/angular.json +++ b/angular.json @@ -62,7 +62,7 @@ { "type": "anyComponentStyle", "maximumWarning": "6kb", - "maximumError": "12kb" + "maximumError": "12.5kb" } ], "serviceWorker": true, From b887062d3ca3dfb68dd52a58348b2749a78255b3 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Thu, 9 Jul 2020 20:33:05 +0100 Subject: [PATCH 12/12] Update snapshot --- .../__snapshots__/home-index.component.spec.ts.snap | 4 +++- 1 file changed, 3 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 2db58ab..bdf91ce 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 @@ -1202,6 +1202,7 @@ exports[`HomeIndexComponent should create 1`] = `
+
@@ -1301,6 +1302,7 @@ exports[`HomeIndexComponent should create 1`] = `
+
@@ -1313,7 +1315,7 @@ exports[`HomeIndexComponent should create 1`] = ` class="fretboard__tuningGroup" >