前言

非常好！已經到了串接的階段了！其實已經算是可以開始玩了！但目前串接階段，沒有做甚麼測試或是完整的Mock資料，可以說非常的隨興呢！
今天其實只是要把我們後端傳給我們的賭桌資料顯示在我們的遊戲畫面上，今天要做得就是賭桌倒數的更新，以及下注狀態。

倒數更新

其實就是留下來我們要的socket部分，我們掛上監聽我們要的MSG_TB_NTF，意思是賭桌的資料通知，那這部分只要在場的人就算沒下注都會派發。

// ....省略

  constructor() {
    super()
  // ....省略

    $io.on(cmd.MSG_TB_NTF, (reason: any, data: any) => {
      switch (reason) {
        case cst.TB_NTF_COUNTDOWN_START:
          console.log('cst.TB_NTF_COUNTDOWN_START')
          break
        case cst.TB_NTF_COUNTDOWN_STOP:
          console.log('cst.TB_NTF_COUNTDOWN_STOP')
          break
        case cst.TB_NTF_COUNTDOWN_TIME:
        // 就是這邊我們要直接update我們的倒數秒數
          this._countdown.updateCountdown(data.countdown)
          break
        case cst.TB_NTF_FANPI:
          console.log('cst.TB_NTF_FANPI')
          break
        case cst.TB_NTF_PI_RESULT:
          console.log('cst.TB_NTF_PI_RESULT')
          break
        case cst.TB_NTF_STR_JOIN:
          console.log('cst.TB_NTF_STR_JOIN')
          break
        case cst.TB_NTF_STR_BETOUT:
          console.log('cst.TB_NTF_STR_BETOUT')
          break
        case cst.TB_NTF_STR_QUIT:
          console.log('cst.TB_NTF_STR_QUIT')
          break
        case cst.TB_NTF_KICKOUT:
          alert('被遊戲踢出！')
          console.log('cst.TB_NTF_KICKOUT')
          break
      }
    })
  }
// ....省略

以上就是這樣，就是這麼簡單！

串接下注

一樣也是Table這群組直接加，目前是直接把listener放在initPosition內，然後透過betout直接送出下注的這個請求，這個請求會得到一個response或是error，那其實不重要，因為籌碼放到桌上的關鍵，還是依靠Notify！以通知為主，讓所有人顯示資料盡量同步。

// ...省略

export default class Table extends WrapperContainerCenter {
  // ...省略
  private initPosition() {
    this._deskHover_playerpair.onClick(() => this.betout('ppair'))
    this._deskHover_playerking.onClick(() => this.betout('playerking'))
    this._deskHover_tiepair.onClick(() => this.betout('tiepair'))
    this._deskHover_tie.onClick(() => this.betout('tie'))
    this._deskHover_bankerking.onClick(() => this.betout('bankerking'))
    this._deskHover_banker.onClick(() => this.betout('banker'))
    this._deskHover_bankerpair.onClick(() => this.betout('bpair'))
    this._deskHover_player.onClick(() => this.betout('player'))
  }
  public betout(type: keyof typeof betType) {
    let _bet: typeof betType = {
      banker: 0,
      player: 0,
      bankerking: 0,
      playerking: 0,
      tie: 0,
      tiepair: 0,
      bpair: 0,
      ppair: 0
    }
    _bet[type] = store.getState().chip

    $io
      .REQ_USER_BETOUT(Object.assign({}, _bet))
      .then(res => {
        console.log(res)
      })
      .catch(err => {
        console.log(err)
      })
  }

// ...省略
}

籌碼放置賭桌

當我們收到BT就是BET下注資料時，就會把籌碼放上桌，那只有有下注才會收到這則通知。

$io.on(cmd.MSG_BT_NTF, (reason: any, data: any) => {
      switch (reason) {
        case cst.BT_NTF_BETOUT:
          this.betout(data); break
        case cst.BT_NTF_BETOUT_BALANCE:
          store.dispatch(actions.updateBalance({ balance: data.balance })); break
      }
    })

public betout(data: any) {
    let _betChip = store.getState().betChip
    store.dispatch(
      actions.updateBetChip({ betChip: plusBet(_betChip, data.bet) })
    )
    this._chipsLayer.addBetChip('user', 'users', data.bet)
  }

半成品

已經能下注，且派彩更新金額，但還無法顯示牌局結果、無法收回桌上籌碼。

後記

快要完成了，這星期結束也一堆事，日子真難過啊！