rob@100: /////////////////////////////////////////////////
rob@100: // connect to websocket
rob@100: 
rob@100: var socket = io.connect();
rob@100: function initPage() { socket.emit("initPage");  
rob@100: 		      console.log("init.client.log")
rob@100: 		    }
rob@100: 
rob@100: //socket.on("metroPulse", metronomeTick);
rob@100: /////////////////////////////////////////////////
rob@100: 
rob@100: socket.on("metroPulse", pulseInClient);
rob@100: function pulseInClient(pulse,groupID,metrobeat){
rob@100:     var groupPage=document.getElementById('group').value
rob@100:     if (groupID == groupPage) {
rob@100: 	metronomeTick(1000, groupID, metrobeat);
rob@100:     }
rob@100: }
rob@100: 
rob@100: //////////////////////////////////////////////////
rob@100: // AUDIO SCORE CUES
rob@100: 
rob@100: var audioUnit1 = new Audio('audio/testfile.ogg');
rob@100: var audioUnit49 = new Audio('audio/testfile.ogg');
rob@100: var audioUnit3 = new Audio('audio/testfile.ogg');
rob@100: var audioUnit4 = new Audio('audio/testfile.ogg');
rob@100: 
rob@100: function playAudio(a) {
rob@100:     a.play();
rob@100: }
rob@100: 
rob@100: //playAudio(audio_unit_1);
rob@100: 
rob@100: 
rob@100: /////////////////////////////////////////////////
rob@100: function  metroCss(beat, beatcolor,text){
rob@100:     var color = beatcolor;
rob@100:     $(".metrocase > div").each(function(){$(this).stop()});
rob@100:     $(".metrocase > div").each(function(){$(this).css('background-color', beatcolor)});
rob@100:     $(".metrocase > div").each(function(){$(this).text(" ")});
rob@100: }
rob@100: 
rob@100: function metronomeTick(pulse, voice,metrobeat) {
rob@100:     var color = "gray"
rob@100:     metroCss(0, "red", "4")
rob@100:     setTimeout(function(){metroCss(0, "black", "4")},150);
rob@100: };
rob@100: 
rob@100: /////////////////////////////////////////////////
rob@100: // update the stopwatch value on the client page in line with server
rob@100: socket.on("chronFromServer", function(chron) { $("div#client_chronometer").text(chron); });
rob@100: 
rob@100: // server time
rob@100:     socket.on("dateTime", function(datetime) {
rob@100: 	$("div#datetime").text("" +datetime);
rob@100:     });
rob@100: 
rob@100: /////////////////////////////////////////////////
rob@100: 
rob@100: // countin (solo part)
rob@100: 
rob@100: socket.on("countinFromServer", countinClient);
rob@100: function countinClient(groupID, currentseconds,mm,text,colour,background,unit){
rob@100:     var groupPage=document.getElementById('group').value
rob@100:     if (groupID == groupPage) {
rob@100: 	$("#counttitle").css('color','black');
rob@100: 	$("#counttitle").text(text);
rob@100: 	$("#count").text(currentseconds);
rob@100: 	document.getElementById("count").style.color=colour;
rob@100:  }}
rob@100: 
rob@100: /////////////////////////////////////////////////
rob@100: 
rob@100: // countdown to change (solo)
rob@100: 
rob@100: socket.on("counterText", cText);
rob@100: function cText(groupID, currentseconds,text){
rob@100:     $("#totalcountdown"+groupID).text(text);	
rob@100:     var groupPage=document.getElementById('group').value
rob@100:     if (groupID == groupPage) {
rob@100: 	//console.log(text)
rob@100: 	$("#totalcountdown").text(text);	
rob@100:     }}
rob@100: 
rob@100: // when voice is changed in UI grab and update from server
rob@100: 
rob@100: function changeSoloVoice(v) { socket.emit("changeSoloVoice", v); }
rob@100: 
rob@100: // makes sure page is loaded if not it grabs svg etc
rob@100: 
rob@100: socket.on("pageIni", pageIni);
rob@100: function pageIni (group,unit,time,mm,seqcounter,nextunit) { 
rob@100:     //console.log(unit + " ---> " + nextunit)
rob@100:     var soloist = $("#group").attr('value'); //4//$("#group").value;
rob@100:     if (group==1){
rob@100: 	var n1 = $("#previewbox-1").html().indexOf("svg"); 
rob@100: 	//console.log(n1)
rob@100: 	if (n1 == -1){
rob@100: 	    //console.log("n1 == -1 so load svg:")
rob@100: 	    $("#previewbox-1").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>")
rob@100: 	}
rob@100:     }
rob@100:     
rob@100:     if (group==2){
rob@100: 	var n2 = $("#previewbox-2").html().indexOf("svg"); 
rob@100: 	if (n2 == -1){ 
rob@100: 	    $("#previewbox-2").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>")
rob@100: 	}
rob@100:     }
rob@100: 
rob@100:     if (group==3){
rob@100: 	var n3 = $("#previewbox-3").html().indexOf("svg"); 
rob@100: 	if (n3 == -1){ 
rob@100: 	    $("#previewbox-3").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>")
rob@100: 	}
rob@100:     }
rob@100: 
rob@100:     if (group==4){
rob@100: 	var n4 = $("#previewbox-4").html().indexOf("svg"); 
rob@100: 	if (n4 == -1){ 
rob@100: 	    $("#previewbox-4").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>")
rob@100: 	}
rob@100:     }
rob@100: 
rob@100: 
rob@100:     if (group==soloist) { 	
rob@100: 	//console.log("INI sooolooooist=: ---------------------- : " + soloist)
rob@100: 	var n = $("#previewbox-solo").html().indexOf("svg"); 
rob@100: 	if (n == -1){ 
rob@100:             $("#previewbox-solo").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>")
rob@100:     	    $("#previewbox-solo-next").html("<img src='svg/"+(nextunit) + ".svg" + "' width='100%'>")
rob@100: 	}   
rob@100:     }
rob@100: 
rob@100: 
rob@100: }   
rob@100: 
rob@100: 
rob@100: socket.on("pageFlip", pageFlip);
rob@100: 
rob@100: //  some if logic to check if file is already displayed
rob@100: // if not load it - client doesnt need to be present at start
rob@100: 
rob@100: function pageFlip (group,unit,time,mm,seqcounter,nextunit) { 
rob@100:     var soloist = $("#group").attr('value');
rob@100: 
rob@100:     if (group==1){
rob@100: 	$("#previewbox-1").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>") 
rob@100:     }
rob@100:     
rob@100:     if (group==2){
rob@100: 	$("#previewbox-2").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>")
rob@100:     }
rob@100:     
rob@100:     if (group==3){
rob@100: 	
rob@100: 	$("#previewbox-3").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>")
rob@100:     }
rob@100:     
rob@100:     if (group==4){
rob@100: 	$("#previewbox-4").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>")
rob@100:     }
rob@100:     
rob@100: 
rob@100:     // page flip for solo part section
rob@100:     
rob@100:     if (group==soloist) {
rob@100: 
rob@100: 	// changes the svg and preview images
rob@100: 	$("#previewbox-solo").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>")
rob@100: 	$("#previewbox-solo-next").html("<img src='svg/"+(nextunit) + ".svg" + "' width='100%'>")
rob@100: 
rob@100: 	// check for audio assets to play
rob@100: 	// audio assets should have a value attribute which should be compared with the unit
rob@100: 	// if the unit has an associated audio attribute it should play
rob@100: 	
rob@100: 	if ( window["audioUnit"+unit] ){
rob@100: 	    console.log("audio asset detected for this unit... playing now...")
rob@100: 	    playAudio(window["audioUnit"+unit]);
rob@100: 	} else { console.log("no audio for this unit.."); }
rob@100:     }
rob@100: 
rob@100:     // check for effect associated with unit
rob@100:     // maybe in future we could use the webAudio API?
rob@100: 
rob@100: }
rob@100: 
rob@100: 
rob@100: 
rob@100: ////////////////////////////////////////////////
rob@100: 
rob@100: /* commented out for now as interferes with chat
rob@100: need to introduce metakey...manyana... not so usefull anyway really... 
rob@100: 
rob@100: keyboard controls 
rob@100: +++++++++++++++++++++++++
rob@100: 
rob@100: SPACE to toggle visibilty of preview
rob@100: m to toggle visibilty of metronome
rob@100: s to toggle visibilty of stopwatch
rob@100: h to hide all above
rob@100: 
rob@100: 
rob@100: */
rob@100: 
rob@100: function toggle_visibility(id) {
rob@100:     var e = document.getElementById(id);
rob@100:     if(e.style.display == 'block')
rob@100:         e.style.display = 'none';
rob@100:        else
rob@100:            e.style.display = 'block';
rob@100: }
rob@100: 
rob@100: $(document).keypress(function(e){
rob@100: //    console.log(e.which);
rob@100:   // "0" button for hide chat
rob@100:     var hcheckWebkitandIE=(e.which==48 ? 1 : 0);
rob@100:     var hcheckMoz=(e.which==48 ? 1 : 0);
rob@100:     if (hcheckWebkitandIE || hcheckMoz) { 
rob@100: 	toggle_visibility('comms') 
rob@100: }
rob@100:     });
rob@100: 
rob@100: //*/
rob@100: 
rob@100: ////////////////////////////////////////////////
rob@100: // this needs to have a variable to define the websocket
rob@100: // otherwise we will pings from all sockets connected
rob@100: // no! the server broadcasts the ping and the clients emit the pong!
rob@100: // ah but then the time reported back from the server needs to be targeted
rob@100: // to specific client..
rob@100: 
rob@100: //////////////////////////////////////////////
rob@100: // Latency "Pong"
rob@100: 
rob@100: socket.on("timeFromServer", function(n) { 
rob@100:     socket.emit("clientTimeResponse",n); });
rob@100: 
rob@100: socket.on("latencyFromServer", function(latency) {
rob@100:     $("#client_latency").text("Latency: "+latency+"ms.")
rob@100: });
rob@100: 
rob@100: function getLatencies(x) { socket.emit("getLatencies", x); }
rob@100: 
rob@100: //////////////////////////////////////////////
rob@100: 
rob@100: 
rob@100: socket.on('connect', function () {
rob@100:     $('#chat').addClass('connected');
rob@100: });
rob@100: 
rob@100: socket.on('announcement', function (msg) {
rob@100:     $('#Lines').append($('<p>').append($('<em>').text(msg)));
rob@100: });
rob@100: 
rob@100: socket.on('nicknames', function (nicknames) {
rob@100:     $('#nicknames').empty().append($('<span>Online: </span>'));
rob@100:     for (var i in nicknames) {
rob@100: 	$('#nicknames').append($('<b>').text(nicknames[i]));
rob@100:     }
rob@100: });
rob@100: 
rob@100: socket.on('user message', message);
rob@100: socket.on('reconnect', function () {
rob@100:     $('#lines').remove();
rob@100:     message('System', 'Reconnected to the server');
rob@100: });
rob@100: 
rob@100: socket.on('reconnecting', function () {
rob@100:     message('System', 'Attempting to re-connect to the server');
rob@100: });
rob@100: 
rob@100: socket.on('error', function (e) {
rob@100:     message('System', e ? e : 'A unknown error occurred');
rob@100: });
rob@100: 
rob@100: function message (from, msg) {
rob@100:     $('#lines').prepend($('<p>').prepend($('<b>').text(from), msg));
rob@100: }
rob@100: 
rob@100: // dom manipulation
rob@100: $(function () {
rob@100:     $('#set-nickname').submit(function (ev) {
rob@100: 	socket.emit('nickname', $('#nick').val(), function (set) {
rob@100: 	    if (!set) {
rob@100: 		clear();
rob@100: 		return $('#chat').addClass('nickname-set');
rob@100: 	    }
rob@100: 	    $('#nickname-err').css('visibility', 'visible');
rob@100: 	});
rob@100: 	return false;
rob@100:     });
rob@100: 
rob@100:     $('#send-message').submit(function () {
rob@100: 	message('me', $('#message').val());
rob@100: 	socket.emit('user message', $('#message').val());
rob@100: 	clear();
rob@100: 	$('#lines').get(0).scrollTop = 10000000;
rob@100: 	return false;
rob@100:     });
rob@100: 
rob@100:     function clear () {
rob@100: 	$('#message').val('').focus();
rob@100:     };
rob@100: });