Merge pull request #68 from ishythefishy/left-hand-config

Add a left hand configuration to the fretboard; remember user settings in local storage

Author: whitep4nth3r

angular.json

@@ -62,7 +62,7 @@
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "6kb",
-                  "maximumError": "10kb"
+                  "maximumError": "12kb"
                 }
               ],
               "serviceWorker": true,

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

@@ -22,25 +22,42 @@
 </ng-template>
 
 <div class="fretboard__toggle">
-  <button class="fretboard__toggleButton fretboard__toggleButton--twelve"
+  <button class="fretboard__toggleButton fretboard__toggleButton--left"
           [class.fretboard__toggleButton--active]="fretMode === fretModes.twelve"
           (click)="setFretMode(fretModes.twelve)">12 frets
   </button>
-  <button class="fretboard__toggleButton fretboard__toggleButton--twentyFour"
+  <button class="fretboard__toggleButton fretboard__toggleButton--middle-left"
           [class.fretboard__toggleButton--active]="fretMode === fretModes.twentyFour"
           (click)="setFretMode(fretModes.twentyFour)">24 frets
   </button>
+  <button class="fretboard__toggleButton fretboard__toggleButton--middle-right"
+          [class.fretboard__toggleButton--active]="orientation === orientations.left"
+          (click)="setOrientation(orientations.left)">
+    <span class="toggle__shortLabel">LH</span>
+    <span class="toggle__longLabel">Left handed</span>
+  </button>
+  <button class="fretboard__toggleButton fretboard__toggleButton--right"
+          [class.fretboard__toggleButton--active]="orientation === orientations.right"
+          (click)="setOrientation(orientations.right)">
+    <span class="toggle__shortLabel">RH</span>
+    <span class="toggle__longLabel">Right handed</span>
+  </button>
 </div>
 
 <div class="arrowHint">
-  <span class="arrowHint__arrow"></span>
+  <span class="arrowHint__arrow"
+        [class.fretboard__flip]="orientation === orientations.left"></span>
 </div>
 
 <div class="fretboard__container"
+     [class.fretboard__flip]="orientation === orientations.left"
      [class.fretboard__wide]="fretMode === fretModes.twentyFour">
 
+
   <div class="fretboard"
+       [class.fretboard__leftHanded]="orientation === orientations.left"
        [class.fretboard__24]="fretMode === fretModes.twentyFour">
+
     <ng-container
       [ngTemplateOutlet]="string"
       [ngTemplateOutletContext]="{ stringName: 'e', string: 'E' }"
@@ -70,9 +87,12 @@
       [ngTemplateOutlet]="string"
       [ngTemplateOutletContext]="{ stringName: 'E', string: 'E' }"
     ></ng-container>
+
   </div>
 
+
   <div class="fretboard"
+       [class.fretboard__leftHanded]="orientation === orientations.left"
        [class.fretboard__24]="fretMode === fretModes.twentyFour">
     <ng-container
       [ngTemplateOutlet]="fretboardHelp"

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

@@ -3,21 +3,29 @@
 @import "../../../../styles/mixins";
 @import "../../../../styles/typography";
 
+$note-height: 36;
+
 .fretboard__container {
   margin-top: pxToRem($grid-unit * 1);
   max-width: $fretonator_max_width;
   margin-left: auto;
   margin-right: auto;
   padding-right: 0;
-  padding-left: pxToRem($grid-unit * 4);
+  padding-left: pxToRem($grid-unit * 5);
   padding-bottom: pxToRem($grid-unit * 4);
-  padding-top: pxToRem($grid-unit * 9);
+  padding-top: pxToRem($grid-unit * 7);
   overflow-x: auto;
   transition: max-width 0.09s ease-in-out;
 
   &.fretboard__wide {
     max-width: $fretonator_max_width-wide;
   }
+
+  &.fretboard__flip {
+    padding-left: 0;
+    padding-right: pxToRem($grid-unit * 5);
+    direction: rtl;
+  }
 }
 
 .fretboard__help {
@@ -138,11 +146,21 @@
       transform: translate(-50%, calc(50% - 1px));
     }
   }
