From 47cd770a9e162d7cfd789c0c0a44a64fe5b2a056 Mon Sep 17 00:00:00 2001
From: Jeremy Penner <jeremy@sporktania.com>
Date: Thu, 28 Nov 2024 20:02:11 -0500
Subject: [PATCH] Cache samples, fix frequency display

---
 jsnes/src/sample.js        |   2 +-
 samples/QUACK.WAV          | Bin 0 -> 2084 bytes
 src/App.svelte             |  15 ++-----------
 src/lib/SampleTweak.svelte |  42 +++++++++++++++++++++++--------------
 4 files changed, 29 insertions(+), 30 deletions(-)
 create mode 100644 samples/QUACK.WAV

diff --git a/jsnes/src/sample.js b/jsnes/src/sample.js
index fbdd328..a1b0886 100644
--- a/jsnes/src/sample.js
+++ b/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;
diff --git a/samples/QUACK.WAV b/samples/QUACK.WAV
new file mode 100644
index 0000000000000000000000000000000000000000..6458622d13f1f8d142b1317be3da4c44863e4958
GIT binary patch
literal 2084
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

literal 0
HcmV?d00001

diff --git a/src/App.svelte b/src/App.svelte
index 95a5e04..ddd84aa 100644
--- a/src/App.svelte
+++ b/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>
diff --git a/src/lib/SampleTweak.svelte b/src/lib/SampleTweak.svelte
index 6b80998..a646fd8 100644
--- a/src/lib/SampleTweak.svelte
+++ b/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" />