c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

Rainbow!

Browse Source
This commit is contained in:
Daniel Kluge 2022-08-23 10:10:45 +02:00
parent 60c3c45868
commit ec4f0bd852
3 changed files with 63 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
lib/colors.ts Normal file
View File

@ -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();

29
lib/commands/definitions.ts
View File

@ -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));

8
pages/index.tsx
View File

@ -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>