Merge pull request #16 from COSCUP/dev

Final version

Author: tcandicetc

package.json

@@ -35,7 +35,8 @@
     "qrcode.vue": "^3.6.0",
     "vue": "3.5.13",
     "vue-qrcode-reader": "^5.7.3",
-    "vue-router": "4"
+    "vue-router": "4",
+    "vue-toastification": "2.0.0-rc.5"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.14.1",

pnpm-lock.yaml

@@ -21,7 +21,9 @@ export async function get_booths_images() {
     const res = await fetch(`${API_BASE_URL}/booths`)
     if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`)
     const data = await res.json()
-    const boothsImages = data.reduce((acc: Record<string, string>, booth: { name: string, logo: string }) => {
+    const boothsImages = data.reduce((acc: Record<string, string>, booth: any) => {
+        if (booth.type !== 'BOOTHS') return acc
+
         if (booth.name && booth.logo) {
             acc[booth.name] = booth.logo
         }

src/api/get_booths.ts

@@ -24,25 +24,15 @@ export async function postCollect(boothId: string, xCoordinate: number) {
       body: JSON.stringify(requestBody),
     });
 
-    if (!response.ok) {
-      let errorBody = {};
-      try {
-        errorBody = await response.json();
-      } catch (e) {
-        errorBody = { message: await response.text() };
-      }
-      const error = new Error(`HTTP error! Status: ${response.status}`);
-      (error as any).body = errorBody;
-      throw error;
-    }
-    
-    const data = await response.json();
-    return data;
+    const body = await response.json();
+
+    return {
+      ok: response.ok,
+      status: response.status,
+      body: body
+    };
+
   } catch (error) {
     console.error('Failed to post collect data:', error);
-    if ((error as any).body) {
-      console.error('Error body:', (error as any).body);
-    }
-    throw error;
   }
 }

src/api/post_collect.ts

@@ -291,8 +291,8 @@ const closeAvatarModal = () => {
 }
 
 .display-score {
-  font-size: 15px;
-  font-family: 'Zen Maru Gothic', sans-serif;
+  font-size: 20px;
+  font-family: 'M PLUS Rounded 1c', sans-serif;
   font-weight: bold;
   color: #4a4a4a;
   text-align: center;

src/components/MyProfile.vue

@@ -167,7 +167,7 @@ watch([showPopup, popupData], async ([isOpen, data]) => {
           <div v-for="comment in comments" :key="comment.msg_id" class="comment-item">
             <div class="comment-content">
               <div class="comment-header">
-                <span class="comment-user">{{ comment.user.name + "．" + comment.user.title }}</span>
+                <span class="comment-user">{{ comment.user.name + "．" + (comment.user.title || "新手小啄") }}</span>
                 <span class="comment-time">{{ formatTime(comment.created_at) }}</span>
               </div>
               <p class="comment-message">{{ comment.content }}</p>

src/components/PhaserGame.vue

@@ -4,26 +4,17 @@ import { EventBus } from '../EventBus'
 import { GameData } from '../../data/GameData.ts'
 import { get_hextiles } from '../../api/get_hextiles.ts'
 import { postCollect } from '../../api/post_collect.ts'
+import { useToast, POSITION } from 'vue-toastification'
 
-function randomData(scene: Phaser.Scene, x: number, y: number) {
-  const ret = {
-    scene: scene,
-    x: x,
-    y: y,
-    size: GameData.hexSize,
-    skew: GameData.skew,
-    type: '',
-    ID: ''
-  }
-  return ret
-}
+const toast = useToast()
 
 export class Game extends Scene {
   private contentContainer!: Phaser.GameObjects.Container
   private dragStartY = 0
   private containerStartY = 0
   private boothImages: string[]
   private playerCharacterImage: Phaser.GameObjects.Image | null = null;
+  private showAllInfo = false
 
   constructor(boothImages: string[]) {
     super('MainGame')
@@ -176,14 +167,14 @@ export class Game extends Scene {
     const infoBtn = this.add.image(GameData.screenWidth - 40, 40, 'no-eye').setOrigin(0.5).setScale(0.5).setInteractive()
     infoBtn.setScrollFactor(0)
 
-    infoBtn.on('pointerdown', () => {
-      this.showAllTileInfo(true)
-      infoBtn.setTexture('eye')
-    })
-
     infoBtn.on('pointerup', () => {
-      this.showAllTileInfo(false)
-      infoBtn.setTexture('no-eye')
+      this.showAllInfo = !this.showAllInfo
+      this.showAllTileInfo(this.showAllInfo)
+      if (this.showAllInfo) {
+        infoBtn.setTexture('eye')
+      } else {
+        infoBtn.setTexture('no-eye')
+      }
     })
 
     EventBus.emit('current-scene-ready', this)
@@ -263,30 +254,19 @@ export class Game extends Scene {
       xCoordinate = 0
     }
 
-    try {
-      const apiResponse = await postCollect(boothId, xCoordinate)
-      console.log('API 呼叫成功，回傳資料：', apiResponse)
-      alert('板塊收集成功！')
+    const apiResponse = await postCollect(boothId, xCoordinate)
 
-      const tile = new HexTile(randomData(this, pos.x, pos.y))
-      this.contentContainer.addAt(tile, 0)
-      GameData.path.push(tile)
-      
-      this.tweens.add({
-        targets: this.contentContainer,
-        y: Math.max(GameData.screenHeight * 0.5 - pos.y, 0),
-        duration: 600,
-        ease: 'Sine.easeInOut',
-        onComplete: () => {
-          this.addCharacterImage(tile)
-        }
+    if (!apiResponse?.ok) {
+      return toast.error(`已搜集過此板塊了`, {
+        position: POSITION.BOTTOM_CENTER,
+        timeout: 3000,
       })
-    } catch (error) {
-      const errorBody = (error as any).body
-      if (errorBody && errorBody.detail === 'Point already collected') {
-        alert('你已經收集過這個板塊了！')
-      }
     }
+
+    toast.success(`成功收集到${apiResponse.body.booth}的板塊`, {
+      position: POSITION.BOTTOM_CENTER,
+      timeout: 3000,
+    })
   }
 
   showAllTileInfo(show: boolean) {

src/game/scenes/Game.ts

@@ -1,7 +1,10 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './config'
+import Toast from 'vue-toastification'
+import 'vue-toastification/dist/index.css';
 
 const app = createApp(App)
 app.use(router)
+app.use(Toast)
 app.mount('#app')