Show distance from St. Louis on event cards

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

sites/events/src/main.js

@@ -193,6 +193,14 @@ function locationOf(ev) {
   return parts.length ? parts.join(", ") : (ev.formatted_address || "Location TBD");
 }
 
+// Straight-line miles from St. Louis, when the event has coordinate data.
+function distanceFromStLouis(ev) {
+  const coord = ev.coordinate; // BCP gives [lon, lat]
+  if (!Array.isArray(coord) || coord.length !== 2) return null;
+  const [lon, lat] = coord;
+  return milesBetween(lat, lon, ST_LOUIS.lat, ST_LOUIS.lon);
+}
+
 // BCP's only reliable format signal is the teamEvent flag. There's no
 // dedicated "team size" field — the closest candidate (totalPlayers /
 // totalTeamPlayers) reflects live registration progress, not the event's
@@ -271,6 +279,7 @@ function setupFilters() {
 // it with every circuit it matched under rather than showing it once
 // per circuit.
 function eventCard(ev, circuits) {
+  const distance = distanceFromStLouis(ev);
   const capacity = ev.numTickets
     ? `<span class="badge badge-ghost badge-sm">${ev.checkedInPlayers ?? 0}/${ev.numTickets} checked in</span>`
     : "";
@@ -287,7 +296,7 @@ function eventCard(ev, circuits) {
       <div class="card-body py-4 flex-row items-center justify-between gap-4 flex-wrap">
         <div class="min-w-0">
           <div class="font-semibold truncate">${esc(ev.name)}</div>
-          <div class="text-sm opacity-60 mt-1">${esc(locationOf(ev))}</div>
+          <div class="text-sm opacity-60 mt-1">${esc(locationOf(ev))}${distance !== null ? ` · ${Math.round(distance)} mi from STL` : ""}</div>
           <div class="flex gap-2 mt-2 flex-wrap">${format}${scopeBadge}${circuitBadges}${system}${capacity}</div>
         </div>
         <div class="text-right shrink-0">