fix: ui revise

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>

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>

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;

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>

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

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

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>

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" />

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>

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" />

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" />

app/tailwind.config.js

@@ -18,7 +18,7 @@ export default {
           DEFAULT: '#FFFFFF',
         },
         border: {
-          DEFAULT: '#526B4E',
+          DEFAULT: '#4A4B63',
         },
         error: {
           DEFAULT: '#FF0000',