enhance map and sidebar UI

Author: ylked

via-ui/src/App.vue

@@ -9,7 +9,7 @@ import SideBar from '@/components/SideBar.vue'
   <div class="h-screen w-screen grid grid-rows-[auto_1fr] bg-base-300 overflow-hidden">
     <TopBar />
 
-    <div class="grid grid-cols-1 md:grid-cols-[1fr_320px] overflow-hidden">
+    <div class="grid grid-cols-1 md:grid-cols-[1fr_350px] overflow-hidden">
       <Main class="overflow-auto" />
       <SideBar class="overflow-y-auto" />
     </div>

via-ui/src/components/Departure.vue

@@ -28,7 +28,7 @@ function departureSelected() {
     </div>
 
     <div class="collapse-content text-sm z-1">
-      <button class="btn btn-soft btn-primary" @click="departureSelected()">Board train</button>
+      <button class="btn btn-primary btn-outline w-full" @click="departureSelected()">Board this train</button>
     </div>
   </div>
 </template>

via-ui/src/components/SideBar.vue

@@ -8,32 +8,58 @@ import { getIconFilename } from '@/api/game/icons.ts'
 const { gameState } = useGameManager()
 
 const departureChosen = computed(() => {
-  return gameState.value.chosenTrain !== null
+  return !!gameState.value?.chosenTrain
 })
 </script>
 
 <template>
-  <div class="flex flex-col">
-    <div v-if="!departureChosen" class="text-2xl font-bold m-4">
-      Gare de {{ gameState.currentStop?.stop_name }}
-    </div>
-    <div v-else class="text-2xl font-bold m-4">
-      <img
-        class="inline-block h-5 mx-2 w-auto object-contain align-middle"
-        :src="getIconFilename(gameState.chosenTrain?.route_short_name!!)"
-        :alt="gameState.chosenTrain?.route_short_name"
-      />
-      <span> Direction {{ gameState.chosenTrain?.trip_headsign }}</span>
-    </div>
+  <div
+    class="flex flex-col h-full w-full min-w-0 box-border bg-base-200 rounded-2xl border border-base-200 overflow-hidden shadow-sm"
+  >
+    <div
+      class="sticky top-0 bg-base-200 z-10 p-4 pr-8 pb-3 flex flex-col gap-2 shrink-0 border-b border-base-100"
+    >
+      <div v-if="!departureChosen" class="w-full min-w-0">
+        <h2 class="text-2xl font-bold">
+          <p
+            v-if="gameState?.currentStop"
+            class="text-xs tracking-wide uppercase opacity-60 font-semibold mb-1 truncate"
+          >
+            Current location
+          </p>
+
+          <span v-if="!gameState?.currentStop" class="opacity-50 text-base font-normal">
+            Loading...
+          </span>
+
+          <span v-else class="block truncate" :title="gameState.currentStop?.stop_name">
+            {{ gameState.currentStop?.stop_name }}
+          </span>
+        </h2>
+      </div>
 
-    <div v-if="!departureChosen">
-      <div v-for="d in gameState.departures" :key="d.trip_id">
-        <Departure :departure="d" />
+      <div v-if="departureChosen" class="w-full min-w-0">
+        <p class="text-xs tracking-wide uppercase opacity-60 font-semibold mb-1 truncate">
+          Current train
+        </p>
+        <div class="text-lg font-bold flex items-center">
+          <img
+            class="inline-block h-5 mr-2 w-auto object-contain shrink-0"
+            :src="getIconFilename(gameState.chosenTrain?.route_short_name!!)"
+            :alt="gameState.chosenTrain?.route_short_name"
+          />
+          <span class="truncate"> Direction {{ gameState.chosenTrain?.trip_headsign }}</span>
+        </div>
       </div>
     </div>
-    <div v-else>
-      <div v-for="s in gameState.chosenTrain?.stops" :key="s.stop_id">
-        <Stop :stop="s" />
+
+    <div class="flex-1 overflow-y-auto p-1 pr-6 pt-2">
+      <div v-if="!departureChosen" class="flex flex-col gap-1 w-full min-w-0">
+        <Departure v-for="d in gameState.departures" :key="d.trip_id" :departure="d" />
+      </div>
+
+      <div v-else class="flex flex-col gap-1 w-full min-w-0">
+        <Stop v-for="s in gameState.chosenTrain?.stops" :key="s.stop_id" :stop="s" />
       </div>
     </div>
   </div>

via-ui/src/components/Stop.vue

@@ -20,7 +20,7 @@ function stopSelected() {
   <div tabindex="0" class="collapse bg-base-100 border border-base-300 mx-2 my-1">
     <div class="collapse-title font-semibold"> {{stop.arrival_time.slice(0,5)}} {{stop.stop_name}}</div>
     <div class="collapse-content text-sm z-1">
-      <button class="btn btn-soft btn-secondary" @click="stopSelected()">Get out</button>
+      <button class="btn btn-outline btn-secondary w-full" @click="stopSelected()">Get off here</button>
     </div>
   </div>
 </template>

via-ui/src/components/SwissMap.vue

@@ -12,30 +12,26 @@ const height = 600
 const pathWidth = 2
 const mapContainer = ref<HTMLElement | null>(null)
 
-const cities = computed(() => {
-  const trips = gameState.value.trip
-  if (trips.length === 0) return []
-
-  const first = {
-    name: trips[0]!.start_station.stop_name,
-    lat: trips[0]!.start_station.stop_lat,
-    lon: trips[0]!.start_station.stop_lon,
-    distance: trips[0]!.distance_before,
-  }
-  const rest = trips.map((t) => ({
+// Numbered dots = the stations reached by completing each leg (its end_station).
+// The origin is drawn separately as a dedicated start marker.
+const cities = computed(() =>
+  gameState.value.trip.map((t) => ({
     name: t.end_station.stop_name,
     lat: t.end_station.stop_lat,
     lon: t.end_station.stop_lon,
     distance: t.distance_after,
-  }))
-  return [first, ...rest]
-})
+  })),
+)
 
 // One polyline per trip segment, in the GTFS shape's own coordinates.
 const legs = computed(() =>
   gameState.value.trip.map((t) => t.shape.map((p) => ({ lat: p.lat, lon: p.lon }))),
 )
 
+const startStation = computed(() => gameState.value.startStation)
+const targetStation = computed(() => gameState.value.targetStation)
+const currentStop = computed(() => gameState.value.currentStop)
+
 // Persistent d3 handles.
 let svg: any = null
 let zoomLayer: any = null
@@ -92,15 +88,29 @@ onMounted(async () => {
         .attr('r', 8 / k)
         .attr('stroke-width', 2 / k)
       zoomLayer.selectAll('.city-number').attr('font-size', 10 / k)
+      zoomLayer
+        .selectAll('.special-dot')
+        .attr('r', 10 / k)
+        .attr('stroke-width', 2.5 / k)
+      zoomLayer.selectAll('.special-label').attr('font-size', 11 / k)
+      zoomLayer
+        .selectAll('.current-ring')
+        .attr('r', 13 / k)
+        .attr('stroke-width', 2 / k)
+      zoomLayer
+        .selectAll('.current-dot')
+        .attr('r', 5 / k)
+        .attr('stroke-width', 2 / k)
     })
 
   svg.call(zoomBehavior)
 
   drawTrip()
 })
 
