+ ${escapeHtml(t(`training.achievement_${achievement.id}`))}
+ ${escapeHtml(t(achievement.unlocked ? "training.achievement_unlocked" : "training.achievement_next"))}
+
+ RC
`;
@@ -243,7 +240,6 @@ function renderProfile(data) {
diff --git a/src/styles.css b/src/styles.css
index a6931a3..a6f5659 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -474,6 +474,131 @@ body {
margin-top: 14px;
}
+.training-development-grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 14px;
+ margin-top: 14px;
+}
+
+.training-development-card {
+ padding: 18px;
+ border: 1px solid var(--line);
+ border-radius: 16px;
+ background:
+ linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%),
+ var(--panel);
+ box-shadow: var(--shadow);
+}
+
+.training-development-card .training-section-title {
+ margin: 0 0 14px;
+}
+
+.training-development-card .training-section-title h3,
+.training-progress-panel .panel-header h3 {
+ margin: 4px 0 0;
+}
+
+.training-development-card > p {
+ margin: 12px 0 0;
+ color: var(--muted);
+ font-size: 0.82rem;
+}
+
+.training-trend-metrics {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ overflow: hidden;
+ border: 1px solid var(--line);
+ border-radius: 12px;
+}
+
+.training-trend-metrics > div {
+ display: grid;
+ gap: 5px;
+ padding: 13px;
+}
+
+.training-trend-metrics > div + div {
+ border-left: 1px solid var(--line);
+}
+
+.training-trend-metrics span,
+.training-achievement small,
+.training-progress-entry small {
+ color: var(--muted);
+ font-size: 0.74rem;
+}
+
+.training-achievements {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 8px;
+}
+
+.training-achievement {
+ display: flex;
+ align-items: center;
+ min-width: 0;
+ gap: 9px;
+ padding: 10px;
+ border: 1px solid var(--line);
+ border-radius: 11px;
+ background: var(--surface-elevated);
+}
+
+.training-achievement.is-next {
+ opacity: 0.68;
+}
+
+.training-achievement-mark,
+.training-progress-initial {
+ display: grid;
+ flex: 0 0 auto;
+ place-items: center;
+ width: 34px;
+ height: 34px;
+ border-radius: 10px;
+ background: color-mix(in srgb, var(--accent) 18%, var(--panel-2) 82%);
+ color: color-mix(in srgb, var(--accent) 55%, var(--text) 45%);
+ font-family: Orbitron, sans-serif;
+ font-size: 0.68rem;
+ font-weight: 700;
+}
+
+.training-achievement.is-unlocked .training-achievement-mark {
+ background: color-mix(in srgb, var(--success) 20%, var(--panel-2) 80%);
+ color: color-mix(in srgb, var(--success) 62%, var(--text) 38%);
+}
+
+.training-achievement strong,
+.training-achievement small,
+.training-progress-entry strong,
+.training-progress-entry small {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.training-progress-feed {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+ gap: 9px;
+}
+
+.training-progress-entry.training-club-driver {
+ display: flex;
+ align-items: center;
+ min-width: 0;
+ gap: 11px;
+ padding: 11px;
+ border: 1px solid var(--line);
+ border-radius: 12px;
+ background: var(--surface-elevated);
+ text-align: left;
+}
+
.training-insight-grid,
.training-focus-grid {
display: grid;
@@ -2865,7 +2990,8 @@ select:focus {
}
.training-insight-grid,
- .training-focus-grid {
+ .training-focus-grid,
+ .training-development-grid {
grid-template-columns: 1fr;
}
@@ -2983,6 +3109,16 @@ select:focus {
grid-template-columns: 1fr;
}
+ .training-trend-metrics,
+ .training-achievements {
+ grid-template-columns: 1fr;
+ }
+
+ .training-trend-metrics > div + div {
+ border-top: 1px solid var(--line);
+ border-left: 0;
+ }
+
.training-goals {
grid-template-columns: 1fr;
}
diff --git a/src/training_logic.js b/src/training_logic.js
index e246e21..d95ae83 100644
--- a/src/training_logic.js
+++ b/src/training_logic.js
@@ -136,6 +136,37 @@ function percentile(values, ratio) {
return sorted[index];
}
+function average(values) {
+ return values.length ? Math.round(values.reduce((sum, value) => sum + value, 0) / values.length) : 0;
+}
+
+function consistencySpread(values) {
+ const mean = average(values);
+ return mean ? ((percentile(values, 0.9) - percentile(values, 0.1)) / mean) * 100 : 0;
+}
+
+export function buildTrainingAchievements(stats) {
+ const source = stats && typeof stats === "object" ? stats : {};
+ const definitions = [
+ ["first_session", Number(source.totalSessions || 0), 1],
+ ["laps_100", Number(source.totalLaps || 0), 100],
+ ["laps_500", Number(source.totalLaps || 0), 500],
+ ["laps_1000", Number(source.totalLaps || 0), 1000],
+ ["laps_1500", Number(source.totalLaps || 0), 1500],
+ ["days_3", Number(source.trainingDays || 0), 3],
+ ["days_10", Number(source.trainingDays || 0), 10],
+ ["controlled_5", Number(source.controlledLapStreak || 0), 5],
+ ["five_minute", source.bestFiveMinuteResult ? 1 : 0, 1],
+ ];
+ return definitions.map(([id, current, target]) => ({
+ id,
+ current: Math.max(0, current),
+ target,
+ percent: Math.min(100, Math.max(0, (current / target) * 100)),
+ unlocked: current >= target,
+ }));
+}
+
function getLocalDayKey(timestamp) {
const date = new Date(Number(timestamp || 0));
if (Number.isNaN(date.getTime())) return "unknown";
@@ -267,18 +298,16 @@ export function buildDriverTrainingStats(state, driverId, classId = "") {
const laps = getDriverTrainingLaps(state, driverId, classId);
const lapTimes = laps.map((lap) => lap.lapMs);
const recentLapTimes = lapTimes.slice(-30);
+ const previousWindowLapTimes = lapTimes.slice(Math.max(0, lapTimes.length - 60), Math.max(0, lapTimes.length - 30));
const earlierLapTimes = lapTimes.slice(0, Math.max(0, lapTimes.length - recentLapTimes.length));
const totalLaps = laps.length;
const bestLapMs = totalLaps ? Math.min(...lapTimes) : 0;
const averageLapMs = totalLaps ? Math.round(lapTimes.reduce((sum, value) => sum + value, 0) / totalLaps) : 0;
- const recentAverageMs = recentLapTimes.length
- ? Math.round(recentLapTimes.reduce((sum, value) => sum + value, 0) / recentLapTimes.length)
- : 0;
- const recentP10Ms = percentile(recentLapTimes, 0.1);
- const recentP90Ms = percentile(recentLapTimes, 0.9);
- const consistencySpreadPct = recentAverageMs
- ? ((recentP90Ms - recentP10Ms) / recentAverageMs) * 100
- : 0;
+ const recentAverageMs = average(recentLapTimes);
+ const previousRecentAverageMs = average(previousWindowLapTimes);
+ const consistencySpreadPct = consistencySpread(recentLapTimes);
+ const previousConsistencySpreadPct = consistencySpread(previousWindowLapTimes);
+ const trendSampleReady = recentLapTimes.length >= 10 && previousWindowLapTimes.length >= 10;
const previousBestMs = earlierLapTimes.length ? Math.min(...earlierLapTimes) : 0;
const recentBestMs = recentLapTimes.length ? Math.min(...recentLapTimes) : 0;
const personalBestGainMs = previousBestMs && recentBestMs ? Math.max(0, previousBestMs - recentBestMs) : 0;
@@ -293,18 +322,23 @@ export function buildDriverTrainingStats(state, driverId, classId = "") {
const bestThreeConsecutive = getBestConsecutiveTrainingLaps(stints, 3);
const bestFiveMinuteResult = getBestTrainingDurationResult(stints, 5 * 60 * 1000);
- return {
+ const stats = {
totalLaps,
totalSessions: new Set(laps.map((lap) => lap.sessionId)).size,
trainingDays: dailySummaries.length,
bestLapMs,
averageLapMs,
recentAverageMs,
+ previousRecentAverageMs,
+ averageTrendMs: trendSampleReady ? previousRecentAverageMs - recentAverageMs : 0,
recentBestMs,
previousBestMs,
personalBestGainMs,
controlledLapStreak,
consistencySpreadPct,
+ previousConsistencySpreadPct,
+ consistencyTrendPct: trendSampleReady ? previousConsistencySpreadPct - consistencySpreadPct : 0,
+ trendSampleReady,
recentLapCount: recentLapTimes.length,
lastLapAt: laps.at(-1)?.timestamp || 0,
dailySummaries,
@@ -312,6 +346,7 @@ export function buildDriverTrainingStats(state, driverId, classId = "") {
bestThreeConsecutive,
bestFiveMinuteResult,
};
+ return { ...stats, achievements: buildTrainingAchievements(stats) };
}
export function buildDriverTimingChannelStats(state, driverId, classId = "") {
diff --git a/src/training_views.js b/src/training_views.js
index 214c1c6..7608491 100644
--- a/src/training_views.js
+++ b/src/training_views.js
@@ -137,15 +137,42 @@ export function renderTrainingView(deps) {
`).join("")
: `${escapeHtml(t("training.achievement_empty"))}
`; + const paceTrend = !stats.trendSampleReady + ? t("training.trend_collecting") + : stats.averageTrendMs > 0 + ? t("training.trend_faster", { lap: formatLap(stats.averageTrendMs) }) + : stats.averageTrendMs < 0 + ? t("training.trend_slower", { lap: formatLap(Math.abs(stats.averageTrendMs)) }) + : t("training.trend_stable"); + const consistencyTrend = !stats.trendSampleReady + ? t("training.trend_collecting_short") + : stats.consistencyTrendPct > 0.1 + ? t("training.consistency_better", { value: stats.consistencyTrendPct.toFixed(1) }) + : stats.consistencyTrendPct < -0.1 + ? t("training.consistency_building") + : t("training.trend_stable"); const clubRows = profiles .filter((profile) => !selectedClassId || profile.classIds.includes(selectedClassId)) .map((profile) => ({ profile, driver: profile.representative, stats: profile.id === selectedProfileId ? stats : buildDriverTrainingStats(state, profile.id, selectedClassId) })) - .sort((left, right) => right.stats.totalLaps - left.stats.totalLaps || String(left.driver?.name || "").localeCompare(String(right.driver?.name || ""))) - .map((entry, index) => { + .sort((left, right) => right.stats.lastLapAt - left.stats.lastLapAt || String(left.driver?.name || "").localeCompare(String(right.driver?.name || ""))) + .map((entry) => { const milestone = getNextTrainingMilestone(entry.stats); return `
+
+
+
+
+
+
+
+ ${escapeHtml(t("training.your_progress"))}
+ 30 + 30 ${escapeHtml(t("training.laps").toLowerCase())}
+ ${escapeHtml(t("training.recent_trend"))}
+ ${trainingInsight(t("training.pace_trend"), paceTrend)}
+ ${trainingInsight(t("training.consistency_trend"), consistencyTrend)}
+
+ ${escapeHtml(t("training.trend_hint"))}
+
+
+ ${escapeHtml(t("training.personal_credit"))}
+ ${unlockedAchievements.length}/${(stats.achievements || []).length}
+ ${escapeHtml(t("training.achievements"))}
${achievementMarkup}
+
@@ -347,7 +395,7 @@ export function renderTrainingView(deps) {
-
@@ -470,28 +518,62 @@ export function buildTrainingOverviewRows(state, profiles, buildDriverTrainingSt
stats: buildDriverTrainingStats(state, profile.id, classId),
}));
}).sort((left, right) => (
- right.stats.totalLaps - left.stats.totalLaps
+ right.stats.lastLapAt - left.stats.lastLapAt
|| String(left.driver?.name || "").localeCompare(String(right.driver?.name || ""))
|| String(left.className).localeCompare(String(right.className))
));
}
+export function buildTrainingProgressFeed(rows, limit = 6) {
+ return (Array.isArray(rows) ? rows : [])
+ .filter((row) => Number(row?.stats?.totalLaps || 0) > 0)
+ .sort((left, right) => Number(right.stats.lastLapAt || 0) - Number(left.stats.lastLapAt || 0))
+ .slice(0, Math.max(1, Number(limit || 6)))
+ .map((row) => {
+ const stats = row.stats;
+ if (stats.personalBestGainMs > 0) return { ...row, kind: "personal_best", value: stats.personalBestGainMs };
+ if (stats.trendSampleReady && stats.averageTrendMs > 0) return { ...row, kind: "average_gain", value: stats.averageTrendMs };
+ if (stats.bestFiveMinuteResult) return { ...row, kind: "five_minute", value: stats.bestFiveMinuteResult.lapCount };
+ if (stats.controlledLapStreak >= 5) return { ...row, kind: "controlled_streak", value: stats.controlledLapStreak };
+ return { ...row, kind: "practice_laps", value: stats.totalLaps };
+ });
+}
+
function renderTrainingOverview({ state, dom, t, escapeHtml, formatLap, profiles, buildDriverTrainingStats, getNextTrainingMilestone, setSelectedDriverId, setSelectedClassId, renderView }) {
const rows = buildTrainingOverviewRows(state, profiles, buildDriverTrainingStats);
+ const progressFeed = buildTrainingProgressFeed(rows);
const ledger = Array.isArray(state.training?.ledger) ? state.training.ledger : [];
const activeProfiles = new Set(rows.filter((row) => row.stats.totalLaps > 0).map((row) => row.profile.id)).size;
const recordedSessions = new Set(ledger.map((entry) => String(entry.sessionId || "")).filter(Boolean)).size;
const driverOptions = profiles.map((profile) => (
``
)).join("");
- const tableRows = rows.map((row, index) => {
+ const progressFeedMarkup = progressFeed.length
+ ? progressFeed.map((entry) => {
+ const message = entry.kind === "personal_best"
+ ? t("training.feed_personal_best", { lap: formatLap(entry.value) })
+ : entry.kind === "average_gain"
+ ? t("training.feed_average_gain", { lap: formatLap(entry.value) })
+ : entry.kind === "five_minute"
+ ? t("training.feed_five_minute", { laps: entry.value })
+ : entry.kind === "controlled_streak"
+ ? t("training.feed_controlled_streak", { laps: entry.value })
+ : t("training.feed_practice_laps", { laps: entry.value });
+ return `
+
+ `;
+ }).join("")
+ : `
- ${index + 1}
${escapeHtml(row.className)}
${row.stats.totalLaps}
@@ -528,13 +610,18 @@ function renderTrainingOverview({ state, dom, t, escapeHtml, formatLap, profiles
${trainingStat(t("training.sessions"), String(recordedSessions), t("training.recorded_sessions"))}
+
+
+
+
-
diff --git a/tests/public_training_profile.test.js b/tests/public_training_profile.test.js
index 69c97cf..342cf30 100644
--- a/tests/public_training_profile.test.js
+++ b/tests/public_training_profile.test.js
@@ -88,8 +88,8 @@ test("public profile contains only the selected driver's sanitized aggregates",
assert.equal(profile.profile.name, "Driver One");
assert.equal(profile.profile.brand, "Associated 2WD");
assert.equal(profile.profile.className, "2WD");
- assert.equal(profile.profile.clubRank, 1);
- assert.equal(profile.profile.rankedDrivers, 2);
+ assert.equal("clubRank" in profile.profile, false);
+ assert.equal("rankedDrivers" in profile.profile, false);
assert.equal(profile.branding.clubName, "Test Club");
assert.equal(profile.branding.logoDataUrl, "");
assert.equal(profile.stats.totalLaps, 4);
diff --git a/tests/training_logic.test.js b/tests/training_logic.test.js
index 159f66a..cbcc580 100644
--- a/tests/training_logic.test.js
+++ b/tests/training_logic.test.js
@@ -5,6 +5,7 @@ import {
buildDriverActivePracticeStats,
buildDriverTrainingStats,
buildDriverTimingChannelStats,
+ buildTrainingAchievements,
buildTrainingRecommendation,
getBestConsecutiveTrainingLaps,
getBestTrainingDurationResult,
@@ -337,3 +338,36 @@ test("goal and automatic milestone progress are bounded", () => {
assert.equal(getNextTrainingMilestone({ totalLaps: 250 }).targetLaps, 500);
assert.equal(getNextTrainingMilestone({ totalLaps: 5200 }).targetLaps, 6000);
});
+
+test("development trend compares the latest 30 laps with the preceding 30", () => {
+ const start = new Date(2026, 0, 10, 12, 0, 0).getTime();
+ const ledger = Array.from({ length: 60 }, (_, index) => ({
+ driverId: "driver_1",
+ sessionId: "practice_1",
+ timestamp: start + ((index + 1) * 18_000),
+ lapMs: index < 30 ? 18_000 : 17_000,
+ }));
+ const stats = buildDriverTrainingStats({ training: { ledger } }, "driver_1");
+
+ assert.equal(stats.trendSampleReady, true);
+ assert.equal(stats.previousRecentAverageMs, 18_000);
+ assert.equal(stats.recentAverageMs, 17_000);
+ assert.equal(stats.averageTrendMs, 1_000);
+ assert.equal(stats.consistencyTrendPct, 0);
+});
+
+test("automatic achievements expose unlocked and upcoming personal goals", () => {
+ const achievements = buildTrainingAchievements({
+ totalSessions: 2,
+ totalLaps: 520,
+ trainingDays: 4,
+ controlledLapStreak: 7,
+ bestFiveMinuteResult: { lapCount: 17 },
+ });
+
+ assert.equal(achievements.find((item) => item.id === "first_session").unlocked, true);
+ assert.equal(achievements.find((item) => item.id === "laps_500").unlocked, true);
+ assert.equal(achievements.find((item) => item.id === "laps_1000").percent, 52);
+ assert.equal(achievements.find((item) => item.id === "days_10").unlocked, false);
+ assert.equal(achievements.find((item) => item.id === "five_minute").unlocked, true);
+});
diff --git a/tests/training_views.test.js b/tests/training_views.test.js
index 4583b3e..164ba38 100644
--- a/tests/training_views.test.js
+++ b/tests/training_views.test.js
@@ -3,7 +3,7 @@ import assert from "node:assert/strict";
import { getDriverProfileGroups } from "../src/driver_profile_logic.js";
import { buildDriverTrainingStats } from "../src/training_logic.js";
-import { buildTrainingOverviewRows, resolveTrainingProfile } from "../src/training_views.js";
+import { buildTrainingOverviewRows, buildTrainingProgressFeed, resolveTrainingProfile } from "../src/training_views.js";
test("training opens without implicitly selecting the first driver", () => {
const profiles = [{ id: "profile_1", driverIds: ["driver_1"] }];
@@ -33,3 +33,15 @@ test("training overview keeps each driver class on a separate statistics row", (
assert.equal(rows.find((row) => row.classId === "2wd").stats.totalLaps, 2);
assert.equal(rows.find((row) => row.classId === "4wd").stats.totalLaps, 1);
});
+
+test("training progress feed highlights personal development instead of ranking drivers", () => {
+ const rows = [
+ { profile: { id: "p1" }, driver: { name: "Alex" }, classId: "2wd", className: "2WD", stats: { totalLaps: 80, lastLapAt: 200, personalBestGainMs: 250 } },
+ { profile: { id: "p2" }, driver: { name: "Kim" }, classId: "4wd", className: "4WD", stats: { totalLaps: 120, lastLapAt: 100, trendSampleReady: true, averageTrendMs: 400 } },
+ ];
+ const feed = buildTrainingProgressFeed(rows);
+
+ assert.deepEqual(feed.map((entry) => entry.profile.id), ["p1", "p2"]);
+ assert.equal(feed[0].kind, "personal_best");
+ assert.equal(feed[1].kind, "average_gain");
+});
| # | ${escapeHtml(t("training.driver"))} | ${escapeHtml(t("training.laps"))} | ${escapeHtml(t("training.training_days"))} | ${escapeHtml(t("training.best_lap"))} | ${escapeHtml(t("training.next_target"))} |
|---|---|---|---|---|---|
| ${escapeHtml(t("training.driver"))} | ${escapeHtml(t("training.laps"))} | ${escapeHtml(t("training.training_days"))} | ${escapeHtml(t("training.best_lap"))} | ${escapeHtml(t("training.next_target"))} |
${escapeHtml(t("training.feed_empty"))}
`; + const tableRows = rows.map((row) => { const milestone = getNextTrainingMilestone(row.stats); const lastActivity = row.stats.lastLapAt ? new Date(row.stats.lastLapAt).toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" }) : "-"; return `${escapeHtml(t("training.progress_not_positions"))}
${escapeHtml(t("training.progress_feed"))}
${progressFeedMarkup}
+ ${escapeHtml(t("training.club_progress"))}
${rows.length}${escapeHtml(t("training.overview_class_hint"))}
| # | ${escapeHtml(t("training.driver"))} | ${escapeHtml(t("training.class"))} | ${escapeHtml(t("training.laps"))} | ${escapeHtml(t("training.training_days"))} | ${escapeHtml(t("training.best_lap"))} | ${escapeHtml(t("training.last_activity"))} | ${escapeHtml(t("training.next_target"))} |
|---|---|---|---|---|---|---|---|
| ${escapeHtml(t("training.driver"))} | ${escapeHtml(t("training.class"))} | ${escapeHtml(t("training.laps"))} | ${escapeHtml(t("training.training_days"))} | ${escapeHtml(t("training.best_lap"))} | ${escapeHtml(t("training.last_activity"))} | ${escapeHtml(t("training.next_target"))} |