add interactive map previews and game win condition

Author: ylked

via-ui/src/App.vue

@@ -2,11 +2,45 @@
 import TopBar from '@/components/TopBar.vue'
 import Main from '@/components/Main.vue'
 import SideBar from '@/components/SideBar.vue'
+import { useGameManager } from '@/api/game/manager.ts'
+import { onMounted, ref, watch } from 'vue'
 
+const { gameState, startGame, clearStopPreview } = useGameManager()
+
+const modal = ref<HTMLDialogElement | null>(null)
+
+watch(
+  () => gameState.value?.currentStop,
+  (newStop) => {
+    const targetId = gameState.value?.targetStation?.stop_id
+
+    if (newStop && targetId && newStop.stop_id === targetId) {
+      clearStopPreview()
+      modal.value?.showModal()
+    }
+  },
+)
+
+onMounted(() => {
+  startGame()
+})
 </script>
 
 <template>
   <div class="h-screen w-screen grid grid-rows-[auto_1fr] bg-base-300 overflow-hidden">
+    <dialog ref="modal" class="modal">
+      <div class="modal-box">
+        <h3 class="text-lg font-bold">Congratulation!</h3>
+        <p class="py-4">You successfully arrived to {{ gameState.targetStation?.stop_name }}!</p>
+        <p class="py-4">You took {{ gameState.trip.length }} different trains.</p>
+        <div class="modal-action">
+          <form method="dialog">
+            <button class="btn btn-outline btn-primary" @click="startGame()">Restart</button>
+          </form>
+        </div>
+      </div>
+    </dialog>
+
     <TopBar />
 
     <div class="grid grid-cols-1 md:grid-cols-[1fr_350px] overflow-hidden">

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

@@ -22,6 +22,8 @@ export interface GameState {
   departures: Departure[]
   chosenTrain: TripDetails | null
   currentDistance: number | null
+  shapePreview: ShapePoint[]
+  stopPreview: Stop | null
 }
 
 const state = ref<GameState>({
@@ -33,6 +35,8 @@ const state = ref<GameState>({
   departures: [],
   chosenTrain: null,
   currentDistance: null,
+  shapePreview: [],
+  stopPreview: null,
 })
 
 const service = new Service('/via/data')
@@ -76,17 +80,18 @@ export function useGameManager() {
       START_DATE,
     )
     state.value.currentDistance = computeDistanceToTarget(state.value.startStation)
+    state.value.trip = []
   }
 
   async function chooseTrain(departure: Departure) {
     state.value.chosenTrain = await service.getTripDetails(
       departure.trip_id,
       state.value.currentStop?.stop_id,
     )
-    console.log(state.value.chosenTrain)
   }
 
   async function chooseStop(stop: TripStop) {
+    state.value.shapePreview = []
     const endStation = (await service.getStopDetails(stop.stop_id))!!
     const distanceBefore = computeDistanceToTarget(state.value.currentStop!!)
     const distanceAfter = computeDistanceToTarget(endStation)
@@ -116,10 +121,30 @@ export function useGameManager() {
     state.value.trip.push(trip)
   }
 
+  async function showTripPreview(departure: Departure) {
+    state.value.shapePreview = await service.getTripShape(departure.trip_id, state.value.currentStop!!.stop_id)
+  }
+
+  async function clearTripPreview() {
+    state.value.shapePreview = []
+  }
+
+  async function showStopPreview(stop: TripStop) {
+    state.value.stopPreview = (await service.getStopDetails(stop.stop_id))!!
+  }
+
+  async function clearStopPreview() {
+    state.value.stopPreview = null
+  }
+
   return {
     gameState,
     startGame,
     chooseTrain,
     chooseStop,
+    showTripPreview,
+    clearTripPreview,
+    showStopPreview,
+    clearStopPreview,
   }
 }

via-ui/src/components/Departure.vue

@@ -1,34 +1,72 @@
 <script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted } from 'vue'
 import type { Departure } from '@/api/gtfs/types.ts'
 import { useGameManager } from '@/api/game/manager.ts'
 import { getIconFilename } from '@/api/game/icons.ts'
 
-const { chooseTrain } = useGameManager()
+const { chooseTrain, showTripPreview, clearTripPreview } = useGameManager()
 
 const props = defineProps<{
   departure: Departure
 }>()
 
