Continue implementation.

3 files changed, 34 insertions, 15 deletions

diff --git a/cao-mobile.css b/cao-mobile.css
index f840dcd..717b7f3 100644
--- a/cao-mobile.css
+++ b/cao-mobile.css
@@ -78,17 +78,17 @@ button.card:not(.active) {
 button.card:hover {
     opacity: 1.0;
 }
-button.card.read-only {
+div.card-list.read-only > button.card {
     cursor: default;
 }
-button.card.read-only:hover {
+div.card-list.read-only > button.card:hover {
     opacity: 0.7;
 }
-button.card.read-only:active {
+div.card-list.read-only > button.card:active {
     transform: none;
     box-shadow: 0 5px 0 #999;
 }
-button.card.read-only.black:active {
+div.card-list.read-only > button.card.black:active {
     box-shadow: 0 5px 0 #000;
 }
 .bottom {
diff --git a/cao-mobile.html b/cao-mobile.html
index 81e20a7..a52792b 100644
--- a/cao-mobile.html
+++ b/cao-mobile.html
@@ -21,13 +21,16 @@
       </div>
       <div id="game" class="page">
           <div data-state="judge-collect">
-              <button id="black-card" class="card black read-only"></button>
+              <div class="card-list read-only">
+                  <button id="black-card" class="card black"></button>
+              </div>
               <div class="message">You have <span id="played-card-number">0</span> cards!</div>
           </div>
-          <div id="white-cards" class="card-list"></div>
+          <div id="white-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">During high school, I never really fit in until I found _____ club..</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>
       </div>
   </body>
diff --git a/cao-mobile.js b/cao-mobile.js
index 9294104..692dab3 100644
--- a/cao-mobile.js
+++ b/cao-mobile.js
@@ -5,6 +5,7 @@ $(document).ready(function() {
     var $judge_collect = $('[data-state="judge-collect"]');
     var $judge_choose = $('[data-state="judge-choose"]');
     var $player_choose = $('[data-state="player-choose"]');
+    var $player_wait = $('[data-state="player-wait"]');
     var $leave_room = $('#leave-room');
     var $all = $("[data-state]");
     var $join_btn = $("#join-btn");
@@ -12,6 +13,7 @@ $(document).ready(function() {
     var $black_card = $("#black-card");
     var $played_card_number = $("#played-card-number");
     var $header = $("header");
+    var $white_cards = $('#white-cards');
 
     $leave_room.click(function () {
         window.location.reload();
@@ -24,17 +26,29 @@ $(document).ready(function() {
         });
     };
 
-    cao.on_join_game_ok = function() {
+    cao.on_join_game_ok = function(game_state) {
         $header.show();
         $home.removeClass("current");
         $become_judge.addClass("current");
         $become_judge_btn.on("click", function () {
         $game.addClass("current");
         $all.hide();
-        $become_judge.show();
-        $become_judge_btn.on("click", function() {
-            cao.pick_black_card();
-        });
+        switch (game_state) {
+            case "waiting_collection":
+                $player_choose.show();
+                $white_cards.removeClass("read-only");
+                break;
+            case "waiting_designation":
+                $player_wait.show();
+                $white_cards.addClass("read-only");
+                break;
+            case "waiting_judge":
+                $become_judge.show();
+                $become_judge_btn.on("click", function() {
+                    cao.pick_black_card();
+                });
+                break;
+        }
     };
 
     cao.on_card_played = function(card_number) {
@@ -42,15 +56,15 @@ $(document).ready(function() {
     };
 
     cao.on_show_white_card = function(idx, desc) {
-        var $white_cards = $('#white-cards');
         var identifier = 'white-card-' + idx;
         var content = '<button class="read-only card" id="' + identifier + '">' + desc + '</button>';
         $white_cards.append(content);
+        var self = this;
         $('#' + identifier).click(function () {
             var $this = $(this);
-            if (!$this.hasClass("read-only")) {
+            if (!$white_cards.hasClass("read-only")) {
                 if ($this.hasClass("active")) {
-                    this.gen_callback_white_card(idx);
+                    self.gen_callback_white_card(idx);
                 } else {
                     $white_cards.find("> .card").removeClass("active");
                     $(this).addClass("active");
@@ -86,7 +100,9 @@ $(document).ready(function() {
     };
 
     cao.on_judge_designed = function() {
-        // TODO
+        $all.hide();
+        $player_choose.show();
+        $white_cards.removeClass("read-only");
     };
 
     cao.on_judge_needed = function() {