add help modal, clarify button labels and resize clock

Author: ylked

via-ui/src/components/SBBClock.vue

@@ -27,7 +27,7 @@ watch(
 </script>
 
 <template>
-  <canvas ref="canvasRef" width="100" height="100"></canvas>
+  <canvas ref="canvasRef" width="75" height="75"></canvas>
 </template>
 
 <style scoped></style>

via-ui/src/components/SwissMap.vue

@@ -455,7 +455,7 @@ function resetZoom() {
 <template>
   <div class="wrapper">
     <div ref="mapContainer" id="map-container">
-      <button class="reset-btn" type="button" @click="resetZoom">Reset</button>
+      <button class="reset-btn" type="button" @click="resetZoom">Reset zoom</button>
       <div id="tooltip" class="tooltip"></div>
     </div>
   </div>

via-ui/src/components/TopBar.vue

@@ -14,6 +14,18 @@ async function start() {
 </script>
 
 <template>
+  <dialog id="helpModal" class="modal">
+    <div class="modal-box">
+      <h3 class="text-lg font-bold">How to play?</h3>
+      <p class="py-4">Here, you will find explanation on how to play the game</p>
+      <div class="modal-action">
+        <form method="dialog">
+          <button class="btn btn-soft btn-primary">Close</button>
+        </form>
+      </div>
+    </div>
+  </dialog>
+
   <div
     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 max-w-[1400px] mx-auto"
   >
@@ -45,10 +57,22 @@ async function start() {
       </div>
     </div>
 
-    <div class="w-full lg:w-auto flex justify-center lg:justify-end">
-      <button class="btn btn-success w-full lg:w-auto font-bold px-8" @click="start()">
-        <span class="loading loading-spinner loading-sm" v-show="loading"></span>
-        Start
+    <div
+      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"
+    >
+      <button
+        class="btn btn-secondary btn-soft flex-1 lg:flex-initial font-bold lg:px-6"
+        onclick="helpModal.showModal()"
+      >
+        How to play?
+      </button>
+      <button
+        class="btn btn-primary btn-soft flex-1 lg:flex-initial font-bold lg:px-6"
+        @click="start()"
+        :disabled="loading"
+      >
+        <span v-if="loading" class="loading loading-spinner loading-xs"></span>
+        Restart
       </button>
     </div>
   </div>