Permalink
Browse files

[+] new game layout

  • Loading branch information...
1 parent e17a641 commit 0654d7fb927840be00cf22bd36e740a037fea01e @alarin alarin committed Jul 31, 2011
Showing with 275 additions and 199 deletions.
  1. +3 −1 setwithme/settings.py
  2. +216 −172 setwithme/static/css/base.css
  3. +20 −0 setwithme/static/js/base.js
  4. +36 −26 setwithme/templates/game/game_screen.html
View
4 setwithme/settings.py
@@ -210,8 +210,10 @@
except ImportError:
pass
+
CACHES = {
'default': {
- 'BACKEND': 'django.core.cache.backends.locmem.LocMemCache',
+ 'BACKEND': 'django.core.cache.backends.filebased.FileBasedCache',
+ 'LOCATION': '/var/tmp/django_cache',
}
}
View
388 setwithme/static/css/base.css
@@ -1,13 +1,26 @@
/* 0. Common tags */
+/* 1. Layout */
+/* 1.1 Header */
+/* 1.2 Footer */
+/* 1.3 Content */
+/* 2. Main page */
+/* 2.1 Stats container */
+/* 2.2 Login Container */
+/* 3. Cards */
+/* 4. Game */
+
+
+/* 0. Common tags */
html {
height: 100%;
}
body {
- font-family: Arial;
+ font-family: Arial, sans-serif;
font-size: 1em;
color: #FFF;
height: 100%;
+ min-width: 1000px;
}
p {
@@ -91,6 +104,7 @@ a.pseudo:hover {
.header .loginbox .stat {
margin: 1em 0 0 0;
}
+
/* 1.2 Footer */
.footer {
position: absolute;
@@ -122,6 +136,7 @@ a.pseudo:hover {
.footer .twitter {
float: left;
}
+
/* 1.3 Content */
.content {
background: #6f757a;
@@ -461,40 +476,28 @@ a.pseudo:hover {
}
/* 4. Game */
-.game .card_list {
- margin: 20px 0 40px 0;
- width: 550px;
- float: left;
+.game .header {
+ height: 90px;
+}
+.game .content .wrapper_width {
+ width: auto;
}
- .game .card_list .card {
- float: left;
- margin: 10px;
- -webkit-transition: border-color 0.1s ease-in;
- -o-transition: border-color 0.1s ease-in;
- -moz-transition: border-color 0.1s ease-in;
- position: relative;
- }
-
- .game .card_list.active .card:hover,
- .game .card_list .card.active {
- border-color: #464d53;
- cursor: pointer;
- }
- .game .card_list.active .card.vibrate:hover {
- border-color: #F1F1F1;
- }
+.game .inner_wrapper {
+ margin: 0 auto;
+ width: 90%;
+ min-width: 850px;
+ max-width: 1000px;
+ overflow: auto;
+}
-.game .bottom {
- margin: 1em 0 3em 0;
+.game .gamefield {
+ width: 600px;
overflow: hidden;
- clear: both;
}
-
.game .set_button {
width: 516px;
- margin: 40px 7px 0 7px;
- float: left;
+ margin: 40px auto 0 auto;
font-size: 1.5em;
}
.game .set_button.disabled {
@@ -515,154 +518,225 @@ a.pseudo:hover {
color: #fff;
text-shadow: none;
}
- .game .counts {
- font-family: 'Lobster', cursive;
- font-size: 1.5em;
- color: #434a50;
- text-shadow: 0 1px 1px #888e93;
- }
- .game .sets_count {
- position: absolute;
- top: 90px;
- left: 0px;
- margin: 0.5em 0 0 65px;
+ .game .card_list {
+ margin: 20px auto 40px auto;
+ overflow: hidden;
}
- .game .cards_left {
- margin: 0.5em 0 0 65px;
- position: absolute;
- top: 40px;
- left: 0px;
+ .game .card_list .card {
+ float: left;
+ margin: 10px;
+ -webkit-transition: border-color 0.1s ease-in;
+ -o-transition: border-color 0.1s ease-in;
+ -moz-transition: border-color 0.1s ease-in;
+ position: relative;
+ }
+
+ .game .card_list.active .card:hover,
+ .game .card_list .card.active {
+ border-color: #464d53;
+ cursor: pointer;
+ }
+
+ .game .card_list.active .card.vibrate:hover {
+ border-color: #F1F1F1;
+ }
+
+ .game .help_panel {
+ overflow: hidden;
+ height: 50px;
+ width: 850px;
+ margin: 10px auto 0 auto;
}
- .game .counts span {
- text-shadow: 0 1px 1px #888e93;
- border-radius: 25px;
- -moz-border-radius: 25px;
- padding: 5px 10px;
- background: #464d53;
- color: #777d81;
+ .game .help_panel li {
+ float: left;
+ margin: 0 30px;
+ }
+ .game .help_panel .rules, .game .help_panel .leavegame {
+ border-radius: 25px;
+ padding: 10px 20px;
+ display: block;
+ background: #464D53
+ }
+ .game .counts {
+ font-family: 'Lobster', cursive;
+ font-size: 1.5em;
+ color: #434a50;
+ text-shadow: 0 1px 1px #888e93;
+ margin: 5px 0 0 0;
+ }
+ .game .counts span {
+ text-shadow: 0 1px 1px #888e93;
+ border-radius: 25px;
+ -moz-border-radius: 25px;
+ padding: 5px 10px;
+ background: #464d53;
+ color: #777d81;
+ }
+ .game .delimeter {
+ background: #4D545A url(../images/bg.png);
+ border-top: 1px solid #848A8E;
+ border-bottom: 1px solid #848A8E;
+ height: 10px;
}
-.players {
- float: left;
- margin: 0 0 0 65px;
- color: #454c52;
- position: absolute;
- right: 0;
- top: 40px;
- width: 270px;
-}
-
-.players .player.idle {
- opacity: 0.6;
-}
-.players .player.lost {
- opacity: 0.2;
-}
-.players .player.left {
- opacity: 0.2;
+.gameinfo {
+ float: right;
+ margin: 40px 0 0 0;
}
+ .players {
+ color: #454c52;
+ width: 250px;
+ }
-.player {
- overflow: hidden;
- margin: 1em 0 0;
-}
-.player:first-child {
- margin-top: 0;
-}
-.player .info {
- float: left;
- margin-left: 15px;
- width: 170px;
- overflow: hidden;
-}
- .player .photo {
- float: left;
- border: 4px solid #454b51;
- border-radius: 5px;
- -moz-border-radius: 5px;
+ .players .player.idle {
+ opacity: 0.6;
}
- .player .photo div {
- width: 50px;
- height: 50px;
+ .players .player.lost {
+ opacity: 0.2;
}
- .player .photo img {
- margin: 0 auto;
+ .players .player.left {
+ opacity: 0.2;
}
- .player .name {
- font-family: 'Lobster', cursive;
- font-size: 1.1em;
- color: #454c52;
- text-decoration: none;
- margin: 0.5em 0 0 0;
- float: left;
- white-space: nowrap;
- text-overflow: ellipsis;
- max-width: 170px;
+
+ .player {
overflow: hidden;
+ margin: 1em 0 0;
}
- .player.set_pressed {
- color: #FFF;
- position: relative;
- left: -30px;
- width: 300px;
+ .player:first-child {
+ margin-top: 0;
}
- .player.set_pressed .name {
- color: #FFF;
+ .player .info {
+ float: left;
+ margin-left: 15px;
+ width: 170px;
+ overflow: hidden;
+ }
+ .player .photo {
+ float: left;
+ border: 4px solid #454b51;
+ border-radius: 5px;
+ -moz-border-radius: 5px;
}
- .player.set_pressed .photo {
- border-color: #FFF;
+ .player .photo div {
+ width: 50px;
+ height: 50px;
}
- .player.set_pressed .photo div {
- padding-left: 30px;
- background: #FFF no-repeat 5px 50% url(../images/set_vertical.png);
+ .player .photo img {
+ margin: 0 auto;
}
- .player.set_penalty {
- position: relative;
- left: -30px;
- width: 300px;
- }
- .player.set_penalty .name {
+ .player .name {
+ font-family: 'Lobster', cursive;
+ font-size: 1.1em;
+ color: #454c52;
+ text-decoration: none;
+ margin: 0.5em 0 0 0;
+ float: left;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ max-width: 170px;
+ overflow: hidden;
+ }
+ .player.set_pressed {
color: #FFF;
+ position: relative;
+ left: -30px;
+ width: 300px;
}
- .player.set_penalty .photo {
- border-color: #444b51;
+ .player.set_pressed .name {
+ color: #FFF;
+ }
+ .player.set_pressed .photo {
+ border-color: #FFF;
+ }
+ .player.set_pressed .photo div {
+ padding-left: 30px;
+ background: #FFF no-repeat 5px 50% url(../images/set_vertical.png);
+ }
+ .player.set_penalty {
+ position: relative;
+ left: -30px;
+ width: 300px;
}
- .player.set_penalty .photo div {
- padding-left: 30px;
- background: #444b51 no-repeat 5px 50% url(../images/set_vertical.png);
+ .player.set_penalty .name {
+ color: #FFF;
+ }
+ .player.set_penalty .photo {
+ border-color: #444b51;
+ }
+ .player.set_penalty .photo div {
+ padding-left: 30px;
+ background: #444b51 no-repeat 5px 50% url(../images/set_vertical.png);
+ }
+ .player .stats {
+ display: block;
+ clear: both;
+ margin: 0;
+ white-space: nowrap;
+ width: auto;
}
- .player .stats {
- display: block;
- clear: both;
- margin: 0;
- white-space: nowrap;
- width: auto;
- }
- .player .sets,
- .player .points,
- .player .failures {
- margin: 0.5em 0 0 0;
- font-size: 0.8em;
- display: inline;
- clear: both;
+ .player .sets,
+ .player .points,
+ .player .failures {
+ margin: 0.5em 0 0 0;
+ font-size: 0.8em;
+ display: inline;
+ clear: both;
+ }
+ .game .chat_container {
+ background: #454C52;
+ padding: 1em;
+ border-radius: 10px;
+ overflow: hidden;
+ width: 250px;
+ margin: 40px 0 0 0;
}
+ .game .chat_messages {
+ height: 15em;
+ font-size: 0.9em;
+ }
+ .game .chat_messages li {
+ margin: 0.5em 0;
+ }
+ .game .chat_container input.text {
+ margin: 2em 0 0 0;
+ width: 190px;
+ }
+ .game .chat_container h2 {
+ font-family: 'Lobster', cursive;
+ font-size: 1.5em;
+ margin: 0 0 0.5em 0;
+ }
+
+.game .hideall {
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ background: #454C52;
+ opacity: 0.6;
+}
.game .winner_plate {
display: none;
width: 500px;
height: 230px;
padding: 1em 2em;
position: absolute;
- top: 100px;
- left: 50px;
+ top: 200px;
+ left: 30%;
background: #454C52;
border: 5px solid white;
border-radius: 5px;
-moz-border-radius: 5px;
}
+/*.game .center {*/
+ /*position: absolute;*/
+ /**/
+/*}*/
.game .winner_plate h1 {
margin: 0;
}
@@ -681,34 +755,4 @@ a.pseudo:hover {
.game .share_game {
float: right;
margin-top: 60px;
-}
-
-.game .content .wrapper_width {
- width: 100%;
-}
-.game .chat_container {
- position: absolute;
- width: 230px;
- bottom: 50px;
- left: 600px;
- background: #454C52;
- padding: 1em;
- border-radius: 10px;
- overflow: hidden;
-}
- .game .chat_messages {
- height: 15em;
- font-size: 0.9em;
- }
- .game .chat_messages li {
- margin: 0.5em 0;
- }
- .game .chat_container input.text {
- margin: 2em 0 0 0;
- width: 190px;
- }
- .game .chat_container h2 {
- font-family: 'Lobster', cursive;
- font-size: 1.5em;
- margin: 0 0 0.5em 0;
- }
+}
View
20 setwithme/static/js/base.js
@@ -190,6 +190,7 @@ SetWithMe.Game = {
}
if (newStatus == this.statuses.GAME_END) {
+ $('#js_user_place').text('');
$('#p' + this._leader).clone().appendTo($('#js_user_place'));
this.uninit();
$('.winner_plate').show();
@@ -467,13 +468,31 @@ SetWithMe.Game = {
}
},
+ _updateCardsContainerWidth: function data(cards) {
+ //fix layout to cards
+ var $gf = $('.gamefield');
+ var baseWidth = parseInt($gf.css('width'));
+ var newWidth = 135 * Math.ceil(cards.length/3);
+
+ $gf.css('width', newWidth + 'px');
+
+ var $wr = $('.inner_wrapper');
+ var maxWrWidth = parseInt($wr.css('max-width')) + (newWidth-baseWidth);
+ var minWrWidth = parseInt($wr.css('min-width')) + (newWidth-baseWidth);
+ $wr.css('max-width', maxWrWidth + 'px');
+ $wr.css('min-width', minWrWidth + 'px');
+ },
+
/**
*
* @param {Object} data
*/
_onStatusReceived: function(data) {
if (this._cards) {
var changed = this._getChangedCards(data.cards);
+ if (!$.isEmptyObject(changed)) {
+ this._updateCardsContainerWidth(data.cards);
+ }
if (data.cards.length < this._cards.length) {
for (var i = 0; i < data.cards.length; i++) {
for (var j = 0; j < this._cards.length; j++) {
@@ -507,6 +526,7 @@ SetWithMe.Game = {
this._cards = data.cards;
}
} else {
+ this._updateCardsContainerWidth(data.cards);
this._cards = data.cards;
this._renderCards();
}
View
62 setwithme/templates/game/game_screen.html
@@ -16,30 +16,43 @@
{% endblock %}
{% block content %}
- <div class="counts cards_left"><span id="js_cards_left">81</span> cards left</div>
- <div class="counts sets_count"><span id="js_sets_count"></span> sets on desk</div>
-
- <div class="inner_width_wrapper">
- <a href="#" class="set_button big_button" id="js_set_button">
- <span class="label" id="js_set_button_label">Set!</span>
- <span class="timer" id="js_countdown"></span>
- </a>
-
- <ul id="js_cards" class="card_list"></ul>
- <div id="js_users"></div>
-
- <ul class="players" id="js_players"></ul>
-
- <div class="chat_container">
- <h2>Room chat</h2>
- <ul class="chat_messages" id="js_chatmessages"></ul>
- <form action="{% url chat.views.put_message game_id %}" method="POST" class="js_chat_message_form">
- {% csrf_token %}
- <input type="text" class="text" name="message" placeholder="{% trans 'Enter message here...' %}">
- <button type="submit">{% trans '→' %}</button>
- </form>
+ <div class="help_panel">
+ <ul>
+ <li><div class="counts cards_left"><span id="js_cards_left">81</span> cards left</div></li>
+ <li><div class="counts sets_count"><span id="js_sets_count">1</span> sets on desk</div></li>
+ <li><a class="leavegame" href="{% url leave_game game_id %}">Leave game</a></li>
+ <li><a class="rules" target="_blank" href="http://www.setgame.com/set/rules_set.htm">Rules</a></li>
+ </ul>
</div>
+ <div class="delimeter"></div>
+<div class="inner_wrapper">
+ <div class="gameinfo">
+ <ul class="players" id="js_players"></ul>
+
+ <div class="chat_container">
+ <h2>Room chat</h2>
+ <ul class="chat_messages" id="js_chatmessages"></ul>
+ <form action="{% url chat.views.put_message game_id %}" method="POST" class="js_chat_message_form">
+ {% csrf_token %}
+ <input type="text" class="text" name="message" placeholder="{% trans 'Enter message here...' %}">
+ <button type="submit">{% trans '→' %}</button>
+ </form>
+ </div>
+ </div>
+
+ <div class="gamefield">
+ <a href="#" class="set_button big_button" id="js_set_button">
+ <span class="label" id="js_set_button_label">Set!</span>
+ <span class="timer" id="js_countdown"></span>
+ </a>
+
+ <ul id="js_cards" class="card_list"></ul>
+ <div id="js_users"></div>
+ </div>
+
+ <div class="hideall"></div>
+ <div class="center">
<div class="winner_plate">
<h1>Game over. And winner is...</h1>
<div></div>
@@ -49,10 +62,7 @@
</div>
<a href="{% url lobby %}" class="playagain">Play one more time</a>
</div>
-
- <div>
- <a href="{% url leave_game game_id %}">Leave game</a>
- </div>
</div>
+</div>
{% endblock %}

0 comments on commit 0654d7f

Please sign in to comment.