diff --git a/components/VNC/VNC.module.css b/components/VNC/VNC.module.css index ff4b50a2..03b5282b 100644 --- a/components/VNC/VNC.module.css +++ b/components/VNC/VNC.module.css @@ -1,5 +1,11 @@ .container { - padding: 1.5em; + 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; @@ -7,15 +13,12 @@ } .display { - display: block; - margin: auto; + height: 600px; + width: 100%; max-width: 800px; - max-height: 600px; /* fix fuzziness: https://stackoverflow.com/a/13492784 */ image-rendering: optimizeSpeed; - image-rendering: -moz-crisp-edges; - image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated; @@ -31,12 +34,10 @@ } .cmd { - display: block; - margin: auto; - width: 700px; - height: 400px; - padding: 12px; - z-index: -100; + width: 100%; + max-width: 700px; + min-height: 400px; + padding: 1em; background-color: #000000; color: #cccccc; diff --git a/components/VNC/VNC.tsx b/components/VNC/VNC.tsx index 48b71672..c25aca76 100644 --- a/components/VNC/VNC.tsx +++ b/components/VNC/VNC.tsx @@ -59,6 +59,8 @@ const VNC = ({ className }: Props) => { rfbRef.current = new RFB(screenRef.current, WEBSOCKETS_SERVER, { wsProtocols: ["binary", "base64"], }); + // scale screen to make it kinda "responsive" + rfbRef.current.scaleViewport = true; // this is the one and only time we're spinning up a VM (hopefully) setLoaded(true); @@ -69,6 +71,8 @@ const VNC = ({ className }: Props) => { // hide the console when VM connects consoleRef.current.style.display = "none"; + // ...and show the screen + screenRef.current.style.display = "block"; }); // VM disconnected @@ -77,6 +81,7 @@ const VNC = ({ className }: Props) => { // 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."; @@ -93,7 +98,7 @@ const VNC = ({ className }: Props) => { className={classNames(styles.container, className)} style={{ // set a random retro wallpaper tile for the content area - background: `url('/static/images/y2k/tiles/tile_${Math.floor(20 * Math.random())}.png')`, + backgroundImage: `url(/static/images/y2k/tiles/tile_${Math.floor(20 * Math.random())}.png)`, }} >