Cache samples, fix frequency display

jsnes/src/sample.js

@@ -28,7 +28,7 @@ Sample.prototype = {
     return copy;
   },
   get frequency() {
-    return this.sampleRate / this.increment;
+    return Math.round(this.sampleRate / this.increment);
   },
   set frequency(toneHz) {
     this.increment = this.sampleRate / toneHz;

src/App.svelte

@@ -1,6 +1,7 @@
 <script>
   import { loadSample } from './lib/sampload.js'
   import NES from './lib/NES.svelte'
+  import SampleTweak from './lib/SampleTweak.svelte';
 
   let rom = $state(null);
   let opts = $state({});
@@ -24,16 +25,6 @@
     };
     req.send();
   }
-  async function meow() {
-    const sample = await loadSample("samples/meow1.wav", 700, 10);
-    opts = { sampleSquare1: sample, sampleSquare2: sample.clone(), sampleTriangle: sample.clone() };
-  }
-  async function yeargh() {
-    const yeargh = await loadSample("samples/YEARGH.WAV", 1300, 1);
-    opts = { sampleSquare1: yeargh, sampleSquare2: yeargh.clone(), sampleTriangle: yeargh.clone() };
-  }
-  meow();
-
   $effect(() => {
     if (romfile && romfile.length > 0) {
       let reader = new FileReader();
@@ -51,9 +42,7 @@
   <hr/>
   <p>DPad: Arrow keys<br/>B button: Z, A button: X, Select: Tab / C, Start: Return / V</p>
   <hr/>
-  <button onclick={() => { opts = {} }}>Normal</button>
-  <button onclick={meow}>Meow</button>
-  <button onclick={yeargh}>Yeargh</button>
+  <SampleTweak bind:opts />
 </main>
 
 <style>

src/lib/SampleTweak.svelte

@@ -1,10 +1,11 @@
 <script>
-    import { untrack } from 'svelte';
     import { loadSample, decodeSample } from './sampload.js'
-    let { opts = $bindable() } = $props();
+    let { opts = $bindable({}) } = $props();
     let samplefile = $state();
-    let frequency = $state(880)
-    let gain = $state(1)
+    let samples = $state([{name: "Normal"}]);
+    let selectedSample = $state(0)
+    let frequency = $state(880);
+    let gain = $state(1);
 
     $effect(() => {
         if (opts.sampleSquare1) {
@@ -16,8 +17,8 @@
             opts.sampleSquare1.gain = gain;
         }
     });
-    $inspect(frequency)
-    function setSample(sample) {
+    $effect(() => {
+        let {sample} = samples[selectedSample];
         if (sample) {
             frequency = sample.frequency;
             gain = sample.gain;
@@ -25,18 +26,22 @@
         } else {
             opts = {};
         }
+    });
+    function addSample(sample, name) {
+        samples.push({sample, name});
+        selectedSample = samples.length - 1;
     }
-    async function meow() {
-        setSample(await loadSample("samples/meow1.wav", 720, 10));
+    async function loadDefaultSamples() {
+        samples.push({sample: await loadSample("samples/meow1.wav", 720, 10), name: "Meow"});
+        selectedSample = samples.length - 1;
+        samples.push({sample: await loadSample("samples/YEARGH.WAV", 1300, 1), name: "Yeargh"});
+        samples.push({sample: await loadSample("samples/QUACK.WAV", 700, 1), name: "Quack"});
     }
-    async function yeargh() {
-        setSample(await loadSample("samples/YEARGH.WAV", 1300, 1));
-    }
-    meow();
+    loadDefaultSamples();
     $effect(() => {
         if (samplefile && samplefile.length > 0) {
             let reader = new FileReader();
-            reader.onload = async () => { setSample(await decodeSample(reader.result, 880, 1)); }
+            reader.onload = async () => { addSample(await decodeSample(reader.result, 880, 1), samplefile[0].name); }
             reader.readAsArrayBuffer(samplefile[0]);
         }
     });
@@ -44,9 +49,12 @@
 
 <main>
     <div>
-        <button onclick={() => { opts = {} }}>Normal</button>
-        <button onclick={meow}>Meow</button>
-        <button onclick={yeargh}>Yeargh</button>
+        {#each samples as sample, index}
+        <button onclick={() => { selectedSample = index; }}
+            style={index == selectedSample ? "border: 2px solid black" : ""}>
+            {sample.name}
+        </button>
+        {/each}
         <input bind:files={samplefile} type="file" />
     </div>
     <div>
@@ -55,6 +63,8 @@
             <input type="range" bind:value={frequency} min="220" max="2200" step="10"/> 
             {frequency}
         </label>
+    </div>
+    <div>
         <label>
             Gain:
             <input type="range" bind:value={gain} min="0.1" max="10" step="0.1" />