Rainbow!

lib/colors.ts

@@ -0,0 +1,40 @@
+import Color from "color";
+
+export function getColors() {
+    const replColor = window.document.documentElement.style.getPropertyValue("--repl-color") || window.getComputedStyle(document.documentElement).getPropertyValue("--repl-color") || "rgb(24, 138, 24)";
+    const linkColor = window.document.documentElement.style.getPropertyValue("--repl-color-link") || window.getComputedStyle(document.documentElement).getPropertyValue("--repl-color-link") || "rgb(31, 179, 31)";
+    const hintColor = window.document.documentElement.style.getPropertyValue("--repl-color-hint") || window.getComputedStyle(document.documentElement).getPropertyValue("--repl-color-hint") || "rgba(24, 138, 24, 0.3)";
+    return [replColor, linkColor, hintColor];
+};
+
+export function setColors(color: Color) {
+    window?.document.documentElement.style.setProperty("--repl-color", color.string());
+    window?.document.documentElement.style.setProperty("--repl-color-link", color.lighten(0.3).rgb().string());
+    window?.document.documentElement.style.setProperty("--repl-color-hint", color.fade(0.7).string());
+};
+
+export class Rainbow {
+    color: Color;
+    step: number = 5;
+    runner: any = undefined;
+
+    constructor() {
+        this.color = new Color("hsl(0, 100%, 50%)");
+    }
+
+    next() {;
+        this.color = this.color.rotate(this.step);
+        setColors(this.color);
+    }
+
+    start() {
+        this.runner = setInterval(() => this.next(), 100);
+    }
+
+    stop() {
+        clearInterval(this.runner);
+        this.runner = undefined;
+    }
+}
+
+export default new Rainbow();

lib/commands/definitions.ts

@@ -1,6 +1,8 @@
 import type { Diary, Project } from "../content/types";
 import type { Command, Flag } from "./types";
 import Color from "color";
+import { getColors, setColors } from "../colors";
+import Rainbow from "../colors";
 import styles from "../../styles/Random.module.scss";
 
 function getCommandByName(name: string): Command | undefined {
@@ -238,19 +240,6 @@ const clear: Command = {
     execute: () => []
 };
 
-const getColors = () => {
-    const replColor = window.document.documentElement.style.getPropertyValue("--repl-color") || window.getComputedStyle(document.documentElement).getPropertyValue("--repl-color") || "rgb(24, 138, 24)";
-    const linkColor = window.document.documentElement.style.getPropertyValue("--repl-color-link") || window.getComputedStyle(document.documentElement).getPropertyValue("--repl-color-link") || "rgb(31, 179, 31)";
-    const hintColor = window.document.documentElement.style.getPropertyValue("--repl-color-hint") || window.getComputedStyle(document.documentElement).getPropertyValue("--repl-color-hint") || "rgba(24, 138, 24, 0.3)";
-    return [replColor, linkColor, hintColor];
-};
-
-const setColors = (color: Color) => {
-    window?.document.documentElement.style.setProperty("--repl-color", color.string());
-    window?.document.documentElement.style.setProperty("--repl-color-link", color.lighten(0.3).rgb().string());
-    window?.document.documentElement.style.setProperty("--repl-color-hint", color.fade(0.7).string());
-};
-
 const color: Command = {
     name: "color",
     desc: "Changes the color of the site.",
@@ -270,6 +259,7 @@ const color: Command = {
             ];
         }
         if (args[0] === "reset") {
+            Rainbow.stop();
             window.document.documentElement.style.removeProperty("--repl-color");
             window.document.documentElement.style.removeProperty("--repl-color-link");
             window.document.documentElement.style.removeProperty("--repl-color-hint");
@@ -281,6 +271,7 @@ const color: Command = {
             } catch {
                 return ["Invalid color!"];
             }
+            Rainbow.stop();
             setColors(color);
 
             switch(true) {
@@ -414,4 +405,14 @@ const ping: Command = {
     },
 };
 
-export const commandList = [about, help, man, project, exitCmd, clear, color, save, pingi, blahaj, ping].sort((a, b) => a.name.localeCompare(b.name));
+const jeb_: Command = {
+    name: "jeb_",
+    desc: "🐑🌈",
+    execute: () => {
+        Rainbow.start();
+        return [];
+    },
+    hidden: true
+};
+
+export const commandList = [about, help, man, project, exitCmd, clear, color, save, pingi, blahaj, ping, jeb_].sort((a, b) => a.name.localeCompare(b.name));

pages/index.tsx

@@ -9,11 +9,13 @@ import REPL from "../components/REPL";
 import styles from "../styles/Home.module.css";
 import type { ContentList } from "../lib/content/types";
 import { useRouter } from "next/router";
+import Rainbow from "../lib/colors";
 
 const Home: NextPage<{ buildTime: string }> = ({ buildTime }) => {
     const inputRef = useRef<HTMLInputElement>(null);
     const { modalFunctions } = useModalFunctions();
     const { setContents } = useCommands();
+    const router = useRouter();
 
     const updateProjects = useCallback(async () => {
         try {
@@ -41,6 +43,12 @@ const Home: NextPage<{ buildTime: string }> = ({ buildTime }) => {
         return () => clearInterval(interval);
     }, [updateProjects, modalFunctions]);
 
+    useEffect(() => {
+        if ("rainbow" in router.query) {
+            Rainbow.start();
+        }
+    }, [router]);
+
     return (<main onKeyDown={hideModalOnEsc} tabIndex={-1}>
         <Head>
             <title>c0ntroller.de</title>