+const isOpen = ref(false)
+const collapseRef = ref<HTMLElement | null>(null)
+
 function departureSelected() {
   chooseTrain(props.departure)
 }
+
+function previewRoute() {
+  showTripPreview(props.departure)
+}
+
+function clearPreview() {
+  clearTripPreview()
+}
+
+function handleClickOutside(event: MouseEvent) {
+  if (isOpen.value && collapseRef.value && !collapseRef.value.contains(event.target as Node)) {
+    isOpen.value = false
+  }
+}
+
+watch(isOpen, (newVal) => {
+  if (newVal) {
+    previewRoute()
+  } else {
+    clearPreview()
+  }
+})
+
+onMounted(() => {
+  window.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('click', handleClickOutside)
+})
 </script>
 
 <template>
-  <div tabindex="0" class="collapse bg-base-100 border border-base-300 mx-2 my-1">
+  <div ref="collapseRef" class="collapse bg-base-100 border border-base-300 mx-2 my-1">
+    <input type="radio" name="departures-accordion" :checked="isOpen" @click="isOpen = !isOpen" />
+
     <div class="collapse-title font-semibold flex items-center gap-2">
       <img
         class="inline-block h-5 w-auto object-contain align-middle"
         :src="getIconFilename(departure.route_short_name)"
         :alt="departure.route_short_name"
       />
 
-      <span>{{ departure.departure_time.slice(0,5) }}</span>
+      <span>{{ departure.departure_time.slice(0, 5) }}</span>
       <span>{{ departure.trip_headsign }}</span>
     </div>
 
     <div class="collapse-content text-sm z-1">
-      <button class="btn btn-primary btn-outline w-full" @click="departureSelected()">Board this 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

@@ -20,19 +20,22 @@ const departureChosen = computed(() => {
       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"
+        <div
+          v-if="!gameState?.currentStop"
+          class="flex flex-col items-center justify-center py-4 w-full opacity-50"
+        >
+          <span class="loading loading-spinner loading-xl"></span>
+          <span class="text-xs mt-2 font-semibold tracking-wide uppercase"
+            >Loading game...</span
           >
+        </div>
+
+        <h2 v-else class="text-2xl font-bold">
+          <p 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">
+          <span class="block truncate" :title="gameState.currentStop?.stop_name">
             {{ gameState.currentStop?.stop_name }}
           </span>
         </h2>

via-ui/src/components/Stop.vue

@@ -1,26 +1,64 @@
 <script setup lang="ts">
-
-
+import { ref, watch, onMounted, onUnmounted } from 'vue'
 import type { TripStop } from '@/api/gtfs/types.ts'
 import { useGameManager } from '@/api/game/manager.ts'
 
-const { chooseStop } = useGameManager()
+const { chooseStop, showStopPreview, clearStopPreview } = useGameManager()
 
 const props = defineProps<{
   stop: TripStop
 }>()
 
+const isOpen = ref(false)
+const collapseRef = ref<HTMLElement | null>(null)
+
 function stopSelected() {
   chooseStop(props.stop)
 }
 
+function showPreview() {
+  showStopPreview(props.stop)
+}
+
+function clearPreview() {
+  clearStopPreview()
+}
+
+function handleClickOutside(event: MouseEvent) {
+  if (isOpen.value && collapseRef.value && !collapseRef.value.contains(event.target as Node)) {
+    isOpen.value = false
+  }
+}
+
+watch(isOpen, (newVal) => {
+  if (newVal) {
+    showPreview()
+  } else {
+    clearPreview()
+  }
+})
+
+onMounted(() => {
+  window.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('click', handleClickOutside)
+})
 </script>
 
 <template>
-  <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 ref="collapseRef" class="collapse bg-base-100 border border-base-300 mx-2 my-1">
+    <input type="radio" name="stops-accordion" :checked="isOpen" @click="isOpen = !isOpen" />
+
+    <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-outline btn-secondary w-full" @click="stopSelected()">Get off here</button>
+      <button class="btn btn-outline btn-secondary w-full" @click="stopSelected()">
+        Get off here
+      </button>
     </div>
   </div>
 </template>