Day25 紙牌接龍-結算畫面採用Modal和修正移牌優先權

2023 iThome 鐵人賽

DAY 25

SideProject30

毫無自信的開發Web遊戲接龍-成為創造龍的英雄之路!系列第 25 篇

15th鐵人賽

懶惰學

2023-10-04 19:41:31

397 瀏覽

分享至

前言

今天會調整結算畫面的顯示、修正連點移牌的優先權錯誤(應該最優先移入結算牌堆而非七牌堆)。

結算畫面調整

安裝套件 bootstrap-vue-next

昨日完成的結算畫面是跳出來的瀏覽器訊息，畫面完全看各家的瀏覽器制式化只能點確認，即使擋住原本的遊戲畫面是我想要的效果，但更想要的是可客製化頁面的互動視窗Modal。

雖然可以自己土炮撰寫Modal但看帳號名字就知道我很懶，我打算撿現成的套件看能不能快速客製化介面...然後就找到bootstrap-vue-next這個套件，聽名字就知道是針對Vue3特別拉出來的實現。

先照著官方文件安裝依賴:

npm i bootstrap bootstrap-vue-next
npm i unplugin-vue-components -D

這個 unplugin-vue-components 主要是方便自動載入有副作用(side effect)的功能到你的元件中，詳細可參考官方說明，畢竟Bootstrap有副作用才方便?!

接著調整vite.config.js的內容，主要是在plugins屬性對應的陣列中添加Components 包裹 BootstrapVueNextResolver的依賴:

// vite.config.js
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import {BootstrapVueNextResolver} from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [BootstrapVueNextResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

最後在main.js載入相關的CSS，記得把bootstrap移到上方避免之前撰寫的css被蓋掉:

// main.js/ts
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
// 略

前面都完成後，發現接龍畫面的卡片的英文、符號都變得比較Q版，上方導覽列 NavgationBarCSS有點跑版。
載入vue-bootstrap後的接龍畫面

修改邏輯

從套件bootstrap-vue-next引入要使用的BModal元件，宣告變數doneModal表示顯示結算畫面與否。

// DragDemo.vue
const doneModal = ref(false);
import { BModal } from 'bootstrap-vue-next';

使用<BModal>元件去包住結束畫面的HTML樣板:

v-model為true則會跳出結算畫面
title為交互視窗的上方標題
hide-footer設定交互視窗的確認取消區塊隱藏
@close設定點擊交互視窗關閉x按鈕時觸發的事件方法
@hide當交互視窗隱藏時觸發的事件方法

<!-- DragDemo.vue -->
<BModal v-model="doneModal" title="結算畫面" hide-footer @close="resetGame" @hide="resetGame">
    <h1>玩家 xxx</h1>
    <div>花費時間: {{ gameTime }} 秒</div>
    <div>總分數: {{ gameScore }} 分</div>
</BModal>

修正`點擊自動移牌`的優先權問題

修正自動移動的函數clickAutoMove中的toName寫法，原本是用FOUR_SUITS優先排序接著取第0個元素，
改寫為直接用Array.find取得想要優先的牌堆(結算盤堆名稱)，如果沒有才取得第0個元素(7牌堆名稱)。

結算牌堆名稱 FOUR_SUITS = ['club', 'diamond', 'heart', 'spade']

/**
 * 自動移動
 * @param {String} fromName 來自的牌堆名稱
 * @param {Card} card 想移動的牌
 */
function clickAutoMove(fromName, card) {
    const toNames = findFollowDeckName(cardStacks, card);
    // 略
    const toName = toNames.find((name) => FOUR_SUITS.includes(name)) ?? toNames[0];
    console.log(`可移動至的牌堆有: ${toNames}, 選擇移動至: ${toName}`);
    // 略
}