refactor(web): extract ride detail script

1 files changed, 245 insertions, 0 deletions

diff --git a/web/static/ride-detail.js b/web/static/ride-detail.js
new file mode 100644
index 0000000..178b486
--- /dev/null
+++ b/web/static/ride-detail.js
@@ -0,0 +1,245 @@
+(() => {
+  const mapElement = document.getElementById("ride-map");
+  const routeElement = document.getElementById("ride-route");
+  const profileElement = document.getElementById("ride-profile");
+  const canvas = document.getElementById("ride-profile-chart");
+  const hoverOutput = document.getElementById("ride-profile-hover");
+  if (!mapElement || !routeElement || !profileElement || !canvas || !hoverOutput) return;
+  const colorProbe = document.createElement("span");
+  colorProbe.hidden = true;
+  document.body.append(colorProbe);
+  const resolveColor = (name) => {
+    colorProbe.style.color = `var(${name})`;
+    return getComputedStyle(colorProbe).color;
+  };
+  const colors = {
+    accent: resolveColor("--color-accent"),
+    forest: resolveColor("--color-forest"),
+    subtle: resolveColor("--color-subtle"),
+    plotSurface: resolveColor("--color-plot-surface"),
+    plotSurfaceOverlay: resolveColor("--color-plot-surface-overlay"),
+    grid: resolveColor("--color-plot-grid"),
+    accentFill: resolveColor("--color-accent-fill"),
+    climbLabel: resolveColor("--color-climb-label"),
+    crossing: resolveColor("--color-crossing"),
+    crossingLabel: resolveColor("--color-crossing-label"),
+    hoverLine: resolveColor("--color-hover-line"),
+  };
+  colorProbe.remove();
+  const route = JSON.parse(routeElement.textContent);
+  const profile = JSON.parse(profileElement.textContent);
+  const map = L.map(mapElement);
+  const tiles = L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
+    maxZoom: 19,
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+  });
+  tiles.addTo(map);
+  const routeLayer = L.geoJSON(route, {
+    style: { color: colors.accent, weight: 4, opacity: 0.9 },
+  }).addTo(map);
+  const bounds = routeLayer.getBounds();
+  if (bounds.isValid()) {
+    map.fitBounds(bounds, { padding: [24, 24], maxZoom: 15 });
+  }
+
+  const points = profile.points || [];
+  if (points.length === 0) return;
+  const routeCursor = L.circleMarker([points[0].latitude, points[0].longitude], {
+    color: colors.forest,
+    fillColor: colors.accent,
+    fillOpacity: 0,
+    opacity: 0,
+    radius: 7,
+    weight: 3,
+    interactive: false,
+  }).addTo(map);
+
+  const context = canvas.getContext("2d");
+  if (!context) return;
+  const state = { hoveredIndex: -1, plot: null, width: 0, height: 0 };
+  const minDistance = points[0].distanceKm;
+  const maxDistance = points[points.length - 1].distanceKm;
+  let minElevation = points[0].elevationM;
+  let maxElevation = points[0].elevationM;
+  for (const point of points) {
+    minElevation = Math.min(minElevation, point.elevationM);
+    maxElevation = Math.max(maxElevation, point.elevationM);
+  }
+  const elevationPadding = Math.max((maxElevation - minElevation) * 0.1, 20);
+  minElevation -= elevationPadding;
+  maxElevation += elevationPadding;
+
+  const formatDistance = (distance) => `${distance.toFixed(distance < 10 ? 1 : 0)} km`;
+  const formatElevation = (elevation) => `${Math.round(elevation)} m`;
+  const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+  const xForDistance = (distance) => {
+    const span = Math.max(maxDistance - minDistance, 1);
+    return state.plot.left + (distance - minDistance) / span * (state.plot.right - state.plot.left);
+  };
+  const yForElevation = (elevation) => {
+    const span = Math.max(maxElevation - minElevation, 1);
+    return state.plot.bottom - (elevation - minElevation) / span * (state.plot.bottom - state.plot.top);
+  };
+  const nearestPointIndex = (distance) => {
+    let low = 0;
+    let high = points.length - 1;
+    while (low < high) {
+      const middle = Math.floor((low + high) / 2);
+      if (points[middle].distanceKm < distance) low = middle + 1;
+      else high = middle;
+    }
+    if (low === 0) return low;
+    const previous = points[low - 1];
+    return distance - previous.distanceKm < points[low].distanceKm - distance ? low - 1 : low;
+  };
+
+  const draw = () => {
+    const rect = canvas.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return;
+    const ratio = window.devicePixelRatio || 1;
+    canvas.width = Math.floor(rect.width * ratio);
+    canvas.height = Math.floor(rect.height * ratio);
+    context.setTransform(ratio, 0, 0, ratio, 0, 0);
+    state.width = rect.width;
+    state.height = rect.height;
+    state.plot = { left: 52, right: rect.width - 20, top: 24, bottom: rect.height - 34 };
+    const plot = state.plot;
+    context.clearRect(0, 0, rect.width, rect.height);
+    context.fillStyle = colors.plotSurface;
+    context.fillRect(0, 0, rect.width, rect.height);
+
+    context.font = "12px system-ui, sans-serif";
+    context.textBaseline = "middle";
+    for (let step = 0; step <= 4; step++) {
+      const fraction = step / 4;
+      const y = plot.top + fraction * (plot.bottom - plot.top);
+      const elevation = maxElevation - fraction * (maxElevation - minElevation);
+      context.strokeStyle = colors.grid;
+      context.lineWidth = 1;
+      context.beginPath();
+      context.moveTo(plot.left, y);
+      context.lineTo(plot.right, y);
+      context.stroke();
+      context.fillStyle = colors.subtle;
+      context.textAlign = "right";
+      context.fillText(formatElevation(elevation), plot.left - 8, y);
+    }
+
+    for (const climb of profile.climbs || []) {
+      const startX = clamp(xForDistance(climb.startKm), plot.left, plot.right);
+      const endX = clamp(xForDistance(climb.endKm), plot.left, plot.right);
+      context.fillStyle = colors.accentFill;
+      context.fillRect(startX, plot.top, Math.max(endX - startX, 1), plot.bottom - plot.top);
+      const label = climb.name || `${climb.category} ${Math.round(climb.score)}`;
+      context.fillStyle = colors.climbLabel;
+      context.textAlign = "center";
+      context.textBaseline = "top";
+      context.fillText(label, clamp((startX + endX) / 2, plot.left + 24, plot.right - 24), plot.top + 4);
+    }
+
+    for (const crossing of profile.crossings || []) {
+      const x = xForDistance(crossing.distanceKm);
+      context.strokeStyle = colors.crossing;
+      context.lineWidth = 1;
+      context.setLineDash([4, 3]);
+      context.beginPath();
+      context.moveTo(x, plot.top);
+      context.lineTo(x, plot.bottom);
+      context.stroke();
+      context.setLineDash([]);
+    }
+
+    context.beginPath();
+    context.moveTo(xForDistance(points[0].distanceKm), plot.bottom);
+    for (const point of points) context.lineTo(xForDistance(point.distanceKm), yForElevation(point.elevationM));
+    context.lineTo(xForDistance(points[points.length - 1].distanceKm), plot.bottom);
+    context.closePath();
+    context.fillStyle = colors.accentFill;
+    context.fill();
+    context.beginPath();
+    for (let i = 0; i < points.length; i++) {
+      const point = points[i];
+      if (i === 0) context.moveTo(xForDistance(point.distanceKm), yForElevation(point.elevationM));
+      else context.lineTo(xForDistance(point.distanceKm), yForElevation(point.elevationM));
+    }
+    context.strokeStyle = colors.accent;
+    context.lineWidth = 2.5;
+    context.stroke();
+    for (const crossing of profile.crossings || []) {
+      const x = xForDistance(crossing.distanceKm);
+      const label = `${crossing.name} ${Math.round(crossing.passElevationM)} m`;
+      const labelWidth = context.measureText(label).width;
+      const labelX = clamp(x, plot.left + labelWidth / 2 + 3, plot.right - labelWidth / 2 - 3);
+      const labelY = plot.top - 6;
+      context.fillStyle = colors.plotSurfaceOverlay;
+      context.fillRect(labelX - labelWidth / 2 - 3, labelY - 15, labelWidth + 6, 16);
+      context.fillStyle = colors.crossingLabel;
+      context.textAlign = "center";
+      context.textBaseline = "bottom";
+      context.fillText(label, labelX, labelY);
+    }
+
+    context.fillStyle = colors.subtle;
+    context.textAlign = "center";
+    context.textBaseline = "top";
+    for (let step = 0; step <= 4; step++) {
+      const distance = minDistance + step / 4 * (maxDistance - minDistance);
+      context.fillText(formatDistance(distance), xForDistance(distance), plot.bottom + 10);
+    }
+
+    if (state.hoveredIndex >= 0) {
+      const point = points[state.hoveredIndex];
+      const x = xForDistance(point.distanceKm);
+      const y = yForElevation(point.elevationM);
+      context.strokeStyle = colors.hoverLine;
+      context.lineWidth = 1;
+      context.setLineDash([3, 3]);
+      context.beginPath();
+      context.moveTo(x, plot.top);
+      context.lineTo(x, plot.bottom);
+      context.stroke();
+      context.setLineDash([]);
+      context.fillStyle = colors.forest;
+      context.beginPath();
+      context.arc(x, y, 5, 0, 2 * Math.PI);
+      context.fill();
+    }
+  };
+
+  const clearHover = () => {
+    state.hoveredIndex = -1;
+    routeCursor.setStyle({ opacity: 0, fillOpacity: 0 });
+    hoverOutput.textContent = "Hover or focus the profile to inspect elevation.";
+    draw();
+  };
+  const showPoint = (index) => {
+    state.hoveredIndex = clamp(index, 0, points.length - 1);
+    const point = points[state.hoveredIndex];
+    routeCursor.setLatLng([point.latitude, point.longitude]);
+    routeCursor.setStyle({ opacity: 1, fillOpacity: 0.9 });
+    hoverOutput.textContent = `${formatDistance(point.distanceKm)} · ${formatElevation(point.elevationM)}`;
+    draw();
+  };
+  canvas.addEventListener("pointermove", (event) => {
+    if (!state.plot) return;
+    const rect = canvas.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    if (x < state.plot.left || x > state.plot.right) {
+      clearHover();
+      return;
+    }
+    const distance = minDistance + (x - state.plot.left) / (state.plot.right - state.plot.left) * (maxDistance - minDistance);
+    showPoint(nearestPointIndex(distance));
+  });
+  canvas.addEventListener("pointerleave", clearHover);
+  canvas.addEventListener("pointercancel", clearHover);
+  canvas.addEventListener("keydown", (event) => {
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+    event.preventDefault();
+    const direction = event.key === "ArrowRight" ? 1 : -1;
+    const index = state.hoveredIndex < 0 ? (direction > 0 ? 0 : points.length - 1) : state.hoveredIndex + direction;
+    showPoint(index);
+  });
+  window.addEventListener("resize", draw);
+  draw();
+})();