benjivers/val Public Public: anyone can read this; the crew can change it.
Fade a kill out of the feed on its way to expiring
The snapshot says how old each line is; the panel now uses it, dimming an entry in its last couple of seconds. The age is bucketed into the diff key so this costs one rebuild per entry, not one a frame. Co-Authored-By: Claude Opus 5 <[email protected]>
1 file
changed +4
−1
static/val.js +4 −1
| @@ -470,12 +470,15 @@ function onSite(me) { | ||
| 470 | 470 | function paintFeed(s) { |
| 471 | 471 | const box = $("feed"); |
| 472 | 472 | const lines = (s.feed ?? []).slice().reverse(); |
| 473 | const key = lines.map((l) => `${l.k}>${l.v}:${l.w}:${l.h}`).join("|"); | |
| 473 | // The age is bucketed into the key: an entry fades once on its way out | |
| 474 | // rather than rebuilding the panel every frame. | |
| 475 | const key = lines.map((l) => `${l.k}>${l.v}:${l.w}:${l.h}:${l.t > 6 ? "old" : "new"}`).join("|"); | |
| 474 | 476 | if (box.dataset.key === key) return; |
| 475 | 477 | box.dataset.key = key; |
| 476 | 478 | box.replaceChildren(); |
| 477 | 479 | for (const line of lines) { |
| 478 | 480 | const row = document.createElement("div"); |
| 481 | row.style.opacity = line.t > 6 ? "0.5" : "1"; | |
| 479 | 482 | const killer = document.createElement("span"); |
| 480 | 483 | killer.className = "k"; |
| 481 | 484 | killer.textContent = line.k ?? "—"; |