Skip to content

Commit

Permalink
Merge pull request #74 from whitep4nth3r/tuning-configurator
Browse files Browse the repository at this point in the history 
New tuning configurator - tune the guitar to DADGAD and drop D as well as standard
  • Loading branch information
@whitep4nth3r
whitep4nth3r authored Jul 9, 2020
2 parents 3c456fc + b887062 commit 6a8eddf
Show file tree
Hide file tree
Showing 16 changed files with 374 additions and 246 deletions.
2 changes: 1 addition & 1 deletion angular.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "12kb"
"maximumError": "12.5kb"
}
],
"serviceWorker": true,
Expand Down
2 changes: 0 additions & 2 deletions ...fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@
[class.fretboard__toggleButton--active]="fretMode === FretModes.twentyFour"
(click)="setFretModeClick(FretModes.twentyFour)">24 frets
</button>
</div>
<div class="button__group">
<button class="fretboard__toggleButton left"
[class.fretboard__toggleButton--active]="orientation === Orientations.left"
(click)="setOrientationClick(Orientations.left)">
Expand Down
17 changes: 8 additions & 9 deletions ...fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,14 @@
&:last-of-type {
margin-bottom: 0;
}

@media screen and (min-width: $screen-med) {
justify-content: flex-end;
}
}

.fretboard__toggleButton {
@include chip_button_base();
padding: pxToRem($grid-unit * 1.5);
border-color: var(--fretboard-toggle-button-border-color);
border-radius: 0;
padding: pxToRem($grid-unit * 1.5);
border-right-width: 0;
}

.fretboard__toggleButton--active {
Expand All @@ -35,13 +33,14 @@
}

.fretboard__toggleButton:first-of-type {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: var(--border-radius-chip);
border-bottom-left-radius: var(--border-radius-chip);
border-right-width: calc(var(--border-width-button) / 2);
}

.fretboard__toggleButton:last-of-type {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: var(--border-radius-chip);
border-bottom-right-radius: var(--border-radius-chip);
border-left-width: calc(var(--border-width-button) / 2);
border-right-width: var(--border-width-button);
}
147 changes: 66 additions & 81 deletions apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,3 @@
<ng-template #string let-stringName="stringName" let-string="string">
<ng-container *ngFor="let fret of frets">
<div
class="fretboard__cell"
[class.learn__theme]="configuration === 'learn'"
[class.fretboard__cell--string]="fret === 0"
[class.fretboard__cell--selected]="fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive"
[attr.data-string-name]="fret === 0 ? stringName : null"
[attr.data-string]="string"
[attr.data-fret]="fret"
[attr.data-degree]="(fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive)?.degree"
[attr.data-display-note]="noteNameDisplay === NoteDisplays.noteNames ? ((fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive)?.displayName) : ((fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive)?.degreeNumber)"
[attr.data-mode]="mode"
[attr.data-highlight]="highlightedDegrees.has((fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive)?.degree)"
(click)="playbackService.playNote(stringName, fret)"
></div>
</ng-container>
</ng-template>

<ng-template #fretboardHelp>
<ng-container *ngFor="let fret of frets">
<span class="fretboard__help" [attr.data-fret]="fret"></span>
</ng-container>
</ng-template>

<div class="arrowHint">
<span class="arrowHint__arrow"
[class.fretboard__flip]="orientation === Orientations.left"></span>
Expand All @@ -36,79 +11,89 @@
[class.fretboard__leftHanded]="orientation === Orientations.left"
[class.fretboard__24]="fretMode === FretModes.twentyFour">

<ng-container
[ngTemplateOutlet]="string"
[ngTemplateOutletContext]="{ stringName: 'e', string: 'E' }"
></ng-container>

<ng-container
[ngTemplateOutlet]="string"
[ngTemplateOutletContext]="{ stringName: 'B', string: 'B' }"
></ng-container>

<ng-container
[ngTemplateOutlet]="string"
[ngTemplateOutletContext]="{ stringName: 'G', string: 'G' }"
></ng-container>

<ng-container
[ngTemplateOutlet]="string"
[ngTemplateOutletContext]="{ stringName: 'D', string: 'D' }"
></ng-container>

<ng-container
[ngTemplateOutlet]="string"
[ngTemplateOutletContext]="{ stringName: 'A', string: 'A' }"
></ng-container>

<ng-container
[ngTemplateOutlet]="string"
[ngTemplateOutletContext]="{ stringName: 'E', string: 'E' }"
></ng-container>
<ng-container *ngFor="let string of strings, let stringIndex = index">
<ng-container *ngFor="let fret of frets">
<div
class="fretboard__cell"
[class.learn__theme]="configuration === FretboardConfigurations.learn"
[class.fretboard__cell--string]="fret === 0"
[class.fretboard__cell--selected]="fretMap | getFretFromFretMap: string.name:fret:stringNamesAreCaseSensitive"
[attr.data-string-name]="fret === 0 ? string.name : null"
[attr.data-string]="string.note"
[attr.data-fret]="fret"
[attr.data-string-number]="stringIndex + 1"
[attr.data-degree]="(fretMap | getFretFromFretMap: string.name:fret:stringNamesAreCaseSensitive)?.degree"
[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.frequencyMarker, fret)"
></div>
</ng-container>
</ng-container>
</div>

