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 terminalRef = useRef<HTMLDivElement>(null);
-  const statusRef = useRef<HTMLSpanElement>(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(() => {
+  // makes the console reappear with the given message if there's an error loading, or if the VM has gone poof for
-    // end the session when the current page changes
+  // whatever reason (doesn't really matter).
-    const disconnectVM = () => {
+  const showTerminalMessage = (message = "") => {
-      try {
+    try {
-        rfbRef.current.disconnect();
+      screenRef.current.style.display = "none";
-      } catch (e) {} // eslint-disable-line no-empty
+      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 =
+      showTerminalMessage("WebSockets must be enabled to begin!");
-        "WebSockets must be enabled to play in the Y2K Sandbox!!!\n\nPress the Any key to continue.";
-
       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
+      showScreen();
-      consoleRef.current.style.display = "none";
-      // ...and show the screen
-      screenRef.current.style.display = "block";
     });
 
     // 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)
+      showTerminalMessage("Oh dear, it looks like something's gone very wrong. Sorry about that.");
-      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
     });
-
-    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")}>
+      <div ref={terminalRef} className={classNames(styles.cmd, "monospace")}>
-        <span ref={statusRef}>Spinning up your very own personal computer, please wait!</span>{" "}
+        <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 = () => (
+const Y2K = () => {
-  <>
+  // print a fancy console message (in browser only) just for funsies
-    <NextSeo
+  useEffect(() => {
-      title="Y2K Sandbox: Powered by Windows Me™ 💾"
+    console.log(
-      description="My first website on a Windows Me-powered time machine. You've been warned."
+      `
-      openGraph={{
+%c🤓 %cHey there, fellow nerd!%c Looking for the magic behind this page?
-        title: "Y2K Sandbox: Powered by Windows Me™",
-      }}
-    />
 
-    {/* set a random retro wallpaper tile for the content area */}
+%cCheck out this post: https://jarv.is/notes/y2k-sandbox/
-    <Wallpaper image={`/static/images/y2k/tiles/tile_${Math.floor(20 * Math.random())}.png`} tile>
-      <VNC server="wss://y2k.jrvs.io" />
-    </Wallpaper>
 
-    <style jsx global>{`
+...or the source code here: https://github.com/jakejarvis/y2k
-      /* make the viewport a bit larger by un-sticking the nav bar */
+`,
-      header {
+      "font-size: 20px",
-        position: relative !important;
+      "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 */
+  return (
-      main {
+    <>
-        padding: 0 !important;
+      <NextSeo
-      }
+        title="Y2K Sandbox: Powered by Windows Me™ 💾"
-      main > div {
+        description="My first website on a Windows Me-powered time machine. You've been warned."
-        max-width: 100% !important;
+        openGraph={{
-      }
+          title: "Y2K Sandbox: Powered by Windows Me™",
-    `}</style>
+        }}
-  </>
+      />
-);
+
+      {/* 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;