123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150 |
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- <script src="https://cdn.jsdelivr.net/gh/dcodeIO/[email protected]/dist/protobuf.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/enc-utf8.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/aes.min.js"></script>
- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
- <script type="text/javascript">
- </script>
- </head>
- <style>
- .user {
- width: 500px;
- height: 500px;
- border: 1px solid #ccc;
- margin: 15px;
- padding: 15px;
- float: left;
- }
- .msg {
- padding: 15px;
- }
- .title {
- padding-bottom: 15px;
- }
- .room {
- width: 310px;
- }
- .room_title{
- text-align: center;
- }
- .chair_item{
- width: 60px;
- height: 60px;;
- float: left;
- text-align: center;
- line-height: 60px;
- background: #ccc;
- border: 1px solid #000;
- }
- .clear{
- clear: both;
- }
- </style>
- <body>
- <div class="user">
- <div class="title">模拟用户1</div>
- <div>
- <input type="button" value="离开房间" onclick="leave()" />
- <input type="button" value="准备" onclick="ready()" />
- <input type="button" value="取消准备" onclick="unready()" />
- <input type="button" value="抢庄" onclick="chooseMaster()" />
- <input type="button" value="选择倍数" onclick="chooseMul()" />
- <input type="button" value="开牌" onclick="openCard()" />
- </div>
- <div class="msg" id="msg1">
- </div>
- <div class="room">
- <div class="room_title">房1(3)</div>
- <div class="chair">
- <div class="chair_item" onclick="join(1, 1)"></div>
- <div class="chair_item" onclick="join(1, 2)"></div>
- <div class="chair_item" onclick="join(1, 3)"></div>
- <div class="chair_item" onclick="join(1, 4)"></div>
- <div class="chair_item" onclick="join(1, 5)"></div>
- </div>
- </div>
- <div class="room">
- <div class="room_title">房2(3)</div>
- <div class="chair">
- <div class="chair_item" onclick="join(2, 1)"></div>
- <div class="chair_item" onclick="join(2, 2)"></div>
- <div class="chair_item" onclick="join(2, 3)"></div>
- <div class="chair_item" onclick="join(2, 4)"></div>
- <div class="chair_item" onclick="join(2, 5)"></div>
- </div>
- </div>
- <div class="clear"></div>
- </div>
- <div>
- <label id="room_info"></label>
- </div>
- </body>
- </html>
- <script src="request.js"></script>
- <script src="api.js"></script>
- <script>
- var setRoomInfo = (msg) => {
- document.getElementById("room_info").innerText = msg
- }
- var token = getQueryVariable("token") || "8bc766ae05120ad091e8e52c29e23c1e"
- api.init(token, null)
- api.startWS()
- function join(roomID, chairID) {
- console.log(`enter join room:${roomID}-${chairID}`)
- api.joinRoom(roomID, chairID)
- }
- function leave() {
- console.log("leave room")
- api.leaveRoom()
- }
- function ready() {
- console.log("ready")
- api.ready()
- }
- function unready() {
- console.log("unready")
- api.ready()
- }
- function chooseMaster(){
- console.log("chooseMaster")
- api.chooseMaster(1)
- }
- function chooseMul(){
- console.log("chooseMul")
- api.chooseMul(1)
- }
- function openCard(){
- console.log("open")
- api.open()
- }
- </script>
|