feat: real book better chords and mMaj fix

chromatone · Nov 13, 2024 · b45816d · b45816d
1 parent a4280d3
commit b45816d
Show file tree

Hide file tree

Showing 2 changed files with 350 additions and 348 deletions.
diff --git a/content/practice/chord/real-book/RealBook.vue b/content/practice/chord/real-book/RealBook.vue
@@ -1,12 +1,12 @@
 <script setup>
 import jazz from '#/db/chords/real-book.yaml'
-import { noteNames, pitchColor, playChroma, playChromaOnce, stopChroma } from '#/use'
+import { activeChroma, noteNames, pitchColor, playChroma, playChromaOnce, stopChroma } from '#/use'
 import { computed, ref, reactive } from 'vue'
 import { useFuse } from '@vueuse/integrations/useFuse'
 import { Chord, Range } from 'tonal';
 import { useStorage } from '@vueuse/core';
 
-const globalChord = ref('A')
+const globalChord = ref('')
 
 jazz.sort((a, b) => a.Title < b.Title ? -1 : 1)
 
@@ -64,22 +64,24 @@ const { results } = useFuse(searchText, jazz, {
     transition(name="fade" mode="out-in")
       .flex.flex-col.gap-4.p-2(:key="currentSong.Title")
         .flex.gap-2(v-for="line in currentSong.chords" :key="line")
-          .flex-1.flex.gap-1.rounded.overflow-hidden.cursor-pointer(v-for="chord in line" :key="chord") 
+          .flex-1.flex.items-center.gap-1.rounded.overflow-hidden.cursor-pointer(v-for="chord in line" :key="chord") 
             .flex-1.flex.font-bold.text-sm.filter.flex-col(
               @pointerdown="playChroma(Chord.get(ch).chroma, noteNames[Chord.get(ch).tonic])"
               @pointerup="stopChroma(Chord.get(ch).chroma, noteNames[Chord.get(ch).tonic])"
               @pointerleave="stopChroma(Chord.get(ch).chroma, noteNames[Chord.get(ch).tonic])"
               v-for="ch in chord.split(' ')" :key="ch"
               ) 
                 .flex.items-center(:style="{ backgroundColor: pitchColor(noteNames[Chord.get(ch).tonic], 4, 1, .3) }")
-                  .text-md.md-text-lg.p-2.flex-1.hover-brightness-150 {{ ch }}
-                  .flex-1 
+                  .text-md.md-text-lg.p-2.hover-brightness-150 {{ ch }}
+
                   .i-la-info-circle.op-50.hover-op-100.transition(@click="globalChord = ch")
+                  .flex-1 
+
+                  .flex.flex-col.flex-wrap.gap-1
+                    .p-4px.rounded-full.transition(
+                      :style="{ backgroundColor: pitchColor(pitch, activeChroma[pitch] == 1 ? 4 : 2, 1, 1) }"
+                      v-for="pitch in Range.numeric([0, Chord.get(ch).notes.length - 1]).map(Chord.steps(ch)).map(n => noteNames[n])")
 
-                .flex
-                  .py-5px.flex-1(
-                    :style="{ backgroundColor: pitchColor(pitch, 4, 1, 0.5) }"
-                    v-for="pitch in Range.numeric([0, Chord.get(ch).notes.length - 1]).map(Chord.steps(ch)).map(n => noteNames[n])") 
     youtube-embed.my-16(v-if="currentSong.youtube" :video="currentSong.youtube")
     .flex-1
     chord-sheet.z-100.sticky.bottom-2.right-2(