Add 'how to play' modal

Author: AlexandreMaquet

via-ui/src/components/TopBar.vue

@@ -34,18 +34,63 @@ async function applySeed() {
 
 <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">
-            <FontAwesomeIcon icon="xmark" class="w-5 h-5" />
-            Close
-          </button>
-        </form>
+    <div class="modal-box w-11/12 max-w-2xl p-0 bg-base-100 shadow-2xl overflow-hidden">
+  <div class="bg-primary p-6 text-primary-content text-left shrink-0">
+    <h2 class="text-3xl font-bold tracking-tight mb-1">Welcome Aboard !</h2>
+    <p class="text-lg opacity-90 font-light">How to plan your journey and find your destination ?</p>
+  </div>
+
+  <div class="p-8 text-base-content">
+    
+    <div class="mb-6">
+      <h3 class="text-xl font-bold mb-2">Your Objective</h3>
+      <p class="text-base-content/80">
+        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.
+      </p>
+    </div>
+
+    <div class="space-y-6 mb-8">
+      <div class="flex gap-4 items-start">
+        <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">
+          1
+        </div>
+        <div>
+          <h4 class="font-bold text-lg leading-none mb-1 mt-1">Check Departures</h4>
+          <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>
+        </div>
+      </div>
+
+      <div class="flex gap-4 items-start">
+        <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">
+          2
+        </div>
+        <div>
+          <h4 class="font-bold text-lg leading-none mb-1 mt-1">Manage Connections</h4>
+          <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>
+        </div>
+      </div>
+
+      <div class="flex gap-4 items-start">
+        <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">
+          3
+        </div>
+        <div>
+          <h4 class="font-bold text-lg leading-none mb-1 mt-1">Time Moves Forward</h4>
+          <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>
+        </div>
       </div>
     </div>
+  </div>
+
+  <div class="bg-base-100 p-6 border-t border-base-300 flex justify-end">
+    <form method="dialog">
+      <button class="btn btn-primary px-8 text-lg font-bold">
+        Start Journey
+      </button>
+    </form>
+  </div>
+
+</div>
   </dialog>
 
   <dialog id="multiplayerModal" class="modal">