├── .gitignore
├── babel.config.js
├── src
    ├── utils
    │   ├── event.js
    │   └── api.js
    ├── assets
    │   ├── bg.png
    │   ├── refresh.png
    │   ├── bet-token.png
    │   ├── cocosbcx.png
    │   ├── waiting-male.jpg
    │   ├── waiting-female.jpg
    │   └── dice.svg
    ├── css
    │   └── style.css
    ├── App.vue
    ├── main.js
    ├── contracts
    │   └── dice.lua
    ├── store
    │   └── index.js
    └── components
    │   ├── header.vue
    │   ├── orders.vue
    │   ├── slider.vue
    │   └── game.vue
├── run_serve.png
├── public
    ├── favicon.ico
    └── index.html
├── vue.config.js
├── README_cn.md
├── package.json
├── README.md
└── yarn-error.log


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/*
2 | dist/*
3 | package-lock.json
4 | yarn.lock
5 | 
6 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/utils/event.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | 
3 | export default new Vue();
4 | 
5 | 


--------------------------------------------------------------------------------
/run_serve.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Cocos-BCX/cocos-dice-sample/HEAD/run_serve.png


--------------------------------------------------------------------------------
/src/assets/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Cocos-BCX/cocos-dice-sample/HEAD/src/assets/bg.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Cocos-BCX/cocos-dice-sample/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/refresh.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Cocos-BCX/cocos-dice-sample/HEAD/src/assets/refresh.png


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   publicPath: process.env.NODE_ENV === 'production' ? '' : '/'
3 | };


--------------------------------------------------------------------------------
/src/assets/bet-token.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Cocos-BCX/cocos-dice-sample/HEAD/src/assets/bet-token.png


--------------------------------------------------------------------------------
/src/assets/cocosbcx.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Cocos-BCX/cocos-dice-sample/HEAD/src/assets/cocosbcx.png


--------------------------------------------------------------------------------
/src/assets/waiting-male.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Cocos-BCX/cocos-dice-sample/HEAD/src/assets/waiting-male.jpg


--------------------------------------------------------------------------------
/src/assets/waiting-female.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Cocos-BCX/cocos-dice-sample/HEAD/src/assets/waiting-female.jpg


--------------------------------------------------------------------------------
/src/utils/api.js:
--------------------------------------------------------------------------------
1 | export default (...args) => {
2 |   return fetch(...args).then(res => {
3 |     if (res.ok) return Promise.inject(res.json());
4 |     return Promise.reject(res);
5 |   });
6 | };
7 | 
8 | 


--------------------------------------------------------------------------------
/src/css/style.css:
--------------------------------------------------------------------------------
 1 | body * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | p {
 6 |   margin: 0;
 7 | }
 8 | 
 9 | ul,
10 | ol {
11 |   margin: 0;
12 |   padding: 0;
13 |   list-style: none;
14 | }
15 | 
16 | .el-slider__runway {
17 |   background-color: #de3162
18 | }
19 | 
20 | .el-slider__bar {
21 |   background-color: #6eed9b;
22 |   -webkit-box-shadow: 0 0 20px #02f292;
23 |   box-shadow: 0 0 20px #02f292;
24 | }
25 | 
26 | .el-loading-mask {
27 |   background: rgba(78, 71, 71, 0.9)
28 | }
29 | 
30 | .el-slider__button {
31 |   border: 1px solid #c5c5c5;
32 |   background: #f6f6f6;
33 |   cursor: -webkit-grabbing;
34 |   cursor: grabbing;
35 | }
36 | 
37 | 
38 | 
39 | @media screen (max-width: 1024px) {
40 |   body {
41 |     width: 2000px;
42 |   }
43 | }


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <main id="app">
 3 |     <dice-header />
 4 |     <dice-game v-loading="loading" />
 5 |   </main>
 6 | </template>
 7 | 
 8 | <script>
 9 | import { mapState } from "vuex";
10 | export default {
11 |   components: {
12 |     diceHeader: require("@/components/header").default,
13 |     diceGame: require("@/components/game").default
14 |   },
15 |   computed: {
16 |     ...mapState(["loading"])
17 |   }
18 | };
19 | </script>
20 | 
21 | <style>
22 | #app {
23 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
24 |     "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
25 |     "Segoe UI Symbol";
26 |   -webkit-font-smoothing: antialiased;
27 |   -moz-osx-font-smoothing: grayscale;
28 |   font-size: 16px;
29 | }
30 | </style>
31 | 


--------------------------------------------------------------------------------
/README_cn.md:
--------------------------------------------------------------------------------
 1 | ## cocos-dice:
 2 | A Dice Game For Cocos-BCX
 3 | 
 4 | ## 准备工作:
 5 | ###### 1.下载钱包
 6 | 
 7 | 下载安装Google插件钱包 [CocosPay](https://github.com/Cocos-BCX/CocosPay)
 8 | 或
 9 | 根据系统选择安装桌面版钱包
10 | [CocosDesktop for Mac](https://cocosbcx.oss-cn-beijing.aliyuncs.com/CocosDesktop.dmg)
11 | [CocosDesktop for Windows](https://cocosbcx.oss-cn-beijing.aliyuncs.com/CocosDesktop.exe)
12 | 
13 | ###### 2.登录钱包
14 | 打开钱包创建/登录账户
15 | 
16 | 
17 | 
18 | ## 编译运行:
19 | 
20 | ###### 1.克隆项目代码到本地后，切换到项目的 front 目录；
21 | 
22 | ``` 
23 | cd front
24 | ```
25 | 
26 | ###### 2.在front目录下，按顺序执行以下命令（注意：运行以下命令前请确认您安装了8.9以上版本的node.js）
27 | 
28 | 
29 | 
30 | ```
31 | yarn install
32 | ```
33 | 
34 | 
35 | ```
36 | yarn run build
37 | ```
38 | 
39 | 
40 | 
41 | ```
42 | yarn run serve
43 | ```
44 | 
45 | ###### 3.运行结果如图；
46 | ``` test
47 | 注意：
48 | 1.如果您安装的是Goole插件钱包，请使用Goole浏览器打开链接;
49 | 2.确保钱包正常安装，并有登录账号
50 | ```
51 | 
52 | ![avatar](https://github.com/Cocos-BCX/cocos-dice-sample/blob/master/run_serve.png)
53 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import ElementUI from 'element-ui';
 4 | import store from './store';
 5 | import {
 6 |   library
 7 | } from '@fortawesome/fontawesome-svg-core'
 8 | import {
 9 |   faSignOutAlt,
10 | } from '@fortawesome/free-solid-svg-icons'
11 | import {
12 |   FontAwesomeIcon
13 | } from '@fortawesome/vue-fontawesome'
14 | import brands from '@fortawesome/fontawesome-free-brands';
15 | 
16 | import 'normalize.css';
17 | import 'element-ui/lib/theme-chalk/base.css';
18 | import 'element-ui/lib/theme-chalk/dialog.css';
19 | import 'element-ui/lib/theme-chalk/alert.css';
20 | import 'element-ui/lib/theme-chalk/message.css';
21 | import 'element-ui/lib/theme-chalk/notification.css';
22 | import './css/style.css';
23 | 
24 | library.add(faSignOutAlt, brands);
25 | 
26 | Vue.use(ElementUI);
27 | Vue.config.productionTip = false
28 | 
29 | Vue.component('font-awesome-icon', FontAwesomeIcon)
30 | 
31 | new Vue({
32 |   store,
33 |   render: h => h(App)
34 | }).$mount('#app')


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dice",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build"
 8 |   },
 9 |   "dependencies": {
10 |     "@fortawesome/fontawesome-free-brands": "^5.0.13",
11 |     "@fortawesome/fontawesome-svg-core": "^1.2.4",
12 |     "@fortawesome/free-solid-svg-icons": "^5.3.1",
13 |     "@fortawesome/vue-fontawesome": "^0.1.1",
14 |     "bcxjs-api": "^1.4.33",
15 |     "element-ui": "^2.4.6",
16 |     "get-random-values": "^1.2.0",
17 |     "isomorphic-ws": "^4.0.1",
18 |     "node-gyp": "^4.0.0",
19 |     "normalize.css": "^8.0.0",
20 |     "vue": "^2.5.17",
21 |     "vuex": "^3.0.1"
22 |   },
23 |   "devDependencies": {
24 |     "@vue/cli-plugin-babel": "^3.0.1",
25 |     "@vue/cli-service": "^3.0.1",
26 |     "vue-template-compiler": "^2.5.17"
27 |   },
28 |   "postcss": {
29 |     "plugins": {
30 |       "autoprefixer": {}
31 |     }
32 |   },
33 |   "browserslist": [
34 |     "> 1%",
35 |     "last 2 versions",
36 |     "not ie <= 8"
37 |   ]
38 | }
39 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [中文](https://github.com/Cocos-BCX/cocos-dice-sample/blob/master/README_cn.md)  
 2 | 
 3 | ## cocos-dice
 4 | A Fully-Functional Dice DApp Game for the Cocos-BCX Platform
 5 | 
 6 | ## Prerequisites
 7 | 
 8 | * Node.js 8.9+
 9 | * yarn
10 | 
11 | ### Wallet  
12 | 
13 | * [CocosPay Chrome Extension](https://chrome.google.com/webstore/detail/cocospay/ffbhaeoepdfapfjhcihbbhlaigejfack)
14 | * Alternatively [CocosPay from Source](https://github.com/Cocos-BCX/CocosPay)  
15 | 
16 | Or, alternatively (for Chrome & non-Chrome), install CocosDesktop Wallet  
17 | 
18 | [CocosDesktop for Mac](https://cocosbcx.oss-cn-beijing.aliyuncs.com/CocosDesktop.dmg)  
19 | [CocosDesktop for Windows](https://cocosbcx.oss-cn-beijing.aliyuncs.com/CocosDesktop.exe)  
20 | 
21 | ### Login  
22 | Open wallet to sign in or sign up  
23 | 
24 | 
25 | ## Build and Run
26 | 
27 | ```sh
28 | yarn install
29 | yarn build
30 | yarn serve
31 | ```
32 | 
33 | ## Open App in Browser
34 | 
35 | App should be available at: http://localhost:8080/
36 | 
37 | ``` test
38 | Notice: 
39 | 1. If you are using Google Chrome extension wallet, do open the link with Chrome;
40 | 2. Make sure you've installed wallet correctly and logged in
41 | ```
42 | 
43 | Output should be something like:
44 | 
45 | ![avatar](https://github.com/Cocos-BCX/cocos-dice-sample/blob/master/run_serve.png)
46 | 


--------------------------------------------------------------------------------
/src/contracts/dice.lua:
--------------------------------------------------------------------------------
 1 | -- very import 
 2 | COCOS_ACCURACY = 100000
 3 | 
 4 | function init()
 5 |     assert(chainhelper:is_owner(),'no auth')
 6 |     read_list = {public_data={rate=true,max_bet=true}}
 7 |     chainhelper:read_chain()
 8 |     public_data.rate  = 98
 9 |     public_data.max_bet = 1000000 
10 | 	write_list = {public_data={rate=true,max_bet=true}}
11 | 	chainhelper:write_chain()
12 | end
13 | 
14 | 
15 | function bet(num, amount)
16 |     read_list = {public_data={rate=true,max_bet=true}}
17 |     chainhelper:read_chain()
18 | 
19 |     num = tonumber(num)
20 |     amount = tonumber(amount) * COCOS_ACCURACY
21 | 
22 |     assert( 1 < num and num < 97, "num must in [2,96] " )
23 |     assert( 0 < amount and amount < public_data.max_bet * COCOS_ACCURACY, "amount must in [1, max]")
24 | 
25 |     chainhelper:transfer_from_caller(contract_base_info.owner, amount, 'COCOS', true)
26 | 
27 |     result_num = chainhelper:random() % 100
28 | 
29 |     if result_num < num then
30 |         win_chance = num - 1
31 |         reward_ratio = public_data.rate*1.0/win_chance
32 |         reward = amount*reward_ratio
33 |         chainhelper:transfer_from_owner(contract_base_info.caller, reward, 'COCOS', true)
34 |     end
35 | end
36 | 
37 | function hello_world()
38 | 	chainhelper:log('hello world')
39 | 	chainhelper:log(date('%Y-%m-%dT%H:%M:%S', chainhelper:time()))
40 | end


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import eventHub from "@/utils/event";
 4 | import {
 5 |   Message
 6 | } from 'element-ui'
 7 | Vue.use(Vuex)
 8 | 
 9 | 
10 | export default new Vuex.Store({
11 |   state: {
12 |     account: {},
13 |     cocos: 0,
14 |     loading: false,
15 |     bcx: {}
16 |   },
17 |   mutations: {
18 |     UPDATE_ACCOUNT(state, account) {
19 |       state.account = account
20 |     },
21 |     SET_BCX(state, bcx) {
22 |       state.bcx = bcx
23 |     },
24 |     SET_COCOS(state, cocos) {
25 |       state.cocos = cocos
26 |     },
27 |     LOADING(state, loading) {
28 |       state.loading = loading
29 |     }
30 |   },
31 |   actions: {
32 |     async CONNECT_COCOS({
33 |       state,
34 |       commit
35 |     }) {
36 |       try {
37 |         commit('LOADING', true)
38 |         let timer = null
39 |         clearInterval(timer)
40 |         timer = setInterval(() => {
41 |           if (window.BcxWeb) {
42 |             commit('SET_BCX', window.BcxWeb)
43 |             window.BcxWeb.getAccountInfo().then(res => {
44 |               if (res.locked) {
45 |                 Message({
46 |                   duration: 1200,
47 |                   message: 'Account Locked',
48 |                   type: 'error',
49 |                 })
50 |                 return
51 |               }
52 |               commit('UPDATE_ACCOUNT', {
53 |                 name: res.account_name,
54 |               })
55 |               commit('LOADING', false)
56 |             })
57 |             clearInterval(timer)
58 |           }
59 |         }, 1000)
60 |       } catch (error) {
61 |         commit('LOADING', false)
62 |         clearInterval(timer)
63 |         Message({
64 |           duration: 1200,
65 |           message: 'connect failed',
66 |           type: 'error',
67 |         })
68 |       }
69 |     },
70 |   },
71 | })


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <html lang="en">
 2 | 
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |   <title>Fair Dice</title>
 9 |   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
10 |   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-124180755-1"></script>
11 | 
12 |   <script src="https://jdi.cocosbcx.net/static/js/bcx.min.js"></script>
13 |   <script>
14 |     window.dataLayer = window.dataLayer || [];
15 | 
16 |     function gtag() {
17 |       dataLayer.push(arguments);
18 |     }
19 |     gtag('js', new Date());
20 | 
21 |     gtag('config', 'UA-124180755-1');
22 | 
23 |     //可以不用初始化，直接调用，API会自动判断是否初始化，热没有初始化则自动初始化
24 |     // bcx.init({
25 |     //   real_sub: true
26 |     // }).then(res => {
27 |     //   console.info("init res", res);
28 |     // });
29 |     ! function (n) {
30 |       var e = n.document,
31 |         t = e.documentElement,
32 |         i = 720,
33 |         d = i / 100,
34 |         o = "orientationchange" in n ? "orientationchange" : "resize",
35 |         a = function () {
36 |           var n = t.clientWidth || 320;
37 |           n > 720 && (n = 720);
38 |           t.style.fontSize = n / d + "px"
39 |         };
40 |       e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
41 |     }(window);
42 |   </script>
43 |   <script>
44 |     var _hmt = _hmt || [];
45 |     (function () {
46 |       var hm = document.createElement("script");
47 |       hm.src = "https://hm.baidu.com/hm.js?c860e0c5ee2fd946f3c9e02fdcf9514f";
48 |       var s = document.getElementsByTagName("script")[0];
49 |       s.parentNode.insertBefore(hm, s);
50 |     })();
51 |   </script>
52 | </head>
53 | 
54 | <body>
55 |   <div id="app"></div>
56 |   <!-- built files will be auto injected -->
57 | </body>
58 | 
59 | </html>


--------------------------------------------------------------------------------
/yarn-error.log:
--------------------------------------------------------------------------------
 1 | Arguments: 
 2 |   D:\node\node.exe D:\Program Files (x86)\bin\yarn.js install
 3 | 
 4 | PATH: 
 5 |   C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;D:\Java\git\Git\cmd;D:\GoRoot\bin;D:\gcc\bin;D:\node\;D:\Program Files (x86)\bin\;C:\Users\admin\AppData\Local\Microsoft\WindowsApps;D:\vscode\Microsoft VS Code\bin;D:\Program Files (x86)\Bandizip\;D:\Docker Toolbox;C:\Users\admin\AppData\Roaming\npm;C:\Users\admin\AppData\Local\Yarn\bin
 6 | 
 7 | Yarn version: 
 8 |   1.15.2
 9 | 
10 | Node version: 
11 |   10.15.3
12 | 
13 | Platform: 
14 |   win32 x64
15 | 
16 | Trace: 
17 |   Error: connect ETIMEDOUT 104.16.24.35:443
18 |       at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1097:14)
19 | 
20 | npm manifest: 
21 |   {
22 |     "name": "dice",
23 |     "version": "0.1.0",
24 |     "private": true,
25 |     "scripts": {
26 |       "serve": "vue-cli-service serve",
27 |       "build": "vue-cli-service build",
28 |       "lint": "vue-cli-service lint"
29 |     },
30 |     "dependencies": {
31 |       "@fortawesome/fontawesome-free-brands": "^5.0.13",
32 |       "@fortawesome/fontawesome-svg-core": "^1.2.4",
33 |       "@fortawesome/free-solid-svg-icons": "^5.3.1",
34 |       "@fortawesome/vue-fontawesome": "^0.1.1",
35 |       "element-ui": "^2.4.6",
36 |       "normalize.css": "^8.0.0",
37 |       "vue": "^2.5.17",
38 |       "vuex": "^3.0.1"
39 |     },
40 |     "devDependencies": {
41 |       "@vue/cli-plugin-babel": "^3.0.1",
42 |       "@vue/cli-plugin-eslint": "^3.0.1",
43 |       "@vue/cli-service": "^3.0.1",
44 |       "vue-template-compiler": "^2.5.17"
45 |     },
46 |     "eslintConfig": {
47 |       "root": true,
48 |       "env": {
49 |         "node": true
50 |       },
51 |       "extends": [
52 |         "plugin:vue/essential",
53 |         "eslint:recommended"
54 |       ],
55 |       "rules": {},
56 |       "parserOptions": {
57 |         "parser": "babel-eslint"
58 |       }
59 |     },
60 |     "postcss": {
61 |       "plugins": {
62 |         "autoprefixer": {}
63 |       }
64 |     },
65 |     "browserslist": [
66 |       "> 1%",
67 |       "last 2 versions",
68 |       "not ie <= 8"
69 |     ]
70 |   }
71 | 
72 | yarn manifest: 
73 |   No manifest
74 | 
75 | Lockfile: 
76 |   No lockfile
77 | 


--------------------------------------------------------------------------------
/src/components/header.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <header class="header">
  3 |     <div>
  4 |       <img class="dice-logo" :src="diceLogo" />
  5 |       <a href="JavaScript:;">COMMUNITIY</a>
  6 |     </div>
  7 |     <nav>
  8 |       <ul>
  9 |         <li v-if="!account.name">
 10 |           <!-- <a @click="refresh" href="JavaScript:;">LOGIN</a> -->
 11 |           <img class="refresh-logo" :src="refreshIcon" @click="refresh" />
 12 |         </li>
 13 |         <li v-if="account">{{account.name}}</li>
 14 |       </ul>
 15 |     </nav>
 16 |   </header>
 17 | </template>
 18 | 
 19 | 
 20 |  <script>
 21 | import eventHub from "@/utils/event";
 22 | import diceLogo from "@/assets/dice.svg";
 23 | import refreshIcon from "@/assets/refresh.png";
 24 | 
 25 | export default {
 26 |   methods: {
 27 |     refresh() {
 28 |       eventHub.$emit("REFRESH", "REFRESH");
 29 |     }
 30 |   },
 31 | 
 32 |   data() {
 33 |     return {
 34 |       diceLogo,
 35 |       refreshIcon
 36 |     };
 37 |   },
 38 | 
 39 |   computed: {
 40 |     account() {
 41 |       return this.$store.state.account;
 42 |     }
 43 |   }
 44 | };
 45 | </script>
 46 | 
 47 |  <style scoped>
 48 | .header {
 49 |   background-color: #3f3e3e;
 50 |   position: sticky;
 51 |   top: 0;
 52 |   z-index: 100;
 53 |   display: flex;
 54 |   align-items: center;
 55 |   height: 76px;
 56 |   justify-content: space-between;
 57 |   padding: 0 30px;
 58 | }
 59 | 
 60 | .header ul {
 61 |   display: flex;
 62 |   align-items: center;
 63 | }
 64 | 
 65 | .header ul li {
 66 |   margin-left: 30px;
 67 | }
 68 | 
 69 | .header a {
 70 |   color: #fff;
 71 |   text-decoration: none;
 72 |   letter-spacing: 0.5px;
 73 |   font-weight: 600;
 74 |   font-size: 0.9em;
 75 | }
 76 | 
 77 | .header .account-cell {
 78 |   color: #fff;
 79 | }
 80 | 
 81 | .header .account-cell > span {
 82 |   margin-right: 10px;
 83 | }
 84 | 
 85 | .header a:hover {
 86 |   text-shadow: 0 0 5px #fff;
 87 | }
 88 | 
 89 | .icon-logout {
 90 |   cursor: pointer;
 91 | }
 92 | 
 93 | .dice-logo {
 94 |   width: 40px;
 95 |   vertical-align: middle;
 96 |   margin-right: 30px;
 97 | }
 98 | 
 99 | .refresh-logo {
100 |   vertical-align: middle;
101 |   width: 26px;
102 |   margin-left: 6px;
103 | }
104 | 
105 | @media screen and (max-width: 720px) {
106 |   .header {
107 |     width: 100%;
108 |     background-color: #3f3e3e;
109 |     position: sticky;
110 |     top: 0;
111 |     z-index: 100;
112 |     display: flex;
113 |     align-items: center;
114 |     height: 0.76rem;
115 |     justify-content: space-between;
116 |     padding: 0 0.3rem;
117 |   }
118 | 
119 |   .header ul {
120 |     display: flex;
121 |     align-items: center;
122 |   }
123 | 
124 |   .header ul li {
125 |     margin-left: 0.3rem;
126 |   }
127 | 
128 |   .header a {
129 |     color: #fff;
130 |     text-decoration: none;
131 |     letter-spacing: 0.5px;
132 |     font-weight: 600;
133 |     font-size: 0.9em;
134 |   }
135 | 
136 |   .header .account-cell {
137 |     color: #fff;
138 |   }
139 | 
140 |   .header .account-cell > span {
141 |     margin-right: 0.1rem;
142 |   }
143 | 
144 |   .header a:hover {
145 |     text-shadow: 0 0 5px #fff;
146 |   }
147 | 
148 |   .icon-logout {
149 |     cursor: pointer;
150 |   }
151 | 
152 |   .dice-logo {
153 |     width: 0.4rem;
154 |     vertical-align: middle;
155 |     margin-right: 0.3rem;
156 |   }
157 | }
158 | </style>
159 | 
160 | 


--------------------------------------------------------------------------------
/src/components/orders.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <section class="orders-container">
  3 |     <header class="orders-tab">
  4 |       <ul>
  5 |         <li>ALL BETS</li>
  6 |       </ul>
  7 |     </header>
  8 |     <table class="orders-table">
  9 |       <thead>
 10 |         <tr>
 11 |           <th>Time</th>
 12 |           <th>Bettor</th>
 13 |           <th>Bet</th>
 14 |           <th>Roll Under</th>
 15 |           <th>Roll</th>
 16 |           <!-- <th>Payout</th> -->
 17 |         </tr>
 18 |       </thead>
 19 |       <tbody>
 20 |         <tr :key="index" v-for="(order, index) in orders">
 21 |           <td>{{order.date}}</td>
 22 |           <td>{{account.name}}</td>
 23 |           <td>{{order.parse_operations.arg_list.amount}}</td>
 24 |           <td>{{order.parse_operations.arg_list.num}}</td>
 25 |           <td>{{order.parse_operations.fee}}</td>
 26 |           <!-- <td
 27 |             class="payout"
 28 |           >{{order.action_trace.act.data.result.payout !== '0.0000 COCOS' && order.action_trace.act.data.result.payout || ''}}</td>-->
 29 |         </tr>
 30 |       </tbody>
 31 |     </table>
 32 |   </section>
 33 | </template>
 34 | 
 35 | <script>
 36 | import { mapState } from "vuex";
 37 | import { setTimeout } from "timers";
 38 | export default {
 39 |   mounted() {
 40 |     //注释
 41 |     // setTimeout(() => {
 42 |     //   this.fetchOrders();
 43 |     // }, 2000);
 44 |     // setInterval(this.fetchOrders(), 1000);
 45 |   },
 46 |   computed: {
 47 |     ...mapState(["account", "cocos"])
 48 |   },
 49 |   data() {
 50 |     return {
 51 |       orders: []
 52 |     };
 53 |   },
 54 |   watch: {
 55 |     cocos(val, old) {
 56 |       this.fetchOrders();
 57 |     }
 58 |   },
 59 | 
 60 |   methods: {
 61 |     fetchOrders() {
 62 |       let params = {
 63 |         account: this.account.name,
 64 |         limit: 10,
 65 |         startId: "1.11.0",
 66 |         endId: "1.11.0"
 67 |       };
 68 |       let list = [];
 69 |       bcx.queryAccountOperations(params).then(res => {
 70 |         if (res.code === 1 && res.data.length) {
 71 |           res.data.forEach(item => {
 72 |             if (
 73 |               item.type === "call_contract_function" &&
 74 |               item.parse_operations &&
 75 |               item.parse_operations.contract_name === "contract.dicegame"
 76 |             ) {
 77 |               item.parse_operations.fee = parseFloat(
 78 |                 item.parse_operations.fee
 79 |               ).toFixed(4);
 80 |               list.push(item);
 81 |             }
 82 |           });
 83 |           this.orders = list;
 84 |         }
 85 |       });
 86 |     }
 87 | 
 88 |     // dateFormat(raw) {
 89 |     //   return new Date(raw + "Z").toLocaleTimeString();
 90 |     // }
 91 |   }
 92 | };
 93 | </script>
 94 | 
 95 | <style scoped>
 96 | .thead {
 97 |   font-size: 0.16rem !important;
 98 | }
 99 | .orders-container {
100 |   background-color: #191919;
101 |   padding: 0.2rem;
102 | }
103 | 
104 | .orders-tab {
105 |   color: #fff;
106 |   display: flex;
107 |   justify-content: center;
108 |   margin-bottom: 0.2rem;
109 | }
110 | 
111 | .orders-tab ul {
112 |   display: flex;
113 |   align-items: center;
114 |   border-bottom: 2px solid #bbb;
115 | }
116 | 
117 | .orders-tab ul li {
118 |   cursor: pointer;
119 |   padding: 0.07rem 0.35rem;
120 |   display: inline-block;
121 |   text-align: center;
122 |   color: #bbb;
123 |   letter-spacing: 0.5px;
124 |   font-weight: 600;
125 | }
126 | 
127 | .orders-table {
128 |   width: 90%;
129 |   color: #fff;
130 |   font-weight: 900;
131 |   letter-spacing: 0.5px;
132 |   border-collapse: collapse;
133 |   margin: 0 auto;
134 | }
135 | 
136 | .orders-table tbody tr {
137 |   border-radius: 5px;
138 | }
139 | 
140 | .orders-table tbody tr:nth-child(even) {
141 |   background-color: #292929;
142 | }
143 | 
144 | .orders-table td {
145 |   font-size: 0.16rem;
146 |   padding: 0.2rem 0;
147 |   text-align: center;
148 | }
149 | 
150 | .payout {
151 |   color: #02f292;
152 |   text-shadow: 0 0 5px #02f292;
153 | }
154 | </style>
155 | 
156 | 


--------------------------------------------------------------------------------
/src/components/slider.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <section class="slider-container">
  3 |     <div class="slider">
  4 |       <!-- <div ref="slide" @click="slide" class="slider-bg">
  5 |         <div ref="range" :style="{'right': rangeDistance}" class="slider-range"></div>
  6 |         <div :style="{'right': rangeDistance}" ref="tooltip" class="slider-tooltip">{{current}}</div>
  7 |         <div
  8 |           @mousedown="dragStart"
  9 |           :class="{'active': isDraging}"
 10 |           :style="{'right': rangeDistance}"
 11 |           ref="handle"
 12 |           class="slider-handle"
 13 |         ></div>
 14 |       </div>-->
 15 |     </div>
 16 |     <div class="range">
 17 |       <span>1</span>
 18 |       <el-slider v-model="initial" @change="slide" :show-tooltip="true"></el-slider>
 19 |       <span class="all">100</span>
 20 |     </div>
 21 |   </section>
 22 | </template>
 23 | 
 24 | <script>
 25 | import eventHub from "@/utils/event";
 26 | 
 27 | export default {
 28 |   props: {
 29 |     // initial: {
 30 |     //   type: Number,
 31 |     //   default: 50
 32 |     // },
 33 |     max: {
 34 |       type: Number,
 35 |       default: 100
 36 |     },
 37 |     min: {
 38 |       type: Number,
 39 |       default: 1
 40 |     },
 41 |     result: {}
 42 |   },
 43 |   data() {
 44 |     return {
 45 |       isDraging: false,
 46 |       left: 0,
 47 |       slideWidth: 0,
 48 |       initial: 50
 49 |     };
 50 |   },
 51 | 
 52 |   methods: {
 53 |     slide() {
 54 |       switch (true) {
 55 |         case this.initial < this.min:
 56 |           this.initial = this.min;
 57 |           break;
 58 |         case this.initial > this.max:
 59 |           this.initial = this.max;
 60 |           break;
 61 |       }
 62 |       eventHub.$emit("ROLLUNDER_CHANGE", this.initial);
 63 |     }
 64 |   },
 65 |   destroyed() {
 66 |     document.removeEventListener("mousemove", this.drag);
 67 |     document.removeEventListener("mouseleave", this.dragEnd);
 68 |     document.removeEventListener("mouseup", this.dragEnd);
 69 |   }
 70 | };
 71 | </script>
 72 | 
 73 | <style scoped>
 74 | .range {
 75 |   display: flex;
 76 |   align-items: center;
 77 |   color: #fff;
 78 |   font-size: 18px;
 79 |   font-weight: 600;
 80 | }
 81 | .el-slider {
 82 |   flex: 1;
 83 |   margin-left: 0.15rem;
 84 | }
 85 | .range span {
 86 |   margin: 0 0.07rem 1px;
 87 | }
 88 | .range .all {
 89 |   margin-left: 0.15rem;
 90 | }
 91 | 
 92 | .slider-container {
 93 |   background-color: #4b484888;
 94 |   border-radius: 50px;
 95 |   height: 0.84rem;
 96 |   margin: 0 auto;
 97 |   width: 6.55rem;
 98 |   padding: 0.3rem;
 99 |   user-select: none;
100 | }
101 | 
102 | .slider {
103 |   position: relative;
104 |   display: flex;
105 |   align-items: center;
106 | }
107 | 
108 | .slider > span {
109 |   color: #fff;
110 |   font-weight: 600;
111 |   padding: 0 10px;
112 |   letter-spacing: 0.5px;
113 |   font-size: 16px;
114 | }
115 | 
116 | .slider-bg {
117 |   background-color: #de3162;
118 |   height: 10px;
119 |   border-radius: 5px;
120 |   width: 100%;
121 |   position: relative;
122 |   cursor: pointer;
123 | }
124 | 
125 | .slider-range {
126 |   position: absolute;
127 |   top: 0;
128 |   bottom: 0;
129 |   left: 0;
130 |   background-color: #6eed9b;
131 |   box-shadow: 0 0 20px #02f292;
132 |   border-radius: 5px;
133 |   transition: right ease 200ms;
134 | }
135 | 
136 | .slider-handle {
137 |   border: 1px solid #c5c5c5;
138 |   background: #f6f6f6;
139 |   cursor: grabbing;
140 |   width: 1.2em;
141 |   height: 1.2em;
142 |   position: absolute;
143 |   z-index: 1;
144 |   top: -0.3em;
145 |   margin-right: -0.6em;
146 |   transition: right ease 200ms;
147 |   border-radius: 4px;
148 | }
149 | 
150 | .slider-handle.active {
151 |   background-color: #3d91e7;
152 | }
153 | 
154 | .slider-tooltip {
155 |   width: 0.25rem;
156 |   text-align: center;
157 |   position: absolute;
158 |   margin-top: -0.3rem;
159 |   background: #000;
160 |   padding: 0.04rem;
161 |   border-radius: 0.05rem;
162 |   color: #fff;
163 |   font-size: 0.8em;
164 |   margin-right: -1em;
165 |   transition: right ease 200ms;
166 | }
167 | @media screen and (max-width: 720px) {
168 |   .slider-container {
169 |     background-color: #4b484888;
170 |     border-radius: 0.5rem;
171 |     height: 0.84rem;
172 |     margin: 0 auto;
173 |     width: 100%;
174 |     padding: 0.3rem;
175 |     user-select: none;
176 |   }
177 | 
178 |   .slider {
179 |     position: relative;
180 |     display: flex;
181 |     align-items: center;
182 |   }
183 | 
184 |   .slider > span {
185 |     color: #fff;
186 |     font-weight: 600;
187 |     padding: 0 0.1rem;
188 |     letter-spacing: 0.5px;
189 |     font-size: 0.16rem;
190 |   }
191 | 
192 |   .slider-bg {
193 |     background-color: #de3162;
194 |     height: 0.1rem;
195 |     border-radius: 5px;
196 |     width: 100%;
197 |     position: relative;
198 |     cursor: pointer;
199 |   }
200 | 
201 |   .slider-range {
202 |     position: absolute;
203 |     top: 0;
204 |     bottom: 0;
205 |     left: 0;
206 |     background-color: #6eed9b;
207 |     box-shadow: 0 0 20px #02f292;
208 |     border-radius: 5px;
209 |     transition: right ease 200ms;
210 |   }
211 | 
212 |   .slider-handle {
213 |     border: 1px solid #c5c5c5;
214 |     background: #f6f6f6;
215 |     cursor: grabbing;
216 |     width: 1.2em;
217 |     height: 1.2em;
218 |     position: absolute;
219 |     z-index: 1;
220 |     top: -0.3em;
221 |     margin-right: -0.6em;
222 |     transition: right ease 200ms;
223 |     border-radius: 4px;
224 |   }
225 | 
226 |   .slider-handle.active {
227 |     background-color: #3d91e7;
228 |   }
229 | 
230 |   .slider-tooltip {
231 |     width: 0.5rem;
232 |     text-align: center;
233 |     position: absolute;
234 |     margin-top: -0.3rem;
235 |     background: #000;
236 |     padding: 0.04rem;
237 |     border-radius: 5px;
238 |     color: #fff;
239 |     font-size: 0.8em;
240 |     margin-right: -1em;
241 |     transition: right ease 200ms;
242 |   }
243 | }
244 | </style>
245 | 
246 | 


--------------------------------------------------------------------------------
/src/assets/dice.svg:
--------------------------------------------------------------------------------
1 | <svg height="511pt" viewBox="0 0 511 511.97524" width="511pt" xmlns="http://www.w3.org/2000/svg"><path d="m351.183594 363.863281-128.339844 132.09375c-4.59375 4.730469-10.902344 7.398438-17.496094 7.398438-6.589844 0-12.902344-2.667969-17.492187-7.398438l-128.257813-132.09375c-9.726562-10.035156-9.726562-25.980469 0-36.011719l128.257813-132.097656c1.503906-1.578125 3.230469-2.925781 5.121093-4.011718 9.664063-5.832032 22.082032-4.164063 29.867188 4.011718l7.59375 7.851563 76.882812 77.996093v1.023438l43.863282 45.226562c9.644531 10.066407 9.644531 25.945313 0 36.011719zm0 0" fill="#c52828"/><path d="m325.582031 363.347656-128.339843 132.097656c-1.503907 1.578126-3.230469 2.929688-5.121094 4.011719-1.550782-1-2.984375-2.171875-4.265625-3.5l-128.257813-132.09375c-9.726562-10.035156-9.726562-25.980469 0-36.011719l128.257813-132.097656c1.503906-1.578125 3.230469-2.925781 5.121093-4.011718 1.550782 1 2.984376 2.171874 4.265626 3.5l7.59375 7.851562 76.886718 77.996094v1.023437l43.859375 45.226563c9.644531 10.066406 9.644531 25.941406 0 36.007812zm0 0" fill="#f44335"/><path d="m166.09375 312.746094c-6.664062 6.660156-17.46875 6.65625-24.128906-.007813-6.664063-6.664062-6.664063-17.46875 0-24.132812 6.660156-6.664063 17.464844-6.667969 24.128906-.007813 3.207031 3.199219 5.007812 7.542969 5.007812 12.074219s-1.800781 8.875-5.007812 12.074219zm0 0" fill="#37474f"/><path d="m218.457031 347.007812c0 9.429688-7.644531 17.074219-17.078125 17.074219-9.429687 0-17.074218-7.644531-17.074218-17.074219 0-9.429687 7.644531-17.074218 17.074218-17.074218 9.433594 0 17.078125 7.644531 17.078125 17.074218zm0 0" fill="#37474f"/><path d="m260.390625 405.417969c-6.648437 6.644531-17.421875 6.644531-24.066406 0s-6.644531-17.417969 0-24.0625 17.417969-6.644531 24.066406 0c3.230469 3.167969 5.054687 7.503906 5.054687 12.03125 0 4.527343-1.824218 8.863281-5.054687 12.03125zm0 0" fill="#37474f"/><path d="m256.035156 42.667969h187.734375c14.140625 0 25.601563 11.460937 25.601563 25.597656v187.734375c0 14.136719-11.460938 25.601562-25.601563 25.601562h-187.734375c-14.136718 0-25.597656-11.464843-25.597656-25.601562v-187.734375c0-14.136719 11.460938-25.597656 25.597656-25.597656zm0 0" fill="#283593"/><path d="m256.035156 42.667969h162.136719c14.136719 0 25.597656 11.460937 25.597656 25.597656v187.734375c0 14.136719-11.460937 25.601562-25.597656 25.601562h-162.136719c-14.136718 0-25.597656-11.464843-25.597656-25.601562v-187.734375c0-14.136719 11.460938-25.597656 25.597656-25.597656zm0 0" fill="#3f51b5"/><g fill="#37474f"><path d="m324.304688 93.867188c0 9.425781-7.640626 17.066406-17.066407 17.066406s-17.066406-7.640625-17.066406-17.066406c0-9.425782 7.640625-17.066407 17.066406-17.066407s17.066407 7.640625 17.066407 17.066407zm0 0"/><path d="m324.304688 162.132812c0 9.425782-7.640626 17.066407-17.066407 17.066407s-17.066406-7.640625-17.066406-17.066407c0-9.425781 7.640625-17.066406 17.066406-17.066406s17.066407 7.640625 17.066407 17.066406zm0 0"/><path d="m324.304688 230.398438c0 9.425781-7.640626 17.066406-17.066407 17.066406s-17.066406-7.640625-17.066406-17.066406c0-9.425782 7.640625-17.066407 17.066406-17.066407s17.066407 7.640625 17.066407 17.066407zm0 0"/><path d="m409.636719 93.867188c0 9.425781-7.640625 17.066406-17.066407 17.066406-9.425781 0-17.066406-7.640625-17.066406-17.066406 0-9.425782 7.640625-17.066407 17.066406-17.066407 9.425782 0 17.066407 7.640625 17.066407 17.066407zm0 0"/><path d="m409.636719 162.132812c0 9.425782-7.640625 17.066407-17.066407 17.066407-9.425781 0-17.066406-7.640625-17.066406-17.066407 0-9.425781 7.640625-17.066406 17.066406-17.066406 9.425782 0 17.066407 7.640625 17.066407 17.066406zm0 0"/><path d="m409.636719 230.398438c0 9.425781-7.640625 17.066406-17.066407 17.066406-9.425781 0-17.066406-7.640625-17.066406-17.066406 0-9.425782 7.640625-17.066407 17.066406-17.066407 9.425782 0 17.066407 7.640625 17.066407 17.066407zm0 0"/></g><path d="m53.480469 369.808594 128.230469 132.078125c6.171874 6.445312 14.703124 10.089843 23.625 10.089843 8.921874 0 17.453124-3.644531 23.625-10.089843l128.367187-132.09375c12.792969-13.398438 12.792969-34.484375 0-47.882813l-30.839844-31.777344h117.28125c18.851563 0 34.132813-15.28125 34.132813-34.132812v-187.734375c0-18.851563-15.28125-34.132813-34.132813-34.132813h-187.734375c-18.851562 0-34.132812 15.28125-34.132812 34.132813v116.140625c-12.992188-7.878906-29.722656-5.628906-40.175782 5.402344l-128.203124 132.058594c-12.953126 13.347656-12.972657 34.570312-.042969 47.941406zm185.488281-301.542969c0-9.425781 7.640625-17.066406 17.066406-17.066406h187.734375c9.425781 0 17.066407 7.640625 17.066407 17.066406v187.734375c0 9.425781-7.640626 17.066406-17.066407 17.066406h-187.734375c-9.425781 0-17.066406-7.640625-17.066406-17.066406zm-173.226562 265.53125 128.25-132.113281c3.003906-3.023438 7.09375-4.726563 11.359374-4.726563 4.265626 0 8.355469 1.703125 11.363282 4.726563l5.1875 5.371094v48.945312c0 18.851562 15.28125 34.132812 34.132812 34.132812h46.679688l42.359375 43.675782c6.4375 6.746094 6.4375 17.359375 0 24.105468l-128.367188 132.113282c-3.003906 3.03125-7.09375 4.738281-11.363281 4.738281-4.265625 0-8.359375-1.707031-11.363281-4.738281l-128.238281-132.121094c-6.511719-6.71875-6.511719-17.390625 0-24.109375zm0 0"/><path d="m153.988281 326.238281c10.347657-.007812 19.675781-6.242187 23.636719-15.804687 3.960938-9.558594 1.773438-20.5625-5.539062-27.886719-8.191407-8.199219-20.871094-9.875-30.90625-4.082031-10.039063 5.792968-14.933594 17.609375-11.933594 28.800781 3 11.195313 13.148437 18.980469 24.742187 18.972656zm-6.035156-31.625c3.332031-3.332031 8.734375-3.332031 12.066406 0 3.324219 3.332031 3.324219 8.726563 0 12.058594-2.140625 2.21875-5.316406 3.105469-8.296875 2.324219-2.984375-.777344-5.316406-3.109375-6.097656-6.09375-.78125-2.980469.109375-6.15625 2.328125-8.296875zm0 0"/><path d="m183.257812 365.097656c10.019532 9.859375 26.117188 9.792969 36.054688-.148437 9.9375-9.941407 10-26.039063.140625-36.058594-10.128906-9.664063-26.066406-9.664063-36.195313 0-4.804687 4.800781-7.5 11.3125-7.5 18.105469 0 6.789062 2.695313 13.300781 7.5 18.101562zm12.0625-24.132812c3.335938-3.328125 8.734376-3.328125 12.066407 0 1.605469 1.601562 2.503906 3.773437 2.503906 6.039062s-.898437 4.4375-2.503906 6.039063c-3.375 3.222656-8.6875 3.222656-12.066407 0-1.601562-1.601563-2.5-3.773438-2.5-6.039063s.898438-4.4375 2.5-6.039062zm0 0"/><path d="m230.257812 411.496094c6.46875 6.464844 15.894532 8.992187 24.730469 6.625 8.835938-2.367188 15.734375-9.269532 18.101563-18.105469 2.367187-8.832031-.15625-18.261719-6.625-24.726563-10-10-26.210938-10-36.207032 0-10 9.996094-10 26.207032 0 36.207032zm12.074219-24.132813c3.332031-3.332031 8.734375-3.332031 12.066407 0 2.441406 2.4375 3.171874 6.109375 1.851562 9.296875-1.320312 3.191406-4.433594 5.269532-7.882812 5.269532-3.453126 0-6.566407-2.078126-7.886719-5.269532-1.320313-3.1875-.589844-6.859375 1.851562-9.296875zm0 0"/><path d="m307.238281 119.464844c14.136719 0 25.597657-11.460938 25.597657-25.597656 0-14.140626-11.460938-25.601563-25.597657-25.601563-14.140625 0-25.601562 11.460937-25.601562 25.601563 0 14.136718 11.460937 25.597656 25.601562 25.597656zm0-34.132813c4.710938 0 8.53125 3.820313 8.53125 8.535157 0 4.710937-3.820312 8.53125-8.53125 8.53125-4.714843 0-8.535156-3.820313-8.535156-8.53125 0-4.714844 3.820313-8.535157 8.535156-8.535157zm0 0"/><path d="m307.238281 187.734375c14.136719 0 25.597657-11.460937 25.597657-25.601563 0-14.136718-11.460938-25.597656-25.597657-25.597656-14.140625 0-25.601562 11.460938-25.601562 25.597656 0 14.140626 11.460937 25.601563 25.601562 25.601563zm0-34.132813c4.710938 0 8.53125 3.820313 8.53125 8.53125 0 4.714844-3.820312 8.535157-8.53125 8.535157-4.714843 0-8.535156-3.820313-8.535156-8.535157 0-4.710937 3.820313-8.53125 8.535156-8.53125zm0 0"/><path d="m307.238281 256c14.136719 0 25.597657-11.460938 25.597657-25.601562 0-14.136719-11.460938-25.597657-25.597657-25.597657-14.140625 0-25.601562 11.460938-25.601562 25.597657 0 14.140624 11.460937 25.601562 25.601562 25.601562zm0-34.132812c4.710938 0 8.53125 3.820312 8.53125 8.53125 0 4.714843-3.820312 8.535156-8.53125 8.535156-4.714843 0-8.535156-3.820313-8.535156-8.535156 0-4.710938 3.820313-8.53125 8.535156-8.53125zm0 0"/><path d="m392.570312 119.464844c14.136719 0 25.601563-11.460938 25.601563-25.597656 0-14.140626-11.464844-25.601563-25.601563-25.601563-14.140624 0-25.601562 11.460937-25.601562 25.601563 0 14.136718 11.460938 25.597656 25.601562 25.597656zm0-34.132813c4.710938 0 8.53125 3.820313 8.53125 8.535157 0 4.710937-3.820312 8.53125-8.53125 8.53125-4.714843 0-8.535156-3.820313-8.535156-8.53125 0-4.714844 3.820313-8.535157 8.535156-8.535157zm0 0"/><path d="m392.570312 187.734375c14.136719 0 25.601563-11.460937 25.601563-25.601563 0-14.136718-11.464844-25.597656-25.601563-25.597656-14.140624 0-25.601562 11.460938-25.601562 25.597656 0 14.140626 11.460938 25.601563 25.601562 25.601563zm0-34.132813c4.710938 0 8.53125 3.820313 8.53125 8.53125 0 4.714844-3.820312 8.535157-8.53125 8.535157-4.714843 0-8.535156-3.820313-8.535156-8.535157 0-4.710937 3.820313-8.53125 8.535156-8.53125zm0 0"/><path d="m392.570312 256c14.136719 0 25.601563-11.460938 25.601563-25.601562 0-14.136719-11.464844-25.597657-25.601563-25.597657-14.140624 0-25.601562 11.460938-25.601562 25.597657 0 14.140624 11.460938 25.601562 25.601562 25.601562zm0-34.132812c4.710938 0 8.53125 3.820312 8.53125 8.53125 0 4.714843-3.820312 8.535156-8.53125 8.535156-4.714843 0-8.535156-3.820313-8.535156-8.535156 0-4.710938 3.820313-8.53125 8.535156-8.53125zm0 0"/><path d="m477.902344 0h-42.664063c-4.714843 0-8.535156 3.820312-8.535156 8.535156 0 4.710938 3.820313 8.53125 8.535156 8.53125h42.664063c9.425781 0 17.066406 7.640625 17.066406 17.066406v42.667969c0 4.710938 3.820312 8.53125 8.535156 8.53125 4.710938 0 8.53125-3.820312 8.53125-8.53125v-42.667969c0-18.851562-15.28125-34.132812-34.132812-34.132812zm0 0"/><path d="m401.101562 17.066406c4.714844 0 8.535157-3.820312 8.535157-8.53125 0-4.714844-3.820313-8.535156-8.535157-8.535156h-8.53125c-4.714843 0-8.535156 3.820312-8.535156 8.535156 0 4.710938 3.820313 8.53125 8.535156 8.53125zm0 0"/><path d="m503.503906 102.398438c-4.714844 0-8.535156 3.820312-8.535156 8.535156v8.53125c0 4.714844 3.820312 8.535156 8.535156 8.535156 4.710938 0 8.53125-3.820312 8.53125-8.535156v-8.53125c0-4.714844-3.820312-8.535156-8.53125-8.535156zm0 0"/><path d="m40.636719 288.675781-30.171875 30.164063c-13.304688 13.339844-13.304688 34.929687 0 48.273437l30.171875 30.164063c2.144531 2.21875 5.316406 3.109375 8.300781 2.328125s5.3125-3.113281 6.09375-6.09375c.78125-2.984375-.109375-6.15625-2.328125-8.300781l-30.171875-30.171876c-6.664062-6.664062-6.664062-17.46875 0-24.132812l30.171875-30.164062c3.234375-3.351563 3.1875-8.671876-.101563-11.964844-3.292968-3.289063-8.613281-3.335938-11.964843-.101563zm0 0"/><path d="m64.769531 409.351562c-3.332031 3.332032-3.332031 8.734376 0 12.066407l6.035157 6.035156c3.347656 3.234375 8.667968 3.1875 11.960937-.105469 3.292969-3.292968 3.339844-8.613281.105469-11.960937l-6.035156-6.035157c-3.332032-3.332031-8.734376-3.332031-12.066407 0zm0 0"/><path d="m76.835938 276.597656 6.035156-6.03125c3.234375-3.347656 3.1875-8.671875-.105469-11.960937-3.292969-3.292969-8.613281-3.339844-11.960937-.105469l-6.035157 6.035156c-2.21875 2.140625-3.105469 5.3125-2.324219 8.296875.777344 2.984375 3.109376 5.3125 6.09375 6.09375 2.984376.78125 6.15625-.109375 8.296876-2.328125zm0 0"/></svg>


--------------------------------------------------------------------------------
/src/components/game.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <section class="game">
  3 |     <div class="form">
  4 |       <div class="form-group">
  5 |         <div>
  6 |           <div class="block"></div>
  7 |           <label>BET AMOUNT</label>
  8 |           <div class="input-amount-group">
  9 |             <div class="input-group">
 10 |               <img class="cocos-logo" :src="cocosbcxLogo" />
 11 |               <input v-model="cocos" />
 12 |             </div>
 13 |             <ul class="amount-rate">
 14 |               <li @click="setCOCOS(.5)">1/2</li>
 15 |               <li @click="setCOCOS(2)">2X</li>
 16 |               <li @click="setCOCOS()">MAX</li>
 17 |             </ul>
 18 |           </div>
 19 |         </div>
 20 |         <div class="payout">
 21 |           <label @click="logins">PAYOUT ON WIN</label>
 22 |           <div class="bet-cell">
 23 |             <img class="cocos-logo" :src="cocosbcxLogo" />
 24 |             <span>{{payWin}}</span>
 25 |           </div>
 26 |         </div>
 27 |       </div>
 28 |       <div class="info-container">
 29 |         <ul>
 30 |           <li>
 31 |             <label>ROLL UNDER TO WIN</label>
 32 |             <span>{{rollUnder}}</span>
 33 |           </li>
 34 |           <li>
 35 |             <label>PAYOUT</label>
 36 |             <span>{{Number(payOut).toFixed(2)}}x</span>
 37 |           </li>
 38 |           <li>
 39 |             <label>WIN CHANCE</label>
 40 |             <span>{{winChance}}%</span>
 41 |           </li>
 42 |         </ul>
 43 |       </div>
 44 |       <footer class="game-footer">
 45 |         <div class="currentCOCOS-container">
 46 |           <img class="cocos-logo" :src="cocosbcxLogo" />
 47 |           <span
 48 |             :class="{
 49 |               'animateUp': this.showUpAnimation, 
 50 |               'animateDown': this.showDownAnimation
 51 |             }"
 52 |             class="cocos-animation"
 53 |           >{{animationTxt}}</span>
 54 |           <span>{{Number(currentCOCOS).toFixed(4)}}</span>
 55 |         </div>
 56 |         <el-button v-if="account.name" @click="doAction" class="btn-action">{{actionTxt}}</el-button>
 57 |         <!-- <button
 58 |           v-else
 59 |           @click="login"
 60 |         class="btn-action">LOGIN</button>-->
 61 |         <div class="bet-balance">
 62 |           <img class="token-logo" :src="tokenLogo" />
 63 |           <span>0.0000</span>
 64 |         </div>
 65 |       </footer>
 66 |     </div>
 67 |     <dice-slider :max="96" :min="2" />
 68 |     <!-- <el-dialog width="30%" :visible.sync="showAbout">
 69 |       <p slot="title">How To Play</p>
 70 |       <ol>
 71 |         <li>1. Make sure you have an COCOS account. For more information on how to create one,</li>
 72 |         <li>
 73 |           2. If you haven’t already, download and install
 74 |           <a
 75 |             href="https://chrome.google.com/webstore/detail/cocospay/mgjkjldekfadimcmllpaeafokhdjjeig"
 76 |             target="_blank"
 77 |           >CocosPay</a>, an Cocos wallet that facilitates interaction between users and dApps.
 78 |         </li>
 79 |         <li>3. Set your BET AMOUNT. This is the amount of Cocos you will be wagering.</li>
 80 |         <li>4. Adjust the slider to change your chance of winning.</li>
 81 |         <li>5. Click ROLL DICE to place your bet.</li>
 82 |         <li>6. If your number is lower than your ROLL UNDER TO WIN number, you win!</li>
 83 |         <li>7. If you get a notice that your transaction failed, please check that you have enough CPU & bandwidth to make the transaction! Please use to make any changes to your account!</li>
 84 |       </ol>
 85 |     </el-dialog>-->
 86 |     <!-- <el-dialog width="30%" :visible.sync="showLogin">
 87 |       <p slot="title">Login Account</p>
 88 |       <label>UserName</label>
 89 |       <input type="text" name="user" id="login_username" />
 90 |       <br />
 91 |       <br />
 92 |       <label>Password</label>
 93 |       <input type="text" name="password" id="login_pwd" />
 94 |       <br />
 95 |       <br />
 96 |       <button @click="getCOCOS" class="btn-action">Refresh</button>
 97 |     </el-dialog>-->
 98 | 
 99 |     <!-- <el-dialog :visible.sync="showSocial">
100 |       <p slot="title">Join the COCOS Community</p>
101 |       <ul class="social-links">
102 |         <li @click="navigate('twitter')">
103 |           <font-awesome-icon :icon="['fab', 'twitter']" />
104 |         </li>
105 |         <li @click="navigate('github')">
106 |           <font-awesome-icon :icon="['fab', 'github']" />
107 |         </li>
108 |         <li @click="navigate('medium')">
109 |           <font-awesome-icon :icon="['fab', 'medium-m']" />
110 |         </li>
111 |         <li @click="navigate('discord')">
112 |           <font-awesome-icon :icon="['fab', 'discord']" />
113 |         </li>
114 |       </ul>
115 |     </el-dialog>-->
116 |   </section>
117 | </template>
118 | <script>
119 | import cocosbcxLogo from "@/assets/cocosbcx.png";
120 | import tokenLogo from "@/assets/bet-token.png";
121 | import eventHub from "@/utils/event";
122 | import createHash from "create-hash";
123 | import { mapState, mapMutations, mapActions } from "vuex";
124 | export default {
125 |   created() {},
126 |   async mounted() {
127 |     eventHub.$on("ROLLUNDER_CHANGE", rollUnder => (this.rollUnder = rollUnder));
128 |     eventHub.$on("REFRESH", REFRESH => {
129 |       this.CONNECT_COCOS();
130 |     });
131 |     eventHub.$on("GET_COCOS", GET_COCOS => {
132 |       this.getCOCOS();
133 |     });
134 |     this.CONNECT_COCOS();
135 |     this.getCOCOS();
136 |   },
137 |   data() {
138 |     return {
139 |       cocosbcxLogo,
140 |       tokenLogo,
141 |       cocos: 1,
142 |       rollUnder: 50,
143 |       currentCOCOS: 0,
144 |       timer: 0,
145 |       animationTxt: 0,
146 |       actionTxt: "ROLL DICE",
147 |       animating: false,
148 |       showUpAnimation: false,
149 |       showDownAnimation: false,
150 |       nh: []
151 |     };
152 |   },
153 |   computed: {
154 |     ...mapState(["account"])
155 |   },
156 |   methods: {
157 |     ...mapActions(["CONNECT_COCOS"]),
158 |     ...mapMutations(["SET_COCOS", "LOADING"]),
159 |     getCOCOS() {
160 |       if (typeof this.account.name !== "string") {
161 |         this.currentCOCOS = 0;
162 |         return;
163 |       }
164 |       this.$store.state.bcx
165 |         .queryAccountBalances({
166 |           assetId: "",
167 |           account: this.account.name
168 |         })
169 |         .then(res => {
170 |           console.log("---queryAccountBalances--", res);
171 |           if (res.code == 1) {
172 |             this.currentCOCOS = res.data.COCOS;
173 |             if (res.data.COCOS) {
174 |               this.SET_COCOS(res.data.COCOS);
175 |             }
176 |           }
177 |         });
178 |     },
179 | 
180 |     floor(value, decimals) {
181 |       return Number(Math.floor(value + "e" + decimals) + "e-" + decimals);
182 |     },
183 | 
184 |     maxBetAmount() {
185 |       return 10000;
186 |     },
187 | 
188 |     setCOCOS(rate) {
189 |       const { currentCOCOS } = this;
190 |       let cocos = rate ? this.cocos * rate : this.currentCOCOS;
191 |       switch (true) {
192 |         case cocos < 0.1:
193 |           cocos = 0.1;
194 |           break;
195 |         case cocos > currentCOCOS:
196 |           cocos = currentCOCOS;
197 |           break;
198 |         case cocos > this.maxBetAmount():
199 |           cocos = this.maxBetAmount();
200 |           break;
201 |       }
202 |       this.cocos = Number(cocos).toFixed(4);
203 |     },
204 | 
205 |     getClientSeed() {
206 |       let randomNumber = Math.floor(
207 |         Math.random() * Math.floor(Number.MAX_SAFE_INTEGER)
208 |       );
209 |       return createHash("sha1")
210 |         .update(this.account.name + Date.now() + randomNumber)
211 |         .digest("hex");
212 |     },
213 |     doAction() {
214 |       let maxAmount = this.maxBetAmount();
215 |       if (this.cocos > maxAmount) {
216 |         this.$notify({
217 |           title: "Bet Failed",
218 |           message:
219 |             "Bet Amount should not be more than " +
220 |             maxAmount.toFixed(4) +
221 |             " COCOS",
222 |           duration: 2000,
223 |           showClose: false,
224 |           type: "error"
225 |         });
226 |         return;
227 |       }
228 |       const minBetAmount = 0.1;
229 |       if (this.cocos < minBetAmount) {
230 |         this.$notify({
231 |           title: "Bet Failed",
232 |           message:
233 |             "Bet Amount should be more than " +
234 |             minBetAmount.toFixed(4) +
235 |             " COCOS",
236 |           duration: 2000,
237 |           showClose: false,
238 |           type: "error"
239 |         });
240 |         return;
241 |       }
242 |       this.$message.info("Waiting for node to confirm transfer...");
243 |       var self = this;
244 |       this.LOADING(true);
245 |       this.$store.state.bcx
246 |         .callContractFunction({
247 |           nameOrId: "contract.dicegame",
248 |           functionName: "bet",
249 |           valueList: [self.rollUnder, self.cocos]
250 |         })
251 |         .then(res => {
252 |           console.log(res);
253 |           if (res.code !== 1) {
254 |             this.LOADING(false);
255 |             this.$notify({
256 |               title: "Bet Failed",
257 |               message: res.message,
258 |               duration: 2000,
259 |               showClose: false,
260 |               type: "error"
261 |             });
262 |           } else {
263 |             if (res.data.length) {
264 |               this.LOADING(false);
265 |               let list = res.data[0];
266 |               if (list.contract_affecteds.length === 4) {
267 |                 let coin =
268 |                   list.contract_affecteds[list.contract_affecteds.length - 1]
269 |                     .result.aseet_amount;
270 |                 this.$notify({
271 |                   title: "Success",
272 |                   message: "You Win " + coin,
273 |                   duration: 2000,
274 |                   showClose: false,
275 |                   type: "success"
276 |                 });
277 |               } else {
278 |                 this.$notify({
279 |                   title: "Success",
280 |                   message: "You Lose",
281 |                   duration: 2000,
282 |                   showClose: false,
283 |                   type: "info"
284 |                 });
285 |               }
286 |             }
287 |             self.getCOCOS();
288 |           }
289 |         });
290 |       self.getCOCOS();
291 |     },
292 | 
293 |     logins() {
294 |       this.$store.state.bcx.getAccountInfo().then(res => {});
295 |     }
296 | 
297 |     // navigate(brand) {
298 |     //   switch (brand) {
299 |     //     case "twitter":
300 |     //       window.open("//twitter.com/dappPub");
301 |     //       break;
302 |     //     case "medium":
303 |     //       window.open("//medium.com/dapppub");
304 |     //       break;
305 |     //     case "github":
306 |     //       window.open("//github.com/dappub");
307 |     //       break;
308 |     //     case "discord":
309 |     //       window.open(
310 |     //         "//discordapp.com/channels/482077322070196225/487187255065313292"
311 |     //       );
312 |     //       break;
313 |     //   }
314 |     // }
315 |   },
316 | 
317 |   watch: {
318 |     account() {
319 |       this.getCOCOS();
320 |     },
321 |     animating() {
322 |       const { animating } = this;
323 |       if (!animating) {
324 |         clearInterval(this.timer);
325 |         this.actionTxt = "ROLL DICE";
326 |         return;
327 |       }
328 |       this.timer = setInterval(() => {
329 |         this.actionTxt = (Math.random() * 100).toFixed(0);
330 |       }, 100);
331 |     }
332 |   },
333 |   components: {
334 |     diceSlider: require("@/components/slider").default
335 |   },
336 |   computed: {
337 |     winChance() {
338 |       return this.rollUnder - 1;
339 |     },
340 | 
341 |     payOut() {
342 |       return 98 / this.winChance;
343 |     },
344 | 
345 |     payWin() {
346 |       return (this.cocos * this.payOut).toFixed(4);
347 |     },
348 | 
349 |     account() {
350 |       return this.$store.state.account;
351 |     }
352 |   }
353 | };
354 | </script>
355 | 
356 | <style scoped>
357 | .game {
358 |   background: #555;
359 |   background-size: contain;
360 |   padding: 60px 0;
361 | }
362 | 
363 | .form {
364 |   width: 655px;
365 |   border-radius: 5px;
366 |   font-size: 18px;
367 |   background-color: #4b4848;
368 |   margin: 0 auto 20px auto;
369 |   padding: 20px 30px;
370 | }
371 | 
372 | .form-group {
373 |   display: flex;
374 |   align-items: center;
375 | }
376 | 
377 | .form-group > div:last-child {
378 |   flex: 1;
379 | }
380 | 
381 | .amount-rate {
382 |   display: flex;
383 |   align-items: center;
384 | }
385 | 
386 | .amount-rate li {
387 |   color: #9b9fae;
388 |   font-size: 0.6em;
389 |   font-weight: 600;
390 | }
391 | 
392 | .payout {
393 |   margin-top: 0;
394 | }
395 | 
396 | .amount-rate li:not(:last-child) {
397 |   border-right: 2px solid #2f2f2f;
398 | }
399 | 
400 | .form-group {
401 |   margin-bottom: 20px;
402 | }
403 | 
404 | .form-group label {
405 |   color: #9b9fae;
406 |   font-weight: 600;
407 |   font-size: 0.6em;
408 |   margin-bottom: 0.75em;
409 |   display: block;
410 | }
411 | 
412 | .form-group input {
413 |   text-align: center;
414 |   border: none;
415 |   padding: 10px 12px;
416 |   borde-radius: 0.3em;
417 |   font-weight: 600;
418 |   letter-spacing: 0.2px;
419 |   font-size: 18px;
420 |   outline: none;
421 |   background-color: #4b4848;
422 |   width: 177px;
423 |   color: #fff;
424 | }
425 | 
426 | .input-amount-group {
427 |   display: flex;
428 |   align-items: center;
429 |   background-color: #3f3e3e;
430 |   padding: 2px;
431 |   border-radius: 0.3em;
432 |   margin-right: 30px;
433 |   height: 47px;
434 |   position: relative;
435 | }
436 | 
437 | .input-amount-group ul li {
438 |   cursor: pointer;
439 |   padding: 8px 15px;
440 | }
441 | 
442 | .input-amount-group ul li:hover {
443 |   background-color: #0000003f;
444 | }
445 | 
446 | .input-group {
447 |   flex: 1;
448 | }
449 | 
450 | .input-group input {
451 |   padding-left: 15px;
452 | }
453 | 
454 | .input-group .cocos-logo {
455 |   position: absolute;
456 |   left: 10px;
457 |   top: 12.5px;
458 | }
459 | 
460 | .info-container {
461 |   background-color: #3f3e3e;
462 |   padding: 20px;
463 | }
464 | 
465 | .info-container ul {
466 |   display: flex;
467 |   align-items: center;
468 |   justify-content: space-between;
469 | }
470 | 
471 | .info-container ul > li {
472 |   display: flex;
473 |   flex-direction: column;
474 |   align-items: center;
475 |   flex: 1;
476 | }
477 | 
478 | .info-container ul > li:not(:last-child) {
479 |   border-right: 2px solid #2f2f2f;
480 | }
481 | 
482 | .info-container ul > li > label {
483 |   color: #9b9fae;
484 |   font-weight: 600;
485 |   font-size: 0.12rem;
486 |   margin-bottom: 0.75em;
487 |   display: block;
488 | }
489 | 
490 | .info-container ul > li > span {
491 |   color: #fff;
492 |   font-size: 1.2em;
493 |   font-weight: 600;
494 |   letter-spacing: 0.5px;
495 | }
496 | 
497 | .bet-cell {
498 |   background-color: #3f3e3e;
499 |   border-radius: 0.3em;
500 |   height: 47px;
501 |   line-height: 47px;
502 |   text-align: center;
503 |   position: relative;
504 | }
505 | 
506 | .bet-cell > span {
507 |   color: #fff;
508 |   font-weight: 600;
509 | }
510 | 
511 | .bet-cell .cocos-logo {
512 |   position: absolute;
513 |   left: 10px;
514 |   top: 12.5px;
515 | }
516 | 
517 | .game-footer {
518 |   display: flex;
519 |   align-items: center;
520 |   justify-content: space-between;
521 |   margin-top: 20px;
522 | }
523 | 
524 | .game-footer > div {
525 |   flex: 1;
526 |   text-align: center;
527 |   color: #fff;
528 |   font-weight: 600;
529 | }
530 | 
531 | .btn-action {
532 |   outline: none;
533 |   letter-spacing: 3px;
534 |   font-weight: 600;
535 |   font-size: 18px;
536 |   background-color: #0191ee;
537 |   border-color: #0191ee;
538 |   cursor: pointer;
539 |   padding: 5px 2px;
540 |   line-height: 1.5;
541 |   border-radius: 3px;
542 |   color: #fff;
543 |   flex: 1;
544 | }
545 | 
546 | .cocos-logo {
547 |   height: 22px;
548 |   width: 26px;
549 | }
550 | 
551 | .cocos-lg {
552 |   width: 22px;
553 |   width: 26px;
554 |   margin-right: 5px;
555 |   vertical-align: middle;
556 | }
557 | 
558 | .token-logo {
559 |   width: 22px;
560 |   vertical-align: middle;
561 |   margin-right: 5px;
562 | }
563 | 
564 | .game >>> .el-dialog {
565 |   background-color: #4a4848;
566 | }
567 | 
568 | .game >>> .el-dialog__header {
569 |   font-weight: 700;
570 |   text-align: center;
571 |   line-height: 1.5;
572 |   letter-spacing: 0.5px;
573 |   color: #fff;
574 |   font-size: 1.25em;
575 | }
576 | 
577 | .game >>> .el-dialog__body {
578 |   color: #fff;
579 |   padding-top: 0;
580 |   font-weight: 700;
581 |   letter-spacing: 0.5px;
582 |   color: #fff;
583 |   font-size: 1em;
584 | }
585 | 
586 | .game >>> .el-dialog__body li,
587 | .game >>> .el-dialog__body p {
588 |   margin-bottom: 10px;
589 | }
590 | 
591 | .game >>> .el-dialog__body a {
592 |   color: #0191ee;
593 |   text-decoration: none;
594 | }
595 | 
596 | .game >>> .el-dialog__body a:hover {
597 |   text-decoration: underline;
598 | }
599 | 
600 | .social-links {
601 |   display: flex;
602 |   align-items: center;
603 |   justify-content: space-between;
604 |   padding: 0.3rem 0.3rem 0 0.3rem;
605 |   font-size: 1.2em;
606 | }
607 | 
608 | .social-links li {
609 |   border-radius: 50%;
610 |   padding: 10px;
611 |   cursor: pointer;
612 |   transition: background-color ease 200ms;
613 | }
614 | 
615 | .social-links li:hover {
616 |   background-color: #6c2ded;
617 | }
618 | 
619 | .bet-balance {
620 |   visibility: hidden;
621 | }
622 | 
623 | .currentCOCOS-container {
624 |   position: relative;
625 | }
626 | 
627 | .cocos-animation {
628 |   opacity: 0;
629 | 
630 |   position: absolute;
631 | }
632 | 
633 | .cocos-animation.animateUp {
634 |   animation: fadeOutUp 3s;
635 |   color: #02f292;
636 |   text-shadow: 0 0 5px #02f292;
637 | }
638 | 
639 | .cocos-animation.animateDown {
640 |   animation: fadeOutDown 1s;
641 |   color: #cd4263;
642 |   text-shadow: 0 0 5px #cd4263;
643 | }
644 | 
645 | @keyframes fadeOutUp {
646 |   from {
647 |     opacity: 1;
648 |   }
649 | 
650 |   to {
651 |     opacity: 0;
652 |     -webkit-transform: translate3d(0, -100%, 0);
653 |     transform: translate3d(0, -100%, 0);
654 |   }
655 | }
656 | 
657 | @keyframes fadeOutDown {
658 |   from {
659 |     opacity: 1;
660 |   }
661 | 
662 |   to {
663 |     opacity: 0;
664 |     -webkit-transform: translate3d(0, 100%, 0);
665 |     transform: translate3d(0, 100%, 0);
666 |   }
667 | }
668 | 
669 | @media screen and (max-width: 720px) {
670 |   .game {
671 |     background: #555;
672 |     background-size: contain;
673 |     padding: 0.6rem 0;
674 |   }
675 | 
676 |   .form {
677 |     width: 100%;
678 |     border-radius: 0.05rem;
679 |     font-size: 0.18rem;
680 |     background-color: #4b4848;
681 |     margin: 0 auto 0.2rem auto;
682 |     padding: 0.1rem 0.3rem;
683 |   }
684 | 
685 |   .form-group {
686 |     display: flex;
687 |     align-items: flex-start;
688 |     flex-direction: column;
689 |   }
690 | 
691 |   .form-group > div:last-child {
692 |     width: 5rem;
693 |   }
694 | 
695 |   .amount-rate {
696 |     display: flex;
697 |     align-items: center;
698 |   }
699 | 
700 |   .amount-rate li {
701 |     color: #9b9fae;
702 |     font-size: 0.6em;
703 |     font-weight: 600;
704 |   }
705 | 
706 |   .amount-rate li:not(:last-child) {
707 |     border-right: 2px solid #2f2f2f;
708 |   }
709 | 
710 |   .form-group {
711 |     margin-bottom: 0.2rem;
712 |   }
713 | 
714 |   .form-group label {
715 |     color: #9b9fae;
716 |     font-weight: 600;
717 |     font-size: 0.6em;
718 |     margin-bottom: 0.75em;
719 |     display: block;
720 |   }
721 | 
722 |   .form-group input {
723 |     text-align: center;
724 |     border: none;
725 |     padding: 0.1rem 0.2rem;
726 |     borde-radius: 0.3em;
727 |     font-weight: 600;
728 |     letter-spacing: 0.2px;
729 |     font-size: 0.18rem;
730 |     outline: none;
731 |     background-color: #4b4848;
732 |     width: 3rem;
733 |     color: #fff;
734 |   }
735 | 
736 |   .input-amount-group {
737 |     display: flex;
738 |     align-items: center;
739 |     background-color: #3f3e3e;
740 |     padding: 2px;
741 |     border-radius: 0.3em;
742 |     margin-right: 30px;
743 |     height: 47px;
744 |     width: 6.3rem;
745 |     position: relative;
746 |   }
747 | 
748 |   .input-amount-group ul li {
749 |     cursor: pointer;
750 |     padding: 8px 15px;
751 |   }
752 | 
753 |   .input-amount-group ul li:hover {
754 |     background-color: #0000003f;
755 |   }
756 | 
757 |   .input-group {
758 |     flex: 1;
759 |   }
760 | 
761 |   .input-group input {
762 |     padding-left: 15px;
763 |   }
764 | 
765 |   .input-group .cocos-logo {
766 |     position: absolute;
767 |     left: 10px;
768 |     top: 12.5px;
769 |   }
770 | 
771 |   .info-container {
772 |     background-color: #3f3e3e;
773 |     padding: 0.12rem;
774 |     width: 6.3rem;
775 |   }
776 | 
777 |   .info-container ul {
778 |     display: flex;
779 |     align-items: center;
780 |     justify-content: space-between;
781 |   }
782 | 
783 |   .info-container ul > li {
784 |     display: flex;
785 |     flex-direction: column;
786 |     align-items: center;
787 |     /* flex: 1; */
788 |   }
789 | 
790 |   .info-container ul > li:not(:last-child) {
791 |     border-right: 2px solid #2f2f2f;
792 |   }
793 | 
794 |   .info-container ul > li > label {
795 |     color: #9b9fae;
796 |     font-weight: 600;
797 |     font-size: 12px;
798 |     margin-bottom: 0.25rem;
799 |     display: block;
800 |   }
801 | 
802 |   .info-container ul > li > span {
803 |     color: #fff;
804 |     font-size: 0.12rem;
805 |     font-weight: 600;
806 |     letter-spacing: 0.5px;
807 |   }
808 | 
809 |   .bet-cell {
810 |     background-color: #3f3e3e;
811 |     border-radius: 0.3em;
812 |     height: 47px;
813 |     width: 6.3rem;
814 |     line-height: 47px;
815 |     text-align: center;
816 |     position: relative;
817 |   }
818 | 
819 |   .bet-cell > span {
820 |     color: #fff;
821 |     font-weight: 600;
822 |   }
823 | 
824 |   .bet-cell .cocos-logo {
825 |     position: absolute;
826 |     left: 10px;
827 |     top: 12.5px;
828 |   }
829 | 
830 |   .game-footer {
831 |     display: flex;
832 |     align-items: center;
833 |     justify-content: space-between;
834 |     margin-top: 20px;
835 |   }
836 | 
837 |   .game-footer > div {
838 |     flex: 1;
839 |     text-align: center;
840 |     color: #fff;
841 |     font-weight: 600;
842 |   }
843 | 
844 |   .btn-action {
845 |     outline: none;
846 |     letter-spacing: 3px;
847 |     font-weight: 600;
848 |     font-size: 14px;
849 |     background-color: #0191ee;
850 |     border-color: #0191ee;
851 |     cursor: pointer;
852 |     padding: 0.01rem 0.1rem;
853 |     line-height: 1.5;
854 |     border-radius: 0.03rem;
855 |     color: #fff;
856 |     flex: 1;
857 |   }
858 |   .currentCOCOS-container span {
859 |     line-height: 22px;
860 |   }
861 |   .payout {
862 |     margin-top: 0.3rem;
863 |   }
864 |   .cocos-logo {
865 |     height: 22px;
866 |     width: 26px;
867 |   }
868 | 
869 |   .cocos-lg {
870 |     width: 22px;
871 |     height: 22px;
872 |     margin-right: 5px;
873 |     vertical-align: middle;
874 |   }
875 | 
876 |   .token-logo {
877 |     width: 22px;
878 |     vertical-align: middle;
879 |     margin-right: 5px;
880 |   }
881 | 
882 |   .game >>> .el-dialog {
883 |     background-color: #4a4848;
884 |   }
885 | 
886 |   .game >>> .el-dialog__header {
887 |     font-weight: 700;
888 |     text-align: center;
889 |     line-height: 1.5;
890 |     letter-spacing: 0.5px;
891 |     color: #fff;
892 |     font-size: 1.25em;
893 |   }
894 | 
895 |   .game >>> .el-dialog__body {
896 |     color: #fff;
897 |     padding-top: 0;
898 |     font-weight: 700;
899 |     letter-spacing: 0.5px;
900 |     color: #fff;
901 |     font-size: 1em;
902 |   }
903 | 
904 |   .game >>> .el-dialog__body li,
905 |   .game >>> .el-dialog__body p {
906 |     margin-bottom: 10px;
907 |   }
908 | 
909 |   .game >>> .el-dialog__body a {
910 |     color: #0191ee;
911 |     text-decoration: none;
912 |   }
913 | 
914 |   .game >>> .el-dialog__body a:hover {
915 |     text-decoration: underline;
916 |   }
917 | 
918 |   .social-links {
919 |     display: flex;
920 |     align-items: center;
921 |     justify-content: space-between;
922 |     padding: 30px 30px 0 30px;
923 |     font-size: 1.2em;
924 |   }
925 | 
926 |   .social-links li {
927 |     border-radius: 50%;
928 |     padding: 10px;
929 |     cursor: pointer;
930 |     transition: background-color ease 200ms;
931 |   }
932 | 
933 |   .social-links li:hover {
934 |     background-color: #6c2ded;
935 |   }
936 | 
937 |   .bet-balance {
938 |     visibility: hidden;
939 |   }
940 | 
941 |   .currentCOCOS-container {
942 |     position: relative;
943 |     display: flex;
944 |   }
945 | 
946 |   .cocos-animation {
947 |     opacity: 0;
948 | 
949 |     position: absolute;
950 |   }
951 | 
952 |   .cocos-animation.animateUp {
953 |     animation: fadeOutUp 3s;
954 |     color: #02f292;
955 |     text-shadow: 0 0 5px #02f292;
956 |   }
957 | 
958 |   .cocos-animation.animateDown {
959 |     animation: fadeOutDown 1s;
960 |     color: #cd4263;
961 |     text-shadow: 0 0 5px #cd4263;
962 |   }
963 | }
964 | </style>
965 | 
966 | 


--------------------------------------------------------------------------------