make randomBlob clickable to reset

2 files changed, 43 insertions, 48 deletions

diff --git a/public/js/randomblob.js b/public/js/randomblob.js
index 08ec0838..5ea80ed1 100644
--- a/public/js/randomblob.js
+++ b/public/js/randomblob.js
@@ -18,6 +18,19 @@ function randomPosition(element) {
   element.style.left = x + 'px';
   element.style.top = y + 'px';
 }
+function resetBlob() {
+  setRandomBlob();
+  randomPosition(blob);
+  blob.animate([{
+    opacity: 0
+  }, {
+    opacity: .40
+  }], {
+    duration: 3000,
+    iterations: 1,
+    fill: 'forwards'
+  });
+}
 function main() {
   if (!isFirstTime) {
     var fadeOutAnimation = blob.animate([{
@@ -31,34 +44,15 @@ function main() {
       fill: 'forwards'
     });
     fadeOutAnimation.onfinish = function () {
-      setRandomBlob();
-      randomPosition(blob);
-      blob.animate([{
-        opacity: 0,
-        scale: .8
-      }, {
-        opacity: .40,
-        scale: 1
-      }], {
-        duration: 3000,
-        iterations: 1,
-        fill: 'forwards'
-      });
+      resetBlob();
     };
   } else {
-    setRandomBlob();
-    randomPosition(blob);
-    blob.animate([{
-      opacity: 0
-    }, {
-      opacity: .40
-    }], {
-      duration: 3000,
-      iterations: 1,
-      fill: 'forwards'
-    });
+    resetBlob();
     isFirstTime = false;
   }
   setTimeout(main, getRandomInt(7500, 30000));
 }
+blob.addEventListener('click', function () {
+  main(getRandomInt(7500, 30000));
+});
 main();
\ No newline at end of file
diff --git a/src/js/randomblob.js b/src/js/randomblob.js
index 36c7d573..903ec80a 100644
--- a/src/js/randomblob.js
+++ b/src/js/randomblob.js
@@ -20,9 +20,26 @@ function randomPosition(element) {
     element.style.top = y + 'px';
 }
 
+function resetBlob() {
+    setRandomBlob();
+    randomPosition(blob);
+    // fadeIn
+    blob.animate([
+        // keyframes
+        { opacity: 0 }, 
+        { opacity: .40 }
+    ], { 
+        // timing options
+        duration: 3000,
+        iterations: 1,
+        fill: 'forwards'
+    });
+}
+
 
 function main() {
     if (!isFirstTime) {
+        // fadeOut
         let fadeOutAnimation = blob.animate([
             // keyframes
             { opacity: .40 }, 
@@ -33,36 +50,20 @@ function main() {
             iterations: 1,
             fill: 'forwards'
         });
+        // resetBlob
         fadeOutAnimation.onfinish = () => {
-            setRandomBlob();
-            randomPosition(blob);
-            blob.animate([
-                // keyframes
-                { opacity: 0, scale: .8 },
-                { opacity: .40, scale: 1 }
-            ], { 
-                // timing options
-                duration: 3000,
-                iterations: 1,
-                fill: 'forwards'
-            });
+            resetBlob()
         };
     } else {
-        setRandomBlob();
-        randomPosition(blob);
-        blob.animate([
-            // keyframes
-            { opacity: 0 }, 
-            { opacity: .40 }
-        ], { 
-            // timing options
-            duration: 3000,
-            iterations: 1,
-            fill: 'forwards'
-        });
+        // resetBlob
+        resetBlob()
         isFirstTime = false;
     }
     setTimeout(main, getRandomInt(7500, 30000));
 }
 
+blob.addEventListener('click', function() {
+    main(getRandomInt(7500, 30000));
+});
+
 main();
\ No newline at end of file