diff options
| -rw-r--r-- | cao-mobile.css | 8 | ||||
| -rw-r--r-- | cao-mobile.html | 7 | ||||
| -rw-r--r-- | cao-mobile.js | 34 |
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() { |