diff options
| author | Olivier Gayot <duskcoder@gmail.com> | 2015-06-04 05:57:04 +0100 |
|---|---|---|
| committer | Olivier Gayot <duskcoder@gmail.com> | 2015-06-04 05:57:04 +0100 |
| commit | bce4fed55e552c870a82ec9ac3a415eda4ce231e (patch) | |
| tree | 683ad5b3c969c20eeafafac3ac999465877a3282 | |
| parent | 0cae8115a93589e37943590db45967beec841a07 (diff) | |
added the first version of the GUI
Signed-off-by: Olivier Gayot <duskcoder@gmail.com>
| -rw-r--r-- | game.html | 18 | ||||
| -rw-r--r-- | game.js | 158 | ||||
| -rw-r--r-- | style.css | 28 |
3 files changed, 203 insertions, 1 deletions
@@ -8,5 +8,23 @@ <script src="game.js"></script> </head> <body> + <button type="button" id="btn_join">Join a Game !</button> + <button type="button" id="btn_pick_black">Become the Judge</button> + <button type="button" id="btn_collect">Collect the Cards</button> + + <div id="black_card"> + </div> + <table id="white_cards"> + <tr><td class="card_desc"></td></tr> + <tr><td class="card_desc"></td></tr> + <tr><td class="card_desc"></td></tr> + <tr><td class="card_desc"></td></tr> + <tr><td class="card_desc"></td></tr> + <tr><td class="card_desc"></td></tr> + <tr><td class="card_desc"></td></tr> + <tr><td class="card_desc"></td></tr> + <tr><td class="card_desc"></td></tr> + <tr><td class="card_desc"></td></tr> + </table> </body> </html> @@ -1,15 +1,171 @@ $(document).ready(function() { - var ws = new WebSocket('ws://' + document.location.host + ':1236'); + request_queue = [] + var map_white_idx_row = {}; + + var ws = new WebSocket('ws://' + document.location.hostname + ':1236'); + + var self = this; ws.onopen = function() { + console.log('connection established'); + $('#btn_join').show(); }; ws.onclose = function() { }; ws.onmessage = function(evt) { + message = JSON.parse(evt.data); + + if (message['type'] == 'notification') { + handle_notification(message['content']); + } else { + handle_response(message['content']); + } + }; + + var handle_notification = function(msg) { + console.log('notification:'); + console.log(msg); + }; + + var handle_response = function(response) { + rq = request_queue.shift(); + + if (response['status'] != 0) { + alert(response['info']); + } + + switch (rq) { + case 'join_game': + console.log(response); + if (response['status'] != 0) { + break; + } + $('#btn_join').hide(); + $('#btn_pick_black').show(); + console.log('just joined the game'); + /* self.request_show_cards(); */ + /* XXX intentional fallback */ + case 'view_player_cards': + if (response['status'] == 0) { + $('#white_cards').show(); + for (i in response['result']) { + element = $('.card_desc').eq(i); + element.html(response['result'][i][1]); + element.dblclick(gen_callback_white_card(i)); + map_white_idx_row[response['result'][i][0]] = i; + } + } + break; + case 'pick_black_card': + if (response['status'] != 0) { + break; + } + $('#btn_collect').show(); + $('#btn_pick_black').hide(); + /* self.request_show_black_card(); */ + /* XXX intentional fallback */ + + case 'view_black_card': + if (response['status'] == 0) { + $('#black_card').show(); + $('#black_card').html(response['result']); + } + break; + case 'play_white_card': + if (response['status'] == 0) { + row = map_white_idx_row[response['result']['card_id']]; + + element = $('.card_desc').eq(row); + element.empty(); + element.dblclick(null) + } + break; + case 'collect_cards': + if (response['status'] != 0) { + break; + } + $('#btn_collect').hide(); + /* XXX intentional fallback */ + case 'view_played_cards': + if (response['status'] == 0) { + for (i in response['result']) { + console.log(response['result'][i]); + } + } + break; + default: + console.log(evt); + } }; ws.onerror = function(evt) { + alert(evt); + }; + + var gen_callback_white_card = function(index) { + return function() { + request = { + 'op': 'play_white_card', + 'card_id': index, + }; + + request_queue.push('play_white_card'); + ws.send(JSON.stringify(request)); + }; + }; + + $('#btn_join').click(function() { + game_name = prompt('Name of the game'); + + request = { + 'op': 'join_game', + 'game_name': game_name, + }; + request_queue.push('join_game'); + ws.send(JSON.stringify(request)); + }); + + $('#btn_pick_black').click(function() { + request = { + 'op': 'pick_black_card', + }; + request_queue.push('pick_black_card'); + ws.send(JSON.stringify(request)); + }); + + $('#btn_collect').click(function() { + request = { + 'op': 'collect_cards', + }; + request_queue.push('collect_cards'); + ws.send(JSON.stringify(request)); + }); + + this.request_show_cards = function() { + request = { + 'op': 'view_player_cards', + }; + + request_queue.push('view_player_cards'); + console.log(request); + ws.send(JSON.stringify(request)); + }; + this.request_show_black_card = function() { + request = { + 'op': 'view_black_card', + }; + + request_queue.push('view_black_card'); + ws.send(JSON.stringify(request)); + }; + this.request_show_played_cards = function() { + request = { + 'op': 'view_played_cards', + }; + + request_queue.push('view_played_cards'); + ws.send(JSON.stringify(request)); }; }); diff --git a/style.css b/style.css new file mode 100644 index 0000000..c6ecbe6 --- /dev/null +++ b/style.css @@ -0,0 +1,28 @@ +body { + background-color: #222222; + color: #dddddd; +} + +td { + border: 1px white solid; +} + +#black_card { + display: none; +} + +#white_cards { + display: none; +} + +#btn_join { + display: none; +} + +#btn_collect { + display: none; +} + +#btn_pick_black { + display: none; +} |