Add easteregg

components/ProjectModal.tsx

@@ -20,7 +20,7 @@ const ProjectModal: NextPage = () => {
 
     const { updateCallbacks: updateCmdCallbacks } = useCommands();
     const { updateCallbacks: updateModalCallbacks } = useModalFunctions();
-    updateCmdCallbacks({ setModalVisible: setVisible, setModalContent});
+    updateCmdCallbacks({ setModalVisible: setVisible, setModalContent, setModalHTML: setContent });
     updateModalCallbacks({ setVisible, setContent: setModalContent, setHtml: setContent });
 
     const containerRef = useRef<HTMLDivElement>(null);

components/contexts/CommandInterface.tsx

@@ -6,6 +6,7 @@ import type { Diary, Project, ContentList } from "../../lib/content/types";
 interface CommandInterfaceCallbacks {
     setModalVisible?: (visible: boolean) => void; 
     setModalContent?: (content: Project | Diary, selectedPage?: number) => void;
+    setModalHTML?: (html: string) => void;
 }
 
 const commandInterface = new CommandInterface();

lib/commands/definitions.ts

@@ -216,7 +216,7 @@ const color: Command = {
     subcommands: {
         reset: { name: "reset", desc: "Resets the color." },
     },
-    execute: (_flags, args, _raw, _cmdIf) => {
+    execute: (_flags, args, _raw, cmdIf) => {
         if (!window || !window.document) return [];
         if (args.length !== 1) return printSyntax(color);
         if (args[0] === "reset") {
@@ -234,6 +234,17 @@ const color: Command = {
             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());
+
+            console.log(color.hex().toLowerCase());
+            switch(true) {
+                case color.hex().toLowerCase() === "#1f1e33": {
+                    // eslint-disable-next-line quotes
+                    if (cmdIf.callbacks?.setModalHTML) cmdIf.callbacks?.setModalHTML(`<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/w4U9S5eX3eY" title="YouTube video player" frameborder="0" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture" allowfullscreen></iframe>`);
+                    if (cmdIf.callbacks?.setModalVisible) cmdIf.callbacks?.setModalVisible(true);
+                    break;
+                }
+            }
+
             return ["Color set | #{Link|#} | %{help}"];
         }
     }

lib/commands/index.ts

@@ -1,9 +1,10 @@
-import type { ContentList } from "../content/types";
+import type { ContentList, Diary, Project } from "../content/types";
 import { printSyntax, commandList } from "./definitions";
 
 interface CommandInterfaceCallbacks {
-    setModalVisible?: CallableFunction; 
+    setModalVisible?: (visible: boolean) => void; 
-    setModalContent?: CallableFunction;
+    setModalContent?: (content: Project|Diary, selectedPage?: number) => void;
+    setModalHTML?: (html: string) => void;
 }
 
 export class CommandInterface {