Add survey and leaderboard button (#78)

Add survey and leaderboard button

app/src/components/ControlPalette.vue

@@ -1,5 +1,17 @@
 <template>
-  <section class="h-[10%] p-3 grid grid-cols-3 gap-4 place-content-between">
+  <section class="h-[10%] p-3 grid grid-cols-4 gap-4 place-content-between">
+    <button id="survey" class="bg-bg-secondary rounded-lg p-2">
+      <a title="Survey" :href="surveyUrl" target="_blank" class="h-5 w-5">
+        <font-awesome-icon
+          :icon="['fas', 'file-invoice']"
+          class="text-text-primary"
+        />
+        <p class="text-text-primary inline ml-1">
+          <!-- Survey -->
+          問卷
+        </p>
+      </a>
+    </button>
     <button disabled id="solution" class="bg-bg-disabled rounded-lg p-2">
       <font-awesome-icon
         :icon="['far', 'circle-question']"
@@ -41,6 +53,7 @@
 import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
 import { createSession } from '../store/session'
+import { surveyUrl } from '../config'
 
 const router = useRouter()
 const reset = async () => {

app/src/components/GameHeaderPart.vue

@@ -3,7 +3,7 @@ import { defineProps, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
 import { logout } from '../utils/auth'
-import { bugReportUrl } from '../config'
+import { bugReportUrl, surveyUrl } from '../config'
 import { reset } from '../store/session'
 import userProfileStore, {
   loadUserProfile,
@@ -35,6 +35,15 @@ const handleMap = async () => {
     console.error(err)
   }
 }
+const handleLeaderBoard = async () => {
+  try {
+    router.push({ name: 'leaderboard' })
+  } catch (err) {
+    // toast.error('Failed to load map')
+    toast.error('無法讀取排行榜')
+    console.error(err)
+  }
+}
 
 defineProps({
   title: {
@@ -110,6 +119,18 @@ onMounted(async () => {
         >
           {{ userProfileStore.username }}
         </p>
+        <a title="Survey" :href="surveyUrl" target="_blank" class="h-5 w-5">
+          <font-awesome-icon
+            :icon="['fas', 'file-invoice']"
+            class="text-text-primary h-full w-full"
+          />
+        </a>
+        <button title="LeaderBoard" @click="handleLeaderBoard" class="h-5 w-5">
+          <font-awesome-icon
+            :icon="['fas', 'trophy']"
+            class="text-text-primary h-full w-full"
+          />
+        </button>
         <button title="Map" @click="handleMap" class="h-5 w-5">
           <font-awesome-icon
             :icon="['fas', 'map']"

app/src/library.js

@@ -16,6 +16,8 @@ import {
   faBug,
   faCircleExclamation,
   faMap,
+  faTrophy,
+  faFileInvoice,
 } from '@fortawesome/free-solid-svg-icons'
 import {
   faLightbulb,
@@ -38,10 +40,12 @@ library.add(
   faArrowRight,
   faBug,
   faMap,
+  faTrophy,
   faCircleExclamation,
   faLightbulb,
   faCircleQuestion,
   faCircleRight,
   faGithub,
-  faGoogle
+  faGoogle,
+  faFileInvoice
 )