new chords, handle chords with fingerings higher than 5th fret

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chordvuer",
-  "version": "0.0.0",
+  "version": "0.0.4",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

src/chords.js

@@ -1,4 +1,14 @@
 export const chords = {
+  "A♭5": {
+    name: "G♯5 / A♭5",
+    fingers: [
+      {finger: 1, fret: 4, strings: [6]},
+      {finger: 3, fret: 6, strings: [5]},
+      {finger: 4, fret: 6, strings: [4]}
+    ],
+    open:  [],
+    closed: [3,2,1]
+  },
   A: {
     name: "A",
     fingers: [
@@ -9,6 +19,25 @@ export const chords = {
     open: [5,1],
     closed: [6]
   },
+  A5_1: {
+    name: "A5",
+    fingers: [
+      {finger: 1, fret: 2, strings: [4]},
+      {finger: 2, fret: 2, strings: [3]}
+    ],
+    open: [5],
+    closed: [6, 2, 1]
+  },
+  A5_2: {
+    name: "A5",
+    fingers: [
+      {finger: 1, fret: 5, strings: [6]},
+      {finger: 3, fret: 7, strings: [5]},
+      {finger: 4, fret: 7, strings: [4]}
+    ],
+    open: [],
+    closed: [3,2,1]
+  },
   A7: {
     name: "A Dominant 7",
     fingers: [
@@ -18,7 +47,7 @@ export const chords = {
     open: [5,3,1],
     closed: [6]
   },
-    Am: {
+  Am: {
       name: "A Minor",
       fingers: [
         {finger: 2, fret: 2, strings: [4]},
@@ -28,7 +57,7 @@ export const chords = {
       open: [5,1],
       closed: [6]
     },
-  B1: {
+  B_1: {
     name: "B",
     fingers: [
       {finger: 1, fret: 2, strings: [1,2,3,4,5]},
@@ -39,7 +68,7 @@ export const chords = {
     open: [],
     closed: [6]
   },
-  B2: {
+  B_2: {
     name: "B",
     fingers: [
       {finger: 1, fret: 2, strings: [1]},
@@ -49,6 +78,26 @@ export const chords = {
     open: [],
     closed: [6,5,4]
   },
+  B5_1: {
+    name: "B5",
+    fingers: [
+      {finger: 1, fret: 2, strings: [5]},
+      {finger: 3, fret: 4, strings: [4]},
+      {finger: 4, fret: 4, strings: [3]}
+    ],
+    open: [],
+    closed: [6,2,1]
+  },
+  B5_2: {
+    name: "B5",
+    fingers: [
+      {finger: 1, fret: 7, strings: [6]},
+      {finger: 3, fret: 9, strings: [5]},
+      {finger: 4, fret: 9, strings: [4]}
+    ],
+    open: [],
+    closed: [3,2,1]
+  },
   B7: {
     name: "B Dominant 7",
     fingers: [
@@ -70,6 +119,16 @@ export const chords = {
     open: [3,1],
     closed: [6]
   },
+  C5: {
+    name: "C5",
+    fingers: [
+      {finger: 1, fret: 3, strings: [5]},
+      {finger: 3, fret: 5, strings: [4]},
+      {finger: 4, fret: 5, strings: [3]}
+    ],
+    open: [],
+    closed: [6,2,1]
+  },
   C7: {
     name: "C Dominant 7",
     fingers: [
@@ -91,6 +150,24 @@ export const chords = {
     open: [4],
     closed: [6,5]
   },
+  D5_1: {
+    name: "D5",
+    fingers: [
+      {finger: 1, fret: 2, strings: [3]}
+    ],
+    open: [4],
+    closed: [6,5,2,1]
+  },
+  D5_2: {
+    name: "D5",
+    fingers: [
+      {finger: 1, fret: 5, strings: [5]},
+      {finger: 3, fret: 7, strings: [4]},
+      {finger: 4, fret: 7, strings: [3]}
+    ],
+    open: [],
+    closed: [6,2,1]
+  },
   D7: {
     name: "D Dominant 7",
     fingers: [
@@ -121,6 +198,25 @@ export const chords = {
     open: [6, 2, 1],
     closed: []
   },
+  E5_1: {
+    name: "E5",
+    fingers: [
+      {finger: 1, fret: 2, strings: [5]},
+      {finger: 2, fret: 2, strings: [4]}
+    ],
+    open: [6],
+    closed: [3,2,1]
+  },
+  E5_2: {
+    name: "E5",
+    fingers: [
+      {finger: 1, fret: 7, strings: [5]},
+      {finger: 3, fret: 9, strings: [4]},
+      {finger: 4, fret: 9, strings: [3]}
+    ],
+    open: [],
+    closed: [6,2,1]
+  },
   E7: {
     name: "E Dominant 7",
     fingers: [
@@ -149,6 +245,36 @@ export const chords = {
     open: [],
     closed: [6,5]
   },
+  "F5": {
+    name: "F5",
+    fingers: [
+      {finger: 1, fret: 1, strings: [6]},
+      {finger: 3, fret: 3, strings: [5]},
+      {finger: 4, fret: 3, strings: [4]}
+    ],
+    open: [],
+    closed: [3,2,1]
+  },
+  "F♯5": {
+    name: "F♯5 / G♭5",
+    fingers: [
+      {finger: 1, fret: 2, strings: [6]},
+      {finger: 3, fret: 4, strings: [5]},
+      {finger: 4, fret: 4, strings: [4]}
+    ],
+    open: [],
+    closed: [3,2,1]
+  },
+  "G♭5": {
+    name: "F♯5 / G♭5",
+    fingers: [
+      {finger: 1, fret: 2, strings: [6]},
+      {finger: 3, fret: 4, strings: [5]},
+      {finger: 4, fret: 4, strings: [4]}
+    ],
+    open: [],
+    closed: [3,2,1]
+  },
   G: {
     name: "G",
     fingers: [
@@ -159,6 +285,26 @@ export const chords = {
     open: [3, 4],
     closed: []
   },
+  "G♯5": {
+    name: "G♯5 / A♭5",
+    fingers: [
+      {finger: 1, fret: 4, strings: [6]},
+      {finger: 3, fret: 6, strings: [5]},
+      {finger: 4, fret: 6, strings: [4]}
+    ],
+    open:  [],
+    closed: [3,2,1]
+  },
+  G5: {
+    name: "G5",
+    fingers: [
+      {finger: 1, fret: 3, strings: [6]},
+      {finger: 3, fret: 5, strings: [5]},
+      {finger: 4, fret: 5, strings: [4]}
+    ],
+    open: [],
+    closed: [3,2,1]
+  },
   G7: {
     name: "G Dominant 7",
     fingers: [
@@ -169,4 +315,20 @@ export const chords = {
     open: [4,3,2],
     closed: []
   }
+}
+
+export const powerchords = {
+  "A♭5": chords["A♭5"],
+  A5_1: chords.A5_1,
+  A5_2: chords.A5_2,
+  B5_1: chords.B5_1,
+  B5_2: chords.B5_2,
+  C5: chords.C5,
+  D5_1: chords.D5_1,
+  D5_2: chords.D5_2,
+  E5_1: chords.E5_1,
+  E5_2: chords.E5_2,
+  F: chords.F,
+  "F♯5": chords["F♯5"], 
+  "G♭5": chords["G♭5"]
 }

src/components/GuitarChord.vue

@@ -58,7 +58,8 @@
         this.applyTitle(newVal, oldVal)
         this.applyFingers(newVal)
         this.applyStrike(newVal)
-        this.applyNotes(newVal) 
+        this.applyNotes(newVal)
+        this.applyFrets(newVal)
       },
       async applyTitle(newVal, oldVal) {
         const svg = document.getElementById(this.id)
@@ -70,12 +71,29 @@
           this.fadein(name)
         }
       },
+      async applyFrets(newVal) {        
+        const svg = document.getElementById(this.id)
+        const els = Array.prototype.slice.call(svg.getElementsByClassName("fret-number"))
+
+        const offset = this.fretOffset(newVal)
+
+        const newlbl = [1,2,3,4,5].map((x) => {
+          if (offset == 0) return ""
+          else return `${x + offset}`
+        })
+
+        els.forEach((el, i) => {
+          if (el.textContent != newlbl[i]) this.swaptxt(el, newlbl[i])
+        })
+      },
       async applyFingers(newVal) {
         [1,2,3,4].forEach((x) => this.applyFinger(x, newVal))
       },
       async applyFinger(fingerno, newVal) {
         const svg = document.getElementById(this.id)
 
+        const offset = this.fretOffset(newVal)
+
         const prevshp = svg.querySelectorAll(`circle.finger-${fingerno}`)
         const prevtxt = svg.querySelectorAll(`text.finger-${fingerno}`)
 
@@ -86,7 +104,7 @@
           prevtxt.forEach((x) => this.fadeout(x))
         } else if (prevshp.length == 0 && thisfinger) {    // fade in
           thisfinger.strings.map((x) => {
-            const [c, l] = this.makeFinger(fingerno, x, thisfinger.fret)
+            const [c, l] = this.makeFinger(fingerno, x, thisfinger.fret - offset)
             svg.appendChild(c)
             svg.appendChild(l)
             this.fadein(c)
@@ -103,7 +121,7 @@
           // fade in strings, ex. 1st listed
           if (thisfinger.strings.length > 1) {
             thisfinger.strings.slice(1).map((x) => {
-              const [c, l] = this.makeFinger(fingerno, x, thisfinger.fret)
+              const [c, l] = this.makeFinger(fingerno, x, thisfinger.fret - offset)
               svg.appendChild(c)
               svg.appendChild(l)
               this.fadein(c)
@@ -112,8 +130,8 @@
           }
 
           // move first listed
-          this.move(prevshp[0], thisfinger.strings[0], thisfinger.fret)
-          this.move(prevtxt[0], thisfinger.strings[0], thisfinger.fret)
+          this.move(prevshp[0], thisfinger.strings[0], thisfinger.fret - offset)
+          this.move(prevtxt[0], thisfinger.strings[0], thisfinger.fret - offset)
         } 
       },
       makeFinger(fingerno, string, fret) {
@@ -158,6 +176,7 @@
         const els = Array.prototype.slice.call(svg.getElementsByClassName("note"))
 
         const newlbl = [1,2,3,4,5,6].map((x) => {
+          if (newVal.closed.includes(x)) return ""
           const z = newVal.fingers.filter((y) => y.strings.includes(x)).map((y) => y.fret)
           if (z.length == 0) return this.note(x, 0)
           else return this.note(x, Math.max(...z))
@@ -215,6 +234,11 @@
         const ys = this.seq(pos1[1], pos2[1], steps)
         return xs.map((e, i) => [e, ys[i]])
       },
+      fretOffset(x) {
+        const frets = x.fingers.map((z) => z.fret)
+        if (Math.max(...frets) <= 5) return 0
+        else return (Math.min(...frets) - 2)
+      },
       async fadeout(el) {
         for (var i = 0; i < this.frames; i++) {
           await this.sleep(this.frameLength)
@@ -278,6 +302,12 @@
     <line class="fret" x1="1" y1="7"   x2="6" y2="7" />
     <line class="fret" x1="1" y1="8.5" x2="6" y2="8.5" />
 
+    <text class="fret-number" x="0.55" y="1.75" text-anchor="middle" alignment-baseline="middle">1</text>
+    <text class="fret-number" x="0.55" y="3.25" text-anchor="middle" alignment-baseline="middle">2</text>
+    <text class="fret-number" x="0.55" y="4.75" text-anchor="middle" alignment-baseline="middle">3</text>
+    <text class="fret-number" x="0.55" y="6.25" text-anchor="middle" alignment-baseline="middle">4</text>
+    <text class="fret-number" x="0.55" y="7.75" text-anchor="middle" alignment-baseline="middle">5</text>
+
     <line class="string string-high-e" x1="6" y1="1" x2="6" y2="8.5" />
     <line class="string string-b"      x1="5" y1="1" x2="5" y2="8.5" />
     <line class="string string-g"      x1="4" y1="1" x2="4" y2="8.5" />
@@ -352,6 +382,10 @@
     fill: #648FFF;
   }
 
+  :deep(text.fret-number) {
+    font-size: 2%;
+  }
+
   :deep(text.finger) {
     font-size: 2%;
     font-weight: bold;