redo animation if user came back from afk(un-focus) for hacktype.js

1 files changed, 39 insertions, 34 deletions

diff --git a/src/js/hacktype.js b/src/js/hacktype.js
index 5524d82a..b5542377 100644
--- a/src/js/hacktype.js
+++ b/src/js/hacktype.js
@@ -4,42 +4,47 @@ const special = "!\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~";
 
 let interval = null;
 
-document.addEventListener("DOMContentLoaded", () => {
+function hackType() {
   const elements = document.querySelectorAll(".hacktype");
   let intervals = [];
 
-  function hackType() {
-    elements.forEach((element) => {
-      let iteration = 0;
-
-      intervals.push(
-        setInterval(() => {
-          element.innerText = element.innerText
-            .split("")
-            .map((letter, index) => {
-              if (index < iteration) {
-                return element.dataset.value[index];
-              }
-
-              return letters[Math.floor(Math.random() * 26)];
-            })
-            .join("");
-
-          if (iteration >= element.dataset.value.length) {
-            clearInterval(intervals.shift());
-          }
-
-          iteration += 1 / 5;
-        }, 20)
-      );
-    });
+  elements.forEach((element) => {
+    let iteration = 0;
+
+    intervals.push(
+      setInterval(() => {
+        element.innerText = element.innerText
+          .split("")
+          .map((letter, index) => {
+            if (index < iteration) {
+              return element.dataset.value[index];
+            }
+
+            return letters[Math.floor(Math.random() * 26)];
+          })
+          .join("");
+
+        if (iteration >= element.dataset.value.length) {
+          clearInterval(intervals.shift());
+        }
+
+        iteration += 1 / 5;
+      }, 20)
+    );
+  });
+}
+
+hackType(); // Call hackType initially
+
+setInterval(() => {
+  const intervals = document.querySelectorAll(".hacktype-interval");
+  intervals.forEach((interval) => clearInterval(interval)); // Clear existing intervals
+  hackType(); // Call hackType again
+}, 10000); // Repeat every 5 seconds
+
+// Check if the document becomes visible again
+document.addEventListener("visibilitychange", () => {
+  if (!document.hidden) {
+    hackType(); // Call hackType when the user comes back from being away
   }
-
-  hackType(); // Call hackType initially
-
-  setInterval(() => {
-    intervals.forEach((interval) => clearInterval(interval)); // Clear existing intervals
-    intervals = []; // Reset intervals array
-    hackType(); // Call hackType again
-  }, 10000); // Repeat every 5 seconds
 });