fixed an issue with volume control and refactored css

diff --git a/package.json b/package.json
index 59377954c50dcb5e2ed54ea8fb18f661352308e9..a7e55a55fa7f923be33d36906af99f3833441ef1 100644 (file)
--- a/package.json
+++ b/package.json
@@ -21,5 +21,5 @@
     "start": "app.js"
   },
   "subdomain": "binb",
-  "version": "0.3.3-16"
+  "version": "0.3.3-17"
 }
\ No newline at end of file

diff --git a/public/static/css/style.css b/public/static/css/style.css
index 8b9d03090497f33becdf73fe6a705f574f45b14f..e44efa4bc8b97fe54ef501a7d3532d7a74cb6e83 100644 (file)
--- a/public/static/css/style.css
+++ b/public/static/css/style.css
@@ -9,10 +9,10 @@
 }
 body {
     background: url('/static/images/bg.jpg') repeat-x scroll 0 0 #F5F6F7;
-    padding-top:45px;
+    padding-top: 45px;
 }
 section {
-    margin-top:30px;
+    margin-top: 30px;
 }
 h1, h2, h3, h4, h5, h6 {
     margin: 0;
@@ -43,6 +43,9 @@ h6 {
     color: #999999;
     text-transform: uppercase;
 }
+.icons {
+    background: url('/static/images/sprites.png') no-repeat;
+}
 .align-left {
     text-align: left;
 }
@@ -56,7 +59,7 @@ h6 {
     height: 34px;
     padding-left: 68px;
     line-height: 40px;
-    background: url('/static/images/sprites.png') no-repeat -36px -174px;
+    background-position: -36px -174px;
     font-size: 25px;
 }
 .navbar .nav > li > a {
@@ -71,7 +74,7 @@ h6 {
     height: 54px;
     padding-left: 109px;
     line-height: 68px;
-    background: url('/static/images/sprites.png') no-repeat 0 -120px;
+    background-position: 0 -120px;
     font-size: 34px;
     color: #0088CC;
 }
@@ -107,15 +110,15 @@ form .clearfix {
     width: 126px;
 }
 #captcha {
-    margin-right:20px;
+    margin-right: 20px;
 }
 .page-header {
     padding: 0;
     margin: 0 0 17px 0;
-    border-bottom:1px solid #ddd;
-    -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);
-    -moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);
-    box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);
+    border-bottom: 1px solid #ddd;
+    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 }
 #login, #guess, #message {
     margin-bottom: 0;
@@ -174,28 +177,28 @@ form .clearfix {
 }
 .profile .img {
     margin-right: 5px;
-    background: url('/static/images/sprites.png') no-repeat 0 -56px;
+    background-position: 0 -56px;
 }
 .highscores .img {
-    margin-right:7px;
-    background: url('/static/images/sprites.png') no-repeat -64px 0;
+    margin-right: 7px;
+    background-position: -64px 0;
 }
 .leaderboard-wrapper, .stats {
     border: 1px solid #ccc;
     border-left: 0;
-    margin-top:8px;
+    margin-top: 8px;
 }
 .leaderboard-wrapper {
     height: 349px;
     overflow: auto;
-    margin-bottom:18px;
+    margin-bottom: 18px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
 }
 .leaderboard {
-    margin:0;
-    border:0;
+    margin: 0;
+    border: 0;
 }
 .leaderboard td, .stats td {
     border-left: 1px solid #ccc;
@@ -248,20 +251,20 @@ form .clearfix {
     height: 16px;
 }
 .rank1 {
-    background: url('/static/images/sprites.png') no-repeat -32px -16px;
+    background-position: -32px -16px;
 }
 .rank2 {
-    background: url('/static/images/sprites.png') no-repeat -32px -48px;
+    background-position: -32px -48px;
 }
 .rank3 {
-    background: url('/static/images/sprites.png') no-repeat -32px -80px;
+    background-position: -32px -80px;
 }
 .scoreboard th, .scoreboard td {
     vertical-align: middle;
     text-align: center;
 }
 .scoreboard .name {
-    font-weight:bold;
+    font-weight: bold;
 }
 .relative {
     position: relative;
@@ -274,40 +277,40 @@ form .clearfix {
     margin-top: 34px;
 }
 #cassette {
-    margin-top:22px;
+    margin-top: 22px;
     height: 137px;
     background: url('/static/images/cassette.png') no-repeat 0 0;
 }
 #countdown {
     position: absolute;
     width: 26px;
-    text-align:center;
-    top:80px;
-    left:175px;
+    text-align: center;
+    top: 80px;
+    left: 175px;
 }
 #wheel-left, #wheel-right {
