From 1c384324679ba0d10519cb7ca1ed3ac2fffc7c91 Mon Sep 17 00:00:00 2001
From: Jeroen De Meerleer <me@jeroened.be>
Date: Wed, 7 Feb 2024 12:41:46 +0100
Subject: [PATCH] Add Easter Egg functionality to the page.js file

This commit adds an Easter Egg feature to the page.js file. When the document is fully loaded, the initEasterEgg() function is called, which listens for clicks on the body element. If the clicked element is not an interactive element or does not trigger an event, a random hue shift filter is applied to the body and a random string from a predefined list of strings is displayed in a designated HTML element with class "easter-egg". The commit also includes a helper function, isInteractiveElement(), which checks if an element is interactive or triggers an event.
---
 assets/js/page.js | 44 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/assets/js/page.js b/assets/js/page.js
index 06fbd37..6f7ba5e 100644
--- a/assets/js/page.js
+++ b/assets/js/page.js
@@ -3,6 +3,7 @@ import '/assets/scss/page.scss';
 document.addEventListener("readystatechange", event => {
     if(event.target.readyState === 'complete') {
         initExternalLinks();
+        initEasterEgg();
     }
 });
 
@@ -15,6 +16,49 @@ function initExternalLinks() {
     })
 }
 
+function initEasterEgg() {
+    document.body.addEventListener('click', function(event) {
+        // Check if the clicked element is an interactive element or triggers an event
+        if (!isInteractiveElement(event.target)) {
+            let randomhue = Math.floor(Math.random() * 360)
+            let randomstring = Math.floor(Math.random() * eastereggstrings.length);
+            // Apply the color shift filter to the body
+            document.body.style.filter = 'hue-rotate(' + randomhue + 'deg)';
+            document.querySelector('.easter-egg').innerHTML = eastereggstrings[randomstring];
+        }
+    });
+}
+
+let eastereggstrings = [
+    "No",
+    "Stop it",
+    "It not funny anymore",
+    "Odette does not like this",
+    "Garry has asked to stop scaring the birds",
+    "Seriously?",
+    "I'm out of here",
+    "Stop poking me. I' thinking",
+    "Oh boy"
+]
+
+function isInteractiveElement(element) {
+    // Check if the element is an interactive element or triggers an event
+    return (
+        element.tagName === 'A' ||
+        element.tagName === 'BUTTON' ||
+        element.tagName === 'INPUT' ||
+        element.tagName === 'SELECT' ||
+        element.tagName === 'TEXTAREA' ||
+        element.getAttribute('onclick') !== null ||
+        element.getAttribute('onmousedown') !== null ||
+        element.getAttribute('onmouseup') !== null ||
+        element.getAttribute('onmouseover') !== null ||
+        element.getAttribute('onmouseout') !== null ||
+        element.getAttribute('onmousemove') !== null ||
+        element.getAttribute('oncontextmenu') !== null
+    );
+}
+
 const isExternalURL = (url) => {
     if(url.startsWith('/')) return false;
     return new URL(url).origin !== location.origin;