feat: use vue router to organize pages

app/package.json

@@ -19,6 +19,7 @@
     "axios": "^1.4.0",
     "socket.io-client": "^4.7.1",
     "vue": "^3.3.4",
+    "vue-router": "^4.2.4",
     "xterm": "^5.2.1",
     "xterm-addon-attach": "^0.8.0",
     "xterm-addon-fit": "^0.7.0"

app/src/App.vue

@@ -1,68 +1,15 @@
-<script setup>
-import { onMounted } from 'vue'
-import socket from './utils/socket'
-import sessionManager from './utils/session'
-
-import CommandlistPart from './components/CommandlistPart.vue'
-import HeaderPart from './components/HeaderPart.vue'
-import HintPart from './components/HintPart.vue'
-import QuestPart from './components/QuestPart.vue'
-import TerminalPart from './components/TerminalPart.vue'
-import VisualizationPart from './components/VisualizationPart.vue'
-import ControlPalette from './components/ControlPalette.vue'
-
-onMounted(async () => {
-  await sessionManager.lastOrCreate()
-  socket.connect(sessionManager.getSession())
-  socket.on('connect', function open() {
-    console.log('Connected to the server.')
-  })
-  socket.on('disconnect', function close() {
-    console.log('Disconnected from the server.')
-  })
-  socket.on('message', console.log)
-})
-</script>
-
 <template>
   <div class="bg-background-primary h-screen">
     <!--header-->
     <div id="header" class="bg-background-secondary content-center h-[6vh] p-1">
       <HeaderPart />
     </div>
-    <!--main-->
-    <div id="main" class="h-[94vh] grid grid-cols-3 gap-3 p-3">
-      <!--Topic and Command List-->
-      <div class="bg-background-secondary h-full rounded-lg">
-        <section id="quest" class="h-2/3 m-3">
-          <QuestPart />
-        </section>
-        <hr class="border-text-tertiary border" />
-        <section id="cmdlist" class="h-1/3">
-          <CommandlistPart />
-        </section>
-      </div>
-      <!--Terminal and Hint-->
-      <div class="bg-background h-full rounded-lg">
-        <section id="terminal" class="h-3/5">
-          <TerminalPart />
-        </section>
-        <section id="hint" class="h-2/5">
-          <HintPart />
-        </section>
-      </div>
-      <!--Visualization-->
-      <div class="h-full">
-        <div class="bg-border rounded-xl h-[90%] px-3 py-6">
-          <div class="bg-background rounded-xl h-full px-1 py-6">
-            <section id="visualization" class="bg-background-primary h-full">
-              <VisualizationPart />
-            </section>
-          </div>
-        </div>
-        <ControlPalette />
-      </div>
-    </div>
+    <!-- route outlet -->
+    <!-- component matched by the route will render here -->
+    <router-view></router-view>
   </div>
 </template>
-<script></script>
+
+<script setup>
+import HeaderPart from './components/HeaderPart.vue'
+</script>

app/src/components/AuthenticationPart.vue

@@ -4,7 +4,7 @@
   <div
     class="bg-background border-8 border-background-primary flex flex-1 flex-col items-center justify-center rounded-3xl p-10"
   >
-    <h1 class="text-text-primary text-3xl font-black mb-8">Linux Odysssey</h1>
+    <h1 class="text-text-primary text-3xl font-black mb-8">Linux Odyssey</h1>
     <form action="" class="w-full">
       <div class="mb-6">
         <label for="email" class="text-sm font-semibold text-text">Email</label
@@ -25,12 +25,14 @@
           placeholder="Enter your password"
         />
       </div>
-      <button
+      <router-link
         type="submit"
         class="inline-flex justify-center rounded-lg text-sm font-black py-2 mt-3 bg-text-primary text-background w-full"
+        to="/game"
       >
-        <span>Log in / Sign up</span></button
-      ><input type="hidden" name="remember" value="true" />
+        <span>Log in / Sign up</span>
+      </router-link>
+      <input type="hidden" name="remember" value="true" />
     </form>
   </div>
 </template>

app/src/components/VisualizationPart.vue

@@ -42,7 +42,7 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  treeRef.value.removeEventListener('mousedown', mouseDownHandler)
+  treeRef?.value?.removeEventListener('mousedown', mouseDownHandler)
 })
 </script>
 

app/src/main.js

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
 import './style.css'
 
 /* import the fontawesome core */
