improve design of site

webdevcody · Oct 15, 2024 · 1e843eb · 1e843eb
1 parent b9c3c9c
commit 1e843eb
Show file tree

Hide file tree

Showing 15 changed files with 343 additions and 212 deletions.
diff --git a/app/constants.ts b/app/constants.ts
@@ -0,0 +1,6 @@
+export const AI_MODELS = [
+  {
+    model: "gpt-4o",
+    name: "OpenAI - 4o Mini",
+  },
+];
diff --git a/app/globals.css b/app/globals.css
@@ -66,6 +66,6 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-gradient-to-b from-slate-950 to-slate-900 text-foreground;
   }
 }
diff --git a/app/header.tsx b/app/header.tsx
@@ -25,12 +25,23 @@ export default function Header() {
   const { isAuthenticated } = useConvexAuth();
 
   return (
-    <header className="flex justify-between items-center py-4 px-6 shadow-sm border-b">
+    <header className="flex justify-between items-center py-4 px-6 shadow-sm border-b bg-slate-950">
       <Link href="/" className="flex items-center">
-        <Image src="/convex.svg" alt="Logo" width={32} height={32} />
+        <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>
+        <Link
+          href="https://www.convex.dev"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image src="/convex.svg" alt="Convex" width={24} height={24} />
+        </Link>
+      </div>
+
       {!isAuthenticated ? (
         <SignInWithGitHub />
       ) : (

diff --git a/app/map.tsx b/app/map.tsx
@@ -1,3 +1,5 @@
+export const CELL_SIZE = 32;
+
 export function Map({ map }: { map: string[][] }) {
   return (
     <div>
@@ -6,7 +8,7 @@ export function Map({ map }: { map: string[][] }) {
           {row.map((cell, x) => (
             <div
               key={x}
-              className="size-16 border flex items-center justify-center text-2xl"
+              className={`size-8 border flex items-center justify-center text-2xl bg-slate-950`}
             >
               {cell}
             </div>

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,23 +1,117 @@
-import MapTester from "@/components/MapTester";
-import { Map } from "./map";
+"use client";
+
+import { CELL_SIZE, Map } from "./map";
+import { api } from "@/convex/_generated/api";
+import { useAction } from "convex/react";
+import React, { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { AI_MODELS } from "@/app/constants";
+import { Loader2 } from "lucide-react";
 
 const hardCodedMapTemp = [
   [" ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
-  [" ", " ", " ", "P", "B", " ", " ", " ", " ", " "],
-  [" ", " ", " ", " ", "B", " ", " ", " ", " ", " "],
-  ["R", "R", "R", "R", " ", " ", " ", " ", " ", " "],
-  [" ", " ", " ", " ", " ", " ", " ", " ", "Z", " "],
   [" ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
+  [" ", " ", " ", " ", " ", " ", " ", "R", " ", " "],
+  ["R", "R", "R", "R", " ", " ", " ", "R", " ", " "],
+  [" ", " ", " ", " ", " ", " ", " ", "R", "Z", " "],
+  [" ", " ", " ", " ", " ", " ", " ", "R", " ", " "],
   [" ", "Z", " ", " ", " ", " ", " ", " ", " ", " "],
   [" ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
   [" ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
 ];
 
 export default function MainPage() {
+  const getPlayerMap = useAction(api.openai.playMapAction);
+  const [resMap, setResMap] = useState<null | string[][]>(null);
+  const [loading, setLoading] = useState(false);
+  const [model, setModel] = useState(AI_MODELS[0].model);
+
+  const handleClick = async () => {
+    setLoading(true);
+    try {
+      const res = await getPlayerMap({
+        level: 1,
+        mapId: "zombiemap",
+        map: hardCodedMapTemp,
+      });
+
+      console.log(res);
+      setResMap(res?.map || []);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const mapWidth = hardCodedMapTemp[0].length * CELL_SIZE;
+  const mapHeight = hardCodedMapTemp.length * CELL_SIZE;
+  console.log(mapWidth, mapHeight);
+
   return (
-    <div className="min-h-screen flex flex-col items-center justify-center">
-      <Map map={hardCodedMapTemp} />
-      <MapTester map={hardCodedMapTemp} />
+    <div className="container mx-auto min-h-screen flex flex-col items-center pt-12 gap-8">
+      <h1 className="text-4xl font-bold mb-8">Zombie Map Simulator</h1>
+
+      <div className="flex gap-8 items-start w-full">
+        <div className="flex flex-col items-center flex-grow">
+          <h2 className="text-2xl font-semibold mb-4">Initial Map</h2>
+          <Map map={hardCodedMapTemp} />
+        </div>
+
+        <div className="flex flex-col items-center justify-between h-full pt-12">
+          <div className="flex flex-col items-center gap-4">
+            <Select value={model} onValueChange={(value) => setModel(value)}>
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder="Select model" />
+              </SelectTrigger>
+              <SelectContent>
+                {AI_MODELS.map((model) => (
+                  <SelectItem key={model.model} value={model.model}>
+                    {model.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Button onClick={handleClick} disabled={loading}>
+              Run Simulation
+            </Button>
+          </div>
+        </div>
+
+        <div className="flex flex-col items-center justify-center flex-grow">
+          <h2 className="text-2xl font-semibold mb-4">AI Result</h2>
+          {loading ? (
+            <div
+              style={{
+                width: `${mapWidth}px`,
+                height: `${mapHeight}px`,
+              }}
+              className={`flex items-center justify-center`}
+            >
+              <Loader2 className="h-8 w-8 animate-spin" />
+            </div>
+          ) : resMap ? (
+            <Map map={resMap} />
+          ) : (
+            <div
+              style={{
+                width: `${mapWidth}px`,
+                height: `${mapHeight}px`,
+              }}
+              className={`border-2 border-dashed border-gray-300 flex items-center justify-center text-gray-400`}
+            >
+              Run simulation to see results
+            </div>
+          )}
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/components/Code.tsx b/components/Code.tsx
diff --git a/components/MapTester.tsx b/components/MapTester.tsx
@@ -4,61 +4,29 @@ import { Map } from "@/app/map";
 import { api } from "@/convex/_generated/api";
 import { useAction } from "convex/react";
 import React, { useState } from "react";
-
-function convertStringMapToNumberGrid(map: string[][]): number[][] {
-  return map.map((row) =>
-    row.map((cell) => {
-      switch (cell) {
-        case "P":
-          return 3; // Player
-        case "Z":
-          return 1; // Zombie
-        case "R":
-          return 2; // Rocks
-        case "B":
-          return 4; // Block
-        case " ":
-          return 0; // Empty Space
-        default:
-          return 0; // Default to empty space
-      }
-    }),
-  );
-}
-
-function convertNumberGridToStringMap(grid: number[][]): string[][] {
-  return grid.map((row) =>
-    row.map((cell) => {
-      switch (cell) {
-        case 3:
-          return "P"; // Player
-        case 1:
-          return "Z"; // Zombie
-        case 2:
-          return "R"; // Rocks
-        case 4:
-          return "B"; // Block
-        case 0:
-          return " "; // Empty Space
-        default:
-          return " "; // Default to empty space
-      }
-    }),
-  );
-}
+import { Button } from "./ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
+import { AI_MODELS } from "@/app/constants";
 
 const MapTester = ({ map }: { map: string[][] }) => {
   const getPlayerMap = useAction(api.openai.playMapAction);
-  const [resMap, setResMap] = useState<null | number[][]>();
+  const [resMap, setResMap] = useState<null | string[][]>();
   const [loading, setLoading] = useState(false);
+  const [model, setModel] = useState(AI_MODELS[0].model);
 
   const handleClick = async () => {
     setLoading(true);
     try {
       const res = await getPlayerMap({
         level: 1,
         mapId: "zombiemap",
-        map: convertStringMapToNumberGrid(map),
+        map,
       });
 
       // type safe resulting object
@@ -72,13 +40,29 @@ const MapTester = ({ map }: { map: string[][] }) => {
   };
 
   return (
-    <div>
-      <button onClick={handleClick} disabled={loading}>
-        Test Output
-      </button>
-      {loading && <p>Loading result map...</p>}
-      {resMap && <Map map={convertNumberGridToStringMap(resMap)} />}
-    </div>
+    <>
+      <div className="flex gap-4">
+        <Select value={model} onValueChange={(value) => setModel(value)}>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Select model" />
+          </SelectTrigger>
+          <SelectContent>
+            {AI_MODELS.map((model) => (
+              <SelectItem key={model.model} value={model.model}>
+                {model.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Button onClick={handleClick} disabled={loading}>
+          Run Simulation
+        </Button>
+      </div>
+      <div className="flex flex-col gap-4">
+        {loading && <p>Loading result map...</p>}
+        {resMap && <Map map={resMap} />}
+      </div>
+    </>
   );
 };