Skip to content

Commit 6a8eddf

Browse files
whitep4nth3rwhitep4nth3r
authored
Merge pull request #74 from whitep4nth3r/tuning-configurator
New tuning configurator - tune the guitar to DADGAD and drop D as well as standard
2 parents 3c456fc + b887062 commit 6a8eddf

16 files changed

+374
-246
lines changed

‎angular.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
{
6363
"type": "anyComponentStyle",
6464
"maximumWarning": "6kb",
65-
"maximumError": "12kb"
65+
"maximumError": "12.5kb"
6666
}
6767
],
6868
"serviceWorker": true,

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

-2
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@
88
[class.fretboard__toggleButton--active]="fretMode === FretModes.twentyFour"
99
(click)="setFretModeClick(FretModes.twentyFour)">24 frets
1010
</button>
11-
</div>
12-
<div class="button__group">
1311
<button class="fretboard__toggleButton left"
1412
[class.fretboard__toggleButton--active]="orientation === Orientations.left"
1513
(click)="setOrientationClick(Orientations.left)">

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

+8-9
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,14 @@
1717
&:last-of-type {
1818
margin-bottom: 0;
1919
}
20-
21-
@media screen and (min-width: $screen-med) {
22-
justify-content: flex-end;
23-
}
2420
}
2521

2622
.fretboard__toggleButton {
2723
@include chip_button_base();
28-
padding: pxToRem($grid-unit * 1.5);
2924
border-color: var(--fretboard-toggle-button-border-color);
25+
border-radius: 0;
26+
padding: pxToRem($grid-unit * 1.5);
27+
border-right-width: 0;
3028
}
3129

3230
.fretboard__toggleButton--active {
@@ -35,13 +33,14 @@
3533
}
3634

3735
.fretboard__toggleButton:first-of-type {
38-
border-top-right-radius: 0;
39-
border-bottom-right-radius: 0;
36+
border-top-left-radius: var(--border-radius-chip);
37+
border-bottom-left-radius: var(--border-radius-chip);
4038
border-right-width: calc(var(--border-width-button) / 2);
4139
}
4240

4341
.fretboard__toggleButton:last-of-type {
44-
border-top-left-radius: 0;
45-
border-bottom-left-radius: 0;
42+
border-top-right-radius: var(--border-radius-chip);
43+
border-bottom-right-radius: var(--border-radius-chip);
4644
border-left-width: calc(var(--border-width-button) / 2);
45+
border-right-width: var(--border-width-button);
4746
}

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

+66-81
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,3 @@
1-
<ng-template #string let-stringName="stringName" let-string="string">
2-
<ng-container *ngFor="let fret of frets">
3-
<div
4-
class="fretboard__cell"
5-
[class.learn__theme]="configuration === 'learn'"
6-
[class.fretboard__cell--string]="fret === 0"
7-
[class.fretboard__cell--selected]="fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive"
8-
[attr.data-string-name]="fret === 0 ? stringName : null"
9-
[attr.data-string]="string"
10-
[attr.data-fret]="fret"
11-
[attr.data-degree]="(fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive)?.degree"
12-
[attr.data-display-note]="noteNameDisplay === NoteDisplays.noteNames ? ((fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive)?.displayName) : ((fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive)?.degreeNumber)"
13-
[attr.data-mode]="mode"
14-
[attr.data-highlight]="highlightedDegrees.has((fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive)?.degree)"
15-
(click)="playbackService.playNote(stringName, fret)"
16-
></div>
17-
</ng-container>
18-
</ng-template>
19-
20-
<ng-template #fretboardHelp>
21-
<ng-container *ngFor="let fret of frets">
22-
<span class="fretboard__help" [attr.data-fret]="fret"></span>
23-
</ng-container>
24-
</ng-template>
25-
261
<div class="arrowHint">
272
<span class="arrowHint__arrow"
283
[class.fretboard__flip]="orientation === Orientations.left"></span>
@@ -36,79 +11,89 @@
3611
[class.fretboard__leftHanded]="orientation === Orientations.left"
3712
[class.fretboard__24]="fretMode === FretModes.twentyFour">
3813

