From 2e3485c9d1f01327df9f192a74e572459e2f341c Mon Sep 17 00:00:00 2001 From: Jeremie Taboada Date: Fri, 5 Jun 2015 02:15:45 +0100 Subject: Continue UI integration. --- cao-mobile.css | 8 +++--- cao-mobile.html | 75 ++++++++--------------------------------------------- cao-mobile.js | 80 +++++++++++++++++++++++++++++++++++---------------------- 3 files changed, 64 insertions(+), 99 deletions(-) diff --git a/cao-mobile.css b/cao-mobile.css index 717b7f3..f840dcd 100644 --- a/cao-mobile.css +++ b/cao-mobile.css @@ -78,17 +78,17 @@ button.card:not(.active) { button.card:hover { opacity: 1.0; } -div.card-list.read-only > button.card { +button.card.read-only { cursor: default; } -div.card-list.read-only > button.card:hover { +button.card.read-only:hover { opacity: 0.7; } -div.card-list.read-only > button.card:active { +button.card.read-only:active { transform: none; box-shadow: 0 5px 0 #999; } -div.card-list.read-only > button.card.black:active { +button.card.read-only.black:active { box-shadow: 0 5px 0 #000; } .bottom { diff --git a/cao-mobile.html b/cao-mobile.html index c775628..81e20a7 100644 --- a/cao-mobile.html +++ b/cao-mobile.html @@ -11,77 +11,24 @@
-
- Leave this room +

Cards Against Humanity

A party game for horrible people.

-
-
- - - - - - - - - - +
+
+ +
You have 0 cards!
- -
-
-
- -
-
You have 2 cards!
-
- - - - - - - - - - -
- -
-
-
- - - - - - - - - - -
-
During high school, I never really fit in until I found _____ club..
-
-
-
- - - - - - - - - - -
-
Choose a card...
+
+ +
During high school, I never really fit in until I found _____ club..
+
Choose a card...
+
diff --git a/cao-mobile.js b/cao-mobile.js index 3946879..9294104 100644 --- a/cao-mobile.js +++ b/cao-mobile.js @@ -1,8 +1,21 @@ $(document).ready(function() { var $home = $("#home"); - var $become_judge = $("#become-judge"); + var $game = $("#game"); + var $become_judge = $('[data-state="become-judge"]'); + var $judge_collect = $('[data-state="judge-collect"]'); + var $judge_choose = $('[data-state="judge-choose"]'); + var $player_choose = $('[data-state="player-choose"]'); + var $leave_room = $('#leave-room'); + var $all = $("[data-state]"); var $join_btn = $("#join-btn"); var $become_judge_btn = $("#become-judge-btn"); + var $black_card = $("#black-card"); + var $played_card_number = $("#played-card-number"); + var $header = $("header"); + + $leave_room.click(function () { + window.location.reload(); + }); cao.on_socket_open = function() { $join_btn.show(); @@ -12,68 +25,73 @@ $(document).ready(function() { }; cao.on_join_game_ok = function() { + $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(); }); }; - cao.on_show_white_card = function(idx, desc) { - identifier = 'white_card_' + idx; - content = '
  • ' + desc + '
    • '; - - $('#white_cards').append(content); - - $('#' + identifier).dblclick(this.gen_callback_white_card(idx)); + cao.on_card_played = function(card_number) { + $played_card_number.text(($played_card_number.text() + 1).toString()); }; - cao.on_show_played_card = function(idx, desc) { - identifier = 'played_card_' + idx; - - content = '
  • ' + desc + '
    • '; - - $('#played_cards').append(content); - - $('#' + identifier).dblclick(this.gen_callback_played_card(idx)); + cao.on_show_white_card = function(idx, desc) { + var $white_cards = $('#white-cards'); + var identifier = 'white-card-' + idx; + var content = ''; + $white_cards.append(content); + $('#' + identifier).click(function () { + var $this = $(this); + if (!$this.hasClass("read-only")) { + if ($this.hasClass("active")) { + this.gen_callback_white_card(idx); + } else { + $white_cards.find("> .card").removeClass("active"); + $(this).addClass("active"); + } + } + }); }; + cao.on_show_played_card = cao.on_show_white_card; + cao.on_pick_black_card_ok = function() { - $('#btn_collect').show(); - $('#btn_pick_black').hide(); + $all.hide(); + $judge_collect.show(); }; cao.on_show_black_card = function(desc) { - $('#black_card').show(); - $('#black_card').html(desc); + $('#black-card').html(desc); }; cao.on_play_white_card_ok = function(idx) { - identifier = 'white_card_' + idx; - $('#' + identifier).remove(); + $('#white-card-' + identifier).remove(); }; cao.on_designate_card_ok = function() { - $('#played_cards').empty(); - $('#played_cards').hide(); - $('#black_card').hide(); - $('#btn_collect').hide(); - $('#btn_pick_black').show(); + // TODO }; cao.on_collect_cards_ok = function() { - $('#btn_collect').hide(); - $('#played_cards').show(); + $all.hide(); + $judge_choose.show(); }; cao.on_judge_designed = function() { - $('#btn_pick_black').hide(); + // TODO }; cao.on_judge_needed = function() { - $('#btn_pick_black').show(); + $all.hide(); + $become_judge.show(); }; cao.run(); -- cgit v1.2.3