From 2fc9784477f153a9b88bd2314653c419089940c5 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Thu, 28 Sep 2023 14:42:17 +0800
Subject: [PATCH] update: hint reassign, UI

---
 app/src/components/HintPart.vue | 63 +++++++++++++++++++++------------
 app/src/library.js              |  4 ++-
 app/src/main.js                 | 54 ++--------------------------
 app/src/utils/session.js        |  2 +-
 4 files changed, 46 insertions(+), 77 deletions(-)

diff --git a/app/src/components/HintPart.vue b/app/src/components/HintPart.vue
index 4548a42..e156382 100644
--- a/app/src/components/HintPart.vue
+++ b/app/src/components/HintPart.vue
@@ -1,15 +1,20 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import sessionManager from '../utils/session'
 
-const current = ref(1)
+const current = ref(-1)
+watch(sessionManager.hints, (hints) => {
+  current.value = hints.length - 1
+})
+
 const left = () => {
-  if (current.value > 1) {
+  if (current.value > 0) {
     current.value -= 1
   }
 }
+
 const right = () => {
-  if (current.value < sessionManager.hints.value.length) {
+  if (current.value < sessionManager.hints.value.length - 1) {
     current.value += 1
   }
 }
@@ -22,29 +27,41 @@ const right = () => {
       class="text-yellow-200 p-2"
     />
     <h1 class="inline text-text font-xl w-7/12 p-2 m-1">Hint</h1>
-    <button class="p-2 m-1 w-1/7" id="Lbutton" @click="left">
-      <font-awesome-icon
-        :icon="['fas', 'arrow-right']"
-        style="color: #deddda"
-        rotation="180"
-      />
-    </button>
-    <p class="inline text-text font-xl w-1/14 p-2 m-1">{{ current }}</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/7" id="Rbutton" @click="right">
-      <font-awesome-icon
-        :icon="['fas', 'arrow-right']"
-        style="color: #deddda"
-      />
-    </button>
+    <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']"
+          style="color: #deddda"
+          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']"
+          style="color: #deddda"
+        />
+      </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 - 1] }}
+        {{ sessionManager.hints.value[current] }}
       </p>
       <br />
     </div>
diff --git a/app/src/library.js b/app/src/library.js
index f637869..0ae4b82 100644
--- a/app/src/library.js
+++ b/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
 )
diff --git a/app/src/main.js b/app/src/main.js
index 207f7e9..d5067e7 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -1,61 +1,11 @@
 import { createApp } from 'vue'
-import { createRouter, createWebHistory } from 'vue-router'
 import './style.css'
-
-/* import the fontawesome core */
-import { library } from '@fortawesome/fontawesome-svg-core'
-
 /* import font awesome icon component */
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-
-/* import specific icons */
-import {
-  faBars,
-  faArrowLeft,
-  faList,
-  faGear,
-  faTriangleExclamation,
-  faExpand,
-  faTerminal,
-  faArrowRotateLeft,
-  faArrowRight,
-} from '@fortawesome/free-solid-svg-icons'
-
-import {
-  faLightbulb,
-  faCircleQuestion,
-  faCircleRight,
-} from '@fortawesome/free-regular-svg-icons'
+import './library'
 
 import App from './App.vue'
-import GamePage from './views/GamePage.vue'
-import AuthPage from './views/AuthPage.vue'
-
-/* add icons to the library */
-library.add(
-  faBars,
-  faArrowLeft,
-  faTriangleExclamation,
-  faGear,
-  faExpand,
-  faList,
-  faLightbulb,
-  faCircleQuestion,
-  faArrowRotateLeft,
-  faCircleRight,
-  faTerminal,
-  faArrowRight
-)
-
-const routes = [
-  { path: '/', name: 'Home', component: AuthPage },
-  { path: '/game', name: 'Game', component: GamePage },
-]
-
-const router = createRouter({
-  history: createWebHistory(),
-  routes,
-})
+import router from './router'
 
 const app = createApp(App)
 
diff --git a/app/src/utils/session.js b/app/src/utils/session.js
index 3f12a77..ada7725 100644
--- a/app/src/utils/session.js
+++ b/app/src/utils/session.js
@@ -39,7 +39,7 @@ class SessionManager {
 
   handleHintUpdate(event) {
     console.log(event)
-    this.hints.value.push(...event)
+    this.hints.value = [...this.hints.value, ...event]
   }
 
   setTasks(tasks) {