diff options
| author | Jeremie Taboada <taboada.jeremie@gmail.com> | 2015-06-05 01:14:41 +0100 |
|---|---|---|
| committer | Olivier Gayot <duskcoder@gmail.com> | 2015-06-08 17:01:45 +0100 |
| commit | d45704ef40f3fe68ab583a85674cea8a07d2e005 (patch) | |
| tree | dfac5ece20b182363ee1c4f898f43680466d36e8 | |
| parent | dc8e04f03cb6262d9796795273cd67854719d8d3 (diff) | |
Add UI and start integration.
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | cao-mobile.css | 125 | ||||
| -rw-r--r-- | cao-mobile.html | 77 | ||||
| -rw-r--r-- | cao-mobile.js | 74 | ||||
| l--------- | index.html | 2 | ||||
| -rw-r--r-- | ui.html | 206 |
6 files changed, 481 insertions, 4 deletions
@@ -1 +1,2 @@ __pycache__ +.idea diff --git a/cao-mobile.css b/cao-mobile.css new file mode 100644 index 0000000..717b7f3 --- /dev/null +++ b/cao-mobile.css @@ -0,0 +1,125 @@ +@import url(http://fonts.googleapis.com/css?family=Special+Elite); +body { + font-family: "Special Elite", sans-serif; + background: #333333; + color: #dddddd; +} +header { + background: #222222; + position: fixed; + top: 0; + left: 0; + right: 0; + height: 50px; + z-index: 1; + border-bottom: 4px solid #000; + padding: 20px; + box-sizing: border-box; + text-align: right; +} +header > span { + opacity: 0.7; + cursor: pointer; +} +header > span:hover { + opacity: 1; +} +.page { + padding: 70px 20px 170px; + margin: auto; + max-width: 650px; +} +.page:not(.current) { + display: none; +} +h1 { + font-weight: normal; + font-size: 4.5em; + text-align: center; + text-shadow: 0 5px 0 #000; +} +h2 { + text-align: center; + font-weight: normal; + color: #999999; + font-size: 2em; +} +button { + outline: none; + font-size: 2em; + width: 100%; + cursor: pointer; + font-family: "Special Elite", sans-serif; +} +button.card { + color: #222222; + background: #dddddd; + border: 4px solid #999; + box-shadow: 0 5px 0 #999; + padding: 20px; + border-radius: 10px; +} +button.card:not(:last-child) { + margin-bottom: 20px; +} +button.card:active, button.card.black:active { + transform: translateY(5px); + box-shadow: none; +} +button.card.black { + background: #222222; + color: #dddddd; + border: 4px solid #000; + box-shadow: 0 5px 0 #000; +} +button.card:not(.active) { + opacity: 0.7; +} +button.card:hover { + opacity: 1.0; +} +div.card-list.read-only > button.card { + cursor: default; +} +div.card-list.read-only > button.card:hover { + opacity: 0.7; +} +div.card-list.read-only > button.card:active { + transform: none; + box-shadow: 0 5px 0 #999; +} +div.card-list.read-only > button.card.black:active { + box-shadow: 0 5px 0 #000; +} +.bottom { + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 150px; + box-sizing: border-box; +} +div.bottom { + padding: 20px; + font-size: 1.5em; + background: #222222; + color: #dddddd; + border: 4px solid #000; +} +button.bottom { + font-size: 2.5em; + color: #dddddd; + border: 4px solid #0277BD; + background: #039BE5; + transition: .3s; +} +button.bottom:hover { + background: #0277BD; + font-size: 2.7em; +} +.message { + padding: 40px; + font-size: 2.5em; + text-align: center; + text-shadow: 0 5px 0 #000; +}
\ No newline at end of file diff --git a/cao-mobile.html b/cao-mobile.html index 6401473..c775628 100644 --- a/cao-mobile.html +++ b/cao-mobile.html @@ -4,13 +4,84 @@ <meta charset="utf-8"> <title>CAO</title> <link rel="stylesheet" href="cao-common.css"> - <script src="jquery.js"></script> + <link rel="stylesheet" href="cao-mobile.css"> + <script src="bower_components/jquery/dist/jquery.js"></script> <script src="cao-common.js"></script> <script src="cao-mobile.js"></script> </head> <body> <div data-role="page"> - <!-- TODO --> - </div> + <header> + <span>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> + <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> </body> </html> diff --git a/cao-mobile.js b/cao-mobile.js new file mode 100644 index 0000000..f639d1b --- /dev/null +++ b/cao-mobile.js @@ -0,0 +1,74 @@ +$(document).ready(function() { + cao.on_socket_open = function() { + var $joinBtn = $("#join-btn"); + $joinBtn.show(); + $joinBtn.on("click", function () { + cao.join_game(prompt('Name of the game')); + }); + }; + + cao.on_join_game_ok = function() { + $('#btn_join').hide(); + $('#btn_pick_black').show(); + $('#white_cards').show(); + }; + + 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_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_pick_black_card_ok = function() { + $('#btn_collect').show(); + $('#btn_pick_black').hide(); + }; + + cao.on_show_black_card = function(desc) { + $('#black_card').show(); + $('#black_card').html(desc); + }; + + + cao.on_play_white_card_ok = function(idx) { + identifier = 'white_card_' + idx; + $('#' + identifier).remove(); + }; + + cao.on_designate_card_ok = function() { + $('#played_cards').empty(); + $('#played_cards').hide(); + $('#black_card').hide(); + $('#btn_collect').hide(); + $('#btn_pick_black').show(); + }; + + cao.on_collect_cards_ok = function() { + $('#btn_collect').hide(); + $('#played_cards').show(); + }; + + cao.on_judge_designed = function() { + $('#btn_pick_black').hide(); + }; + + cao.on_judge_needed = function() { + $('#btn_pick_black').show(); + }; + + cao.run(); +}); @@ -1 +1 @@ -cao-desktop.html
\ No newline at end of file +cao-mobile.html
\ No newline at end of file @@ -0,0 +1,206 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" /> + <title>CAO</title> + <style> + @import url(http://fonts.googleapis.com/css?family=Special+Elite); + body { + font-family: "Special Elite", sans-serif; + background: #333333; + color: #dddddd; + } + header { + background: #222222; + position: fixed; + top: 0; + left: 0; + right: 0; + height: 50px; + z-index: 1; + border-bottom: 4px solid #000; + padding: 20px; + box-sizing: border-box; + text-align: right; + } + header > span { + opacity: 0.7; + cursor: pointer; + } + header > span:hover { + opacity: 1; + } + .page { + padding: 70px 20px 170px; + margin: auto; + max-width: 650px; + } + h1 { + font-weight: normal; + font-size: 4.5em; + text-align: center; + text-shadow: 0 5px 0 #000; + } + h2 { + text-align: center; + font-weight: normal; + color: #999999; + font-size: 2em; + } + button { + outline: none; + font-size: 2em; + width: 100%; + cursor: pointer; + font-family: "Special Elite", sans-serif; + } + button.card { + color: #222222; + background: #dddddd; + border: 4px solid #999; + box-shadow: 0 5px 0 #999; + padding: 20px; + border-radius: 10px; + } + button.card:not(:last-child) { + margin-bottom: 20px; + } + button.card:active, button.card.black:active { + transform: translateY(5px); + box-shadow: none; + } + button.card.black { + background: #222222; + color: #dddddd; + border: 4px solid #000; + box-shadow: 0 5px 0 #000; + } + button.card:not(.active) { + opacity: 0.7; + } + button.card:hover { + opacity: 1.0; + } + div.card-list.read-only > button.card { + cursor: default; + } + div.card-list.read-only > button.card:hover { + opacity: 0.7; + } + div.card-list.read-only > button.card:active { + transform: none; + box-shadow: 0 5px 0 #999; + } + div.card-list.read-only > button.card.black:active { + box-shadow: 0 5px 0 #000; + } + .bottom { + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 150px; + box-sizing: border-box; + } + div.bottom { + padding: 20px; + font-size: 1.5em; + background: #222222; + color: #dddddd; + border: 4px solid #000; + } + button.bottom { + font-size: 2.5em; + color: #dddddd; + border: 4px solid #0277BD; + background: #039BE5; + transition: .3s; + } + button.bottom:hover { + background: #0277BD; + font-size: 2.7em; + } + .message { + padding: 40px; + font-size: 2.5em; + text-align: center; + text-shadow: 0 5px 0 #000; + } + </style> +</head> +<body> + <header> + <span>Leave this room</span> + </header> + <div id="home" class="page"> + <h1>Cards Against Humanity</h1> + <h2>A party game for horrible people.</h2> + <button class="bottom">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> + <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> +</body> +</html> |