39-
<ng-container
40-
[ngTemplateOutlet]="string"
41-
[ngTemplateOutletContext]="{ stringName: 'e', string: 'E' }"
42-
></ng-container>
43-
44-
<ng-container
45-
[ngTemplateOutlet]="string"
46-
[ngTemplateOutletContext]="{ stringName: 'B', string: 'B' }"
47-
></ng-container>
48-
49-
<ng-container
50-
[ngTemplateOutlet]="string"
51-
[ngTemplateOutletContext]="{ stringName: 'G', string: 'G' }"
52-
></ng-container>
53-
54-
<ng-container
55-
[ngTemplateOutlet]="string"
56-
[ngTemplateOutletContext]="{ stringName: 'D', string: 'D' }"
57-
></ng-container>
58-
59-
<ng-container
60-
[ngTemplateOutlet]="string"
61-
[ngTemplateOutletContext]="{ stringName: 'A', string: 'A' }"
62-
></ng-container>
63-
64-
<ng-container
65-
[ngTemplateOutlet]="string"
66-
[ngTemplateOutletContext]="{ stringName: 'E', string: 'E' }"
67-
></ng-container>
14+
<ng-container *ngFor="let string of strings, let stringIndex = index">
15+
<ng-container *ngFor="let fret of frets">
16+
<div
17+
class="fretboard__cell"
18+
[class.learn__theme]="configuration === FretboardConfigurations.learn"
19+
[class.fretboard__cell--string]="fret === 0"
20+
[class.fretboard__cell--selected]="fretMap | getFretFromFretMap: string.name:fret:stringNamesAreCaseSensitive"
21+
[attr.data-string-name]="fret === 0 ? string.name : null"
22+
[attr.data-string]="string.note"
23+
[attr.data-fret]="fret"
24+
[attr.data-string-number]="stringIndex + 1"
25+
[attr.data-degree]="(fretMap | getFretFromFretMap: string.name:fret:stringNamesAreCaseSensitive)?.degree"
26+
[attr.data-display-note]="noteNameDisplay === NoteDisplays.noteNames ? ((fretMap | getFretFromFretMap: string.name:fret:stringNamesAreCaseSensitive)?.displayName) : ((fretMap | getFretFromFretMap: string.name:fret:stringNamesAreCaseSensitive)?.degreeNumber)"
27+
[attr.data-mode]="mode"
28+
[attr.data-highlight]="highlightedDegrees.has((fretMap | getFretFromFretMap: string.name:fret:stringNamesAreCaseSensitive)?.degree)"
29+
(click)="playbackService.playNote(string.frequencyMarker, fret)"
30+
></div>
31+
</ng-container>
32+
</ng-container>
6833
</div>
6934

7035
<div class="fretboard"
7136
[class.fretboard__leftHanded]="orientation === Orientations.left"
7237
[class.fretboard__24]="fretMode === FretModes.twentyFour">
73-
<ng-container
74-
[ngTemplateOutlet]="fretboardHelp"
75-
></ng-container>
38+
<ng-container *ngFor="let fret of frets">
39+
<span class="fretboard__help" [attr.data-fret]="fret"></span>
40+
</ng-container>
7641
</div>
7742
</div>
7843

7944
<div class="controlPanel">
80-
<div class="controlPanel__section">
81-
<span class="controlPanel__title" *ngIf="!(mode | displayScaleDegrees)">Configure scale degrees</span>
82-
<span class="controlPanel__title" *ngIf="mode | displayScaleDegrees">Highlight scale degrees</span>
83-
<app-scale-degrees
84-
*ngIf="mode | displayScaleDegrees"
85-
[tonicActive]="highlightedDegrees.has(ScaleDegrees.tonic)"
86-
[mediantActive]="highlightedDegrees.has(ScaleDegrees.mediant)"
87-
[dominantActive]="highlightedDegrees.has(ScaleDegrees.dominant)"
88-
(setTonicHighlight)="toggleHighlight(ScaleDegrees.tonic)"
89-
(setMediantHighlight)="toggleHighlight(ScaleDegrees.mediant)"
90-
(setDominantHighlight)="toggleHighlight(ScaleDegrees.dominant)"
91-
></app-scale-degrees>
45+
<div class="controlPanel__row" *ngIf="configuration !== FretboardConfigurations.learn">
46+
<div class="controlPanel__section">
47+
<h4 class="controlPanel__title">Highlight scale degrees</h4>
48+
<app-scale-degrees
49+
[tonicActive]="highlightedDegrees.has(ScaleDegrees.tonic)"
50+
[mediantActive]="highlightedDegrees.has(ScaleDegrees.mediant)"
51+
[dominantActive]="highlightedDegrees.has(ScaleDegrees.dominant)"
52+
(setTonicHighlight)="toggleHighlight(ScaleDegrees.tonic)"
53+
(setMediantHighlight)="toggleHighlight(ScaleDegrees.mediant)"
54+
(setDominantHighlight)="toggleHighlight(ScaleDegrees.dominant)"
55+
></app-scale-degrees>
56+
</div>
57+
<div class="controlPanel__section">
58+
<h4 class="controlPanel__title">Scale degrees display</h4>
59+
<div class="button__group button__group--right">
60+
<button class="fretboard__toggleButton"
61+
[class.fretboard__toggleButton--active]="noteNameDisplay === NoteDisplays.noteNames"
62+
(click)="toggleNoteDisplay(NoteDisplays.noteNames)">Note names
63+
</button>
64+
<button (click)="toggleNoteDisplay(NoteDisplays.numbers)"
65+
class="fretboard__toggleButton"
66+
[class.fretboard__toggleButton--active]="noteNameDisplay === NoteDisplays.numbers">Note numbers
67+
</button>
68+
</div>
9269

