smoother animations

Author: supern64

DisplayClient/index.js

@@ -1,6 +1,7 @@
 const hr = document.getElementById("hr")
 const heartImg = document.getElementById("pulsingheart")
 let isConnected = false;
+let currentHR = 0;
 
 const params = new URLSearchParams(window.location.search);
 const ip = params.get("ip") || "localhost";
@@ -16,16 +17,22 @@ function connect() {
 	socket.addEventListener('message', function (event) {
 		var message = JSON.parse(event.data);
 		if (message.hr) {
+			let spb = 1/(message.hr/60);
+			if (currentHR == 0) heartImg.style.animation = "pulse " + spb + "s infinite";
 			hr.innerText = message.hr;
-			var spb = 1/(message.hr/60)
-			heartImg.style.animation = "pulse " + spb + "s infinite"
+			currentHR = message.hr;
 		}
 	});
+	heartImg.addEventListener('animationiteration', () => {
+		let spb = 1/(currentHR/60);
+		heartImg.style.animation = "pulse " + spb + "s infinite";
+	});
 }
 
 function resetConnection() {
 	hr.innerText = "0";
 	heartImg.style.animation = "";
+	currentHR = 0
 	isConnected = false;
 }