Skip to content

Commit 3c456fc

Browse files
whitep4nth3rwhitep4nth3r
authored
Merge pull request #72 from whitep4nth3r/control-panel
Added a new control panel to the fretboard with highlightable 1, 3, 5 degrees of the scale and note names/note numbers toggle
2 parents cf6ac2f + e4bc83e commit 3c456fc

File tree

50 files changed

+1285
-1032
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+1285
-1032
lines changed

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

+151-150
Large diffs are not rendered by default.

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

+5-4
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
ModeSelectorObjects,
1818
NoteToStringAndFretMap,
1919
Octave,
20-
ScaleDegrees,
20+
ScaleDegreeNames,
2121
StandardModePatterns
2222
} from '../../util/constants';
2323
import { JamTracksData } from '../../data/jamTracks';
@@ -330,16 +330,17 @@ export class FretMapService {
330330

331331
const modeMap = origModeMap.map((noteObject, index) => ({
332332
...noteObject,
333-
degree: ScaleDegrees[index]
333+
degree: ScaleDegreeNames[index],
334334
}));
335335

336336
return modeMap
337-
.map((note) =>
337+
.map((note, index) =>
338338
NoteToStringAndFretMap[this.convertNoteToFretMapKey(note)]
339339
.map((thisNote: NoteObject) => ({
340340
...thisNote,
341341
displayName: note.displayName,
342-
degree: note.degree
342+
degree: note.degree,
343+
degreeNumber: index + 1
343344
})))
344345
.flat()
345346
.reduce((acc, curr) => [...acc, curr], [])

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

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<div class="configure__controls">
2+
<div class="button__group">
3+
<button class="fretboard__toggleButton twelve"
4+
[class.fretboard__toggleButton--active]="fretMode === FretModes.twelve"
5+
(click)="setFretModeClick(FretModes.twelve)">12 frets
6+
</button>
7+
<button class="fretboard__toggleButton twentyFour"
8+
[class.fretboard__toggleButton--active]="fretMode === FretModes.twentyFour"
9+
(click)="setFretModeClick(FretModes.twentyFour)">24 frets
10+
</button>
11+
</div>
12+
<div class="button__group">
13+
<button class="fretboard__toggleButton left"
14+
[class.fretboard__toggleButton--active]="orientation === Orientations.left"
15+
(click)="setOrientationClick(Orientations.left)">
16+
Left handed
17+
</button>
18+
<button class="fretboard__toggleButton right"
19+
[class.fretboard__toggleButton--active]="orientation === Orientations.right"
20+
(click)="setOrientationClick(Orientations.right)">
21+
Right handed
22+
</button>
23+
</div>
24+
</div>

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

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
@import "../../../../styles/vars";
2+
@import "../../../../styles/functions";
3+
@import "../../../../styles/mixins";
4+
@import "../../../../styles/typography";
5+
6+
.configure__controls {
7+
display: flex;
8+
flex-direction: column;
9+
}
10+
11+
.button__group {
12+
display: flex;
13+
flex-direction: row;
14+
justify-content: center;
15+
margin-bottom: pxToRem($grid-unit * 2);
16+
17+
&:last-of-type {
18+
margin-bottom: 0;
19+
}
20+
21+
@media screen and (min-width: $screen-med) {
22+
justify-content: flex-end;
23+
}
24+
}
25+
26+
.fretboard__toggleButton {
27+
@include chip_button_base();
28+
padding: pxToRem($grid-unit * 1.5);
29+
border-color: var(--fretboard-toggle-button-border-color);
30+
}
31+
32+
.fretboard__toggleButton--active {
33+
background-color: var(--chip-background-color-active);
34+
color: var(--chip-foreground-color-active);
35+
}
36+
37+
.fretboard__toggleButton:first-of-type {
38+
border-top-right-radius: 0;
39+
border-bottom-right-radius: 0;
40+
border-right-width: calc(var(--border-width-button) / 2);
41+
}
42+
43+
.fretboard__toggleButton:last-of-type {
44+
border-top-left-radius: 0;
45+
border-bottom-left-radius: 0;
46+
border-left-width: calc(var(--border-width-button) / 2);
47+
}

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

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
import { FretboardConfigComponent } from './fretboard-config.component';
3+
import { Component } from '@angular/core';
4+
import { FretboardConfigModule } from './fretboard-config.module';
5+
6+
describe('FretboardConfigComponent', () => {
7+
@Component({
8+
selector: 'app-fretboard-config-spec',
9+
template: `
10+
<app-fretboard-config></app-fretboard-config>
11+
`
12+
})
13+
class FretboardConfigComponentSpec {
14+
}
15+
16+
let component: FretboardConfigComponentSpec;
17+
let fixture: ComponentFixture<FretboardConfigComponentSpec>;
18+
19+
beforeEach(async(() => {
20+
TestBed.configureTestingModule({
21+
declarations: [ FretboardConfigComponentSpec ],
22+
imports: [FretboardConfigModule]
23+
})
24+
.compileComponents();
25+
}));
26+
27+
beforeEach(() => {
28+
fixture = TestBed.createComponent(FretboardConfigComponentSpec);
29+
component = fixture.componentInstance;
30+
fixture.detectChanges();
31+
});
32+
33+
it('should create', () => {
34+
expect(component).toBeTruthy();
35+
});
36+
});

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

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Component, EventEmitter, Input, Output } from '@angular/core';
2+
import { FretModes, Orientations } from '../fretboard/fretboard.component';
3+
4+
@Component({
5+
selector: 'app-fretboard-config',
6+
templateUrl: './fretboard-config.component.html',
7+
styleUrls: ['./fretboard-config.component.scss']
8+
})
9+
export class FretboardConfigComponent {
10+
@Input() fretMode;
11+
@Input() orientation;
12+
13+
@Output() setFretMode = new EventEmitter<FretModes>();
14+
@Output() setOrientation = new EventEmitter<Orientations>();
15+
16+
setFretModeClick(fretMode: FretModes) {
17+
this.setFretMode.emit(fretMode);
18+
}
19+
20+
setOrientationClick(orientation: Orientations) {
21+
this.setOrientation.emit(orientation);
22+
}
23+
24+
get FretModes() {
25+
return FretModes;
26+
}
27+
28+
get Orientations() {
29+
return Orientations;
30+
}
31+
}

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

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { FretboardConfigComponent } from './fretboard-config.component';
4+
5+
6+
@NgModule({
7+
declarations: [FretboardConfigComponent],
8+
exports: [
9+
FretboardConfigComponent
10+
],
11+
imports: [
12+
CommonModule
13+
],
14+
})
15+
export class FretboardConfigModule {
16+
}

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

+45-40
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@
99
[attr.data-string]="string"
1010
[attr.data-fret]="fret"
1111
[attr.data-degree]="(fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive)?.degree"
12-
[attr.data-display-note]="(fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive)?.displayName"
12+
[attr.data-display-note]="noteNameDisplay === NoteDisplays.noteNames ? ((fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive)?.displayName) : ((fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive)?.degreeNumber)"
1313
[attr.data-mode]="mode"
14+
[attr.data-highlight]="highlightedDegrees.has((fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive)?.degree)"
1415
(click)="playbackService.playNote(stringName, fret)"
1516
></div>
1617
</ng-container>
@@ -22,42 +23,18 @@
2223
</ng-container>
2324
</ng-template>
2425

25-
<div class="fretboard__toggle">
26-
<button class="fretboard__toggleButton fretboard__toggleButton--left"
27-
[class.fretboard__toggleButton--active]="fretMode === fretModes.twelve"
28-
(click)="setFretMode(fretModes.twelve)">12 frets
29-
</button>
30-
<button class="fretboard__toggleButton fretboard__toggleButton--middle-left"
31-
[class.fretboard__toggleButton--active]="fretMode === fretModes.twentyFour"
32-
(click)="setFretMode(fretModes.twentyFour)">24 frets
33-
</button>
34-
<button class="fretboard__toggleButton fretboard__toggleButton--middle-right"
35-
[class.fretboard__toggleButton--active]="orientation === orientations.left"
36-
(click)="setOrientation(orientations.left)">
37-
<span class="toggle__shortLabel">LH</span>
38-
<span class="toggle__longLabel">Left handed</span>
39-
</button>
40-
<button class="fretboard__toggleButton fretboard__toggleButton--right"
41-
[class.fretboard__toggleButton--active]="orientation === orientations.right"
42-
(click)="setOrientation(orientations.right)">
43-
<span class="toggle__shortLabel">RH</span>
44-
<span class="toggle__longLabel">Right handed</span>
45-
</button>
46-
</div>
47-
4826
<div class="arrowHint">
4927
<span class="arrowHint__arrow"
50-
[class.fretboard__flip]="orientation === orientations.left"></span>
28+
[class.fretboard__flip]="orientation === Orientations.left"></span>
5129
</div>
5230

5331
<div class="fretboard__container"
54-
[class.fretboard__flip]="orientation === orientations.left"
55-
[class.fretboard__wide]="fretMode === fretModes.twentyFour">
56-
32+
[class.fretboard__flip]="orientation === Orientations.left"
33+
[class.fretboard__wide]="fretMode === FretModes.twentyFour">
5734

5835
<div class="fretboard"
59-
[class.fretboard__leftHanded]="orientation === orientations.left"
60-
[class.fretboard__24]="fretMode === fretModes.twentyFour">
36+
[class.fretboard__leftHanded]="orientation === Orientations.left"
37+
[class.fretboard__24]="fretMode === FretModes.twentyFour">
6138

6239
<ng-container
6340
[ngTemplateOutlet]="string"
@@ -88,22 +65,50 @@
8865
[ngTemplateOutlet]="string"
8966
[ngTemplateOutletContext]="{ stringName: 'E', string: 'E' }"
9067
></ng-container>
91-
9268
</div>
9369

94-
9570
<div class="fretboard"
96-
[class.fretboard__leftHanded]="orientation === orientations.left"
97-
[class.fretboard__24]="fretMode === fretModes.twentyFour">
71+
[class.fretboard__leftHanded]="orientation === Orientations.left"
72+
[class.fretboard__24]="fretMode === FretModes.twentyFour">
9873
<ng-container
9974
[ngTemplateOutlet]="fretboardHelp"
10075
></ng-container>
10176
</div>
10277
</div>
10378

104-
<p class="fretonator__playCta">
105-
<span class="fretonator__playCtaIcon">
106-
<app-speaker-svg></app-speaker-svg>
107-
</span>
108-
Tap notes on the fretboard for sound!
109-
</p>
79+
<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>
92+
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>
102+
</div>
103+
</div>
104+
105+
<div class="controlPanel__section">
106+
<span class="controlPanel__title controlPanel__title--right">Configure fretboard</span>
107+
<app-fretboard-config
108+
[fretMode]="fretMode"
109+
[orientation]="orientation"
110+
(setFretMode)="setFretMode($event)"
111+
(setOrientation)="setOrientation($event)"
112+
></app-fretboard-config>
113+
</div>
114+
</div>

0 commit comments

Comments
 (0)