Skip to content

Commit 8fa27b2

Browse files
salmacodecomputerlovesalmacodecomputerlove
committed
Tunings work and are stored in local storage!
1 parent 3b9e8ec commit 8fa27b2

File tree

3 files changed

+72
-55
lines changed

3 files changed

+72
-55
lines changed

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

Lines changed: 21 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
<ng-template #string let-stringName="stringName" let-string="string">
1+
<ng-template #string let-stringName="stringName" let-stringNote="stringNote">
22
<ng-container *ngFor="let fret of frets">
33
<div
44
class="fretboard__cell"
55
[class.learn__theme]="configuration === 'learn'"
66
[class.fretboard__cell--string]="fret === 0"
77
[class.fretboard__cell--selected]="fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive"
88
[attr.data-string-name]="fret === 0 ? stringName : null"
9-
[attr.data-string]="string"
9+
[attr.data-string]="stringNote"
1010
[attr.data-fret]="fret"
1111
[attr.data-degree]="(fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive)?.degree"
1212
[attr.data-display-note]="noteNameDisplay === NoteDisplays.noteNames ? ((fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive)?.displayName) : ((fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive)?.degreeNumber)"
@@ -36,35 +36,12 @@
3636
[class.fretboard__leftHanded]="orientation === Orientations.left"
3737
[class.fretboard__24]="fretMode === FretModes.twentyFour">
3838

39-
<ng-container
40-
[ngTemplateOutlet]="string"
41-
[ngTemplateOutletContext]="strings[5]"
42-
></ng-container>
43-
44-
<ng-container
45-
[ngTemplateOutlet]="string"
46-
[ngTemplateOutletContext]="strings[4]"
47-
></ng-container>
48-
49-
<ng-container
50-
[ngTemplateOutlet]="string"
51-
[ngTemplateOutletContext]="strings[3]"
52-
></ng-container>
53-
54-
<ng-container
55-
[ngTemplateOutlet]="string"
56-
[ngTemplateOutletContext]="strings[2]"
57-
></ng-container>
58-
59-
<ng-container
60-
[ngTemplateOutlet]="string"
61-
[ngTemplateOutletContext]="strings[1]"
62-
></ng-container>
63-
64-
<ng-container
65-
[ngTemplateOutlet]="string"
66-
[ngTemplateOutletContext]="strings[0]"
67-
></ng-container>
39+
<ng-container *ngFor="let item of reverseStrings$ | async">
40+
<ng-container
41+
[ngTemplateOutlet]="string"
42+
[ngTemplateOutletContext]="item"
43+
></ng-container>
44+
</ng-container>
6845
</div>
6946

7047
<div class="fretboard"
@@ -76,7 +53,9 @@
7653
</div>
7754
</div>
7855

56+
7957
<div class="controlPanel">
58+
8059
<div class="controlPanel__section">
8160
<span class="controlPanel__title" *ngIf="!(mode | displayScaleDegrees)">Configure scale degrees</span>
8261
<span class="controlPanel__title" *ngIf="mode | displayScaleDegrees">Highlight scale degrees</span>
@@ -111,10 +90,16 @@
11190
(setOrientation)="setOrientation($event)"
11291
></app-fretboard-config>
11392
</div>
93+
</div>
11494

115-
<div>
116-
<button (click)="setTuning(Tunings.standard)">standard</button>
117-
<button (click)="setTuning(Tunings.dropD)">drop d</button>
118-
</div>
119-
95+
<div class="fretboard__tuningGroup">
96+
<button class="fretboard__changeTuning"
97+
[class.tuning--active]="tuning === Tunings.standard"
98+
(click)="setTuning(Tunings.standard)">Standard</button>
99+
<button class="fretboard__changeTuning"
100+
[class.tuning--active]="tuning === Tunings.dropd"
101+
(click)="setTuning(Tunings.dropd)">Drop D</button>
102+
<button class="fretboard__changeTuning"
103+
[class.tuning--active]="tuning === Tunings.dadgad"
104+
(click)="setTuning(Tunings.dadgad)">DADGAD</button>
120105
</div>

‎apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -547,6 +547,25 @@ $note-height: 36;
547547
}
548548
}
549549

