From 788ab6a1f8a77cc34f8ea8a7fb48573b109c6a6f Mon Sep 17 00:00:00 2001 From: Luigi Pinca Date: Sun, 15 Jun 2014 23:12:05 +0200 Subject: [PATCH] updated code style --- package.json | 4 +- public/css/style.css | 4 +- public/js/app.js | 861 +++++++++++++++++++++----------------- public/js/home.js | 4 +- public/js/leaderboards.js | 31 +- 5 files changed, 497 insertions(+), 407 deletions(-) diff --git a/package.json b/package.json index 607a1f5..1c5e738 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "connect-redis": "2.0.x", "cookie-parser": "1.1.x", "express": "4.4.x", - "express-session": "1.2.x", + "express-session": "1.3.x", "forwarded-for": "0.0.x", "jade": "1.3.x", "nodemailer": "0.6.x", @@ -35,5 +35,5 @@ "start": "node app.js" }, "subdomain": "binb", - "version": "0.5.0-4" + "version": "0.5.1" } diff --git a/public/css/style.css b/public/css/style.css index 5f1045f..2bad6db 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -692,10 +692,10 @@ form .clearfix { #feedback { text-align: center; } -#feedback .correct, #users .correct{ +#feedback.correct, #users .correct{ color: #46A546; } -#feedback .wrong, #chat .error { +#feedback.wrong, #chat .error { color: #C43C35; } #guess.correct { diff --git a/public/js/app.js b/public/js/app.js index aa69903..fa8a902 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -1,21 +1,39 @@ (function() { - var elapsedtime = 0 - , DOM = {} + var $cassettewheels = $('#cassette .wheel') + , $chat = $('#chat') + , $chatwrapper = $('#chat-outer-wrapper') + , $countdown = $('#countdown') + , $feedback = $('#feedback') + , $guessbox = $('#guess') + , $jplayer + , $messagebox = $('#message') + , $modal = $('#modal') + , $points = $('#summary .points') + , $progress = $('#progress') + , $rank = $('#summary .rank') + , $recipient = $('#recipient') + , $tapeleft = $('#tape-left') + , $taperight = $('#tape-right') + , $togglechat = $('#toggle-chat') + , $touchplay + , $track = $('#summary .track') + , $tracks = $('#tracks') + , $users = $('#users') + , elapsedtime = 0 , historycursor = 0 , historyvalues = [] , ignoredplayers = {} , isplaying - , jplayer , nickname + , primus , pvtmsgto - , subscriber = false - , roundpoints = 0 , roomname = location.pathname.replace(/\//g, '') - , primus + , roundpoints = 0 + , subscriber = false , timer - , touchplay - , urlregex = /(https?:\/\/[\-A-Za-z0-9+&@#\/%?=~_()|!:,.;]*[\-A-Za-z0-9+&@#\/%=~_()|])/; + , urlregex = /(https?:\/\/[\-A-Za-z0-9+&@#\/%?=~_()|!:,.;]*[\-A-Za-z0-9+&@#\/%=~_()|])/ + , userscounters = {}; var amstrings = [ 'Do you also know the title?' @@ -80,56 +98,59 @@ }; // Add a chat entry, whether message, notification, etc. - var addChatEntry = function(childNode) { - var li = $('
  • '); - li.append(childNode); - DOM.chat.append(li); - DOM.chat[0].scrollTop = DOM.chat[0].scrollHeight; + var addChatEntry = function($childNode) { + var $entry = $('
  • '); + $entry.append($childNode); + $chat.append($entry); + $chat[0].scrollTop = $chat[0].scrollHeight; }; var addFeedback = function(txt, style) { - if (typeof style === 'string') { - var fbspan = $(''); - fbspan.text(txt); - DOM.feedback.html(fbspan); - DOM.guessbox.addClass(style); - setTimeout(function() {DOM.guessbox.removeClass(style);}, 350); - return; + $feedback.removeClass().text(txt); + + if (style) { + $feedback.addClass(style); + $guessbox.addClass(style); + + setTimeout(function() { + $guessbox.removeClass(style); + }, 350); } - DOM.feedback.text(txt); }; var addPrivate = function(usrname) { + $messagebox.focus(); + if (pvtmsgto) { clearPrivate(); } + if (nickname === usrname) { return; } - DOM.recipient.css('margin-right', '4px'); - DOM.recipient.text('To '+usrname+':'); - var width = DOM.recipient.outerWidth(true) + 1; - DOM.recipient.hide(); - DOM.messagebox.animate({'width':'-='+width+'px'}, 'fast', function() { - DOM.recipient.show(); + + pvtmsgto = usrname; + + $recipient.css('margin-right', '4px'); + $recipient.text('To ' + usrname + ':'); + var width = $recipient.outerWidth(true) + 1; + $recipient.hide(); + $messagebox.animate({ 'width': '-=' + width + 'px' }, 'fast', function() { + $recipient.show(); }); - var el = $('.name').filter(function(index) { + + var $el = $('.name').filter(function() { return $(this).text() === usrname; }); - el.prevAll('.private').show(); - el.unbind('click'); - el.click(clearPrivate); - pvtmsgto = usrname; - DOM.messagebox.focus(); + $el.prevAll('.private').show(); + $el.off('click').on('click', clearPrivate); }; // Add track info var addTrackInfo = function(data) { - if (touchplay) { - touchplay - .html(' Wait') - .removeClass('btn-success') - .addClass('btn-danger disabled'); + if ($touchplay) { + $touchplay.removeClass('btn-success').addClass('btn-danger disabled'); + $touchplay.html(' Wait'); } isplaying = false; @@ -142,60 +163,75 @@ , rp = ''; if (roundpoints > 0) { - rp = '+'+roundpoints; + rp = '+' + roundpoints; if (roundpoints > 3) { var stand = 7 - roundpoints; - attrs += 'class="icons round-rank stand'+stand+'"'; + attrs += 'class="icons round-rank stand' + stand + '"'; } } - var html = '
  • '; - html += '
    '+artistName+'
    '; - html += '
    '+trackName+'
    '; - html += '
    '+rp+'
    '; - html += '
    • '; - - DOM.tracks.prepend($(html)); + var html = [ + '
  • ' + , '' + , '
    ' + , '
    ' + artistName + '
    ' + , '
    ' + trackName + '
    ' + , '
    ' + , '
    ' + , '
    ' + rp + '
    ' + , '' + , '
    • ' + ].join(''); + + $tracks.prepend(html); }; var addVolumeControl = function() { - var volumebutton = $('
    '+ - '
    '+ - '
    '+ // Outer background - '
    '+ // Rail - '
    '+ // Current volume - '
    '+ // Handle - '
    ').appendTo('#volume'); - - var clicked = false - , icon = volumebutton.find('#icon') + var html = [ + '
    ' + , '' + , '
    ' + , '    ' + , '
    ' // Outer background + , '
    ' // Rail + , '
    ' // Current volume + , '
    ' // Handle + , '
    ' + , '
    ' + ].join(''); + + var $volumebutton = $(html) + , $icon = $volumebutton.find('#icon') + , $volumecurrent = $volumebutton.find('#volume-current') + , $volumehandle = $volumebutton.find('#volume-handle') + , $volumeslider = $volumebutton.find('#volume-slider') + , $volumetotal = $volumebutton.find('#volume-total') + , clicked = false , mouseisdown = false , mouseisover = false - , oldvalue = 1 - , volumecurrent = volumebutton.find('#volume-current') - , volumehandle = volumebutton.find('#volume-handle') - , volumeslider = volumebutton.find('#volume-slider') - , volumetotal = volumebutton.find('#volume-total'); + , oldvalue = 1; - var handleIcon = function (volume) { + $volumebutton.appendTo('#volume'); + + var handleIcon = function(volume) { if (volume === 0) { - icon.removeClass().addClass('icons volume-none'); + $icon.removeClass().addClass('icons volume-none'); } else if (volume <= 0.33) { - icon.removeClass().addClass('icons volume-low'); + $icon.removeClass().addClass('icons volume-low'); } else if (volume <= 0.66) { - icon.removeClass().addClass('icons volume-medium'); + $icon.removeClass().addClass('icons volume-medium'); } else { - icon.removeClass().addClass('icons volume-high'); + $icon.removeClass().addClass('icons volume-high'); } }; var handleVolumeMove = function(e) { - var railheight = volumetotal.height() - , totaloffset = volumetotal.offset() - , totalTop = parseInt(volumetotal.css('top').replace(/px/, ''), 10) + var railheight = $volumetotal.height() + , totaloffset = $volumetotal.offset() + , totalTop = parseInt($volumetotal.css('top').replace(/px/, ''), 10) , newy = e.pageY - totaloffset.top , volume = (railheight - newy) / railheight; @@ -208,9 +244,9 @@ newy = railheight; } - volumecurrent.height(railheight - newy); - volumecurrent.css('top', newy + totalTop); - 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); @@ -218,75 +254,67 @@ setVolume(volume); }; - var loadFromCookie = function() { - if (/volume\s*\=/.test(document.cookie)) { - var value = document.cookie.replace(/.*volume\s*\=\s*([^;]*);?.*/, '$1'); - value = parseFloat(value); - positionVolumeHandle(value); - setVolume(value); - return; - } - positionVolumeHandle(1); - }; - var positionVolumeHandle = function(volume) { - if (!volumeslider.is(':visible')) { - volumeslider.show(); + if (!$volumeslider.is(':visible')) { + $volumeslider.show(); positionVolumeHandle(volume); - volumeslider.hide(); - return; + return $volumeslider.hide(); } - 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 totalheight = $volumetotal.height() + , totalposition = $volumetotal.position() + , 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()+';'; + document.cookie = 'volume=' + volume + ';path=/;expires=' + d.toGMTString() + ';'; }; var setVolume = function(volume) { handleIcon(volume); - jplayer.jPlayer('volume', volume); + $jplayer.jPlayer('volume', volume); oldvalue = volume; setCookie(volume); }; - volumebutton.find('.button').click(function() { + $volumebutton.find('.button').on('click', function() { if (!clicked) { clicked = true; + if (oldvalue !== 0) { handleIcon(0); - jplayer.jPlayer('volume', 0); + $jplayer.jPlayer('volume', 0); positionVolumeHandle(0); } + return; } - else { - clicked = false; - if (oldvalue !== 0) { - handleIcon(oldvalue); - jplayer.jPlayer('volume', oldvalue); - positionVolumeHandle(oldvalue); - } + + clicked = false; + + if (oldvalue !== 0) { + handleIcon(oldvalue); + $jplayer.jPlayer('volume', oldvalue); + positionVolumeHandle(oldvalue); } }); - volumebutton.hover(function() { + $volumebutton.hover(function() { mouseisover = true; - volumeslider.show(); + $volumeslider.show(); }, function() { mouseisover = false; if (!mouseisdown) { - volumeslider.hide(); + $volumeslider.hide(); } }); - volumeslider.on('mouseover', function() { + $volumeslider.on('mouseover', function() { mouseisover = true; }).on('mousedown', function(e) { handleVolumeMove(e); @@ -294,10 +322,10 @@ return false; }); - $(document).on('mouseup', function(e) { + $(document).on('mouseup', function() { mouseisdown = false; if (!mouseisover) { - volumeslider.hide(); + $volumeslider.hide(); } }).on('mousemove', function(e) { if (mouseisdown) { @@ -305,17 +333,35 @@ } }); - loadFromCookie(); + (function() { + if (/volume\s*\=/.test(document.cookie)) { + var value = document.cookie.replace(/.*volume\s*\=\s*([^;]*);?.*/, '$1'); + value = parseFloat(value); + positionVolumeHandle(value); + return setVolume(value); + } + + positionVolumeHandle(1); + })(); }; // Called when a registered user already in a room, tries to enter in another room var alreadyInARoom = function() { - var html = '

    Already in a room

    '; - html += '
    '; - html += '

    Warning!

    You are already in a room.
    '; - html += 'Leave the other room and refresh this page or close this one.
    '; - $(html).appendTo(DOM.modal); - DOM.modal.modal('show'); + var html = [ + '
    ' + , '

    Already in a room

    ' + , '
    ' + , '
    ' + , '
    ' + , '

    Warning!

    ' + , 'You are already in a room.
    ' + , 'Leave the other room and refresh this page or close this one.' + , '
    ' + , '
    ' + ].join(''); + + $(html).appendTo($modal); + $modal.modal('show'); }; // Start cassette animation @@ -338,10 +384,10 @@ } if (forward) { - if (touchplay) { + if ($touchplay) { elapsedtime = 30 - Math.round(secleft); } - DOM.countdown.text(secleft.toFixed(1)); + $countdown.text(secleft.toFixed(1)); factor = secleft / 30; width = 148 - 148 * factor; deg = -360 + 360 * factor; @@ -349,7 +395,7 @@ offsetright = 106 + 24 * factor; } else { - DOM.countdown.text(Math.round(secleft)); + $countdown.text(Math.round(secleft)); factor = secleft / 5; width = 148 * factor; deg = -360 * factor; @@ -357,82 +403,107 @@ offsetright = 130 - 24 * factor; } - DOM.progress.width(width); - DOM.cassettewheels.css('transform', 'rotate('+deg+'deg)'); - DOM.tapeleft.css('left', offsetleft+'px'); - DOM.taperight.css('left', offsetright+'px'); + $cassettewheels.css('transform', 'rotate(' + deg + 'deg)'); + $progress.width(width); + $tapeleft.css('left', offsetleft + 'px'); + $taperight.css('left', offsetright + 'px'); })(); timer = setInterval(step, 50); }; var clearPrivate = function() { - var width = DOM.recipient.outerWidth(true) + 1; - DOM.recipient.css('margin-right', '0'); - DOM.recipient.text(''); - DOM.messagebox.animate({'width':'+='+width+'px'}, 'fast'); - var el = $('.name').filter(function(index) { + var width = $recipient.outerWidth(true) + 1; + $recipient.css('margin-right', '0'); + $recipient.text(''); + $messagebox.animate({ 'width': '+=' + width + 'px' }, 'fast'); + + var $el = $('.name').filter(function() { return $(this).text() === pvtmsgto; }); - el.prevAll('.private').hide(); - el.unbind('click'); - el.click(function() { + $el.prevAll('.private').hide(); + $el.off('click').on('click', function() { addPrivate($(this).text()); }); - pvtmsgto = null; - DOM.messagebox.focus(); + + pvtmsgto = ''; + $messagebox.focus(); }; // Game over countdown var countDown = function(endtime) { - var millisleft = endtime - Date.now(); - var secleft = millisleft / 1000; + var millisleft = endtime - Date.now() + , secleft = millisleft / 1000; + $('.modal-footer span').text(Math.round(secleft)); + if (millisleft < 200) { return; } - setTimeout(function() {countDown(endtime);}, 200); + + setTimeout(function() { + countDown(endtime); + }, 200); }; // Let the user know when he/she has disconnected var disconnect = function() { clearInterval(timer); - jplayer.jPlayer('stop'); - var errorspan = $('ERROR: You have disconnected.'); - addChatEntry(errorspan); + $jplayer.jPlayer('stop'); + addChatEntry($('ERROR: You have disconnected.')); addFeedback('Something wrong happened'); - DOM.users.empty(); + $users.empty(); }; var gameOver = function(podium) { - var html = '

    Game Over

    '; - html += '
    '; - html += ''; - html += ''; - html += ''; - html += ''; - html += ''; + var html = [ + '
    ' + , '

    Game Over

    ' + , '
    ' + , '
    ' + , '
    #NamePoints
    		GuessedMean time
    ' + , '' + , '' + , '' + , '' + , '' + , '' + , '' + , '' + , '' + , '' + , '' + , '' + , '' + ]; podium.forEach(function(player, i) { - html += ''; - html += ''; - html += ''; - html += ''; - html += ''; + html.push(''); + html.push(''); + html.push(''); + html.push(''); + html.push(''); + html.push(''); + html.push(''); + html.push(''); + var meantime = 'N/A'; if (player.guessed !== 0) { meantime = player.totguesstime / player.guessed; - meantime = (meantime / 1000).toFixed(1)+' s'; + meantime = (meantime / 1000).toFixed(1) + ' s'; } - html += ''; + + html.push(''); + html.push(''); }); - html +='
    #NamePoints
    		GuessedMean time
    		'+player.nickname+''+player.points+''+player.golds+''+player.silvers+''+player.bronzes+''+player.guessed+'
    		' + player.nickname + '' + player.points + '' + player.golds + '' + player.silvers + '' + player.bronzes + '' + player.guessed + ''+meantime+'
    ' +meantime + '
    '; - html += '
    A new game will start in '; - html += ' second/s
    '; - DOM.modal.append($(html)); - DOM.modal.modal('show'); - countDown(Date.now()+10000); + html.push('', '', ''); + html.push('
    '); + html.push('A new game will start in second/s'); + html.push('
    '); + + $modal.append(html.join('')).modal('show'); + countDown(Date.now() + 10000); }; // Receive a chat message @@ -440,39 +511,44 @@ if (ignoredplayers[from]) { return; } - var prefix = from; - var msgspan = $(''); + + var $message = $('') + , prefix = from; + if (to) { // Private Message - prefix = (nickname === from) ? '(To '+to+')' : '(From '+prefix+')'; - msgspan.addClass('private'); + prefix = '(' + (nickname === from ? 'To ' + to : 'From ' + prefix) + ')'; + $message.addClass('private'); } - var msg = prefix+': '+chatmsg.replace(/<3/g, '♥'); - msgspan.html(urlize(msg)); - addChatEntry(msgspan); + + var msg = prefix + ': ' + chatmsg.replace(/<3/g, '♥'); + $message.html(urlize(msg)); + addChatEntry($message); }; var hideChat = function() { - DOM.togglechat.text('Show chat').unbind('click'); - DOM.chatwrapper.toggle(300); - DOM.tracks.animate({maxHeight:'434px'}, 300); - DOM.togglechat.click(showChat); + $chatwrapper.toggle(300); + $togglechat.text('Show chat'); + $togglechat.off('click').on('click', showChat); + $tracks.animate({ maxHeight: '434px' }, 300); }; // Put a player in the ignore list - var ignorePlayer = function(args, outcome) { + var ignorePlayer = function(args, $outcome) { if (ignoredplayers[args[0]]) { - outcome.text('(From binb): '+args[0]+' is already ignored.'); - return addChatEntry(outcome); + $outcome.text('(From binb): ' + args[0] + ' is already ignored.'); + return addChatEntry($outcome); } + primus.send('ignore', args[0], function(ignored, player) { if (ignored) { ignoredplayers[player] = true; - outcome.text('(From binb): '+player+' is now ignored.'); - return addChatEntry(outcome); + $outcome.text('(From binb): ' + player + ' is now ignored.'); + return addChatEntry($outcome); } - outcome.append('player not found.'); - addChatEntry(outcome); + + $outcome.append('player not found.'); + addChatEntry($outcome); }); }; @@ -489,46 +565,57 @@ return primus.send('joinunauthenticated', nickname, roomname); } - if (DOM.modal.hasClass('in')) { + if ($modal.hasClass('in')) { $('.modal-body p').html(msg); return $('#login').focus(); } - var html = '
    '; - html += '

    You are joining the '+roomname+' room

    '; - html += '

    '+(msg || 'What\'s your name?')+'

    '; - html += '
    '; - html += ''; - html += ''; - html += 'or'; - html += ''; - html += ' Login
    '; - - $(html).appendTo(DOM.modal); - var login = $('#login'); - var button = $('#join'); - - button.click(function() { - if ($.trim(login.val()) !== '') { - nickname = login.val(); - primus.send('joinunauthenticated', nickname, roomname); - } - else { - invalidNickName('Nickname can\'t be empty.'); + var html = [ + '
    ' + , '

    You are joining the ' + roomname + ' room

    ' + , '
    ' + , '
    ' + , '

    ' + (msg || 'What\'s your name?') + '

    ' + , '
    ' + , '
    ' + , '' + , '' + , '' + , 'or' + , '' + , '' + , ' Login' + , '' + , '
    ' + ].join(''); + + $(html).appendTo($modal); + + var $button = $('#join') + , $login = $('#login'); + + $button.on('click', function() { + var value = $login.val(); + $login.val(''); + + if ($.trim(value)) { + nickname = value; + return primus.send('joinunauthenticated', nickname, roomname); } - login.val(''); + + invalidNickName('Nickname can\'t be empty.'); }); - login.keyup(function(event) { + $login.on('keyup', function(event) { if (event.keyCode === 13) { - button.click(); + $button.click(); } }); - DOM.modal.modal('show'); - DOM.modal.on('shown', function() { - login.focus(); + $modal.modal('show').on('shown', function() { + $login.focus(); }); }; @@ -539,28 +626,38 @@ subscriber = true; return primus.send('joinauthenticated', roomname); } + joinUnauthenticated(); }); + if (!$.jPlayer.platform.mobile && !$.jPlayer.platform.tablet) { return addVolumeControl(); } - var touchbackdrop = $('
    '+ - '
    ').appendTo('#cassette'); - touchplay = $('#touch-play'); - touchplay.click(function() { + + var html = [ + '
    ' + , '' + , '
    ' + ].join(''); + + var $touchbackdrop = $(html); + $touchbackdrop.appendTo('#cassette'); + + $touchplay = $('#touch-play'); + $touchplay.on('click', function() { if (!$(this).hasClass('btn-danger')) { - touchplay = null; - jplayer.jPlayer('play', elapsedtime); - touchbackdrop.remove(); + $jplayer.jPlayer('play', elapsedtime); + $touchbackdrop.remove(); + $touchplay = null; } }); }; var loadTrack = function(previewUrl) { - jplayer.jPlayer('mute'); - jplayer.jPlayer('setMedia', {m4a: previewUrl}); + $jplayer.jPlayer('mute'); + $jplayer.jPlayer('setMedia', { m4a: previewUrl }); }; /** @@ -573,18 +670,22 @@ var inquotes = false , token = '' , tokens = []; + for (var i = 0; i < input.length; i++) { if (input[i] === '\\') { if (++i === input.length) { throw new Error('SyntaxError: Unexpected end of input'); } + if (input[i] === '\\' || input[i] === '"' || !inquotes) { token += input[i]; continue; } + token += '\\'+input[i]; continue; } + if (input[i] === '"') { inquotes = !inquotes; var j = i + 1; @@ -595,6 +696,7 @@ } continue; } + if (input[i] === ' ') { if (inquotes) { token += ' '; @@ -605,49 +707,51 @@ } continue; } + token += input[i]; } + if (inquotes) { throw new Error('SyntaxError: Unexpected end of input'); } + if (token.length) { tokens.push(token); } + return tokens; }; // Play a track var playTrack = function(data) { - if (touchplay) { - touchplay - .html(' Play') - .removeClass('btn-danger disabled') - .addClass('btn-success'); + if ($touchplay) { + $touchplay.html(' Play'); + $touchplay.removeClass('btn-danger disabled').addClass('btn-success'); } - jplayer.jPlayer('unmute'); - jplayer.jPlayer('play'); - DOM.guessbox.val(''); + $jplayer.jPlayer('unmute'); + $jplayer.jPlayer('play'); + $guessbox.val(''); isplaying = true; clearInterval(timer); cassetteAnimation(Date.now() + 30000, true); updateUsers(data.users); if (data.counter === 1) { - DOM.modal.modal('hide').empty(); - DOM.tracks.empty(); + $modal.modal('hide').empty(); + $tracks.empty(); } - DOM.track.text(data.counter + '/' + data.tot); + $track.text(data.counter + '/' + data.tot); addFeedback('What is this song?'); }; // Return a function that will kick or ban a player var punishPlayer = function(punishment) { - return function(tokens, outcome) { - outcome.append('you are not allowed to ' + punishment + ' a player.'); + return function(tokens, $outcome) { + $outcome.append('you are not allowed to ' + punishment + ' a player.'); if (!subscriber) { - return addChatEntry(outcome); + return addChatEntry($outcome); } var args = [punishment, tokens[0]]; @@ -672,7 +776,7 @@ args.push(function(success) { if (!success) { - addChatEntry(outcome); + addChatEntry($outcome); } }); @@ -683,9 +787,11 @@ // Return a function that will add a random text from the given set, with the given style var randomFeedback = function(set, style) { var card = set.length; + return function() { var index = Math.floor(Math.random() * card) , text = set[index]; + addFeedback(text, style); }; }; @@ -693,76 +799,74 @@ // Successfully joined the room var ready = function(usersData, trackscount, loggedin) { if (!loggedin && !/nickname\s*\=/.test(document.cookie)) { - document.cookie = 'nickname='+nickname+';path=/;'; + document.cookie = 'nickname=' + nickname + ';path=/;'; } - DOM.modal.modal('hide').empty(); + $modal.modal('hide').empty(); $('#total-tracks span').text(trackscount); - var msg = nickname+' joined the game'; - var joinspan = $(''); - joinspan.text(msg); - addChatEntry(joinspan); + + var $entry = $('' + nickname + ' joined the game'); + addChatEntry($entry); updateUsers(usersData); - DOM.messagebox.keydown(function(event) { + $messagebox.on('keydown', function(event) { if (event.keyCode === 13) { - var val = $.trim(DOM.messagebox.val()); - if (val !== '') { + var value = $.trim($messagebox.val()); + $messagebox.val(''); + + if (value) { if (pvtmsgto) { - primus.send('chatmsg', val, pvtmsgto); + return primus.send('chatmsg', value, pvtmsgto); } - else if (/^\/[^ ]/.test(val)) { - slashCommandHandler(val); - } - else { - primus.send('chatmsg', val); + + if (/^\/[^ ]/.test(value)) { + return slashCommandHandler(value); } + + primus.send('chatmsg', value); } - DOM.messagebox.val(''); } }); - DOM.guessbox.keydown(function(event) { + $guessbox.on('keydown', function(event) { switch (event.keyCode) { case 13: // return - var guess = $.trim(DOM.guessbox.val()); - if (guess !== '') { - if (isplaying) { - primus.send('guess', guess.toLowerCase()); - } - else { - addFeedback('You have to wait the next song...'); - } + var guess = $.trim($guessbox.val()); + $guessbox.val(''); + + if (guess) { historyvalues.push(guess); if (historyvalues.length > 20) { historyvalues.splice(0, 1); } historycursor = historyvalues.length; + + if (isplaying) { + return primus.send('guess', guess.toLowerCase()); + } + + addFeedback('You have to wait the next song...'); } - DOM.guessbox.val(''); + break; case 38: // up-arrow if (historycursor > 0) { - DOM.guessbox.val(historyvalues[--historycursor]); + $guessbox.val(historyvalues[--historycursor]); } + // Prevent default action to keep the cursor at the end of the word return false; case 40: // down-arrow if (historycursor < historyvalues.length - 1) { - DOM.guessbox.val(historyvalues[++historycursor]); - } - else { - historycursor = historyvalues.length; - DOM.guessbox.val(''); + return $guessbox.val(historyvalues[++historycursor]); } - } - }); - DOM.guessbox.on('paste', function(event) { + historycursor = historyvalues.length; + $guessbox.val(''); + } + }).on('paste', function(event) { event.preventDefault(); - }); - - DOM.guessbox.focus(); + }).focus(); primus.on('artistmatched', randomFeedback(amstrings, 'correct')); primus.on('bothmatched', randomFeedback(bmstrings, 'correct')); @@ -784,11 +888,13 @@ // Show the number of players inside each room var roomsOverview = function(data) { - for (var prop in data) { - if (prop !== roomname) { - DOM.userscounters[prop].text(data[prop]); - } - } + $('.users-counter').each(function() { + var room = $(this).prevAll('.room-name').text(); + userscounters[room] = $(this); + $(this).text(data[room]); + }); + + primus.on('updateoverview', updateRoomsOverview); }; var setStatus = function(data) { @@ -803,210 +909,194 @@ addFeedback(states[data.status]); }; - var setVariables = function() { - DOM.cassettewheels = $('#cassette .wheel'); - DOM.chat = $('#chat'); - DOM.chatwrapper = $('#chat-outer-wrapper'); - DOM.countdown = $('#countdown'); - DOM.feedback = $('#feedback'); - DOM.guessbox = $('#guess'); - DOM.messagebox = $('#message'); - DOM.modal = $('#modal'); - DOM.points = $('#summary .points'); - DOM.progress = $('#progress'); - DOM.rank = $('#summary .rank'); - DOM.recipient = $('#recipient'); - DOM.tapeleft = $('#tape-left'); - DOM.taperight = $('#tape-right'); - DOM.togglechat = $('#toggle-chat'); - DOM.track = $('#summary .track'); - DOM.tracks = $('#tracks'); - DOM.users = $('#users'); - DOM.userscounters = {}; - $('.users-counter').each(function() { - DOM.userscounters[$(this).prevAll('.room-name').text()] = $(this); - }); - }; - 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; + $chatwrapper.toggle(300); + $togglechat.text('Hide chat'); + $togglechat.off('click').on('click', hideChat); + $tracks.animate({ maxHeight: '240px' }, 300, function() { + $chat[0].scrollTop = $chat[0].scrollHeight; }); - DOM.togglechat.click(hideChat); }; var slashCommandHandler = function(line) { - var args; - var outcome = $('(From binb): '); + var $outcome = $('(From binb): ') + , args; try { args = parseCommand(line); } catch (err) { - outcome.append(err.message); - return addChatEntry(outcome); + $outcome.append(err.message); + return addChatEntry($outcome); } - var cmdname = args.shift(); - var command = slashcommands[cmdname.substr(1)]; + var cmdname = args.shift() + , command = slashcommands[cmdname.substr(1)]; if (command) { if (args.length < command.minargs) { - outcome.append(command.usage); - return addChatEntry(outcome); + $outcome.append(command.usage); + return addChatEntry($outcome); } + if (command.checkrecipient && (!args[0] || args[0] === nickname)) { - outcome.append('invalid argument.'); - return addChatEntry(outcome); + $outcome.append('invalid argument.'); + return addChatEntry($outcome); } - return command.fn(args, outcome); + + return command.fn(args, $outcome); } - outcome.text('(From binb): unknown command '+cmdname+'.'); - addChatEntry(outcome); + $outcome.text('(From binb): unknown command ' + cmdname + '.'); + addChatEntry($outcome); }; // Unban a player - var unbanPlayer = function(args, outcome) { - outcome.append('you are not allowed to unban a player.'); + var unbanPlayer = function(args, $outcome) { + $outcome.append('you are not allowed to unban a player.'); if (!subscriber) { - return addChatEntry(outcome); + return addChatEntry($outcome); } primus.send('unban', args[0], function(success) { if (!success) { - addChatEntry(outcome); + addChatEntry($outcome); } }); }; // Remove a player from the ignore list - var unignorePlayer = function(args, outcome) { + var unignorePlayer = function(args, $outcome) { if (!ignoredplayers[args[0]]) { - outcome.text('(From binb): you have not ignored '+args[0]+'.'); - return addChatEntry(outcome); + $outcome.text('(From binb): you have not ignored ' + args[0] + '.'); + return addChatEntry($outcome); } + delete ignoredplayers[args[0]]; primus.send('unignore', args[0]); - outcome.text('(From binb): '+args[0]+' is no longer ignored.'); - addChatEntry(outcome); + $outcome.text('(From binb): ' + args[0] + ' is no longer ignored.'); + addChatEntry($outcome); }; // Update the list of players var updateUsers = function(usersData) { - DOM.users.empty(); + $users.empty(); var users = []; for (var key in usersData) { users.push(usersData[key]); } - users.sort(function(a, b) {return b.points - a.points;}); + 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') - , pvt = $('P') - , username = $('').text(user.nickname) - , points = $('('+user.points+')') - , roundrank = $('') - , roundpointsel = $('') - , guesstime = $(''); - - li.append(pvt, username, points, roundrank, roundpointsel, guesstime); + + users.forEach(function(user, index) { + var $guesstime = $('') + , $li = $('
  • ') + , $pnts = $('(' + user.points + ')') + , $pvt = $('P') + , $roundpoints = $('') + , $roundrank = $('') + , $username = $('' + user.nickname + ''); + + $li.append($pvt, $username, $pnts, $roundrank, $roundpoints, $guesstime); + if (user.registered) { - var href = 'href="/user/'+user.nickname+'"'; - pvt.after(''); + var href = 'href="/user/' + user.nickname + '"'; + $pvt.after(''); } - DOM.users.append(li); + + $users.append($li); if (pvtmsgto === user.nickname) { - pvt.show(); - username.click(clearPrivate); + $pvt.show(); + $username.on('click', clearPrivate); found = true; } else { - username.click(function() { + $username.on('click', function() { addPrivate($(this).text()); }); } if (nickname === user.nickname) { - username.addClass('you'); + $points.text(user.points); + $rank.text(index + 1); + $username.addClass('you'); roundpoints = user.roundpoints; - DOM.rank.text(i+1); - DOM.points.text(user.points); } if (user.roundpoints > 0) { - roundpointsel.text('+'+user.roundpoints); + $roundpoints.text('+' + user.roundpoints); + if (user.roundpoints === 1) { - username.addClass('matched'); + $username.addClass('matched'); } else { + $username.addClass('correct'); + if (user.roundpoints > 3) { - var stand = 7 - user.roundpoints; - roundrank.addClass('icons round-rank stand'+stand); - var gtime = (user.guesstime / 1000).toFixed(1); - guesstime.text(gtime+' s'); + $guesstime.text((user.guesstime / 1000).toFixed(1) +' s'); + $roundrank.addClass('icons round-rank stand' + (7 - user.roundpoints)); } - username.addClass('correct'); } } - } + }); if (!found && pvtmsgto) { - var width = DOM.recipient.outerWidth(true) + 1; - DOM.recipient.css('margin-right', '0'); - DOM.recipient.text(''); - DOM.messagebox.animate({'width':'+='+width+'px'}, 'fast'); - pvtmsgto = null; - DOM.messagebox.focus(); + pvtmsgto = ''; + + var width = $recipient.outerWidth(true) + 1; + $recipient.css('margin-right', '0'); + $recipient.text(''); + $messagebox.animate({ 'width': '+=' + width + 'px' }, 'fast'); } }; var updateRoomsOverview = function(room, players) { if (room !== roomname) { - DOM.userscounters[room].text(players); + userscounters[room].text(players); } }; // Convert any URLs in text into clickable links var urlize = function(text) { if (urlregex.test(text)) { - var html = ''; - var splits = text.split(urlregex); - for (var i=0; i'+escapedsplit+''; + html += '' + + escapedsplit + ''; continue; } + html += escapedsplit; } + return html; } + return text.encodeEntities(); }; // A new player has joined the game var userJoin = function(username, usersData) { - var joinmsg = username+' joined the game'; - var joinspan = $(''); - joinspan.text(joinmsg); - addChatEntry(joinspan); + var $entry = $('' + username +' joined the game'); + addChatEntry($entry); updateUsers(usersData); }; // A player has left the game var userLeft = function(username, usersData) { - var leftmsg = username+' left the game'; - var leftspan = $(''); - leftspan.text(leftmsg); - addChatEntry(leftspan); + var $entry = $('' + username +' left the game'); + addChatEntry($entry); updateUsers(usersData); }; @@ -1019,7 +1109,7 @@ }, clear: { fn: function() { - DOM.chat.empty(); + $chat.empty(); }, minargs: 0 }, @@ -1048,18 +1138,18 @@ } }; - // Set up the app - setVariables(); - DOM.modal.modal({ + $modal.modal({ backdrop: 'static', keyboard: false, show: false }); - DOM.togglechat.click(hideChat); + $togglechat.click(hideChat); + + // Open the realtime connection primus = Primus.connect({ strategy: false }); primus.on('open', function() { - jplayer = $('#player').jPlayer({ + $jplayer = $('#player').jPlayer({ ready: jplayerReady, swfPath: '//cdn.jsdelivr.net/jplayer/2.6/Jplayer.swf', supplied: 'm4a', @@ -1070,7 +1160,6 @@ primus.on('close', disconnect); primus.on('invalidnickname', invalidNickName); primus.on('ready', ready); - primus.on('updateoverview', updateRoomsOverview); primus.send('getoverview', roomsOverview); }); diff --git a/public/js/home.js b/public/js/home.js index 2c973c8..f72b98e 100644 --- a/public/js/home.js +++ b/public/js/home.js @@ -7,8 +7,8 @@ } }); }); - var uri = location.protocol + '//' + location.host; - var primus = Primus.connect(uri, {strategy: false}); + + var primus = Primus.connect({ strategy: false }); primus.on('open', function() { primus.send('getoverview', function(data) { for (var prop in data) { diff --git a/public/js/leaderboards.js b/public/js/leaderboards.js index eb4e9c2..929c1a5 100644 --- a/public/js/leaderboards.js +++ b/public/js/leaderboards.js @@ -1,31 +1,32 @@ (function() { - var appendResults = function(data, leaderboard, offset, type) { - for (var i=0; i').text(data[i]) - , col1 = ''+(++offset)+'' - , col2 = $('').append(link) + var appendResults = function(data, $leaderboard, offset, type) { + for (var i = 0; i < data.length; i += 2) { + var col1 = '' + (++offset) + '' + , col2 = '' + data[i] +'' , col3 = (type === 'points') - ? ''+data[i+1]+'' - : ' '+(data[i+1] / 1000).toFixed(2)+' sec'; - var row = $('').append(col1, col2, col3); - leaderboard.append(row); + ? '' + data[i + 1] + '' + : ' ' + + (data[i + 1] / 1000).toFixed(2) + ' sec'; + + $leaderboard.append('' + col1 + col2 + col3 + ''); } }; $('.leaderboard-wrapper').each(function(index) { - var leaderboard = $(this).find('tbody') - , loading = $(this).find('.loading') + var $leaderboard = $(this).find('tbody') + , $loading = $(this).find('.loading') , offset = 0 , type = (index === 0) ? 'points' : 'times'; $(this).scroll(function() { var diff = $(this).prop('scrollHeight') - $(this).scrollTop(); + if (diff === $(this).height() && offset < 180) { offset += 30; - loading.show(); - $.get('/sliceleaderboard', {begin: offset, by: type}, function(data) { - loading.hide(); - appendResults(data, leaderboard, offset, type); + $loading.show(); + $.get('/sliceleaderboard', { begin: offset, by: type }, function(data) { + $loading.hide(); + appendResults(data, $leaderboard, offset, type); }); } }); -- 2.54.0