Merge branch 'dev'

Author: mirumodapon

public/assets/question.png

@@ -13,8 +13,8 @@ const goToBoothsList = () => {
   router.push({ path: '/booths', query: { token: token.value } })
 }
 
-const scanQRCode = () => {
-  router.push({ path: '/qrcode-scanner', query: { token: token.value } })
+const showMyQrCode = () => {
+  router.push({path: '/my-qrcode',query: { token: token.value } })
 }
 
 const goToProfile = () => {
@@ -42,9 +42,9 @@ provide('token', token)
       <span>遊戲畫面</span>
     </button>
 
-    <button class="button button-qrcode" v-else @click="scanQRCode">
-       <Icon icon="tabler:scan" class="icon" />
-      <span>掃描 QR Code</span>
+    <button class="button button-qrcode"  v-else @click="showMyQrCode">
+      <Icon icon="tabler:qrcode" class="icon"></Icon>
+      <span>顯示 QR Code</span>
     </button>
 
     <button class="button button-profile" @click="goToProfile">

src/App.vue

@@ -20,6 +20,7 @@ const popupData = ref()
 const comments = ref()
 const newMessage = ref('')
 const renderer = new marked.Renderer()
+const tutorialRef = ref()
 renderer.link = function ({href, title, text}) {
   return `<a href="${href}" target="_blank">${text}</a>`
 }
@@ -45,9 +46,13 @@ onMounted(async () => {
     showPopup.value = true
   })
 
-   EventBus.on('add-new-hextile', (boothId: string) => {
+  EventBus.on('add-new-hextile', (boothId: string) => {
     scene.value.addNextHexTile(boothId);
-  });
+  })
+
+  EventBus.on('show-tutorial', () => {
+    tutorialRef.value?.startTutorial()
+  })
 })
 
 onUnmounted(() => {
@@ -142,7 +147,7 @@ watch([showPopup, popupData], async ([isOpen, data]) => {
 </script>
 
 <template>
-  <Tutorial v-if="scene" :scene="scene"/>
+  <Tutorial ref="tutorialRef" v-if="scene" :scene="scene" />
   <div id="game-container" :style="{ bottom: `${GameData.bottomBarHeight}px` }" />
   <div class="popup-overlay" id="popup" v-if="showPopup">
     <div class="popup-content">

src/components/PhaserGame.vue

@@ -7,9 +7,9 @@ import { Icon } from '@iconify/vue'
 import { EventBus } from '../game/EventBus'
 
 const route = useRoute()
-const router = useRouter() 
+const router = useRouter()
 const token = computed(() => route.query.token)
-const showMyQrCode = ref(false)
+const showMyQrCode = ref(true)
 
 const onDetect = (decodedText: string) => {
   const boothToken = decodedText[0].rawValue
@@ -20,24 +20,24 @@ const onDetect = (decodedText: string) => {
 
 <template>
   <div class="qr-scanner-container">
-    <div v-if="!showMyQrCode" class="qr-code-scanner">
-      <qrcode-stream @detect="onDetect"></qrcode-stream>
-    </div>
-    <div v-show="showMyQrCode" class="my-qr-code-container" @click.stop="showMyQrCode = false">
+    <div v-if="showMyQrCode" class="my-qr-code-container">
       <div class="my-qr-code">
         <qrcode-vue :value="token" :size="250" />
       </div>
-      <p class="qrcode-instruction">點擊任意處回到掃描畫面</p>
     </div>
+
+    <div v-else class="qr-code-scanner">
+      <qrcode-stream @detect="onDetect"></qrcode-stream>
+    </div>
+
     <button class="show-my-qr-button" @click="showMyQrCode = !showMyQrCode">
-      <Icon icon="tabler:qrcode" class="qr-code-icon"></Icon>
-      <span>顯示行動條碼</span>
+      <Icon :icon="showMyQrCode ? 'tabler:scan' : 'tabler:qrcode'" class="button-icon"></Icon>
+      <span>{{ showMyQrCode ? '掃描 QR Code' : '顯示 QR Code' }}</span>
     </button>
   </div>
 </template>
 
 <style scoped>
-
 .qr-scanner-container {
   position: fixed;
   top: 0;
@@ -61,7 +61,6 @@ const onDetect = (decodedText: string) => {
   width: 90vw;
   aspect-ratio: 1 / 1;
   z-index: 100;
-
   border: 10px solid #f30000;
 }
 
@@ -115,9 +114,10 @@ const onDetect = (decodedText: string) => {
   justify-content: center;
   font-size: 1em;
   gap: 5px;
+  -webkit-tap-highlight-color: transparent;
 }
 
-.qr-code-icon {
+.button-icon {
   width: 20px;
   height: 20px;
 }

src/components/QRCodeScanner.vue renamed to src/components/QRCode.vue

@@ -11,19 +11,29 @@ const images = ref<HTMLImageElement[]>([])
 onMounted(() => {
   const seen = localStorage.getItem("hasSeenTutorial")
   if (!seen) {
-    show.value = true
-    props.scene.input.enabled = false
-    for (let i = 1; i <= total; i++) {
-      const img = new Image()
-      img.onload = () => {
-        console.log(`Tutorial image ${i} loaded.`)
-      }
-      img.src = `/assets/tutorial-${i}.png`
-      images.value.push(img)
-    }
+    startTutorial()
   }
 })
 
+defineExpose({
+  startTutorial
+})
+
+function startTutorial() {
+  page.value = 0
+  show.value = true
+  props.scene.input.enabled = false
+  images.value = []
+  for (let i = 1; i <= total; i++) {
+    const img = new Image()
+    img.onload = () => {
+      console.log(`Tutorial image ${i} loaded.`)
+    }
+    img.src = `/assets/tutorial-${i}.png`
+    images.value.push(img)
+  }
+}
+
 function nextPage() {
   if (page.value < total - 1) {
     const nextImage = images.value[page.value + 1]

src/components/Tutorial.vue

@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 import PhaserGame from '../components/PhaserGame.vue'
 import BoothsList from '../components/BoothsList.vue'
-import QRCodeScanner from '../components/QRCodeScanner.vue'
+import MyQRcode from '../components/QRCode.vue'
 import MyProfile from '../components/MyProfile.vue'
 
 const routes: Array<RouteRecordRaw> = [
@@ -16,9 +16,9 @@ const routes: Array<RouteRecordRaw> = [
     component: BoothsList
   },
   {
-    path: '/qrcode-scanner',
-    name: 'qrcode-scanner',
-    component: QRCodeScanner,
+    path: '/my-qrcode',
+    name: 'my-qrcode',
+    component: MyQRcode,
   },
   {
     path: '/profile',

src/config/index.ts

@@ -10,9 +10,9 @@ export const achievements: Medal[] = [
   { id: 2, icon: 'mdi:account-group', name: '開始融入', unlocked: false }, // 聊天室發 8 則留言
   { id: 3, icon: 'mdi:forum', name: '意見領袖', unlocked: false }, // 聊天室發 20 則留言
 
-  { id: 10, icon: 'mingcute:sunrise-fill', name: '早起的鳥兒有蟲吃', unlocked: false }, // 參與第一天或第二天的開幕
+  { id: 10, icon: 'mingcute:sunrise-fill', name: '早起的鳥兒有蟲吃', unlocked: false }, // 參與第一天的開幕
   { id: 11, icon: 'mdi:flag-checkered', name: '最後一哩路', unlocked: false }, // 參與第一天的閉幕
-  { id: 12, icon: 'mdi:infinity', name: '有始有終', unlocked: false }, // 參與開幕與閉幕
+  { id: 12, icon: 'mdi:infinity', name: '有始有終', unlocked: false }, // 參與第二天的開幕
   // 贊助攤位 12 個社群攤位 32 個共 44 個，教室 25 間，共 69 個板塊
   { id: 13, icon: 'mdi:foot-print', name: '第一哩路', unlocked: false }, // 獲得 1 個板塊
   { id: 14, icon: 'mdi:map-marker-multiple', name: '攻城掠地', unlocked: false }, // 獲得 20 個板塊

src/data/AchievementsData.ts

@@ -27,6 +27,7 @@ export class Game extends Scene {
     })
     this.load.image('eye', '/assets/eye.png')
     this.load.image('no-eye', '/assets/no-eye.png')
+    this.load.image('question', '/assets/question.png')
     let playerCharacterPath = localStorage.getItem('playerCharacter');
 
     if (!playerCharacterPath) {
@@ -177,6 +178,33 @@ export class Game extends Scene {
       }
     })
 
+    const canvas2 = this.textures.createCanvas('tutorial-button', canvaSize, canvaSize)
+    const ctx2 = canvas2!.getContext()
+
+    // set button background
+    ctx2.fillStyle = '#ffffff'
+    ctx2.beginPath()
+    ctx2.arc(canvaSize / 2, canvaSize / 2, buttonSize / 2 - 5, 0, Math.PI * 2)
+    ctx2.fill()
+
+    // add button shadow
+    ctx2.shadowColor = 'rgba(0, 0, 0, 0.3)'
+    ctx2.shadowBlur = 10
+    ctx2.shadowOffsetX = 4
+    ctx2.shadowOffsetY = 4
+    ctx2.fill()
+
+    canvas2!.refresh()
+
+    this.add.image(GameData.screenWidth - 40, 110, 'tutorial-button').setOrigin(0.5)
+
+    const tutorialBtn = this.add.image(GameData.screenWidth - 40, 110, 'question').setOrigin(0.5).setScale(0.5).setInteractive()
+    tutorialBtn.setScrollFactor(0)
+
+    tutorialBtn.on('pointerup', () => {
+      EventBus.emit('show-tutorial')
+    })
+
     EventBus.emit('current-scene-ready', this)
   }