Skip to content

Commit 06b09e6

Browse files
ylkedylked
committed
improve topbar ui
1 parent 9948bd5 commit 06b09e6

3 files changed

Lines changed: 119 additions & 84 deletions

File tree

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

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,22 @@ const props = defineProps<{
1010
time: Date
1111
}>()
1212
13+
const CLOCK_SIZE = 100
14+
1315
onMounted(() => {
14-
if (canvasRef.value) {
15-
console.log('canvasRef', canvasRef.value)
16-
clock = new SBBClock(canvasRef.value)
17-
clock.time = props.time
18-
}
16+
const canvas = canvasRef.value
17+
if (!canvas) return
18+
19+
const dpr = window.devicePixelRatio || 1
20+
21+
canvas.width = CLOCK_SIZE * dpr
22+
canvas.height = CLOCK_SIZE * dpr
23+
24+
canvas.style.width = `${CLOCK_SIZE}px`
25+
canvas.style.height = `${CLOCK_SIZE}px`
26+
27+
clock = new SBBClock(canvas)
28+
clock.time = props.time
1929
})
2030
2131
watch(
@@ -27,7 +37,7 @@ watch(
2737
</script>
2838

2939
<template>
30-
<canvas ref="canvasRef" width="75" height="75"></canvas>
40+
<canvas ref="canvasRef"></canvas>
3141
</template>
3242

3343
<style scoped></style>

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

Lines changed: 101 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -35,62 +35,80 @@ async function applySeed() {
3535
<template>
3636
<dialog id="helpModal" class="modal">
3737
<div class="modal-box w-11/12 max-w-2xl p-0 bg-base-100 shadow-2xl overflow-hidden">
38-
<div class="bg-primary p-6 text-primary-content text-left shrink-0">
39-
<h2 class="text-3xl font-bold tracking-tight mb-1">Welcome Aboard !</h2>
40-
<p class="text-lg opacity-90 font-light">How to plan your journey and find your destination ?</p>
41-
</div>
42-
43-
<div class="p-8 text-base-content">
44-
45-
<div class="mb-6">
46-
<h3 class="text-xl font-bold mb-2">Your Objective</h3>
47-
<p class="text-base-content/80">
48-
You will start at a random train station. Your objective is to <strong>reach the targeted final station</strong> by navigating from train to train, station to station.
49-
</p>
50-
</div>
51-
52-
<div class="space-y-6 mb-8">
53-
<div class="flex gap-4 items-start">
54-
<div class="w-8 h-8 rounded-full bg-primary text-primary-content flex items-center justify-center shrink-0 font-bold text-sm shadow-sm">
55-
1
56-
</div>
57-
<div>
58-
<h4 class="font-bold text-lg leading-none mb-1 mt-1">Check Departures</h4>
59-
<p class="text-sm text-base-content/70">Review the departure board of your current station. Choose a train that seems to head in the right direction.</p>
60-
</div>
38+
<div class="bg-primary p-6 text-primary-content text-left shrink-0">
39+
<h2 class="text-3xl font-bold tracking-tight mb-1">Welcome Aboard !</h2>
40+
<p class="text-lg opacity-90 font-light">
41+
How to plan your journey and find your destination ?
42+
</p>
6143
</div>
6244

63-
<div class="flex gap-4 items-start">
64-
<div class="w-8 h-8 rounded-full bg-primary text-primary-content flex items-center justify-center shrink-0 font-bold text-sm shadow-sm">
65-
2
45+
<div class="p-8 text-base-content">
46+
<div class="mb-6">
47+
<h3 class="text-xl font-bold mb-2">Your Objective</h3>
48+
<p class="text-base-content/80">
49+
You will start at a random train station. Your objective is to
50+
<strong>reach the targeted final station</strong> by navigating from train to train,
51+
station to station.
52+
</p>
6653
</div>
67-
<div>
68-
<h4 class="font-bold text-lg leading-none mb-1 mt-1">Manage Connections</h4>
69-
<p class="text-sm text-base-content/70">Board the train, check its list of stops, and decide where to get off to catch your next connection.</p>
54+
55+
<div class="space-y-6 mb-8">
56+
<div class="flex gap-4 items-start">
57+
<div
58+
class="w-8 h-8 rounded-full bg-primary text-primary-content flex items-center justify-center shrink-0 font-bold text-sm shadow-sm"
59+
>
60+
1
61+
</div>
62+
<div>
63+
<h4 class="font-bold text-lg leading-none mb-1 mt-1">Check Departures</h4>
64+
<p class="text-sm text-base-content/70">
65+
Review the departure board of your current station. Choose a train that seems to
66+
head in the right direction.
67+
</p>
68+
</div>
69+
</div>
70+
71+
<div class="flex gap-4 items-start">
72+
<div
73+
class="w-8 h-8 rounded-full bg-primary text-primary-content flex items-center justify-center shrink-0 font-bold text-sm shadow-sm"
74+
>
75+
2
76+
</div>
77+
<div>
78+
<h4 class="font-bold text-lg leading-none mb-1 mt-1">Manage Connections</h4>
79+
<p class="text-sm text-base-content/70">
80+
Board the train, check its list of stops, and decide where to get off to catch your
81+
next connection.
82+
</p>
83+
</div>
84+
</div>
85+
86+
<div class="flex gap-4 items-start">
87+
<div
88+
class="w-8 h-8 rounded-full bg-primary text-primary-content flex items-center justify-center shrink-0 font-bold text-sm shadow-sm"
89+
>
90+
3
91+
</div>
92+
<div>
93+
<h4 class="font-bold text-lg leading-none mb-1 mt-1">Time Moves Forward</h4>
94+
<p class="text-sm text-base-content/70">
95+
Time passes as you travel. The departure board shows only the connections available
96+
at your time.
97+
</p>
98+
</div>
99+
</div>
70100
</div>
71101
</div>
72102

73-
<div class="flex gap-4 items-start">
74-
<div class="w-8 h-8 rounded-full bg-primary text-primary-content flex items-center justify-center shrink-0 font-bold text-sm shadow-sm">
75-
3
76-
</div>
77-
<div>
78-
<h4 class="font-bold text-lg leading-none mb-1 mt-1">Time Moves Forward</h4>
79-
<p class="text-sm text-base-content/70">Time passes as you travel. The departure board shows only the connections available at your time.</p>
80-
</div>
103+
<div class="bg-base-100 p-6 border-t border-base-300 flex justify-end">
104+
<form method="dialog">
105+
<button class="btn btn-primary px-8 text-lg font-bold">
106+
<FontAwesomeIcon icon="play" class="w-5 h-5" />
107+
Start Journey
108+
</button>
109+
</form>
81110
</div>
82111
</div>
83-
</div>
84-
85-
<div class="bg-base-100 p-6 border-t border-base-300 flex justify-end">
86-
<form method="dialog">
87-
<button class="btn btn-primary px-8 text-lg font-bold">
88-
Start Journey
89-
</button>
90-
</form>
91-
</div>
92-
93-
</div>
94112
</dialog>
95113

96114
<dialog id="multiplayerModal" class="modal">
@@ -159,62 +177,67 @@ async function applySeed() {
159177
</dialog>
160178

161179
<div
162-
class="flex flex-col lg:flex-row items-center lg:justify-between w-full bg-base-100 p-4 lg:p-6 border-b border-b-base-200 gap-4 lg:gap-0 mx-auto"
180+
class="flex flex-col lg:flex-row lg:items-center lg:justify-between w-full bg-base-100 px-3 py-2 lg:px-6 border-b border-b-base-200 gap-2 lg:gap-0"
163181
>
164-
<div class="flex items-center gap-4 w-full lg:w-auto justify-center lg:justify-start">
165-
<img src="/logo.svg" alt="Game Logo" class="h-12 lg:h-16 w-auto object-contain" />
166-
<div class="h-8 w-[1px] bg-base-300"></div>
167-
<SBBClock :time="gameState.currentTime" />
168-
</div>
169-
170-
<div class="flex flex-row gap-6 lg:gap-12 my-2 lg:my-0 lg:flex-1 lg:justify-center">
171-
<div
172-
v-if="gameState.targetStation !== null"
173-
class="flex flex-col items-center lg:items-start text-center lg:text-left"
174-
>
175-
<span class="text-[10px] font-bold uppercase tracking-wider opacity-50">Goal</span>
176-
<span class="text-lg lg:text-xl font-extrabold">{{
177-
gameState.targetStation?.stop_name
178-
}}</span>
182+
<!-- Top mobile row / left+centre desktop: logo+clock and goal+distance -->
183+
<div class="flex flex-row items-center w-full lg:flex-1 gap-3 lg:gap-12">
184+
<!-- Logo + clock -->
185+
<div class="flex items-center gap-3 lg:gap-x-4 shrink-0">
186+
<img src="/logo.svg" alt="Game Logo" class="h-10 lg:h-16 w-auto object-contain" />
187+
<div class="hidden lg:block h-8 w-[1px] bg-base-300"></div>
188+
<SBBClock :time="gameState.currentTime" />
179189
</div>
180190

181-
<div
182-
v-if="gameState.targetStation !== null"
183-
class="flex flex-col items-center lg:items-start text-center lg:text-left"
184-
>
185-
<span class="text-[10px] font-bold uppercase tracking-wider opacity-50">Distance</span>
186-
<span class="text-lg lg:text-xl font-extrabold text-primary"
187-
>{{ gameState.currentDistance }} km</span
191+
<!-- Goal + distance: pinned right on mobile, centred on desktop -->
192+
<div class="flex flex-row gap-4 lg:gap-12 ml-auto lg:ml-0 lg:mx-auto items-center min-w-0">
193+
<div
194+
v-if="gameState.targetStation !== null"
195+
class="flex flex-col items-end lg:items-start text-right lg:text-left min-w-0"
188196
>
197+
<span class="text-[10px] font-bold uppercase tracking-wider opacity-50">Goal</span>
198+
<span class="text-sm lg:text-xl font-extrabold truncate max-w-[140px] lg:max-w-none">
199+
{{ gameState.targetStation?.stop_name }}
200+
</span>
201+
</div>
202+
203+
<div
204+
v-if="gameState.targetStation !== null"
205+
class="flex flex-col items-end lg:items-start text-right lg:text-left"
206+
>
207+
<span class="text-[10px] font-bold uppercase tracking-wider opacity-50">Distance</span>
208+
<span class="text-sm lg:text-xl font-extrabold text-primary"
209+
>{{ gameState.currentDistance }} km</span
210+
>
211+
</div>
189212
</div>
190213
</div>
191214

192-
<div
193-
class="w-full lg:w-auto flex flex-row gap-2 justify-center lg:justify-end max-w-md lg:max-w-none mx-auto lg:mx-0 shrink-0"
194-
>
215+
<!-- Buttons row -->
216+
<div class="flex flex-row gap-2 w-full lg:w-auto shrink-0">
195217
<button
196218
class="btn btn-secondary btn-soft flex-1 lg:flex-initial font-bold lg:px-6"
197219
onclick="multiplayerModal.showModal()"
198220
>
199221
<FontAwesomeIcon icon="users" class="w-5 h-5" />
200-
Multiplayer
222+
<span class="hidden sm:inline">Multiplayer</span>
201223
</button>
202224
<button
203225
class="btn btn-secondary btn-soft flex-1 lg:flex-initial font-bold lg:px-6"
204226
onclick="helpModal.showModal()"
205227
>
206228
<FontAwesomeIcon icon="circle-question" class="w-5 h-5" />
207-
How to play
229+
<span class="hidden sm:inline">How to play</span>
208230
</button>
209231
<button
210232
class="btn btn-primary btn-soft flex-1 lg:flex-initial font-bold lg:px-6"
211233
@click="start()"
212234
:disabled="loading"
213235
>
214236
<span v-if="loading" class="loading loading-spinner loading-xs"></span>
215-
<FontAwesomeIcon icon="arrow-rotate-left" class="w-5 h-5" />
216-
Restart
237+
<FontAwesomeIcon v-else icon="arrow-rotate-left" class="w-5 h-5" />
238+
<span class="hidden sm:inline">Restart</span>
217239
</button>
218240
</div>
219241
</div>
242+
>
220243
</template>

‎via-ui/src/main.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
faLocationDot,
1616
faCircleQuestion,
1717
faArrowRotateLeft,
18+
faPlay,
1819
} from '@fortawesome/free-solid-svg-icons'
1920

2021
library.add(
@@ -29,6 +30,7 @@ library.add(
2930
faLocationDot,
3031
faCircleQuestion,
3132
faArrowRotateLeft,
33+
faPlay,
3234
)
3335

3436
const app = createApp(App)

0 commit comments

Comments
 (0)