Replace best share subtitle with luck indicator

Shows luck as best_share / total_work * 100%. Green for >100% (lucky),
red for <100% (unlucky), multiplier format for >=1000%. Hover tooltip
explains the metric.
This commit is contained in:
satoshi
2026-05-10 17:23:41 +03:00
parent 28dfbdec84
commit de81e2e111
+52 -1
View File
@@ -56,6 +56,20 @@
const totalHashes = $derived(data.cumulative_shares * 2 ** 32);
// Luck: best_share / cumulative_work * 100%.
// 100% = exactly expected, >100% = lucky, <100% = unlucky.
const luckPct = $derived.by(() => {
const best = data.best_diff;
const work = data.cumulative_shares;
if (!best || !work || work <= 0) return 0;
return (best / work) * 100;
});
const luckLabel = $derived.by(() => {
if (!data.best_diff || !data.cumulative_shares) return "—";
if (luckPct >= 1000) return `${(luckPct / 100).toFixed(1)}x`;
return luckPct.toFixed(0) + "%";
});
// Block-height flash on network-wide new block.
let prevHeight = $state(0);
let heightFlash = $state(false);
@@ -84,7 +98,15 @@
<div class="card">
<div class="stat-label">Best share</div>
<div class="stat-value">{formatDifficulty(data.best_diff)}</div>
<div class="stat-sub">all-time pool record</div>
<div
class="luck-sub"
class:lucky={luckPct > 100}
class:unlucky={luckPct > 0 && luckPct < 100}
title="Luck = best share / total work. 100% means your best share matches the work done. Above 100% is lucky (found a harder share than expected), below is unlucky."
>
<span class="luck-value">{luckLabel}</span>
<span class="luck-label">luck</span>
</div>
</div>
<div class="card">
@@ -194,6 +216,35 @@
color: var(--bad);
}
.luck-sub {
display: flex;
align-items: baseline;
gap: 0.4em;
margin-top: 0.45em;
cursor: help;
}
.luck-value {
font-size: 1.15rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.luck-label {
color: var(--fg-dim);
font-size: 0.85rem;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.luck-sub.lucky .luck-value {
color: var(--good);
text-shadow: 0 0 10px rgba(92, 224, 168, 0.35);
}
.luck-sub.unlucky .luck-value {
color: var(--bad);
text-shadow: 0 0 10px rgba(255, 107, 107, 0.25);
}
.height-card {
transition: box-shadow 0.3s, border-color 0.3s;
}