Merge pull request #46 from linux-odyssey/ui-revise

UI revise

app/src/App.vue

@@ -1,15 +1,13 @@
 <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>
+<style>
-import HeaderPart from './components/HeaderPart.vue'
+::-webkit-scrollbar {
-</script>
+  display: none;
+}
+</style>

app/src/components/AuthForm.vue

@@ -84,108 +84,108 @@ 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"
   >
-    <h1 class="text-text-primary text-3xl font-black mb-8">{{ title }}</h1>
+    <h1 class="text-text-primary text-3xl font-black mb-2">{{ title }}</h1>
     <form @submit.prevent="handleSubmit()" class="w-full">
+      <div v-if="socialLogin && hasSocialLogins">
+        <a
+          v-if="availableMethods.google"
+          class="inline-flex justify-center items-center rounded-lg py-2 mt-3 bg-background-primary text-text-secondary w-full border-text-secondary border-2"
+          href="/api/v1/auth/google"
+        >
+          <font-awesome-icon
+            :icon="['fab', 'google']"
+            class="text-text-secondary px-3 text-lg"
+          />
+          <span class="font-medium">Continue with Google</span>
+        </a>
+        <a
+          v-if="availableMethods.github"
+          class="inline-flex justify-center items-center rounded-lg py-2 mt-3 bg-background-primary text-text-secondary w-full border-text-secondary border-2"
+          href="/api/v1/auth/github"
+        >
+          <font-awesome-icon
+            :icon="['fab', 'github']"
+            class="text-text-secondary px-3 text-lg"
+          />
+          <span class="font-medium">Continue with GitHub</span>
+        </a>
+      </div>
+      <p
+        class="text-text-secondary flex justify-center mt-3"
+        v-if="type === 'login' || type === 'register'"
+      >
+        or
+      </p>
       <div class="mb-6">
-        <label for="username" class="text-sm font-semibold text-text">{{
+        <input
-          type === 'login' ? 'Email / Username' : 'Username'
-        }}</label
-        ><input
           type="text"
           id="username"
           ref="usernameInput"
           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="
+          :placeholder="type === 'login' ? 'Email / Username' : 'Username'"
-            type === 'login'
-              ? 'Enter your email or username'
-              : 'Enter your username'
-          "
           v-model="username"
           @input="handleChange()"
           autocomplete="username"
         />
         <label
-          class="text-sm font-semibold text-text-secondary"
+          class="text-sm font-normal text-text-secondary"
           v-if="type === 'username' || type === 'register'"
-          >Username should start with lowercase and consist of lowercase,
+        >
-          numbers, '_' and '-'
+          <p>Username must begin with lowercase letter</p>
+          <p>Username can consist of lowercase, numbers, "_", and "-"</p>
         </label>
       </div>
       <div class="mb-6" v-if="type === 'register'">
-        <label for="email" class="text-sm font-semibold text-text">Email</label
+        <input
-        ><input
           type="email"
           id="email"
           ref="emailInput"
           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"
+          placeholder="Email"
           v-model="email"
           @input="handleChange()"
           autocomplete="email"
         />
       </div>
       <div class="mb-6" v-if="type === 'login' || type === 'register'">
-        <label for="password" class="text-sm font-semibold leading-6 text-text"
+        <input
-          >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"
+          placeholder="Password"
           v-model="password"
           @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
-        class="inline-flex justify-center rounded-lg text-sm font-black py-2 mt-3 bg-text-primary text-background w-full"
+        class="inline-flex justify-center rounded-lg font-black py-2 bg-text-primary text-background w-full"
         type="submit"
       >
-        <span v-if="type === 'login'">Log in</span>
+        <span v-if="type === 'login'">Log In</span>
-        <span v-else>Register</span>
+        <span v-else>Sign Up</span>
       </button>
 
       <p class="text-text flex justify-center mt-3">
         <span v-if="type === 'register'"
           >Already have an account?
-          <RouterLink class="text-text-primary" to="/login"
+          <RouterLink class="text-text-primary font-bold" to="/login">
-            >Log in</RouterLink
+            <u>Log in</u>
-          ></span
+          </RouterLink></span
         >
         <span v-else-if="type === 'login'"
           >Don't have an account?
-          <RouterLink class="text-text-primary" to="/register"
+          <RouterLink class="text-text-primary font-bold" to="/register">
-            >Register</RouterLink
+            <u>Sign up</u>
-          ></span
+          </RouterLink></span
         >
       </p>
-
-      <div v-if="socialLogin && hasSocialLogins">
-        <hr class="my-8" />
-        <p class="flex justify-center font-semibold text-text text-base">
-          Log in with social account
-        </p>
-        <a
-          v-if="availableMethods.google"
-          class="inline-flex justify-center rounded-lg text-sm font-black py-2 mt-3 bg-icon-google text-text w-full"
-          href="/api/v1/auth/google"
-        >
-          <span>Google</span>
-        </a>
-        <a
-          v-if="availableMethods.github"
-          class="inline-flex justify-center rounded-lg text-sm font-black py-2 mt-3 bg-icon-github text-text w-full"
-          href="/api/v1/auth/github"
-        >
-          <span>GitHub</span>
-        </a>
-      </div>
     </form>
   </div>
 </template>

