@manybitsbyte/nesplayer-svelte 0.8.0 → 0.10.0

package/README.md

@@ -13,8 +13,24 @@ npm install @manybitsbyte/nesplayer-svelte
 ```svelte
 <script>
   import { Screen } from '@manybitsbyte/nesplayer-svelte';
+</script>
+
+<Screen style="width: 512px; height: 480px;" />
+```
+
+That's it. The built-in controls overlay includes a file picker — hover the right edge of the player and click the disk icon to load a `.nes` ROM.
 
-  let romBytes = $state(null);   // Uint8Array of a .nes file
+The component fills its container. Set width/height on the element or a wrapping div. The canvas maintains the correct NES aspect ratio (8:7 pixel, ~1.167:1) and letter-boxes within the available space.
+
+### Loading a ROM programmatically
+
+If you want to serve ROMs from your own UI (a game library, a URL fetch, etc.), pass the bytes via the `rom` prop:
+
+```svelte
+<script>
+  import { Screen } from '@manybitsbyte/nesplayer-svelte';
+
+  let romBytes = $state(null);
 
   async function loadRom() {
     const res = await fetch('/roms/game.nes');
@@ -22,13 +38,10 @@ npm install @manybitsbyte/nesplayer-svelte
   }
 </script>
 
-<button onclick={loadRom}>Load ROM</button>
-
+<button onclick={loadRom}>Load game</button>
 <Screen rom={romBytes} romName="game" style="width: 512px; height: 480px;" />
 ```
 
-The component fills its container. Set width/height on the element or a wrapping div. The canvas maintains the correct NES aspect ratio (8:7 pixel, ~1.167:1) and letter-boxes within the available space.
-
 ## Props
 
 | Prop | Type | Default | Bindable | Description |

package/dist/components/Screen.svelte

@@ -3,7 +3,7 @@
 	import { SvelteSet } from 'svelte/reactivity';
 	import createNESPlayerModule from '../wasm/nes-player.js';
 	import nesPlayerWasmUrl from '../wasm/nes-player.wasm?url';
-	import audioWorkletSrc from '../wasm/audio-worklet.js?raw';
+	import { audioWorkletSrc } from '../wasm/audio-worklet-src.js';
 	import ControllerPanel from './ControllerPanel.svelte';
 	import { version } from '../version.js';
 

package/dist/version.d.ts

@@ -1 +1 @@
-export const version: "0.8.0";
+export const version: "0.10.0";

package/dist/version.js

@@ -1 +1 @@
-export const version = '0.8.0';
+export const version = '0.10.0';

package/dist/wasm/audio-worklet-src.d.ts

