style identity

seanhess · Nov 3, 2012 · 5a8d5fb · 5a8d5fb
1 parent 781369d
commit 5a8d5fb
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 54 deletions.
diff --git a/public/controllers/IdentifyCtrl.js b/public/controllers/IdentifyCtrl.js
@@ -24,7 +24,7 @@ function IdentifyCtrl($scope, Players, CurrentPlayer, $location, AppVersion) {
   $scope.players = players
 
   // available avatars
-  $scope.avatars = ['player1', 'player2', 'player3', 'player4', 'player5', 'player6']
+  $scope.avatars = ['player2', 'player5', 'player3','player1', 'player4', 'player6']
   $scope.freeAvatars = ['player1','player2']
   $scope.avatarIsFree = function (avatarName) {
     return ($scope.freeAvatars.indexOf(avatarName) != -1);

diff --git a/public/css/main.css b/public/css/main.css
@@ -25,7 +25,7 @@ html {
 }
 #game .logo {
   position: relative;
-  background: url("/images/brushed_alu_dark.png") #888;
+  background: #888;
   margin-bottom: 10px;
   padding: 4px;
   color: #fff;
@@ -43,7 +43,7 @@ html {
   padding-bottom: 5px;
 }
 #game .alerts .label {
-  background: url("/images/brushed_alu_dark.png") #888;
+  background: #888;
   padding: 5px;
   color: #fff;
 }
@@ -149,7 +149,7 @@ html {
 }
 .playerCard {
   position: relative;
-  background: url("/images/brushed_alu_dark.png") #888;
+  background: #888;
   padding: 10px;
   margin-bottom: 10px;
 }
@@ -165,6 +165,7 @@ html {
   height: 60px;
 }
 .playerCard .avatar {
+  margin-top: 5px;
   width: 50px;
   height: 50px;
 }
@@ -229,9 +230,7 @@ html {
   min-height: 600px;
 }
 #identify .upgrade-link {
-  float: left;
-  padding-top: 50px;
-  clear: both;
+  margin: 10px;
 }
 #identify .upgrade-button {
   -moz-box-shadow: inset 0px 1px 0px 0px #fff;
@@ -273,12 +272,6 @@ html {
   position: relative;
   top: 1px;
 }
-#identify .avatar {
-  float: left;
-  width: 50px;
-  height: 50px;
-  margin: 3px;
-}
 #identify .avatar.locked {
   opacity: 0.4;
   -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
@@ -300,7 +293,15 @@ html {
   opacity: 0;
   -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
   filter: alpha(opacity=0);
-  margin-left: 10px;
+  float: left;
+  width: 200px;
+  margin: 10px;
+  background-color: #333;
+}
+#identify .menu .join {
+  margin: 10px;
+  font-size: 40px;
+  width: 180px;
 }
 #identify .menu.show {
   opacity: 1;
@@ -311,30 +312,47 @@ html {
   font-size: 18px;
   color: #f33;
   font-weight: bold;
+  margin: 10px;
+}
+#identify .menu .avatarSelection {
+  margin: 10px;
 }
-#identify .menu .avatars .avatar:hover,
-#identify .menu .avatars .avatar.selected {
+#identify .menu .avatarSelection .avatar {
+  width: 50px;
+  height: 50px;
+  float: left;
+  margin: 3px;
+}
+#identify .menu .avatarSelection .avatar:hover,
+#identify .menu .avatarSelection .avatar.selected {
   border: solid 3px #faa;
   margin: 0;
 }
-#identify .menu .avatars .avatar.locked:hover,
-#identify .menu .avatars .avatar.locked.selected {
+#identify .menu .avatarSelection .avatar.locked:hover,
+#identify .menu .avatarSelection .avatar.locked.selected {
   border: none;
   margin: 3px;
 }
-#identify .menu .name {
+#identify .menu .playerNameInput {
   clear: both;
+  margin: 10px;
+  margin-bottom: 0px;
 }
-#identify .menu .name input {
+#identify .menu .playerNameInput input {
+  margin-top: 10px;
+  font-size: 15px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   padding-left: 5px;
   padding-right: 5px;
 }
-#identify .menu .players .player {
+#identify .menu .leaderboard {
   clear: both;
