From 0ca0ef08e1baa880739ae11dcd758bc18d3d0d07 Mon Sep 17 00:00:00 2001
From: "Chen, Tai-Lin" <neil.chentl@gmail.com>
Date: Fri, 1 Sep 2023 17:50:30 +0800
Subject: [PATCH 1/3] feat: add Authentication Page

---
 .eslintrc.js                              |  5 +-
 app/src/App.vue                           |  7 +-
 app/src/AuthenticationPage.vue            | 16 ++++
 app/src/components/AuthenticationPart.vue | 36 +++++++++
 app/src/components/DynamicBackground.vue  | 98 +++++++++++++++++++++++
 app/src/components/HeaderPart.vue         |  2 +-
 app/src/components/QuestPart.vue          |  2 +-
 app/tailwind.config.js                    |  6 +-
 8 files changed, 163 insertions(+), 9 deletions(-)
 create mode 100644 app/src/AuthenticationPage.vue
 create mode 100644 app/src/components/AuthenticationPart.vue
 create mode 100644 app/src/components/DynamicBackground.vue

diff --git a/.eslintrc.js b/.eslintrc.js
index f438449..2744ff7 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -15,12 +15,15 @@ module.exports = {
     sourceType: 'module',
   },
   rules: {
-    'prettier/prettier': ['error', { endOfLine: 'auto', semi: false }], // We added this
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'import/extensions': 'off',
     camelcase: ['error', { properties: 'never', ignoreDestructuring: true }],
     'no-param-reassign': ['error', { props: false }],
     'no-underscore-dangle': ['error', { allow: ['_id'] }],
+    /* we added this */
+    'no-var': 'error',
+    'no-plusplus': 'off',
+    'prettier/prettier': ['error', { endOfLine: 'auto', semi: false }],
   },
 }
diff --git a/app/src/App.vue b/app/src/App.vue
index e6e3717..a4d6e42 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -1,5 +1,8 @@
 <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'
@@ -7,8 +10,6 @@ import QuestPart from './components/QuestPart.vue'
 import TerminalPart from './components/TerminalPart.vue'
 import VisualizationPart from './components/VisualizationPart.vue'
 import ControlPalette from './components/ControlPalette.vue'
