feat: add practice mode

package.json

@@ -32,7 +32,8 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "bootstrap": "^5.3.3"
+    "bootstrap": "^5.3.3",
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.8.0",

src/App.vue

@@ -1,13 +1,8 @@
 <script setup>
-import Navbar from './components/Navbar.vue';
-import AboutModal from './components/AboutModal.vue';
-import Game from './components/Game.vue';
 </script>
 
 <template>
-  <Navbar />
-  <AboutModal />
-  <Game />
+  <router-view />
 </template>
 
 <style scoped>

src/components/Game.vue

@@ -1,17 +1,16 @@
 <script setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import * as bootstrap from 'bootstrap';
 import { Game } from '../Game.js';
 import { getUniqueStops } from '../utils.js';
 import { searchStations } from '../utils.front.js';
 import RulesModal from './RulesModal.vue';
 import FinishModal from './FinishModal.vue';
 
-const sortedStations = getUniqueStops().map(d => d.stop_name).sort();
-const date = new Date();
-const dateToSeed = date.getFullYear() * 10000 + (date.getMonth() + 1) * 100 + date.getDate();
+const props = defineProps(['seed']);
+let game = new Game(props.seed);
 
-const game = new Game(dateToSeed);
+const sortedStations = getUniqueStops().map(d => d.stop_name).sort();
 
 const title = 'Métro travel';
 const invalidFeedback = 'Le nom de station doit être valide.';
@@ -29,6 +28,12 @@ onMounted(() => {
   instruction.value = game.instruction;
 });
 
+watch(() => props.seed, (newSeed) => {
+  game = new Game(newSeed);
+  game.init();
+  instruction.value = game.instruction;
+});
+
 function tryStop() {
   const stationName = station.value;
   try {

src/components/Navbar.vue

@@ -5,7 +5,9 @@
 <template>
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
     <div class="container-fluid">
-      <a class="navbar-brand" href="#">Métro Travel</a>
+      <RouterLink class="navbar-brand" to="/">
+        Métro Travel
+      </RouterLink>
       <button
         class="navbar-toggler"
         type="button"
@@ -19,6 +21,11 @@
       </button>
       <div id="navbarSupportedContent" class="collapse navbar-collapse">
         <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+          <li>
+            <RouterLink to="/practice" class="nav-link">
+              Entrainement
+            </RouterLink>
+          </li>
           <li class="nav-item">
             <button
               class="nav-link"

src/main.js

@@ -1,7 +1,8 @@
 import { createApp } from 'vue';
-
 import App from './App.vue';
 
+import { router } from './router';
+
 const app = createApp(App);
 
-app.mount('#app');
+app.use(router).mount('#app');

src/pages/Index.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import Navbar from '../components/Navbar.vue';
+import AboutModal from '../components/AboutModal.vue';
+import Game from '../components/Game.vue';
+
+const route = useRoute();
+const router = useRouter();
+
+const date = new Date();
+const dateToSeed = date.getFullYear() * 10000 + (date.getMonth() + 1) * 100 + date.getDate();
+const seed = ref();
+
+function handleSeed() {
+  if (route.path === '/') {
+    seed.value = dateToSeed;
+  }
+  else if (route.query.seed && validHex(route.query.seed)) {
+    seed.value = hexToSeed(route.query.seed);
+  }
+  else {
+    const hexSeed = getRandomSeed();
+    router.push({ query: { seed: hexSeed } });
+  }
+}
+
+handleSeed();
+
+function validHex(hex) {
+  return /^[0-9a-fA-F]+$/.test(hex);
+}
+
+function hexToSeed(hex) {
+  return Number.parseInt(hex, 16);
+}
+
+function getRandomSeed() {
+  return [...Array(6)].map(() => Math.floor(Math.random() * 16).toString(16)).join('');
+}
+
+watch(() => route.query.seed, () => {
+  handleSeed();
+});
+
+watch(() => route.path, () => {
+  handleSeed();
+});
+</script>
+
+<template>
+  <Navbar />
+  <AboutModal />
+  <Game :seed="seed" />
+</template>
+
+<style scoped>
+
+</style>

src/router.js

@@ -0,0 +1,12 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import Index from './pages/Index.vue';
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    { path: '/', name: 'Index', component: Index },
+    { path: '/practice', name: 'Practice', component: Index },
+  ],
+});
+
+export { router };