debug.html (5549B) [raw]
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Euchre Live!!</title> 6 <style> 7 img.card { 8 width: 100px; 9 } 10 </style> 11 <link href="suits/H.svg" rel="icon" type="image/x-icon" /> 12 </head> 13 <body> 14 <div id="content"></div> 15 <script> 16 var host = window.location.host 17 var ws = new WebSocket('ws://' + host + '/play'); 18 var GAME_PHASE = '' 19 ws.onmessage = function (event) { 20 msg = JSON.parse(event.data); 21 if (msg.msg_type !== 'pong') { console.log(msg) } 22 23 if (msg.msg_type === 'game_state') { 24 GAME_PHASE = msg.game.phase; 25 gameState = '<br>Game: ' + msg.table_id + '<br>' + 26 'Players: ' + msg.game.players + '<br>' + 27 'Spectators: ' + msg.game.spectators + '<br>' + 28 'Game Phase: ' + msg.game.phase + '<br>' + 29 'Player Turn: ' + msg.game.turn + '<br>' + 30 'Dealer: ' + msg.game.dealer + '<br>' + 31 'Trump: ' + msg.game.trump + '<br>' + 32 'Tricks: ' + msg.game.tricks + '<br>' + 33 'Hand Lengths: ' + msg.game.hand_lengths + '<br>' + 34 'Score: ' + msg.game.score + '<br>' 35 36 if (typeof msg.game.trump_nominee !== 'undefined') { 37 gameState += 'Trump Nominee: ' + '<img class="card" src="cards/' + msg.game.trump_nominee + '.svg"><br>' 38 } 39 40 document.getElementById('hand').innerHTML = 'HAND: <br>' 41 if (msg.hand) { 42 for (var i = 0; i < msg.hand.length; i++) { 43 var c = msg.hand[i] 44 document.getElementById('hand').innerHTML += '<img onclick="play(' + "'" + c + "'" + ')" class="card" src="cards/' + c + '.svg">' 45 } 46 } 47 48 if (msg.game.table) { 49 document.getElementById('table').innerHTML = '' 50 for (var i = 0; i < msg.game.table.length; i++) { 51 var c = msg.game.table[i] 52 if (c === null) { 53 c = '2B' // show back 54 } 55 document.getElementById('table').innerHTML += '<img class="card" src="cards/' + c + '.svg">' 56 } 57 } else { 58 document.getElementById('table').innerHTML = 'No cards on table' 59 } 60 document.getElementById('game').innerHTML = gameState 61 } else if (msg.msg_type === 'error') { 62 document.getElementById('error').innerHTML += msg.msg + '<br>' 63 } else if (msg.msg_type === 'chat') { 64 document.getElementById('chat_box').innerHTML += msg.msg + '<br>' 65 //} else if (msg.msg_type === 'pong') { 66 // console.log('pong!'); 67 } 68 }; 69 70 function joinGame() { 71 uname = document.getElementById('username').value; 72 gname = document.getElementById('gamename').value; 73 pass = document.getElementById('password').value; 74 console.log('U: ' + uname + ' G: ' + gname); 75 ws.send(JSON.stringify({action:'join_table', player_name: uname, table: gname, password: pass})) 76 } 77 function sit() { 78 seat = document.getElementById('seat_no').value; 79 ws.send(JSON.stringify({action:'take_seat', seat: seat})) 80 } 81 function stand() { 82 ws.send(JSON.stringify({action:'stand_up'})) 83 } 84 function start_game() { 85 seat = document.getElementById('start_seat').value; 86 ws.send(JSON.stringify({action:'start_game', start_seat: seat})) 87 } 88 function vote(a) { 89 order_suit = document.getElementById('order_suit').value; 90 console.log(order_suit); 91 ws.send(JSON.stringify({action:'order', vote: order_suit, loner: a})) 92 } 93 function pass_kitty() { 94 ws.send(JSON.stringify({action:'order', vote: 'pass'})) 95 } 96 function play(card) { 97 if (GAME_PHASE === 'dealer_swap') { 98 ws.send(JSON.stringify({action:'dealer_swap', card: card})) 99 } else { 100 ws.send(JSON.stringify({action:'play_card', card: card})) 101 } 102 } 103 function chat() { 104 ws.send(JSON.stringify({action:'chat', msg: document.getElementById('chat').value })) 105 document.getElementById('chat').value = ''; 106 } 107 function leaveGame() { 108 ws.send(JSON.stringify({action:'leave_table'})) 109 } 110 111 window.setInterval(() => { ws.send(JSON.stringify({action:'ping'})) }, 5000); 112 </script> 113 <h1>Hello, World</h1> 114 115 <label for="username">Username:</label> 116 <input type="text" id="username"> 117 <label for="gamename">Game:</label> 118 <input type="text" id="gamename"> 119 <label for="password">Password:</label> 120 <input type="text" id="password"> 121 <button onclick="joinGame(0)">Join Game</button> 122 <button onclick="leaveGame()">Leave Game</button> 123 <br><br> 124 <label for="seat_no">Seat:</label> 125 <input type="number" id="seat_no"> 126 <button onclick="sit()">Sit</button> 127 <button onclick="stand()">Stand</button> 128 <br> 129 <button onclick="start_game()">Start Game</button> 130 <label for="start_seat">Start Seat:</label> 131 <input type="number" id="start_seat"> 132 <br> 133 134 <br><br> 135 <div id="game">Not in a game</div> 136 <br><br> 137 <div id="table">No cards on table</div> 138 <br> <br> 139 <div id="hand">No cards in hand</div> 140 <br> 141 <button onclick="vote(0)">Order</button> 142 <select id="order_suit"> 143 <option value="H">Hearts</option> 144 <option value="D">Diamonds</option> 145 <option value="S">Spades</option> 146 <option value="C">Clubs</option> 147 </select> 148 <button onclick="vote(1)">Loner</button> 149 <button onclick="pass_kitty()">Pass</button> 150 <br><br> 151 <div id="error" style="color:red"> </div> 152 <br><br> 153 <label for="chat">Chat:</label> 154 <input type="text" id="chat"> 155 <button onclick="chat()">Send</button> 156 <div id="chat_box"></div> 157 </body> 158 </html>