annotate www/emma/js/nodescore-client.js @ 101:52e44ee1c791 tip master

enabled all scores in autostart script
author Rob Canning <rc@kiben.net>
date Tue, 21 Apr 2015 16:20:57 +0100
parents d8f494bdbb18
children
rev   line source
rc-web@66 1 /////////////////////////////////////////////////
rc-web@66 2 // connect to websocket
rc-web@66 3
rc-web@66 4 var socket = io.connect();
rc-web@66 5
rc-web@66 6 //socket.on("metroPulse", metronomeTick);
rc-web@66 7 /////////////////////////////////////////////////
rc-web@66 8 socket.on("metroPulse", pulseInClient);
rc-web@66 9 function pulseInClient(pulse,groupID,metrobeat){
rc-web@66 10 var groupPage=document.getElementById('group').value
rc-web@66 11 if (groupID == groupPage) {
rc-web@66 12 metronomeTick(1000, groupID, metrobeat);
rc-web@66 13 }
rc-web@66 14 }
rc-web@66 15 /////////////////////////////////////////////////
rc-web@66 16 function metroCss(beat, beatcolor,text){
rc-web@66 17 var color = beatcolor;
rc-web@66 18
rc-web@66 19 $(".metrocase > div").each(function(){$(this).stop()});
rc-web@66 20 $(".metrocase > div").each(function(){$(this).css('background-color', beatcolor)});
rc-web@66 21 $(".metrocase > div").each(function(){$(this).text(" ")});
rc-web@66 22 $(".metrocase > div").each(function(){$(this).animate({opacity: 1},
rc-web@66 23 50,
rc-web@66 24 function() { $(this).animate({opacity:0.0}); }
rc-web@66 25 );
rc-web@66 26 })
rc-web@66 27 }
rc-web@66 28
rc-web@66 29 function metronomeTick(pulse, voice,metrobeat) {
rc-web@66 30 var color = "gray"
rc-web@66 31 metroCss(0, "red", "4")
rc-web@66 32 };
rc-web@66 33
rc-web@66 34 /////////////////////////////////////////////////
rc-web@66 35
rc-web@66 36 // update the stopwatch value on the client page in line with server
rc-web@66 37 socket.on("chronFromServer", function(chron) {
rc-web@66 38 $("div#client_chronometer").text(chron);
rc-web@66 39 });
rc-web@66 40
rc-web@66 41
rc-web@66 42 // server time
rc-web@66 43
rc-web@66 44 //var groupPage=document.getElementById('group').value
rc-web@66 45 //if (groupID == groupPage) {
rc-web@66 46 socket.on("dateTime", function(datetime) {
rc-web@66 47 // console.log(datetime)
rc-web@66 48 $("div#datetime").text("Server Time: " +datetime);
rc-web@66 49
rc-web@66 50 });
rc-web@66 51
rc-web@66 52
rc-web@66 53 /////////////////////////////////////////////////
rc-web@66 54 // countdown to change
rc-web@66 55
rc-web@66 56 socket.on("countinFromServer", countinClient);
rc-web@66 57 function countinClient(groupID, currentseconds,mm,text,colour,background){
rc-web@66 58 var groupPage=document.getElementById('group').value
rc-web@66 59 if (groupID == groupPage) {
rc-web@66 60 console.log(groupID, currentseconds,mm,text,colour,background)
rc-web@66 61 document.getElementById("count").style.visibility="visible";
rc-web@66 62 //document.getElementById("count").style.visibility="visible";
rc-web@66 63 $("#counttitle").text(text);
rc-web@66 64 $("#count").text(currentseconds);
rc-web@66 65 //$("#cnt").text(currentseconds);
rc-web@66 66 $("#count").css('background-color', background);
rc-web@66 67 document.getElementById("count").style.color=colour;
rc-web@66 68 // if ( currentseconds == 0) {
rc-web@66 69 //document.getElementById("midcomms").style.visibility='hidden';
rc-web@66 70 // }
rc-web@66 71 }}
rc-web@66 72 /////////////////////////////////////////////////
rc-web@66 73
rc-web@66 74 /////////////////////////////////////////////////
rc-web@66 75 // countdown to change
rc-web@66 76
rc-web@66 77 socket.on("counterText", cText);
rc-web@66 78 function cText(groupID, currentseconds,text){
rc-web@66 79
rc-web@66 80 var groupPage=document.getElementById('group').value
rc-web@66 81 if (groupID == groupPage) {
rc-web@66 82 // console.log(text)
rc-web@66 83 $("#totalcountdown").text(text);
rc-web@66 84 }}
rc-web@66 85
rc-web@66 86 ///////////////////////////////////////
rc-web@66 87
rc-web@66 88 function pageFlip(unit) {
rc-web@66 89 console.log("flipping page:"+ unit);
rc-web@66 90 $('#sections').trigger('goto', [parseFloat(unit)]);
rc-web@66 91 }
rc-web@66 92
rc-web@66 93
rc-web@66 94 /////////////////////////////////////////////////
rc-web@66 95
rc-web@66 96 // call the fancy jquery functions
rc-web@66 97
rc-web@66 98 function slideTo (target) { $('#sections').trigger('goto', [target]); }
rc-web@66 99 function pad2(number) { return (number < 10 ? '0' : '') + number }
rc-web@66 100
rc-web@66 101 /////////////////////////////////////////////////
rc-web@66 102
rc-web@66 103 socket.on("pageFlipfromserver", pageTurn);
rc-web@66 104 function pageTurn (group,unit,time,mm) {
rc-web@66 105 var groupPage=document.getElementById('group').value;
rc-web@66 106 if (group == groupPage) {
rc-web@66 107 var g= pad2(group);
rc-web@66 108 var p= pad2(unit);
rc-web@66 109 // pageFlip(unit);
rc-web@66 110 pageTurnB(unit)
rc-web@66 111 testSound.play();
rc-web@66 112 console.log("flipping page:"+ unit);
rc-web@66 113 }
rc-web@66 114 else {
rc-web@66 115 console.log("not for this group... ignoring... for group:" + group );
rc-web@66 116 }
rc-web@66 117 }
rc-web@66 118
rc-web@66 119 function pageTurnB(unit) {
rc-web@66 120 var units=6;
rc-web@66 121 var next=(((unit+1)%units)+units)%units
rc-web@66 122 console.log("HOP TURN" + unit+ "next:" + next);
rc-web@66 123 $("#live").load("music.html #"+unit +" *");
rc-web@66 124 $("#preview").html("<h3 style='background:transparent; position: absolute; top:14px; right:14px;';> n e x t : </h3><img src='thumbs/"+next + ".png" + "' width='400'>")
rc-web@66 125 }
rc-web@66 126
rc-web@66 127 ////////////////////////////////////////////////
rc-web@66 128
rc-web@66 129 /* commented out for now as interferes with chat
rc-web@66 130 need to introduce metakey...manyana... not so usefull anyway really...
rc-web@66 131
rc-web@66 132 keyboard controls
rc-web@66 133 +++++++++++++++++++++++++
rc-web@66 134
rc-web@66 135 SPACE to toggle visibilty of preview
rc-web@66 136 m to toggle visibilty of metronome
rc-web@66 137 s to toggle visibilty of stopwatch
rc-web@66 138 h to hide all above
rc-web@66 139
rc-web@66 140
rc-web@66 141
rc-web@66 142 function toggle_visibility(id) {
rc-web@66 143 var e = document.getElementById(id);
rc-web@66 144 if(e.style.display == 'block')
rc-web@66 145 e.style.display = 'none';
rc-web@66 146 else
rc-web@66 147 e.style.display = 'block';
rc-web@66 148 }
rc-web@66 149
rc-web@66 150 $(document).keypress(function(e){
rc-web@66 151 // "space bar" for next unit preview
rc-web@66 152 var checkWebkitandIE=(e.which==32 ? 1 : 0);
rc-web@66 153 var checkMoz=(e.which==32 ? 1 : 0);
rc-web@66 154 // "m" button for metronome
rc-web@66 155 var mcheckWebkitandIE=(e.which==109 ? 1 : 0);
rc-web@66 156 var mcheckMoz=(e.which==109 ? 1 : 0);
rc-web@66 157 // "s" button for stopwatch/chronometer
rc-web@66 158 var ccheckWebkitandIE=(e.which==115 ? 1 : 0);
rc-web@66 159 var ccheckMoz=(e.which==115 ? 1 : 0);
rc-web@66 160
rc-web@66 161 // "h" button for hideall
rc-web@66 162 var hcheckWebkitandIE=(e.which==104 ? 1 : 0);
rc-web@66 163 var hcheckMoz=(e.which==104 ? 1 : 0);
rc-web@66 164
rc-web@66 165 // console.log(e.which);
rc-web@66 166 if (checkWebkitandIE || checkMoz) { toggle_visibility('preview') }
rc-web@66 167 if (mcheckWebkitandIE || mcheckMoz) { toggle_visibility('metro') }
rc-web@66 168 if (ccheckWebkitandIE || ccheckMoz) { toggle_visibility('client_chronometer') }
rc-web@66 169 if (hcheckWebkitandIE || hcheckMoz) {
rc-web@66 170 toggle_visibility('client_chronometer')
rc-web@66 171 toggle_visibility('metro')
rc-web@66 172 toggle_visibility('preview')
rc-web@66 173 }
rc-web@66 174 });
rc-web@66 175
rc-web@66 176 */
rc-web@66 177
rc-web@66 178 ////////////////////////////////////////////////
rc-web@66 179 // this needs to have a variable to define the websocket
rc-web@66 180 // otherwise we will pings from all sockets connected
rc-web@66 181 // no! the server broadcasts the ping and the clients emit the pong!
rc-web@66 182 // ah but then the time reported back from the server needs to be targeted
rc-web@66 183 // to specific client..
rc-web@66 184 //////////////////////////////////////////////
rc-web@66 185 // Latency "Pong"
rc-web@66 186
rc-web@66 187 socket.on("timeFromServer", function(n) {
rc-web@66 188 socket.emit("clientTimeResponse",n);
rc-web@66 189 });
rc-web@66 190 socket.on("latencyFromServer", function(latency) {
rc-web@66 191 $("#client_latency").text("Latency: "+latency+"ms.")
rc-web@66 192 //console.log(latency)
rc-web@66 193 });
rc-web@66 194
rc-web@66 195 function getLatencies(x) { socket.emit("getLatencies", x); }
rc-web@66 196
rc-web@66 197 //////////////////////////////////////////////
rc-web@66 198
rc-web@66 199
rc-web@66 200 socket.on('connect', function () {
rc-web@66 201 $('#chat').addClass('connected');
rc-web@66 202 });
rc-web@66 203
rc-web@66 204 socket.on('announcement', function (msg) {
rc-web@66 205 $('#lines').append($('<p>').append($('<em>').text(msg)));
rc-web@66 206 });
rc-web@66 207
rc-web@66 208 socket.on('nicknames', function (nicknames) {
rc-web@66 209 $('#nicknames').empty().append($('<span>Online: </span>'));
rc-web@66 210 for (var i in nicknames) {
rc-web@66 211 $('#nicknames').append($('<b>').text(nicknames[i]));
rc-web@66 212 }
rc-web@66 213 });
rc-web@66 214
rc-web@66 215 socket.on('user message', message);
rc-web@66 216 socket.on('reconnect', function () {
rc-web@66 217 $('#lines').remove();
rc-web@66 218 message('System', 'Reconnected to the server');
rc-web@66 219 });
rc-web@66 220
rc-web@66 221 socket.on('reconnecting', function () {
rc-web@66 222 message('System', 'Attempting to re-connect to the server');
rc-web@66 223 });
rc-web@66 224
rc-web@66 225 socket.on('error', function (e) {
rc-web@66 226 message('System', e ? e : 'A unknown error occurred');
rc-web@66 227 });
rc-web@66 228
rc-web@66 229 function message (from, msg) {
rc-web@66 230 $('#lines').append($('<p>').append($('<b>').text(from), msg));
rc-web@66 231 }
rc-web@66 232
rc-web@66 233 // dom manipulation
rc-web@66 234 $(function () {
rc-web@66 235 $('#set-nickname').submit(function (ev) {
rc-web@66 236 socket.emit('nickname', $('#nick').val(), function (set) {
rc-web@66 237 if (!set) {
rc-web@66 238 clear();
rc-web@66 239 return $('#chat').addClass('nickname-set');
rc-web@66 240 }
rc-web@66 241 $('#nickname-err').css('visibility', 'visible');
rc-web@66 242 });
rc-web@66 243 return false;
rc-web@66 244 });
rc-web@66 245
rc-web@66 246 $('#send-message').submit(function () {
rc-web@66 247 message('me', $('#message').val());
rc-web@66 248 socket.emit('user message', $('#message').val());
rc-web@66 249 clear();
rc-web@66 250 $('#lines').get(0).scrollTop = 10000000;
rc-web@66 251 return false;
rc-web@66 252 });
rc-web@66 253
rc-web@66 254 function clear () {
rc-web@66 255 $('#message').val('').focus();
rc-web@66 256 };
rc-web@66 257 });