93-
<div class="button__group">
94-
<button class="fretboard__toggleButton"
95-
[class.fretboard__toggleButton--active]="noteNameDisplay === NoteDisplays.noteNames"
96-
(click)="toggleNoteDisplay(NoteDisplays.noteNames)">Note names
97-
</button>
98-
<button (click)="toggleNoteDisplay(NoteDisplays.numbers)"
99-
class="fretboard__toggleButton"
100-
[class.fretboard__toggleButton--active]="noteNameDisplay === NoteDisplays.numbers">Note numbers
101-
</button>
10270
</div>
10371
</div>
104-
105-
<div class="controlPanel__section">
106-
<span class="controlPanel__title controlPanel__title--right">Configure fretboard</span>
72+
<div class="controlPanel__column">
73+
<h4 class="controlPanel__title">Fretboard</h4>
10774
<app-fretboard-config
10875
[fretMode]="fretMode"
10976
[orientation]="orientation"
11077
(setFretMode)="setFretMode($event)"
11178
(setOrientation)="setOrientation($event)"
11279
></app-fretboard-config>
11380
</div>
81+
82+
<div class="controlPanel__column" *ngIf="configuration !== FretboardConfigurations.learn">
83+
<h4 class="controlPanel__title">Guitar tuning</h4>
84+
<div class="fretboard__tuningGroup">
85+
<button class="fretboard__changeTuning"
86+
[class.fretboard__changeTuning--active]="tuning === Tunings.standard"
87+
(click)="setTuning(Tunings.standard)">Standard
88+
</button>
89+
<button class="fretboard__changeTuning"
90+
[class.fretboard__changeTuning--active]="tuning === Tunings.dropd"
91+
(click)="setTuning(Tunings.dropd)">Drop D
92+
</button>
93+
<button class="fretboard__changeTuning"
94+
[class.fretboard__changeTuning--active]="tuning === Tunings.dadgad"
95+
(click)="setTuning(Tunings.dadgad)">DADGAD
96+
</button>
97+
</div>
98+
</div>
11499
</div>

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

+59-44
Original file line numberDiff line numberDiff line change
@@ -215,32 +215,32 @@ $note-height: 36;
215215
}
216216
}
217217

218-
&[data-string="G"][data-fret="3"],
219-
&[data-string="G"][data-fret="5"],
220-
&[data-string="G"][data-fret="7"],
221-
&[data-string="G"][data-fret="9"],
222-
&[data-string="G"][data-fret="15"],
223-
&[data-string="G"][data-fret="17"],
224-
&[data-string="G"][data-fret="19"],
225-
&[data-string="G"][data-fret="21"],
226-
&[data-string="B"][data-fret="12"],
227-
&[data-string="D"][data-fret="12"] {
218+
&[data-string-number="3"][data-fret="3"],
219+
&[data-string-number="3"][data-fret="5"],
220+
&[data-string-number="3"][data-fret="7"],
221+
&[data-string-number="3"][data-fret="9"],
222+
&[data-string-number="3"][data-fret="15"],
223+
&[data-string-number="3"][data-fret="17"],
224+
&[data-string-number="3"][data-fret="19"],
225+
&[data-string-number="3"][data-fret="21"],
226+
&[data-string-number="2"][data-fret="12"],
227+
&[data-string-number="4"][data-fret="12"] {
228228
background-image: var(--fret-marker-url);
229229
background-repeat: no-repeat;
230230
background-position: center calc(var(--string-height-base) - 15px);
231231
background-size: 30px 30px;
232232
}
233233

234-
&[data-string="D"][data-fret="3"],
235-
&[data-string="D"][data-fret="5"],
236-
&[data-string="D"][data-fret="7"],
237-
&[data-string="D"][data-fret="9"],
238-
&[data-string="D"][data-fret="15"],
239-
&[data-string="D"][data-fret="17"],
240-
&[data-string="D"][data-fret="19"],
241-
&[data-string="D"][data-fret="21"],
242-
&[data-string="G"][data-fret="12"],
243-
&[data-string="A"][data-fret="12"] {
234+
&[data-string-number="4"][data-fret="3"],
235+
&[data-string-number="4"][data-fret="5"],
236+
&[data-string-number="4"][data-fret="7"],
237+
&[data-string-number="4"][data-fret="9"],
238+
&[data-string-number="4"][data-fret="15"],
239+
&[data-string-number="4"][data-fret="17"],
240+
&[data-string-number="4"][data-fret="19"],
241+
&[data-string-number="4"][data-fret="21"],
242+
&[data-string-number="3"][data-fret="12"],
243+
&[data-string-number="5"][data-fret="12"] {
244244
background-image: var(--fret-marker-url);
245245
background-repeat: no-repeat;
246246
background-position: center -15px;
@@ -326,14 +326,6 @@ $note-height: 36;
326326
color: var(--note-color-dominant);
327327
}
328328
}
329-
330-
&[data-mode="majorPentatonic"],
331-
&[data-mode="minorPentatonic"] {
332-
&:after {
333-
background-color: var(--note-background) !important;
334-
color: var(--note-color) !important;
335-
}
336-
}
337329
}
338330

