Public/Live_RC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix live next-lap prediction in overlay

Browse Source
This commit is contained in:
larssand
2026-03-19 20:48:18 +01:00
parent fb9dcf1b9c
commit b54786ac55
2 changed files with 32 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/app.js
View File

@@ -5907,10 +5907,10 @@ function renderOverlayLeaderboard(rows) {
<div class="overlay-prediction"> <div class="overlay-prediction">
<div class="overlay-prediction-meta"> <div class="overlay-prediction-meta">
<label>${t("overlay.next_predicted_lap")}</label> <label>${t("overlay.next_predicted_lap")}</label>
<span>${row.predictedRemainingMs !== null ? formatLap(row.predictedRemainingMs) : "-"}</span> <span>${formatPredictedLapDelta(row.predictedRemainingMs)}</span>
</div> </div>
<div class="overlay-prediction-track"> <div class="overlay-prediction-track">
<div class="overlay-prediction-fill overlay-prediction-${escapeHtml(row.predictionTone || "good")}" style="width:${Math.max(0, Math.min(100, Math.round((row.predictedProgress || 0) * 100)))}%"></div> <div class="overlay-prediction-fill overlay-prediction-${escapeHtml(row.predictionTone || "good")}" style="width:${Math.max(0, Math.min(100, Math.round((Math.min(1, row.predictedProgress || 0)) * 100)))}%"></div>
</div> </div>
</div> </div>
</div> </div>
@@ -7115,8 +7115,8 @@ function buildLeaderboard(session) {
? bestLapMs ? bestLapMs
: null; : null;
const currentLapElapsedMs = lastPassingTs ? Math.max(0, nowTs - lastPassingTs) : 0; const currentLapElapsedMs = lastPassingTs ? Math.max(0, nowTs - lastPassingTs) : 0;
const predictedRemainingMs = predictionBaseMs ? Math.max(0, predictionBaseMs - currentLapElapsedMs) : null; const predictedRemainingMs = predictionBaseMs ? predictionBaseMs - currentLapElapsedMs : null;
const predictedProgress = predictionBaseMs ? Math.min(1.25, currentLapElapsedMs / predictionBaseMs) : 0; const predictedProgress = predictionBaseMs ? currentLapElapsedMs / predictionBaseMs : 0;
const predictionTone = const predictionTone =
!predictionBaseMs || predictedProgress <= 0.85 !predictionBaseMs || predictedProgress <= 0.85
? "good" ? "good"
@@ -7336,6 +7336,16 @@ function formatLap(ms) {
return `${m}:${s}.${t}`; return `${m}:${s}.${t}`;
} }
function formatPredictedLapDelta(ms) {
if (ms === null || ms === undefined || Number.isNaN(ms)) {
return "-";
}
if (ms >= 0) {
return formatLap(ms);
}
return `+${formatLap(Math.abs(ms))}`;
}
function formatCountdown(ms) { function formatCountdown(ms) {
const total = Math.max(0, Math.floor(ms)); const total = Math.max(0, Math.floor(ms));
const m = Math.floor(total / 60000) const m = Math.floor(total / 60000)

27
src/styles.css
View File

@@ -1068,9 +1068,9 @@ select:focus {
} }
.overlay-race-pos .pos-pill { .overlay-race-pos .pos-pill {
min-width: 22px; min-width: 20px;
height: 22px; height: 20px;
font-size: 0.68rem; font-size: 0.62rem;
} }
.overlay-shell-dense .pill { .overlay-shell-dense .pill {
@@ -1176,10 +1176,10 @@ select:focus {
.overlay-race-row { .overlay-race-row {
display: grid; display: grid;
grid-template-columns: 34px minmax(160px, 1.7fr) repeat(4, minmax(78px, 0.54fr)) minmax(86px, 0.58fr); grid-template-columns: 30px minmax(148px, 1.42fr) repeat(6, minmax(62px, 0.38fr));
gap: 5px; gap: 4px;
align-items: center; align-items: center;
padding: 4px 6px; padding: 4px 5px;
border: 1px solid rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 8px; border-radius: 8px;
background: rgba(255, 255, 255, 0.03); background: rgba(255, 255, 255, 0.03);
@@ -1210,7 +1210,7 @@ select:focus {
.overlay-race-metric label, .overlay-race-metric label,
.overlay-race-best label { .overlay-race-best label {
color: var(--muted); color: var(--muted);
font-size: 0.5rem; font-size: 0.46rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.06em; letter-spacing: 0.06em;
} }
@@ -1226,13 +1226,15 @@ select:focus {
.overlay-prediction { .overlay-prediction {
margin-top: 1px; margin-top: 1px;
max-width: 122px;
} }
.overlay-prediction-meta { .overlay-prediction-meta {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 6px; gap: 4px;
margin-bottom: 1px; margin-bottom: 1px;
max-width: 122px;
} }
.overlay-prediction-meta label, .overlay-prediction-meta label,
@@ -1245,6 +1247,7 @@ select:focus {
.overlay-prediction-track { .overlay-prediction-track {
height: 2px; height: 2px;
max-width: 122px;
border-radius: 999px; border-radius: 999px;
overflow: hidden; overflow: hidden;
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);
@@ -1265,12 +1268,18 @@ select:focus {
.overlay-prediction-late { .overlay-prediction-late {
background: linear-gradient(90deg, #ffd0d0, #e10600); background: linear-gradient(90deg, #ffd0d0, #e10600);
animation: overlayPredictionLatePulse 1.1s ease-in-out infinite;
}
@keyframes overlayPredictionLatePulse {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
} }
.overlay-race-metric strong, .overlay-race-metric strong,
.overlay-race-best strong { .overlay-race-best strong {
font-family: Orbitron, sans-serif; font-family: Orbitron, sans-serif;
font-size: clamp(1rem, 1.6vw, 1.35rem); font-size: clamp(0.88rem, 1.2vw, 1.08rem);
} }
.overlay-empty { .overlay-empty {