euchre-live

Euchre web-app for the socially distant family
git clone git://git.alexkarle.com/euchre-live.git
Log | Files | Refs | README | LICENSE

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>