<div class="fretboard"
[class.fretboard__leftHanded]="orientation === Orientations.left"
[class.fretboard__24]="fretMode === FretModes.twentyFour">
<ng-container
[ngTemplateOutlet]="fretboardHelp"
></ng-container>
<ng-container *ngFor="let fret of frets">
<span class="fretboard__help" [attr.data-fret]="fret"></span>
</ng-container>
</div>
</div>

<div class="controlPanel">
<div class="controlPanel__section">
<span class="controlPanel__title" *ngIf="!(mode | displayScaleDegrees)">Configure scale degrees</span>
<span class="controlPanel__title" *ngIf="mode | displayScaleDegrees">Highlight scale degrees</span>
<app-scale-degrees
*ngIf="mode | displayScaleDegrees"
[tonicActive]="highlightedDegrees.has(ScaleDegrees.tonic)"
[mediantActive]="highlightedDegrees.has(ScaleDegrees.mediant)"
[dominantActive]="highlightedDegrees.has(ScaleDegrees.dominant)"
(setTonicHighlight)="toggleHighlight(ScaleDegrees.tonic)"
(setMediantHighlight)="toggleHighlight(ScaleDegrees.mediant)"
(setDominantHighlight)="toggleHighlight(ScaleDegrees.dominant)"
></app-scale-degrees>
<div class="controlPanel__row" *ngIf="configuration !== FretboardConfigurations.learn">
<div class="controlPanel__section">
<h4 class="controlPanel__title">Highlight scale degrees</h4>
<app-scale-degrees
[tonicActive]="highlightedDegrees.has(ScaleDegrees.tonic)"
[mediantActive]="highlightedDegrees.has(ScaleDegrees.mediant)"
[dominantActive]="highlightedDegrees.has(ScaleDegrees.dominant)"
(setTonicHighlight)="toggleHighlight(ScaleDegrees.tonic)"
(setMediantHighlight)="toggleHighlight(ScaleDegrees.mediant)"
(setDominantHighlight)="toggleHighlight(ScaleDegrees.dominant)"
></app-scale-degrees>
</div>
<div class="controlPanel__section">
<h4 class="controlPanel__title">Scale degrees display</h4>
<div class="button__group button__group--right">
<button class="fretboard__toggleButton"
[class.fretboard__toggleButton--active]="noteNameDisplay === NoteDisplays.noteNames"
(click)="toggleNoteDisplay(NoteDisplays.noteNames)">Note names
</button>
<button (click)="toggleNoteDisplay(NoteDisplays.numbers)"
class="fretboard__toggleButton"
[class.fretboard__toggleButton--active]="noteNameDisplay === NoteDisplays.numbers">Note numbers
</button>
</div>

<div class="button__group">
<button class="fretboard__toggleButton"
[class.fretboard__toggleButton--active]="noteNameDisplay === NoteDisplays.noteNames"
(click)="toggleNoteDisplay(NoteDisplays.noteNames)">Note names
</button>
<button (click)="toggleNoteDisplay(NoteDisplays.numbers)"
class="fretboard__toggleButton"
[class.fretboard__toggleButton--active]="noteNameDisplay === NoteDisplays.numbers">Note numbers
</button>
</div>
</div>

<div class="controlPanel__section">
<span class="controlPanel__title controlPanel__title--right">Configure fretboard</span>
<div class="controlPanel__column">
<h4 class="controlPanel__title">Fretboard</h4>
<app-fretboard-config
[fretMode]="fretMode"
[orientation]="orientation"
(setFretMode)="setFretMode($event)"
(setOrientation)="setOrientation($event)"
></app-fretboard-config>
</div>

<div class="controlPanel__column" *ngIf="configuration !== FretboardConfigurations.learn">
<h4 class="controlPanel__title">Guitar tuning</h4>
<div class="fretboard__tuningGroup">
<button class="fretboard__changeTuning"
[class.fretboard__changeTuning--active]="tuning === Tunings.standard"
(click)="setTuning(Tunings.standard)">Standard
</button>
<button class="fretboard__changeTuning"
[class.fretboard__changeTuning--active]="tuning === Tunings.dropd"
(click)="setTuning(Tunings.dropd)">Drop D
</button>
<button class="fretboard__changeTuning"
[class.fretboard__changeTuning--active]="tuning === Tunings.dadgad"
(click)="setTuning(Tunings.dadgad)">DADGAD
</button>
</div>
</div>
</div>
103 changes: 59 additions & 44 deletions apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -326,14 +326,6 @@ $note-height: 36;
color: var(--note-color-dominant);
}
}

&[data-mode="majorPentatonic"],
&[data-mode="minorPentatonic"] {
&:after {
background-color: var(--note-background) !important;
color: var(--note-color) !important;
}
}
}

.fretboard__cell--string {
Expand Down Expand Up @@ -484,45 +476,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 {
Expand All @@ -547,6 +535,33 @@ $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;
max-width: $screen-med;
text-align: center;
}

.fretboard__changeTuning {
@include chip_button_base;
margin-left: pxToRem($grid-unit);
margin-right: pxToRem($grid-unit);
margin-bottom: pxToRem($grid-unit);
border-color: var(--fretboard-toggle-button-border-color);
}

.fretboard__changeTuning--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);
Expand Down
Loading

0 comments on commit 6a8eddf

Please sign in to comment.