refactor everything

webdevcody · Oct 16, 2024 · 0d522c7 · 0d522c7
1 parent 93011a4
commit 0d522c7
Show file tree

Hide file tree

Showing 13 changed files with 201 additions and 78 deletions.
diff --git a/app/leaderboard/page.tsx b/app/leaderboard/page.tsx
@@ -65,8 +65,8 @@ const LeaderBoard = () => {
   );
 
   return (
-    <div className="py-12">
-      <div className="text-center text-3xl font-semibold mb-6">Leaderboard</div>
+    <div className="container mx-auto min-h-screen py-12 pb-24 gap-8">
+      <h1 className="text-center text-3xl font-semibold mb-6">Leaderboard</h1>
 
       <Tabs defaultValue="global" className="">
         <TabsList>

diff --git a/app/map.tsx b/app/map.tsx
@@ -8,7 +8,7 @@ export function Map({ map }: { map: string[][] }) {
           {row.map((cell, x) => (
             <div
               key={x}
-              className={`size-8 border flex items-center justify-center text-2xl bg-slate-950`}
+              className={`size-16 border flex items-center justify-center text-2xl dark:bg-black bg-slate-50`}
             >
               {cell}
             </div>

diff --git a/app/play/[level]/page.tsx b/app/play/[level]/page.tsx
@@ -92,15 +92,14 @@ export default function PlayLevelPage({
   const mapHeight = playerMap.length > 0 ? playerMap.length : map.grid.length;
 
   return (
-    <div className="container mx-auto py-8">
+    <div className="container mx-auto min-h-screen flex flex-col items-center py-12 pb-24 gap-8">
+      <Button variant="outline" asChild className="flex gap-2 items-center">
+        <Link href="/play" passHref>
+          <ChevronLeftIcon /> Play Different Night
+        </Link>
+      </Button>
       <div className="flex justify-between items-center mb-6">
-        <Button variant="outline" asChild className="flex gap-2 items-center">
-          <Link href="/play" passHref>
-            <ChevronLeftIcon /> Back to Levels
-          </Link>
-        </Button>
-        <h1 className="text-3xl font-bold text-center">Level {level}</h1>
-        <div className="w-[100px]"></div> {/* Spacer for alignment */}
+        <h1 className="text-3xl font-bold text-center">Night #{level}</h1>
       </div>
       <div className="mb-4 flex justify-center gap-4">
         <Button

diff --git a/app/play/page.tsx b/app/play/page.tsx
@@ -5,6 +5,13 @@ import { api } from "@/convex/_generated/api";
 import { Map } from "@/app/map";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 
 export default function PlayPage() {
   const maps = useQuery(api.maps.getMaps);
@@ -14,22 +21,26 @@ export default function PlayPage() {
   }
 
   return (
-    <div className="container mx-auto py-8">
-      <h1 className="text-3xl font-bold mb-6 text-center">Choose a Level</h1>
+    <div className="container mx-auto min-h-screen py-12 pb-24 gap-8">
+      <h1 className="text-3xl font-bold mb-6 text-center">Choose a Night</h1>
+
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
         {maps.map((map) => (
-          <div
-            key={map._id}
-            className="border rounded-lg p-4 flex flex-col items-center justify-between h-full"
-          >
-            <div className="text-center">
-              <h2 className="text-xl font-semibold mb-4">Level {map.level}</h2>
+          <Card key={map._id} className="flex flex-col h-full">
+            <CardHeader>
+              <CardTitle className="text-xl font-semibold text-center">
+                Night #{map.level}
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="flex-grow flex items-center justify-center">
               <Map map={map.grid} />
-            </div>
-            <Link href={`/play/${map.level}`} passHref className="mt-auto pt-4">
-              <Button>Play</Button>
-            </Link>
-          </div>
+            </CardContent>
+            <CardFooter className="flex justify-center">
+              <Link href={`/play/${map.level}`} passHref>
+                <Button>Play</Button>
+              </Link>
+            </CardFooter>
+          </Card>
         ))}
       </div>
     </div>

diff --git a/app/result-status.tsx b/app/result-status.tsx
@@ -5,7 +5,7 @@ export function ResultStatus({ result }: { result: Doc<"results"> }) {
     <div
       className={`font-bold ${result.isWin ? "text-green-500" : "text-red-500"}`}
     >
-      {result.isWin ? "Won" : "Lost"}
+      {result.isWin ? "WON" : "LOST"}
     </div>
   );
 }
diff --git a/app/visualizer.tsx b/app/visualizer.tsx
@@ -9,12 +9,14 @@ export function Visualizer({
   autoReplay = false,
   autoStart = false,
   controls = true,
+  cellSize = "64",
   map,
   onSimulationEnd,
 }: {
   autoReplay?: boolean;
   autoStart?: boolean;
   controls?: boolean;
+  cellSize?: string;
   map: string[][];
   onSimulationEnd?: (isWin: boolean) => void;
 }) {
@@ -84,7 +86,12 @@ export function Visualizer({
           {row.map((cell, x) => (
             <div
               key={x}
-              className={`size-8 border flex items-center justify-center text-2xl bg-slate-950`}
+              style={{
+                width: `${cellSize}px`,
+                height: `${cellSize}px`,
+                fontSize: `${parseInt(cellSize) / 2}px`,
+              }}
+              className={`border flex items-center justify-center dark:bg-black bg-slate-50`}
             >
               {cell}
             </div>

diff --git a/app/watch/page.tsx b/app/watch/page.tsx
@@ -3,21 +3,83 @@
 import { useQuery } from "convex/react";
 import Result from "./result";
 import { api } from "@/convex/_generated/api";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from "@/components/ui/table";
+import { TableHeader } from "@/components/ui/table";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
 
 export default function GamePage() {
   const results = useQuery(api.results.getLastCompletedResults);
+  const globalRanking = useQuery(api.leaderboard.getGlobalRankings);
 
   if (results === undefined) {
-    return <p>Loading...</p>;
+    return (
+      <div className="min-h-screen container mx-auto pt-12 pb-24 space-y-8">
+        <h1 className="text-2xl font-bold">Recent Games</h1>
+        <p>Loading...</p>
+      </div>
+    );
+  }
+
+  if (results.length === 0) {
+    return (
+      <div className="min-h-screen container mx-auto pt-12 pb-24 space-y-8">
+        <h1 className="text-2xl font-bold">Recent Games</h1>
+        <p>No results yet</p>
+      </div>
+    );
   }
 
   return (
-    <div className="container mx-auto pt-12 pb-24 space-y-8">
-      <h1 className="text-2xl font-bold">Recent Games</h1>
-      <div className="flex flex-wrap justify-betweengap-x-2 gap-12">
-        {results.map((result) => (
-          <Result key={result._id} result={result} />
-        ))}
+    <div className="min-h-screen container mx-auto pt-12 pb-24 flex gap-12">
+      <div className="space-y-8 flex-grow">
+        <h1 className="text-2xl font-bold">Recent Games</h1>
+        <div className="h-[80vh] overflow-y-auto flex flex-col gap-4">
+          {results.map((result) => (
+            <Result key={result._id} result={result} />
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-8">
+        <div className="flex justify-between items-center">
+          <h2 className="text-2xl font-bold">LLM Leaderboard</h2>
+          <Button asChild>
+            <Link href="/leaderboard">View Full Leaderboard</Link>
+          </Button>
+        </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>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
       </div>
     </div>
   );

diff --git a/app/watch/result.tsx b/app/watch/result.tsx
@@ -4,21 +4,54 @@ import { ResultStatus } from "../result-status";
 import { type ResultWithGame } from "@/convex/results";
 import { Visualizer } from "../visualizer";
 import { format } from "date-fns";
+import Link from "next/link";
+import { Card } from "@/components/ui/card";
 
 export default function Result({ result }: { result: ResultWithGame }) {
   return (
-    <div className="flex gap-8 border rounded-xl p-4 bg-black">
+    <Card className="flex border rounded-xl p-4 gap-8">
+      {result.status === "completed" && (
+        <Visualizer
+          cellSize="32"
+          autoReplay
+          autoStart
+          controls={false}
+          map={result.map}
+        />
+      )}
+      {result.status === "failed" && (
+        <div className="text-red-500 max-w-[200px]">
+          Game failed: {result.error}
+        </div>
+      )}
+      {result.status === "inProgress" && (
+        <div className="flex items-center">
+          <p className="mr-2">Game is playing...</p>
+          <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-gray-300"></div>
+        </div>
+      )}
+
       {result.game !== null && (
         <div className="flex flex-col gap-2">
-          <div className="flex gap-2">
-            <ResultStatus result={result} />
-            <p>at {format(new Date(result._creationTime), "h:mma")}</p>
+          <div className="flex flex-col gap-2 h-full justify-center">
+            <Link
+              href={`/play/${result.level}`}
+              className="whitespace-nowrap hover:underline cursor-pointer text-xl"
+            >
+              Night #{result.level}
+            </Link>{" "}
+            <div className="flex gap-2">
+              The <span className="font-bold">{result.game.modelId}</span> model
+              {result.status === "inProgress" ? (
+                "Started"
+              ) : (
+                <ResultStatus result={result} />
+              )}{" "}
+              at {format(new Date(result._creationTime), "h:mma")}
+            </div>
           </div>
-          <p>Level {result.level}</p>
-          <p>{result.game.modelId}</p>
         </div>
       )}
-      <Visualizer autoReplay autoStart controls={false} map={result.map} />
-    </div>
+    </Card>
   );
 }
diff --git a/convex/constants.ts b/convex/constants.ts
@@ -10,3 +10,9 @@ export const AI_MODELS = [
 ];
 
 export const AI_MODEL_IDS = AI_MODELS.map((model) => model.model);
+
+// how long between each level when the AI models start playing.
+// spacing out the levels to make it easier to watch in the games list and reduce ai token usage.
+export const PLAY_DELAY = process.env.PLAY_DELAY
+  ? parseInt(process.env.PLAY_DELAY)
+  : 10_000;
diff --git a/convex/games.ts b/convex/games.ts
@@ -1,6 +1,6 @@
 import { v } from "convex/values";
-import { internalMutation, mutation, query } from "./_generated/server";
-import { api, internal } from "./_generated/api";
+import { mutation, query } from "./_generated/server";
+import { internal } from "./_generated/api";
 import { AI_MODEL_IDS } from "./constants";
 
 export const startNewGame = mutation({

diff --git a/convex/maps.ts b/convex/maps.ts
@@ -184,16 +184,22 @@ export const playMapAction = internalAction({
             ? error
             : "Unexpected error happened";
 
-      await ctx.runMutation(internal.results.failResult, {
+      // await ctx.runMutation(internal.results.failResult, {
+      //   resultId,
+      //   error: errorMessage,
+      // });
+      await ctx.runMutation(internal.results.updateResult, {
         resultId,
+        isWin: false,
+        reasoning: errorMessage,
         error: errorMessage,
       });
 
-      await ctx.runMutation(internal.leaderboard.updateRankings, {
-        modelId: args.modelId,
-        level: args.level,
-        isWin: false,
-      });
+      // await ctx.runMutation(internal.leaderboard.updateRankings, {
+      //   modelId: args.modelId,
+      //   level: args.level,
+      //   isWin: false,
+      // });
     }
   },
 });
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,7 @@ export function Map({ map }: { map: string[][] }) { @@
               {row.map((cell, x) => (
                 <div
                   key={x}
-                  className={`size-8 border flex items-center justify-center text-2xl bg-slate-950`}
+                  className={`size-16 border flex items-center justify-center text-2xl dark:bg-black bg-slate-50`}
                 >
                   {cell}
                 </div>
@@ Expand Down @@