550+
.fretboard__tuningGroup {
551+
margin-left: auto;
552+
margin-right: auto;
553+
max-width: $screen-med;
554+
text-align: center;
555+
}
556+
557+
.fretboard__changeTuning {
558+
@include chip_button_base;
559+
margin-left: pxToRem($grid-unit / 2);
560+
margin-right: pxToRem($grid-unit / 2);
561+
}
562+
563+
.tuning--active {
564+
background-color: var(--chip-background-color-active);
565+
color: var(--chip-foreground-color-active);
566+
border-color: var(--chip-border-color-active);
567+
}
568+
550569
.fretboard__toggleButton {
551570
@include chip_button_base();
552571
padding: pxToRem($grid-unit * 1.5);

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

Lines changed: 32 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import { FretMap, Mode } from '../../../util/types';
1313
import { NotePlaybackService } from '../../playback/note-playback.service';
1414
import { AbstractDataService } from '../../abstract-data/abstract-data.service';
1515
import { ScaleDegrees } from '../../../util/constants';
16+
import { BehaviorSubject, Subject } from 'rxjs';
17+
import { map } from 'rxjs/operators';
1618

1719
export enum FretModes {
1820
twelve = 'twelve',
@@ -31,25 +33,34 @@ export enum NoteDisplays {
3133

3234
enum Tunings {
3335
standard = 'standard',
34-
dropD = 'dropD'
36+
dropd = 'dropd',
37+
dadgad = 'dadgad'
3538
}
3639

3740
const TuningReturner = {
3841
'standard': [
39-
{ stringName: 'E', string: 'E' },
40-
{ stringName: 'A', string: 'A' },
41-
{ stringName: 'D', string: 'D' },
42-
{ stringName: 'G', string: 'G' },
43-
{ stringName: 'B', string: 'B' },
44-
{ stringName: 'e', string: 'E' }
42+
{ stringName: 'E', stringNote: 'E' },
43+
{ stringName: 'A', stringNote: 'A' },
44+
{ stringName: 'D', stringNote: 'D' },
45+
{ stringName: 'G', stringNote: 'G' },
46+
{ stringName: 'B', stringNote: 'B' },
47+
{ stringName: 'e', stringNote: 'E' }
4548
],
46-
'dropD': [
47-
{ stringName: 'D', string: 'D' },
48-
{ stringName: 'A', string: 'A' },
49-
{ stringName: 'D', string: 'D' },
50-
{ stringName: 'G', string: 'G' },
51-
{ stringName: 'B', string: 'B' },
52-
{ stringName: 'e', string: 'E' }
49+
'dropd': [
50+
{ stringName: 'D', stringNote: 'D' },
51+
{ stringName: 'A', stringNote: 'A' },
52+
{ stringName: 'D', stringNote: 'D' },
53+
{ stringName: 'G', stringNote: 'G' },
54+
{ stringName: 'B', stringNote: 'B' },
55+
{ stringName: 'e', stringNote: 'E' }
56+
],
57+
'dadgad': [
58+
{ stringName: 'D', stringNote: 'D' },
59+
{ stringName: 'A', stringNote: 'A' },
60+
{ stringName: 'D', stringNote: 'D' },
61+
{ stringName: 'G', stringNote: 'G' },
62+
{ stringName: 'A', stringNote: 'A' },
63+
{ stringName: 'd', stringNote: 'D' }
5364
]
5465
};
5566

@@ -81,14 +92,16 @@ export class FretboardComponent implements OnChanges, OnInit {
8192
orientation;
8293
fretMode;
8394
frets;
84-
strings;
85-
tuning;
95+
tuning = Tunings.standard;
8696
highlightedDegrees = new Set<ScaleDegrees>();
8797
noteNameDisplay = NoteDisplays.noteNames;
98+
strings$ = new BehaviorSubject<any[]>(TuningReturner[Tunings.standard]);
99+
reverseStrings$ = this.strings$.pipe(
100+
map(str => str.reverse())
101+
)
88102

89103
constructor(public playbackService: NotePlaybackService,
90-
private localStorage: AbstractDataService,
91-
private cd: ChangeDetectorRef) {
104+
private localStorage: AbstractDataService) {
92105
}
93106

94107
ngOnInit() {
@@ -129,7 +142,7 @@ export class FretboardComponent implements OnChanges, OnInit {
129142
}
130143

131144
configureStrings() {
132-
this.strings = TuningReturner[this.tuning];
145+
this.strings$.next(TuningReturner[this.tuning]);
133146
}
134147

135148
configureFretboard() {

0 commit comments

Comments
 (0)