-    position:absolute;
+    position: absolute;
     width: 24px;
-    height:24px;
+    height: 24px;
     top: 49px;
-    background: url('/static/images/sprites.png') no-repeat 0 -32px;
+    background-position: 0 -32px;
 }
 #wheel-left {
-    left:51px;
+    left: 51px;
 }
 #wheel-right {
-    left:145px;
+    left: 145px;
 }
 #tape-left, #tape-right {
-    height:70px;
-    width:70px;
-    position:absolute;
-    top:25px;
+    height: 70px;
+    width: 70px;
+    position: absolute;
+    top: 25px;
     background-color: black;
     -webkit-border-radius: 70px;
     -moz-border-radius: 70px;
     border-radius: 70px;
-    z-index:-1;
+    z-index: -1;
 }
 #tape-left {
     left: 20px;
@@ -316,32 +319,32 @@ form .clearfix {
     left: 106px;
 }
 #progress-bar, #progress {
-    height:7px;
-    -webkit-border-radius:4px;
-    -moz-border-radius:4px;
-    border-radius:4px;
+    height: 7px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
     -webkit-box-shadow: inset 0 1px 2px 0 #333;
      -moz-box-shadow: inset 0 1px 2px 0 #333;
     box-shadow: inset 0 1px 2px 0 #333;
 }
 #progress-bar {
-    position:absolute;
+    position: absolute;
     width: 148px;
-    top:85px;
-    left:20px;
-    border:1px solid #404040;
-    border:1px solid rgba(0, 0, 0, 0.5);
+    top: 85px;
+    left: 20px;
+    border: 1px solid #404040;
+    border: 1px solid rgba(0, 0, 0, 0.5);
 }
 #progress {
     background-color: #6184b7;
-    width:0;
+    width: 0;
 }
 #touch-backdrop {
-    height:137px;
-    -webkit-border-radius:5px;
-    -moz-border-radius:5px;
-    border-radius:5px;
-    background:rgba(50,50,50,0.8);
+    height: 137px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    background: rgba(50,50,50,0.8);
 }
 #touch-play {
     position: absolute;
@@ -349,7 +352,7 @@ form .clearfix {
     left: 73px;
 }
 #volume {
-    height:159px;
+    height: 159px;
 }
 #volume-button, #volume-slider, #volume-total, #volume-current, #volume-handle {
     position: absolute;
@@ -360,41 +363,41 @@ form .clearfix {
     width: 20px;
 }
 #volume-button .button {
-    display:block;
+    display: block;
     height: 18px;
     width: 18px;
-    border:1px solid;
+    border: 1px solid;
     border-color: #CCCCCC #CCCCCC #AAAAAA;
-    -webkit-border-radius:3px;
-    -moz-border-radius:3px;
-    border-radius:3px;
-    cursor:pointer;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    cursor: pointer;
     filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffe0e0e0);
-    background-image:-moz-linear-gradient(top,#fff 0,#e0e0e0 100%);
-    background-image:-ms-linear-gradient(top,#fff 0,#e0e0e0 100%);
-    background-image:-o-linear-gradient(top,#fff 0,#e0e0e0 100%);
-    background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e0e0e0));
-    background-image:-webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);
-    background-image:linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
+    background-image: -moz-linear-gradient(top,#fff 0,#e0e0e0 100%);
+    background-image: -ms-linear-gradient(top,#fff 0,#e0e0e0 100%);
+    background-image: -o-linear-gradient(top,#fff 0,#e0e0e0 100%);
+    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e0e0e0));
+    background-image: -webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);
+    background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
 }
 #volume-button .button:hover {
