Tool messages show as toasts, the card status line is gone (t27)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/styles/style.css

@@ -118,9 +118,6 @@ kbd {
 #selcard .row { display: flex; align-items: center; gap: 8px; }
 #selcard .name { font-weight: 600; font-size: 1.05em; }
 #selcard .sub { color: var(--ash); font-size: 0.88em; }
-#selcard .status { color: var(--danger); font-size: 0.88em; min-height: 0; }
-#selcard .status:empty { display: none; }
-#selcard .status.info { color: var(--patina); }
 .sw { width: 14px; height: 14px; border-radius: 2px; border: 1px solid rgba(0, 0, 0, 0.5); flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
 .cycle { display: flex; align-items: center; gap: 6px; }
 .cycle .grow { flex: 1; min-width: 0; }
@@ -215,6 +212,8 @@ table.mt td.dip { color: var(--melt); }
 .toast { padding: 7px 12px; font-size: 0.94em; animation: toastIn 0.25s ease-out; text-align: center; }
 .toast.big { border-color: var(--melt-deep); padding: 10px 16px; }
 .toast.big b { color: var(--melt-hot); display: block; font-size: 1.1em; }
+.toast.err { border-color: var(--danger); border-left-width: 3px; }
+.toast.info { border-color: var(--patina); border-left-width: 3px; }
 .toast.out { opacity: 0; transition: opacity 0.4s; }
 @keyframes toastIn { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
 

src/ui/actions.js

@@ -43,7 +43,7 @@ function doInteract() {
     msg = interactAt(ax + dx, ay + dy);
     if (msg) break outer;
   }
-  if (msg) { setStatus(msg, 'info'); if (!/^New (drill bit|bag)/.test(msg)) toast(msg); }
+  if (msg) setStatus(msg, 'info', /^New (drill bit|bag)/.test(msg));
   else if ((moldAt(ax, ay) || {}).kind !== 'ingot') setStatus('Nothing to use there.', 'info'); // an ingot mold needs no F: say nothing
 }
 // Pick (middle mouse): the piece under the cursor becomes the one you build, with its

src/ui/selection.js

@@ -154,7 +154,6 @@ function pieceCostNow(P, m = GAME.wallMat) {
 function renderSelCard() {
   const t = toolId(), c = $('selcard');
   let h = '';
-  const status = performance.now() - GAME.statusT < 3200 ? GAME.status : '';
   const sel = GAME.selDrag ? GAME.selDrag.mode : selModeHeld();
   c.hidden = false;
   const ng = ghostBlocks.size + ghostMachines.length + ghostMolds.length;
@@ -193,7 +192,6 @@ function renderSelCard() {
   } else if (t === 'ignite') {
     h = `<div class="row"><span class="name">Igniter</span><span class="chip hot">up to 640°C</span></div><div class="sub">Hold on fuel to light it. Coal catches around 420°C, wood around 300°C. Fuel needs open air next to it.</div>`;
   }
-  h += `<div class="status${GAME.statusKind === 'info' ? ' info' : ''}">${esc(status)}</div>`;
   if (c.innerHTML !== h) c.innerHTML = h;
 }
 let lastBagKey = '';

src/ui/state.js

@@ -1,5 +1,5 @@
 /* Game shell (src/ui/): browser only. This file: settings, the GAME state object, DOM helpers,
-   toasts and the status line. */
+   toasts and tool status. */
 
 // ---------- Settings ----------
 const SET_DEFAULT = {
@@ -57,11 +57,19 @@ function fmtT(t) { return t >= 999.5 ? `${Math.round(t).toLocaleString('en-US')}
 // ---------- Toasts ----------
 function toast(text, opts = {}) {
   const box = $('toasts');
-  while (box.children.length > 4) box.firstChild.remove();
-  const t = el('div', { class: 'toast plate' + (opts.big ? ' big' : '') });
-  t.innerHTML = opts.title ? `<b>${esc(opts.title)}</b>${esc(text)}` : esc(text);
-  box.appendChild(t);
+  let t = [...box.children].find(e => !e.classList.contains('out') && e._text === text && e._title === (opts.title || ''));
+  if (!t) {
+    while (box.children.length > 4) {
+      clearTimeout(box.firstChild._fade); clearTimeout(box.firstChild._remove);
+      box.firstChild.remove();
+    }
+    t = el('div', { class: 'toast plate' + (opts.big ? ' big' : '') + (opts.kind ? ' ' + opts.kind : '') });
+    t._text = text; t._title = opts.title || '';
+    t.innerHTML = opts.title ? `<b>${esc(opts.title)}</b>${esc(text)}` : esc(text);
+    box.appendChild(t);
+  }
+  clearTimeout(t._fade);
   const life = opts.big ? 5200 : 2600;
-  setTimeout(() => { t.classList.add('out'); setTimeout(() => t.remove(), 450); }, life);
+  t._fade = setTimeout(() => { t.classList.add('out'); t._remove = setTimeout(() => t.remove(), 450); }, life);
 }
-function setStatus(s, kind) { if (s) { GAME.status = s; GAME.statusKind = kind || 'err'; GAME.statusT = performance.now(); hudDirty = true; } }
+function setStatus(s, kind, quiet) { if (s) { GAME.status = s; GAME.statusKind = kind || 'err'; GAME.statusT = performance.now(); hudDirty = true; if (!quiet) toast(s, { kind: kind || 'err' }); } }