comparison www/m/js/nodescore-client.js @ 38:ea8d61c851c0

added chat server and more work on interface

     var color = beatcolor;
     
     $(".metrocase > div").each(function(){$(this).stop()});
     $(".metrocase > div").each(function(){$(this).css('background-color', beatcolor)});
     $(".metrocase > div").each(function(){$(this).text(" ")});
-    $(".metrocase > div").each(function(){$(this).animate({opacity: 0.6},
+    $(".metrocase > div").each(function(){$(this).animate({opacity: 1},
 							  50,
 							  function() { $(this).animate({opacity:0.0}); }
 							 );
 					 })  
 	}

 
 socket.on("countinFromServer", countinClient);
 function countinClient(groupID, currentseconds,mm,text,colour,background){
     var groupPage=document.getElementById('group').value
     if (groupID == groupPage) {
-	document.getElementById("countinnumber").style.visibility="visible";
-	document.getElementById("countinnumber").style.visibility="visible";
-	$("#countinnumber").text(currentseconds);
-	$("#countinnumber").css('background-color', background);
+	document.getElementById("count").style.visibility="visible";
+	document.getElementById("count").style.visibility="visible";
+
+	$("#counttitle").text(text);
+	$("#count").text(currentseconds);
+	//$("#cnt").text(currentseconds);
+
+	$("#count").css('background-color', background);
 	
-	document.getElementById("countinnumber").style.color=colour;
-
-	if ( currentseconds == 0) {
-	    document.getElementById("countinnumber").style.visibility='hidden';
-	}
+	document.getElementById("count").style.color=colour;
+
+//	if ( currentseconds == 0) {
+	    //document.getElementById("midcomms").style.visibility='hidden';
+//	}
     }}
-
-/////////////////////////////////////////////////
+/////////////////////////////////////////////////
+
+/////////////////////////////////////////////////
+// countdown to change
+
+socket.on("counterText", counterText);
+function counterText(groupID, currentseconds,text){
+    var groupPage=document.getElementById('group').value
+    if (groupID == groupPage) {
+	console.log()
+	$("#totalcountdown").text(text);	
+    }}
+
+///////////////////////////////////////
 
 function pageFlip(unit) {
     console.log("flipping page:"+ unit);
     $('#sections').trigger('goto', [parseFloat(unit)]); 
 }
-
 
 
 /////////////////////////////////////////////////
 
 // call the fancy jquery functions

     $("#preview").html("<h3 style='background:transparent; position: absolute; top:14px; right:14px;';> n e x t : </h3><img src='thumbs/"+next + ".png" + "' width='400'>")
 }
 
 ////////////////////////////////////////////////
 
-/* 
+/* commented out for now as interferes with chat
+need to introduce metakey...manyana... not so usefull anyway really... 
 
 keyboard controls 
 +++++++++++++++++++++++++
 
 SPACE to toggle visibilty of preview
 m to toggle visibilty of metronome
 s to toggle visibilty of stopwatch
 h to hide all above
 
-*/
+
 
 function toggle_visibility(id) {
     var e = document.getElementById(id);
     if(e.style.display == 'block')
         e.style.display = 'none';

 	toggle_visibility('metro') 
 	toggle_visibility('preview') 
 }
     });
 
+*/
+
 ////////////////////////////////////////////////
 // this needs to have a variable to define the websocket
 // otherwise we will pings from all sockets connected
 // no! the server broadcasts the ping and the clients emit the pong!
 // ah but then the time reported back from the server needs to be targeted

 });
 
 function getLatencies(x) { socket.emit("getLatencies", x); }
 
 //////////////////////////////////////////////
+
+
+socket.on('connect', function () {
+    $('#chat').addClass('connected');
+});
+
+socket.on('announcement', function (msg) {
+    $('#lines').append($('<p>').append($('<em>').text(msg)));
+});
+
+socket.on('nicknames', function (nicknames) {
+    $('#nicknames').empty().append($('<span>Online: </span>'));
+    for (var i in nicknames) {
+	$('#nicknames').append($('<b>').text(nicknames[i]));
+    }
+});
+
+socket.on('user message', message);
+socket.on('reconnect', function () {
+    $('#lines').remove();
+    message('System', 'Reconnected to the server');
+});
+
+socket.on('reconnecting', function () {
+    message('System', 'Attempting to re-connect to the server');
+});
+
+socket.on('error', function (e) {
+    message('System', e ? e : 'A unknown error occurred');
+});
+
+function message (from, msg) {
+    $('#lines').append($('<p>').append($('<b>').text(from), msg));
+}
+
+// dom manipulation
+$(function () {
+    $('#set-nickname').submit(function (ev) {
+	socket.emit('nickname', $('#nick').val(), function (set) {
+	    if (!set) {
+		clear();
+		return $('#chat').addClass('nickname-set');
+	    }
+	    $('#nickname-err').css('visibility', 'visible');
+	});
+	return false;
+    });
+
+    $('#send-message').submit(function () {
+	message('me', $('#message').val());
+	socket.emit('user message', $('#message').val());
+	clear();
+	$('#lines').get(0).scrollTop = 10000000;
+	return false;
+    });
+
+    function clear () {
+	$('#message').val('').focus();
+    };
+});