move scale note utils to utils and implement ScaleInfo

Author: caged

src/frets/index.js

@@ -1,20 +1,5 @@
 import { Interval, Note, Scale } from "tonal";
-
-function getScaleNoteIntervalMap(scale) {
-  return scale.notes.reduce((map, note, index) => {
-    map[note] = scale.intervals[index];
-    return map;
-  }, {});
-}
-
-// Create a map of note chromas to scale note names for label normalization
-function getScaleNoteLabelMap(scale) {
-  return scale.notes.reduce((map, note) => {
-    const noteObj = Note.get(note);
-    map[noteObj.chroma] = note;
-    return map;
-  }, {});
-}
+import { getScaleNoteIntervalMap, getScaleNoteLabelMap } from '$lib/utils';
 
 export default function frets(
   tuning = ["E2", "A2", "D3", "G3", "B3", "E4"],

src/lib/FretBoard.svelte

@@ -2,7 +2,7 @@
   import { onMount } from "svelte";
   import { scaleBand, scalePoint, scaleLinear } from "d3-scale";
   import { range } from "d3-array";
-  import Note from "./Note.svelte";
+  import FretNote from "./FretNote.svelte";
 
   let { fretData } = $props();
 
@@ -58,7 +58,7 @@
             <g
               transform="translate({fretX(stringNote.fret) +
                 (fretX.bandwidth() / 2 - margin.left)}, 0)">
-              <Note note={stringNote} />
+              <FretNote note={stringNote} />
             </g>
           {/each}
         </g>

src/lib/Note.svelte src/lib/FretNote.sveltesrc/lib/Note.svelte renamed to src/lib/FretNote.svelte

@@ -1,5 +1,9 @@
 <script>
   let { note } = $props();
+
+  $effect(() => {
+    console.log("FretNote note:", note);
+  });
 </script>
 
 <g

src/lib/ScaleInfo.svelte

@@ -2,9 +2,21 @@
   import { onMount } from "svelte";
   import { scalePoint, range } from "d3";
   import { Note } from "tonal";
+  import FretNote from "./FretNote.svelte";
 
   let { scale } = $props();
 
+  let notes = $derived(
+    scale.notes.map((note, index) => {
+      const noteObj = Note.get(note);
+      return {
+        ...noteObj,
+        label: noteObj.name.replace("b", "♭").replace("#", "♯"),
+        interval: scale.intervals[index],
+      };
+    }),
+  );
+
   let container = $state(null);
   let width = $state(0);
   let height = $state(45);
@@ -16,8 +28,6 @@
       .range([margin.left, width - margin.right]),
   );
 
-  const notes = $derived(scale.notes.map((n) => Note.get(n)));
-
   onMount(() => {
     width = container.clientWidth;
     height = 45;
@@ -28,21 +38,13 @@
   <svg class="h-12" viewBox="0 0 {width} {height}">
     {#each notes as note, i}
       <g transform="translate({dotX(i)}, {20})">
-        <circle
-          r="12"
-          class={note.interval === "1P" ? "fill-red-500" : "fill-green-500"} />
-        <text
-          text-anchor="middle"
-          dy="4"
-          font-size="10"
-          class="text-white"
-          fill="currentColor">{note.name}</text>
+        <FretNote {note} />
         <text
           text-anchor="middle"
           dy="25"
           font-size="10"
           class="text-black"
-          fill="currentColor">{scale.intervals[i]}</text>
+          fill="currentColor">{note.interval}</text>
       </g>
     {/each}
   </svg>

src/lib/utils.js

@@ -1,7 +1,26 @@
+import { Note } from "tonal";
+
 export const delay = (duration, value) => {
   return new Promise(function (resolve) {
     setTimeout(function () {
       resolve(value);
     }, duration);
   });
 };
+
+// Create a map of note names to their scale intervals
+export function getScaleNoteIntervalMap(scale) {
+  return scale.notes.reduce((map, note, index) => {
+    map[note] = scale.intervals[index];
+    return map;
+  }, {});
+}
+
+// Create a map of note chromas to scale note names for label normalization
+export function getScaleNoteLabelMap(scale) {
+  return scale.notes.reduce((map, note) => {
+    const noteObj = Note.get(note);
+    map[noteObj.chroma] = note;
+    return map;
+  }, {});
+}

src/routes/+page.svelte

@@ -33,7 +33,7 @@
   <div>
     <ScaleSelector bind:value={scale} />
   </div>
-  <div class="flex-1">
+  <div class="">
     <ScaleInfo scale={scaleObj} />
   </div>
 </div>