xg-roadmap-generator

用於生成遊戲路圖的組件庫

PS: 當前僅提供珠盤路、大眼路、骰寶路使用。

點我展示

安裝

npm

npm install xg-roadmap-generator

yarn

yarn add xg-roadmap-generator

使用方式

componentA.vue

<template>
  <bead-road :gameType="1" :list="[{run: 12, sign: '180'}, {run: 13, sign: '252'}]" />
</template>
<script>
  import { BeadRoad } from "xg-roadmap-generator"
  import "xg-roadmap-generator/dist/style.css"

  export default {
    components: {
      BeadRoad
    }
  }
</script>

shims 檔記得加上 module

shims-vue.d.ts

// ...

declare module "xg-roadmap-generator"

基本參數

必填參數 - 遊戲類型 【gameType】(<number>)

| gameType(<number>) 遊戲類型清單 | 說明 | | --------------------------------- | -------- | | 1 | 百家樂 | | 2 | 龍虎 | | 3 | 輪盤 | | 4 | 色碟 | | 5 | 骰寶 | | 6 | 單骰骰寶 |

必填參數 - 賽果 【list】(<RoadmapItem[]>)

| list(<RoadmapItem[]>) | 欄位型別 | 欄位說明 | | ----------------------- | -------- | ------------ | | RoadmapItem | | 路圖個別資料 | | -> run | number | 局號 | | -> sign | string | 賽果符號 |

選填參數 - 語系 【langCode】(<string>)

| langCode(<string>) 語系 | 說明 | | ------------------------- | ---- | | "zh"(default) | 繁體 | | "cn" | 簡體 |

選填參數 - X 軸的個數 【width】(<number>)

| width(<number>) X 軸的個數 | 說明 | | ---------------------------- | ---------- | | 20 (default) | X 軸的個數 |

選填參數 - Y 軸的個數 【height】(<number>)

| height(<number>) Y 軸的個數 | 說明 | | ----------------------------- | ---------------------------------- | | 6 (default) | Y 軸的個數PS：骰寶固定為1 |

選填參數 - 路圖畫布高度 【wrapperHeight】(<number>)

| wrapperHeight(<number>) 路圖畫布高度 | 說明 | | -------------------------------------- | ------------------------------ | | 180 (default) | 路圖畫布高度，單位為像素(px) |

【sign】 賽果符號說明：

本套件開發時，發布相關說明(開發人員)

執行 build 指令、打包檔案成 tgz 壓縮檔

npm run build
npm pack

本地測試：使用 npm link 將 xg-roadmap-generator 連結到本地生成的 xg-roadmap-generator-{版本號}.tgz

npm link xg-roadmap-generator-{版本號}.tgz

發布組件庫

• 不可使用已存在的版本號 (package.json 的 version)
• 需使用 npm 指令：

npm run publish