-    border-color:#999999;
+    border-color: #999999;
     -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
     -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
 }
 #volume-button .button:active {
-    border-color:#999999 #AAAAAA #CCCCCC;
+    border-color: #999999 #AAAAAA #CCCCCC;
     -webkit-box-shadow: 0 1px 2px 0 #aaa inset;
     -moz-box-shadow: 0 1px 2px 0 #aaa inset;
     box-shadow: 0 1px 2px 0 #aaa inset;
     filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);
-    background-image:-moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
-    background-image:-ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
-    background-image:-o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
-    background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));
-    background-image:-webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
-    background-image:linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);
+    background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
+    background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
+    background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
+    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));
+    background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
+    background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);
 }
 #volume-button .button #icon {
     margin: 1px;
@@ -402,25 +405,25 @@ form .clearfix {
     height: 16px;
 }
 #volume-button .button .volume-none {
-    background: url('/static/images/sprites.png') no-repeat 0 -88px;
+    background-position: 0 -88px;
 }
 #volume-button .button .volume-low {
-    background: url('/static/images/sprites.png') no-repeat -16px -88px;
+    background-position: -16px -88px;
 }
 #volume-button .button .volume-medium {
-    background: url('/static/images/sprites.png') no-repeat 0 -104px;
+    background-position: 0 -104px;
 }
 #volume-button .button .volume-high {
-    background: url('/static/images/sprites.png') no-repeat -16px -104px;
+    background-position: -16px -104px;
 }
 #volume-slider {
     display: none;
     height: 116px;
     width: 20px;
     top: -116px;
-    -webkit-border-radius:3px;
-    -moz-border-radius:3px;
-    border-radius:3px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
     background: rgba(50, 50, 50, 0.1);
     z-index: 1;
 }
@@ -453,18 +456,18 @@ form .clearfix {
     background: #ddd;
     background: rgba(255, 255, 255, 0.9);
     cursor: N-resize;
-    border:1px solid #999;
+    border: 1px solid #999;
 }
 #summary {
     text-align: center;
-    margin-bottom:18px;
+    margin-bottom: 18px;
 }
 #users-wrapper {
     margin-left: 120px;
     width: 300px;
 }
 #users {
-    padding-left:20px;
+    padding-left: 20px;
     margin-bottom: 90px;
     max-height: 380px;
     overflow: auto;
@@ -495,10 +498,10 @@ form .clearfix {
     margin: 1px 2px 0 0;
 }
 .registered {
-    background: url('/static/images/sprites.png') no-repeat 0 -16px;
+    background-position: 0 -16px;
 }
 .registered:hover {
-    background: url('/static/images/sprites.png') no-repeat -16px -16px;
+    background-position: -16px -16px;
 }
 #users .name {
     margin-right: 4px;
@@ -513,13 +516,13 @@ form .clearfix {
     margin-right: 10px;
 }
 .stand1 {
-    background: url('/static/images/sprites.png') no-repeat 0 0;
+    background-position: 0 0;
 }
 .stand2 {
-    background: url('/static/images/sprites.png') no-repeat -16px 0;
+    background-position: -16px 0;
 }
 .stand3 {
-    background: url('/static/images/sprites.png') no-repeat -32px 0;
+    background-position: -32px 0;
 }
 #users .guess-time {
     font-size: 11px;
