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

webdevcody · Oct 18, 2024 · 22cd75c · 22cd75c
2 parents 18ea640 + 0ed5ae8
commit 22cd75c
Show file tree

Hide file tree

Showing 16 changed files with 473 additions and 182 deletions.
diff --git a/app/games/[gameId]/result.tsx b/app/games/[gameId]/result.tsx
@@ -3,7 +3,7 @@
 import { Doc } from "@/convex/_generated/dataModel";
 import { api } from "@/convex/_generated/api";
 import { useQuery } from "convex/react";
-import { ResultStatus } from "@/components/ResultStatus";
+import { MapStatus } from "@/components/MapStatus";
 import { Visualizer } from "@/components/Visualizer";
 import Link from "next/link";
 
@@ -38,7 +38,7 @@ export const Result = ({ result }: { result: Doc<"results"> }) => {
       )}
 
       <div className="flex flex-col">
-        <ResultStatus result={result} />
+        <MapStatus map={result.map} />
         {result.reasoning !== "" && <p>{result.reasoning}</p>}
       </div>
     </div>

diff --git a/app/header.tsx b/app/header.tsx
@@ -45,6 +45,9 @@ export default function Header() {
         <Link href="/leaderboard">
           <Button variant="ghost">Leaderboard</Button>
         </Link>
+        <Link href="/playground">
+          <Button variant="ghost">Playground</Button>
+        </Link>
         {isAuthenticated && (
           <Link href="/maps">
             <Button variant="ghost">Submit Map</Button>
@@ -56,14 +59,9 @@ export default function Header() {
           </Link>
         )}
         {flags?.showTestPage && (
-          <>
-            <Link href="/playground">
-              <Button variant="ghost">Playground</Button>
-            </Link>
-            <Link href="/test">
-              <Button variant="ghost">Test</Button>
-            </Link>
-          </>
+          <Link href="/test">
+            <Button variant="ghost">Test</Button>
+          </Link>
         )}
       </nav>
 

diff --git a/app/play/[level]/test-mode.tsx b/app/play/[level]/test-mode.tsx
@@ -13,6 +13,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { AI_MODELS } from "@/convex/constants";
+import { errorMessage } from "@/lib/utils";
 
 interface TestModeProps {
   level: number;
@@ -51,9 +52,7 @@ export default function TestMode({ level, map }: TestModeProps) {
       setAiReasoning(result.reasoning);
     } catch (error) {
       console.error("Error testing AI model:", error);
-      setAiError(
-        error instanceof Error ? error.message : "An unexpected error occurred",
-      );
+      setAiError(errorMessage(error));
     } finally {
       setIsSimulating(false);
     }

diff --git a/app/play/page.tsx b/app/play/page.tsx
@@ -14,6 +14,9 @@ import {
 } from "@/components/ui/card";
 import { useEffect, useState } from "react";
 import { Skeleton } from "@/components/ui/skeleton";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { cn } from "@/lib/utils";
+import { StarFilledIcon } from "@radix-ui/react-icons";
 
 export default function PlayPage() {
   const maps = useQuery(api.maps.getMaps, {});
@@ -22,6 +25,7 @@ export default function PlayPage() {
 
   const [resMap, setResMap] = useState(new Map());
   const [countMap, setCountMap] = useState(new Map());
+  const [filter, setFilter] = useState("all");
 
   useEffect(() => {
     if (userMapResults && mapCountResults) {
@@ -47,11 +51,32 @@ export default function PlayPage() {
     }
   }, [userMapResults, mapCountResults]);
 
-  if (!maps) {
+  const filteredMaps = maps?.filter((map) => {
+    if (filter === "all") return true;
+    if (filter === "beaten") return resMap.get(map._id);
+    if (filter === "unbeaten") return !resMap.get(map._id);
+    return true;
+  });
+
+  if (!filteredMaps) {
     return (
       <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>
 
+        <Authenticated>
+          <ToggleGroup
+            defaultValue="all"
+            type="single"
+            variant="outline"
+            className="w-max pb-4"
+            onValueChange={(value) => setFilter(value)}
+          >
+            <ToggleGroupItem value="all">All</ToggleGroupItem>
+            <ToggleGroupItem value="beaten">Beaten</ToggleGroupItem>
+            <ToggleGroupItem value="unbeaten">Unbeaten</ToggleGroupItem>
+          </ToggleGroup>
+        </Authenticated>
+
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
           {Array.from({ length: 6 }).map((_, index) => (
             <Skeleton key={index} className="h-96" />
@@ -65,9 +90,37 @@ export default function PlayPage() {
     <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>
 
+      <Authenticated>
+        <ToggleGroup
+          defaultValue="all"
+          type="single"
+          variant="outline"
+          className="w-max pb-4"
+          onValueChange={(value) => setFilter(value)}
+        >
+          <ToggleGroupItem value="all">All</ToggleGroupItem>
+          <ToggleGroupItem value="beaten">Beaten</ToggleGroupItem>
+          <ToggleGroupItem value="unbeaten">Unbeaten</ToggleGroupItem>
+        </ToggleGroup>
+      </Authenticated>
+
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-        {maps.map((map) => (
+        {filteredMaps.map((map) => (
           <Card key={map._id} className="flex flex-col h-full">
+          <Card
+            key={map._id}
+            className={cn(
+              "flex flex-col h-full relative",
+              resMap.get(map._id)
+                ? "bg-green-500"
+                : resMap.has(map._id)
+                  ? "bg-red-500"
+                  : "",
+            )}
+          >
+            {resMap.get(map._id) && (
+              <StarFilledIcon className="absolute top-3 right-3 w-9 h-9 -rotate-45 text-yellow-500" />
+            )}
             <CardHeader>
               <CardTitle className="text-xl font-semibold text-center">
                 Night #{map.level}
@@ -92,15 +145,15 @@ export default function PlayPage() {
                   )}
                   <div>
                     Won by {countMap.has(map._id) ? countMap.get(map._id) : 0}{" "}
-                    Players
+                    Player{countMap.get(map._id) !== 1 ? "s" : ""}
                   </div>
                 </div>
               </Authenticated>
 
               <Unauthenticated>
                 <div>
                   Won by {countMap.has(map._id) ? countMap.get(map._id) : 0}{" "}
-                  Players
+                  Player{countMap.get(map._id) !== 1 ? "s" : ""}
                 </div>
               </Unauthenticated>
             </CardFooter>