feat: add booth logo to HexTile

Author: tcandicetc

src/components/Danmaku.vue

@@ -42,7 +42,7 @@ defineProps<{
   color: #fff;
   font-size: 20px;
   visibility: hidden;
-  animation: danmaku-move 6s linear infinite;
+  animation: danmaku-move 6s linear;
   animation-fill-mode: forwards;
   text-shadow:
     -1px -1px 0 #333, /* 左上 */

src/components/PhaserGame.vue

@@ -23,8 +23,8 @@ renderer.link = function ({href, title, text}) {
 }
 marked.setOptions({ renderer })
 
-onMounted(() => {
-  game.value = StartGame('game-container')
+onMounted(async () => {
+  game.value = await StartGame('game-container')
 
   const boothsDataUrl = 'https://coscup.org/2024/json/sponsor.json'
   fetch(boothsDataUrl)

src/data/GameData.ts

@@ -8,6 +8,7 @@ export const GameData = {
   hexSize: 0,
   bottomBarHeight: 70,
   popupOpen: false,
+  boothIDs: [] as string[],
   get hexWidth() {
     return this.hexSize * 2
   },

src/data/TileData.ts

@@ -69,29 +69,40 @@ export class HexTile extends Phaser.GameObjects.Container {
   private skew: number
   private hexGraphics: Phaser.GameObjects.Graphics
   private ID: string
+  type: string
   centerX: number
   centerY: number
 
-  constructor({ scene, x, y, size, type, ID = "", skew = 0.6 }: HexTileOptions) {
+  constructor({ scene, x, y, size, type, ID = "", skew = 0.6}: HexTileOptions) {
     super(scene, x, y-100)
     this.size = size
     this.ID = ID
     this.type = type
+    this.skew = skew
     if (this.type === "Base") {
       this.color = 0xD3BBDD
     }
     else if (this.type === "Booths") {
-      this.color = 0xF8C0C8
+      this.color = 0xFFFFFF
     }
     else if (this.type === "Venue") {
       this.color = 0xECE3F0
     }
-    this.skew = skew
     this.centerX = x
     this.centerY = y
 
     this.hexGraphics = this.createHex()
     this.add(this.hexGraphics)
+    if (this.type === "Booths") {
+      const boothLogo = this.scene.add.image(0, 0, ID)
+      const maxW = this.size * 1.5
+      const maxH = this.size * this.skew * 1.5
+      const scaleX = maxW / boothLogo.width
+      const scaleY = maxH / boothLogo.height
+      const scale = Math.min(scaleX, scaleY)
+      boothLogo.setScale(scale)
+      this.add(boothLogo)
+    }
     this.setSize(size * 2, Math.sqrt(3) * size * skew)
     this.setDepth(this.y)
 

src/game/main.ts

@@ -13,12 +13,21 @@ const config: Types.Core.GameConfig = {
     autoCenter: Phaser.Scale.CENTER_BOTH,
   },
   parent: "game-container",
-  backgroundColor: "#EFE7D3",
-  scene: [MainGame],
+  backgroundColor: "#EFE7D3"
 }
 
-function StartGame(parent: string) {
-  return new Game({ ...config, parent })
+export async function StartGame(parent: string): Promise<Phaser.Game> {
+  const res = await fetch('https://coscup.org/2024/json/sponsor.json')
+  const json = await res.json()
+  const boothIDs: string[] = json.map((s: any) => (s.id))
+
+  const scene = new MainGame(boothIDs)
+
+  return new Game({
+    ...config,
+    parent,
+    scene: [scene],
+  })
 }
 
 export default StartGame

src/game/scenes/Game.ts

@@ -17,7 +17,8 @@ function randomData(scene: Phaser.Scene, x: number, y: number) {
   const r = Math.random()
   if (r < 0.25) {
     ret.type = 'Booths'
-    ret.ID = 'Andes'
+    const index = Math.min(Math.floor(Math.random() * GameData.boothIDs.length), GameData.boothIDs.length - 1)
+    ret.ID = GameData.boothIDs[index]
   }
   else {
     ret.type = 'Venue'
@@ -30,13 +31,19 @@ export class Game extends Scene {
   private contentContainer!: Phaser.GameObjects.Container
   private dragStartY = 0
   private containerStartY = 0
+  private boothIDs: string[]
 
-  constructor() {
-    super('Game')
+  constructor(boothIDs: string[]) {
+    super('MainGame')
+    this.boothIDs = boothIDs
   }
 
   preload() {
-    this.load.setPath('assets')
+    this.boothIDs.forEach((key) => {
+      const url = `https://coscup.org/2024/images/sponsor/${key}.png`
+      this.load.image(key, url)
+    })
+    GameData.boothIDs = this.boothIDs
   }
 
   create() {