separate out windows me wallpaper container

components/VNC/VNC.module.css

@@ -1,17 +1,3 @@
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1.5em 0;
-  width: 100%;
-  min-height: 400px;
-  box-sizing: content-box;
-
-  /* specific retro wallpaper tile is set randomly by JS onload */
-  background-repeat: repeat;
-  background-position: center;
-}
-
 .display {
   height: 600px;
   width: 100%;

components/VNC/VNC.tsx

@@ -6,12 +6,10 @@ import RFB from "@novnc/novnc/core/rfb.js";
 import styles from "./VNC.module.css";
 
 type Props = {
-  className?: string;
+  server: string;
 };
 
-const WEBSOCKETS_SERVER = "wss://socket.y2k.app";
-
-const VNC = ({ className }: Props) => {
+const VNC = ({ server }: Props) => {
   const router = useRouter();
 
   // we definitely do NOT want this page to connect more than once!
@@ -56,7 +54,7 @@ const VNC = ({ className }: Props) => {
     }
 
     // https://github.com/novnc/noVNC/blob/master/docs/API.md
-    rfbRef.current = new RFB(screenRef.current, WEBSOCKETS_SERVER, {
+    rfbRef.current = new RFB(screenRef.current, server, {
       wsProtocols: ["binary", "base64"],
     });
     // scale screen to make it kinda "responsive"
@@ -91,23 +89,17 @@ const VNC = ({ className }: Props) => {
     console.log(
       "🤓 Hey, fellow nerd! Want to see how I made this? Check out this post: https://jarv.is/notes/y2k-sandbox/"
     );
-  }, [loaded]);
+  }, [loaded, server]);
 
   return (
-    <div
-      className={classNames(styles.container, className)}
-      style={{
-        // set a random retro wallpaper tile for the content area
-        backgroundImage: `url(/static/images/y2k/tiles/tile_${Math.floor(20 * Math.random())}.png)`,
-      }}
-    >
-      <div ref={consoleRef} className={classNames("monospace", styles.cmd)}>
+    <>
+      <div ref={consoleRef} className={classNames(styles.cmd, "monospace")}>
         <span ref={statusRef}>Spinning up your very own personal computer, please wait!</span>{" "}
         <span className={styles.blink}>_</span>
       </div>
 
       <div ref={screenRef} className={styles.display} style={{ display: "none" }} />
-    </div>
+    </>
   );
 };
 

components/Wallpaper/Wallpaper.module.css

@@ -0,0 +1,14 @@
+.wallpaper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1.5em 0;
+  width: 100%;
+  min-height: 400px;
+  box-sizing: content-box;
+}
+
+.tile {
+  background-repeat: repeat;
+  background-position: center;
+}

components/Wallpaper/Wallpaper.tsx

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from "react";
+import classNames from "classnames/bind";
+import type { ReactNode } from "react";
+
+import styles from "./Wallpaper.module.css";
+const cx = classNames.bind(styles);
+
+type Props = {
+  image: string;
+  tile?: boolean;
+  className?: string;
+  children: ReactNode;
+};
+
+const Wallpaper = ({ image, tile, className, ...rest }: Props) => {
+  const bgRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    bgRef.current.style.backgroundImage = `url(${image})`;
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return <div ref={bgRef} className={cx(styles.wallpaper, { tile: !!tile }, className)} {...rest} />;
+};
+
+export default Wallpaper;

pages/y2k.tsx

@@ -1,5 +1,6 @@
 import dynamic from "next/dynamic";
 import { NextSeo } from "next-seo";
+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 });
@@ -14,7 +15,10 @@ const Y2K = () => (
       }}
     />
 
-    <VNC />
+    {/* 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://socket.y2k.app" />
+    </Wallpaper>
 
     <style jsx global>{`
       /* make the viewport a bit larger by un-sticking the nav bar */