Permalink
Browse files

added icons to top bar

  • Loading branch information...
1 parent 4d28e39 commit af70796fd28704141124163ea27119d3cbaa97b3 @nolastan committed Mar 29, 2012
Showing with 114 additions and 124 deletions.
  1. +3 −3 html5/controller.js
  2. +28 −50 html5/css/style.css
  3. +62 −56 html5/css/style.scss
  4. +19 −13 html5/index.html
  5. +1 −1 html5/sprites/brothers_icon.svg
  6. +1 −1 html5/sprites/money_icon.svg
View
@@ -42,9 +42,9 @@ function bidMeeting(){
};
function updateStatsBar() {
- $("#repCount").html(game.frat.rep);
- $("#cashCount").html(game.frat.cash);
- $("#brothersCount").html(game.frat.members.length);
+ $("#stats .rep .val").html(game.frat.rep);
+ $("#stats .cash .val").html(game.frat.cash);
+ $("#stats .brothers .val").html(game.frat.members.length);
}
View
@@ -1,4 +1,7 @@
@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
+.clear {
+ clear: both; }
+
body {
font-family: 'PT Sans Narrow', sans-serif; }
@@ -15,9 +18,7 @@ button, button.disabled:hover {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
- height: 3em;
- padding: 0 1em;
- margin-top: .7em; }
+ padding: .2em; }
button:hover {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ddd', endColorstr='#eee');
@@ -44,54 +45,31 @@ header h1 {
font-size: 1.5em;
margin: 0 .5ex; }
-#status {
- height: 3em;
- width: 100%;
- background-color: #E6E8A9;
- -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
- -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
- box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); }
- #status ul {
- height: 3em;
- display: block;
+nav {
+ padding: 0;
+ height: 50px;
+ -moz-box-shadow: 0px 0px 5px black;
+ -webkit-box-shadow: 0px 0px 5px black;
+ box-shadow: 0px 0px 5px black;
+ font-size: 200%; }
+ nav object {
+ max-width: 30px;
+ height: 30px; }
+ nav ul {
float: left; }
- #status ul li {
- display: inline-block; }
- #status #controls {
- width: 50%; }
- #status #controls li {
- margin-left: .5em; }
- #status #stats {
- width: 50%; }
- #status #stats li {
- width: 32%;
- /* height: 3em; */
- float: right;
- border-left: 1px solid #666;
- font-size: 1.7em;
- line-height: 1.3em;
- text-align: center;
- color: #fff;
- max-width: 150px; }
- #status #stats li label {
- display: block;
- width: 96%;
- padding-left: 5%;
- background-color: #fff;
- opacity: .4;
- font-size: .5em;
- line-height: 1em;
- font-weight: bold;
- text-align: left;
- color: #000; }
- #status #stats .val {
- /* font-size: 2em; */ }
- #status #stats li#rep {
- background-color: #93C28C; }
- #status #stats li#money {
- background-color: #2E5A5C; }
- #status #stats li#brothers {
- background-color: #9E352C; }
+ nav ul li {
+ height: 50px;
+ padding-top: 7px;
+ float: left;
+ margin: 0 .2em; }
+ nav ul#screens {
+ float: right; }
+ nav ul#stats {
+ margin-right: 10px;
+ float: right; }
+ nav ul#stats object {
+ margin-right: 5px;
+ margin-left: 10px; }
/* Canvas stuff */
#background {
View
@@ -11,6 +11,44 @@ $party_color: $yellow;
$study_color: $green;
$cs_color: $blue;
+@mixin gradient_inverse($color, $amount: 3%) {
+ background-image: linear-gradient(bottom, lighten($color, $amount), darken($color, $amount));
+ background-image: -o-linear-gradient(bottom, lighten($color, $amount), darken($color, $amount));
+ background-image: -moz-linear-gradient(bottom, lighten($color, $amount), darken($color, $amount));
+ background-image: -webkit-linear-gradient(bottom, lighten($color, $amount), darken($color, $amount));
+ background-image: -ms-linear-gradient(bottom, lighten($color, $amount), darken($color, $amount));
+ background-image: -webkit-gradient(linear, left bottom, left top, lighten($color, $amount), darken($color, $amount));
+}
+@mixin gradient($color, $amount: 3%) {
+ background-image: linear-gradient(bottom, darken($color, $amount), lighten($color, $amount));
+ background-image: -o-linear-gradient(bottom, darken($color, $amount), lighten($color, $amount));
+ background-image: -moz-linear-gradient(bottom, darken($color, $amount), lighten($color, $amount));
+ background-image: -webkit-linear-gradient(bottom, darken($color, $amount), lighten($color, $amount));
+ background-image: -ms-linear-gradient(bottom, darken($color, $amount), lighten($color, $amount));
+ background-image: -webkit-gradient(linear, left bottom, left top, darken($color, $amount), lighten($color, $amount));
+}
+
+@mixin shadow($width: 5px, $color: #000, $x: 0px, $y: 0px){
+ -moz-box-shadow: $x $y $width $color;
+ -webkit-box-shadow: $x $y $width $color;
+ box-shadow: $x $y $width $color;
+}
+
+@mixin inner-shadow($width: 5px, $color: #000, $x: 0px, $y: 0px){
+ -moz-box-shadow: inset $x $y $width $color;
+ -webkit-box-shadow: inset $x $y $width $color;
+ box-shadow: inset $x $y $width $color;
+}
+
+
+@mixin rounded-corner($radius){
+ -moz-border-radius: $radius;
+ -webkit-border-radius: $radius;
+}
+.clear{
+ clear:both;
+}
+
body{
font-family: 'PT Sans Narrow', sans-serif;
}
@@ -27,9 +65,7 @@ button, button.disabled:hover{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
- height: 3em;
- padding: 0 1em;
- margin-top:.7em;
+ padding: .2em;
}
button:hover{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ddd', endColorstr='#eee');
@@ -57,69 +93,39 @@ header h1{
font-size: 1.5em;
margin: 0 .5ex;
}
-#status{
- height: 3em;
- width:100%;
- background-color: #E6E8A9;
- -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
- -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
- box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
+
+nav{
+ $nav_height: 50px;
+ padding: 0;
+ height: $nav_height;
+ @include shadow();
+ font-size: 200%;
+ object{
+ max-width:30px;
+ height:30px;
+ }
ul{
- height: 3em;
- display:block;
float:left;
li{
- display:inline-block;
+ height: $nav_height;
+ padding-top:7px;
+ float:left;
+ margin: 0 .2em;
}
}
- #controls{
- width: 50%;
- }
- #controls li{
- margin-left: .5em;
- }
- #stats{
- width: 50%;
- }
- #stats li{
- width: 32%;
- /* height: 3em; */
+ ul#screens{
float:right;
- border-left: 1px solid #666;
- font-size: 1.7em;
- line-height: 1.3em;
- text-align:center;
- color: #fff;
- max-width:150px;
- }
- #stats li label{
- display:block;
- width:96%;
- padding-left:5%;
- background-color: #fff;
- opacity: .4;
- font-size: .5em;
- line-height: 1em;
- font-weight:bold;
- text-align:left;
- color: #000;
}
- #stats .val{
- /* font-size: 2em; */
- }
- #stats li#rep{
- background-color: #93C28C;
- }
- #stats li#money{
- background-color: #2E5A5C;
- }
- #stats li#brothers{
- background-color: #9E352C;
+ ul#stats{
+ margin-right: 10px;
+ object{
+ margin-right: 5px;
+ margin-left: 10px;
+ }
+ float:right;
}
}
-
-
/* Canvas stuff */
#background{
position:absolute;
View
@@ -43,22 +43,28 @@
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
- </head>
- <body>
- <header><h1>Frat House Tycoon</h1></header>
- <div id="status">
- <ul id="controls">
- <li><button id="run">Run</button></li>
+</head>
+<body>
+<header><h1>Frat House Tycoon</h1></header>
+<nav>
+ <ul id="controls">
+ <li><button id="run">Run</button></li>
<li><button id="normal">Normal</button></li>
<li><button id="fast">Fast</button></li>
<li><button id="skip">Skip</button></li>
- </ul>
- <ul id="stats">
- <li id="rep"><label>Reputation</label><span class="val" id="repCount">0</span></li>
- <li id="money"><label>Money</label><span class="val" id="moneyCount">0</span></li>
- <li id="brothers"><label>Brothers</label><span class="val" id="brothersCount">0</span> / <span id="bed_val">0</span></li>
- </ul>
- </div>
+ </ul>
+ <ul id="stats">
+ <li class="rep" title="Reputation"><object data="sprites/rep_icon.svg" type="image/svg+xml"></object><span class="val">0</span></li>
+ <li class="money" title="Money"><object data="sprites/money_icon.svg" type="image/svg+xml"></object><span class="val">0</span></li>
+ <li class="brothers" title="Brothers"><object data="sprites/brothers_icon.svg" type="image/svg+xml"></object><span class="val">0</span></li>
+ </ul>
+ <ul id="screens">
+ <li class="rush" title="Rush"><button><object data="sprites/rush_icon.svg" type="image/svg+xml"></object></button></li>
+ <li class="build" title="Build"><button><object data="sprites/build_icon.svg" type="image/svg+xml"></object></button></li>
+ <li class="buy" title="Shop"><button><object data="sprites/buy_icon.svg" type="image/svg+xml"></object></button></li>
+ </ul>
+</nav>
+
<div id="simulation">
<canvas id="canvas"></canvas>
<canvas id="background"></canvas>
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="20 10 80 80" enable-background="new 0 0 100 100" xml:space="preserve">
<path d="M60.541,28.82c0.532,2.353,1.176,4.893,1.301,7.342c0.033,0.654,0.072,1.512-0.201,2.07 c2.227,1.482,1.137,4.562-0.166,6.129c-0.469,0.562-1.535,1.26-1.773,1.957c-0.352,1.025-0.787,2.031-1.408,2.938 c-0.519,0.756-0.408,0.184-0.925,1.344c-0.35,1.576-0.881,5.145-0.13,6.61c0.986,1.921,3.146,3.137,4.934,4.159 c2.37,1.356,5.018,2.351,7.549,3.362c2.33,0.931,4.76,1.626,7.002,2.764c0.703,0.356,1.412,0.704,2.078,1.128 c0.537,0.342,1.438,0.869,1.566,1.559v5.424h-60.01l0.041-5.424c0.128-0.689,1.029-1.217,1.566-1.559 c0.666-0.424,1.375-0.771,2.078-1.128c2.242-1.138,4.673-1.833,7.002-2.764c2.531-1.012,5.178-2.006,7.549-3.362 c1.787-1.022,3.947-2.238,4.933-4.159c0.752-1.466,0.332-5.05-0.019-6.624l0,0c-0.601-0.389-1.016-1.594-1.357-2.197 c-0.359-0.637-0.648-1.324-1.086-1.914c-0.597-0.805-1.592-1.182-2.242-1.936c-0.434-0.502-0.619-1.124-0.834-1.74 c-0.257-0.736-0.131-1.334-0.246-2.161c-0.051-0.354,0.13-0.765,0.34-1.064c0.258-0.368,0.728-0.44,0.847-0.906 c0.147-0.577-0.177-1.253-0.239-1.823c-0.066-0.609-0.224-1.58-0.221-2.191c0.01-2.217-0.4-4.217,1.375-5.969 c0.624-0.614,1.333-1.145,2.01-1.699l0,0c0.26-0.828,1.507-1.338,2.236-1.616c0.947-0.36,1.943-0.562,2.914-0.851 c2.93-0.873,6.297-0.78,8.866,1.029c0.843,0.594,2.005,0.084,2.893,0.594C59.619,26.634,60.639,27.771,60.541,28.82z"/>
</svg>
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="0 -15 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path d="M49.701,40.913c0.552-0.154,1.069-0.347,1.557-0.573c0.487-0.229,0.895-0.498,1.215-0.809 c0.521-0.505,0.609-0.881,0.254-1.126c-0.353-0.246-1.159-0.463-2.424-0.652l-3.882,3.685c0.478-0.025,1.008-0.08,1.587-0.164 C48.584,41.188,49.15,41.069,49.701,40.913z"/>
<path d="M51.33,34.744l3.326-3.112c-0.423,0.013-0.866,0.057-1.334,0.132c-0.461,0.074-0.929,0.183-1.394,0.324 c-0.468,0.142-0.897,0.312-1.296,0.513c-0.398,0.2-0.742,0.434-1.027,0.698c-0.451,0.416-0.539,0.73-0.265,0.948 C49.621,34.462,50.283,34.629,51.33,34.744z"/>
<path d="M75.028,49.957c0.348,0,0.679-0.138,0.925-0.382l23.665-23.077c0.372-0.373,0.485-0.934,0.283-1.423 c-0.201-0.488-0.678-0.806-1.206-0.806h-72.69c-0.315,0-0.619,0.113-0.857,0.32L0.589,47.666c-0.41,0.357-0.557,0.932-0.366,1.441 c0.19,0.512,0.679,0.85,1.224,0.85H75.028z M37.502,38.996l5.334-0.042c-0.807,0.717-1.043,1.281-0.714,1.693 c0.333,0.415,1.015,0.679,2.053,0.792l4.264-3.989c-0.099-0.024-0.239-0.049-0.415-0.079c-0.183-0.029-0.383-0.054-0.605-0.078 c-0.79-0.114-1.547-0.25-2.264-0.408c-0.716-0.157-1.276-0.37-1.679-0.642c-0.407-0.268-0.591-0.607-0.554-1.016 c0.04-0.408,0.403-0.923,1.093-1.543c0.704-0.633,1.565-1.198,2.589-1.696c1.021-0.5,2.109-0.927,3.267-1.283 c1.157-0.358,2.354-0.646,3.591-0.864c1.235-0.219,2.432-0.367,3.584-0.445l1.565-1.466l2.194-0.087l-1.561,1.475 c1.043,0.026,1.957,0.115,2.739,0.268c0.786,0.156,1.376,0.387,1.775,0.694c0.403,0.309,0.583,0.705,0.548,1.189 c-0.035,0.485-0.361,1.066-0.984,1.747l-5.31,0.125c0.517-0.517,0.663-0.948,0.445-1.292c-0.221-0.343-0.749-0.502-1.595-0.478 l-3.596,3.398c0.26,0.032,0.521,0.064,0.794,0.096c0.272,0.033,0.551,0.073,0.847,0.118c1.581,0.224,2.668,0.521,3.273,0.887 c0.604,0.37,0.929,0.762,0.977,1.174c0.049,0.414-0.093,0.83-0.432,1.25c-0.342,0.42-0.678,0.793-1.01,1.123 c-0.295,0.288-0.801,0.653-1.527,1.093c-0.719,0.44-1.656,0.871-2.803,1.29c-1.15,0.416-2.499,0.786-4.046,1.105 c-1.551,0.318-3.312,0.505-5.276,0.561l-1.727,1.631l-2.263-0.021l1.733-1.622c-2.734-0.116-4.481-0.559-5.24-1.328 C35.812,41.565,36.125,40.458,37.502,38.996z"/>

0 comments on commit af70796

Please sign in to comment.