Merge remote-tracking branch 'upstream/main' into fix-structure

webdevcody · Oct 16, 2024 · 9cf8534 · 9cf8534
2 parents 8e6f8a9 + e8b074a
commit 9cf8534
Show file tree

Hide file tree

Showing 19 changed files with 467 additions and 173 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,9 +1,9 @@
 This is a community project for my discord, so please join if you want to participate.
 
-You can still contribute without being part of discord, but it would be nice.
+## How to Contribute
 
-## Join the community
+if you see an issue, leave a comment saying "I want to work on this", then I will assign it to you.
 
-Want to help build on this project?
+## Join the Discord
 
-- Join the [WDC Discord](https://discord.gg/N2uEyp7Rfu)
+The [WDC Discord](https://discord.gg/N2uEyp7Rfu) is where we are discussing this project. We recommend you join if you want to participate.
diff --git a/README.md b/README.md
@@ -19,12 +19,13 @@ Before you can run the project, you'll need to setup a
 
 This starter project works with [convex](https://www.convex.dev) so to run you need to use the [.env.example](.env.example) file to create your own .env file.
 
-In convex, please add the following environment variables:
+If you want to mock all models - in convex, please add the following environment variables:
 
-- `npx convex env set MOCK_OPEN_AI true`
+- `npx convex env set MOCK_MODELS true`
 
 Add optional environment variable/s for simulating real AI models without mockup responses(when mockup flags are set to FALSE):
 
+- `npx convex env set GEMINI_API_KEY YOUR_API_KEY`
 - `npx convex env set OPENAI_API_KEY YOUR_API_KEY`
 
 also, you may need to run, but I think the initial setup does that.

diff --git a/app/globals.css b/app/globals.css
@@ -4,6 +4,7 @@
 
 /* To change the theme colors, change the values below
   or use the "Copy code" button at https://ui.shadcn.com/themes */
+
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -32,27 +33,54 @@
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
   }
-
+  .light {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 222.2 84% 4.9%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
   .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-    --primary: 60 9.1% 97.8%;
-    --primary-foreground: 24 9.8% 10%;
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --ring: 24 5.7% 82.9%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
@@ -68,4 +96,7 @@
   body {
     @apply bg-gradient-to-b from-slate-950 to-slate-900 text-foreground;
   }
+  .light body {
+    @apply bg-gradient-to-b from-blue-300 to-blue-100;
+  }
 }
diff --git a/app/header.tsx b/app/header.tsx
@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import { useAuthActions } from "@convex-dev/auth/react";
 import { GitHubLogoIcon } from "@radix-ui/react-icons";
 import { useConvexAuth } from "convex/react";
+import { ThemeToggle } from "@/components/ThemeToggle";
 
 function SignInWithGitHub() {
   const { signIn } = useAuthActions();
@@ -25,14 +26,14 @@ export default function Header() {
   const { isAuthenticated } = useConvexAuth();
 
   return (
-    <header className="flex justify-between items-center py-4 px-6 shadow-sm border-b bg-slate-950">
+    <header className="flex justify-between items-center py-4 px-6 shadow-sm border-b">
       <Link href="/" className="flex items-center">
         <Image src="/logo.png" alt="Logo" width={32} height={32} />
         <span className="ml-2 text-xl font-bold">SurviveTheNight</span>
       </Link>
 
       <div className="flex items-center">
-        <span className="mr-2 text-sm text-gray-200">Synced using Convex</span>
+        <span className="mr-2 text-sm">Synced using Convex</span>
         <Link
           href="https://www.convex.dev"
           target="_blank"
@@ -42,11 +43,16 @@ export default function Header() {
         </Link>
       </div>
 
-      {!isAuthenticated ? (
-        <SignInWithGitHub />
-      ) : (
-        <Button onClick={() => void signOut()}>Sign Out</Button>
-      )}
+      <div className="flex">
+        <div className="flex hover:bg-slate-500 mr-3 rounded-md px-1">
+          <ThemeToggle/>
+        </div>
+        {!isAuthenticated ? (
+          <SignInWithGitHub />
+        ) : (
+          <Button onClick={() => void signOut()}>Sign Out</Button>
+        )}
+      </div>
     </header>
   );
 }
diff --git a/components/ThemeToggle.tsx b/components/ThemeToggle.tsx
@@ -7,13 +7,16 @@ import { useTheme } from "next-themes";
 export function ThemeToggle() {
   const { theme, setTheme } = useTheme();
   return (
-    <ToggleGroup type="single" size="sm" onValueChange={setTheme} value={theme}>
-      <ToggleGroupItem value="light" aria-label="Light">
-        <SunIcon />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="dark" aria-label="Dark">
-        <MoonIcon />
-      </ToggleGroupItem>
+    <ToggleGroup type="single" size="sm" onValueChange={setTheme} value={theme} className="">
+      {theme == "light" ? (
+        <ToggleGroupItem value="dark" aria-label="Dark">
+          <MoonIcon />
+        </ToggleGroupItem>
+      ) : (
+        <ToggleGroupItem value="light" aria-label="Light">
+          <SunIcon />
+        </ToggleGroupItem>
+      )}
       <ToggleGroupItem value="system" aria-label="System">
         <DesktopIcon />
       </ToggleGroupItem>

diff --git a/convex/constants.ts b/convex/constants.ts
@@ -1,4 +1,8 @@
 export const AI_MODELS = [
+  {
+    model: "gemini-1.5-pro",
+    name: "Gemini - 1.5 Pro",
+  },
   {
     model: "gpt-4o",
     name: "OpenAI - 4o Mini",

diff --git a/convex/games.ts b/convex/games.ts
@@ -25,7 +25,7 @@ export const startNewGame = mutation({
       throw new Error("No map found for level 1");
     }
 
-    await ctx.scheduler.runAfter(0, internal.openai.playMapAction, {
+    await ctx.scheduler.runAfter(0, internal.maps.playMapAction, {
       gameId,
       modelId: args.modelId,
       level: 1,

diff --git a/convex/maps.ts b/convex/maps.ts
@@ -1,5 +1,12 @@
+import OpenAI from "openai";
+import { internalAction, internalMutation, query } from "./_generated/server";
 import { v } from "convex/values";
-import { internalMutation, query } from "./_generated/server";
+import { z } from "zod";
+import { zodResponseFormat } from "openai/helpers/zod";
+import { Doc } from "./_generated/dataModel";
+import { ZombieSurvival } from "../simulators/zombie-survival";
+import { api, internal } from "./_generated/api";
+import { runModel } from "../models";
 
 const MAPS = [
   {
@@ -98,3 +105,77 @@ export const getMapByLevel = query({
       .first();
   },
 });
+
+export const playMapAction = internalAction({
+  args: {
+    level: v.number(),
+    gameId: v.id("games"),
+    modelId: v.string(),
+  },
+  handler: async (ctx, args) => {
+    const resultId = await ctx.runMutation(
+      internal.results.createInitialResult,
+      {
+        gameId: args.gameId,
+        level: args.level,
+      },
+    );
+
+    const map: Doc<"maps"> | null = (await ctx.runQuery(
+      api.maps.getMapByLevel,
+      {
+        level: args.level,
+      },
+    )) as any;
+
+    if (!map) {
+      throw new Error("Map not found");
+    }
+
+    if (process.env.MOCK_MODELS === "true") {
+      const existingMap = [...map.grid.map((row) => [...row])];
+
+      existingMap[0][0] = "P";
+      existingMap[0][1] = "B";
+      existingMap[0][2] = "B";
+
+      const game = new ZombieSurvival(existingMap);
+
+      while (!game.finished()) {
+        game.step();
+      }
+
+      const isWin = !game.getPlayer().dead();
+
+      await ctx.runMutation(internal.results.updateResult, {
+        resultId,
+        isWin,
+        reasoning: "This is a mock response",
+        map: existingMap,
+      });
+
+      return;
+    }
+
+    try {
+      const { solution, reasoning } = await runModel(args.modelId, map.grid);
+      const game = new ZombieSurvival(solution);
+
+      while (!game.finished()) {
+        game.step();
+      }
+
+      const isWin = !game.getPlayer().dead();
+
+      await ctx.runMutation(internal.results.updateResult, {
+        resultId,
+        isWin,
+        reasoning,
+        map: solution,
+      });
+    } catch (error) {
+      // todo: handle error
+      console.log(error);
+    }
+  },
+});