@@ -626,28 +629,29 @@ form .clearfix {
     padding: 8px;
     min-height: 40px;
     background: -moz-linear-gradient(center top , #FBFBFB, #F5F5F5);
+    background: -webkit-gradient(linear, center top, center bottom, from(#FBFBFB), to(#F5F5F5));
     background: -webkit-linear-gradient(center top , #FBFBFB, #F5F5F5);
     background: -o-linear-gradient(center top , #FBFBFB, #F5F5F5);
     background: -ms-linear-gradient(center top , #FBFBFB, #F5F5F5);
     background: linear-gradient(center top , #FBFBFB, #F5F5F5);
 }
 .registered, #users .name, #users .points, .round-rank, .round-points, #users .guess-time, #tracks img.artwork, #tracks .info, .highscores .img, .profile .img, #copy, #facebook-button, #twitter-button, #github-button {
-    float:left;
+    float: left;
 }
 #tracks img.artwork {
     width: 40px;
     height: 40px;
-    margin-right:10px;
+    margin-right: 10px;
 }
 #tracks .info {
-    margin-right:15px;
+    margin-right: 15px;
 }
 #tracks .artist {
     margin-top: 1px;
     font-size: 14px;
 }
 #tracks .round-rank {
-    margin-top:12px;
+    margin-top: 12px;
 }
 #tracks .round-points {
     margin-top: 11px;
@@ -657,48 +661,48 @@ form .clearfix {
     width: 44px;
     height: 15px;
     margin-top: 12px;
-    background: url('/static/images/sprites.png') no-repeat 0 -248px;
+    background-position: 0 -248px;
 }
 #tracks a:hover {
-    background: url('/static/images/sprites.png') no-repeat -44px -248px;
+    background-position: -44px -248px;
 }
 #tracks a:active {
-    background: url('/static/images/sprites.png') no-repeat 0 -263px;
+    background-position: 0 -263px;
 }
 #disclaimer {
     position: absolute;
     left: 60px;
     bottom: 18px;
     color: #BFBFBF;
-    width:340px;
+    width: 340px;
 }
 footer {
     padding: 0;
     margin-top: 17px;
-    border-top:1px solid #DDDDDD;
+    border-top: 1px solid #DDDDDD;
     color: #BFBFBF;
     text-shadow: 0 1px 0 #FFFFFF;
 }
 #footer-inner, #twitter-button, #github-button {
-    height:20px;
+    height: 20px;
 }
 #footer-inner {
-    border-top:1px solid white;
-    padding:5px 20px 0 20px;
-    margin-bottom:30px;
+    border-top: 1px solid white;
+    padding: 5px 20px 0 20px;
+    margin-bottom: 30px;
 }
 #copy {
     margin-right: 20px;
 }
 #facebook-button {
-    width:90px;
-    height:21px
+    width: 90px;
+    height: 21px
 }
 #twitter-button, #github-button {
-    width:100px;
+    width: 100px;
 }
 #copy, .footer-info {
-    line-height:20px;
+    line-height: 20px;
 }
 .footer-info {
     white-space: pre-wrap;
@@ -707,8 +711,8 @@ footer {
     display: block;
     width: 84px;
     height: 20px;
-    background: url('/static/images/sprites.png') no-repeat 0 -208px;
+    background-position: 0 -208px;
 }
 #nodejitsu-logo:hover {
-    background: url('/static/images/sprites.png') no-repeat 0 -228px;
+    background-position: 0 -228px;
 }

diff --git a/public/static/js/room.js b/public/static/js/room.js
index 1c3ae3b48f62bf1564f0a84f759bfbaa1f4bbe13..861cccdf604c15ce633943569f419700b2f4770b 100644 (file)
--- a/public/static/js/room.js
+++ b/public/static/js/room.js
@@ -131,77 +131,58 @@
             rp = '+'+roundpoints;
             if (roundpoints > 3) {
                 var stand = 7 - roundpoints;
-                attrs += 'class="round-rank stand'+stand+'"';
+                attrs += 'class="icons round-rank stand'+stand+'"';
             }
         }
         html += '<div '+attrs+'></div><div class="round-points">'+rp+'</div>';