+
+  &.fretboard__leftHanded {
+    .fretboard__cell--string {
+      &:nth-last-child(-n + 25):after {
+        transform: translate(50%, calc(50% - 1px));
+      }
+    }
+  }
 }
 
 .fretboard {
   display: grid;
   grid-template-columns: 32px repeat(12, minmax(50px, 1fr));
+  padding-top: pxToRem($grid-unit * 3);
+  padding-bottom: pxToRem($grid-unit * 3);
 
   &.fretboard__24 {
     grid-template-columns: 32px repeat(24, minmax(50px, 1fr));
@@ -235,9 +253,9 @@
 
   &:after {
     content: attr(data-display-note);
-    height: var(--note-height);
-    width: var(--note-height);
-    line-height: var(--note-height);
+    height: pxToRem($note-height);
+    width: pxToRem($note-height);
+    line-height: pxToRem($note-height);
     left: 50%;
     right: unset;
     box-sizing: border-box;
@@ -252,13 +270,7 @@
     transition-duration: 0.1s;
     transition-property: line-height, height, width, opacity;
     transition-timing-function: ease-in-out;
-  }
-
-  &:hover:after,
-  &:active:after {
-    height: var(--note-height-hover);
-    width: var(--note-height-hover);
-    line-height: var(--note-height-hover);
+    direction: ltr;
   }
 
   &:nth-child(-n + 13):after {
@@ -317,15 +329,15 @@
 
   &:after {
     content: attr(data-string-name);
-    height: var(--note-height);
-    width: var(--note-height);
+    height: pxToRem($note-height);
+    width:  pxToRem($note-height);
     left: 0;
     right: unset;
     box-sizing: border-box;
     border-radius: 50%;
     transform: translate(-50%, 50%);
     color: var(--string-color);
-    line-height: var(--note-height);
+    line-height: pxToRem($note-height);
     text-align: center;
     font-weight: var(--font-weight-bold);
     font-family: var(--font-family-main);
@@ -381,6 +393,11 @@
 .arrowHint {
   position: relative;
   display: block;
+  margin-top: pxToRem($grid-unit * 4);
+
+  @media screen and (min-width: 712px) {
+    display: none;
+  }
 }
 
 .arrowHint__arrow {
@@ -395,8 +412,11 @@
     content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 512 512'%3E%3Cpath fill='%233993dd' d='M319.1 217c20.2 20.2 19.9 53.2-.6 73.7s-53.5 20.8-73.7.6l-190-190c-20.1-20.2-19.8-53.2.7-73.7S109 6.8 129.1 27l190 190z'/%3E%3Cpath fill='%233993dd' d='M319.1 290.5c20.2-20.2 19.9-53.2-.6-73.7s-53.5-20.8-73.7-.6l-190 190c-20.2 20.2-19.9 53.2.6 73.7s53.5 20.8 73.7.6l190-190z'/%3E%3C/svg%3E");
   }
 
-  @media screen and (min-width: 712px) {
-    display: none;
+
+  &.fretboard__flip {
+    right: unset;
+    left: 0;
+    transform: rotate(180deg);
   }
 }
 
@@ -428,18 +448,50 @@
   height: pxToRem(44);
 }
 
+.toggle__shortLabel {
+  display: inline;
+  font-weight: inherit;
+  padding-left: pxToRem($grid_unit * 1.5);
+  padding-right: pxToRem($grid_unit * 1.5);
+
+  @media screen and (min-width: $screen-med) {
+    display: none;
+  }
+}
+
+.toggle__longLabel {
+  display: none;
+  font-weight: inherit;
+
+  @media screen and (min-width: $screen-med) {
+    display: inline;
+  }
+}
+
 .fretboard__toggleButton--active {
   background-color: var(--black);
   color: var(--offwhite);
 }
 
-.fretboard__toggleButton--twelve {
+.fretboard__toggleButton--left {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-right-width: calc(var(--border-width-button) / 2);
 }
 
-.fretboard__toggleButton--twentyFour {
+.fretboard__toggleButton--middle-left {
+  border-radius: 0;
+  border-right-width: calc(var(--border-width-button) / 2);
+  border-left-width: 0;
+}
+
+.fretboard__toggleButton--middle-right {
+  border-radius: 0;
+  border-right-width: 0;
+  border-left-width: calc(var(--border-width-button) / 2);
+}
+
+.fretboard__toggleButton--right {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left-width: calc(var(--border-width-button) / 2);
@@ -451,3 +503,29 @@
   width: pxToRem($grid-unit * 2);
   margin-right: pxToRem($grid-unit);
 }
+
+.fretboard__leftHanded {
+  .fretboard__cell {
+    border-left: var(--fret-width-base) solid var(--fret-color);
+    border-right: unset;
+  }
+
+  .fretboard__cell--string {
+    border-left: pxToRem(6) solid var(--nut-color);
+    border-right: unset;
+
+    &:after {
+      transform: translate(50%, 50%);
+    }
+
+    &:nth-child(-n + 13):after {
+      transform: translate(50%, 6px);
+    }
+
+    &:nth-last-child(-n + 13):after {
+      bottom: 0;
+      top: unset;
+      transform: translate(50%, calc(50% - 1px));
+    }
+  }
+}

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

@@ -7,8 +7,10 @@ import { By } from '@angular/platform-browser';
 
 describe('FretboardComponent', () => {
   const selectors = {
-    twelveButton: By.css('.fretboard__toggleButton--twelve'),
-    twentyFourButton: By.css('.fretboard__toggleButton--twentyFour')
+    twelveButton: By.css('.fretboard__toggleButton--left'),
+    twentyFourButton: By.css('.fretboard__toggleButton--middle-left'),
+    rightButton: By.css('.fretboard__toggleButton--right'),
+    leftButton: By.css('.fretboard__toggleButton--middle-right')
   };
 
   const classNames = {
@@ -68,4 +70,26 @@ describe('FretboardComponent', () => {
       expect(twelveButton.classes[classNames.toggleFretButtonSelected]).toBeTruthy();
     });
   });
+
+  describe('setOrientation()', () => {
+    let leftButton: DebugElement;
+    let rightButton: DebugElement;
+
+    beforeEach(() => {
+      leftButton = fixture.debugElement.query(selectors.leftButton);
+      rightButton = fixture.debugElement.query(selectors.rightButton);
+    });
+
+    it('changes the fret mode to left orientation when the button is clicked', () => {
+      leftButton.nativeElement.click();
+      fixture.detectChanges();
+      expect(leftButton.classes[classNames.toggleFretButtonSelected]).toBeTruthy();
+    });
+
+    it('changes the fret mode to right orientation when the button is clicked', () => {
+      rightButton.nativeElement.click();
+      fixture.detectChanges();
+      expect(rightButton.classes[classNames.toggleFretButtonSelected]).toBeTruthy();
+    });
+  })
 });