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:
@@ -56,6 +56,20 @@
|
|||||||
|
|
||||||
const totalHashes = $derived(data.cumulative_shares * 2 ** 32);
|
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.
|
// Block-height flash on network-wide new block.
|
||||||
let prevHeight = $state(0);
|
let prevHeight = $state(0);
|
||||||
let heightFlash = $state(false);
|
let heightFlash = $state(false);
|
||||||
@@ -84,7 +98,15 @@
|
|||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="stat-label">Best share</div>
|
<div class="stat-label">Best share</div>
|
||||||
<div class="stat-value">{formatDifficulty(data.best_diff)}</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>
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
@@ -194,6 +216,35 @@
|
|||||||
color: var(--bad);
|
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 {
|
.height-card {
|
||||||
transition: box-shadow 0.3s, border-color 0.3s;
|
transition: box-shadow 0.3s, border-color 0.3s;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user