Merge branch 'main' of github.com:webdevcody/survive-the-night-sim

webdevcody · Oct 25, 2024 · ffd192b · ffd192b
2 parents 7b6967c + e9aec67
commit ffd192b
Show file tree

Hide file tree

Showing 36 changed files with 963 additions and 428 deletions.
diff --git a/app/admin/review/page.tsx b/app/admin/review/page.tsx
@@ -2,6 +2,7 @@
 
 import { useMutation, useQuery } from "convex/react";
 import { Map } from "@/components/Map";
+import { Page, PageTitle } from "@/components/Page";
 import { PlayMapButton } from "@/components/PlayMapButton";
 import { Button } from "@/components/ui/button";
 import {
@@ -21,8 +22,8 @@ export default function AdminReviewPage() {
 
   if (isAdmin == true) {
     return (
-      <div className="container mx-auto min-h-screen gap-8 py-12 pb-24">
-        <h1 className="mb-6 text-center text-3xl font-bold">Review Maps</h1>
+      <Page>
+        <PageTitle>Review Maps</PageTitle>
         <div className="grid grid-cols-[max-content_max-content] justify-center gap-4">
           {maps?.map((map) => (
             <Card key={map._id}>
@@ -56,7 +57,7 @@ export default function AdminReviewPage() {
             </Card>
           ))}
         </div>
-      </div>
+      </Page>
     );
   }
 

diff --git a/app/auth/page.tsx b/app/auth/page.tsx
@@ -1,35 +1,34 @@
 "use client";
 
 import React from "react";
-import { Button } from "@/components/ui/button";
 import { useAuthActions } from "@convex-dev/auth/react";
-import { GitHubLogoIcon } from "@radix-ui/react-icons";
 import { SiGoogle } from "@icons-pack/react-simple-icons";
+import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import { Page, PageTitle } from "@/components/Page";
+import { Button } from "@/components/ui/button";
 
 const AuthPage = () => {
   const { signIn } = useAuthActions();
 
   return (
-    <div className="container mx-auto min-h-screen py-12 pb-24 gap-8">
-      <h1 className="text-center text-3xl font-semibold mb-6">
-        Select How To Sign In
-      </h1>
+    <Page>
+      <PageTitle>Select How To Sign In</PageTitle>
 
-      <div className="w-full gap-8 flex justify-center">
+      <div className="flex w-full justify-center gap-8">
         <Button
-          className="gap-1 flex"
+          className="flex gap-1"
           onClick={() => void signIn("google", { redirectTo: "/" })}
         >
-          <SiGoogle className="w-4 h-4" /> Google
+          <SiGoogle className="h-4 w-4" /> Google
         </Button>
         <Button
-          className="gap-1 flex"
+          className="flex gap-1"
           onClick={() => void signIn("github", { redirectTo: "/" })}
         >
-          <GitHubLogoIcon className="w-4 h-4" /> GitHub
+          <GitHubLogoIcon className="h-4 w-4" /> GitHub
         </Button>
       </div>
-    </div>
+    </Page>
   );
 };
 

diff --git a/app/games/[gameId]/page.tsx b/app/games/[gameId]/page.tsx
@@ -2,6 +2,7 @@
 
 import { useQuery } from "convex/react";
 import { Result } from "./result";
+import { Page } from "@/components/Page";
 import { api } from "@/convex/_generated/api";
 import { Id } from "@/convex/_generated/dataModel";
 
@@ -14,7 +15,7 @@ export default function GamePage({ params }: { params: { gameId: string } }) {
   });
 
   return (
-    <div className="container mx-auto flex min-h-screen max-w-5xl flex-col items-center gap-8 py-12 pb-24">
+    <Page className="flex max-w-5xl flex-col items-center gap-8">
       <h1>Game {params.gameId}</h1>
       <h2>Model: {game?.modelId}</h2>
 
@@ -28,6 +29,6 @@ export default function GamePage({ params }: { params: { gameId: string } }) {
           results.map((result) => <Result result={result} key={result._id} />)
         )}
       </div>
-    </div>
+    </Page>
   );
 }
