update: hint reassign, UI

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">
+    <div v-if="current !== -1">
-      <font-awesome-icon
+      <button
-        :icon="['fas', 'arrow-right']"
+        class="p-2 m-1 w-1/8"
-        style="color: #deddda"
+        id="Lbutton"
-        rotation="180"
+        @click="left"
-      />
+        :disabled="current <= 0"
-    </button>
+      >
-    <p class="inline text-text font-xl w-1/14 p-2 m-1">{{ current }}</p>
+        <font-awesome-icon
-    <p class="inline text-text font-xl w-1/14 p-2 m-1">/</p>
+          :icon="['fas', 'arrow-right']"
-    <p class="inline text-text font-xl w-1/14 p-2 m-1">
+          style="color: #deddda"
-      {{ sessionManager.hints.value.length }}
+          rotation="180"
-    </p>
+        />
-    <button class="p-2 m-1 w-1/7" id="Rbutton" @click="right">
+      </button>
-      <font-awesome-icon
+      <p class="inline text-text font-xl w-1/14 p-2 m-1">{{ current + 1 }}</p>
-        :icon="['fas', 'arrow-right']"
+      <p class="inline text-text font-xl w-1/14 p-2 m-1">/</p>
-        style="color: #deddda"
+      <p class="inline text-text font-xl w-1/14 p-2 m-1">
-      />
+        {{ sessionManager.hints.value.length }}
-    </button>
+      </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>

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/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 './library'
-/* 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 App from './App.vue'
-import GamePage from './views/GamePage.vue'
+import router from './router'
-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,
-})
 
 const app = createApp(App)
 

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) {