Merge remote-tracking branch 'origin/main' into feat-landing-page

app/src/components/HintPart.vue

@@ -26,53 +26,65 @@ const right = () => {
 </script>
 
 <template>
-  <div class="w-full flex items-center p-2">
-    <font-awesome-icon
-      :icon="['far', 'lightbulb']"
-      class="text-yellow-200 p-2 content-center"
-    />
-    <h1 class="inline text-text w-1/2 font-xl p-2 m-1">
-      <!-- Hint -->
-      提示
-    </h1>
-    <div v-if="current !== -1" class="flex w-full justify-end items-end">
-      <button
-        class="p-2 m-1 w-1/8"
-        id="Lbutton"
-        @click="left"
-        :disabled="current <= 0"
-      >
-        <font-awesome-icon
-          :icon="['fas', 'arrow-right']"
-          class="text-text"
-          rotation="180"
-        />
-      </button>
-      <p class="inline text-text font-xl w-1/14 p-2 m-1">{{ current + 1 }}</p>
-      <p class="inline text-text font-xl w-1/14 p-2 m-1">/</p>
-      <p class="inline text-text font-xl w-1/14 p-2 m-1">
-        {{ sessionStore.session.hints.length }}
-      </p>
-      <button
-        class="p-2 m-1 w-1/8"
-        id="Rbutton"
-        @click="right"
-        :disabled="current === sessionStore.session.hints.length - 1"
-      >
-        <font-awesome-icon :icon="['fas', 'arrow-right']" class="text-text" />
-      </button>
+  <div class="h-full flex flex-col">
+    <!-- Hint Header -->
+    <div class="flex items-center p-2 h-10">
+      <font-awesome-icon
+        :icon="['far', 'lightbulb']"
+        class="text-yellow-200 p-2 content-center"
+      />
+      <h1 class="inline text-text w-1/2 font-xl p-2 m-1">
+        <!-- Hint -->
+        提示
+      </h1>
+      <div v-if="current !== -1" class="flex w-full justify-end items-end">
+        <button
+          class="p-2 m-1 w-1/8"
+          id="Lbutton"
+          @click="left"
+          :disabled="current <= 0"
+        >
+          <font-awesome-icon
+            :icon="['fas', 'arrow-right']"
+            class="text-text"
+            rotation="180"
+          />
+        </button>
+        <p class="inline text-text font-xl w-1/14 p-2 m-1">{{ current + 1 }}</p>
+        <p class="inline text-text font-xl w-1/14 p-2 m-1">/</p>
+        <p class="inline text-text font-xl w-1/14 p-2 m-1">
+          {{ sessionStore.session.hints.length }}
+        </p>
+        <button
+          class="p-2 m-1 w-1/8"
+          id="Rbutton"
+          @click="right"
+          :disabled="current === sessionStore.session.hints.length - 1"
+        >
+          <font-awesome-icon :icon="['fas', 'arrow-right']" class="text-text" />
+        </button>
+      </div>
+    </div>
+    <div id="hint" class="bg-bg p-8 overflow-y-auto">
+      <ul>
+        <li
+          v-for="response in sessionStore.session.responses[current]"
+          :key="response"
+          class="text-text font-xl whitespace-pre-wrap"
+        >
+          <div v-for="content in response.content" :key="content">
+            <MarkdownText :content="content" />
+          </div>
+        </li>
+        <li
+          v-for="hint in sessionStore.session.hints[current]"
+          :key="hint"
+          class="text-text-primary font-xl whitespace-pre-wrap"
+        >
+          <MarkdownText :content="hint" />
+        </li>
+      </ul>
+      <br />
     </div>
   </div>
-  <div id="hint" class="bg-bg flex flex-wrap p-8">
-    <ul>
-      <li
-        v-for="hint in sessionStore.session.hints[current]"
-        :key="hint"
-        class="text-text font-xl whitespace-pre-wrap"
-      >
-        <MarkdownText :content="hint" />
-      </li>
-    </ul>
-    <br />
-  </div>
 </template>

app/src/store/session.js

@@ -20,6 +20,7 @@ function newSession() {
     pwd: '',
     hints: [],
     tasks: [],
+    responses: [],
   }
 }
 
@@ -41,6 +42,7 @@ function setQuest(questId) {
 
 async function setSession(session) {
   try {
+    console.log('Setting session...', session)
     store.session = session
     store.session.graph = new FileGraph(session.graph)
     term.reset()
@@ -85,16 +87,12 @@ function updateGraph(event) {
   }
 }
 
-function updateHints(hints) {
-  store.session.hints.push(hints)
-}
-
-function updateStatus(status) {
-  store.session.status = status
-}
-
-function setTasks(tasks) {
-  store.session.tasks = tasks
+function newResponse(response) {
+  console.log('newResponse', response, 'session', store.session)
+  store.session.responses.push(response.responses)
+  store.session.hints.push(response.hints)
+  store.session.tasks = response.tasks
+  store.session.status = response.status
 }
 
 export function useTerminal() {
@@ -135,14 +133,8 @@ function setup() {
   socket.on('graph', (event) => {
     updateGraph(event)
   })
-  socket.on('hints', (event) => {
-    updateHints(event)
-  })
-  socket.on('tasks', (tasks) => {
-    setTasks(tasks)
-  })
-  socket.on('status', (event) => {
-    updateStatus(event)
+  socket.on('response', (response) => {
+    newResponse(response)
   })
 }
 

app/src/views/GamePage.vue

@@ -61,7 +61,7 @@ onMounted(async () => {
   <!-- main -->
   <div id="main" class="h-[94vh] w-full flex p-3 space-x-3">
     <!-- Topic and Command List -->
-    <div class="bg-bg-secondary h-full w-1/3 rounded-lg">
+    <div class="bg-bg-secondary h-full w-1/4 rounded-lg">
       <section id="quest" class="h-full p-3 overflow-auto">
         <QuestPart />
       </section>
@@ -71,17 +71,17 @@ onMounted(async () => {
       </section> -->
     </div>
     <!-- Terminal and Hint -->
-    <div class="bg-bg h-full w-1/3 rounded-lg">
-      <section id="terminal" class="h-3/5 overflow-hidden">
-        <TerminalPart />
+    <div class="bg-bg h-full w-1/2 rounded-lg">
+      <section id="hint" class="h-3/5">
+        <HintPart />
       </section>
       <hr class="border-border border" />
-      <section id="hint" class="h-2/5">
-        <HintPart />
+      <section id="terminal" class="h-2/5 overflow-hidden">
+        <TerminalPart />
       </section>
     </div>
     <!-- Visualization -->
-    <div class="h-full w-1/3">
+    <div class="h-full w-1/4">
       <div class="bg-border rounded-xl h-[90%] p-2">
         <div class="bg-bg rounded-lg h-full p-2">
           <section id="visualization" class="bg-bg-primary h-full rounded-md">