diff --git a/AGENTS.md b/AGENTS.md index 1786071..e2cfc79 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -4,6 +4,7 @@ - `bun run ci` must run the Ultracite-configured Biome checks and Tailwind CSS language-server diagnostics automatically, followed by the unit tests, TypeScript check, and production build. - Fix all reported issues rather than bypassing or disabling checks unless the project requirements explicitly demand an exception. - Keep the codebase as DRY as practical: before adding constants, calculations, formatting, parsing, labels, or state-derivation logic, search for an existing domain utility and reuse or extend it. Consolidate meaningful duplication into clearly named domain modules, but do not introduce generic abstractions that hide simple behavior or couple unrelated concepts solely because their implementations look similar. +- Make dashboard numbers as large, high-contrast, and easy to read at a glance as the available layout practically allows. Numeric ride status must be visually dominant over its label; do not use caption-sized values when space exists for prominent dashboard typography. - Do not scatter raw string literals for shared domain modes through comparisons or state construction. Define or reuse a named `as const` domain object, derive its union type from those values, centralize validation of persisted or external strings, and reference the named members in application code. Prefer an exhaustive `switch` when every variant has distinct behavior. Raw strings remain appropriate for display text, object property names, browser or protocol values, and boundary-focused tests. - Treat TypeScript types as authoritative after data crosses a validated boundary. Do not add scattered inline runtime `typeof` checks for typed domain data; use ordinary presence checks for optional typed fields. Validate JSON, storage, browser, protocol, and other untyped inputs once through named reusable guards in `src/lib/type-guards.ts` or a focused domain parser. Runtime `typeof` checks belong inside those guards; type-level queries such as `typeof CONSTANT` remain appropriate. - Never include AI assistant, product, vendor, or model names (such as `codex` or `openai`) in branch names, commit messages, pull request titles or descriptions, issue titles or descriptions, tags, release notes, or any other repository-visible metadata or content. diff --git a/README.md b/README.md index 23462d7..766d511 100644 --- a/README.md +++ b/README.md @@ -13,12 +13,14 @@ Bike trainer control web app using Web Bluetooth. Tested with Wahoo KICKR Core 2 - Connects to compatible bike trainers and standard Bluetooth heart rate monitors through Web Bluetooth, remembers authorized devices, and automatically reconnects when possible. - Shows live speed, power, cadence, heart rate, elapsed time, distance, and estimated calories, with MPH and KM/H display modes. - Provides direct resistance control with buttons, a slider, and keyboard shortcuts with matching button feedback, shows smoothing progress inside the slider thumb, and records resistance changes alongside the other ride metrics. -- Replaces direct resistance controls with a focused 1–24 virtual shifting interface whenever Zwift Click V2 is paired; shifting becomes available once the trainer and both controllers are connected, and the Click minus/plus buttons, on-screen controls, and keyboard down/up arrows then make quick, three-point resistance changes with matching visual feedback, holding a shift control continues shifting, and sessions record and graph the selected gear instead of resistance. -- Automatically records while pedaling, auto-pauses during inactivity, supports manual pause and resume, and allows a session to end at any time—even before trainer data arrives. -- Tracks complete time-series data plus averages and maximums for power, cadence, heart rate, speed, and either resistance or virtual gear, with large, high-visibility live metric cards, oversized numeric ride totals with subdued unit labels, and focused or combined chart views with subtle separator bands between stacked metrics. +- Offers original terrain workouts built as repeatable courses, with gentle, rolling, and climbing options and distinctive winding top-down route shapes. Courses explicitly support loops and out-and-back routes; an out-and-back follows the supplied path to its turnaround, then reverses the same location and elevation data back to the start before repeating. Prairie Roll adds a non-intersecting, curving 15-mile loop of long, gradual rollers centered around 20% resistance and ranging from roughly 15–25%. Granite Switchbacks adds a sustained four-mile ascent whose hairpin corners briefly get steeper before immediately returning to the steady climbing grade, followed by a ridge and a descending sequence of five recovery rollers. Ridgeline Time Trial is a ten-mile out-and-back with a gradual five-mile, roughly 300-foot hillclimb to the turnaround and the identical terrain in reverse on the return. Every course begins flat without giving nearly level routes an unnecessarily long rollout: low-climb courses use about 0.4 km, moderate rollers use about 0.8 km, and climbing-focused courses retain a 1.5 km rollout. The course then automatically adjusts trainer resistance from the current grade, tracks the rider on aligned, smoothly curved top-down and elevation views with a clearly labelled ridden-this-lap or ridden-this-trip path and pulsing position markers while pedaling, and uses clear mid-contrast preview lines with a shared elevation scale so gentle rollers remain visibly low beside genuinely mountainous routes. It shows course percentage, current grade, and terrain resistance directly on the map, and derives cumulative ride climbing and downhill from course distance so those totals remain aligned with the advertised full-course climb. Elevation appears in feet with MPH or meters with KM/H, and terrain totals and progress are recorded with the session and preserved in saved history and TCX import/export. Restored or currently open sessions always resolve bundled workout IDs to the latest course definition, preventing older embedded map geometry from lingering after a course update. A workout can be selected before riding or planned while viewing a completed session; a newly planned workout immediately replaces the prior course on the dashboard at 0% progress without changing the completed ride's recorded data. It then remains locked from the moment riding begins until that session ends; definition refreshes for that same workout remain allowed without opening a path to switch courses. Paired shift controllers can remain connected and are ignored while a workout controls resistance. Workout terrain is modeled separately from trainer control so virtual shifting can be integrated later without changing course data. +- Downloads terrain workouts as standard GPX 1.1 files containing geographic track points and elevation data, with names and descriptions readable by ordinary GPX tools and Ride Control extensions for stable ids, difficulty, baseline resistance, exact workout distance, and loop or out-and-back course type. Valid GPX tracks or routes from other tools can be imported into a custom library saved only on the current device; closed paths become loops automatically, while open paths become out-and-back workouts with a generated return leg. Their top-down geometry is derived from latitude and longitude, terrain resistance is derived from elevation, and missing Ride Control metadata receives safe defaults. Stable workout ids—or a route fingerprint for third-party GPX—prevent built-in or previously imported workouts from being uploaded again. Imported entries can be removed, large tracks are sampled for efficient riding, and the geographic source model is ready for a future workout editor. +- Replaces direct resistance controls with a focused 1–24 virtual shifting interface whenever Zwift Click V2 is paired and no terrain workout is active; shifting becomes available once the trainer and both controllers are connected, and the Click minus/plus buttons, on-screen controls, and keyboard down/up arrows then make quick, three-point resistance changes with matching visual feedback, holding a shift control continues shifting, and sessions record and graph the selected gear instead of resistance. +- Automatically records while pedaling, auto-pauses during inactivity, supports manual pause and resume, and allows a session to end at any time—even before trainer data arrives. Finishing a ride smoothly returns a connected trainer to 10% resistance; if it is disconnected, 10% is remembered and applied when it reconnects. +- Tracks complete time-series data plus averages and maximums for power, cadence, heart rate, speed, and either resistance or virtual gear, with large, high-visibility live metric cards, oversized numeric ride totals with subdued unit labels, and focused or combined chart views with subtle separator bands between stacked metrics. Workout elevation is recorded across the entire ride, so the course profile repeats in the graph for every completed loop. - Lets riders explicitly save a completed session or end it without saving, while keeping start-new and continue-session choices to two clear, context-aware actions; saved sessions use browser-managed IndexedDB storage with optional comments and ride feeling, and persistent browser storage is requested when supported. - Organizes saved sessions by local date and time in a slide-out history tray, with clear date ranges for rides that span midnight, paginated loading, detailed metrics and charts, keyboard navigation with grouped shortcut help, and permanent deletion. -- Downloads saved rides as Strava-compatible TCX files, including timestamps, distance, speed, power, cadence, heart rate, resistance or virtual gear, calories, ride feeling, comments, and a unique Ride Control session identifier for reliable duplicate detection. +- Downloads saved rides as Strava-compatible TCX files, including timestamps, distance, speed, power, cadence, heart rate, resistance or virtual gear, terrain workout metadata and elevation samples, calories, ride feeling, comments, and a unique Ride Control session identifier for reliable duplicate detection. - Imports an individual TCX file or every TCX file inside nested folders in a ZIP directly into local session history, preserves compatible ride data and Ride Control session identifiers, detects duplicates by identifier or stable ride data for legacy exports, and continues past individual invalid files in a batch; imported rides permanently retain their import timestamp and a subtle import icon, while only the latest batch remains highlighted until the history tray closes. - Downloads every locally saved ride at once as a compressed ZIP containing a folder of individual TCX files, with collision-safe filenames when sessions share the same start time. - Continues any saved session in a new unsaved copy while preserving its recorded time, distance, calories, samples, averages, maximums, and original start time. @@ -48,6 +50,14 @@ outside shared application state. The application component coordinates focused uses an explicit overlay state for mutually exclusive trays, renders every side tray through one animated and accessible shell, and delegates save/discard/start/continue transitions to a store-backed session workflow. Temporary form inputs remain local React state. +Terrain workouts are an independent course domain layered over session distance. Each bundled +course keeps its editable metadata, map geometry, elevation, and resistance baseline in an +individual JSON definition under `src/workouts`; shared factories derive the normalized runtime +course geometry and terrain behavior. Course geometry +produces grade, elevation, current and completed course counts, map position, and a bounded resistance +target. Recorded elevation appears alongside the other session graphs for the full ride and repeats +the course profile on every loop or out-and-back trip, while route progress stays portable in saved sessions and TCX +files and leaves room to compose the same terrain with virtual gearing later. Shared domain utilities own unit conversions, numeric bounds, storage keys, metric presentation, and repeated dialog and keyboard behavior so those rules stay consistent across views and exports. diff --git a/src/app.tsx b/src/app.tsx index e01aea0..50785b1 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -13,22 +13,30 @@ import { SessionOverview } from './components/session-overview'; import { SessionSaveDialog } from './components/session-save-dialog'; import { TrainingControl } from './components/training-control'; import { WelcomeDialog } from './components/welcome-dialog'; +import { WorkoutPanel } from './components/workout-panel'; +import { WorkoutProgress } from './components/workout-progress'; import { useGearControl } from './hooks/use-gear-control'; import { useHeartRateMonitor } from './hooks/use-heart-rate-monitor'; import { useSession } from './hooks/use-session'; import { useSessionWorkflow } from './hooks/use-session-workflow'; import { useTrainer } from './hooks/use-trainer'; +import { useWorkoutResistance } from './hooks/use-workout'; +import { useWorkoutLibrary } from './hooks/use-workout-library'; import { useZwiftClick } from './hooks/use-zwift-click'; +import { APP_OVERLAY, type AppOverlay } from './lib/app-overlay'; import { CONTROL_MODE, type ControlMode } from './lib/control-mode'; import { eventTargetsInteractiveControl, keyboardEventHasModifiers } from './lib/dom'; import { type AppShortcut, appShortcutForKey, gearingKeyboardShortcuts } from './lib/keyboard'; import { requestUnloadConfirmation, sessionNeedsUnloadWarning } from './lib/session'; import { rememberWelcomeDismissal, shouldShowWelcome } from './lib/welcome'; +import { + workoutDashboardPreview, + workoutSelectionLocked, + workoutTerrainAtDistance, +} from './lib/workouts'; import { MAX_CLICK_CONTROLLERS } from './lib/zwift-click'; import { preferencesStore } from './stores/preferences-store'; -import type { Metrics, SavedSession } from './types'; - -type AppOverlay = 'devices' | 'history' | 'shortcuts' | 'welcome'; +import type { Metrics, SavedSession, WorkoutCourse } from './types'; function shouldIgnoreShortcut(event: KeyboardEvent) { return ( @@ -56,9 +64,9 @@ function controlModeForClick(paired: boolean): ControlMode { export function App() { const trainer = useTrainer(); const [activeOverlay, setActiveOverlay] = useState(() => - shouldShowWelcome() ? 'welcome' : undefined + shouldShowWelcome() ? APP_OVERLAY.WELCOME : undefined ); - const devicesOpen = activeOverlay === 'devices'; + const devicesOpen = activeOverlay === APP_OVERLAY.DEVICES; const clickShiftRef = useRef<(change: number) => void>(() => undefined); const handleClickShift = useCallback((change: number) => clickShiftRef.current(change), []); const click = useZwiftClick(handleClickShift, trainer.setNotice, devicesOpen); @@ -70,6 +78,7 @@ export function App() { ); const { connected } = trainer; const speedUnit = useSelector(preferencesStore, (preferences) => preferences.speedUnit); + const workoutLibrary = useWorkoutLibrary(); const virtualShiftingReady = trainer.connected && click.connectedCount === MAX_CLICK_CONTROLLERS; const gearControl = useGearControl({ @@ -89,11 +98,29 @@ export function App() { trainer.lastPedalingAt, trainer.trainerReportsDistance ); - const workflow = useSessionWorkflow(session, trainer.setNotice); + const dashboardWorkout = workoutDashboardPreview({ + distance: session.rideDistance, + elevationTotals: session.elevationTotals, + ended: session.ended, + selectedWorkout: session.selectedWorkout, + workout: session.workout, + }); + const workoutTerrain = dashboardWorkout.workout + ? workoutTerrainAtDistance(dashboardWorkout.workout.course, dashboardWorkout.distance) + : undefined; + useWorkoutResistance({ + active: !session.ended, + connected: trainer.connected, + onResistanceChange: trainer.updateProgramResistance, + onRestoreResistance: trainer.restoreManualResistance, + terrain: workoutTerrain, + }); + const workflow = useSessionWorkflow(session, trainer.setNotice, trainer.settleAfterRide); const dashboardKeyboardEnabled = activeOverlay === undefined && !workflow.saveDialogOpen; + const virtualShiftingActive = click.paired && !dashboardWorkout.workout; clickShiftRef.current = shiftHandlerUnlessBlocked( gearControl.shiftGear, - !dashboardKeyboardEnabled + !(dashboardKeyboardEnabled && virtualShiftingActive) ); const handleNewSessionShortcut = useCallback( (event: KeyboardEvent) => { @@ -123,15 +150,16 @@ export function App() { }, [warnBeforeUnload]); useEffect(() => { - trainer.setKeyboardControlsEnabled(dashboardKeyboardEnabled); - trainer.setGearControlsEnabled(click.paired); - gearControl.setKeyboardControlsEnabled(dashboardKeyboardEnabled); + trainer.setKeyboardControlsEnabled(dashboardKeyboardEnabled && !dashboardWorkout.workout); + trainer.setGearControlsEnabled(virtualShiftingActive); + gearControl.setKeyboardControlsEnabled(dashboardKeyboardEnabled && virtualShiftingActive); }, [ - click.paired, dashboardKeyboardEnabled, gearControl.setKeyboardControlsEnabled, trainer.setGearControlsEnabled, trainer.setKeyboardControlsEnabled, + dashboardWorkout.workout, + virtualShiftingActive, ]); useEffect(() => { @@ -145,7 +173,7 @@ export function App() { }, history: (event) => { event.preventDefault(); - setActiveOverlay('history'); + setActiveOverlay(APP_OVERLAY.HISTORY); }, newSession: handleNewSessionShortcut, pause: (event) => { @@ -154,7 +182,7 @@ export function App() { }, shortcuts: (event) => { event.preventDefault(); - setActiveOverlay('shortcuts'); + setActiveOverlay(APP_OVERLAY.SHORTCUTS); }, }; const handleShortcut = (event: KeyboardEvent) => { @@ -194,10 +222,41 @@ export function App() { }, [workflow.requestContinuation] ); + const selectWorkout = useCallback( + (course?: WorkoutCourse) => { + session.selectWorkout(course); + setActiveOverlay(undefined); + }, + [session.selectWorkout] + ); + const selectedWorkoutCourse = session.selectedWorkout?.course; + const selectedWorkoutId = selectedWorkoutCourse?.id; + const workoutLocked = workoutSelectionLocked(session); + useEffect(() => { + if (!selectedWorkoutCourse) { + return; + } + const currentDefinition = workoutLibrary.courses.find( + (course) => course.id === selectedWorkoutCourse.id + ); + if (currentDefinition && currentDefinition !== selectedWorkoutCourse) { + session.selectWorkout(currentDefinition); + } + }, [selectedWorkoutCourse, session.selectWorkout, workoutLibrary.courses]); + const removeWorkout = useCallback( + (courseId: string) => { + if (selectedWorkoutId === courseId) { + session.selectWorkout(undefined); + } + workoutLibrary.removeCourse(courseId); + }, + [selectedWorkoutId, session.selectWorkout, workoutLibrary.removeCourse] + ); const connectedDeviceCount = Number(trainer.connected) + Number(heartRate.connected) + click.connectedCount; const pairedDeviceCount = Number(trainer.paired) + Number(heartRate.paired) + click.pairedCount; + const workoutName = selectedWorkoutCourse?.name; const devicesConnecting = [ trainer.connectionBusy, heartRate.busy, @@ -214,17 +273,20 @@ export function App() { isRiding={session.isRiding} manuallyPaused={session.manuallyPaused} onEnd={workflow.endSession} + onOpenWorkouts={() => setActiveOverlay(APP_OVERLAY.WORKOUTS)} onRequestNew={workflow.requestNewSession} onSave={workflow.openSaveDialog} onTogglePause={session.togglePause} saveResolved={workflow.sessionIsResolved} + workoutName={workoutName} + workoutSelectionLocked={workoutLocked} /> setActiveOverlay('devices')} - onOpenHistory={() => setActiveOverlay('history')} - onOpenShortcuts={() => setActiveOverlay('shortcuts')} + onOpenDevices={() => setActiveOverlay(APP_OVERLAY.DEVICES)} + onOpenHistory={() => setActiveOverlay(APP_OVERLAY.HISTORY)} + onOpenShortcuts={() => setActiveOverlay(APP_OVERLAY.SHORTCUTS)} onSelectSpeedUnit={preferencesStore.actions.selectSpeedUnit} pairedDeviceCount={pairedDeviceCount} speedUnit={speedUnit} @@ -238,6 +300,15 @@ export function App() { rideDistance={session.rideDistance} speedUnit={speedUnit} /> + {dashboardWorkout.workout && workoutTerrain ? ( + + ) : null} - + {workoutTerrain ? null : ( + + )} - setActiveOverlay('welcome')} /> + setActiveOverlay(APP_OVERLAY.WELCOME)} /> setActiveOverlay(undefined)} onStartNew={continueFromHistory} - open={activeOverlay === 'history'} + open={activeOverlay === APP_OVERLAY.HISTORY} + speedUnit={speedUnit} + /> + setActiveOverlay(undefined)} + onImportFile={workoutLibrary.importFile} + onRemoveCourse={removeWorkout} + onSelect={selectWorkout} + open={activeOverlay === APP_OVERLAY.WORKOUTS} + selectionLocked={workoutLocked} speedUnit={speedUnit} /> setActiveOverlay(undefined)} - open={activeOverlay === 'shortcuts'} - shortcuts={click.paired ? gearingKeyboardShortcuts : undefined} + open={activeOverlay === APP_OVERLAY.SHORTCUTS} + shortcuts={virtualShiftingActive ? gearingKeyboardShortcuts : undefined} /> - + ); } diff --git a/src/components/dashboard-layout.tsx b/src/components/dashboard-layout.tsx index 357614b..beee4dd 100644 --- a/src/components/dashboard-layout.tsx +++ b/src/components/dashboard-layout.tsx @@ -1,4 +1,4 @@ -import type { ReactNode } from 'react'; +import { Children, type ReactNode } from 'react'; export function Dashboard({ children }: { children: ReactNode }) { return
{children}
; @@ -9,5 +9,6 @@ export function DashboardToolbar({ children }: { children: ReactNode }) { } export function DashboardWorkspace({ children }: { children: ReactNode }) { - return
{children}
; + const columns = Children.toArray(children).length > 1 ? 'xl:grid-cols-[1.45fr_.55fr]' : ''; + return
{children}
; } diff --git a/src/components/session-chart.tsx b/src/components/session-chart.tsx index f3f20a6..355854c 100644 --- a/src/components/session-chart.tsx +++ b/src/components/session-chart.tsx @@ -1,13 +1,24 @@ import { useSelector } from '@tanstack/react-store'; import { Fragment, useCallback, useEffect, useMemo } from 'react'; import { chartModesForControl, chartPath, roundedChartMaximum } from '../lib/chart'; +import { CHART_MODE } from '../lib/chart-mode'; import { CONTROL_MODE, isControlMode } from '../lib/control-mode'; import { eventTargetsEditableControl, keyboardEventHasModifiers } from '../lib/dom'; import { formatChartSeconds } from '../lib/format'; import { MAX_GEAR, MIN_GEAR } from '../lib/gears'; -import { METRIC_PRESENTATION, STANDARD_METRIC_KEYS } from '../lib/metric-presentation'; +import { + ELEVATION_METRIC_PRESENTATION, + METRIC_PRESENTATION, + STANDARD_METRIC_KEYS, +} from '../lib/metric-presentation'; import { MAX_RESISTANCE, MIN_RESISTANCE } from '../lib/resistance'; -import { convertSpeed, minimumSpeedChartMaximum, speedUnitLabel } from '../lib/units'; +import { + convertElevation, + convertSpeed, + elevationUnitLabel, + minimumSpeedChartMaximum, + speedUnitLabel, +} from '../lib/units'; import { preferencesStore } from '../stores/preferences-store'; import type { ChartMode, ControlMode, MetricSample, RoutePoint, SpeedUnit } from '../types'; @@ -107,11 +118,12 @@ export function SessionChart({ ? resolvedControlMode : selectedMode; const effectiveMode = - modeForAvailableControl === 'elevation' && route.length === 0 - ? 'all' + modeForAvailableControl === CHART_MODE.ELEVATION && route.length === 0 + ? CHART_MODE.ALL : modeForAvailableControl; const series = useMemo(() => { const speedValues = history.map((sample) => convertSpeed(sample.speed, speedUnit)); + const routeElevations = route.map((point) => convertElevation(point.elevation, speedUnit)); const standardSeries = STANDARD_METRIC_KEYS.map((key) => { const presentation = METRIC_PRESENTATION[key]; const values = history.map((sample) => sample[key]); @@ -152,6 +164,24 @@ export function SessionChart({ unit: '%', values: history.map((sample) => sample.resistance), }; + const elevationSeries = route.length + ? [ + { + chartMaximum: Math.max(...routeElevations), + color: ELEVATION_METRIC_PRESENTATION.chartColor, + decimals: 0, + key: CHART_MODE.ELEVATION, + label: ELEVATION_METRIC_PRESENTATION.label, + minimum: Math.min(...routeElevations), + unit: elevationUnitLabel(speedUnit), + values: history.map((sample) => + sample.elevation === undefined + ? undefined + : convertElevation(sample.elevation, speedUnit) + ), + }, + ] + : []; return [ { chartMaximum: roundedChartMaximum( @@ -161,7 +191,7 @@ export function SessionChart({ ), color: METRIC_PRESENTATION.speed.chartColor, decimals: 1, - key: 'speed' as const, + key: CHART_MODE.SPEED, label: METRIC_PRESENTATION.speed.label, minimum: 0, unit: speedUnitLabel(speedUnit), @@ -169,23 +199,23 @@ export function SessionChart({ }, ...standardSeries, controlSeries, + ...elevationSeries, ]; - }, [history, resolvedControlMode, speedUnit]); + }, [history, resolvedControlMode, route, speedUnit]); const visibleSeries = - effectiveMode === 'all' ? series : series.filter((item) => item.key === effectiveMode); + effectiveMode === CHART_MODE.ALL + ? series + : series.filter((item) => item.key === effectiveMode); const availableModes = useMemo( () => route.length ? [ ...chartModesForControl(resolvedControlMode), - { label: 'Elevation', value: 'elevation' as const }, + { label: 'Elevation', value: CHART_MODE.ELEVATION }, ] : chartModesForControl(resolvedControlMode), [resolvedControlMode, route.length] ); - const elevationValues = route.map((point) => point.elevation); - const elevationMinimum = elevationValues.length ? Math.min(...elevationValues) : 0; - const elevationMaximum = elevationValues.length ? Math.max(...elevationValues) : 1; const historyPositions = history.map((sample) => sample.elapsedSeconds); const historyStart = history[0]?.elapsedSeconds ?? 0; const historySeconds = @@ -236,7 +266,7 @@ export function SessionChart({ onClick={() => selectMode(mode.value)} type="button" > - {mode.value === 'all' ? null : ( + {mode.value === CHART_MODE.ALL ? null : (
- {(effectiveMode === 'elevation' ? route.length : history.length) === 0 ? ( + {history.length === 0 ? (
Connect and pedal to graph live session data
) : null} - {effectiveMode === 'elevation' ? ( - point.distance)} - title="Route elevation" - unit="m" - values={elevationValues} - /> - ) : ( - visibleSeries.map((item, index) => ( - - ( + + + {effectiveMode === CHART_MODE.ALL && + index < visibleSeries.length - 1 ? ( + + {session.workout && workoutTerrain ? ( + + ) : null}
{[...standardMetrics, controlMetric].map((metric) => ( @@ -223,7 +237,7 @@ export function SessionDetail({ controlMode={session.controlMode} history={session.history} keyboardEnabled={chartKeyboardEnabled} - route={EMPTY_ROUTE} + route={session.workout?.course.points ?? EMPTY_ROUTE} speedUnit={speedUnit} />
diff --git a/src/components/session-history-list.tsx b/src/components/session-history-list.tsx index 6b9a457..3d572ee 100644 --- a/src/components/session-history-list.tsx +++ b/src/components/session-history-list.tsx @@ -74,6 +74,7 @@ export function SessionHistoryList({ {session.feeling ? ` · ${feelingLabel(session.feeling)}` : null} + {session.workoutName ? ` · ${session.workoutName}` : null}

{imported ? ( @@ -35,7 +37,7 @@ export function SessionOverview({ controlMode={controlMode} history={history} keyboardEnabled={keyboardEnabled} - route={EMPTY_ROUTE} + route={workout?.course.points ?? EMPTY_ROUTE} speedUnit={speedUnit} />
diff --git a/src/components/session-save-dialog.tsx b/src/components/session-save-dialog.tsx index 8ffa172..6cb7018 100644 --- a/src/components/session-save-dialog.tsx +++ b/src/components/session-save-dialog.tsx @@ -82,6 +82,7 @@ export function SessionSaveDialog({

Started at {formatSessionTime(session.startedAt)} + {session.workout ? ` · ${session.workout.course.name}` : null}

+ {custom ? ( + + ) : null} + + + + + + ); +} + +export function WorkoutPanel({ + activeCourse, + courses, + customCourseIds, + ended, + onClose, + onImportFile, + onRemoveCourse, + onSelect, + open, + selectionLocked, + speedUnit, +}: { + activeCourse?: WorkoutCourse; + courses: WorkoutCourse[]; + customCourseIds: ReadonlySet; + ended: boolean; + onClose: () => void; + onImportFile: (file: File) => Promise; + onRemoveCourse: (courseId: string) => void; + onSelect: (course?: WorkoutCourse) => void; + open: boolean; + selectionLocked: boolean; + speedUnit: SpeedUnit; +}) { + const importInput = useRef(null); + const [importing, setImporting] = useState(false); + const [importStatus, setImportStatus] = useState(''); + const [importError, setImportError] = useState(''); + let notice = + 'Choose a course before you start riding. The route repeats until the session ends.'; + if (ended) { + notice = 'Choose a workout for your next session, then start it when you are ready.'; + } else if (selectionLocked) { + notice = 'End the current session before changing the workout.'; + } + + const importWorkout = async (file: File) => { + setImporting(true); + setImportStatus(''); + setImportError(''); + try { + const course = await onImportFile(file); + setImportStatus(`${course.name} imported and saved on this device.`); + } catch (error) { + setImportError(errorMessage(error)); + } finally { + setImporting(false); + } + }; + + return ( + +
+
+
+

+ Terrain workouts +

+

+ Resistance follows the climbs and descents while your position moves + along the route. +

+
+
+ { + const file = event.currentTarget.files?.[0]; + event.currentTarget.value = ''; + if (file) { + importWorkout(file); + } + }} + ref={importInput} + type="file" + /> + + +
+
+
+

{notice}

+ {importStatus ? ( +

+ {importStatus} +

+ ) : null} + {importError ? ( +

+ {importError} +

+ ) : null} +
+
+ {courses.map((course) => ( + onRemoveCourse(course.id)} + onSelect={() => onSelect(course)} + selected={activeCourse?.id === course.id} + speedUnit={speedUnit} + /> + ))} +
+ {activeCourse && !selectionLocked ? ( +
+ +
+ ) : null} +
+ + ); +} diff --git a/src/components/workout-progress.tsx b/src/components/workout-progress.tsx new file mode 100644 index 0000000..eb160d9 --- /dev/null +++ b/src/components/workout-progress.tsx @@ -0,0 +1,135 @@ +import { formatGrade } from '../lib/format'; +import { formatDistanceProgress, formatElevation } from '../lib/units'; +import { WORKOUT_ROUTE_TYPE, WORKOUT_VIEW } from '../lib/workout-schema'; +import type { ElevationTotals, SessionWorkout, SpeedUnit, WorkoutTerrain } from '../types'; +import { WorkoutRouteVisualization } from './workout-route-visualization'; + +interface WorkoutStat { + label: string; + value: string; +} + +function WorkoutStats({ + highlighted = false, + stats, +}: { + highlighted?: boolean; + stats: WorkoutStat[]; +}) { + const labelSize = highlighted ? 'text-[10px]' : 'text-[9px]'; + const valueSize = highlighted ? 'text-3xl sm:text-4xl' : 'text-xl sm:text-2xl'; + return ( +
+ {stats.map((stat) => ( +
+

+ {stat.label} +

+

+ {stat.value} +

+
+ ))} +
+ ); +} + +export function WorkoutProgress({ + elevationTotals, + isRiding, + speedUnit, + terrain, + workout, +}: { + elevationTotals: ElevationTotals; + isRiding: boolean; + speedUnit: SpeedUnit; + terrain: WorkoutTerrain; + workout: SessionWorkout; +}) { + const { course } = workout; + const outAndBack = course.routeType === WORKOUT_ROUTE_TYPE.OUT_AND_BACK; + const completionUnit = outAndBack ? 'trip' : 'lap'; + const elevationStats = [ + { label: 'Course climb', value: formatElevation(course.elevationGain, speedUnit) }, + { label: 'Climbed', value: formatElevation(elevationTotals.ascent, speedUnit) }, + { label: 'Downhill', value: formatElevation(elevationTotals.descent, speedUnit) }, + ]; + const mapStats = [ + { label: 'Progress', value: `${Math.round(terrain.progress * 100)}%` }, + { + label: 'Grade', + value: formatGrade(terrain.grade), + }, + { label: 'Resistance', value: `${terrain.resistance}%` }, + ]; + return ( +
+
+
+

{course.name}

+ + + Ridden this {completionUnit} + +
+
+

+ {outAndBack ? 'Trips completed' : 'Laps completed'} +

+ + {terrain.completedLaps} + +
+
+
+
+
+
+

+ Course map +

+

+ {formatDistanceProgress( + terrain.distance, + course.distance, + speedUnit + )} +

+
+ +
+ +
+
+
+

+ Elevation profile +

+ +
+ +
+
+
+ ); +} diff --git a/src/components/workout-route-visualization.tsx b/src/components/workout-route-visualization.tsx new file mode 100644 index 0000000..af81df1 --- /dev/null +++ b/src/components/workout-route-visualization.tsx @@ -0,0 +1,140 @@ +import { useId } from 'react'; +import { WORKOUT_VIEW, type WorkoutView } from '../lib/workout-schema'; +import { + workoutMapPath, + workoutMapProgressPath, + workoutProfilePath, + workoutProfilePosition, +} from '../lib/workouts'; +import type { WorkoutCourse, WorkoutTerrain } from '../types'; + +const ROUTE_STROKE = '#64748b'; + +interface RouteMarker { + x: number; + y: number; +} + +function WorkoutRouteMarker({ + isMap, + isRiding, + marker, +}: { + isMap: boolean; + isRiding: boolean; + marker?: RouteMarker; +}) { + if (!marker) { + return null; + } + if (isMap) { + return ( + + + + ); + } + return ( +