From 418a98992a5b038bfcd422ac6f665c3b2da775da Mon Sep 17 00:00:00 2001
From: Cody Seibert <webdevcody@gmail.com>
Date: Fri, 25 Oct 2024 14:19:41 -0400
Subject: [PATCH] making the watch page and header more responensive

---
 app/footer.tsx           | 19 +++++---
 app/header.tsx           | 98 +++++++++++++++++++++++++++++-----------
 app/layout.tsx           | 14 ++++++
 app/page.tsx             | 60 ++++++++++++------------
 app/result.tsx           | 13 +++---
 components/MapStatus.tsx |  4 +-
 6 files changed, 138 insertions(+), 70 deletions(-)

diff --git a/app/footer.tsx b/app/footer.tsx
index 99cf353..ec2f520 100644
--- a/app/footer.tsx
+++ b/app/footer.tsx
@@ -1,21 +1,27 @@
 import Link from "next/link";
+import { ThemeToggle } from "@/components/ThemeToggle";
 
 export default function Footer() {
   return (
     <footer className="border-t bg-gray-100 py-8 dark:bg-slate-950">
       <div className="container mx-auto px-4">
         <div className="flex flex-wrap justify-between">
-          <div className="mb-4 w-full md:w-1/3">
-            <h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-gray-100">
+          <div className="mb-12 flex w-full flex-col gap-4 md:mb-4 md:w-1/3">
+            <h3 className="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100 md:mb-2">
               Survive The Night
             </h3>
+
             <p className="text-sm text-gray-600 dark:text-gray-300">
               A zombie survival simulation game that challenges both AI models
               and human players.
             </p>
+
+            <div className="hidden w-fit md:block">
+              <ThemeToggle />
+            </div>
           </div>
-          <div className="mb-4 w-full md:w-1/3">
-            <h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-gray-100">
+          <div className="mb-12 w-full md:mb-4 md:w-1/3">
+            <h3 className="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100 md:mb-2">
               Quick Links
             </h3>
             <ul className="space-y-2">
@@ -53,8 +59,8 @@ export default function Footer() {
               </li>
             </ul>
           </div>
-          <div className="mb-4 w-full md:w-1/3">
-            <h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-gray-100">
+          <div className="mb-12 w-full md:mb-4 md:w-1/3">
+            <h3 className="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100 md:mb-2">
               Connect
             </h3>
             <p className="text-sm text-gray-600 dark:text-gray-300">
@@ -72,6 +78,7 @@ export default function Footer() {
             </div>
           </div>
         </div>
+
         <div className="mt-8 border-t border-gray-200 pt-4 text-center dark:border-gray-700">
           <p className="text-sm text-gray-600 dark:text-gray-300">
             © {new Date().getFullYear()} Survive The Night. All rights
diff --git a/app/header.tsx b/app/header.tsx
index e6cf3c5..c95af52 100644
--- a/app/header.tsx
+++ b/app/header.tsx
@@ -1,8 +1,12 @@
 "use client";
 
+import { useState } from "react";
 import { useAuthActions } from "@convex-dev/auth/react";
-import { GitHubLogoIcon } from "@radix-ui/react-icons";
-import { ChevronDownIcon } from "@radix-ui/react-icons";
+import {
+  ChevronDownIcon,
+  GitHubLogoIcon,
+  HamburgerMenuIcon,
+} from "@radix-ui/react-icons";
 import { Authenticated, Unauthenticated, useQuery } from "convex/react";
 import dynamic from "next/dynamic";
 import Image from "next/image";
@@ -16,35 +20,36 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { api } from "@/convex/_generated/api";
 
-const ThemeToggle = dynamic(
-  async () => (await import("@/components/ThemeToggle")).ThemeToggle,
-  {
-    ssr: false,
-  },
-);
+const links = [
+  { href: "/", label: "Watch" },
+  { href: "/play", label: "Play" },
+  { href: "/playground", label: "Playground" },
+];
 
 export default function Header() {
   const { signOut } = useAuthActions();
   const flags = useQuery(api.flags.getFlags);
   const isAdminQuery = useQuery(api.users.isAdmin);
+  const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  const toggleMobileMenu = () => setMobileMenuOpen(!isMobileMenuOpen);
 
   return (
     <header className="flex items-center justify-between border-b px-6 py-4 shadow-sm">
       <Link href="/" className="flex items-center" passHref>
         <Image src="/logo.png" alt="Logo" width={32} height={32} priority />
-        <span className="ml-2 text-xl font-bold">SurviveTheNight</span>
+        <span className="text-md ml-2 text-xs font-bold md:text-xl lg:text-xl">
+          SurviveTheNight
+        </span>
       </Link>
 
-      <nav className="flex items-center space-x-4">
-        <Button variant="ghost" asChild>
-          <Link href="/">Watch</Link>
-        </Button>
-        <Button variant="ghost" asChild>
-          <Link href="/play">Play</Link>
-        </Button>
-        <Button variant="ghost" asChild>
-          <Link href="/playground">Playground</Link>
-        </Button>
+      <nav className="hidden items-center gap-2 md:flex xl:gap-4">
+        {links.map((link) => (
+          <Button key={link.href} variant="ghost" asChild>
+            <Link href={link.href}>{link.label}</Link>
+          </Button>
+        ))}
+
         {isAdminQuery && (
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
@@ -74,17 +79,14 @@ export default function Header() {
           href="https://www.convex.dev"
           target="_blank"
           rel="noopener noreferrer"
-          className="flex items-center gap-2 text-sm"
+          className="hidden items-center gap-2 text-sm md:flex"
           passHref
         >
-          Synced using Convex
+          <span className="hidden lg:block">Synced using Convex</span>
           <Image src="/convex.svg" alt="Convex" width={24} height={24} />
         </Link>
-        <div className="">
-          <ThemeToggle />
-        </div>
         <Button
-          className="w-9 shrink-0"
+          className="flex items-center justify-center"
           asChild
           variant="outline"
           size="icon"
@@ -108,9 +110,53 @@ export default function Header() {
           </Link>
         </Unauthenticated>
         <Authenticated>
-          <Button onClick={() => void signOut()}>Sign Out</Button>
+          <Button className="hidden md:block" onClick={() => void signOut()}>
+            Sign Out
+          </Button>
         </Authenticated>
+        <Button
+          className="md:hidden"
+          variant="ghost"
+          onClick={toggleMobileMenu}
+        >
+          <HamburgerMenuIcon className="h-4 w-4" />
+        </Button>
       </div>
+
+      {isMobileMenuOpen && (
+        <div className="absolute left-0 top-16 w-full border-b bg-white shadow-md dark:bg-slate-950 md:hidden">
+          <nav className="flex flex-col items-start space-y-2 p-4">
+            {links.map((link) => (
+              <Button key={link.href} variant="ghost" asChild>
+                <Link href={link.href}>{link.label}</Link>
+              </Button>
+            ))}
+
+            {isAdminQuery && (
+              <>
+                <div className="my-2 w-full border-t border-gray-200 dark:border-gray-700"></div>
+                <Button variant="ghost" asChild>
+                  <Link href="/prompts">Review Prompts</Link>
+                </Button>
+                <Button variant="ghost" asChild>
+                  <Link href="/admin/review">Review Maps</Link>
+                </Button>
+                {flags?.showTestPage && (
+                  <Button variant="ghost" asChild>
+                    <Link href="/test">Test</Link>
+                  </Button>
+                )}
+              </>
+            )}
+            <Authenticated>
+              <div className="my-2 w-full border-t border-gray-200 dark:border-gray-700"></div>
+              <Button variant="ghost" onClick={() => void signOut()}>
+                Sign Out
+              </Button>
+            </Authenticated>
+          </nav>
+        </div>
+      )}
     </header>
   );
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 27d9800..63046ba 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -18,6 +18,19 @@ export const metadata: Metadata = {
   },
 };
 
+function BreakpointIndicator() {
+  return (
+    <div className="fixed bottom-0 right-0 z-50 m-2 rounded bg-black p-1 text-xs font-bold text-white opacity-75">
+      <div className="block sm:hidden">xs</div>
+      <div className="hidden sm:block md:hidden">sm</div>
+      <div className="hidden md:block lg:hidden">md</div>
+      <div className="hidden lg:block xl:hidden">lg</div>
+      <div className="hidden xl:block 2xl:hidden">xl</div>
+      <div className="hidden 2xl:block">2xl</div>
+    </div>
+  );
+}
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -38,6 +51,7 @@ export default function RootLayout({
             <Header />
             <main className="mb-12 flex-grow">{children}</main>
             <Footer />
+            <BreakpointIndicator />
           </Providers>
         </body>
       </html>
diff --git a/app/page.tsx b/app/page.tsx
index 2335124..cc137d5 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -37,7 +37,7 @@ export default function GamePage() {
   }
 
   return (
-    <div className="container mx-auto flex gap-12 pt-12">
+    <div className="container mx-auto flex flex-col gap-12 pt-12 lg:flex-row">
       <div className="flex-grow space-y-8">
         <h1 className="text-2xl font-bold">Recent Games</h1>
         <div className="flex h-[calc(100vh_-_185px)] flex-col gap-4 overflow-y-auto">
@@ -49,37 +49,37 @@ export default function GamePage() {
 
       <div className="space-y-8">
         <div className="flex items-center justify-between">
-          <h2 className="text-2xl font-bold">LLM Leaderboard</h2>
-          <Button asChild>
-            <Link href="/leaderboard">View Full Leaderboard</Link>
-          </Button>
+          <h2 className="text-2xl font-bold">AI Leaderboard</h2>
         </div>
-        <Table className="w-[500px]">
-          <TableHeader>
-            <TableRow>
-              <TableHead>Model ID</TableHead>
-              <TableHead className="text-right">Wins</TableHead>
-              <TableHead className="text-right">Losses</TableHead>
-              <TableHead className="text-right">Total Games</TableHead>
-              <TableHead className="text-right">Win Ratio</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {globalRanking?.map((item) => (
-              <TableRow key={item._id}>
-                <TableCell>{item.modelId}</TableCell>
-                <TableCell className="text-right">{item.wins}</TableCell>
-                <TableCell className="text-right">{item.losses}</TableCell>
-                <TableCell className="text-right">
-                  {item.wins + item.losses}
-                </TableCell>
-                <TableCell className="text-right">
-                  {((item.wins / (item.wins + item.losses)) * 100).toFixed(2)}%
-                </TableCell>
+        <div className="overflow-x-auto">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Model ID</TableHead>
+                <TableHead className="text-right">Wins</TableHead>
+                <TableHead className="text-right">Losses</TableHead>
+                <TableHead className="text-right">Total Games</TableHead>
+                <TableHead className="text-right">Win Ratio</TableHead>
               </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+            </TableHeader>
+            <TableBody>
+              {globalRanking?.map((item) => (
+                <TableRow key={item._id}>
+                  <TableCell>{item.modelId}</TableCell>
+                  <TableCell className="text-right">{item.wins}</TableCell>
+                  <TableCell className="text-right">{item.losses}</TableCell>
+                  <TableCell className="text-right">
+                    {item.wins + item.losses}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    {((item.wins / (item.wins + item.losses)) * 100).toFixed(2)}
+                    %
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
       </div>
     </div>
   );
diff --git a/app/result.tsx b/app/result.tsx
index a77c608..2deec76 100644
--- a/app/result.tsx
+++ b/app/result.tsx
@@ -9,7 +9,7 @@ import { type ResultWithGame } from "@/convex/results";
 
 export default function Result({ result }: { result: ResultWithGame }) {
   return (
-    <Card className="flex gap-8 rounded-xl border p-4">
+    <Card className="flex flex-col gap-8 rounded-xl border p-4 sm:flex-row">
       {result.status === "completed" && (
         <Visualizer
           cellSize="32"
@@ -19,6 +19,7 @@ export default function Result({ result }: { result: ResultWithGame }) {
           map={result.map}
         />
       )}
+
       {result.status === "failed" && (
         <div className="max-w-[200px] text-red-500">
           Game failed: {result.error}
@@ -32,22 +33,22 @@ export default function Result({ result }: { result: ResultWithGame }) {
       )}
 
       {result.game !== null && (
-        <div className="flex flex-col gap-2">
+        <div className="mt-4 flex flex-col gap-2 md:mt-0">
           <div className="flex h-full flex-col justify-center gap-2">
             <Link
               href={`/play/${result.level}`}
-              className="cursor-pointer whitespace-nowrap text-xl hover:underline"
+              className="cursor-pointer whitespace-nowrap text-xl underline"
             >
               Night #{result.level}
             </Link>{" "}
             <Link
               href={`/games/${result.game._id}`}
-              className="cursor-pointer whitespace-nowrap hover:underline"
+              className="cursor-pointer whitespace-nowrap underline"
             >
               Game {result.game._id.substring(0, 8)}...
             </Link>
-            <div className="flex gap-2">
-              The <span className="font-bold">{result.game.modelId}</span> model
+            <div className="text-wrap">
+              The <span className="font-bold">{result.game.modelId}</span> model{" "}
               {result.status === "inProgress" ? (
                 "Started"
               ) : (
diff --git a/components/MapStatus.tsx b/components/MapStatus.tsx
index 2ca1391..378c9f9 100644
--- a/components/MapStatus.tsx
+++ b/components/MapStatus.tsx
@@ -4,8 +4,8 @@ export function MapStatus({ map }: { map: string[][] }) {
   const isWin = ZombieSurvival.isWin(map);
 
   return (
-    <div className={`font-bold ${isWin ? "text-green-500" : "text-red-500"}`}>
+    <span className={`font-bold ${isWin ? "text-green-500" : "text-red-500"}`}>
       {isWin ? "WON" : "LOST"}
-    </div>
+    </span>
   );
 }