+// Redraw on trip progress and on start/target/current changes.
 watch(
-  cities,
+  [cities, startStation, targetStation, currentStop],
   () => {
     if (svg && projection) drawTrip()
   },
@@ -115,20 +125,9 @@ function drawTrip() {
 
   // Reflect current zoom level so newly-drawn elements match the others' sizing.
   const k = d3.zoomTransform(svg.node()).k || 1
+  const tooltip = d3.select('#tooltip')
 
-  const projectedCities = cities.value
-    .map((city) => {
-      const point = projection([city.lon, city.lat])
-      if (!point) return null
-      return { ...city, x: point[0], y: point[1] }
-    })
-    .filter(
-      (
-        d,
-      ): d is { name: string; lat: number; lon: number; distance: number; x: number; y: number } =>
-        d !== null,
-    )
-
+  // --- leg polylines (precise shapes) ---------------------------------------
   const line = d3
     .line<{ x: number; y: number }>()
     .x((d) => d.x)
@@ -160,6 +159,20 @@ function drawTrip() {
     .attr('stroke-linejoin', 'round')
     .attr('opacity', 0.9)
 
+  // --- numbered "reached" stations ------------------------------------------
+  const projectedCities = cities.value
+    .map((city) => {
+      const point = projection([city.lon, city.lat])
+      if (!point) return null
+      return { ...city, x: point[0], y: point[1] }
+    })
+    .filter(
+      (
+        d,
+      ): d is { name: string; lat: number; lon: number; distance: number; x: number; y: number } =>
+        d !== null,
+    )
+
   const cityGroups = layer
     .selectAll('.city-group')
     .data(projectedCities)
@@ -177,7 +190,6 @@ function drawTrip() {
     .attr('stroke', '#fff')
     .attr('stroke-width', 2 / k)
 
-  // Step number inside the dot — never collides with neighbours, no matter how dense the area.
   cityGroups
     .append('text')
     .attr('class', 'city-number')
@@ -189,8 +201,6 @@ function drawTrip() {
     .attr('pointer-events', 'none')
     .text((_d: any, i: number) => i + 1)
 
-  const tooltip = d3.select('#tooltip')
-
   cityGroups
     .on('mouseover', (_event: any, d: any) => {
       tooltip
@@ -204,6 +214,104 @@ function drawTrip() {
     .on('mouseout', () => {
       tooltip.style('opacity', 0)
     })
+
+  // --- start, target, current (always shown, drawn on top) ------------------
+  drawSpecialMarker(layer, startStation.value, '#1e8e3e', 'S', 'Start', k, tooltip)
+  drawSpecialMarker(layer, targetStation.value, '#1a73e8', 'T', 'Target', k, tooltip)
+  drawCurrentMarker(layer, currentStop.value, k, tooltip)
+}
+
+function drawSpecialMarker(
+  layer: any,
+  stop: { stop_name: string; stop_lat: number; stop_lon: number } | null,
+  color: string,
+  label: string,
+  tooltipLabel: string,
+  k: number,
+  tooltip: any,
+) {
+  if (!stop) return
+  const point = projection([stop.stop_lon, stop.stop_lat])
+  if (!point) return
+  const [x, y] = point
+
+  const g = layer
+    .append('g')
+    .attr('class', 'special-marker')
+    .attr('transform', `translate(${x}, ${y})`)
+    .style('cursor', 'pointer')
+
+  g.append('circle')
+    .attr('class', 'special-dot')
+    .attr('r', 10 / k)
+    .attr('fill', color)
+    .attr('stroke', '#fff')
+    .attr('stroke-width', 2.5 / k)
+
+  g.append('text')
+    .attr('class', 'special-label')
+    .attr('text-anchor', 'middle')
+    .attr('dominant-baseline', 'central')
+    .attr('font-size', 11 / k)
+    .attr('font-weight', 700)
+    .attr('fill', '#fff')
+    .attr('pointer-events', 'none')
+    .text(label)
+
+  g.on('mouseover', () => {
+    tooltip.style('opacity', 1).html(`<strong>${stop.stop_name}</strong><br>${tooltipLabel}`)
+  })
+    .on('mousemove', (event: any) => {
+      const [mx, my] = d3.pointer(event, mapContainer.value)
+      tooltip.style('left', mx + 15 + 'px').style('top', my - 15 + 'px')
+    })
+    .on('mouseout', () => {
+      tooltip.style('opacity', 0)
+    })
+}
+
+function drawCurrentMarker(
+  layer: any,
+  stop: { stop_name: string; stop_lat: number; stop_lon: number } | null,
+  k: number,
+  tooltip: any,
+) {
+  if (!stop) return
+  const point = projection([stop.stop_lon, stop.stop_lat])
+  if (!point) return
+  const [x, y] = point
+
+  const g = layer
+    .append('g')
+    .attr('class', 'current-marker')
+    .attr('transform', `translate(${x}, ${y})`)
+    .style('cursor', 'pointer')
+
+  // Outer ring + inner dot reads as "you are here".
+  g.append('circle')
+    .attr('class', 'current-ring')
+    .attr('r', 13 / k)
+    .attr('fill', 'none')
+    .attr('stroke', '#f9ab00')
+    .attr('stroke-width', 2 / k)
+
+  g.append('circle')
+    .attr('class', 'current-dot')
+    .attr('r', 5 / k)
+    .attr('fill', '#f9ab00')
+    .attr('stroke', '#fff')
+    .attr('stroke-width', 2 / k)
+
+  g.on('mouseover', () => {
+    tooltip.style('opacity', 1).html(`<strong>${stop.stop_name}</strong><br>You are here`)
+  })
+    .on('mousemove', (event: any) => {
+      const [mx, my] = d3.pointer(event, mapContainer.value)
+      tooltip.style('left', mx + 15 + 'px').style('top', my - 15 + 'px')
+    })
+    .on('mouseout', () => {
+      tooltip.style('opacity', 0)
+    })
 }
 
 function resetZoom() {