From 464ec204dc175d22c5419112538a3379fcb88cf5 Mon Sep 17 00:00:00 2001
From: rofl256 <rofl256@gmail.com>
Date: Thu, 5 Oct 2017 17:27:58 +0200
Subject: [PATCH] add animation function

---
 css/main.css |  4 ++++
 js/main.js   | 17 +++++++++++++++++
 server.js    |  2 ++
 3 files changed, 23 insertions(+)

diff --git a/css/main.css b/css/main.css
index f47a3ca..6f4d382 100644
--- a/css/main.css
+++ b/css/main.css
@@ -4,6 +4,10 @@
     position: absolute; 
 }
 
+.animate {
+    background-position:left bottom !important;
+}
+
 .spriteUtils{
     position: absolute;
     -webkit-transform: scale(0.7);
diff --git a/js/main.js b/js/main.js
index 3ca6a80..9e306b1 100644
--- a/js/main.js
+++ b/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;
 	});
 
diff --git a/server.js b/server.js
index 2bd0e3d..aa63899 100644
--- a/server.js
+++ b/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);
 		}