From 5fbdcd5182128188f2937d56814b7b53c691757b Mon Sep 17 00:00:00 2001
From: "Chen, Tai-Lin" <neil.chentl@gmail.com>
Date: Wed, 15 Nov 2023 11:54:11 +0800
Subject: [PATCH] fix: ui revise

---
 app/src/components/CommandlistPart.vue   |  2 --
 app/src/components/ControlPalette.vue    | 22 +++++++++++-----------
 app/src/components/DynamicBackground.vue | 12 ++++++------
 app/src/components/FileNode.vue          | 18 +++++++++---------
 app/src/components/GameHeaderPart.vue    |  2 +-
 app/src/components/QuestPart.vue         |  8 ++++----
 app/src/components/TerminalPart.vue      | 18 ++++++++----------
 app/src/views/ChooseUsernamePage.vue     |  1 +
 app/src/views/GamePage.vue               |  4 ++--
 app/src/views/LoginPage.vue              |  1 +
 app/src/views/RegisterPage.vue           |  1 +
 app/tailwind.config.js                   |  2 +-
 12 files changed, 45 insertions(+), 46 deletions(-)

diff --git a/app/src/components/CommandlistPart.vue b/app/src/components/CommandlistPart.vue
index 6cb8796..2b32a9c 100644
--- a/app/src/components/CommandlistPart.vue
+++ b/app/src/components/CommandlistPart.vue
@@ -1,5 +1,3 @@
-<script setup></script>
-
 <template>
   <font-awesome-icon :icon="['fas', 'list']" class="text-text-primary p-1" />
   <h1 class="inline text-text-primary font-xl">Command Cheatsheets</h1>
diff --git a/app/src/components/ControlPalette.vue b/app/src/components/ControlPalette.vue
index 6d80f56..7c78cde 100644
--- a/app/src/components/ControlPalette.vue
+++ b/app/src/components/ControlPalette.vue
@@ -1,6 +1,15 @@
+<script setup>
+import { createSession } from '../store/session'
+
+const reset = async () => {
+  console.log('resetting...')
+  await createSession()
+}
+</script>
+
 <template>
   <section class="h-[10%] p-3 grid grid-cols-3 gap-4 place-content-between">
-    <button id="solution" class="bg-bg-disabled rounded-lg p-2">
+    <button disabled id="solution" class="bg-bg-disabled rounded-lg p-2">
       <font-awesome-icon
         :icon="['far', 'circle-question']"
         class="text-text-disabled"
@@ -14,7 +23,7 @@
       />
       <p class="text-text-primary inline ml-1">Reset</p>
     </button>
-    <button id="continue" class="bg-bg-disabled rounded-lg p-2">
+    <button disabled id="continue" class="bg-bg-disabled rounded-lg p-2">
       <font-awesome-icon
         :icon="['far', 'circle-right']"
         class="text-text-disabled"
@@ -23,12 +32,3 @@
     </button>
   </section>
 </template>
-
-<script setup>
-import { createSession } from '../store/session'
-
-const reset = async () => {
-  console.log('resetting...')
-  await createSession()
-}
-</script>
diff --git a/app/src/components/DynamicBackground.vue b/app/src/components/DynamicBackground.vue
index ea17276..ef163c9 100644
--- a/app/src/components/DynamicBackground.vue
+++ b/app/src/components/DynamicBackground.vue
@@ -1,9 +1,3 @@
-<template>
-  <div id="box">
-    <canvas ref="canvas"></canvas>
-  </div>
-</template>
-
 <script setup>
 import { ref, onMounted } from 'vue'
 
@@ -79,6 +73,12 @@ onMounted(() => {
 })
 </script>
 
+<template>
+  <div id="box">
+    <canvas ref="canvas"></canvas>
+  </div>
+</template>
+
 <style scoped>
 #box {
   position: relative;
