From 00fcf353ba5edcb943a8c819dee33e4779c2791a Mon Sep 17 00:00:00 2001
From: "Chen, Tai-Lin" <neil.chentl@gmail.com>
Date: Thu, 26 Oct 2023 14:46:32 +0800
Subject: [PATCH] fix: improve game page UI

---
 app/src/App.vue                       |  8 ---
 app/src/components/AuthForm.vue       | 11 +++-
 app/src/components/GameHeaderPart.vue | 83 +++++++++++++++++++++++++++
 app/src/components/HeaderPart.vue     | 67 ---------------------
 app/src/components/QuestPart.vue      |  2 +-
 app/src/views/GamePage.vue            | 32 +++++++----
 6 files changed, 112 insertions(+), 91 deletions(-)
 create mode 100644 app/src/components/GameHeaderPart.vue
 delete mode 100644 app/src/components/HeaderPart.vue

diff --git a/app/src/App.vue b/app/src/App.vue
index 646bdb8..89043b0 100644
--- a/app/src/App.vue
+++ b/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>
diff --git a/app/src/components/AuthForm.vue b/app/src/components/AuthForm.vue
index d8b37f8..d8c2088 100644
--- a/app/src/components/AuthForm.vue
+++ b/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
diff --git a/app/src/components/GameHeaderPart.vue b/app/src/components/GameHeaderPart.vue
new file mode 100644
index 0000000..b70489f
--- /dev/null
+++ b/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>
diff --git a/app/src/components/HeaderPart.vue b/app/src/components/HeaderPart.vue
deleted file mode 100644
index 900767f..0000000
--- a/app/src/components/HeaderPart.vue
+++ /dev/null
@@ -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>
diff --git a/app/src/components/QuestPart.vue b/app/src/components/QuestPart.vue
index 8e6a46f..257c897 100644
--- a/app/src/components/QuestPart.vue
+++ b/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>
diff --git a/app/src/views/GamePage.vue b/app/src/views/GamePage.vue
index 848614c..c92f8f7 100644
--- a/app/src/views/GamePage.vue
+++ b/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>
-  <!--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">
+  <!-- game header -->
+  <div class="h-[5vh] w-full">
+    <GameHeaderPart />
+  </div>
+  <!-- main -->
+  <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 w-1/3 rounded-lg">
+      <section id="quest" class="h-2/3 p-3">
         <QuestPart />
       </section>
       <hr class="border-text-tertiary border" />
@@ -55,8 +60,8 @@ onMounted(async () => {
         <CommandlistPart />
       </section>
     </div>
-    <!--Terminal and Hint-->
-    <div class="bg-background h-full rounded-lg">
+    <!-- Terminal and Hint -->
+    <div class="bg-background h-full w-1/3 rounded-lg">
       <section id="terminal" class="h-3/5">
         <TerminalPart />
       </section>
@@ -64,11 +69,14 @@ onMounted(async () => {
         <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">
+    <!-- Visualization -->
+    <div class="h-full w-1/3">
+      <div class="bg-border rounded-xl h-[90%] p-2">
+        <div class="bg-background rounded-lg h-full p-2">
+          <section
+            id="visualization"
+            class="bg-background-primary h-full rounded-md"
+          >
             <VisualizationPart />
           </section>
         </div>