[add] Bootstrap

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@ant-design/icons-vue": "^6.1.0",
         "axios": "^0.26.1",
+        "bootstrap": "^5.1.3",
         "vue": "^3.2.25"
       },
       "devDependencies": {
@@ -109,6 +110,16 @@
       "integrity": "sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA==",
       "dev": true
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.1.tgz",
@@ -355,6 +366,18 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/bootstrap"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.10.2"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
@@ -1673,6 +1696,12 @@
       "integrity": "sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA==",
       "dev": true
     },
+    "@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
+      "peer": true
+    },
     "@vitejs/plugin-vue": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.1.tgz",
@@ -1903,6 +1932,12 @@
         "@babel/types": "^7.9.6"
       }
     },
+    "bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "requires": {}
+    },
     "call-bind": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@ant-design/icons-vue": "^6.1.0",
     "axios": "^0.26.1",
+    "bootstrap": "^5.1.3",
     "vue": "^3.2.25"
   },
   "devDependencies": {

src/assets/style.css

@@ -1,11 +1,15 @@
-.main {
+.table {
+    width: inherit;
+}
+
+/* .main {
     width: 80%;
     margin: 20px auto;
 }
 
 .table {
     table-layout: fixed;
-    /* width: 100%; */
+    width: 100%;
     margin-bottom: 1rem;
     color: #888;
     vertical-align: top;
@@ -61,4 +65,4 @@ tr {
 
 .table>:not(:first-child) {
     border-top: 2px solid currentColor;
-}
+} */

src/components/BJ_Casino_Rank.vue

@@ -4,14 +4,47 @@ import '../assets/style.css';
 import { BJ_Casino_Rank } from "../script/BJ_Casino_Rank";
 
 let Title = ref("BJ_Casino_Rank");
-let div_Main = ref(null);
+let RankData = ref([]);
 const self = {
-    div_Main: div_Main
+    RankData: RankData
 }
 const Script = new BJ_Casino_Rank(self);
+
 </script>
 
 <template>
     <h1>{{ Title }}</h1>
-    <div ref="div_Main"></div>
+    <div class="d-flex justify-content-center">
+        <table class="table table-striped table-info table-hover">
+            <thead>
+                <tr>
+                    <th align="left">排名</th>
+                    <th align="left">名稱</th>
+                    <th align="left">倍率</th>
+                    <th align="left">機台</th>
+                    <th align="left">桌號</th>
+                </tr>
+            </thead>
+            <tbody>
+
+                <tr v-for="(item, index) in RankData" :key="index">
+                    <td>
+                        <font size="5"><b>{{ item[0] }}</b></font>
+                    </td>
+                    <td align="left">
+                        <font size="5"><b>{{ item[2][1] }}</b></font>
+                    </td>
+                    <td align="left">
+                        <font size="5"><b>{{ Math.floor(item[1]) }}</b></font>
+                    </td>
+                    <td align="left">
+                        <font size="5"><b>{{ item[3][0] }}</b></font>
+                    </td>
+                    <td align="left">
+                        <font size="5"><b>{{ item[3][1] }}</b></font>
+                    </td>
+                </tr>
+
+            </tbody>
+        </table>  </div>
 </template>

src/main.ts

@@ -1,4 +1,6 @@
-import { createApp } from 'vue'
+import 'bootstrap/dist/css/bootstrap.min.css';
-import App from './App.vue'
+import { createApp } from 'vue';
+import App from './App.vue';
+
 
 createApp(App).mount('#app')

src/script/BJ_Casino_Rank.ts

@@ -6,6 +6,8 @@ export class BJ_Casino_Rank {
 
     private _ws: any;
 
+    private _rankdata: any = null;
+
     //#endregion
 
     //#region Lifecycle
@@ -107,7 +109,7 @@ export class BJ_Casino_Rank {
             }
 
             case "rank.info": {
-                this.SetData(Data);
+                this.SetRankData(Data);
                 this._ws.close();
                 break;
             }
@@ -117,42 +119,13 @@ export class BJ_Casino_Rank {
         }
     }
 
-    public SetData(data: any) {
+    public SetRankData(data: any) {
         let rankdata = data["rank"];
-        // let div_Main = document.getElementById("div_Main");
+        this._client.RankData.value = rankdata;
-        let div_Main = this._client.div_Main;
-        let div_main_s = "";
-        div_main_s += `
-        <table class="table table-striped table-info table-hover">
-        <thead>
-        `;
-        div_main_s += `<th>排名</th>`;
-        div_main_s += `<th>名稱</th>`;
-        div_main_s += `<th>倍率</th>`;
-        div_main_s += `<th>機台</th>`;
-        div_main_s += `<th>桌號</th>`;
-        div_main_s += `</thead><tbody>`;
-        for (let i = 0; i < rankdata.length; i++) {
-            const data = rankdata[i];
-            const rank = data[0];
-            const magnification = Math.floor(data[1]);
-            const name = data[2][1];
-            const slot = data[3][0];
-            const table = data[3][1];
-            div_main_s += `
-                    <tr>
-                    <td><font size="5"><b>${rank}</b></font></td>
-                    <td align="left"><font size="5"><b>${name}</b></font></td>
-                    <td align="left"><font size="5"><b>${magnification}</b></font></td>
-                    <td align="left"><font size="5"><b>${slot}</b></font></td>
-                    <td align="left"><font size="5"><b>${table}</b></font></td>
-                    </tr>
-                    `;
-        }
-        div_main_s += `</tbody></table>`;
-        div_Main.value.innerHTML = div_main_s;
     }
 
+    //#endregion
+
     //#region WebSocke
 
     public OnWebSocketMessage(e: any) {
@@ -213,6 +186,10 @@ export class BJ_Casino_Rank {
         this.AddLog(this._ws.readyState);
     }
 
+    public Sleep(ms: number) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
     public AddLog(log: any) {
         console.log(log);
         // var textarea = document.getElementById("Log");