feat: add screen resolution check

src/components/ResolutionCheck.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+const ResolutionCheck = () => {
+  const NocturneIcon = ({ className }) => (
+    <svg
+      width="457"
+      height="452"
+      viewBox="0 0 457 452"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        opacity="0.8"
+        d="M337.506 24.9087C368.254 85.1957 385.594 153.463 385.594 225.78C385.594 298.098 368.254 366.366 337.506 426.654C408.686 387.945 457 312.505 457 225.781C457 139.057 408.686 63.6173 337.506 24.9087Z"
+        fill="#CBCBCB"
+      />
+      <path
+        d="M234.757 20.1171C224.421 5.47596 206.815 -2.40914 189.157 0.65516C81.708 19.3019 0 112.999 0 225.781C0 338.562 81.7075 432.259 189.156 450.906C206.814 453.97 224.42 446.085 234.756 431.444C275.797 373.304 299.906 302.358 299.906 225.78C299.906 149.203 275.797 78.2567 234.757 20.1171Z"
+        fill="white"
+      />
+    </svg>
+  );
+
+  return (
+    <div className="bg-black min-h-screen flex items-center justify-center">
+      <div className="flex flex-col items-center max-w-3xl mx-auto text-center p-6">
+        <NocturneIcon className="w-20 h-20 mb-4" />
+        <div className="space-y-2">
+          <h2 className="text-[46px] font-[580] text-white tracking-tight">
+            Invalid Resolution
+          </h2>
+          <h2 className="text-[28px] font-[580] text-white/60 tracking-tight">
+            Nocturne is only intended for use on an 800x480 resolution screen.
+            Please adjust your browser's resolution to continue.
+          </h2>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ResolutionCheck;

src/pages/_app.jsx

@@ -14,6 +14,7 @@ import AuthSelection from "../components/AuthSelection";
 import { createClient } from "@supabase/supabase-js";
 import ButtonMappingOverlay from "../components/ButtonMappingOverlay";
 import classNames from "classnames";
+import ResolutionCheck from "../components/ResolutionCheck";
 
 const inter = Inter({ subsets: ["latin", "latin-ext"] });
 
@@ -101,6 +102,28 @@ export default function App({ Component, pageProps }) {
   const [showMappingOverlay, setShowMappingOverlay] = useState(false);
   const [brightness, setBrightness] = useState(160);
   const [showBrightnessOverlay, setShowBrightnessOverlay] = useState(false);
+  const [isCorrectResolution, setIsCorrectResolution] = useState(false);
+  const [screenSize, setScreenSize] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    const checkResolution = () => {
+      const width = window.innerWidth;
+      const height = window.innerHeight;
+      setScreenSize({ width, height });
+      setIsCorrectResolution(width === 800 && height === 480);
+
+      const resolutionElement = document.getElementById("current-resolution");
+      if (resolutionElement) {
+        resolutionElement.textContent = `${width} x ${height}`;
+      }
+    };
+
+    checkResolution();
+
+    window.addEventListener("resize", checkResolution);
+
+    return () => window.removeEventListener("resize", checkResolution);
+  }, []);
 
   const handleAuthSelection = async (selection) => {
     if (selection.type === "custom") {
@@ -1053,6 +1076,10 @@ export default function App({ Component, pageProps }) {
     }
   }, [activeSection, sectionGradients]);
 
+  if (!isCorrectResolution) {
+    return <ResolutionCheck />;
+  }
+
   if (!authSelectionMade) {
     return (
       <div className={inter.className}>