fix: improve game page UI

app/src/components/AuthForm.vue

@@ -84,7 +84,7 @@ const handleChange = () => {
 }
 </script>
 <template>
-  <!--login page-->
+  <!-- login page -->
   <div
     class="bg-background border-8 border-background-primary flex flex-1 flex-col items-center justify-center rounded-3xl p-10"
   >
@@ -114,7 +114,12 @@ const handleChange = () => {
           <span class="font-medium">Continue with GitHub</span>
         </a>
       </div>
-      <p class="text-text-secondary flex justify-center mt-3">or</p>
+      <p
+        class="text-text-secondary flex justify-center mt-3"
+        v-if="type === 'login' || type === 'register'"
+      >
+        or
+      </p>
       <div class="mb-6">
         <input
           type="text"
@@ -156,7 +161,7 @@ const handleChange = () => {
           @input="handleChange()"
         />
       </div>
-      <p class="text-red-500 flex justify-center" v-if="errorMessage">
+      <p class="text-error flex justify-center" v-if="errorMessage">
         {{ errorMessage }}
       </p>
       <button

app/src/components/GameHeaderPart.vue

@@ -0,0 +1,83 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { logout } from '../utils/auth'
+import api from '../utils/api'
+
+const router = useRouter()
+
+const handleLogout = async () => {
+  await logout()
+  router.push({ name: 'login' })
+}
+
+const questData = ref(null)
+const questErr = ref(null)
+
+onMounted(async () => {
+  try {
+    const res = await api.get('/quests/helloworld')
+    questData.value = res.data
+  } catch (err) {
+    questErr.value = err
+  }
+})
+</script>
+
+<template>
+  <div
+    id="header"
+    class="bg-background-secondary content-center h-full w-full p-1"
+  >
+    <div class="h-full flex items-center justify-center mx-3">
+      <div class="flex items-center gap-3">
+        <button id="stream" class="flex items-center">
+          <font-awesome-icon
+            :icon="['fas', 'bars']"
+            class="text-text-primary h-5 w-5"
+          />
+        </button>
+        <button id="backward" class="flex items-center">
+          <font-awesome-icon
+            :icon="['fas', 'arrow-left']"
+            class="text-text-tertiary h-5 w-5"
+          />
+        </button>
+        <button>
+          <p
+            class="text-text-primary inline-block font-bold whitespace-nowrap"
+            v-if="questData"
+          >
+            {{ questData.title }}
+          </p>
+        </button>
+      </div>
+      <div class="h-full w-full flex gap-3 items-center justify-end">
+        <button id="warning" class="flex items-center">
+          <font-awesome-icon
+            :icon="['fas', 'triangle-exclamation']"
+            class="text-text-primary h-5 w-5"
+          />
+        </button>
+        <button id="setting" class="flex items-center">
+          <font-awesome-icon
+            :icon="['fas', 'gear']"
+            class="text-text-primary h-5 w-5"
+          />
+        </button>
+        <button id="fullscreen" class="flex items-center">
+          <font-awesome-icon
+            :icon="['fas', 'expand']"
+            class="text-text-primary h-5 w-5"
+          />
+        </button>
+        <button @click="handleLogout">
+          <font-awesome-icon
+            :icon="['fas', 'arrow-right-from-bracket']"
+            class="text-text-primary h-5 w-5"
+          />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

app/src/components/HeaderPart.vue

@@ -1,67 +0,0 @@
-<script setup>
-import { useRouter } from 'vue-router'
-import { logout } from '../utils/auth'
-
-const router = useRouter()
-
-const handleLogout = async () => {
-  await logout()
-  router.push({ name: 'login' })
-}
-</script>
-
-<template>
-  <div class="h-full flex items-center justify-center mx-3">
-    <div class="flex items-center gap-3">
-      <button id="stream" class="flex items-center">
-        <font-awesome-icon
-          :icon="['fas', 'bars']"
-          class="text-text-primary h-5 w-5"
-        />
-      </button>
-      <button id="backward" class="flex items-center">
-        <font-awesome-icon
-          :icon="['fas', 'arrow-left']"
-          class="text-text-tertiary h-5 w-5"
-        />
-      </button>
-      <button>
-        <p class="text-text-primary inline-block font-bold whitespace-nowrap">
-          1. Command's Basics
-        </p>
-      </button>
-      <p class="text-text-primary inline-block font-bold">●</p>
-      <button>
-        <p class="text-text-primary inline-block font-bold whitespace-nowrap">
-          1. Try Your First Command
-        </p>
-      </button>
-    </div>
-    <div class="h-full w-full flex gap-3 items-center justify-end">
-      <button id="warning" class="flex items-center">
-        <font-awesome-icon
-          :icon="['fas', 'triangle-exclamation']"
-          class="text-text-primary h-5 w-5"
-        />
-      </button>
-      <button id="setting" class="flex items-center">
-        <font-awesome-icon
-          :icon="['fas', 'gear']"
-          class="text-text-primary h-5 w-5"
-        />
-      </button>
-      <button id="fullscreen" class="flex items-center">
-        <font-awesome-icon
-          :icon="['fas', 'expand']"
-          class="text-text-primary h-5 w-5"
-        />
-      </button>
-      <button @click="handleLogout">
-        <font-awesome-icon
-          :icon="['fas', 'arrow-right-from-bracket']"
-          class="text-text-primary h-5 w-5"
-        />
-      </button>
-    </div>
-  </div>
-</template>

app/src/components/QuestPart.vue

@@ -17,7 +17,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="overflow-auto h-full w-full max-h-full">
+  <div class="h-full w-full max-h-full">
     <h1 id="topic" class="text-red-500" v-if="questErr">
       Failed to get quest infomation
     </h1>