add the key selector

Author: caged

src/lib/KeySelector.svelte

@@ -5,7 +5,7 @@
   let note = key;
   let modifier = null;
 
-  const notes = ["E", "F", "G", "A", "B", "C", "D"];
+  const notes = ["C", "D", "E", "F", "G", "A", "B"];
 
   $: key = [note, modifier].join("");
   $: tonic.set(key);
@@ -17,7 +17,7 @@
 
 <div class="flex items-center space-x-5">
   <div>
-    <select name="note" bind:value={note} class="rounded-lg border-gray-300">
+    <select name="note" bind:value={note} class=" border-gray-300">
       {#each notes as note}
         <option value={note}>{note}</option>
       {/each}
@@ -29,8 +29,7 @@
       bind:group={modifier}
       on:click={toggleEnabled}
       value="b"
-      class="mr-1"
-    />
+      class="mr-1" />
     <span class="text-2xl">♭</span>
   </div>
   <div class="flex items-center">
@@ -39,8 +38,7 @@
       bind:group={modifier}
       on:click={toggleEnabled}
       value="#"
-      class="mr-1"
-    />
+      class="mr-1" />
     <span>#</span>
   </div>
 </div>

src/routes/+page.svelte

@@ -3,22 +3,26 @@
   import frets from "../lib/frets";
   import TuningSelector from "../lib/TuningSelector.svelte";
   import FretBoard from "../lib/FretBoard.svelte";
+  import KeySelector from "../lib/KeySelector.svelte";
 
   let tuning = $state("Standard");
-  let fretData = $derived(frets(tunings.get(tuning), 13));
+  let fretData = $derived(frets(tunings.get(tuning), 16));
 </script>
 
 <svelte:head>
   <title>Hey there</title>
   <meta name="Description" content="Hey there guitar scale" />
 </svelte:head>
 
-<div class="flex gap-5 *:p-5 border-b border-gray-200">
+<div class="flex *:p-5 *:border-r *:border-gray-200 border-b border-gray-200">
   <div>
     <TuningSelector bind:value={tuning} />
   </div>
+  <div>
+    <KeySelector key="C" />
+  </div>
 </div>
 
-<div class=" m-10 h-60 overflow-clip">
+<div class=" m-10 h-60">
   <FretBoard {fretData} />
 </div>