前言

今天是中秋節前夕，來輕鬆做個籌碼選單吧！大概說明一下可能會統一狀態，所以元件內部暫時不放置狀態，不然應該是會有選取籌碼的狀態。

籌碼組件

這個籌碼組件呢，會被放置在Navbottom內，當作一個群組，那以下為物件結構圖。米字號為新增物件。

└─src
    │  App.ts
    │  Game.ts
    ├─components
    │  ├─elements
    │  │      Animation.ts
    │  │      Sprite.ts
    │  │      Texture.ts
    │  │      Wrapper.ts
    │  │      WrapperContainer.ts
    │  │      WrapperContainerCenter.ts
    │  │      WrapperType.ts 
    │  ├─groups
    │  │      Body.ts
    │  │      Casino.ts
    │  │      ChipBox.ts  ***
    │  │      Loading.ts
    │  │      Navbottom.ts
    │  │      Navtop.ts
    │  │      Table.ts
    │  └─objects
    │          Bg.ts
    │          Chip.ts
    │          Countdown.ts
    │          CountdownNumber.ts
    │          Desk.ts
    │          DeskHover.ts   
    ├─config
    │      chipType.ts
    │      imagePath.ts
    │      loadingPath.ts
    │      
    └─loaders
            Loader.ts

ChipBox新增了甚麼呢？

import WrapperContainerCenter from '@/components/elements/WrapperContainerCenter'
import chipType from '@/config/chipType'
import Chip from '@/components/objects/Chip'
import * as WrapperType from '@/components/elements/WrapperType'

export default class ChipBox extends WrapperContainerCenter {
  private _chipList: Array<Chip> = []
  constructor() {
    super()
    // 迴圈跑所有chipType，這是我們設定檔。
    for (let v in chipType) {
      let chip = new Chip(v as keyof typeof chipType)
      // 直接放置在這群組上的container。
      this.addChild(chip)
      // 也要放進我們的陣列內
      this._chipList.push(chip)
    }
    // 這邊部分迴圈是把籌碼放在對應的位置
    for (let i in this._chipList) {
      this._chipList[i].setPosition({ animation: false }, Number(i) * this._chipList[i].width * 1.05, 0)
      this._chipList[i].setInteractive(true)
    }
  }

  public setPosition(animationOpt: WrapperType.animationOpt, x: number, y: number): void {
    this.updateCenter()
    this._centerContainer.setPosition(animationOpt, x, y)
  }
}

組件定位

接著我們把ChipBox這個一堆籌碼的籌碼組放在Navbottom。因為要讓他可以置中，所以有先塞一個Graphics，用來撐開大小，並確定尺寸。

import WrapperContainerCenter from '@/components/elements/WrapperContainerCenter'
import Wrapper from '@/components/elements/Wrapper'
import ChipBox from '@/components/groups/ChipBox'

export default class Navbottom extends WrapperContainerCenter {
  private _chipBox: Wrapper
  constructor() {
    super()
    // 使用Graphics撐開，確定大小
    let rect = new PIXI.Graphics()
    rect.drawRect(0, 0, 1650, 180)
    rect.alpha = 0
    this._centerContainer.addContainer(rect)

    this.setPosition({ animation: false }, 0, 720)

    // ChipBox籌碼組位置
    this._chipBox = new ChipBox()
    this._chipBox.setPosition({ animation: false }, this.width / 2, this.height / 2)
    this._chipBox.setScale(false, 1.2, 1.2)
    this.addChild(this._chipBox)
  }
}

後記

今天的非常短，為什麼呢？因為我要繼續寫伺服器端了，小弟才疏學淺真的沒甚麼經驗建構遊戲伺服器，還正在努力當中。