summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJeremie Taboada <taboada.jeremie@gmail.com>2015-06-05 02:15:45 +0100
committerOlivier Gayot <duskcoder@gmail.com>2015-06-08 17:01:47 +0100
commit2e3485c9d1f01327df9f192a74e572459e2f341c (patch)
tree7f0a5972c4b239420bc519b51be4101cbf2dfe84
parent8e7b372fc355349b1013ff00573fd8c746e75679 (diff)
Continue UI integration.
Diffstat
-rw-r--r--cao-mobile.css8
-rw-r--r--cao-mobile.html75
-rw-r--r--cao-mobile.js80
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 @@
</head>
<body>
<div data-role="page">
- <header>
- <span>Leave this room</span>
+ <header hidden>
+ <span id="leave-room">Leave this room</span>
</header>
<div id="home" class="page current">
<h1>Cards Against Humanity</h1>
<h2>A party game for horrible people.</h2>
<button id="join-btn" class="bottom" hidden>Join game!</button>
</div>
- <div id="become-judge" class="page">
- <div class="card-list read-only">
- <button class="card">The female orgasm.</button>
- <button class="card">Coat hanger abortions.</button>
- <button class="card">Some god-damn peace and quiet.</button>
- <button class="card">Overpowering your father.</button>
- <button class="card">Alcoholism.</button>
- <button class="card">Count Chocula.</button>
- <button class="card">My sex dungeon.</button>
- <button class="card">24-hour media coverage.</button>
- <button class="card">Words, words, words.</button>
- <button class="card">A cop who is also a dog.</button>
+ <div id="game" class="page">
+ <div data-state="judge-collect">
+ <button id="black-card" class="card black read-only"></button>
+ <div class="message">You have <span id="played-card-number">0</span> cards!</div>
</div>
- <button class="bottom">Become judge!</button>
- </div>
- <div id="judge-collect" class="page">
- <div class="card-list read-only">
- <button class="card black">During high school, I never really fit in until I found _____ club.</button>
- </div>
- <div class="message">You have 2 cards!</div>
- <div class="card-list read-only">
- <button class="card">The female orgasm.</button>
- <button class="card">Coat hanger abortions.</button>
- <button class="card">Some god-damn peace and quiet.</button>
- <button class="card">Overpowering your father.</button>
- <button class="card">Alcoholism.</button>
- <button class="card">Count Chocula.</button>
- <button class="card">My sex dungeon.</button>
- <button class="card">24-hour media coverage.</button>
- <button class="card">Words, words, words.</button>
- <button class="card">A cop who is also a dog.</button>
- </div>
- <button class="bottom">Collect!</button>
- </div>
- <div id="judge-choice" class="page">
- <div class="card-list">
- <button class="card">The female orgasm.</button>
- <button class="card">Coat hanger abortions.</button>
- <button class="card">Some god-damn peace and quiet.</button>
- <button class="card">Overpowering your father.</button>
- <button class="card">Alcoholism.</button>
- <button class="card">Count Chocula.</button>
- <button class="card">My sex dungeon.</button>
- <button class="card">24-hour media coverage.</button>
- <button class="card">Words, words, words.</button>
- <button class="card">A cop who is also a dog.</button>
- </div>
- <div class="bottom">During high school, I never really fit in until I found _____ club..</div>
- </div>
- <div id="player-choice" class="page">
- <div class="card-list">
- <button class="card">The female orgasm.</button>
- <button class="card">Coat hanger abortions.</button>
- <button class="card">Some god-damn peace and quiet.</button>
- <button class="card">Overpowering your father.</button>
- <button class="card">Alcoholism.</button>
- <button class="card">Count Chocula.</button>
- <button class="card">My sex dungeon.</button>
- <button class="card">24-hour media coverage.</button>
- <button class="card">Words, words, words.</button>
- <button class="card">A cop who is also a dog.</button>
- </div>
- <div class="bottom">Choose a card...</div>
+ <div id="white-cards" class="card-list"></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>
+ <button class="bottom" data-state="judge-collect">Collect!</button>
</div>
</body>
</html>
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 = '<li id="' + identifier + '">' + desc + '</li>';
-
- $('#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 = '<li id="' + identifier + '">' + desc + '</li>';
-
- $('#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 = '<button class="read-only card" id="' + identifier + '">' + desc + '</button>';
+ $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();
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-24 17:06:53 +0000