feat: added silly typing

src/components/Navbar/Navbar.tsx

@@ -1,6 +1,6 @@
 import styles from './nav.module.css'
 import React from "react";
-import {Simulate} from "react-dom/test-utils";
+import { Simulate } from "react-dom/test-utils";
 import toggle = Simulate.toggle;
 
 /*
@@ -9,14 +9,15 @@ New navbar (see header.astro in components folder for previous version)
 
 const Navbar = () => {
     const [silly, setSilly] = React.useState(false);
+    const [typedText, setTypedText] = React.useState('');
 
     const sillyHandler = () => {
-        if(!silly){
-            if(confirm("You've found the silly animation mode toggle! \nActivating this mode causes rapid, possibly flashing motion. You can turn it off any time by clicking the same button. \n\nWould you like to continue?")){
+        if (!silly) {
+            if (confirm("You've found the silly animation mode toggle! \nActivating this mode causes rapid, possibly flashing motion. You can turn it off any time by clicking the same button. \n\nWould you like to continue?")) {
                 setSilly(true);
             }
         }
-        else{
+        else {
             setSilly(false);
         }
     }
@@ -31,29 +32,49 @@ const Navbar = () => {
         let change = mainArea.querySelectorAll('main h1, h2, h3, h4, h5, h6, img, p, a, .goalCard');
         let toggleButton = document.getElementById("silly-toggle");
 
-        if(silly){
-            for(const i of change){
+        if (silly) {
+            for (const i of change) {
                 i.classList.add("silly-anim");
             }
-            if(toggleButton){
+            if (toggleButton) {
                 toggleButton.style.opacity = "1";
                 toggleButton.style.color = "red";
                 toggleButton.style.fontWeight = "700";
             }
         }
 
-        return() => {
-            for(const i of change){
+        return () => {
+            for (const i of change) {
                 i.classList.remove("silly-anim");
             }
-            if(toggleButton){
+            if (toggleButton) {
                 toggleButton.style.opacity = "0.5";
                 toggleButton.style.color = "rebeccapurple";
                 toggleButton.style.fontWeight = "inherit";
             }
         }
     }, [silly])
 
+    React.useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent) => {
+            setTypedText((prev) => {
+                const newTypedText = (prev + event.key).slice(-5);
+                // If silly has been typed, toggle silly mode if it's not already on
+                if (newTypedText.toLowerCase() === 'silly') {
+                    sillyHandler();
+                    return '';
+                }
+                return newTypedText;
+            });
+        };
+
+        document.addEventListener('keydown', handleKeyDown);
+
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [silly]);
+
     return (
         <header className={styles.nav}>
             <a href="/" className={styles.logo}>