v0.2.0: item pickups hold their toast for 5.5s

Toast durations are now per-toast (addToast third arg); passive item and
active item pickups display for 5.5s instead of the default 2.5s.
Cache v=43.

index.html

@@ -6,31 +6,31 @@
 <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=42">
+<link rel="stylesheet" href="css/style.css?v=43">
 </head>
 <body>
 <div id="wrap">
   <canvas id="game" width="960" height="640"></canvas>
 </div>
-<script src="js/utils.js?v=42"></script>
+<script src="js/utils.js?v=43"></script>
-<script src="js/state.js?v=42"></script>
+<script src="js/state.js?v=43"></script>
-<script src="js/input.js?v=42"></script>
+<script src="js/input.js?v=43"></script>
-<script src="js/sfx.js?v=42"></script>
+<script src="js/sfx.js?v=43"></script>
-<script src="js/sfxbank.js?v=42"></script>
+<script src="js/sfxbank.js?v=43"></script>
-<script src="js/audio.js?v=42"></script>
+<script src="js/audio.js?v=43"></script>
-<script src="js/sprites.js?v=42"></script>
+<script src="js/sprites.js?v=43"></script>
-<script src="js/particles.js?v=42"></script>
+<script src="js/particles.js?v=43"></script>
-<script src="js/weapons.js?v=42"></script>
+<script src="js/weapons.js?v=43"></script>
-<script src="js/bullets.js?v=42"></script>
+<script src="js/bullets.js?v=43"></script>
-<script src="js/pickups.js?v=42"></script>
+<script src="js/pickups.js?v=43"></script>
-<script src="js/items.js?v=42"></script>
+<script src="js/items.js?v=43"></script>
-<script src="js/perks.js?v=42"></script>
+<script src="js/perks.js?v=43"></script>
-<script src="js/enemies.js?v=42"></script>
+<script src="js/enemies.js?v=43"></script>
-<script src="js/bosses.js?v=42"></script>
+<script src="js/bosses.js?v=43"></script>
-<script src="js/rooms.js?v=42"></script>
+<script src="js/rooms.js?v=43"></script>
-<script src="js/player.js?v=42"></script>
+<script src="js/player.js?v=43"></script>
-<script src="js/hud.js?v=42"></script>
+<script src="js/hud.js?v=43"></script>
-<script src="js/help.js?v=42"></script>
+<script src="js/help.js?v=43"></script>
-<script src="js/main.js?v=42"></script>
+<script src="js/main.js?v=43"></script>
 </body>
 </html>

js/hud.js

@@ -198,7 +198,7 @@ function drawHUD(ctx) {
   ctx.textAlign = 'center';
   for (let i = 0; i < G.toasts.length; i++) {
     const t = G.toasts[i];
-    const a = clamp(2.5 - t.t, 0, 1);
+    const a = clamp((t.dur || 2.5) - t.t, 0, 1);
     const y = 22 + i * 48;
     ctx.globalAlpha = a;
     ctx.font = 'bold 13px monospace';
@@ -271,5 +271,5 @@ function drawMinimap(ctx) {
 
 function drawToastsUpdate(dt) {
   for (const t of G.toasts) t.t += dt;
-  while (G.toasts.length && G.toasts[0].t > 2.5) G.toasts.shift();
+  while (G.toasts.length && G.toasts[0].t > (G.toasts[0].dur || 2.5)) G.toasts.shift();
 }

js/items.js

@@ -172,10 +172,10 @@ function giveItem(iid) {
   item.apply(p.stats, p);
   p.items[iid] = lvl + 1;
   if (lvl > 0) {
-    addToast(item.name + ' ' + romanNum(lvl + 1), 'UPGRADED — ' + item.desc);
+    addToast(item.name + ' ' + romanNum(lvl + 1), 'UPGRADED — ' + item.desc, 5.5);
     spawnText(p.x, p.y - 14, 'UPGRADED!', '#ffd060');
   } else {
-    addToast(item.name, item.desc);
+    addToast(item.name, item.desc, 5.5);
     spawnText(p.x, p.y - 14, item.name.toUpperCase(), ITEM_RARITY[item.rarity].color);
   }
   if (item.rarity === 'legendary') Sfx.curse(); else Sfx.item();

js/pickups.js

@@ -130,7 +130,7 @@ function collectPickup(k) {
       }
       const def = ACTIVES[k.aid];
       p.active = { iid: k.aid, charges: k.charges !== undefined ? k.charges : def.cost };
-      addToast(def.name, def.desc + ' — [SPACE] when charged');
+      addToast(def.name, def.desc + ' — [SPACE] when charged', 5.5);
       spawnText(p.x, p.y - 14, def.name.toUpperCase(), '#55f5dc');
       Sfx.item();
       for (const q of G.pickups) if (q.type === 'itemspot') q.dead = true; // remove pedestal base

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=42')
+    const job = fetch('/assets/sfx/' + encodeURIComponent(file) + '?v=43')
       .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)))

js/sprites.js

@@ -84,7 +84,7 @@ const Sprites = {
       const img = new Image();
       img.onload = () => { this.imgs[name] = img; if (--pending === 0) G.imagesLoaded = true; };
       img.onerror = () => { if (--pending === 0) G.imagesLoaded = true; };
-      img.src = 'assets/' + name + '.png?v=42';
+      img.src = 'assets/' + name + '.png?v=43';
     }
   },
 

js/state.js

@@ -73,8 +73,8 @@ function powerScore() {
 }
 
 function addShake(n) { G.shake = Math.min(G.shake + n, 18); }
-function addToast(text, sub) {
+function addToast(text, sub, dur) {
-  G.toasts.push({ text, sub: sub || '', t: 0 });
+  G.toasts.push({ text, sub: sub || '', t: 0, dur: dur || 2.5 });
   if (G.toasts.length > 3) G.toasts.shift();
 }
 function addScore(n) {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "meatslicer",
   "productName": "MeatSlicer",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "description": "A Butcher's Descent - clear, harvest, descend.",
   "main": "desktop/main.js",