diff --git a/app/games/[gameId]/result.tsx b/app/games/[gameId]/result.tsx
@@ -34,7 +34,7 @@ export const Result = ({ result }: { result: Doc<"results"> }) => {
           {result.error}
         </div>
       ) : (
-        <Visualizer map={result.map} autoStart={true} />
+        <Visualizer map={result.map} autoStart />
       )}
 
       <div className="flex flex-col">

diff --git a/app/leaderboard/page.tsx b/app/leaderboard/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useQuery } from "convex/react";
+import { Page, PageTitle } from "@/components/Page";
 import {
   Table,
   TableBody,
@@ -65,8 +66,8 @@ const LeaderBoard = () => {
   );
 
   return (
-    <div className="container mx-auto min-h-screen gap-8 py-12 pb-24">
-      <h1 className="mb-6 text-center text-3xl font-bold">Leaderboard</h1>
+    <Page>
+      <PageTitle>Leaderboard</PageTitle>
 
       <Tabs defaultValue="global">
         <TabsList>
@@ -140,7 +141,7 @@ const LeaderBoard = () => {
           </Table>
         </TabsContent>
       </Tabs>
-    </div>
+    </Page>
   );
 };
 

diff --git a/app/play/[level]/[attempt]/page.tsx b/app/play/[level]/[attempt]/page.tsx
@@ -4,6 +4,7 @@ import * as React from "react";
 import { ChevronLeftIcon } from "@radix-ui/react-icons";
 import { useQuery } from "convex/react";
 import Link from "next/link";
+import { Page, PageTitle } from "@/components/Page";
 import { Visualizer } from "@/components/Visualizer";
 import { Button } from "@/components/ui/button";
 import { api } from "@/convex/_generated/api";
@@ -23,18 +24,18 @@ export default function PlayLevelAttemptPage({
 
   if (attempt === undefined) {
     return (
-      <div className="container mx-auto flex min-h-screen flex-col items-center gap-8 py-12 pb-24">
+      <Page className="flex flex-col items-center gap-8">
         <div className="flex w-full items-center justify-between">
           <Button variant="outline" asChild className="flex items-center gap-2">
             <Link href={`/play/${level}`} passHref>
               <ChevronLeftIcon /> Back To Night #{level}
             </Link>
           </Button>
         </div>
-        <h1 className="text-center text-3xl font-bold">Night #{level}</h1>
+        <PageTitle>Night #{level}</PageTitle>
         <h2 className="mb-4 text-xl font-semibold">Attempt #{attemptNum}</h2>
         Loading...
-      </div>
+      </Page>
     );
   } else if (attempt === null) {
     return (
@@ -45,15 +46,15 @@ export default function PlayLevelAttemptPage({
   }
 
   return (
-    <div className="container mx-auto flex min-h-screen flex-col items-center gap-8 py-12 pb-24">
+    <Page className="flex flex-col items-center gap-8">
       <div className="flex w-full items-center justify-between">
         <Button variant="outline" asChild className="flex items-center gap-2">
           <Link href={`/play/${level}`} passHref>
             <ChevronLeftIcon /> Back To Night #{level}
           </Link>
         </Button>
       </div>
-      <h1 className="text-center text-3xl font-bold">Night #{level}</h1>
+      <PageTitle>Night #{level}</PageTitle>
       <h2 className="mb-4 text-xl font-semibold">Attempt #{attemptNum}</h2>
 
       <div className="flex flex-col items-center gap-y-2">
@@ -66,6 +67,6 @@ export default function PlayLevelAttemptPage({
           {attempt.didWin ? "You Survived!" : "You Died!"}
         </div>
       </div>
-    </div>
+    </Page>
   );
 }
diff --git a/app/play/[level]/page.tsx b/app/play/[level]/page.tsx
@@ -7,6 +7,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import TestMode from "./test-mode";
 import { Map } from "@/components/Map";
+import { Page, PageTitle } from "@/components/Page";
 import { Visualizer } from "@/components/Visualizer";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -49,7 +50,7 @@ export default function PlayLevelPage({
 
   if (!map) {
     return (
-      <div className="container mx-auto flex min-h-screen flex-col items-center gap-8 py-12 pb-24">
+      <Page className="flex flex-col items-center gap-8">
         <div className="flex w-full items-center justify-between">
           <Button variant="outline" asChild className="flex items-center gap-2">
             <Link href="/play" passHref>
@@ -71,10 +72,10 @@ export default function PlayLevelPage({
             </Tabs>
           )}
         </div>
-        <h1 className="mb-6 text-center text-3xl font-bold">Night #{level}</h1>
+        <PageTitle>Night #{level}</PageTitle>
 
         <p>Loading...</p>
-      </div>
+      </Page>
     );
   }
 
@@ -156,7 +157,7 @@ export default function PlayLevelPage({
   };
 
   return (
-    <div className="container mx-auto flex min-h-screen flex-col items-center gap-8 py-12 pb-24">
+    <Page className="flex flex-col items-center gap-8">
       <div className="flex w-full items-center justify-between">
         <Button variant="outline" asChild className="flex items-center gap-2">
           <Link href="/play" passHref>
@@ -178,7 +179,7 @@ export default function PlayLevelPage({
           </Tabs>
         )}
       </div>
-      <h1 className="text-center text-3xl font-bold">Night #{level}</h1>
+      <PageTitle>Night #{level}</PageTitle>
 
       {mode === "play" ? (
         <>
@@ -206,7 +207,7 @@ export default function PlayLevelPage({
               <>
                 <Visualizer
                   map={playerMap}
-                  autoStart={true}
+                  autoStart
                   onReset={handleReset}
                   onSimulationEnd={handleSimulationEnd}
                 />
@@ -311,6 +312,6 @@ export default function PlayLevelPage({
       ) : (
         <TestMode level={level} map={map.grid} />
       )}
-    </div>
+    </Page>
   );
 }
diff --git a/app/play/[level]/test-mode.tsx b/app/play/[level]/test-mode.tsx
@@ -105,7 +105,7 @@ export default function TestMode({ level, map }: TestModeProps) {
       {aiError && <div className="mt-4 text-red-500">{aiError}</div>}
       {gameResult && (
         <div className="mx-auto mt-4 flex max-w-4xl flex-col items-center gap-8">
-          <Visualizer map={playerMap} autoStart={true} onReset={handleReset} />
+          <Visualizer map={playerMap} autoStart onReset={handleReset} />
           <div className="flex flex-1 flex-col gap-4">
             <div
               className={`text-2xl font-bold ${

diff --git a/app/play/page.tsx b/app/play/page.tsx
@@ -11,6 +11,7 @@ import {
 import { TrashIcon } from "lucide-react";
 import Link from "next/link";
 import { Map as GameMap } from "@/components/Map";
+import { Page, PageTitle } from "@/components/Page";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -79,8 +80,8 @@ export default function PlayPage() {
 
   if (filteredMaps === undefined) {
     return (
-      <div className="container mx-auto min-h-screen gap-8 py-12 pb-24">
-        <h1 className="mb-6 text-center text-3xl font-bold">Choose a Night</h1>
+      <Page>
+        <PageTitle>Choose a Night</PageTitle>
 
         <Authenticated>
           <ToggleGroup
@@ -102,13 +103,13 @@ export default function PlayPage() {
             <Skeleton key={index} className="h-96" />
           ))}
         </div>
-      </div>
+      </Page>
     );
   }
 
   return (
-    <div className="container mx-auto min-h-screen gap-8 py-12 pb-24">
-      <h1 className="mb-6 text-center text-3xl font-bold">Choose a Night</h1>
+    <Page>
+      <PageTitle>Choose a Night</PageTitle>
 
       <Authenticated>
         <ToggleGroup
@@ -223,6 +224,6 @@ export default function PlayPage() {
           </Card>
         ))}
       </div>
-    </div>
+    </Page>
   );
 }