Split eggs

PRO-2684 · Sep 27, 2024 · 9ae04fb · 9ae04fb
1 parent 3417147
commit 9ae04fb
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 46 deletions.
diff --git a/modules/renderer/eggs.js b/modules/renderer/eggs.js
@@ -0,0 +1,59 @@
+// Description: Easter eggs.
+
+/**
+ * Lumos and Nox easter egg.
+ * @param {HTMLElement} view The settings view element.
+ */
+function lumosNox(view) {
+    const logo = view.querySelector(".logo");
+    const title = document.querySelector(".setting-title");
+    function lumos() {
+        document.body.classList.remove("q-theme-tokens-dark");
+        document.body.classList.add("q-theme-tokens-light");
+        document.body.setAttribute("q-theme", "light");
+        title.classList.add("lumos");
+        setTimeout(() => {
+            title.classList.remove("lumos");
+        }, 2000);
+    }
+    function nox() {
+        document.body.classList.remove("q-theme-tokens-light");
+        document.body.classList.add("q-theme-tokens-dark");
+        document.body.setAttribute("q-theme", "dark");
+        title.classList.add("nox");
+        setTimeout(() => {
+            title.classList.remove("nox");
+        }, 2000);
+    }
+    function currentTheme() {
+        return document.body.getAttribute("q-theme");
+    }
+    logo.addEventListener("animationend", () => {
+        document.startViewTransition(() => {
+            if (currentTheme() == "light") {
+                nox();
+            } else {
+                lumos();
+            }
+        });
+    });
+}
+
+/**
+ * Wand easter egg.
+ * @param {HTMLElement} view The settings view element.
+ */
+function wand(view) {
+    const r = Math.random();
+    if (r > 0.01) return;
+    const title = document.querySelector(".setting-title");
+    title.classList.add("wand");
+}
+
+/**
+ * Easter eggs.
+ * @type {Function[]}
+ */
+const eggs = [lumosNox, wand];
+
+export { eggs };
diff --git a/modules/renderer/settings.js b/modules/renderer/settings.js
@@ -1,6 +1,7 @@
 // Description: The renderer script for the settings view of Transitio.
 import { log, showDebugHint } from "./debug.js";
 import { setupSearch } from "./search.js";
+import { eggs } from "./eggs.js";
 
 /** Transitio plugin path. */
 const pluginPath = LiteLoader.plugins.transitio.path.plugin.replace(":\\", "://").replaceAll("\\", "/"); // Normalized plugin path
@@ -241,42 +242,12 @@ function addVarInput(varItem, varObj) {
     varItem.appendChild(varInput);
     return varInput;
 }
-/** Function to setup the easter egg at the settings view.
- * @param {HTMLElement} logo The logo element.
+/** Function to setup easter eggs at the settings view.
+ * @param {HTMLElement} view The settings view element.
  * @returns {void}
  */
-function setupEasterEgg(logo) {
-    const title = document.querySelector(".setting-title");
-    function lumos() {
-        document.body.classList.remove("q-theme-tokens-dark");
-        document.body.classList.add("q-theme-tokens-light");
-        document.body.setAttribute("q-theme", "light");
-        title.classList.add("lumos");
-        setTimeout(() => {
-            title.classList.remove("lumos");
-        }, 2000);
-    }
-    function nox() {
-        document.body.classList.remove("q-theme-tokens-light");
-        document.body.classList.add("q-theme-tokens-dark");
-        document.body.setAttribute("q-theme", "dark");
-        title.classList.add("nox");
-        setTimeout(() => {
-            title.classList.remove("nox");
-        }, 2000);
-    }
-    function currentTheme() {
-        return document.body.getAttribute("q-theme");
-    }
-    logo.addEventListener("animationend", () => {
-        document.startViewTransition(() => {
-            if (currentTheme() == "light") {
-                nox();
-            } else {
-                lumos();
-            }
-        });
-    });
+function setupEasterEggs(view) {
+    eggs.forEach(egg => egg(view));
 }
 /** Function to initialize the settings view.
  * @param {HTMLElement} view The settings view element.
@@ -365,14 +336,14 @@ async function initTransitioSettings(view) {
     // Logo
     const logo = $(".logo");
     logo.src = `local:///${pluginPath}/icons/icon.svg`;
-    setupEasterEgg(logo);
     // Links
     view.querySelectorAll(".transitio-link").forEach(link => {
         if (!link.getAttribute("title")) {
             link.setAttribute("title", link.getAttribute("data-transitio-url"));
         }
         link.addEventListener("click", openURL);
     });
+    setupEasterEggs(view);
     const container = $("setting-section.snippets > setting-panel > setting-list");
     return container;
 }

diff --git a/settings.html b/settings.html
@@ -210,17 +210,22 @@
         }
     }
 
-    /* Easter egg */
-    .setting-title.lumos::after {
-        content: "🌟 Lumos!";
-        padding-left: 1em;
-        opacity: 0.5;
-    }
-
-    .setting-title.nox::after {
-        content: "🌙 Nox!";
-        padding-left: 1em;
-        opacity: 0.5;
+    /* Easter eggs */
+    .setting-title {
+        &.lumos::after {
+            content: "🌟 Lumos!";
+            padding-left: 1em;
+            opacity: 0.5;
+        }
+        &.nox::after {
+            content: "🌙 Nox!";
+            padding-left: 1em;
+            opacity: 0.5;
+        }
+        &.wand > .icon-area::after {
+            content: "🪄";
+            padding-right: 0.5em;
+        }
     }
 
     /* 动画 */