339331
.fretboard__cell--string {
@@ -484,45 +476,41 @@ $note-height: 36;
484476

485477
.controlPanel {
486478
@include content_wrapper();
487-
display: flex;
488-
flex-direction: column;
489-
justify-content: space-between;
490-
align-items: flex-start;
491479
max-width: $screen-med;
492480
margin-top: pxToRem($grid-unit * 2);
493-
margin-bottom: pxToRem($grid-unit * 2);
481+
margin-bottom: pxToRem($grid-unit * 8);
494482
background-color: var(--background-color-light);
495483
padding: pxToRem($grid-unit * 4);
496484
border-radius: pxToRem($grid-unit * 4);
497485
box-shadow: 0 pxToRem(1) pxToRem(3) rgba(26, 26, 26, 0.12), 0 pxToRem(1) pxToRem(2) rgba(26, 26, 26, 0.24);
486+
}
487+
488+
.controlPanel__row {
489+
display: flex;
490+
flex-direction: column;
491+
margin-bottom: pxToRem($grid-unit * 4);
492+
justify-content: center;
498493

499494
@media screen and (min-width: $screen-med) {
495+
justify-content: space-between;
500496
flex-direction: row;
501497
}
502498
}
503499

504-
.controlPanel__section {
500+
.controlPanel__column {
505501
display: flex;
506502
flex-direction: column;
507-
width: 100%;
508-
margin-bottom: pxToRem($grid-unit * 4);
503+
margin-bottom: pxToRem($grid-unit * 8);
504+
justify-content: center;
509505

510506
&:last-of-type {
511507
margin-bottom: 0;
512508
}
513-
514-
@media screen and (min-width: $screen-med) {
515-
margin-bottom: 0;
516-
}
517509
}
518510

519511
.controlPanel__title {
520512
@include info_container_title;
521513
text-align: center;
522-
523-
@media screen and (min-width: $screen-med) {
524-
text-align: left;
525-
}
526514
}
527515

528516
.controlPanel__title--right {
@@ -547,6 +535,33 @@ $note-height: 36;
547535
}
548536
}
549537

538+
.button__group--right {
539+
@media screen and (min-width: $screen-med) {
540+
justify-content: flex-end;
541+
}
542+
}
543+
544+
.fretboard__tuningGroup {
545+
margin-left: auto;
546+
margin-right: auto;
547+
max-width: $screen-med;
548+
text-align: center;
549+
}
550+
551+
.fretboard__changeTuning {
552+
@include chip_button_base;
553+
margin-left: pxToRem($grid-unit);
554+
margin-right: pxToRem($grid-unit);
555+
margin-bottom: pxToRem($grid-unit);
556+
border-color: var(--fretboard-toggle-button-border-color);
557+
}
558+
559+
.fretboard__changeTuning--active {
560+
background-color: var(--chip-background-color-active);
561+
color: var(--chip-foreground-color-active);
562+
border-color: var(--chip-border-color-active);
563+
}
564+
550565
.fretboard__toggleButton {
551566
@include chip_button_base();
552567
padding: pxToRem($grid-unit * 1.5);

0 commit comments

Comments
 (0)