@@ -24,7 +25,10 @@ import {
   faCircleQuestion,
   faCircleRight,
 } from '@fortawesome/free-regular-svg-icons'
+
 import App from './App.vue'
+import GamePage from './views/GamePage.vue'
+import AuthPage from './views/AuthPage.vue'
 
 /* add icons to the library */
 library.add(
@@ -41,4 +45,20 @@ library.add(
   faTerminal
 )
 
-createApp(App).component('font-awesome-icon', FontAwesomeIcon).mount('#app')
+const routes = [
+  { path: '/', name: 'Home', component: AuthPage },
+  { path: '/game', name: 'Game', component: GamePage },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+const app = createApp(App)
+
+app.component('font-awesome-icon', FontAwesomeIcon)
+
+app.use(router)
+
+app.mount('#app')

app/src/views/AuthPage.vue

@@ -1,6 +1,6 @@
 <script setup>
-import AuthenticationPart from './components/AuthenticationPart.vue'
-import Background from './components/DynamicBackground.vue'
+import AuthenticationPart from '../components/AuthenticationPart.vue'
+import Background from '../components/DynamicBackground.vue'
 </script>
 <template>
   <div class="relative w-screen h-screen">

app/src/views/GamePage.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { onMounted } from 'vue'
+import socket from '../utils/socket'
+import sessionManager from '../utils/session'
+import CommandlistPart from '../components/CommandlistPart.vue'
+import HintPart from '../components/HintPart.vue'
+import QuestPart from '../components/QuestPart.vue'
+import TerminalPart from '../components/TerminalPart.vue'
+import VisualizationPart from '../components/VisualizationPart.vue'
+import ControlPalette from '../components/ControlPalette.vue'
+
+onMounted(async () => {
+  await sessionManager.lastOrCreate()
+  socket.connect(sessionManager.getSession())
+  socket.on('connect', function open() {
+    console.log('Connected to the server.')
+  })
+  socket.on('disconnect', function close() {
+    console.log('Disconnected from the server.')
+  })
+  socket.on('message', console.log)
+})
+</script>
+
+<template>
+  <!--main-->
+  <div id="main" class="h-[94vh] grid grid-cols-3 gap-3 p-3">
+    <!--Topic and Command List-->
+    <div class="bg-background-secondary h-full rounded-lg">
+      <section id="quest" class="h-2/3 m-3">
+        <QuestPart />
+      </section>
+      <hr class="border-text-tertiary border" />
+      <section id="cmdlist" class="h-1/3">
+        <CommandlistPart />
+      </section>
+    </div>
+    <!--Terminal and Hint-->
+    <div class="bg-background h-full rounded-lg">
+      <section id="terminal" class="h-3/5">
+        <TerminalPart />
+      </section>
+      <section id="hint" class="h-2/5">
+        <HintPart />
+      </section>
+    </div>
+    <!--Visualization-->
+    <div class="h-full">
+      <div class="bg-border rounded-xl h-[90%] px-3 py-6">
+        <div class="bg-background rounded-xl h-full px-1 py-6">
+          <section id="visualization" class="bg-background-primary h-full">
+            <VisualizationPart />
+          </section>
+        </div>
+      </div>
+      <ControlPalette />
+    </div>
+  </div>
+</template>
+<script></script>

yarn.lock

@@ -975,6 +975,11 @@
     "@vue/compiler-dom" "3.3.4"
     "@vue/shared" "3.3.4"
 
+"@vue/devtools-api@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07"
+  integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==
+
 "@vue/eslint-config-prettier@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@vue/eslint-config-prettier/-/eslint-config-prettier-7.1.0.tgz#97936379c7fb1d982b9d2c6b122306e3c2e464c8"
@@ -4820,6 +4825,13 @@ vue-eslint-parser@^9.3.0:
     lodash "^4.17.21"
     semver "^7.3.6"
 
+vue-router@^4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.2.4.tgz#382467a7e2923e6a85f015d081e1508052c191b9"
+  integrity sha512-9PISkmaCO02OzPVOMq2w82ilty6+xJmQrarYZDkjZBfl4RvYAlt4PKnEX21oW4KTtWfa9OuO/b3qk1Od3AEdCQ==
+  dependencies:
+    "@vue/devtools-api" "^6.5.0"
+
 vue@^3.3.4:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.4.tgz#8ed945d3873667df1d0fcf3b2463ada028f88bd6"