adding a footer and tos and pp pages

app/footer.tsx

@@ -0,0 +1,98 @@
+import Link from "next/link";
+
+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">
+              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>
+          <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">
+              Quick Links
+            </h3>
+            <ul className="space-y-2">
+              <li>
+                <Link
+                  href="/"
+                  className="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100"
+                >
+                  Home
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/play"
+                  className="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100"
+                >
+                  Play
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/rules"
+                  className="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100"
+                >
+                  Rules
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/playground"
+                  className="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100"
+                >
+                  Playground
+                </Link>
+              </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">
+              Connect
+            </h3>
+            <p className="text-sm text-gray-600 dark:text-gray-300">
+              Follow us on social media for updates and community discussions.
+            </p>
+            <div className="mt-2">
+              <Link
+                href="https://discord.gg/N2uEyp7Rfu"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+              >
+                Join our Discord community
+              </Link>
+            </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
+            reserved.
+          </p>
+          <div className="mt-2 space-x-4">
+            <Link
+              href="/terms"
+              className="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100"
+            >
+              Terms of Service
+            </Link>
+            <Link
+              href="/privacy"
+              className="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100"
+            >
+              Privacy Policy
+            </Link>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

app/layout.tsx

@@ -1,10 +1,11 @@
 import { ConvexAuthNextjsServerProvider } from "@convex-dev/auth/nextjs/server";
 import { type Metadata } from "next";
 import { Inter } from "next/font/google";
+import Script from "next/script";
+import Footer from "./footer";
 import Header from "./header";
 import { Providers } from "./provider";
 import "./globals.css";
-import Script from "next/script";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -35,7 +36,8 @@ export default function RootLayout({
         <body className={inter.className}>
           <Providers>
             <Header />
-            {children}
+            <main className="mb-12 flex-grow">{children}</main>
+            <Footer />
           </Providers>
         </body>
       </html>

app/privacy/page.tsx

@@ -0,0 +1,34 @@
+export default function PrivacyPolicy() {
+  return (
+    <div className="container mx-auto py-12">
+      <article className="prose dark:prose-invert lg:prose-xl">
+        <h1>Privacy Policy</h1>
+        <p>
+          At Survive The Night, we are committed to protecting your privacy.
+          This Privacy Policy explains how we collect, use, disclose, and
+          safeguard your information when you visit our website or use our
+          services.
+        </p>
+        <h2>1. Information We Collect</h2>
+        <p>
+          We may collect personal information that you provide directly to us,
+          such as when you create an account, contact us, or participate in any
+          interactive features of our services.
+        </p>
+        <h2>2. How We Use Your Information</h2>
+        <p>
+          We use the information we collect for various purposes, including to
+          provide, maintain, and improve our services, to communicate with you,
+          and to detect, prevent, and address technical issues.
+        </p>
+        <h2>3. Sharing of Your Information</h2>
+        <p>
+          We do not share, sell, rent or trade your personal information with
+          third parties for their commercial purposes, except as described in
+          this policy or with your consent.
+        </p>
+        {/* Add more sections as needed */}
+      </article>
+    </div>
+  );
+}

app/terms/page.tsx

@@ -0,0 +1,34 @@
+export default function TermsOfService() {
+  return (
+    <div className="container mx-auto py-12">
+      <article className="prose dark:prose-invert lg:prose-xl">
+        <h1>Terms of Service</h1>
+        <p>
+          Welcome to Survive The Night. By using our website and services, you
+          agree to comply with and be bound by the following terms and
+          conditions.
+        </p>
+        <h2>1. Acceptance of Terms</h2>
+        <p>
+          By accessing or using Survive The Night, you agree to these Terms of
+          Service and all applicable laws and regulations. If you do not agree
+          with any part of these terms, you may not use our services.
+        </p>
+        <h2>2. Use of Service</h2>
+        <p>
+          You agree to use Survive The Night only for lawful purposes and in a
+          way that does not infringe the rights of, restrict or inhibit anyone
+          else's use and enjoyment of the website.
+        </p>
+        <h2>3. Intellectual Property</h2>
+        <p>
+          The content, organization, graphics, design, compilation, magnetic
+          translation, digital conversion and other matters related to Survive
+          The Night are protected under applicable copyrights, trademarks and
+          other proprietary rights.
+        </p>
+        {/* Add more sections as needed */}
+      </article>
+    </div>
+  );
+}

app/test/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { useMutation } from "convex/react";
+import { useMutation, useQuery } from "convex/react";
 import { useRouter } from "next/navigation";
 import { ModelSelector } from "@/components/ModelSelector";
 import { Button } from "@/components/ui/button";
@@ -11,6 +11,7 @@ export default function TestPage() {
   const testModel = useMutation(api.games.testModel);
   const [model, setModel] = React.useState("");
   const router = useRouter();
+  const activeModels = useQuery(api.models.getActiveModels);
 
   const handleClick = async () => {
     await testModel({
@@ -28,6 +29,27 @@ export default function TestPage() {
         <ModelSelector onChange={setModel} value={model} />
         <Button onClick={handleClick}>Test Model</Button>
       </div>
+
+      <div className="flex flex-col gap-4">
+        <Button
+          variant="secondary"
+          onClick={async () => {
+            if (!activeModels) return;
+
+            await Promise.all(
+              activeModels.map((model) => {
+                return testModel({
+                  modelId: model.slug,
+                });
+              }),
+            );
+
+            router.push("/");
+          }}
+        >
+          Test All Models
+        </Button>
+      </div>
     </div>
   );
 }