From 8c2141c3f125ff946f3705434eefbf30fb206a62 Mon Sep 17 00:00:00 2001
From: Quintine <quintine@users.noreply.github.com>
Date: Wed, 12 Aug 2026 18:05:11 +1000
Subject: [PATCH] perf: decode-ahead sprite cache; cache bust v56

Sprites.load() now awaits img.decode() before a tier image counts as
ready, so every sprite is fully decoded during the title screen and
first-draw decode jitter disappears on weak machines. Headless smoke
keeps working via the typeof-decode fallback. Asset URLs bump to v=56.
---
 index.html    | 44 ++++++++++++++++++++++----------------------
 js/sfxbank.js |  2 +-
 js/sprites.js |  6 +++---
 3 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index 0dbab0e..29b5dec 100644
--- a/index.html
+++ b/index.html
@@ -6,32 +6,32 @@
 <meta name="theme-color" content="#0a0305">
 <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22><text y=%2252%22 x=%2250%22 text-anchor=%22middle%22 dominant-baseline=%22middle%22 font-size=%2252%22>🔪</text></svg>">
 <title>MEATSLICER</title>
-<link rel="stylesheet" href="css/style.css?v=55">
+<link rel="stylesheet" href="css/style.css?v=56">
 </head>
 <body>
 <div id="wrap">
   <canvas id="game" width="960" height="640"></canvas>
 </div>
-<script src="js/utils.js?v=55"></script>
-<script src="js/state.js?v=55"></script>
-<script src="js/input.js?v=55"></script>
-<script src="js/sfx.js?v=55"></script>
-<script src="js/sfxbank.js?v=55"></script>
-<script src="js/audio.js?v=55"></script>
-<script src="js/sprites.js?v=55"></script>
-<script src="js/particles.js?v=55"></script>
-<script src="js/weapons.js?v=55"></script>
-<script src="js/bullets.js?v=55"></script>
-<script src="js/pickups.js?v=55"></script>
-<script src="js/items.js?v=55"></script>
-<script src="js/perks.js?v=55"></script>
-<script src="js/enemies.js?v=55"></script>
-<script src="js/bosses.js?v=55"></script>
-<script src="js/rooms.js?v=55"></script>
-<script src="js/player.js?v=55"></script>
-<script src="js/hud.js?v=55"></script>
-<script src="js/help.js?v=55"></script>
-<script src="js/debug.js?v=55"></script>
-<script src="js/main.js?v=55"></script>
+<script src="js/utils.js?v=56"></script>
+<script src="js/state.js?v=56"></script>
+<script src="js/input.js?v=56"></script>
+<script src="js/sfx.js?v=56"></script>
+<script src="js/sfxbank.js?v=56"></script>
+<script src="js/audio.js?v=56"></script>
+<script src="js/sprites.js?v=56"></script>
+<script src="js/particles.js?v=56"></script>
+<script src="js/weapons.js?v=56"></script>
+<script src="js/bullets.js?v=56"></script>
+<script src="js/pickups.js?v=56"></script>
+<script src="js/items.js?v=56"></script>
+<script src="js/perks.js?v=56"></script>
+<script src="js/enemies.js?v=56"></script>
+<script src="js/bosses.js?v=56"></script>
+<script src="js/rooms.js?v=56"></script>
+<script src="js/player.js?v=56"></script>
+<script src="js/hud.js?v=56"></script>
+<script src="js/help.js?v=56"></script>
+<script src="js/debug.js?v=56"></script>
+<script src="js/main.js?v=56"></script>
 </body>
 </html>
diff --git a/js/sfxbank.js b/js/sfxbank.js
index bd42d55..a0c8541 100644
--- a/js/sfxbank.js
+++ b/js/sfxbank.js
@@ -111,7 +111,7 @@ const SfxBank = {
     if (this.buffers.has(name) || this.pending.has(name) || this.failed.has(name)) return;
     const file = this.FILES[name];
     if (!file || !this.ctx || typeof fetch !== 'function') return;
-    const job = fetch('/assets/sfx/' + encodeURIComponent(file) + '?v=55')
+    const job = fetch('/assets/sfx/' + encodeURIComponent(file) + '?v=56')
       .then(r => { if (!r.ok) throw new Error('HTTP ' + r.status); return r.arrayBuffer(); })
       .then(bytes => this.ctx.decodeAudioData(bytes))
       .then(buffer => this.buffers.set(name, this.trim(buffer)))
diff --git a/js/sprites.js b/js/sprites.js
index 50ddbb2..7631cac 100644
--- a/js/sprites.js
+++ b/js/sprites.js
@@ -86,12 +86,12 @@ const Sprites = {
       pending++;
       const img = new Image();
       const finish = () => { if (--pending === 0) G.imagesLoaded = true; };
-      img.onload = () => { this.imgs[name] = img; finish(); };
+      img.onload = () => { this.imgs[name] = img; if (typeof img.decode === 'function') img.decode().then(finish, finish); else finish(); };
       img.onerror = () => {
-        if (hd && !img._sdRetry) { img._sdRetry = true; img.src = 'assets/' + name + '.png?v=55'; return; }
+        if (hd && !img._sdRetry) { img._sdRetry = true; img.src = 'assets/' + name + '.png?v=56'; return; }
         finish();
       };
-      img.src = hd ? 'assets/hd/' + name + '.webp?v=55' : 'assets/' + name + '.png?v=55';
+      img.src = hd ? 'assets/hd/' + name + '.webp?v=56' : 'assets/' + name + '.png?v=56';
     }
   },