Reorganize front-end code

app/src/components/commandlist-part.vue

@@ -0,0 +1,9 @@
+<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>
+  <div id="cheatsheets">
+    <p class="text-text-secondary">--Command List--</p>
+  </div>
+</template>

app/src/components/header-part.vue

@@ -0,0 +1,38 @@
+<script setup></script>
+
+<template>
+  <div class="inline-block">
+    <button id="stream" class="p-1">
+      <font-awesome-icon
+        :icon="['fas', 'bars-staggered']"
+        class="text-text-primary"
+      />
+    </button>
+    <button id="backward" class="p-1">
+      <font-awesome-icon :icon="['fas', 'arrow-left']" class="text-border" />
+    </button>
+    <button>
+      <p class="text-text-primary inline font-bold p-1">1. Command's Basics</p>
+    </button>
+    <p class="text-text-primary inline font-bold p-1">‧</p>
+    <button>
+      <p class="text-text-primary inline font-bold p-1">
+        1. Try Your First Command
+      </p>
+    </button>
+  </div>
+  <div class="float-right inline-block">
+    <button id="warning" class="p-1">
+      <font-awesome-icon
+        :icon="['fas', 'triangle-exclamation']"
+        class="text-text-primary"
+      />
+    </button>
+    <button id="setting" class="p-1">
+      <font-awesome-icon :icon="['fas', 'gear']" class="text-text-primary" />
+    </button>
+    <button id="fullscreen" class="p-1">
+      <font-awesome-icon :icon="['fas', 'expand']" class="text-text-primary" />
+    </button>
+  </div>
+</template>

app/src/components/hint-part.vue

@@ -0,0 +1,9 @@
+<script setup></script>
+
+<template>
+  <font-awesome-icon :icon="['far', 'lightbulb']" class="text-yellow-200 p-1" />
+  <h1 class="inline text-text font-xl">Hint</h1>
+  <div id="hint">
+    <p class="text-text">--Hint--</p>
+  </div>
+</template>

app/src/components/quest-part.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { ref } from 'vue'
+
+const questData = ref(null)
+const questErr = ref(null)
+
+fetch('https://odyssey.wancat.cc/api/v1/quests/helloworld')
+  .then((res) => res.json())
+  .then((json) => {
+    questData.value = JSON.stringify(json.content)
+  })
+  .catch((err) => {
+    questErr.value = err
+  })
+</script>
+
+<template>
+  <h1 id="topic" class="text-text">Try Your First Command</h1>
+  <hr class="border-text-line border-2 my-2" />
+  <div>
+    <p class="text-red-500" v-if="questErr">{{ questErr.message }}</p>
+    <p class="text-text" v-else-if="questData">--Quest Information--</p>
+    <!--
+    <p class="text-text" v-else-if="quest" v-html="questData"></p>
+    -->
+    <p class="text-text" v-else>Loading...</p>
+  </div>
+</template>

app/src/components/terminal-part.vue

@@ -0,0 +1,11 @@
+<script setup></script>
+
+<template>
+  <font-awesome-icon :icon="['fas', 'terminal']" class="text-text p-1" />
+  <button class="text-text h-[5%]">Terminal</button>
+  <div class="bg-background-secondary h-[calc(100%-5%)] p-4">
+    <p class="text-text-primary">
+      zeko@first-command<span class="text-text">:~$</span>
+    </p>
+  </div>
+</template>

app/src/components/visualization-part.vue

@@ -0,0 +1,5 @@
+<script setup></script>
+
+<template>
+  <p class="text-text">--Visualization--</p>
+</template>