-        html += '<a target="itunes_store" href="'+data.trackViewUrl+'"></a></li>';
+        html += '<a class="icons" target="itunes_store" href="'+data.trackViewUrl+'"></a></li>';
 
         DOM.tracks.prepend($(html));
     };
 
     var addVolumeControl = function() {
         var volumebutton = $('<div id="volume-button">'+
-            '<a class="button"><div id="icon" class="volume-high"></div></a>'+
+            '<a class="button"><div id="icon" class="icons volume-high"></div></a>'+
             '<div id="volume-slider">'+ // Outer background
                 '<div id="volume-total"></div>'+ // Rail
                 '<div id="volume-current"></div>'+ // Current volume
                 '<div id="volume-handle"></div>'+ // Handle
             '</div></div>').appendTo('#volume');
 
-        var icon = volumebutton.find('#icon')
-            , volumeslider = volumebutton.find('#volume-slider')
-            , volumetotal = volumebutton.find('#volume-total')
-            , volumecurrent = volumebutton.find('#volume-current')
-            , volumehandle = volumebutton.find('#volume-handle')
+        var clicked = false
+            , icon = volumebutton.find('#icon')
             , mouseisdown = false
             , mouseisover = false
             , oldvalue = 1
-            , clicked = false;
-
-        var positionVolumeHandle = function(volume) {
-            if (!volumeslider.is(':visible')) {
-                volumeslider.show();
-                positionVolumeHandle(volume);
-                volumeslider.hide();
-                return;
-            }
-            var totalheight = volumetotal.height();
-            var totalposition = volumetotal.position();
-            var newtop = totalheight - (totalheight * volume);
-            volumehandle.css('top', totalposition.top + newtop - (volumehandle.height() / 2));
-            volumecurrent.height(totalheight - newtop );
-            volumecurrent.css('top', totalposition.top + newtop);
-        };
+            , volumecurrent = volumebutton.find('#volume-current')
+            , volumehandle = volumebutton.find('#volume-handle')
+            , volumeslider = volumebutton.find('#volume-slider')
+            , volumetotal = volumebutton.find('#volume-total');
 
         var handleIcon = function (volume) {
             if (volume === 0) {
-                icon.removeClass().addClass('volume-none');
+                icon.removeClass().addClass('icons volume-none');
             }
             else if (volume <= 0.33) {
-                icon.removeClass().addClass('volume-low');
+                icon.removeClass().addClass('icons volume-low');
             }
             else if (volume <= 0.66) {
-                icon.removeClass().addClass('volume-medium');
+                icon.removeClass().addClass('icons volume-medium');
             }
             else {
-                icon.removeClass().addClass('volume-high');
+                icon.removeClass().addClass('icons volume-high');
             }
         };
 
-        var setVolume = function(volume) {
-            handleIcon(volume);
-            oldvalue = volume;
-            jplayer.jPlayer('volume', volume);
-        };
-
         var handleVolumeMove = function(e) {
-            var totaloffset = volumetotal.offset()
-                , newy = e.pageY - totaloffset.top
-                , railheight = volumetotal.height()
+            var railheight = volumetotal.height()
+                , totaloffset = volumetotal.offset()
                 , totalTop = parseInt(volumetotal.css('top').replace(/px/, ''), 10)
+                , newy = e.pageY - totaloffset.top
                 , volume = (railheight - newy) / railheight;
 
+            clicked = false;
+
             if (newy < 0) {
                 newy = 0;
             }
@@ -209,18 +190,14 @@
                 newy = railheight;
             }
 
-            volumehandle.css('top', totalTop + newy - (volumehandle.height() / 2));
             volumecurrent.height(railheight - newy);
             volumecurrent.css('top', newy + totalTop);
+            volumehandle.css('top', totalTop + newy - (volumehandle.height() / 2));
 
             volume = Math.max(0, volume);
             volume = Math.min(volume, 1);
 
             setVolume(volume);
-
-            var d = new Date();
-            d.setTime(d.getTime() + 31536000000); // One year in milliseconds
-            document.cookie = 'volume='+volume+';path=/;expires='+d.toGMTString()+';';
         };
 
         var loadFromCookie = function() {
@@ -234,9 +211,56 @@
             positionVolumeHandle(1);
         };
 