+  margin: 10px;
+  margin-left: 30px;
+  margin-bottom: 20px;
 }
 #identify .menu .gameId {
   position: absolute;

diff --git a/public/css/main.styl b/public/css/main.styl
@@ -1,6 +1,7 @@
 
 carbon = url(/images/carbon_fibre.png) #333
-aluminum = url(/images/brushed_alu_dark.png) #888
+//aluminum = url(/images/brushed_alu_dark.png) #888
+aluminum = #888
 
 body, html
   padding 0px
@@ -141,6 +142,7 @@ body, html
     margin-top 5px
     height 60px
   .avatar
+    margin-top 5px
     width 50px
     height 50px
   .score
@@ -197,11 +199,9 @@ body, html
   box-shadow(inset 0px 0px 50px 0px rgba(0, 0, 0, 0.8))
   margin 10px
   min-height 600px
-  
+
   .upgrade-link
-    float left
-    padding-top 50px
-    clear both
+    margin 10px
 
   .upgrade-button
     -moz-box-shadow inset 0px 1px 0px 0px #ffffff
@@ -238,13 +238,6 @@ body, html
     position relative
     top 1px
 
-
-  .avatar
-    float left
-    width 50px
-    height 50px
-    margin 3px
-
   .avatar.locked
     opacity 0.4
 
@@ -257,8 +250,16 @@ body, html
   .menu
     transition(all 500ms linear)
     opacity 0
+    float left
+    width 200px
 
-    margin-left 10px
+    margin 10px
+    background-color #333
+
+    .join
+      margin 10px
+      font-size 40px
+      width 180px
 
     &.show
       opacity 1
@@ -267,10 +268,15 @@ body, html
       font-size 18px
       color #F33
       font-weight bold
+      margin 10px
 
-
-    .avatars
+    .avatarSelection
+      margin 10px
       .avatar
+        width 50px
+        height 50px
+        float left
+        margin 3px
         &:hover, &.selected
           border solid 3px #FAA
           margin 0
@@ -280,19 +286,24 @@ body, html
           margin 3px
 
 
-    .name
+    .playerNameInput
       clear both
+      margin 10px
+      margin-bottom 0px
       input
+        margin-top 10px
+        font-size 15px
         -webkit-border-radius 10px
         -moz-border-radius 10px
         border-radius 10px
         padding-left 5px
         padding-right 5px
 
-    .players
-      .player
-        clear both
-
+    .leaderboard
+      clear both
+      margin 10px
+      margin-left 30px
+      margin-bottom 20px
 
     .gameId
       position absolute

diff --git a/public/partials/identify.html b/public/partials/identify.html
@@ -3,9 +3,12 @@
   <div class="version">v{{version}}</div>
 
   <div class="menu {{intro}}">
-    <p>Choose a name and a character</p>
+    <div class="upgrade-link">
+      <span ng-hide="players.isPaid" ><a class="upgrade-button" href="https://spb.io/s/osgtq3F3kS">Pay $1.00 to unlock all features!</a></span>
+      <span ng-show="players.isPaid">Thank you for your support!</span>
+    </div>
 
-    <div class="avatars">
+    <div class="avatarSelection">
       <div 
         ng-repeat="name in avatars"
         class="avatar {{name}}" 
@@ -15,12 +18,12 @@
       </div>
     </div>
 
-    <div class="name">
+    <div class="playerNameInput">
       <input ng-model="player.name" placeholder="Your Name">
     </div>
 
     <div>
-      <button ng-click="join()">Join</button>
+      <button class="join" ng-click="join()">PLAY</button>
     </div>
 
     <div class="error" ng-show="error">{{error}}</div>
@@ -43,16 +46,12 @@
       <input ng-model="gameId">
     </div>
 
-    <div class="upgrade-link">
-      <span ng-hide="players.isPaid" ><a class="upgrade-button" href="https://spb.io/s/osgtq3F3kS">Pay $1.00 to unlock all features!</a></span>
-      <span ng-show="players.isPaid">Thank you for your support!</span>
-    </div>
-
 
   </div>
-
 
-  <img 
-    class="title {{intro}}" 
-    src="/images/title.png">
+  <div class="water">
+    <img 
+      class="title {{intro}}" 
+      src="/images/title.png">
+  </div>
 </div>