WIP trying to make tunings work

Author: salmacodecomputerlove

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

@@ -38,32 +38,32 @@
 
     <ng-container
       [ngTemplateOutlet]="string"
-      [ngTemplateOutletContext]="{ stringName: 'e', string: 'E' }"
+      [ngTemplateOutletContext]="strings[5]"
     ></ng-container>
 
     <ng-container
       [ngTemplateOutlet]="string"
-      [ngTemplateOutletContext]="{ stringName: 'B', string: 'B' }"
+      [ngTemplateOutletContext]="strings[4]"
     ></ng-container>
 
     <ng-container
       [ngTemplateOutlet]="string"
-      [ngTemplateOutletContext]="{ stringName: 'G', string: 'G' }"
+      [ngTemplateOutletContext]="strings[3]"
     ></ng-container>
 
     <ng-container
       [ngTemplateOutlet]="string"
-      [ngTemplateOutletContext]="{ stringName: 'D', string: 'D' }"
+      [ngTemplateOutletContext]="strings[2]"
     ></ng-container>
 
     <ng-container
       [ngTemplateOutlet]="string"
-      [ngTemplateOutletContext]="{ stringName: 'A', string: 'A' }"
+      [ngTemplateOutletContext]="strings[1]"
     ></ng-container>
 
     <ng-container
       [ngTemplateOutlet]="string"
-      [ngTemplateOutletContext]="{ stringName: 'E', string: 'E' }"
+      [ngTemplateOutletContext]="strings[0]"
     ></ng-container>
   </div>
 
@@ -111,4 +111,10 @@
       (setOrientation)="setOrientation($event)"
     ></app-fretboard-config>
   </div>
+
+  <div>
+    <button (click)="setTuning(Tunings.standard)">standard</button>
+    <button (click)="setTuning(Tunings.dropD)">drop d</button>
+  </div>
+
 </div>

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

@@ -1,4 +1,14 @@
-import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  ViewChild
+} from '@angular/core';
 import { FretMap, Mode } from '../../../util/types';
 import { NotePlaybackService } from '../../playback/note-playback.service';
 import { AbstractDataService } from '../../abstract-data/abstract-data.service';
@@ -19,6 +29,30 @@ export enum NoteDisplays {
   noteNames = 'noteNames'
 }
 
+enum Tunings {
+  standard = 'standard',
+  dropD = 'dropD'
+}
+
+const TuningReturner = {
+  'standard': [
+    { stringName: 'E', string: 'E' },
+    { stringName: 'A', string: 'A' },
+    { stringName: 'D', string: 'D' },
+    { stringName: 'G', string: 'G' },
+    { stringName: 'B', string: 'B' },
+    { stringName: 'e', string: 'E' }
+  ],
+  'dropD': [
+    { stringName: 'D', string: 'D' },
+    { stringName: 'A', string: 'A' },
+    { stringName: 'D', string: 'D' },
+    { stringName: 'G', string: 'G' },
+    { stringName: 'B', string: 'B' },
+    { stringName: 'e', string: 'E' }
+  ]
+};
+
 const FretReturner = {
   'twelve': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 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]
@@ -27,7 +61,8 @@ const FretReturner = {
 const StorageKeys = {
   fretMode: 'fretonator_fretMode',
   orientation: 'fretonator_orientation',
-  noteNameDisplay: 'fretonator_noteNameDisplay'
+  noteNameDisplay: 'fretonator_noteNameDisplay',
+  tuning: 'fretonator_tuning'
 };
 
 @Component({
@@ -46,19 +81,24 @@ export class FretboardComponent implements OnChanges, OnInit {
   orientation;
   fretMode;
   frets;
+  strings;
+  tuning;
   highlightedDegrees = new Set<ScaleDegrees>();
   noteNameDisplay = NoteDisplays.noteNames;
 
   constructor(public playbackService: NotePlaybackService,
-              private localStorage: AbstractDataService) {
+              private localStorage: AbstractDataService,
+              private cd: ChangeDetectorRef) {
   }
 
   ngOnInit() {
     this.loadPropFromStorage(StorageKeys.fretMode, 'fretMode', FretModes.twelve);
     this.loadPropFromStorage(StorageKeys.orientation, 'orientation', Orientations.right);
     this.loadPropFromStorage(StorageKeys.noteNameDisplay, 'noteNameDisplay', NoteDisplays.noteNames);
+    this.loadPropFromStorage(StorageKeys.tuning, 'tuning', Tunings.standard);
 
     this.toggleHighlight(ScaleDegrees.tonic);
+    this.configureStrings();
     this.configureFretboard();
   }
 
@@ -84,6 +124,14 @@ export class FretboardComponent implements OnChanges, OnInit {
     return NoteDisplays;
   }
 
+  get Tunings() {
+    return Tunings;
+  }
+
+  configureStrings() {
+    this.strings = TuningReturner[this.tuning];
+  }
+
   configureFretboard() {
     this.frets = FretReturner[this.fretMode];
     this.loadExpandedChange.emit(this.fretMode === FretModes.twentyFour);
@@ -101,6 +149,12 @@ export class FretboardComponent implements OnChanges, OnInit {
     this.configureFretboard();
   }
 
+  setTuning(tuning: Tunings) {
+    this.tuning = tuning;
+    this.localStorage.setItem(StorageKeys.tuning, this.tuning);
+    this.configureStrings();
+  }
+
   toggleHighlight(degree: ScaleDegrees) {
     this.highlightedDegrees.has(degree) ? this.highlightedDegrees.delete(degree) : this.highlightedDegrees.add(degree);
   }