fix: improve game page UI

app/src/App.vue

@@ -1,15 +1,7 @@
 <template>
   <div class="bg-background-primary h-screen">
-    <!--header-->
-    <!-- <div id="header" class="bg-background-secondary content-center h-[6vh] p-1">
-      <HeaderPart />
-    </div> -->
     <!-- route outlet -->
     <!-- component matched by the route will render here -->
     <router-view></router-view>
   </div>
 </template>
-
-<script setup>
-import HeaderPart from './components/HeaderPart.vue'
-</script>

app/src/components/AuthForm.vue

@@ -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>

app/src/views/GamePage.vue

@@ -2,6 +2,7 @@
 import { onMounted, ref } from 'vue'
 import socket from '../utils/socket'
 import sessionManager from '../utils/session'
+import GameHeaderPart from '../components/GameHeaderPart.vue'
 import CommandlistPart from '../components/CommandlistPart.vue'
 import HintPart from '../components/HintPart.vue'
 import QuestPart from '../components/QuestPart.vue'
@@ -43,11 +44,15 @@ onMounted(async () => {
 </script>
 
 <template>
+  <!-- game header -->
+  <div class="h-[5vh] w-full">
+    <GameHeaderPart />
+  </div>
   <!-- main -->
-  <div id="main" class="h-[94vh] grid grid-cols-3 gap-3 p-3">
+  <div id="main" class="h-[95vh] w-full flex p-3 space-x-3">
     <!-- Topic and Command List -->
-    <div class="bg-background-secondary h-full rounded-lg">
+    <div class="bg-background-secondary h-full w-1/3 rounded-lg">
-      <section id="quest" class="h-2/3 m-3">
+      <section id="quest" class="h-2/3 p-3">
         <QuestPart />
       </section>
       <hr class="border-text-tertiary border" />
@@ -56,7 +61,7 @@ onMounted(async () => {
       </section>
     </div>
     <!-- Terminal and Hint -->
-    <div class="bg-background h-full rounded-lg">
+    <div class="bg-background h-full w-1/3 rounded-lg">
       <section id="terminal" class="h-3/5">
         <TerminalPart />
       </section>
@@ -65,10 +70,13 @@ onMounted(async () => {
       </section>
     </div>
     <!-- Visualization -->
-    <div class="h-full">
+    <div class="h-full w-1/3">
-      <div class="bg-border rounded-xl h-[90%] px-3 py-6">
+      <div class="bg-border rounded-xl h-[90%] p-2">
-        <div class="bg-background rounded-xl h-full px-1 py-6">
+        <div class="bg-background rounded-lg h-full p-2">
-          <section id="visualization" class="bg-background-primary h-full">
+          <section
+            id="visualization"
+            class="bg-background-primary h-full rounded-md"
+          >
             <VisualizationPart />
           </section>
         </div>