@@ -0,0 +1 @@
+export declare const audioWorkletSrc = "\nconst RING_SIZE   = 4096;\nconst PRE_BUFFER  = 1024;\nconst TARGET_FILL = 1536;\nconst SMOOTH      = 0.005;\nconst RATE_GAIN   = 0.000008;\nconst MAX_ADJUST  = 0.005;\nconst FADE_RATE   = 0.97;\nconst MP_BUF_SIZE = 16384;\n\nclass NESAudioProcessor extends AudioWorkletProcessor {\n    constructor() {\n        super();\n        this.headerView = null;\n        this.ringView   = null;\n        this.ready      = false;\n        this.primed     = false;\n        this.lastSample = 0;\n        this.smoothFill = TARGET_FILL;\n        this.readBuf    = new Float32Array(192);\n        this.mpBuf      = new Float32Array(MP_BUF_SIZE);\n        this.mpHead     = 0;\n        this.mpTail     = 0;\n        this.mpMode     = false;\n        this.mpPrimed   = false;\n\n        this.port.onmessage = (e) => {\n            if (e.data.type === 'init') {\n                const sab       = e.data.sharedBuffer;\n                this.headerView = new Int32Array(sab, 0, 2);\n                this.ringView   = new Float32Array(sab, 8, RING_SIZE);\n                this.mpMode     = false;\n                this.ready      = true;\n            } else if (e.data.type === 'init-mp') {\n                this.mpMode = true;\n                this.ready  = true;\n            } else if (e.data.type === 'push') {\n                const s     = e.data.samples;\n                const avail = MP_BUF_SIZE - (this.mpHead - this.mpTail);\n                const count = Math.min(s.length, avail);\n                for (let i = 0; i < count; i++) {\n                    this.mpBuf[(this.mpHead + i) % MP_BUF_SIZE] = s[i];\n                }\n                this.mpHead += count;\n            }\n        };\n    }\n\n    process(inputs, outputs) {\n        const output = outputs[0];\n        if (!output || output.length === 0) { return true; }\n\n        const left   = output[0];\n        const right  = output.length > 1 ? output[1] : null;\n        const frames = left.length;\n\n        if (!this.ready) {\n            left.fill(0);\n            if (right) { right.fill(0); }\n            return true;\n        }\n\n        if (this.mpMode) {\n            return this._processMp(left, right, frames);\n        }\n\n        const writePos  = Atomics.load(this.headerView, 0);\n        const readPos   = Atomics.load(this.headerView, 1);\n        const available = (writePos - readPos + RING_SIZE) % RING_SIZE;\n\n        if (!this.primed) {\n            if (available < PRE_BUFFER) {\n                left.fill(0);\n                if (right) { right.fill(0); }\n                return true;\n            }\n            this.primed     = true;\n            this.smoothFill = available;\n        }\n\n        if (available === 0) {\n            let held = this.lastSample;\n            for (let i = 0; i < frames; i++) {\n                held   *= FADE_RATE;\n                left[i] = held;\n                if (right) { right[i] = held; }\n            }\n            this.lastSample = held;\n            return true;\n        }\n\n        this.smoothFill += SMOOTH * (available - this.smoothFill);\n        const fillError = this.smoothFill - TARGET_FILL;\n        const speedAdj  = Math.max(-MAX_ADJUST, Math.min(MAX_ADJUST, fillError * RATE_GAIN));\n        let readCount   = Math.round(frames * (1.0 + speedAdj));\n        readCount       = Math.max(1, Math.min(readCount, available));\n\n        const buf = this.readBuf;\n        for (let i = 0; i < readCount; i++) {\n            buf[i] = this.ringView[(readPos + i) % RING_SIZE];\n        }\n\n        if (readCount === frames) {\n            for (let i = 0; i < frames; i++) {\n                const s  = buf[i];\n                left[i]  = s;\n                if (right) { right[i] = s; }\n            }\n        } else {\n            const ratio = readCount / frames;\n            for (let i = 0; i < frames; i++) {\n                const srcPos = i * ratio;\n                const idx    = srcPos | 0;\n                const frac   = srcPos - idx;\n                const s0     = buf[idx];\n                const s1     = idx + 1 < readCount ? buf[idx + 1] : s0;\n                const s      = s0 + frac * (s1 - s0);\n                left[i]      = s;\n                if (right) { right[i] = s; }\n            }\n        }\n\n        this.lastSample = left[frames - 1];\n        Atomics.store(this.headerView, 1, (readPos + readCount) % RING_SIZE);\n        return true;\n    }\n\n    _processMp(left, right, frames) {\n        const available = this.mpHead - this.mpTail;\n\n        if (!this.mpPrimed) {\n            if (available < PRE_BUFFER) {\n                left.fill(0);\n                if (right) { right.fill(0); }\n                return true;\n            }\n            this.mpPrimed = true;\n        }\n\n        if (available === 0) {\n            let held = this.lastSample;\n            for (let i = 0; i < frames; i++) {\n                held   *= FADE_RATE;\n                left[i] = held;\n                if (right) { right[i] = held; }\n            }\n            this.lastSample = held;\n            return true;\n        }\n\n        const toRead = Math.min(frames, available);\n        for (let i = 0; i < toRead; i++) {\n            const s  = this.mpBuf[(this.mpTail + i) % MP_BUF_SIZE];\n            left[i]  = s;\n            if (right) { right[i] = s; }\n        }\n        this.mpTail += toRead;\n\n        if (toRead < frames) {\n            let held = toRead > 0 ? left[toRead - 1] : this.lastSample;\n            for (let i = toRead; i < frames; i++) {\n                held   *= FADE_RATE;\n                left[i] = held;\n                if (right) { right[i] = held; }\n            }\n        }\n\n        this.lastSample = left[frames - 1];\n        return true;\n    }\n}\n\nregisterProcessor('nes-audio-processor', NESAudioProcessor);\n";

package/dist/wasm/audio-worklet-src.js

