diff options
| -rw-r--r-- | cao-common.css | 4 | ||||
| -rw-r--r-- | cao-mobile.html | 5 | ||||
| -rw-r--r-- | cao-mobile.js | 39 |
3 files changed, 45 insertions, 3 deletions
diff --git a/cao-common.css b/cao-common.css index c6ecbe6..c574b6d 100644 --- a/cao-common.css +++ b/cao-common.css @@ -15,6 +15,10 @@ td { display: none; } +#played_cards { + display: none; +} + #btn_join { display: none; } diff --git a/cao-mobile.html b/cao-mobile.html index 232efb1..a9f8722 100644 --- a/cao-mobile.html +++ b/cao-mobile.html @@ -29,11 +29,12 @@ <div class="message">You have <span id="played-card-number">0</span> cards!</div> </div> <div id="white-cards" class="card-list read-only" disabled='disabled'></div> + <div id="played-cards" class="card-list read-only"></div> <button id="become-judge-btn" class="bottom" data-state="become-judge">Become judge!</button> - <div class="bottom" data-state="judge-choose"></div> + <div class="bottom" data-state="judge-choose">Pick the best card...</div> <div class="bottom" data-state="player-choose">Choose a card...</div> <div class="bottom" data-state="player-wait">Waiting for judge...</div> - <button class="bottom" data-state="judge-collect">Collect!</button> + <button id="judge-collect-btn" class="bottom" data-state="judge-collect">Collect!</button> </div> </body> </html> diff --git a/cao-mobile.js b/cao-mobile.js index 963f9e0..3a35b24 100644 --- a/cao-mobile.js +++ b/cao-mobile.js @@ -10,10 +10,12 @@ $(document).ready(function() { var $all = $("[data-state]"); var $join_btn = $("#join-btn"); var $become_judge_btn = $("#become-judge-btn"); + var $judge_collect_btn = $("#judge-collect-btn"); var $black_card = $("#black-card"); var $played_card_number = $("#played-card-number"); var $header = $("header"); var $white_cards = $('#white-cards'); + var $played_cards = $('#played-cards'); var $score_value = $('#score-value'); $leave_room.click(function () { @@ -28,6 +30,10 @@ $(document).ready(function() { cao.join_game(prompt('Name of the game')); }); + $judge_collect_btn.click(function() { + cao.collect_cards(); + }); + cao.on_socket_open = function() { $join_btn.show(); }; @@ -49,6 +55,8 @@ $(document).ready(function() { case 'waiting_designation': if (cao.is_judge()) { $judge_choose.show(); + $played_cards.removeAttr('disabled'); + $played_cards.removeClass('read-only'); } else { $player_wait.show(); $white_cards.attr('disabled', true); @@ -90,7 +98,23 @@ $(document).ready(function() { }); }; - cao.on_show_played_card = cao.on_show_white_card; + cao.on_show_played_card = function(idx, desc) { + var identifier = 'played-card-' + idx; + var content = '<button name="' + idx + '" class="read-only card" id="' + identifier + '">' + desc + '</button>'; + $played_cards.append(content); + var self = this; + $('#' + identifier).click(function () { + var $this = $(this); + if (!$played_cards.attr('disabled')) { + if ($this.hasClass("active")) { + cao.get_played_card_event($this.prop('name'))(); + } else { + $played_cards.find("> .card").removeClass("active"); + $this.addClass("active"); + } + } + }); + }; cao.on_show_black_card = function(desc) { $('#black-card').html(desc); @@ -113,5 +137,18 @@ $(document).ready(function() { $played_card_number.text(nbr); }; + cao.on_collect_cards_ok = function() { + $white_cards.hide(); + $played_cards.show(); + }; + + cao.on_designate_card_ok = function(idx) { + console.log('will remove : [' + idx + ']'); + $played_cards.empty(); + + $played_cards.hide(); + $white_cards.show(); + }; + cao.run(); }); |