Merge pull request #30 from linux-odyssey/feat-hint

feat: hintpart

app/src/components/HintPart.vue

@@ -1,9 +1,66 @@
-<script setup></script>
+<script setup>
+import { ref, watch } from 'vue'
+import sessionManager from '../utils/session'
+
+const current = ref(-1)
+watch(sessionManager.hints, (hints) => {
+  current.value = hints.length - 1
+})
+
+const left = () => {
+  if (current.value > 0) {
+    current.value -= 1
+  }
+}
+
+const right = () => {
+  if (current.value < sessionManager.hints.value.length - 1) {
+    current.value += 1
+  }
+}
+</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 class="flex flex-wrap">
+    <font-awesome-icon
+      :icon="['far', 'lightbulb']"
+      class="text-yellow-200 p-2"
+    />
+    <h1 class="inline text-text font-xl w-7/12 p-2 m-1">Hint</h1>
+    <div v-if="current !== -1">
+      <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">
+        {{ sessionManager.hints.value.length }}
+      </p>
+      <button
+        class="p-2 m-1 w-1/8"
+        id="Rbutton"
+        @click="right"
+        :disabled="current === sessionManager.hints.value.length - 1"
+      >
+        <font-awesome-icon :icon="['fas', 'arrow-right']" class="text-text" />
+      </button>
+    </div>
+  </div>
+  <div id="hint" class="bg-background flex flex-wrap">
+    <div class="bg-background h-full rounded-lg p-8 m-1">
+      <p class="inline text-text font-xl font-xl">
+        {{ sessionManager.hints.value[current] }}
+      </p>
+      <br />
+    </div>
   </div>
 </template>

app/src/library.js

@@ -12,6 +12,7 @@ import {
   faTerminal,
   faArrowRotateLeft,
   faArrowRightFromBracket,
+  faArrowRight,
 } from '@fortawesome/free-solid-svg-icons'
 
 import {
@@ -33,5 +34,6 @@ library.add(
   faArrowRotateLeft,
   faCircleRight,
   faTerminal,
-  faArrowRightFromBracket
+  faArrowRightFromBracket,
+  faArrowRight
 )

app/src/utils/session.js

@@ -6,6 +6,7 @@ class SessionManager {
   constructor(questId) {
     this.questId = questId
     this.session = ref(null)
+    this.hints = ref([])
     this.graph = ref(
       new FileGraph({
         path: '/',
@@ -24,6 +25,7 @@ class SessionManager {
     console.log('Update session:', session)
     this.session.value = session
     this.graph.value = new FileGraph(session.graph)
+    this.hints.value = session.hints
   }
 
   handleGraphUpdate(event) {
@@ -35,6 +37,11 @@ class SessionManager {
     }
   }
 
+  handleHintUpdate(event) {
+    console.log(event)
+    this.hints.value = [...this.hints.value, ...event]
+  }
+
   setTasks(tasks) {
     this.session.value.tasks = tasks
   }

app/src/views/GamePage.vue

@@ -21,6 +21,9 @@ onMounted(async () => {
   socket.on('graph', (event) => {
     sessionManager.handleGraphUpdate(event)
   })
+  socket.on('hints', (event) => {
+    sessionManager.handleHintUpdate(event)
+  })
   socket.on('tasks', (tasks) => {
     sessionManager.setTasks(tasks)
   })

packages/client/index.js

@@ -91,6 +91,10 @@ async function connect(sessionId, cookie) {
     debug('receive graph:', data)
   })
 
+  socket.on('hints', (data) => {
+    debug('receive hints:', data)
+  })
+
   socket.on('tasks', (data) => {
     debug('receive tasks:', data)
   })