last improvements

Author: ylked

via-ui/src/App.vue

@@ -152,7 +152,7 @@ onMounted(() => {
           <TimeChart />
         </div>
 
-        <div class="grid grid-cols-1 gap-6">
+        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
           <!--Distance vs stop viz-->
           <div class="bg-base-100 p-6 border border-base-300 rounded-box shadow-sm">
             <h4 class="font-bold text-xl mb-1 text-base-content">Distance Evolution</h4>

via-ui/src/api/game/manager.ts

@@ -11,6 +11,8 @@ export interface UserTrip {
   distance_before: number
   distance_after: number
   shape: ShapePoint[]
+  departure_time: string
+  arrival_time: string
 }
 
 export interface GameState {
@@ -24,7 +26,8 @@ export interface GameState {
   currentDistance: number | null
   shapePreview: ShapePoint[]
   stopPreview: Stop | null
-  seed: String | null
+  seed: String | null,
+  chosenDepartureTime: string | null
 }
 
 const state = ref<GameState>({
@@ -39,6 +42,7 @@ const state = ref<GameState>({
   shapePreview: [],
   stopPreview: null,
   seed: null,
+  chosenDepartureTime: null,
 })
 
 const service = new Service('/via/data')
@@ -100,6 +104,7 @@ export function useGameManager() {
   }
 
   async function chooseTrain(departure: Departure) {
+    state.value.chosenDepartureTime = departure.departure_time
     state.value.chosenTrain = await service.getTripDetails(
       departure.trip_id,
       state.value.currentStop?.stop_id,
@@ -125,7 +130,10 @@ export function useGameManager() {
       distance_before: distanceBefore,
       distance_after: distanceAfter,
       shape: shape,
+      departure_time: state.value.chosenDepartureTime!!,
+      arrival_time: stop.arrival_time,
     }
+    state.value.chosenDepartureTime = null
 
     state.value.chosenTrain = null
     state.value.currentStop = endStation
@@ -154,6 +162,19 @@ export function useGameManager() {
     state.value.stopPreview = null
   }
 
+  async function resetProgression(){
+    state.value.currentTime = START_DATE
+    state.value.currentStop = state.value.startStation
+    state.value.departures = await service.getUpcomingDepartures(
+      state.value.startStation!!.stop_id,
+      START_DATE,
+    )
+    state.value.currentDistance = computeDistanceToTarget(state.value.startStation!!)
+    state.value.trip = []
+    state.value.stopPreview = null
+    state.value.shapePreview = []
+  }
+
   return {
     gameState,
     startGame,
@@ -163,5 +184,6 @@ export function useGameManager() {
     clearTripPreview,
     showStopPreview,
     clearStopPreview,
+    resetProgression,
   }
 }

via-ui/src/components/TimeChart.vue

@@ -23,7 +23,13 @@ const getChartData = () => {
   const trip = gameState.value.trip
   if (!trip || trip.length === 0) return { blocks: [], totalTravel: 0, totalWait: 0 }
 
-  const blocks: Array<{ type: string, start: number, end: number, duration: number, label: string }> = []
+  const blocks: Array<{
+    type: string
+    start: number
+    end: number
+    duration: number
+    label: string
+  }> = []
   let totalTravel = 0
   let totalWait = 0
 
@@ -34,55 +40,50 @@ const getChartData = () => {
       lastAbsSec = rawSec
       return rawSec
     }
-    
+
     let candidate = rawSec
-    while (candidate < lastAbsSec - 1800) { 
-      candidate += 86400 
+    while (candidate < lastAbsSec - 1800) {
+      candidate += 86400
     }
-    
+
     lastAbsSec = candidate
     return candidate
   }
 
   let previousArrivalSec = -1
 
   for (let i = 0; i < trip.length; i++) {
-    const segment = trip[i]
-    const startStop = segment!!.details.stops.find(s => s.stop_id === segment!!.start_station.stop_id)
-    const endStop = segment!!.details.stops.find(s => s.stop_id === segment!!.end_station.stop_id)
-
-    if (startStop && endStop) {
-      const depSec = getAbsoluteSec(startStop.departure_time)
-      const arrSec = getAbsoluteSec(endStop.arrival_time)
-
-      if (previousArrivalSec !== -1) {
-        const waitDuration = depSec - previousArrivalSec
-        if (waitDuration > 0) {
-          totalWait += waitDuration
-          blocks.push({
-            type: 'wait',
-            start: previousArrivalSec,
-            end: depSec,
-            duration: waitDuration,
-            label: `Waiting at ${segment!!.start_station.stop_name}`
-          })
-        }
-      }
-
-      const travelDuration = arrSec - depSec
-      if (travelDuration > 0) {
-        totalTravel += travelDuration
+    const segment = trip[i]!!
+    const depSec = getAbsoluteSec(segment.departure_time)
+    const arrSec = getAbsoluteSec(segment.arrival_time)
+
+    if (previousArrivalSec !== -1) {
+      const waitDuration = depSec - previousArrivalSec
+      if (waitDuration > 0) {
+        totalWait += waitDuration
         blocks.push({
-          type: 'travel',
-          start: depSec,
-          end: arrSec,
-          duration: travelDuration,
-          label: `${segment!!.details.route_short_name} to ${segment!!.end_station.stop_name}`
+          type: 'wait',
+          start: previousArrivalSec,
+          end: depSec,
+          duration: waitDuration,
+          label: `Waiting at ${segment.start_station.stop_name}`,
         })
       }
-      
-      previousArrivalSec = arrSec
     }
+
+    const travelDuration = arrSec - depSec
+    if (travelDuration > 0) {
+      totalTravel += travelDuration
+      blocks.push({
+        type: 'travel',
+        start: depSec,
+        end: arrSec,
+        duration: travelDuration,
+        label: `${segment.details.route_short_name} to ${segment.end_station.stop_name}`,
+      })
+    }
+
+    previousArrivalSec = arrSec
   }
 
   return { blocks, totalTravel, totalWait }
@@ -96,112 +97,123 @@ const drawChart = () => {
   const height = 80
   const margin = { top: 10, right: 20, bottom: 30, left: 20 }
 
-  const svg = d3.select(svgRef.value)
-    .attr("viewBox", `0 0 ${width} ${height}`)
-    .style("width", "100%")
-    .style("height", "auto")
+  const svg = d3
+    .select(svgRef.value)
+    .attr('viewBox', `0 0 ${width} ${height}`)
+    .style('width', '100%')
+    .style('height', 'auto')
 
-  svg.selectAll("*").remove()
+  svg.selectAll('*').remove()
   const tooltip = d3.select(tooltipRef.value)
 
   const minTime = blocks[0]!!.start
   const maxTime = blocks[blocks.length - 1]!!.end
 
-  const x = d3.scaleLinear()
+  const x = d3
+    .scaleLinear()
     .domain([minTime, maxTime])
     .range([margin.left, width - margin.right])
 
-  svg.selectAll("rect")
+  svg
+    .selectAll('rect')
     .data(blocks)
     .enter()
-    .append("rect")
-    .attr("x", d => x(d.start))
-    .attr("y", margin.top)
-    .attr("width", d => Math.max(2, x(d.end) - x(d.start)))
-    .attr("height", height - margin.top - margin.bottom)
-    .attr("rx", 4)
-    .attr("fill", d => d.type === 'travel' ? "var(--color-primary)" : "var(--color-accent)")
-    .attr("stroke", "var(--color-base-100)")
-    .attr("stroke-width", 2)
-    .style("cursor", "pointer")
-    .on("mouseover", function(event, d) {
-      d3.select(this).style("opacity", 0.8)
-      
-      const typeText = d.type === 'travel' 
-        ? `<span class="text-primary font-bold">Moving</span>` 
-        : `<span class="text-accent font-bold">Waiting</span>`
-
-      tooltip.style("opacity", 1)
-             .html(`
+    .append('rect')
+    .attr('x', (d) => x(d.start))
+    .attr('y', margin.top)
+    .attr('width', (d) => Math.max(2, x(d.end) - x(d.start)))
+    .attr('height', height - margin.top - margin.bottom)
+    .attr('rx', 4)
+    .attr('fill', (d) => (d.type === 'travel' ? 'var(--color-primary)' : 'var(--color-accent)'))
+    .attr('stroke', 'var(--color-base-100)')
+    .attr('stroke-width', 2)
+    .style('cursor', 'pointer')
+    .on('mouseover', function (event, d) {
+      d3.select(this).style('opacity', 0.8)
+
+      const typeText =
+        d.type === 'travel'
+          ? `<span class="text-primary font-bold">Moving</span>`
+          : `<span class="text-accent font-bold">Waiting</span>`
+
+      tooltip.style('opacity', 1).html(`
                 <div class="mb-1">${typeText}</div>
                 <strong>${d.label}</strong><br/>
                 Duration: ${formatDuration(d.duration)}
              `)
     })
-    .on("mousemove", function(event) {
+    .on('mousemove', function (event) {
       const [xPos, yPos] = d3.pointer(event, svgRef.value)
       const isRightSide = xPos > width / 2
-      tooltip.style("left", isRightSide ? (xPos - 150) + "px" : (xPos + 15) + "px")
-             .style("top", "10px")
+      tooltip.style('left', isRightSide ? xPos - 150 + 'px' : xPos + 15 + 'px').style('top', '10px')
     })
-    .on("mouseout", function() {
-      d3.select(this).style("opacity", 1)
-      tooltip.style("opacity", 0)
+    .on('mouseout', function () {
+      d3.select(this).style('opacity', 1)
+      tooltip.style('opacity', 0)
     })
 
-  svg.append("g")
-    .attr("transform", `translate(0,${height - margin.bottom + 5})`)
-    .append("text")
-    .attr("x", margin.left)
-    .attr("y", 10)
-    .attr("fill", "currentColor")
-    .style("font-size", "12px")
-    .text("Start")
-
-  svg.append("g")
-    .attr("transform", `translate(0,${height - margin.bottom + 5})`)
-    .append("text")
-    .attr("x", width - margin.right)
-    .attr("y", 10)
-    .attr("fill", "currentColor")
-    .attr("text-anchor", "end")
-    .style("font-size", "12px")
-    .text("Finish")
+  svg
+    .append('g')
+    .attr('transform', `translate(0,${height - margin.bottom + 5})`)
+    .append('text')
+    .attr('x', margin.left)
+    .attr('y', 10)
+    .attr('fill', 'currentColor')
+    .style('font-size', '12px')
+    .text('Start')
+
+  svg
+    .append('g')
+    .attr('transform', `translate(0,${height - margin.bottom + 5})`)
+    .append('text')
+    .attr('x', width - margin.right)
+    .attr('y', 10)
+    .attr('fill', 'currentColor')
+    .attr('text-anchor', 'end')
+    .style('font-size', '12px')
+    .text('Finish')
 }
 
 watch(() => gameState.value.trip, drawChart, { deep: true })
 onMounted(drawChart)
 
-const stats = ref({ travel: "0m", wait: "0m" })
-watch(() => gameState.value.trip, () => {
-  const data = getChartData()
-  stats.value = {
-    travel: formatDuration(data.totalTravel),
-    wait: formatDuration(data.totalWait)
-  }
-}, { deep: true, immediate: true })
-
+const stats = ref({ travel: '0m', wait: '0m' })
+watch(
+  () => gameState.value.trip,
+  () => {
+    const data = getChartData()
+    stats.value = {
+      travel: formatDuration(data.totalTravel),
+      wait: formatDuration(data.totalWait),
+    }
+  },
+  { deep: true, immediate: true },
+)
 </script>
 
 <template>
   <div class="w-full flex flex-col">
     <div class="flex justify-between items-center mb-2 px-4 text-sm">
       <div class="flex items-center gap-2">
         <div class="w-3 h-3 rounded-full bg-primary shadow-sm"></div>
-        <span class="font-semibold">Time in Trains: <span class="text-base-content">{{ stats.travel }}</span></span>
+        <span class="font-semibold"
+          >Time in Trains: <span class="text-base-content">{{ stats.travel }}</span></span
+        >
       </div>
       <div class="flex items-center gap-2">
         <div class="w-3 h-3 rounded-full bg-accent shadow-sm"></div>
-        <span class="font-semibold">Time Waiting: <span class="text-base-content">{{ stats.wait }}</span></span>
+        <span class="font-semibold"
+          >Time Waiting: <span class="text-base-content">{{ stats.wait }}</span></span
+        >
       </div>
     </div>
-    
+
     <div class="relative w-full flex justify-center">
       <svg ref="svgRef" class="text-base-content"></svg>
-      <div 
-        ref="tooltipRef" 
+      <div
+        ref="tooltipRef"
         class="absolute opacity-0 bg-neutral text-neutral-content px-4 py-2 rounded-box shadow-lg pointer-events-none text-sm transition-opacity duration-200 z-50 min-w-[150px] text-left"
       ></div>
     </div>
   </div>
-</template>
+</template>