From 6630fc40744e34b9b94110666416fe371dc38238 Mon Sep 17 00:00:00 2001 From: Luigi Pinca Date: Fri, 30 Mar 2012 13:18:06 +0200 Subject: [PATCH] added the ability to hide the chat and the time needed to correctly guess the song is now displayed for the three fastest players --- package.json | 2 +- public/static/css/style.css | 45 ++++++++++++++++++++++++++++++++++++- public/static/js/room.js | 24 +++++++++++++++++++- server.js | 9 ++++++-- views/room.jade | 16 +++++++------ 5 files changed, 84 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 81b6a5e..cf61c44 100644 --- a/package.json +++ b/package.json @@ -14,5 +14,5 @@ "engines": { "node": "0.6.x" }, - "version": "0.2.0-7" + "version": "0.2.0-9" } \ No newline at end of file diff --git a/public/static/css/style.css b/public/static/css/style.css index bbf1bc5..435573f 100644 --- a/public/static/css/style.css +++ b/public/static/css/style.css @@ -314,7 +314,7 @@ input { #users .you { cursor: auto; } -#users .points { +#users .points, #users .round-points { margin-right: 10px; } .round-rank { @@ -335,6 +335,49 @@ input { display:inline-block; vertical-align: middle; } +#users .guess-time { + font-size: 11px; +} +#toggle-chat { + position: absolute; + top: -17px; + left: 805px; + color: #BFBFBF; + height: 16px; + line-height: 16px; + font-size: 11px; + border: 1px solid #DDDDDD; + -moz-border-radius: 4px 4px 0 0; + -webkit-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; + cursor: pointer; + padding: 0 10px; + text-decoration: none; +} +#toggle-chat:hover { + border-color: #CCCCCC; + background-color: #f5f5f5; + color: #333333; + background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); + background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); + background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); + background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); + background-image: linear-gradient(top, #ffffff, #e6e6e6); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05); +} +#toggle-chat:active { + background-image: none; + -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05); + background-color: #e6e6e6; + background-color: #d9d9d9 \9; + outline: 0; +} #chat-wrapper { margin-bottom: 4px; height: 160px; diff --git a/public/static/js/room.js b/public/static/js/room.js index 7ca671a..906d19a 100644 --- a/public/static/js/room.js +++ b/public/static/js/room.js @@ -189,7 +189,8 @@ var points = $('('+user.points+')'); var roundrank = $(''); var roundpointsel = $(''); - li.append(pvt, username, points, roundrank, roundpointsel); + var guesstime = $(''); + li.append(pvt, username, points, roundrank, roundpointsel, guesstime); DOM.users.append(li); if (pvtmsgto === user.nickname) { pvt.show(); @@ -216,6 +217,8 @@ if (user.roundpoints > 3) { var stand = 7 - user.roundpoints; roundrank.addClass("round-rank stand"+stand); + var gtime = (user.guesstime / 1000).toFixed(1); + guesstime.text(gtime+" s"); } username.addClass("correct"); } @@ -443,6 +446,22 @@ DOM.chat[0].scrollTop = DOM.chat[0].scrollHeight; }; + var hideChat = function() { + DOM.togglechat.text("Show chat").unbind('click'); + DOM.chatwrapper.toggle(300); + DOM.tracks.animate({maxHeight:"434px"}, 300); + DOM.togglechat.click(showChat); + }; + + var showChat = function() { + DOM.togglechat.text("Hide chat").unbind('click'); + DOM.chatwrapper.toggle(300); + DOM.tracks.animate({maxHeight:"240px"}, 300, function() { + DOM.chat[0].scrollTop = DOM.chat[0].scrollHeight; + }); + DOM.togglechat.click(hideChat); + }; + var addFeedback = function(txt, style) { if (typeof style === 'string') { var fbspan = $(''); @@ -617,6 +636,8 @@ DOM.countdown = $('#countdown'); DOM.chat = $('#chat'); DOM.feedback = $('#feedback'); + DOM.togglechat = $('#toggle-chat'); + DOM.chatwrapper = $('#chat-outer-wrapper'); }; // Set up the room. @@ -625,6 +646,7 @@ $('#app-name small').text(motto); setVariables(); DOM.modal.modal({keyboard:false,show:false,backdrop:"static"}); + DOM.togglechat.click(hideChat); if ($.browser.mozilla) { // Block ESC button in firefox (it breaks all socket connection). $(document).keypress(function(event) { diff --git a/server.js b/server.js index 98cd841..95a91aa 100644 --- a/server.js +++ b/server.js @@ -213,7 +213,8 @@ function Room(name) { nickname: socket.nickname, points: 0, roundpoints: 0, - matched: null + matched: null, + guesstime: null }; totusers = totusers + 1; io.sockets.in('home').emit('update', {room:roomname,players:totusers}); @@ -247,7 +248,7 @@ function Room(name) { // A user is submitting a name this.setNickName = function(socket, data) { var feedback = null; - if (data.nickname.length > 18) { + if (data.nickname.length > 15) { feedback = 'That name is too long.'; } else if (data.nickname === "Binb") { @@ -302,16 +303,19 @@ function Room(name) { switch (finishline) { case 1: finishline++; + usersData[socket.nickname].guesstime = 30000 - songtimeleft; usersData[socket.nickname].roundpoints = 6; usersData[socket.nickname].points += (allinone) ? 6 : 5; break; case 2: finishline++; + usersData[socket.nickname].guesstime = 30000 - songtimeleft; usersData[socket.nickname].roundpoints = 5; usersData[socket.nickname].points += (allinone) ? 5 : 4; break; case 3: finishline++; + usersData[socket.nickname].guesstime = 30000 - songtimeleft; usersData[socket.nickname].roundpoints = 4; usersData[socket.nickname].points += (allinone) ? 4 : 3; break; @@ -385,6 +389,7 @@ function Room(name) { } usersData[key].roundpoints = 0; usersData[key].matched = null; + usersData[key].guesstime = null; } }; diff --git a/views/room.jade b/views/room.jade index 9be3f83..68cdd00 100644 --- a/views/room.jade +++ b/views/room.jade @@ -67,13 +67,15 @@ include header .span5.offset2 ul#users.unstyled .span8 - #chat-wrapper.bordered.relative - #chat-top - #chat-bottom - ul#chat.unstyled - #message-wrapper - span#recipient - input#message.span8(type="text") + a#toggle-chat Hide chat + #chat-outer-wrapper + #chat-wrapper.bordered.relative + #chat-top + #chat-bottom + ul#chat.unstyled + #message-wrapper + span#recipient + input#message.span8(type="text") ul#tracks.unstyled #disclaimer div I do not own any right on the songs that are played here. -- 2.54.0