alright

Author: Precontation

src/app/games/client.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import GamesButton from "@/components/GamesButton";
+import { useSearchParams } from "next/navigation";
+
+export default function GamesClient() {
+  const params = useSearchParams();
+  const game = params.get("g");
+  if (game) {
+    return (
+      <iframe className={"h-dvh w-dvw"} src={`/${game}/index.html`}></iframe>
+    );
+  } else {
+    return (
+      <div className="flex flex-col items-center gap-5">
+        <h1 className="justify-center text-7xl w-fit text-primary overflow-hidden">
+          Games
+        </h1>
+        <h2 className="justify-center text-3xl w-fit text-secondary overflow-hidden">
+          Some (very unfinished) games by yours truly!
+        </h2>
+        <nav className=" grid grid-cols-3 gap-10">
+          <GamesButton to="br2" name="Banana Run 2"></GamesButton>
+          <GamesButton to="br3" name="Banana Run 3"></GamesButton>
+          <GamesButton
+            to="cfp"
+            name="Click For Points (web edition)"
+          ></GamesButton>
+          <GamesButton
+            to="clicks_and_points"
+            name="Clicks & Points (VERY VERY EARLY DEVELOPEMENT)"
+          ></GamesButton>
+          <GamesButton to="plat" name="Unnamed platformer game"></GamesButton>
+        </nav>
+      </div>
+    );
+  }
+}

src/app/games/page.tsx

@@ -1,38 +1,10 @@
-"use client";
-
-import GamesButton from "@/components/GamesButton";
-import { useSearchParams } from "next/navigation";
-
-export default function GamesClient() {
-  const params = useSearchParams();
-  const game = params.get("g");
-  if (game) {
-    return (
-      <iframe className={"h-dvh w-dvw"} src={`/${game}/index.html`}></iframe>
-    );
-  } else {
-    return (
-      <div className="flex flex-col items-center gap-5">
-        <h1 className="justify-center text-7xl w-fit text-primary overflow-hidden">
-          Games
-        </h1>
-        <h2 className="justify-center text-3xl w-fit text-secondary overflow-hidden">
-          Some (very unfinished) games by yours truly!
-        </h2>
-        <nav className=" grid grid-cols-3 gap-10">
-          <GamesButton to="br2" name="Banana Run 2"></GamesButton>
-          <GamesButton to="br3" name="Banana Run 3"></GamesButton>
-          <GamesButton
-            to="cfp"
-            name="Click For Points (web edition)"
-          ></GamesButton>
-          <GamesButton
-            to="clicks_and_points"
-            name="Clicks & Points (VERY VERY EARLY DEVELOPEMENT)"
-          ></GamesButton>
-          <GamesButton to="plat" name="Unnamed platformer game"></GamesButton>
-        </nav>
-      </div>
-    );
-  }
-}
+import { Suspense } from "react";
+import GamesClient from "./client";
+
+export default function Games() {
+  return (
+    <Suspense fallback={<p>Loading...</p>}>
+      <GamesClient />
+    </Suspense>
+  );
+}

src/app/layout.tsx

@@ -25,6 +25,7 @@ export default function RootLayout({
         </header>
 
         <SetColor />
+
         <main className="grow content-center">{children}</main>
       </body>
     </html>

src/components/SetColor.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
+import { useLayoutEffect } from "react";
 
 export default function SetColor() {
   // Stackoverflow, you may be pretty much dead, but you aren't dead in my heart!
@@ -14,7 +14,7 @@ export default function SetColor() {
     return color;
   }
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     document.documentElement.style.setProperty("--secondary", getRandomColor());
   }, []);