@@ -0,0 +1,174 @@
+export const audioWorkletSrc = `
+const RING_SIZE   = 4096;
+const PRE_BUFFER  = 1024;
+const TARGET_FILL = 1536;
+const SMOOTH      = 0.005;
+const RATE_GAIN   = 0.000008;
+const MAX_ADJUST  = 0.005;
+const FADE_RATE   = 0.97;
+const MP_BUF_SIZE = 16384;
+
+class NESAudioProcessor extends AudioWorkletProcessor {
+    constructor() {
+        super();
+        this.headerView = null;
+        this.ringView   = null;
+        this.ready      = false;
+        this.primed     = false;
+        this.lastSample = 0;
+        this.smoothFill = TARGET_FILL;
+        this.readBuf    = new Float32Array(192);
+        this.mpBuf      = new Float32Array(MP_BUF_SIZE);
+        this.mpHead     = 0;
+        this.mpTail     = 0;
+        this.mpMode     = false;
+        this.mpPrimed   = false;
+
+        this.port.onmessage = (e) => {
+            if (e.data.type === 'init') {
+                const sab       = e.data.sharedBuffer;
+                this.headerView = new Int32Array(sab, 0, 2);
+                this.ringView   = new Float32Array(sab, 8, RING_SIZE);
+                this.mpMode     = false;
+                this.ready      = true;
+            } else if (e.data.type === 'init-mp') {
+                this.mpMode = true;
+                this.ready  = true;
+            } else if (e.data.type === 'push') {
+                const s     = e.data.samples;
+                const avail = MP_BUF_SIZE - (this.mpHead - this.mpTail);
+                const count = Math.min(s.length, avail);
+                for (let i = 0; i < count; i++) {
+                    this.mpBuf[(this.mpHead + i) % MP_BUF_SIZE] = s[i];
+                }
+                this.mpHead += count;
+            }
+        };
+    }
+
+    process(inputs, outputs) {
+        const output = outputs[0];
+        if (!output || output.length === 0) { return true; }
+
+        const left   = output[0];
+        const right  = output.length > 1 ? output[1] : null;
+        const frames = left.length;
+
+        if (!this.ready) {
+            left.fill(0);
+            if (right) { right.fill(0); }
+            return true;
+        }
+
+        if (this.mpMode) {
+            return this._processMp(left, right, frames);
+        }
+
+        const writePos  = Atomics.load(this.headerView, 0);
+        const readPos   = Atomics.load(this.headerView, 1);
+        const available = (writePos - readPos + RING_SIZE) % RING_SIZE;
+
+        if (!this.primed) {
+            if (available < PRE_BUFFER) {
+                left.fill(0);
+                if (right) { right.fill(0); }
+                return true;
+            }
+            this.primed     = true;
+            this.smoothFill = available;
+        }
+
+        if (available === 0) {
+            let held = this.lastSample;
+            for (let i = 0; i < frames; i++) {
+                held   *= FADE_RATE;
+                left[i] = held;
+                if (right) { right[i] = held; }
+            }
+            this.lastSample = held;
+            return true;
+        }
+
+        this.smoothFill += SMOOTH * (available - this.smoothFill);
+        const fillError = this.smoothFill - TARGET_FILL;
+        const speedAdj  = Math.max(-MAX_ADJUST, Math.min(MAX_ADJUST, fillError * RATE_GAIN));
+        let readCount   = Math.round(frames * (1.0 + speedAdj));
+        readCount       = Math.max(1, Math.min(readCount, available));
+
+        const buf = this.readBuf;
+        for (let i = 0; i < readCount; i++) {
+            buf[i] = this.ringView[(readPos + i) % RING_SIZE];
+        }
+
+        if (readCount === frames) {
+            for (let i = 0; i < frames; i++) {
+                const s  = buf[i];
+                left[i]  = s;
+                if (right) { right[i] = s; }
+            }
+        } else {
+            const ratio = readCount / frames;
+            for (let i = 0; i < frames; i++) {
+                const srcPos = i * ratio;
+                const idx    = srcPos | 0;
+                const frac   = srcPos - idx;
+                const s0     = buf[idx];
+                const s1     = idx + 1 < readCount ? buf[idx + 1] : s0;
+                const s      = s0 + frac * (s1 - s0);
+                left[i]      = s;
+                if (right) { right[i] = s; }
+            }
+        }
+
+        this.lastSample = left[frames - 1];
+        Atomics.store(this.headerView, 1, (readPos + readCount) % RING_SIZE);
+        return true;
+    }
+
+    _processMp(left, right, frames) {
+        const available = this.mpHead - this.mpTail;
+
+        if (!this.mpPrimed) {
+            if (available < PRE_BUFFER) {
+                left.fill(0);
+                if (right) { right.fill(0); }
+                return true;
+            }
+            this.mpPrimed = true;
+        }
+
+        if (available === 0) {
+            let held = this.lastSample;
+            for (let i = 0; i < frames; i++) {
+                held   *= FADE_RATE;
+                left[i] = held;
+                if (right) { right[i] = held; }
+            }
+            this.lastSample = held;
+            return true;
+        }
+
+        const toRead = Math.min(frames, available);
+        for (let i = 0; i < toRead; i++) {
+            const s  = this.mpBuf[(this.mpTail + i) % MP_BUF_SIZE];
+            left[i]  = s;
+            if (right) { right[i] = s; }
+        }
+        this.mpTail += toRead;
+
+        if (toRead < frames) {
+            let held = toRead > 0 ? left[toRead - 1] : this.lastSample;
+            for (let i = toRead; i < frames; i++) {
+                held   *= FADE_RATE;
+                left[i] = held;
+                if (right) { right[i] = held; }
+            }
+        }
+
+        this.lastSample = left[frames - 1];
+        return true;
+    }
+}
+
+registerProcessor('nes-audio-processor', NESAudioProcessor);
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@manybitsbyte/nesplayer-svelte",
-	"version": "0.8.0",
+	"version": "0.10.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",