Skip to content

Commit 35e7a8f

Browse files
AlexandreMaquetylked
AlexandreMaquet
authored and
ylked
committed
Update endscreen modal with vizualisations and better UI
1 parent 1b9bf67 commit 35e7a8f

1 file changed

Lines changed: 119 additions & 8 deletions

File tree

‎via-ui/src/App.vue‎

Lines changed: 119 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,14 @@ import TopBar from '@/components/TopBar.vue'
33
import Main from '@/components/Main.vue'
44
import SideBar from '@/components/SideBar.vue'
55
import { useGameManager } from '@/api/game/manager.ts'
6+
import { getIconFilename } from '@/api/game/icons.ts'
67
import { onMounted, ref, watch } from 'vue'
78
9+
import DistanceChart from '@/components/DistanceChart.vue'
10+
import EfficiencyChart from '@/components/EfficiencyChart.vue'
11+
import TrainTypeChart from '@/components/TrainTypeChart.vue'
12+
import TimeChart from '@/components/TimeChart.vue'
13+
814
const { gameState, startGame, clearStopPreview } = useGameManager()
915
1016
const modal = ref<HTMLDialogElement | null>(null)
@@ -28,22 +34,127 @@ onMounted(() => {
2834

2935
<template>
3036
<dialog ref="modal" class="modal">
31-
<div class="modal-box w-11/12 max-w-5xl">
32-
<h3 class="text-lg font-bold">Congratulation!</h3>
33-
<p class="py-4">You successfully arrived to {{ gameState.targetStation?.stop_name }}!</p>
34-
<p class="py-4">You took {{ gameState.trip.length }} different trains.</p>
35-
<div class="modal-action">
37+
38+
<div class="modal-box w-11/12 max-w-7xl p-0 bg-base-200 shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
39+
40+
<div class="bg-primary p-6 text-primary-content text-left shrink-0">
41+
<h2 class="text-3xl font-bold tracking-tight mb-1">Trip Summary</h2>
42+
<p class="text-lg opacity-90 font-light">Journey analysis across the Swiss railway network.</p>
43+
</div>
44+
45+
<div class="p-8 text-base-content overflow-y-auto">
46+
47+
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
48+
49+
<!-- Travel info -->
50+
<div class="bg-base-100 p-6 border border-base-300 rounded-box shadow-sm flex flex-col justify-center relative overflow-hidden">
51+
<div class="absolute left-0 top-0 bottom-0 w-1.5 bg-primary"></div>
52+
53+
<div class="text-sm font-bold uppercase text-accent mb-4 pl-3">Travel Finished</div>
54+
55+
<div class="flex flex-col pl-3">
56+
<div class="flex items-center gap-3">
57+
<div class="w-3 h-3 rounded-full border-2 border-accent bg-base-100 z-10"></div>
58+
<div class="text-lg font-medium text-base-content/70">{{ gameState.startStation?.stop_name }}</div>
59+
</div>
60+
61+
<div class="flex items-center gap-3 ml-1.5 my-1">
62+
<div class="w-0.5 h-6 border-l-2 border-dashed border-base-300"></div>
63+
</div>
64+
65+
<div class="flex items-center gap-3">
66+
<svg class="w-4 h-4 text-primary -ml-0.5 z-10" fill="currentColor" viewBox="0 0 20 20">
67+
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
68+
</svg>
69+
<div class="text-2xl lg:text-3xl font-bold text-primary leading-none">{{ gameState.targetStation?.stop_name }}</div>
70+
</div>
71+
</div>
72+
</div>
73+
74+
<!-- Trains used-->
75+
<div class="bg-base-100 p-6 border border-base-300 rounded-box shadow-sm flex flex-col justify-center">
76+
77+
<div class="text-sm font-bold uppercase text-accent mb-3">Connections Used</div>
78+
79+
<div class="flex items-baseline gap-2 mb-4">
80+
<div class="text-3xl lg:text-4xl font-bold text-base-content leading-none">{{ gameState.trip.length }}</div>
81+
<div class="text-lg font-medium text-accent">trains</div>
82+
</div>
83+
84+
<div class="flex flex-wrap items-center gap-1.5">
85+
<template v-for="(segment, index) in gameState.trip.slice(0, 8)" :key="index">
86+
87+
<img
88+
class="inline-block h-6 w-auto object-contain align-middle drop-shadow-sm"
89+
:src="getIconFilename(segment.details.route_short_name)"
90+
:alt="segment.details.route_short_name"
91+
:title="segment.details.route_short_name"
92+
/>
93+
94+
<svg v-if="index < Math.min(gameState.trip.length, 8) - 1" class="w-3 h-3 text-accent mx-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
95+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
96+
</svg>
97+
</template>
98+
99+
<div v-if="gameState.trip.length > 8" class="text-xs font-bold text-accent ml-1">
100+
+ {{ gameState.trip.length - 8 }} more
101+
</div>
102+
</div>
103+
</div>
104+
105+
<!-- Train type viz -->
106+
<div class="bg-base-100 p-6 border border-base-300 rounded-box shadow-sm flex flex-col">
107+
<div class="w-full text-left mb-2">
108+
<h4 class="font-bold text-lg mb-1 text-base-content">Train Types</h4>
109+
<p class="text-xs text-accent">Distribution by category</p>
110+
</div>
111+
<TrainTypeChart class="flex-grow w-full" />
112+
</div>
113+
114+
</div>
115+
116+
<!--Timechart-->
117+
<div class="bg-base-100 p-6 border border-base-300 rounded-box shadow-sm mb-6">
118+
<h4 class="font-bold text-xl mb-1 text-base-content">Journey Timeline</h4>
119+
<p class="text-sm text-accent mb-4">Chronology of moving vs waiting periods</p>
120+
<TimeChart />
121+
</div>
122+
123+
<div class="grid grid-cols-1 gap-6">
124+
<!--Distance vs stop viz-->
125+
<div class="bg-base-100 p-6 border border-base-300 rounded-box shadow-sm">
126+
<h4 class="font-bold text-xl mb-1 text-base-content">Distance Evolution</h4>
127+
<p class="text-sm text-accent mb-6">Remaining distance per stop</p>
128+
<DistanceChart />
129+
</div>
130+
131+
<!--Distance delta viz-->
132+
<div class="bg-base-100 p-6 border border-base-300 rounded-box shadow-sm">
133+
<h4 class="font-bold text-xl mb-1 text-base-content">Decision Impact</h4>
134+
<p class="text-sm text-accent mb-6">Efficiency of each connection (in km)</p>
135+
<EfficiencyChart />
136+
</div>
137+
138+
</div>
139+
</div>
140+
141+
<!--restart button-->
142+
<div class="bg-base-100 p-6 border-t border-base-300 flex justify-end shrink-0">
36143
<form method="dialog">
37-
<button class="btn btn-outline btn-primary" @click="startGame()">Restart</button>
144+
<button class="btn btn-primary px-8 text-lg" @click="startGame()">
145+
Start New Journey
146+
</button>
38147
</form>
39148
</div>
149+
40150
</div>
41151
</dialog>
42-
<div class="h-screen w-screen grid grid-rows-[auto_1fr] bg-base-300 overflow-hidden">
152+
153+
<div class="h-screen w-screen grid grid-rows-[auto_1fr] bg-base-200 overflow-hidden">
43154
<TopBar />
44155
<div class="grid grid-cols-1 md:grid-cols-[1fr_350px] overflow-hidden">
45156
<Main class="overflow-auto" />
46-
<SideBar class="overflow-y-auto" />
157+
<SideBar class="bg-base-100 border-l border-base-300 overflow-y-auto" />
47158
</div>
48159
</div>
49160
</template>

0 commit comments

Comments
 (0)