feat: use vue router to organize pages

app/src/views/AuthPage.vue

@@ -0,0 +1,16 @@
+<script setup>
+import AuthenticationPart from '../components/AuthenticationPart.vue'
+import Background from '../components/DynamicBackground.vue'
+</script>
+<template>
+  <div class="relative w-screen h-screen">
+    <Background class="w-full h-full" />
+    <div
+      class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
+    >
+      <div class="h-2/3 w-1/3">
+        <AuthenticationPart />
+      </div>
+    </div>
+  </div>
+</template>

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>