add animation function

css/main.css

@@ -4,6 +4,10 @@
     position: absolute; 
 }
 
+.animate {
+    background-position:left bottom !important;
+}
+
 .spriteUtils{
     position: absolute;
     -webkit-transform: scale(0.7);

js/main.js

@@ -31,6 +31,20 @@ socket.on('getmap', function (conent) {
 	}
 });
 
+socket.on('animation', function (timer) {
+	timer = timer / 1000;
+	var loader = $('<div id="animationDiv" style="width: 17px; height: 4px; position: absolute; background: linear-gradient(to right, green 50%, rgba(255, 0, 0, 0) 50%); background-size: 200% 100%; background-position:right bottom; top: -16px; left: -12px; border: 1px solid black; border-radius: 5px; transition: all ease '+timer+'s;"></div>');
+	$("#"+ownId).append(loader);
+	setTimeout(function() {
+		$("#animationDiv").addClass("animate");
+	}, 100);
+	
+});
+
+socket.on('stopAnimation', function (timer) {
+	$("#animationDiv").remove();
+});
+
 socket.on('objAction', function (obj) {
 	console.log(obj);
 	var mapX = obj["mapX"]*32;
@@ -218,6 +232,9 @@ $(document).ready(function() {
 	$( document ).keyup(function( event ) {
 		var key = event.which;
 		socket.emit("keyUp", key );
+		if(key == 32) {
+			$("#animationDiv").remove();
+		}
 		keys[key] = false;
 	});
 

server.js

@@ -96,7 +96,9 @@ io.on('connection', function(socket){
 					utilMap[obj["mapY"]][obj["mapX"]] = "";
 					io.sockets.emit("removeUtil", obj);
 					console.log("REMOVEEEEE", obj);
+					socket.emit("stopAnimation", 2000);
 				}, 2000); //2 Secs
+				socket.emit("animation", 2000);
 			}
 			io.sockets.emit("objAction", obj);
 		}