app/src/components/CompleteModal.vue

@@ -36,7 +36,7 @@ setTimeout(() => {
   </div>
 </template>
 
-<style>
+<style scoped>
 .modal {
   display: block;
   position: fixed;

app/src/components/ControlPalette.vue

@@ -1,11 +1,11 @@
 <template>
   <section class="h-[10%] p-3 grid grid-cols-3 gap-4 place-content-between">
-    <button id="solution" class="bg-background-secondary rounded-lg p-2">
+    <button id="solution" class="bg-disabled-background rounded-lg p-2">
       <font-awesome-icon
         :icon="['far', 'circle-question']"
-        class="text-text-primary"
+        class="text-disabled-text"
       />
-      <p class="text-text-primary inline">Solution</p>
+      <p class="text-disabled-text inline">Solution</p>
     </button>
     <button
       id="reset"

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/components/TreeChart.vue

@@ -45,14 +45,14 @@ import sessionManager from '../utils/session.js'
   position: absolute;
   top: 0;
   right: 50%;
-  border-top: 1px solid #ccc;
+  border-top: 1px solid #00ff00;
   width: 50%;
   height: 20px;
 }
 .tree li::after {
   right: auto;
   left: 50%;
-  border-left: 1px solid #ccc;
+  border-left: 1px solid #00ff00;
 }
 
 .tree li:only-child::after,
@@ -70,7 +70,7 @@ import sessionManager from '../utils/session.js'
 }
 
 .tree li:last-child::before {
-  border-right: 1px solid #ccc;
+  border-right: 1px solid #00ff00;
   border-radius: 0 5px 0 0;
   -webkit-border-radius: 0 5px 0 0;
   -moz-border-radius: 0 5px 0 0;
@@ -86,16 +86,16 @@ import sessionManager from '../utils/session.js'
   position: absolute;
   top: 0;
   left: 50%;
-  border-left: 1px solid #ccc;
+  border-left: 1px solid #00ff00;
   width: 0;
   height: 20px;
 }
 
 .tree li a {
-  border: 1px solid #ccc;
+  border: 1px solid #00ff00;
   padding: 5px 10px;
   text-decoration: none;
-  color: #666;
+  color: #ffffff;
   font-family: arial, verdana, tahoma;
   font-size: 11px;
   display: inline-block;
@@ -110,7 +110,7 @@ import sessionManager from '../utils/session.js'
 }
 
 a.discovered {
-  background: #c8e4f8;
+  background: #526b4e;
   color: #000;
   border: 1px solid #94a0b4;
 }
@@ -121,6 +121,6 @@ li.discovered {
 }
 
 a.pwd {
-  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* 水平偏移、垂直偏移、模糊半徑、顏色 */
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
 }
 </style>

app/src/components/VisualizationPart.vue

@@ -55,9 +55,3 @@ onUnmounted(() => {
     <TreeChart />
   </div>
 </template>
-
-<style>
-::-webkit-scrollbar {
-  display: none;
-}
-</style>

app/src/library.js

@@ -14,12 +14,12 @@ import {
   faArrowRightFromBracket,
   faArrowRight,
 } from '@fortawesome/free-solid-svg-icons'
-
 import {
   faLightbulb,
   faCircleQuestion,
   faCircleRight,
 } from '@fortawesome/free-regular-svg-icons'
+import { faGithub, faGoogle } from '@fortawesome/free-brands-svg-icons'
 
 /* add icons to the library */
 library.add(
@@ -35,5 +35,7 @@ library.add(
   faCircleRight,
   faTerminal,
   faArrowRightFromBracket,
-  faArrowRight
+  faArrowRight,
+  faGithub,
+  faGoogle
 )

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-->
+  <!-- game header -->
-  <div id="main" class="h-[94vh] grid grid-cols-3 gap-3 p-3">
+  <div class="h-[5vh] w-full">
-    <!--Topic and Command List-->
+    <GameHeaderPart />
-    <div class="bg-background-secondary h-full rounded-lg">
+  </div>
-      <section id="quest" class="h-2/3 m-3">
+  <!-- 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-->
+    <!-- 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>
@@ -64,11 +69,14 @@ onMounted(async () => {
         <HintPart />
       </section>
     </div>
-    <!--Visualization-->
+    <!-- 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>

app/src/views/LoginPage.vue

@@ -20,7 +20,7 @@ const handleLogin = async ({ username, password, success, error }) => {
     <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">
+      <div class="w-1/3">
         <AuthForm @onSubmit="handleLogin" type="login" />
       </div>
     </div>

app/src/views/RegisterPage.vue

@@ -63,7 +63,7 @@ async function check({ username, email, error }) {
     <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">
+      <div class="w-1/3">
         <AuthForm
           @onSubmit="handleRegister"
           @onChange="check"

app/tailwind.config.js

@@ -22,10 +22,6 @@ export default {
         border: {
           DEFAULT: '#526B4E',
         },
-        icon: {
-          google: '#DB4437',
-          github: '#171515',
-        },
       },
     },
   },