Skip to content

Commit 4a176c3

Browse files
author
Salma Alam-Naylor
committed
Merge branch 'fret-toggle' into play-scale
2 parents e695393 + 6794dd0 commit 4a176c3

File tree

8 files changed

+477
-42
lines changed

8 files changed

+477
-42
lines changed

‎apps/fretonator-web/src/app/common/fret-map/fret-map.service.testConstants.ts

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -986,6 +986,13 @@ export const cIonianFretMappings: FretMap = [
986986
{ string: 'A', fret: 8, displayName: 'F', degree: 'subdominant' },
987987
{ string: 'A', fret: 10, displayName: 'G', degree: 'dominant' },
988988
{ string: 'A', fret: 12, displayName: 'A', degree: 'submediant' },
989+
{ string: 'A', fret: 14, displayName: 'B', degree: 'leadingTone' },
990+
{ string: 'A', fret: 15, displayName: 'C', degree: 'tonic' },
991+
{ string: 'A', fret: 17, displayName: 'D', degree: 'supertonic' },
992+
{ string: 'A', fret: 19, displayName: 'E', degree: 'mediant' },
993+
{ string: 'A', fret: 20, displayName: 'F', degree: 'subdominant' },
994+
{ string: 'A', fret: 22, displayName: 'G', degree: 'dominant' },
995+
{ string: 'A', fret: 24, displayName: 'A', degree: 'submediant' },
989996
{ string: 'B', fret: 0, displayName: 'B', degree: 'leadingTone' },
990997
{ string: 'B', fret: 1, displayName: 'C', degree: 'tonic' },
991998
{ string: 'B', fret: 3, displayName: 'D', degree: 'supertonic' },
@@ -994,6 +1001,13 @@ export const cIonianFretMappings: FretMap = [
9941001
{ string: 'B', fret: 8, displayName: 'G', degree: 'dominant' },
9951002
{ string: 'B', fret: 10, displayName: 'A', degree: 'submediant' },
9961003
{ string: 'B', fret: 12, displayName: 'B', degree: 'leadingTone' },
1004+
{ string: 'B', fret: 13, displayName: 'C', degree: 'tonic' },
1005+
{ string: 'B', fret: 15, displayName: 'D', degree: 'supertonic' },
1006+
{ string: 'B', fret: 17, displayName: 'E', degree: 'mediant' },
1007+
{ string: 'B', fret: 18, displayName: 'F', degree: 'subdominant' },
1008+
{ string: 'B', fret: 20, displayName: 'G', degree: 'dominant' },
1009+
{ string: 'B', fret: 22, displayName: 'A', degree: 'submediant' },
1010+
{ string: 'B', fret: 24, displayName: 'B', degree: 'leadingTone' },
9971011
{ string: 'D', fret: 0, displayName: 'D', degree: 'supertonic' },
9981012
{ string: 'D', fret: 2, displayName: 'E', degree: 'mediant' },
9991013
{ string: 'D', fret: 3, displayName: 'F', degree: 'subdominant' },
@@ -1002,6 +1016,13 @@ export const cIonianFretMappings: FretMap = [
10021016
{ string: 'D', fret: 9, displayName: 'B', degree: 'leadingTone' },
10031017
{ string: 'D', fret: 10, displayName: 'C', degree: 'tonic' },
10041018
{ string: 'D', fret: 12, displayName: 'D', degree: 'supertonic' },
1019+
{ string: 'D', fret: 14, displayName: 'E', degree: 'mediant' },
1020+
{ string: 'D', fret: 15, displayName: 'F', degree: 'subdominant' },
1021+
{ string: 'D', fret: 17, displayName: 'G', degree: 'dominant' },
1022+
{ string: 'D', fret: 19, displayName: 'A', degree: 'submediant' },
1023+
{ string: 'D', fret: 21, displayName: 'B', degree: 'leadingTone' },
1024+
{ string: 'D', fret: 22, displayName: 'C', degree: 'tonic' },
1025+
{ string: 'D', fret: 24, displayName: 'D', degree: 'supertonic' },
10051026
{ string: 'E', fret: 0, displayName: 'E', degree: 'mediant' },
10061027
{ string: 'E', fret: 1, displayName: 'F', degree: 'subdominant' },
10071028
{ string: 'E', fret: 3, displayName: 'G', degree: 'dominant' },
@@ -1010,6 +1031,13 @@ export const cIonianFretMappings: FretMap = [
10101031
{ string: 'E', fret: 8, displayName: 'C', degree: 'tonic' },
10111032
{ string: 'E', fret: 10, displayName: 'D', degree: 'supertonic' },
10121033
{ string: 'E', fret: 12, displayName: 'E', degree: 'mediant' },
1034+
{ string: 'E', fret: 13, displayName: 'F', degree: 'subdominant' },
1035+
{ string: 'E', fret: 15, displayName: 'G', degree: 'dominant' },
1036+
{ string: 'E', fret: 17, displayName: 'A', degree: 'submediant' },
1037+
{ string: 'E', fret: 19, displayName: 'B', degree: 'leadingTone' },
1038+
{ string: 'E', fret: 20, displayName: 'C', degree: 'tonic' },
1039+
{ string: 'E', fret: 22, displayName: 'D', degree: 'supertonic' },
1040+
{ string: 'E', fret: 24, displayName: 'E', degree: 'mediant' },
10131041
{ string: 'G', fret: 0, displayName: 'G', degree: 'dominant' },
10141042
{ string: 'G', fret: 2, displayName: 'A', degree: 'submediant' },
10151043
{ string: 'G', fret: 4, displayName: 'B', degree: 'leadingTone' },
@@ -1018,6 +1046,13 @@ export const cIonianFretMappings: FretMap = [
10181046
{ string: 'G', fret: 9, displayName: 'E', degree: 'mediant' },
10191047
{ string: 'G', fret: 10, displayName: 'F', degree: 'subdominant' },
10201048
{ string: 'G', fret: 12, displayName: 'G', degree: 'dominant' },
1049+
{ string: 'G', fret: 14, displayName: 'A', degree: 'submediant' },
1050+
{ string: 'G', fret: 16, displayName: 'B', degree: 'leadingTone' },
1051+
{ string: 'G', fret: 17, displayName: 'C', degree: 'tonic' },
1052+
{ string: 'G', fret: 19, displayName: 'D', degree: 'supertonic' },
1053+
{ string: 'G', fret: 21, displayName: 'E', degree: 'mediant' },
1054+
{ string: 'G', fret: 22, displayName: 'F', degree: 'subdominant' },
1055+
{ string: 'G', fret: 24, displayName: 'G', degree: 'dominant' },
10211056
];
10221057

10231058
export const dIonianFretMappings: FretMap = [
@@ -1029,6 +1064,13 @@ export const dIonianFretMappings: FretMap = [
10291064
{ string: 'A', fret: 9, displayName: 'F#', degree: 'mediant' },
10301065
{ string: 'A', fret: 10, displayName: 'G', degree: 'subdominant' },
10311066
{ string: 'A', fret: 12, displayName: 'A', degree: 'dominant' },
1067+
{ string: 'A', fret: 14, displayName: 'B', degree: 'submediant' },
1068+
{ string: 'A', fret: 16, displayName: 'C#', degree: 'leadingTone' },
1069+
{ string: 'A', fret: 17, displayName: 'D', degree: 'tonic' },
1070+
{ string: 'A', fret: 19, displayName: 'E', degree: 'supertonic' },
1071+
{ string: 'A', fret: 21, displayName: 'F#', degree: 'mediant' },
1072+
{ string: 'A', fret: 22, displayName: 'G', degree: 'subdominant' },
1073+
{ string: 'A', fret: 24, displayName: 'A', degree: 'dominant' },
10321074
{ string: 'B', fret: 0, displayName: 'B', degree: 'submediant' },
10331075
{ string: 'B', fret: 2, displayName: 'C#', degree: 'leadingTone' },
10341076
{ string: 'B', fret: 3, displayName: 'D', degree: 'tonic' },
@@ -1037,6 +1079,13 @@ export const dIonianFretMappings: FretMap = [
10371079
{ string: 'B', fret: 8, displayName: 'G', degree: 'subdominant' },
10381080
{ string: 'B', fret: 10, displayName: 'A', degree: 'dominant' },
10391081
{ string: 'B', fret: 12, displayName: 'B', degree: 'submediant' },
1082+
{ string: 'B', fret: 14, displayName: 'C#', degree: 'leadingTone' },
1083+
{ string: 'B', fret: 15, displayName: 'D', degree: 'tonic' },
1084+
{ string: 'B', fret: 17, displayName: 'E', degree: 'supertonic' },
1085+
{ string: 'B', fret: 19, displayName: 'F#', degree: 'mediant' },
1086+
{ string: 'B', fret: 20, displayName: 'G', degree: 'subdominant' },
1087+
{ string: 'B', fret: 22, displayName: 'A', degree: 'dominant' },
1088+
{ string: 'B', fret: 24, displayName: 'B', degree: 'submediant' },
10401089
{ string: 'D', fret: 0, displayName: 'D', degree: 'tonic' },
10411090
{ string: 'D', fret: 2, displayName: 'E', degree: 'supertonic' },
10421091
{ string: 'D', fret: 4, displayName: 'F#', degree: 'mediant' },
@@ -1045,6 +1094,13 @@ export const dIonianFretMappings: FretMap = [
10451094
{ string: 'D', fret: 9, displayName: 'B', degree: 'submediant' },
10461095
{ string: 'D', fret: 11, displayName: 'C#', degree: 'leadingTone' },
10471096
{ string: 'D', fret: 12, displayName: 'D', degree: 'tonic' },
1097+
{ string: 'D', fret: 14, displayName: 'E', degree: 'supertonic' },
1098+
{ string: 'D', fret: 16, displayName: 'F#', degree: 'mediant' },
1099+
{ string: 'D', fret: 17, displayName: 'G', degree: 'subdominant' },
1100+
{ string: 'D', fret: 19, displayName: 'A', degree: 'dominant' },
1101+
{ string: 'D', fret: 21, displayName: 'B', degree: 'submediant' },
1102+
{ string: 'D', fret: 23, displayName: 'C#', degree: 'leadingTone' },
1103+
{ string: 'D', fret: 24, displayName: 'D', degree: 'tonic' },
10481104
{ string: 'E', fret: 0, displayName: 'E', degree: 'supertonic' },
10491105
{ string: 'E', fret: 2, displayName: 'F#', degree: 'mediant' },
10501106
{ string: 'E', fret: 3, displayName: 'G', degree: 'subdominant' },
@@ -1053,6 +1109,13 @@ export const dIonianFretMappings: FretMap = [
10531109
{ string: 'E', fret: 9, displayName: 'C#', degree: 'leadingTone' },
10541110
{ string: 'E', fret: 10, displayName: 'D', degree: 'tonic' },
10551111
{ string: 'E', fret: 12, displayName: 'E', degree: 'supertonic' },
1112+
{ string: 'E', fret: 14, displayName: 'F#', degree: 'mediant' },
1113+
{ string: 'E', fret: 15, displayName: 'G', degree: 'subdominant' },
1114+
{ string: 'E', fret: 17, displayName: 'A', degree: 'dominant' },
1115+
{ string: 'E', fret: 19, displayName: 'B', degree: 'submediant' },
1116+
{ string: 'E', fret: 21, displayName: 'C#', degree: 'leadingTone' },
1117+
{ string: 'E', fret: 22, displayName: 'D', degree: 'tonic' },
1118+
{ string: 'E', fret: 24, displayName: 'E', degree: 'supertonic' },
10561119
{ string: 'G', fret: 0, displayName: 'G', degree: 'subdominant' },
10571120
{ string: 'G', fret: 2, displayName: 'A', degree: 'dominant' },
10581121
{ string: 'G', fret: 4, displayName: 'B', degree: 'submediant' },
@@ -1061,6 +1124,13 @@ export const dIonianFretMappings: FretMap = [
10611124
{ string: 'G', fret: 9, displayName: 'E', degree: 'supertonic' },
10621125
{ string: 'G', fret: 11, displayName: 'F#', degree: 'mediant' },
10631126
{ string: 'G', fret: 12, displayName: 'G', degree: 'subdominant' },
1127+
{ string: 'G', fret: 14, displayName: 'A', degree: 'dominant' },
1128+
{ string: 'G', fret: 16, displayName: 'B', degree: 'submediant' },
1129+
{ string: 'G', fret: 18, displayName: 'C#', degree: 'leadingTone' },
1130+
{ string: 'G', fret: 19, displayName: 'D', degree: 'tonic' },
1131+
{ string: 'G', fret: 21, displayName: 'E', degree: 'supertonic' },
1132+
{ string: 'G', fret: 23, displayName: 'F#', degree: 'mediant' },
1133+
{ string: 'G', fret: 24, displayName: 'G', degree: 'subdominant' },
10641134
];
10651135

10661136
export const cMajorPentatonicChordMap = [

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

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,26 @@
1515
</ng-container>
1616
</ng-template>
1717

18+
<div class="fretboard__toggle">
19+
<button class="fretboard__toggleButton fretboard__toggleButton--left"
20+
[class.fretboard__toggleButton--active]="fretMode === fretModes.twelve"
21+
(click)="setFretMode(fretModes.twelve)">12 frets
22+
</button>
23+
<button class="fretboard__toggleButton fretboard__toggleButton--right"
24+
[class.fretboard__toggleButton--active]="fretMode === fretModes.twentyFour"
25+
(click)="setFretMode(fretModes.twentyFour)">24 frets
26+
</button>
27+
</div>
28+
1829
<div class="arrowHint">
1930
<span class="arrowHint__arrow"></span>
2031
</div>
2132

22-
<div class="fretboard__container">
33+
<div class="fretboard__container"
34+
[class.fretboard__wide]="fretMode === fretModes.twentyFour">
2335

24-
<div data-fretboard class="fretboard">
36+
<div class="fretboard"
37+
[class.fretboard__24]="fretMode === fretModes.twentyFour">
2538
<ng-container
2639
[ngTemplateOutlet]="string"
2740
[ngTemplateOutletContext]="{ stringName: 'e', string: 'E' }"

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

Lines changed: 139 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,114 @@
1313
padding-bottom: pxToRem($grid-unit * 4);
1414
padding-top: pxToRem($grid-unit * 9);
1515
overflow-x: auto;
16+
transition: max-width 0.09s ease-in-out;
17+
18+
&.fretboard__wide {
19+
max-width: $fretonator_max_width-wide;
20+
}
21+
}
22+
23+
.fretboard__24 {
24+
.fretboard__cell {
25+
&:nth-child(-n + 13) {
26+
height: unset;
27+
28+
&:before {
29+
bottom: unset;
30+
top: unset;
31+
}
32+
}
33+
34+
&:nth-last-child(-n + 13) {
35+
height: unset;
36+
37+
&:before {
38+
bottom: unset;
39+
}
40+
}
41+
42+
&:nth-child(13n + 1) {
43+
&:before {
44+
display: unset;
45+
}
46+
}
47+
48+
&:nth-child(-n + 25) {
49+
height: calc(var(--string-height-base) / 2);
50+
51+
&:before {
52+
bottom: unset;
53+
top: 0;
54+
}
55+
}
56+
57+
&:nth-last-child(-n + 25) {
58+
height: calc(var(--string-height-base) / 2);
59+
60+
&:before {
61+
bottom: 0;
62+
}
63+
}
64+
65+
&:nth-child(25n + 1) {
66+
&:before {
67+
display: none;
68+
}
69+
}
70+
}
71+
72+
.fretboard__cell--string {
73+
&:nth-child(-n + 13):after {
74+
transform: unset;
75+
}
76+
77+
&:nth-last-child(-n + 13):after {
78+
bottom: unset;
79+
top: unset;
80+
transform: unset;
81+
}
82+
83+
&:nth-child(-n + 25):after {
84+
transform: translate(-50%, 6px);
85+
}
86+
87+
&:nth-last-child(-n + 25):after {
88+
bottom: 0;
89+
top: unset;
90+
transform: translate(-50%, calc(50% - 1px));
91+
}
92+
}
93+
94+
.fretboard__cell--selected {
95+
&:nth-child(-n + 13):after {
96+
transform: unset;
97+
}
98+
99+
&:nth-last-child(-n + 13):after {
100+
bottom: unset;
101+
top: unset;
102+
transform: unset;
103+
}
104+
105+
&:nth-child(-n + 25):after {
106+
transform: translate(-50%, 6px);
107+
}
108+
109+
&:nth-last-child(-n + 25):after {
110+
bottom: 0;
111+
top: unset;
112+
transform: translate(-50%, calc(50% - 1px));
113+
}
114+
}
16115
}
17116

18117
.fretboard {
19118
display: grid;
20119
grid-template-columns: 32px repeat(12, minmax(50px, 1fr));
120+
121+
&.fretboard__24 {
122+
grid-template-columns: 32px repeat(24, minmax(50px, 1fr));
123+
}
21124
}
22125

23126
.fretboard__cell {
@@ -71,6 +174,10 @@
71174
&[data-string="G"][data-fret="5"],
72175
&[data-string="G"][data-fret="7"],
73176
&[data-string="G"][data-fret="9"],
177+
&[data-string="G"][data-fret="15"],
178+
&[data-string="G"][data-fret="17"],
179+
&[data-string="G"][data-fret="19"],
180+
&[data-string="G"][data-fret="21"],
74181
&[data-string="B"][data-fret="12"],
75182
&[data-string="D"][data-fret="12"] {
76183
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23dbdae0' /%3E%3C/svg%3E");
@@ -83,6 +190,10 @@
83190
&[data-string="D"][data-fret="5"],
84191
&[data-string="D"][data-fret="7"],
85192
&[data-string="D"][data-fret="9"],
193+
&[data-string="D"][data-fret="15"],
194+
&[data-string="D"][data-fret="17"],
195+
&[data-string="D"][data-fret="19"],
196+
&[data-string="D"][data-fret="21"],
86197
&[data-string="G"][data-fret="12"],
87198
&[data-string="A"][data-fret="12"] {
88199
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23dbdae0' /%3E%3C/svg%3E");
@@ -168,7 +279,6 @@
168279
}
169280
}
170281

171-
172282
.fretboard__cell--string {
173283
border-right: pxToRem(6) solid var(--nut-color);
174284

@@ -243,6 +353,34 @@
243353
}
244354
}
245355

356+
.fretboard__toggle {
357+
display: block;
358+
text-align: center;
359+
margin: pxToRem($grid-unit * 4) auto 0 auto;
360+
}
361+
362+
.fretboard__toggleButton {
363+
@include chip_button_base();
364+
height: pxToRem(44);
365+
}
366+
367+
.fretboard__toggleButton--active {
368+
background-color: var(--black);
369+
color: var(--offwhite);
370+
}
371+
372+
.fretboard__toggleButton--left {
373+
border-top-right-radius: 0;
374+
border-bottom-right-radius: 0;
375+
border-right-width: calc(var(--border-width-button) / 2);
376+
}
377+
378+
.fretboard__toggleButton--right {
379+
border-top-left-radius: 0;
380+
border-bottom-left-radius: 0;
381+
border-left-width: calc(var(--border-width-button) / 2);
382+
}
383+
246384
.arrowHint {
247385
position: relative;
248386
display: block;

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

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,20 @@ import { Component, Input } from '@angular/core';
22
import { ChordMap, FretMap, Mode, ModeMap } from '../../util/types';
33
import { NotePlaybackService } from '../playback/note-playback.service';
44

5+
export enum FretMode {
6+
twelve = 'twelve',
7+
twentyFour = 'twentyFour',
8+
}
9+
10+
const FretReturner = {
11+
'twelve': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
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]
13+
};
14+
515
@Component({
616
selector: 'app-fretonator',
717
templateUrl: './fretonator.component.html',
8-
styleUrls: ['./fretonator.component.scss'],
18+
styleUrls: ['./fretonator.component.scss']
919
})
1020
export class FretonatorComponent {
1121
@Input() fretMap: FretMap;
@@ -17,7 +27,19 @@ export class FretonatorComponent {
1727
@Input() note: string;
1828
@Input() noteExtenderString: string;
1929

20-
constructor(public playbackService: NotePlaybackService) { }
30+
constructor(public playbackService: NotePlaybackService) {
31+
}
32+
33+
fretMode = FretMode.twelve;
34+
frets = FretReturner[this.fretMode];
35+
36+
37+
get fretModes() {
38+
return FretMode;
39+
}
2140

22-
frets = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
41+
setFretMode(fretMode: FretMode) {
42+
this.fretMode = fretMode;
43+
this.frets = FretReturner[fretMode];
44+
}
2345
}

0 commit comments

Comments
 (0)