fancy dev console log on /y2k for fun

components/VNC/VNC.tsx

@@ -16,22 +16,38 @@ const VNC = ({ server }: Props) => {
   const [loaded, setLoaded] = useState(false);
 
   // DOS-style box for text
-  const consoleRef = useRef<HTMLDivElement>(null);
-  const statusRef = useRef<HTMLSpanElement>(null);
+  const terminalRef = useRef<HTMLDivElement>(null);
+  const terminalMessageRef = useRef<HTMLSpanElement>(null);
 
   // the actual connection and virtual screen (injected by noVNC when it's ready)
   const rfbRef = useRef(null);
   const screenRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    // end the session when the current page changes
-    const disconnectVM = () => {
-      try {
-        rfbRef.current.disconnect();
-      } catch (e) {} // eslint-disable-line no-empty
-    };
+  // makes the console reappear with the given message if there's an error loading, or if the VM has gone poof for
+  // whatever reason (doesn't really matter).
+  const showTerminalMessage = (message = "") => {
+    try {
+      screenRef.current.style.display = "none";
+      terminalRef.current.style.display = null;
+      terminalMessageRef.current.textContent = `${message}\n\nPress the Any key or refresh the page to continue.`;
+    } catch (e) {} // eslint-disable-line no-empty
+  };
 
-    // prepare for possible navigation away from this page
+  // hide the console when VM connects and show the screen
+  const showScreen = () => {
+    terminalRef.current.style.display = "none";
+    screenRef.current.style.display = null;
+  };
+
+  // end the session forcefully
+  const disconnectVM = () => {
+    try {
+      rfbRef.current.disconnect();
+    } catch (e) {} // eslint-disable-line no-empty
+  };
+
+  // prepare for possible navigation away from this page, and disconnect when it happens
+  useEffect(() => {
     router.events.on("routeChangeStart", disconnectVM);
 
     return () => {
@@ -42,14 +58,13 @@ const VNC = ({ server }: Props) => {
 
   useEffect(() => {
     if (loaded) {
+      // don't do any of this more than once and overwhelm the fragile backend
       return;
     }
 
     if (!window.WebSocket) {
       // browser doesn't support websockets
-      statusRef.current.textContent =
-        "WebSockets must be enabled to play in the Y2K Sandbox!!!\n\nPress the Any key to continue.";
-
+      showTerminalMessage("WebSockets must be enabled to begin!");
       return;
     }
 
@@ -57,6 +72,7 @@ const VNC = ({ server }: Props) => {
     rfbRef.current = new RFB(screenRef.current, server, {
       wsProtocols: ["binary", "base64"],
     });
+
     // scale screen to make it kinda "responsive"
     rfbRef.current.scaleViewport = true;
 
@@ -67,37 +83,25 @@ const VNC = ({ server }: Props) => {
     rfbRef.current.addEventListener("connect", () => {
       console.log("successfully connected to VM socket!");
 
-      // hide the console when VM connects
-      consoleRef.current.style.display = "none";
-      // ...and show the screen
-      screenRef.current.style.display = "block";
+      showScreen();
     });
 
     // VM disconnected
-    rfbRef.current.addEventListener("disconnect", (detail) => {
+    rfbRef.current.addEventListener("disconnect", (detail: unknown) => {
       console.warn("VM ended session remotely:", detail);
 
-      // make the console reappear now that the VM has gone poof for whatever reason (doesn't really matter)
-      try {
-        screenRef.current.style.display = "none";
-        consoleRef.current.style.display = "block";
-        statusRef.current.textContent =
-          "Oh dear, it looks like something's gone very wrong. Sorry about that.\n\nPress the Any key or refresh the page to continue.";
-      } catch (e) {} // eslint-disable-line no-empty
+      showTerminalMessage("Oh dear, it looks like something's gone very wrong. Sorry about that.");
     });
-
-    console.log(
-      "🤓 Hey, fellow nerd! Want to see how I made this? Check out this post: https://jarv.is/notes/y2k-sandbox/"
-    );
   }, [loaded, server]);
 
   return (
     <>
-      <div ref={consoleRef} className={classNames(styles.cmd, "monospace")}>
-        <span ref={statusRef}>Spinning up your very own personal computer, please wait!</span>{" "}
+      <div ref={terminalRef} className={classNames(styles.cmd, "monospace")}>
+        <span ref={terminalMessageRef}>Spinning up your very own personal computer, please wait!</span>{" "}
         <span className={styles.blink}>_</span>
       </div>
 
+      {/* the VNC canvas is hidden until we've successfully connected to the socket */}
       <div ref={screenRef} className={styles.display} style={{ display: "none" }} />
     </>
   );

pages/y2k.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import dynamic from "next/dynamic";
 import { NextSeo } from "next-seo";
 import Wallpaper from "../components/Wallpaper/Wallpaper";
@@ -5,36 +6,55 @@ import Wallpaper from "../components/Wallpaper/Wallpaper";
 // obviously, an interactive VNC display will not work even a little bit server-side
 const VNC = dynamic(() => import("../components/VNC/VNC"), { ssr: false });
 
-const Y2K = () => (
-  <>
-    <NextSeo
-      title="Y2K Sandbox: Powered by Windows Me™ 💾"
-      description="My first website on a Windows Me-powered time machine. You've been warned."
-      openGraph={{
-        title: "Y2K Sandbox: Powered by Windows Me™",
-      }}
-    />
+const Y2K = () => {
+  // print a fancy console message (in browser only) just for funsies
+  useEffect(() => {
+    console.log(
+      `
+%c🤓 %cHey there, fellow nerd!%c Looking for the magic behind this page?
 
-    {/* set a random retro wallpaper tile for the content area */}
-    <Wallpaper image={`/static/images/y2k/tiles/tile_${Math.floor(20 * Math.random())}.png`} tile>
-      <VNC server="wss://y2k.jrvs.io" />
-    </Wallpaper>
+%cCheck out this post: https://jarv.is/notes/y2k-sandbox/
 
-    <style jsx global>{`
-      /* make the viewport a bit larger by un-sticking the nav bar */
-      header {
-        position: relative !important;
-      }
+...or the source code here: https://github.com/jakejarvis/y2k
+`,
+      "font-size: 20px",
+      "color: black; background: yellow; font-size: 20px",
+      "font-size: 20px",
+      "font-size: 15px"
+    );
+  }, []);
 
-      /* make an exception for the wrapper (and its background) to fill up the normal content area */
-      main {
-        padding: 0 !important;
-      }
-      main > div {
-        max-width: 100% !important;
-      }
-    `}</style>
-  </>
-);
+  return (
+    <>
+      <NextSeo
+        title="Y2K Sandbox: Powered by Windows Me™ 💾"
+        description="My first website on a Windows Me-powered time machine. You've been warned."
+        openGraph={{
+          title: "Y2K Sandbox: Powered by Windows Me™",
+        }}
+      />
+
+      {/* set a random retro wallpaper tile for the content area */}
+      <Wallpaper image={`/static/images/y2k/tiles/tile_${Math.floor(20 * Math.random())}.png`} tile>
+        <VNC server="wss://y2k.jrvs.io" />
+      </Wallpaper>
+
+      <style jsx global>{`
+        /* make the viewport a bit larger by un-sticking the nav bar */
+        header {
+          position: relative !important;
+        }
+
+        /* make an exception for the wrapper (and its background) to fill up the normal content area */
+        main {
+          padding: 0 !important;
+        }
+        main > div {
+          max-width: 100% !important;
+        }
+      `}</style>
+    </>
+  );
+};
 
 export default Y2K;