diff --git a/app/src/components/FileNode.vue b/app/src/components/FileNode.vue
index ee4636e..b2bf65b 100644
--- a/app/src/components/FileNode.vue
+++ b/app/src/components/FileNode.vue
@@ -1,12 +1,3 @@
-<template>
-  <a href="#" :class="nodeClass()">{{ node.discovered ? node.name : '???' }}</a>
-  <ul :class="nodeClass()" v-if="node.children && node.children.length > 0">
-    <li :class="nodeClass()" v-for="child in node.children" :key="child.path">
-      <FileNode :node="child" :pwd="pwd" />
-    </li>
-  </ul>
-</template>
-
 <script setup>
 const props = defineProps({
   node: {
@@ -27,3 +18,12 @@ function nodeClass() {
   return classes
 }
 </script>
+
+<template>
+  <a href="#" :class="nodeClass()">{{ node.discovered ? node.name : '???' }}</a>
+  <ul :class="nodeClass()" v-if="node.children && node.children.length > 0">
+    <li :class="nodeClass()" v-for="child in node.children" :key="child.path">
+      <FileNode :node="child" :pwd="pwd" />
+    </li>
+  </ul>
+</template>
diff --git a/app/src/components/GameHeaderPart.vue b/app/src/components/GameHeaderPart.vue
index 989dcc8..e145471 100644
--- a/app/src/components/GameHeaderPart.vue
+++ b/app/src/components/GameHeaderPart.vue
@@ -34,7 +34,7 @@ const handleLogout = async () => {
         <button id="backward" class="flex items-center h-5 w-5">
           <font-awesome-icon
             :icon="['fas', 'arrow-left']"
-            class="text-text-tertiary h-full w-full"
+            class="text-border h-full w-full"
           />
         </button> -->
         <p
diff --git a/app/src/components/QuestPart.vue b/app/src/components/QuestPart.vue
index 10d06f2..448229c 100644
--- a/app/src/components/QuestPart.vue
+++ b/app/src/components/QuestPart.vue
@@ -4,14 +4,14 @@ import sessionStore from '../store/session'
 
 <template>
   <div class="h-full w-full max-h-full">
-    <h1 id="topic" class="text-text" v-if="sessionStore.quest">
+    <p id="topic" class="text-text font-black" v-if="sessionStore.quest">
       {{ sessionStore.quest.title }}
-    </h1>
-    <hr class="border-text-tertiary border-2 my-2" />
+    </p>
+    <br />
     <div>
       <div v-if="sessionStore.quest" class="whitespace-pre-wrap">
         <p class="text-text">{{ sessionStore.quest.instruction }}</p>
-        <br />
+        <hr class="border-border border-2 my-2" />
         <p class="text-text">Tasks:</p>
         <ul v-if="sessionStore.session">
           <li v-for="task in sessionStore.session.tasks" :key="task.id">
diff --git a/app/src/components/TerminalPart.vue b/app/src/components/TerminalPart.vue
index dadedc6..3ff5abd 100644
--- a/app/src/components/TerminalPart.vue
+++ b/app/src/components/TerminalPart.vue
@@ -1,13 +1,3 @@
-<template>
-  <font-awesome-icon :icon="['fas', 'terminal']" class="text-text p-1" />
-  <button class="text-text h-[5%]">Terminal</button>
-  <div
-    id="terminal"
-    ref="terminal"
-    class="bg-bg-secondary h-[calc(100%-5%)] p-0.5"
-  ></div>
-</template>
-
 <script setup>
 import { onMounted, ref } from 'vue'
 import { useTerminal } from '../store/session'
@@ -20,3 +10,11 @@ onMounted(() => {
   window.addEventListener('resize', () => term.resizeScreen())
 })
 </script>
+
+<template>
+  <div class="h-[10%] w-full max-h-full">
+    <font-awesome-icon :icon="['fas', 'terminal']" class="text-text p-1" />
+    <button class="text-text h-full">Terminal</button>
+  </div>
+  <div id="terminal" ref="terminal" class="h-[90%] p-2"></div>
+</template>
diff --git a/app/src/views/ChooseUsernamePage.vue b/app/src/views/ChooseUsernamePage.vue
index 92e21dd..4fb0a9e 100644
--- a/app/src/views/ChooseUsernamePage.vue
+++ b/app/src/views/ChooseUsernamePage.vue
@@ -44,6 +44,7 @@ async function handleSubmit({ username, success, error }) {
   }
 }
 </script>
+
 <template>
   <div class="w-screen h-screen">
     <Background class="w-full h-full" />
diff --git a/app/src/views/GamePage.vue b/app/src/views/GamePage.vue
index 5e49e12..962d0a5 100644
--- a/app/src/views/GamePage.vue
+++ b/app/src/views/GamePage.vue
@@ -63,7 +63,7 @@ onMounted(async () => {
       <section id="quest" class="h-2/3 p-3">
         <QuestPart />
       </section>
-      <hr class="border-text-tertiary border" />
+      <hr class="border-border border" />
       <section id="cmdlist" class="h-1/3">
         <CommandlistPart />
       </section>
@@ -73,6 +73,7 @@ onMounted(async () => {
       <section id="terminal" class="h-3/5">
         <TerminalPart />
       </section>
+      <hr class="border-border border" />
       <section id="hint" class="h-2/5">
         <HintPart />
       </section>
@@ -91,4 +92,3 @@ onMounted(async () => {
     <CompleteModal v-if="completed" />
   </div>
 </template>
-<script></script>
diff --git a/app/src/views/LoginPage.vue b/app/src/views/LoginPage.vue
index bd9faa4..dcb547b 100644
--- a/app/src/views/LoginPage.vue
+++ b/app/src/views/LoginPage.vue
@@ -31,6 +31,7 @@ const handleLogin = async ({ username, password, success, error }) => {
   }
 }
 </script>
+
 <template>
   <div class="w-screen h-screen">
     <Background class="w-full h-full" />
diff --git a/app/src/views/RegisterPage.vue b/app/src/views/RegisterPage.vue
index f7e6c54..a66fcc0 100644
--- a/app/src/views/RegisterPage.vue
+++ b/app/src/views/RegisterPage.vue
@@ -64,6 +64,7 @@ async function check({ username, email, password, error }) {
   }
 }
 </script>
+
 <template>
   <div class="w-screen h-screen">
     <Background class="w-full h-full" />
diff --git a/app/tailwind.config.js b/app/tailwind.config.js
index 7d7e14b..86b5160 100644
--- a/app/tailwind.config.js
+++ b/app/tailwind.config.js
@@ -18,7 +18,7 @@ export default {
           DEFAULT: '#FFFFFF',
         },
         border: {
-          DEFAULT: '#526B4E',
+          DEFAULT: '#4A4B63',
         },
         error: {
           DEFAULT: '#FF0000',