Merge pull request #90 from magiczocker10/Intervals

Pause intervals on home and hack if window is inactive.
Wolfyxon · Aug 18, 2024 · 2b298b5 · 2b298b5
2 parents bd620bd + ea0a94a
commit 2b298b5
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 11 deletions.
diff --git a/other/hack/hack.js b/other/hack/hack.js
@@ -99,8 +99,25 @@ window.addEventListener('load', function() {
 	genBars();
 	genNums();
 
-	setInterval(echo, 50);
-	setInterval(genTiles, 1000);
-	setInterval(genBars, 500);
-	setInterval(genNums, 20);
+	var intervalIDs = [];
+	if (!document.hidden) {
+		intervalIDs.push(setInterval(echo, 50));
+		intervalIDs.push(setInterval(genTiles, 1000));
+		intervalIDs.push(setInterval(genBars, 500));
+		intervalIDs.push(setInterval(genNums, 20));
+	}
+	window.addEventListener('blur', function() {
+		if (intervalIDs.length === 0) return;
+		intervalIDs.forEach(function(id) {
+			clearInterval(id);
+		})
+		intervalIDs.length = 0;
+	}, false);
+	window.addEventListener('focus', function() {
+		if (intervalIDs.length > 0) return;
+		intervalIDs.push(setInterval(echo, 50));
+		intervalIDs.push(setInterval(genTiles, 1000));
+		intervalIDs.push(setInterval(genBars, 500));
+		intervalIDs.push(setInterval(genNums, 20));
+	}, false);
 }, false);
diff --git a/scripts/home.js b/scripts/home.js
@@ -23,6 +23,12 @@ window.addEventListener('load', function() {
 		anim.addKeyframe('src', petRoot + aName[0] + '/' + aName[0] + aName[3][f] + '.png');		
 	}
 	anim.play();
+	window.addEventListener('blur', function() {
+		anim.stop();
+	}, false);
+	window.addEventListener('focus', function() {
+		anim.play();
+	}, false);
 
 	function setTab(newId) {
 		tabs.children[id].style.display = 'none';

diff --git a/scripts/lib/anim.js b/scripts/lib/anim.js
@@ -1,8 +1,5 @@
 libName("anim");
 
-function stopAnim(v) {
-	clearInterval(v);
-}
 function startAnim(data) {
 	return setInterval(function() {
 		if (!data.playing) return;
@@ -29,7 +26,7 @@ Animation = function(element){
 	this.playing = false;
 	this.frame = 0;
 	this.frameCount = 0;
-	this.loopItv = startAnim(this);
+	this.intervalId = 0;
 };
 Animation.prototype = {
 	addKeyframe: function(property, value, timeOffset) {
@@ -49,21 +46,29 @@ Animation.prototype = {
 
 	setSpacing: function(v) {
 		if (typeof(v) !== 'number') return;
-		stopAnim(this.loopItv);
 		this.spacing = v;
-		this.loopItv = startAnim(this);
+		if (this.intervalId > 0) {
+			clearInterval(this.intervalId);
+			this.intervalId = startAnim(this);
+		}
 	},
 
 	play: function() {
+		if (this.intervalId > 0) return;
 		this.playing = true;
+		this.intervalId = startAnim(this);
+		console.log('Play animation', this.intervalId);
 	},
 
 	stop: function() {
+		if (this.intervalId === 0) return;
 		this.playing = false;
+		console.log('Stop animation', this.intervalId);
+		clearInterval(this.intervalId);
+		this.intervalId = 0;
 	}
 };
 
-
 /**
  * Converts RGB into a hexadecimal color.
  * @param {number} r red