re-Give metadata to background, fix stupid system that i made because of an old error, and set color thing in seperate function

Precontation · Precontation · commit 9f406d0fda18 · 2026-01-19T22:16:21.000-08:00
diff --git a/src/app/games/GamesClient.tsx b/src/app/games/GamesClient.tsx
diff --git a/src/app/games/page.tsx b/src/app/games/page.tsx
@@ -1,10 +1,38 @@
-import { Suspense } from "react";
-import GamesClient from "./GamesClient";
+"use client";
 
-export default function Games() {
-  return (
-    <Suspense fallback={<></>}>
-      <GamesClient />
-    </Suspense>
-  );
+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>
+    );
+  }
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,37 +1,21 @@
-"use client";
+import SetColor from "@/components/SetColor";
 import SwitcherLink from "@/components/SwitcherLink";
-import { useEffect, useRef } from "react";
+import { Metadata } from "next";
 import "./globals.css";
 
-// export const metadata: Metadata = {
-//   title: "Precontation",
-//   description: "Epic generic website! (wow)",
-// };
+export const metadata: Metadata = {
+  title: "Precontation",
+  description: "Epic generic website! (wow)",
+};
 
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  // Stackoverflow, you may be pretty much dead, but you aren't dead in my heart!
-  // Modified from https://stackoverflow.com/questions/1484506/random-color-generator
-  function getRandomColor() {
-    const letters = "89ABCDEF89ABCDEF";
-    let color = "#";
-    for (let i = 0; i < 6; i++) {
-      color += letters[Math.floor(Math.random() * 16)];
-    }
-    return color;
-  }
-
-  const rootRef = useRef<HTMLHtmlElement>(null);
-
-  useEffect(() => {
-    rootRef.current?.style.setProperty("--secondary", getRandomColor());
-  }, []);
-
   return (
-    <html lang="en" ref={rootRef}>
+    <html lang="en">
+      <SetColor />
       <body className="antialiased flex flex-col min-h-screen">
         <header className="backdrop-blur-3xl border-b sticky top-0 min-w-full z-100">
           <nav className="flex gap-10 h-10 justify-center">
diff --git a/src/components/SetColor.tsx b/src/components/SetColor.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function SetColor() {
+  // Stackoverflow, you may be pretty much dead, but you aren't dead in my heart!
+  // Modified from https://stackoverflow.com/questions/1484506/random-color-generator
+  function getRandomColor() {
+    const letters = "89ABCDEF89ABCDEF";
+    let color = "#";
+    for (let i = 0; i < 6; i++) {
+      color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
+  }
+
+  useEffect(() => {
+    document.documentElement.style.setProperty("--secondary", getRandomColor());
+  }, []);
+
+  return <></>;
+}
