mobile: allow a player to select a card

Signed-off-by: Olivier Gayot <duskcoder@gmail.com>

2 files changed, 21 insertions, 11 deletions

diff --git a/cao-mobile.html b/cao-mobile.html
index 49f5dfa..232efb1 100644
--- a/cao-mobile.html
+++ b/cao-mobile.html
@@ -28,7 +28,7 @@
               </div>
               <div class="message">You have <span id="played-card-number">0</span> cards!</div>
           </div>
-          <div id="white-cards" class="card-list read-only"></div>
+          <div id="white-cards" class="card-list read-only" disabled='disabled'></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="player-choose">Choose a card...</div>
diff --git a/cao-mobile.js b/cao-mobile.js
index 2db978f..963f9e0 100644
--- a/cao-mobile.js
+++ b/cao-mobile.js
@@ -24,11 +24,12 @@ $(document).ready(function() {
         cao.pick_black_card();
     });
 
+    $join_btn.click(function () {
+        cao.join_game(prompt('Name of the game'));
+    });
+
     cao.on_socket_open = function() {
         $join_btn.show();
-        $join_btn.on("click", function () {
-            cao.join_game(prompt('Name of the game'));
-        });
     };
 
     cao.on_join_game_ok = function() {
@@ -50,15 +51,19 @@ $(document).ready(function() {
                     $judge_choose.show();
                 } else {
                     $player_wait.show();
-                    $white_cards.addClass("read-only");
+                    $white_cards.attr('disabled', true);
+                    $white_cards.addClass('read-only');
                 }
                 break;
             case 'waiting_collection':
                 if (cao.is_judge()) {
                     $judge_collect.show();
+                    $white_cards.attr('disabled', true);
+                    $white_cards.addClass('read-only');
                 } else {
                     $player_choose.show();
-                    $white_cards.removeClass("read-only");
+                    $white_cards.removeAttr('disabled');
+                    $white_cards.removeClass('read-only');
                 }
                 break;
             default:
@@ -69,17 +74,17 @@ $(document).ready(function() {
 
     cao.on_show_white_card = function(idx, desc) {
         var identifier = 'white-card-' + idx;
-        var content = '<button class="read-only card" id="' + identifier + '">' + desc + '</button>';
+        var content = '<button name="' + idx + '" class="read-only card" id="' + identifier + '">' + desc + '</button>';
         $white_cards.append(content);
         var self = this;
         $('#' + identifier).click(function () {
             var $this = $(this);
-            if (!$white_cards.hasClass("read-only")) {
+            if (!$white_cards.attr('disabled')) {
                 if ($this.hasClass("active")) {
-                    self.gen_callback_white_card(idx);
+                    cao.get_white_card_event($this.prop('name'))();
                 } else {
                     $white_cards.find("> .card").removeClass("active");
-                    $(this).addClass("active");
+                    $this.addClass("active");
                 }
             }
         });
@@ -92,7 +97,12 @@ $(document).ready(function() {
     };
 
     cao.on_play_white_card_ok = function(idx) {
-        $('#white-card-' + identifier).remove();
+        $white_cards.attr('disabled', true);
+        $white_cards.addClass('read-only');
+
+        $player_wait.show();
+
+        $('#white-card-' + idx).remove();
     };
 
     cao.on_updated_score = function(score) {