background-color: #6184b7;
width:0px;
}
+#volume {
+ height:154px;
+}
+#volume-button, #volume-slider, #volume-total, #volume-current, #volume-handle {
+ position: absolute;
+}
+#volume-button {
+ bottom: 0;
+ height: 20px;
+ width: 20px;
+}
+#volume-button .button {
+ display:block;
+ height: 18px;
+ width: 18px;
+ border:1px solid;
+ border-color: #CCCCCC #CCCCCC #AAAAAA;
+ -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%);
+}
+#volume-button .button:hover {
+ border-color:#999999;
+ -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
+ -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
+ box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
+}
+#volume-button .button:active {
+ border-color:#999999 #AAAAAA #CCCCCC;
+ -webkit-box-shadow: 0px 1px 2px 0px #aaa inset;
+ -moz-box-shadow: 0px 1px 2px 0px #aaa inset;
+ box-shadow: 0px 1px 2px 0px #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%);
+}
+#volume-button .button #icon {
+ margin: 1px;
+ width: 16px;
+ height: 16px;
+}
+#volume-button .button .volume-none {
+ background: url('/static/images/sprites.png') no-repeat 0 -112px;
+}
+#volume-button .button .volume-low {
+ background: url('/static/images/sprites.png') no-repeat -16px -112px;
+}
+#volume-button .button .volume-medium {
+ background: url('/static/images/sprites.png') no-repeat -32px -112px;
+}
+#volume-button .button .volume-high {
+ background: url('/static/images/sprites.png') no-repeat -48px -112px;
+}
+#volume-slider {
+ display: none;
+ height: 116px;
+ width: 20px;
+ top: -116px;
+ -webkit-border-radius:3px;
+ -moz-border-radius:3px;
+ border-radius:3px;
+ background: rgba(50, 50, 50, 0.1);
+ z-index: 1;
+}
+#volume-total, #volume-current {
+ left: 8px;
+ top: 8px;
+ width: 4px;
+ height: 100px;
+}
+#volume-total, #volume-current, #volume-handle {
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ border-radius: 2px;
+}
+#volume-total {
+ -webkit-box-shadow: inset 0px 0px 3px 0px #333;
+ -moz-box-shadow: inset 0px 0px 3px 0px #333;
+ box-shadow: inset 0px 0px 3px 0px #333;
+}
+#volume-current {
+ -webkit-box-shadow: inset 0px 0px 1px 0px #000;
+ -moz-box-shadow: inset 0px 0px 1px 0px #000;
+ box-shadow: inset 0px 0px 1px 0px #000;
+ background-color: #6184b7;
+}
+#volume-handle {
+ left: 1px;
+ width: 16px;
+ height: 4px;
+ background: #ddd;
+ background: rgba(255, 255, 255, 0.9);
+ cursor: N-resize;
+ border:1px solid #999;
+}
#summary {
text-align: center;
margin-bottom:18px;
}
#disclaimer {
position: absolute;
- left: 60px;
+ left: 60px;
bottom: 18px;
color: #BFBFBF;
width:340px;
// Prompt for name and send it.
setNickName: function(msg) {
- if (!msg) {
+ if (!msg) {
msg = "What's your name?";
var html = '<div class="modal-header"><h3>Welcome to Binb</h3></div>';
// Your submitted name was invalid
invalidNickName: function(data) {
- App.setNickName(data.feedback+"<br/>Try again:");
+ App.setNickName(data.feedback+"<br/>Try again:");
},
// You joined the game
App.addChatEntry(joinspan);
App.updateUsers(data);
- var messagebox = $("#message");
+ var messagebox = $("#message");
messagebox.keyup(function(event) {
if (event.keyCode === 13) {
var val = $.trim(messagebox.val());
// Update the list of users
updateUsers: function(data) {
- var elem = $("#users");
- elem.empty();
+ var elem = $("#users");
+ elem.empty();
var users = [];
for (var key in data.users) {
users.push(data.users[key]);
users.sort(function(a, b) {return b.points - a.points;});
// Flag to test if our private recipient is in the list of active users
var found = false;
- for (var i=0; i<users.length; i++) {
- var user = users[i];
- var li = $('<li></li>');
+ for (var i=0; i<users.length; i++) {
+ var user = users[i];
+ var li = $('<li></li>');
var pvt = $('<span class="private label label-info">P</span>');
var username = $('<span class="name"></span>').text(user.nickname);
var points = $('<span class="points">('+user.points+')</span>');
var roundrank = $('<span></span>');
var roundpoints = $('<span class="round-points"></span>');
li.append(pvt, username, points, roundrank, roundpoints);
- elem.append(li);
+ elem.append(li);
if (App.pvtmsgto === user.nickname) {
pvt.show();
username.click(App.clearPrivate);
username.addClass("correct");
}
}
- }
+ }
if (!found && App.pvtmsgto) {
var recipient = $('#recipient');
var width = recipient.outerWidth(true) + 1;
}
var recipient = $("#recipient");
recipient.css('margin-right','4px');
- recipient.text("To "+nickname+":");
+ recipient.text("To "+nickname+":");
var width = recipient.outerWidth(true) + 1;
recipient.hide();
$('#message').animate({'width':'-='+width+'px'}, "fast", function() {recipient.show();});
- var el = $("span.name:contains("+nickname+")");
+ var el = $("span.name:contains("+nickname+")");
el.prev().show();
el.unbind('click');
el.click(App.clearPrivate);
- App.pvtmsgto = nickname;
- $("#message").focus();
+ App.pvtmsgto = nickname;
+ $("#message").focus();
},
clearPrivate: function() {
var recipient = $("#recipient");
var width = recipient.outerWidth(true) + 1;
recipient.css('margin-right','0');
- recipient.text("");
+ recipient.text("");
$('#message').animate({'width':'+='+width+'px'}, "fast");
var el = $("span.name:contains("+App.pvtmsgto+")");
el.prev().hide();
el.unbind("click");
- el.click(function() {
+ el.click(function() {
App.addPrivate($(this).text());
});
App.pvtmsgto = null;
- $("#message").focus();
+ $("#message").focus();
},
// Receive a chat message
prefix = (App.nickname === data.from) ? '(To '+data.to+')' : '(From '+prefix+')';
msgspan.addClass("private");
}
- var msg = prefix+": "+data.chatmsg;
- msgspan.text(msg);
- App.addChatEntry(msgspan);
+ var msg = prefix+": "+data.chatmsg;
+ msgspan.text(msg);
+ App.addChatEntry(msgspan);
},
loadTrack: function(data) {
App.stopanimation = true;
$('#player').jPlayer("stop");
var errormsg = "ERROR: You have disconnected.";
- var errorspan = $("<span class='error'></span>");
+ var errorspan = $("<span class='error'></span>");
errorspan.text(errormsg);
- App.addChatEntry(errorspan);
+ App.addChatEntry(errorspan);
App.addFeedback('Something wrong happened');
- var users = $("#users");
- users.empty();
+ var users = $("#users");
+ users.empty();
},
// Add a chat entry, whether message, notification, etc.
addChatEntry: function(childNode) {
- var li = $("<li class='entry'></li>");
- li.append(childNode);
- var chat = $("#chat");
- chat.append(li);
- var chatRaw = document.getElementById("chat");
- chatRaw.scrollTop = chatRaw.scrollHeight;
+ var li = $("<li class='entry'></li>");
+ li.append(childNode);
+ var chat = $("#chat");
+ chat.append(li);
+ var chatRaw = document.getElementById("chat");
+ chatRaw.scrollTop = chatRaw.scrollHeight;
},
addFeedback: function(txt, style) {
$('#feedback').text(txt);
},
+ addVolumeControl: function() {
+ var volumebutton = $('<div id="volume-button">'+
+ '<a class="button"><div id="icon" class="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');
+ var volumeslider = volumebutton.find('#volume-slider');
+ var volumetotal = volumebutton.find('#volume-total');
+ var volumecurrent = volumebutton.find('#volume-current');
+ var volumehandle = volumebutton.find('#volume-handle');
+ var mouseisdown = false;
+ var mouseisover = false;
+ var oldvalue = 1;
+ var 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);
+ };
+
+ var handleIcon = function (volume) {
+ if (volume === 0) {
+ icon.removeClass().addClass('volume-none');
+ }
+ else if (volume <= 0.33) {
+ icon.removeClass().addClass('volume-low');
+ }
+ else if (volume <= 0.66) {
+ icon.removeClass().addClass('volume-medium');
+ }
+ else {
+ icon.removeClass().addClass('volume-high');
+ }
+ };
+
+ var handleVolumeMove = function(e) {
+ var totaloffset = volumetotal.offset();
+ var newy = e.pageY - totaloffset.top;
+ var railheight = volumetotal.height();
+ var totalTop = parseInt(volumetotal.css('top').replace(/px/,''),10);
+ var volume = (railheight - newy) / railheight;
+
+ if (newy < 0) {
+ newy = 0;
+ }
+ else if (newy > railheight) {
+ newy = railheight;
+ }
+
+ volumehandle.css('top', totalTop + newy - (volumehandle.height() / 2));
+ volumecurrent.height(railheight - newy);
+ volumecurrent.css('top',newy+totalTop);
+
+ volume = Math.max(0,volume);
+ volume = Math.min(volume,1);
+
+ handleIcon(volume);
+ oldvalue = volume;
+ $("#player").jPlayer("volume", volume);
+ };
+
+ volumebutton.hover(function() {
+ volumeslider.show();
+ mouseisover = true;
+ }, function() {
+ mouseisover = false;
+ if (!mouseisdown) {
+ volumeslider.hide();
+ }
+ });
+
+ volumeslider.on('mouseover', function() {
+ mouseisover = true;
+ }).on('mousedown', function (e) {
+ handleVolumeMove(e);
+ mouseisdown = true;
+ return false;
+ });
+
+ $(document).on('mouseup', function (e) {
+ mouseisdown = false;
+ if (!mouseisover) {
+ volumeslider.hide();
+ }
+ }).on('mousemove', function (e) {
+ if (mouseisdown) {
+ handleVolumeMove(e);
+ }
+ });
+
+ volumebutton.find('.button').click(function() {
+ if (!clicked) {
+ clicked = true;
+ if (oldvalue !== 0) {
+ $("#player").jPlayer("volume", 0);
+ positionVolumeHandle(0);
+ handleIcon(0);
+ }
+ }
+ else {
+ clicked = false;
+ if (oldvalue !== 0) {
+ $("#player").jPlayer("volume", oldvalue);
+ positionVolumeHandle(oldvalue);
+ handleIcon(oldvalue);
+ }
+ }
+ });
+ positionVolumeHandle(1);
+ },
+
// Set up the App object.
init: function() {
$('#modal').modal({keyboard:false,show:false,backdrop:"static"});
}
});
}
- App.socket = io.connect("http://binb.nodejitsu.com/", {'reconnect':false});
+ App.socket = io.connect("http://binb.nodejitsu.com/", {'reconnect':false});
App.socket.on("connect", function() {
$("#player").jPlayer({
ready: function() {
App.setNickName();
+ if (!$.jPlayer.platform.mobile && !$.jPlayer.platform.tablet) {
+ App.addVolumeControl();
+ }
},
swfPath: "/static/swf/",
supplied: "m4a",
});
App.socket.on('invalidnickname', App.invalidNickName);
App.socket.on('ready', App.ready);
- App.socket.on("disconnect", App.disconnect);
+ App.socket.on("disconnect", App.disconnect);
}
};
projects / binbsis50.git / commitdiff
