Skip to content

Commit da8881b

Browse files
ylkedylked
committed
allow to close end game screen without restart
1 parent 7a19dfd commit da8881b

2 files changed

Lines changed: 66 additions & 24 deletions

File tree

‎via-ui/src/App.vue‎

Lines changed: 60 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Main from '@/components/Main.vue'
44
import SideBar from '@/components/SideBar.vue'
55
import { useGameManager } from '@/api/game/manager.ts'
66
import { getIconFilename } from '@/api/game/utils.ts'
7-
import { onMounted, ref, watch } from 'vue'
7+
import { computed, onMounted, ref, watch } from 'vue'
88
99
import DistanceChart from '@/components/DistanceChart.vue'
1010
import EfficiencyChart from '@/components/EfficiencyChart.vue'
@@ -13,6 +13,12 @@ import TimeChart from '@/components/TimeChart.vue'
1313
1414
const { gameState, startGame, clearStopPreview } = useGameManager()
1515
16+
const gameWon = computed(() => {
17+
const cur = gameState.value?.currentStop
18+
const tgt = gameState.value?.targetStation
19+
return !!cur && !!tgt && cur.stop_id === tgt.stop_id
20+
})
21+
1622
const modal = ref<HTMLDialogElement | null>(null)
1723
1824
watch(
@@ -34,65 +40,92 @@ onMounted(() => {
3440

3541
<template>
3642
<dialog ref="modal" class="modal">
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-
43+
<div
44+
class="modal-box w-11/12 max-w-7xl p-0 bg-base-200 shadow-2xl overflow-hidden flex flex-col max-h-[90vh]"
45+
>
4046
<div class="bg-primary p-6 text-primary-content text-left shrink-0">
4147
<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>
48+
<p class="text-lg opacity-90 font-light">
49+
Journey analysis across the Swiss railway network.
50+
</p>
4351
</div>
4452

4553
<div class="p-8 text-base-content overflow-y-auto">
46-
4754
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
48-
4955
<!-- 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">
56+
<div
57+
class="bg-base-100 p-6 border border-base-300 rounded-box shadow-sm flex flex-col justify-center relative overflow-hidden"
58+
>
5159
<div class="absolute left-0 top-0 bottom-0 w-1.5 bg-primary"></div>
5260

5361
<div class="text-sm font-bold uppercase text-accent mb-4 pl-3">Travel Finished</div>
5462

5563
<div class="flex flex-col pl-3">
5664
<div class="flex items-center gap-3">
5765
<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>
66+
<div class="text-lg font-medium text-base-content/70">
67+
{{ gameState.startStation?.stop_name }}
68+
</div>
5969
</div>
6070

6171
<div class="flex items-center gap-3 ml-1.5 my-1">
6272
<div class="w-0.5 h-6 border-l-2 border-dashed border-base-300"></div>
6373
</div>
6474

6575
<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" />
76+
<svg
77+
class="w-4 h-4 text-primary -ml-0.5 z-10"
78+
fill="currentColor"
79+
viewBox="0 0 20 20"
80+
>
81+
<path
82+
fill-rule="evenodd"
83+
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"
84+
clip-rule="evenodd"
85+
/>
6886
</svg>
69-
<div class="text-2xl lg:text-3xl font-bold text-primary leading-none">{{ gameState.targetStation?.stop_name }}</div>
87+
<div class="text-2xl lg:text-3xl font-bold text-primary leading-none">
88+
{{ gameState.targetStation?.stop_name }}
89+
</div>
7090
</div>
7191
</div>
7292
</div>
7393

7494
<!-- Trains used-->
75-
<div class="bg-base-100 p-6 border border-base-300 rounded-box shadow-sm flex flex-col justify-center">
76-
95+
<div
96+
class="bg-base-100 p-6 border border-base-300 rounded-box shadow-sm flex flex-col justify-center"
97+
>
7798
<div class="text-sm font-bold uppercase text-accent mb-3">Connections Used</div>
7899

79100
<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>
101+
<div class="text-3xl lg:text-4xl font-bold text-base-content leading-none">
102+
{{ gameState.trip.length }}
103+
</div>
81104
<div class="text-lg font-medium text-accent">trains</div>
82105
</div>
83106

84107
<div class="flex flex-wrap items-center gap-1.5">
85108
<template v-for="(segment, index) in gameState.trip.slice(0, 8)" :key="index">
86-
87109
<img
88110
class="inline-block h-6 w-auto object-contain align-middle drop-shadow-sm"
89111
:src="getIconFilename(segment.details.route_short_name)"
90112
:alt="segment.details.route_short_name"
91113
:title="segment.details.route_short_name"
92114
/>
93115

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>
116+
<svg
117+
v-if="index < Math.min(gameState.trip.length, 8) - 1"
118+
class="w-3 h-3 text-accent mx-0.5"
119+
fill="none"
120+
stroke="currentColor"
121+
viewBox="0 0 24 24"
122+
>
123+
<path
124+
stroke-linecap="round"
125+
stroke-linejoin="round"
126+
stroke-width="2"
127+
d="M9 5l7 7-7 7"
128+
></path>
96129
</svg>
97130
</template>
98131

@@ -110,7 +143,6 @@ onMounted(() => {
110143
</div>
111144
<TrainTypeChart class="flex-grow w-full" />
112145
</div>
113-
114146
</div>
115147

116148
<!--Timechart-->
@@ -134,27 +166,31 @@ onMounted(() => {
134166
<p class="text-sm text-accent mb-6">Efficiency of each connection (in km)</p>
135167
<EfficiencyChart />
136168
</div>
137-
138169
</div>
139170
</div>
140171

141172
<!--restart button-->
142-
<div class="bg-base-100 p-6 border-t border-base-300 flex justify-end shrink-0">
173+
<div class="bg-base-100 p-6 border-t border-base-300 flex justify-end gap-3 shrink-0">
174+
<form method="dialog">
175+
<button class="btn btn-ghost px-8 text-lg">Close</button>
176+
</form>
143177
<form method="dialog">
144178
<button class="btn btn-primary px-8 text-lg" @click="startGame()">
145179
Start New Journey
146180
</button>
147181
</form>
148182
</div>
149-
150183
</div>
151184
</dialog>
152185

153186
<div class="h-screen w-screen grid grid-rows-[auto_1fr] bg-base-200 overflow-hidden">
154187
<TopBar />
155-
<div class="grid grid-cols-1 md:grid-cols-[1fr_350px] overflow-hidden">
188+
<div
189+
class="grid overflow-hidden"
190+
:class="gameWon ? 'grid-cols-1' : 'grid-cols-1 md:grid-cols-[1fr_350px]'"
191+
>
156192
<Main class="overflow-auto" />
157-
<SideBar class="bg-base-100 border-l border-base-300 overflow-y-auto" />
193+
<SideBar v-if="!gameWon" class="bg-base-100 border-l border-base-300 overflow-y-auto" />
158194
</div>
159195
</div>
160196
</template>

‎via-ui/src/components/SideBar.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,12 @@ const departureChosen = computed(() => {
1313
return !!gameState.value?.chosenTrain
1414
})
1515
16+
const gameWon = computed(() => {
17+
const cur = gameState.value?.currentStop
18+
const tgt = gameState.value?.targetStation
19+
return !!cur && !!tgt && cur.stop_id === tgt.stop_id
20+
})
21+
1622
watch(departureChosen, async () => {
1723
await nextTick()
1824
if (scrollContainer.value) {

0 commit comments

Comments
 (0)