diff options
| -rw-r--r-- | cao-mobile.css | 8 | ||||
| -rw-r--r-- | cao-mobile.html | 75 | ||||
| -rw-r--r-- | 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 @@ </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(); |