diff --git a/lib/colors.ts b/lib/colors.ts new file mode 100644 index 0000000..760a32e --- /dev/null +++ b/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(); \ No newline at end of file diff --git a/lib/commands/definitions.ts b/lib/commands/definitions.ts index 3e7c81d..434de2e 100644 --- a/lib/commands/definitions.ts +++ b/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)); \ No newline at end of file +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)); \ No newline at end of file diff --git a/pages/index.tsx b/pages/index.tsx index 062de7a..4d2f5f8 100644 --- a/pages/index.tsx +++ b/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(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 (
c0ntroller.de