+        var positionVolumeHandle = function(volume) {
+            if (!volumeslider.is(':visible')) {
+                volumeslider.show();
+                positionVolumeHandle(volume);
+                volumeslider.hide();
+                return;
+            }
+            var totalheight = volumetotal.height();
+            var totalposition = volumetotal.position();
+            var newtop = totalheight - (totalheight * volume);
+            volumecurrent.height(totalheight - newtop );
+            volumecurrent.css('top', totalposition.top + newtop);
+            volumehandle.css('top', totalposition.top + newtop - (volumehandle.height() / 2));
+        };
+
+        var setCookie = function(volume) {
+            var d = new Date();
+            d.setTime(d.getTime() + 31536000000); // One year in milliseconds
+            document.cookie = 'volume='+volume+';path=/;expires='+d.toGMTString()+';';
+        };
+
+        var setVolume = function(volume) {
+            handleIcon(volume);
+            jplayer.jPlayer('volume', volume);
+            oldvalue = volume;
+            setCookie(volume);
+        };
+
+        volumebutton.find('.button').click(function() {
+            if (!clicked) {
+                clicked = true;
+                if (oldvalue !== 0) {
+                    handleIcon(0);
+                    jplayer.jPlayer('volume', 0);
+                    positionVolumeHandle(0);
+                }
+            }
+            else {
+                clicked = false;
+                if (oldvalue !== 0) {
+                    handleIcon(oldvalue);
+                    jplayer.jPlayer('volume', oldvalue);
+                    positionVolumeHandle(oldvalue);
+                }
+            }
+        });
+
         volumebutton.hover(function() {
-            volumeslider.show();
             mouseisover = true;
+            volumeslider.show();
         }, function() {
             mouseisover = false;
             if (!mouseisdown) {
@@ -246,42 +270,23 @@
 
         volumeslider.on('mouseover', function() {
             mouseisover = true;
-        }).on('mousedown', function (e) {
+        }).on('mousedown', function(e) {
             handleVolumeMove(e);
             mouseisdown = true;
             return false;
         });
 
-        $(document).on('mouseup', function (e) {
+        $(document).on('mouseup', function(e) {
             mouseisdown = false;
             if (!mouseisover) {
                 volumeslider.hide();
             }
-        }).on('mousemove', function (e) {
+        }).on('mousemove', function(e) {
             if (mouseisdown) {
                 handleVolumeMove(e);
             }
         });
 
-        volumebutton.find('.button').click(function() {
-            if (!clicked) {
-                clicked = true;
-                if (oldvalue !== 0) {
-                    jplayer.jPlayer('volume', 0);
-                    positionVolumeHandle(0);
-                    handleIcon(0);
-                }
-            }
-            else {
-                clicked = false;
-                if (oldvalue !== 0) {
-                    jplayer.jPlayer('volume', oldvalue);
-                    positionVolumeHandle(oldvalue);
-                    handleIcon(oldvalue);
-                }
-            }
-        });
-
         loadFromCookie();
     };
 
@@ -384,14 +389,15 @@
         var html = '<div class="modal-header"><h3>Game Over</h3></div>';
         html += '<div class="modal-body"><table class="table table-striped scoreboard">';
         html += '<thead><tr><th>#</th><th>Name</th><th>Points</th>';
-        html += '<th><div class="cups stand1"></div></th><th><div class="cups stand2"></div></th>';
-        html += '<th><div class="cups stand3"></div></th><th>Guessed</th><th>Mean time</th>';
+        html += '<th><div class="icons cups stand1"></div></th>';
+        html += '<th><div class="icons cups stand2"></div></th>';
+        html += '<th><div class="icons cups stand3"></div></th><th>Guessed</th><th>Mean time</th>';
         html += '</thead><tbody>';
         
         for(var i=0;i<3;i++) {
             if (podium[i]) {
                 var playername = podium[i].nickname.encodeEntities();
-                html += '<tr><td><div class="medals rank'+(i+1)+'"></div></td>';
+                html += '<tr><td><div class="icons medals rank'+(i+1)+'"></div></td>';
                 html += '<td class="name">'+playername+'</td>';
                 html += '<td>'+podium[i].points+'</td>';
                 html += '<td>'+podium[i].golds+'</td><td>'+podium[i].silvers+'</td>';
@@ -711,7 +717,7 @@
             li.append(pvt, username, points, roundrank, roundpointsel, guesstime);
             if (user.registered) {
                 var href = 'href="/user/'+encodeURIComponent(user.nickname)+'"';
-                pvt.after('<a class="registered" target="_blank" '+href+'></a>');
+                pvt.after('<a class="icons registered" target="_blank" '+href+'></a>');
             }
             DOM.users.append(li);
             
@@ -741,7 +747,7 @@
                 else {
                     if (user.roundpoints > 3) {
                         var stand = 7 - user.roundpoints;
-                        roundrank.addClass('round-rank stand'+stand);
+                        roundrank.addClass('icons round-rank stand'+stand);
                         var gtime = (user.guesstime / 1000).toFixed(1);
                         guesstime.text(gtime+' s');
                     }

diff --git a/views/changepasswd.jade b/views/changepasswd.jade
index d30fcfdf0026b5404ccac039b0b97cb2eb0f2d90..8f60a5c93a8d889bca99f9b4b6030fe0463e3ddb 100644 (file)
--- a/views/changepasswd.jade
+++ b/views/changepasswd.jade
@@ -10,7 +10,7 @@ html
             .navbar-inner
                 .container
                     a.brand(href="/")
-                        .logo #{motto}
+                        .icons.logo #{motto}
                     ul.nav.pull-right
                         li
                             a(href="/") Home

diff --git a/views/footer.jade b/views/footer.jade
index 2d67ba062f800ca2f17d1cc0c7ced3262c7e27f4..b49d4c208f4c684e726b15aca340fbccac46d776 100644 (file)
--- a/views/footer.jade
+++ b/views/footer.jade
@@ -8,5 +8,5 @@ footer
         iframe#github-button(allowtransparency="true", frameborder="0", scrolling="0", 
             src="http://ghbtns.com/github-btn.html?user=lpinca&repo=binb&type=watch&count=true")
         span.footer-info . Optimized for Google Chrome.
-        a#nodejitsu-logo(target="_blank", href="http://nodejitsu.com/")
+        a#nodejitsu-logo.icons(target="_blank", href="http://nodejitsu.com/")
         span.footer-info Powered by 

diff --git a/views/index.jade b/views/index.jade
index 4e8ca732da885a4f417145d062fb4dfbde409b81..fe16563328693afd3df8731e2c3a94af505626f3 100644 (file)
--- a/views/index.jade
+++ b/views/index.jade
@@ -11,7 +11,7 @@ html
             .navbar-inner
                 .container
                     a.brand(href="/")
-                        .logo #{motto}
+                        .icons.logo #{motto}
                     ul.nav.pull-right
                         li.active
                             a(href="/") Home

diff --git a/views/leaderboards.jade b/views/leaderboards.jade
index 465afa23d044cc9c894a9b9c8352074d7b52ebd7..b4a6a6d55eac1d1ebc7690f54dd869b6c5385ee2 100644 (file)
--- a/views/leaderboards.jade
+++ b/views/leaderboards.jade
@@ -8,13 +8,13 @@ html
             .navbar-inner
                 .container
                     a.brand(href="#")
-                        .logo #{motto}
+                        .icons.logo #{motto}
         .container
             section
                 .row
                     .span7.offset1
                         .highscores High Scores
-                            .img
+                            .icons.img
             section
                 .row
                     .span7.offset1

diff --git a/views/login.jade b/views/login.jade
index 8f0e77c78f8ee41b229e5e3241921b79a92e0f95..23e52da40f2afba6ce79509905a9882904028d0c 100644 (file)
--- a/views/login.jade
+++ b/views/login.jade
@@ -10,7 +10,7 @@ html
             .navbar-inner
                 .container
                     a.brand(href="/")
-                        .logo #{motto}
+                        .icons.logo #{motto}
                     ul.nav.pull-right
                         li
                             a(href="/") Home

diff --git a/views/recoverpasswd.jade b/views/recoverpasswd.jade
index d90a0efa848a5dfffec3b2157cd5a1ba3e50bed5..829dfe34900f883d9723534c3ff9116e286097fb 100644 (file)
--- a/views/recoverpasswd.jade
+++ b/views/recoverpasswd.jade
@@ -10,7 +10,7 @@ html
             .navbar-inner
                 .container
                     a.brand(href="/")
-                        .logo #{motto}
+                        .icons.logo #{motto}
                     ul.nav.pull-right
                         li
                             a(href="/") Home

diff --git a/views/resetpasswd.jade b/views/resetpasswd.jade
index aed4db3a6038f6ded9fbebf5f7994fb9a8cee251..f289aa1f5b7ec96efdd5231dea1826c049b880f3 100644 (file)
--- a/views/resetpasswd.jade
+++ b/views/resetpasswd.jade
@@ -10,7 +10,7 @@ html
             .navbar-inner
                 .container
                     a.brand(href="#")
-                        .logo #{motto}
+                        .icons.logo #{motto}
         .container
             section
                 .row

diff --git a/views/room.jade b/views/room.jade
index 62f56443bd998b89938ad2d2c8a2ebc8c3e98fca..ea35a6d74b4ad6aa4601b0877c81e3ff864fe513 100644 (file)
--- a/views/room.jade
+++ b/views/room.jade
@@ -57,10 +57,10 @@ html
                 .row
                     .span4.offset1
                         #cassette.relative
-                            #wheel-left.wheel
+                            #wheel-left.icons.wheel
                             #tape-left
                             #tape-right
-                            #wheel-right.wheel
+                            #wheel-right.icons.wheel
                             #progress-bar
                                 #progress
                             #countdown
@@ -68,7 +68,7 @@ html
                         #volume.relative
                     .span8
                         .page-header
-                            .logo #{motto}
+                            .icons.logo #{motto}
                             #total-tracks <span></span> tracks.
                         #summary.row
                             .span2

diff --git a/views/signup.jade b/views/signup.jade
index 5c5fa99719992144a521d76afb95671d40993bfa..2419d834bc65223747ce41516067c0b4564572b7 100644 (file)
--- a/views/signup.jade
+++ b/views/signup.jade
@@ -10,7 +10,7 @@ html
             .navbar-inner
                 .container
                     a.brand(href="/")
-                        .logo #{motto}
+                        .icons.logo #{motto}
                     ul.nav.pull-right
                         li
                             a(href="/") Home

diff --git a/views/user.jade b/views/user.jade
index 1c3f1d9454bd4e4b8e7e51c308ec04940115fdfa..8b7a6790f92be347ee798200adbfa97a7477e30d 100644 (file)
--- a/views/user.jade
+++ b/views/user.jade
@@ -8,13 +8,13 @@ html
             .navbar-inner
                 .container
                     a.brand(href="#")
-                        .logo #{motto}
+                        .icons.logo #{motto}
         .container
             section
                 .row
                     .span7.offset1
                         .profile #{username.replace(/&/g, '&')}
-                            .img
+                            .icons.img
                         div member since #{joindate}
             section
                 .row
@@ -59,31 +59,31 @@ html
                                 tr
                                     td Gold cups
                                     td
-                                        .cups.stand1
+                                        .icons.cups.stand1
                                     td #{golds}
                                 tr
                                     td Silver cups
                                     td
-                                        .cups.stand2
+                                        .icons.cups.stand2
                                     td #{silvers}
                                 tr
                                     td Bronze cups
                                     td
-                                        .cups.stand3
+                                        .icons.cups.stand3
                                     td #{bronzes}
                                 tr
                                     td Victories
                                     td
-                                        .medals.rank1
+                                        .icons.medals.rank1
                                     td #{victories}
                                 tr
                                     td Second places
                                     td
-                                        .medals.rank2
+                                        .icons.medals.rank2
                                     td #{secondplaces}
                                 tr
                                     td Third places
                                     td
-                                        .medals.rank3
+                                        .icons.medals.rank3
                                     td #{thirdplaces}
             include footer