-import socket from './utils/socket'
-import sessionManager from './utils/session'
 
 onMounted(async () => {
   await sessionManager.lastOrCreate()
@@ -36,7 +37,7 @@ onMounted(async () => {
         <section id="quest" class="h-2/3 m-3">
           <QuestPart />
         </section>
-        <hr class="border-text-line border" />
+        <hr class="border-text-tertiary border" />
         <section id="cmdlist" class="h-1/3">
           <CommandlistPart />
         </section>
diff --git a/app/src/AuthenticationPage.vue b/app/src/AuthenticationPage.vue
new file mode 100644
index 0000000..b7c2280
--- /dev/null
+++ b/app/src/AuthenticationPage.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>
diff --git a/app/src/components/AuthenticationPart.vue b/app/src/components/AuthenticationPart.vue
new file mode 100644
index 0000000..26707d9
--- /dev/null
+++ b/app/src/components/AuthenticationPart.vue
@@ -0,0 +1,36 @@
+<script setup></script>
+<template>
+  <!--login page-->
+  <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>
+    <form action="" class="w-full">
+      <div class="mb-6">
+        <label for="email" class="text-sm font-semibold text-text">Email</label
+        ><input
+          type="email"
+          id="email"
+          class="my-4 bg-background-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-background-secondary"
+          placeholder="Enter your email address"
+        />
+      </div>
+      <div class="mb-6">
+        <label for="password" class="text-sm font-semibold leading-6 text-text"
+          >Password</label
+        ><input
+          type="password"
+          id="password"
+          class="my-4 bg-background-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-background-secondary"
+          placeholder="Enter your password"
+        />
+      </div>
+      <button
+        type="submit"
+        class="inline-flex justify-center rounded-lg text-sm font-black py-2 mt-3 bg-text-primary text-background w-full"
+      >
+        <span>Log in / Sign up</span></button
+      ><input type="hidden" name="remember" value="true" />
+    </form>
+  </div>
+</template>
diff --git a/app/src/components/DynamicBackground.vue b/app/src/components/DynamicBackground.vue
new file mode 100644
index 0000000..6343051
--- /dev/null
+++ b/app/src/components/DynamicBackground.vue
@@ -0,0 +1,98 @@
+<template>
+  <div id="box">
+    <canvas ref="canvas"></canvas>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+
+const cw = ref(0)
+const ch = ref(0)
+const fallingCharArr = ref([])
+const fontSize = ref(16)
+const maxColums = ref(0)
+const charArr = ['0', '1', '', '', '']
+const ctx = ref(null)
+
+const randomInt = (min, max) => {
+  return Math.floor(Math.random() * (max - min) + min)
+}
+
+const randomFloat = (min, max) => {
+  return Math.random() * (max - min) + min
+}
+
+const draw = (point) => {
+  point.value = charArr[randomInt(0, charArr.length)].toUpperCase()
+  if (point.y < 0) point.speed = randomFloat(10, 20)
+
+  ctx.value.fillStyle = '#0F0'
+  ctx.value.font = `${fontSize.value}px san-serif`
+  ctx.value.fillText(point.value, point.x, point.y)
+
+  point.y += point.speed
+  if (point.y > ch.value) {
+    point.y = randomFloat(-100, 0)
+    point.speed = randomFloat(2, 8)
+  }
+}
+
+const update = () => {
+  ctx.value.fillStyle = 'rgba(0,0,0,0.05)'
+  ctx.value.fillRect(0, 0, cw.value, ch.value)
+
+  let i = fallingCharArr.value.length
+  while (i--) {
+    draw(fallingCharArr.value[i])
+  }
+  setTimeout(update, 25)
+}
+
+onMounted(() => {
+  cw.value = document.documentElement.clientWidth
+  ch.value = document.documentElement.clientHeight
+  maxColums.value = cw.value / fontSize.value
+
+  const canvas = document.querySelector('canvas')
+  ctx.value = canvas.getContext('2d')
+
+  canvas.width = cw.value
+  canvas.height = ch.value
+
+  for (let i = 0; i < maxColums.value; i++) {
+    fallingCharArr.value.push({
+      x: i * fontSize.value,
+      y: randomFloat(-500, 0),
+    })
+  }
+
+  window.addEventListener('resize', () => {
+    cw.value = document.documentElement.clientWidth
+    ch.value = document.documentElement.clientHeight
+    maxColums.value = cw.value / fontSize.value
+    canvas.width = cw.value
+    canvas.height = ch.value
+  })
+
+  update()
+})
+
+onBeforeUnmount(() => {
+  // 清理事件監聽或其他需要在組件卸載時清理的內容
+})
+</script>
+
+<style scoped>
+#box {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+}
+
+canvas {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/app/src/components/HeaderPart.vue b/app/src/components/HeaderPart.vue
index 6333239..60e000b 100644
--- a/app/src/components/HeaderPart.vue
+++ b/app/src/components/HeaderPart.vue
@@ -12,7 +12,7 @@
       <button id="backward" class="flex items-center">
         <font-awesome-icon
           :icon="['fas', 'arrow-left']"
-          class="text-text-line h-5 w-5"
+          class="text-text-tertiary h-5 w-5"
         />
       </button>
       <button>
diff --git a/app/src/components/QuestPart.vue b/app/src/components/QuestPart.vue
index 77da551..933d1d8 100644
--- a/app/src/components/QuestPart.vue
+++ b/app/src/components/QuestPart.vue
@@ -24,7 +24,7 @@ api
     <h1 id="topic" class="text-text" v-else-if="questData">
       {{ questData.title }}
     </h1>
-    <hr class="border-text-line border-2 my-2" />
+    <hr class="border-text-tertiary border-2 my-2" />
     <div>
       <p class="text-red-500" v-if="questErr">{{ questErr.message }}</p>
       <p class="text-text" v-else-if="questData">{{ questData.instruction }}</p>
diff --git a/app/tailwind.config.js b/app/tailwind.config.js
index ea81704..403273c 100644
--- a/app/tailwind.config.js
+++ b/app/tailwind.config.js
@@ -7,12 +7,12 @@ export default {
         background: {
           primary: '#282A33',
           secondary: '#131313',
-          DEFAULT: '#010103',
+          DEFAULT: '#000000',
         },
         text: {
-          primary: '#39FF14',
+          primary: '#00FF00',
           secondary: '#ADADB5',
-          line: '#4A4B63',
+          tertiary: '#4A4B63',
           DEFAULT: '#FFFFFF',
         },
         disabled: {

From b41343ed689ce84da0c048587e8aeb050246ef87 Mon Sep 17 00:00:00 2001
From: "Chen, Tai-Lin" <neil.chentl@gmail.com>
Date: Fri, 1 Sep 2023 17:50:30 +0800
Subject: [PATCH 2/3] feat: add Authentication Page

---
 .eslintrc.js                              |  5 +-
 app/src/App.vue                           |  7 +-
 app/src/AuthenticationPage.vue            | 16 ++++
 app/src/components/AuthenticationPart.vue | 36 +++++++++
 app/src/components/DynamicBackground.vue  | 94 +++++++++++++++++++++++
 app/src/components/HeaderPart.vue         |  2 +-
 app/src/components/QuestPart.vue          |  2 +-
 app/tailwind.config.js                    |  6 +-
 8 files changed, 159 insertions(+), 9 deletions(-)
 create mode 100644 app/src/AuthenticationPage.vue
 create mode 100644 app/src/components/AuthenticationPart.vue
 create mode 100644 app/src/components/DynamicBackground.vue

diff --git a/.eslintrc.js b/.eslintrc.js
index f438449..2744ff7 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -15,12 +15,15 @@ module.exports = {
     sourceType: 'module',
   },
   rules: {
-    'prettier/prettier': ['error', { endOfLine: 'auto', semi: false }], // We added this
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'import/extensions': 'off',
     camelcase: ['error', { properties: 'never', ignoreDestructuring: true }],
     'no-param-reassign': ['error', { props: false }],
     'no-underscore-dangle': ['error', { allow: ['_id'] }],
+    /* we added this */
+    'no-var': 'error',
+    'no-plusplus': 'off',
+    'prettier/prettier': ['error', { endOfLine: 'auto', semi: false }],
   },
 }
diff --git a/app/src/App.vue b/app/src/App.vue
index e6e3717..a4d6e42 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -1,5 +1,8 @@
 <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'
@@ -7,8 +10,6 @@ import QuestPart from './components/QuestPart.vue'
 import TerminalPart from './components/TerminalPart.vue'
 import VisualizationPart from './components/VisualizationPart.vue'
 import ControlPalette from './components/ControlPalette.vue'
-import socket from './utils/socket'
-import sessionManager from './utils/session'
 
 onMounted(async () => {
   await sessionManager.lastOrCreate()
@@ -36,7 +37,7 @@ onMounted(async () => {
         <section id="quest" class="h-2/3 m-3">
           <QuestPart />
         </section>
-        <hr class="border-text-line border" />
+        <hr class="border-text-tertiary border" />
         <section id="cmdlist" class="h-1/3">
           <CommandlistPart />
         </section>
diff --git a/app/src/AuthenticationPage.vue b/app/src/AuthenticationPage.vue
new file mode 100644
index 0000000..b7c2280
--- /dev/null
+++ b/app/src/AuthenticationPage.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>
diff --git a/app/src/components/AuthenticationPart.vue b/app/src/components/AuthenticationPart.vue
new file mode 100644
index 0000000..26707d9
--- /dev/null
+++ b/app/src/components/AuthenticationPart.vue
@@ -0,0 +1,36 @@
+<script setup></script>
+<template>
+  <!--login page-->
+  <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>
+    <form action="" class="w-full">
+      <div class="mb-6">
+        <label for="email" class="text-sm font-semibold text-text">Email</label
+        ><input
+          type="email"
+          id="email"
+          class="my-4 bg-background-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-background-secondary"
+          placeholder="Enter your email address"
+        />
+      </div>
+      <div class="mb-6">
+        <label for="password" class="text-sm font-semibold leading-6 text-text"
+          >Password</label
+        ><input
+          type="password"
+          id="password"
+          class="my-4 bg-background-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-background-secondary"
+          placeholder="Enter your password"
+        />
+      </div>
+      <button
+        type="submit"
+        class="inline-flex justify-center rounded-lg text-sm font-black py-2 mt-3 bg-text-primary text-background w-full"
+      >
+        <span>Log in / Sign up</span></button
+      ><input type="hidden" name="remember" value="true" />
+    </form>
+  </div>
+</template>
diff --git a/app/src/components/DynamicBackground.vue b/app/src/components/DynamicBackground.vue
new file mode 100644
index 0000000..ea17276
--- /dev/null
+++ b/app/src/components/DynamicBackground.vue
@@ -0,0 +1,94 @@
+<template>
+  <div id="box">
+    <canvas ref="canvas"></canvas>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const cw = ref(0)
+const ch = ref(0)
+const fallingCharArr = ref([])
+const fontSize = ref(16)
+const maxColums = ref(0)
+const charArr = ['0', '1', '', '', '']
+const ctx = ref(null)
+
+const randomInt = (min, max) => {
+  return Math.floor(Math.random() * (max - min) + min)
+}
+
+const randomFloat = (min, max) => {
+  return Math.random() * (max - min) + min
+}
+
+const draw = (point) => {
+  point.value = charArr[randomInt(0, charArr.length)].toUpperCase()
+  if (point.y < 0) point.speed = randomFloat(10, 20)
+
+  ctx.value.fillStyle = '#0F0'
+  ctx.value.font = `${fontSize.value}px san-serif`
+  ctx.value.fillText(point.value, point.x, point.y)
+
+  point.y += point.speed
+  if (point.y > ch.value) {
+    point.y = randomFloat(-100, 0)
+    point.speed = randomFloat(2, 8)
+  }
+}
+
+const update = () => {
+  ctx.value.fillStyle = 'rgba(0,0,0,0.05)'
+  ctx.value.fillRect(0, 0, cw.value, ch.value)
+
+  let i = fallingCharArr.value.length
+  while (i--) {
+    draw(fallingCharArr.value[i])
+  }
+  setTimeout(update, 25)
+}
+
+onMounted(() => {
+  cw.value = document.documentElement.clientWidth
+  ch.value = document.documentElement.clientHeight
+  maxColums.value = cw.value / fontSize.value
+
+  const canvas = document.querySelector('canvas')
+  ctx.value = canvas.getContext('2d')
+
+  canvas.width = cw.value
+  canvas.height = ch.value
+
+  for (let i = 0; i < maxColums.value; i++) {
+    fallingCharArr.value.push({
+      x: i * fontSize.value,
+      y: randomFloat(-500, 0),
+    })
+  }
+
+  window.addEventListener('resize', () => {
+    cw.value = document.documentElement.clientWidth
+    ch.value = document.documentElement.clientHeight
+    maxColums.value = cw.value / fontSize.value
+    canvas.width = cw.value
+    canvas.height = ch.value
+  })
+
+  update()
+})
+</script>
+
+<style scoped>
+#box {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+}
+
+canvas {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/app/src/components/HeaderPart.vue b/app/src/components/HeaderPart.vue
index 6333239..60e000b 100644
--- a/app/src/components/HeaderPart.vue
+++ b/app/src/components/HeaderPart.vue
@@ -12,7 +12,7 @@
       <button id="backward" class="flex items-center">
         <font-awesome-icon
           :icon="['fas', 'arrow-left']"
-          class="text-text-line h-5 w-5"
+          class="text-text-tertiary h-5 w-5"
         />
       </button>
       <button>
diff --git a/app/src/components/QuestPart.vue b/app/src/components/QuestPart.vue
index 77da551..933d1d8 100644
--- a/app/src/components/QuestPart.vue
+++ b/app/src/components/QuestPart.vue
@@ -24,7 +24,7 @@ api
     <h1 id="topic" class="text-text" v-else-if="questData">
       {{ questData.title }}
     </h1>
-    <hr class="border-text-line border-2 my-2" />
+    <hr class="border-text-tertiary border-2 my-2" />
     <div>
       <p class="text-red-500" v-if="questErr">{{ questErr.message }}</p>
       <p class="text-text" v-else-if="questData">{{ questData.instruction }}</p>
diff --git a/app/tailwind.config.js b/app/tailwind.config.js
index ea81704..403273c 100644
--- a/app/tailwind.config.js
+++ b/app/tailwind.config.js
@@ -7,12 +7,12 @@ export default {
         background: {
           primary: '#282A33',
           secondary: '#131313',
-          DEFAULT: '#010103',
+          DEFAULT: '#000000',
         },
         text: {
-          primary: '#39FF14',
+          primary: '#00FF00',
           secondary: '#ADADB5',
-          line: '#4A4B63',
+          tertiary: '#4A4B63',
           DEFAULT: '#FFFFFF',
         },
         disabled: {

From c3b7968a76e09ccf0dacd29e1519f10b1f75a8b2 Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Sun, 10 Sep 2023 20:06:23 +0800
Subject: [PATCH 3/3] feat: use vue router to organize pages

---
 app/package.json                              |  1 +
 app/src/App.vue                               | 67 ++-----------------
 app/src/components/AuthenticationPart.vue     | 10 +--
 app/src/components/VisualizationPart.vue      |  2 +-
 app/src/main.js                               | 22 +++++-
 .../AuthPage.vue}                             |  4 +-
 app/src/views/GamePage.vue                    | 60 +++++++++++++++++
 yarn.lock                                     | 12 ++++
 8 files changed, 110 insertions(+), 68 deletions(-)
 rename app/src/{AuthenticationPage.vue => views/AuthPage.vue} (72%)
 create mode 100644 app/src/views/GamePage.vue

diff --git a/app/package.json b/app/package.json
index d38cd0b..8f5147c 100644
--- a/app/package.json
+++ b/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"
diff --git a/app/src/App.vue b/app/src/App.vue
index a4d6e42..767991b 100644
--- a/app/src/App.vue
+++ b/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>
diff --git a/app/src/components/AuthenticationPart.vue b/app/src/components/AuthenticationPart.vue
index 26707d9..3d2da99 100644
--- a/app/src/components/AuthenticationPart.vue
+++ b/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>
diff --git a/app/src/components/VisualizationPart.vue b/app/src/components/VisualizationPart.vue
index f1c9a77..ac9a061 100644
--- a/app/src/components/VisualizationPart.vue
+++ b/app/src/components/VisualizationPart.vue
@@ -42,7 +42,7 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  treeRef.value.removeEventListener('mousedown', mouseDownHandler)
+  treeRef?.value?.removeEventListener('mousedown', mouseDownHandler)
 })
 </script>
 
diff --git a/app/src/main.js b/app/src/main.js
index 84f3945..55e4c22 100644
--- a/app/src/main.js
+++ b/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')
diff --git a/app/src/AuthenticationPage.vue b/app/src/views/AuthPage.vue
similarity index 72%
rename from app/src/AuthenticationPage.vue
rename to app/src/views/AuthPage.vue
index b7c2280..749522b 100644
--- a/app/src/AuthenticationPage.vue
+++ b/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">
diff --git a/app/src/views/GamePage.vue b/app/src/views/GamePage.vue
new file mode 100644
index 0000000..4aff284
--- /dev/null
+++ b/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>
diff --git a/yarn.lock b/yarn.lock
index 874a6cd..fc0cbb7 100644
--- a/yarn.lock
+++ b/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"