|
@@ -102,26 +102,29 @@ const COLS = [
|
|
|
const NUM = new Set(["nodes", "tp", "port", "n", "pct", "tps1", "tps2", "stars"]);
|
|
const NUM = new Set(["nodes", "tp", "port", "n", "pct", "tps1", "tps2", "stars"]);
|
|
|
const MEDAL = { 1: "🥇 ", 2: "🥈 ", 3: "🥉 " };
|
|
const MEDAL = { 1: "🥇 ", 2: "🥈 ", 3: "🥉 " };
|
|
|
|
|
|
|
|
-// star grade of the latest completed bench: 1 star = 10 points, half star
|
|
|
|
|
-// = 5; one color per decade (red → brown → orange → yellow → green ramp);
|
|
|
|
|
-// sort key is the ABSOLUTE score
|
|
|
|
|
-const STARS = 10;
|
|
|
|
|
|
|
+// star grade of the latest completed bench. The 10-color palette covers
|
|
|
|
|
+// 0..100 a decade per color (color = which decade the score is in); the
|
|
|
|
|
+// star count shows the position WITHIN that decade (1 star = 2 points of
|
|
|
|
|
+// the band, half star = 1) — 95 → green, 2.5 stars. Sort key is the
|
|
|
|
|
+// ABSOLUTE score.
|
|
|
const PALETTE = [
|
|
const PALETTE = [
|
|
|
"red", "firebrick", "brown", "sienna", "chocolate",
|
|
"red", "firebrick", "brown", "sienna", "chocolate",
|
|
|
"darkorange", "gold", "yellowgreen", "limegreen", "green",
|
|
"darkorange", "gold", "yellowgreen", "limegreen", "green",
|
|
|
];
|
|
];
|
|
|
function starInfo(r) {
|
|
function starInfo(r) {
|
|
|
const e = latest(r, x => x.done && x.pct != null);
|
|
const e = latest(r, x => x.done && x.pct != null);
|
|
|
- return e ? { pct: e.pct, s: Math.round(e.pct / 5) / 2 } : null;
|
|
|
|
|
|
|
+ if (!e) return null;
|
|
|
|
|
+ const band = Math.min(9, Math.floor(e.pct / 10));
|
|
|
|
|
+ return { pct: e.pct, band, s: Math.round(e.pct - band * 10) / 2 };
|
|
|
}
|
|
}
|
|
|
function starGlyphs(si) {
|
|
function starGlyphs(si) {
|
|
|
|
|
+ const col = PALETTE[si.band];
|
|
|
let out = "";
|
|
let out = "";
|
|
|
- for (let i = 1; i <= STARS; i++) {
|
|
|
|
|
- const col = PALETTE[i - 1];
|
|
|
|
|
|
|
+ for (let i = 1; i <= 5; i++) {
|
|
|
if (si.s >= i) out += `<span style="color:${col}">★</span>`;
|
|
if (si.s >= i) out += `<span style="color:${col}">★</span>`;
|
|
|
else if (si.s >= i - 0.5)
|
|
else if (si.s >= i - 0.5)
|
|
|
- out += `<span class="half" style="background-image:linear-gradient(90deg,${col} 50%,color-mix(in srgb,CanvasText 30%,transparent) 50%)">★</span>`;
|
|
|
|
|
- else out += '<span class="dim">☆</span>';
|
|
|
|
|
|
|
+ out += `<span class="half" style="background-image:linear-gradient(90deg,${col} 50%,color-mix(in srgb,${col} 30%,transparent) 50%)">★</span>`;
|
|
|
|
|
+ else out += `<span style="color:${col};opacity:.3">☆</span>`;
|
|
|
}
|
|
}
|
|
|
return out;
|
|
return out;
|
|
|
}
|
|
}
|