Merge branch 'main' into main

webdevcody · Oct 18, 2024 · 932cffb · 932cffb
2 parents 88fb9df + f6a0495
commit 932cffb
Show file tree

Hide file tree

Showing 11 changed files with 198 additions and 96 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -37,10 +37,10 @@ export default function GamePage() {
   }
 
   return (
-    <div className="min-h-screen container mx-auto pt-12 pb-24 flex gap-12">
+    <div className="container mx-auto pt-12 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">
+        <div className="h-[calc(100vh_-_185px)] overflow-y-auto flex flex-col gap-4">
           {results.map((result) => (
             <Result key={result._id} result={result} />
           ))}

diff --git a/app/play/[level]/page.tsx b/app/play/[level]/page.tsx
@@ -10,6 +10,7 @@ import Link from "next/link";
 import { ChevronLeftIcon } from "@radix-ui/react-icons";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import TestMode from "./test-mode";
+import { useRouter } from "next/navigation";
 
 export default function PlayLevelPage({
   params,
@@ -42,6 +43,9 @@ export default function PlayLevelPage({
     mapId: map?._id,
   });
 
+  const lastLevel = useQuery(api.maps.lastLevel);
+  const router = useRouter();
+
   if (!map) {
     return (
       <div className="container mx-auto min-h-screen flex flex-col items-center py-12 pb-24 gap-8">
@@ -242,9 +246,27 @@ export default function PlayLevelPage({
                 </Button>
               </>
             ) : (
-              <Button onClick={handleRetryClicked} className="h-10">
-                Retry
-              </Button>
+              <div className="flex items-center gap-x-3">
+                <Button onClick={handleRetryClicked} className="h-10">
+                  Retry
+                </Button>
+                {gameResult && gameResult === "WON" ? (
+                  <Button
+                    onClick={() => {
+                      if (lastLevel && level + 1 <= lastLevel) {
+                        router.push(`/play/${level + 1}`);
+                      } else {
+                        router.push("/play");
+                      }
+                    }}
+                    className="h-10"
+                  >
+                    {lastLevel && level + 1 <= lastLevel
+                      ? "Next Night"
+                      : "Back to Night Selection"}
+                  </Button>
+                ) : null}
+              </div>
             )}
           </div>
 

diff --git a/app/playground/page.tsx b/app/playground/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { CircleAlertIcon } from "lucide-react";
+import { CircleAlertIcon, EraserIcon } from "lucide-react";
 import { useAction, useMutation, useQuery } from "convex/react";
 import { Button } from "@/components/ui/button";
 import { CopyMapButton } from "@/components/CopyMapButton";
@@ -14,12 +14,14 @@ import { api } from "@/convex/_generated/api";
 import { errorMessage } from "@/lib/utils";
 import { useToast } from "@/components/ui/use-toast";
 
+const STORAGE_MAP_KEY = "playground-map";
+
 export default function PlaygroundPage() {
   const isAdmin = useQuery(api.users.isAdmin);
   const publishMap = useMutation(api.maps.publishMap);
   const testMap = useAction(api.maps.testMap);
   const { toast } = useToast();
-  const [map, setMap] = React.useState<string[][]>([]);
+  const [map, setMap] = React.useState<string[][]>([[" "]]);
   const [model, setModel] = React.useState("");
   const [error, setError] = React.useState<string | null>(null);
   const [solution, setSolution] = React.useState<string[][] | null>(null);
@@ -89,6 +91,7 @@ export default function PlaygroundPage() {
   function handleChangeMap(value: string[][]) {
     setMap(value);
     setError(null);
+    window.localStorage.setItem(STORAGE_MAP_KEY, JSON.stringify(value));
   }
 
   function handleChangeModel(value: string) {
@@ -103,6 +106,18 @@ export default function PlaygroundPage() {
     setVisualizingUserSolution(false);
   }
 
+  function handleReset() {
+    handleChangeMap([]);
+
+    setSolution(null);
+    setReasoning(null);
+    setPublishing(false);
+    setSimulating(false);
+    setUserPlaying(false);
+    setUserSolution([]);
+    setVisualizingUserSolution(false);
+  }
+
   function handleUserPlay() {
     if (!ZombieSurvival.mapHasZombies(map)) {
       alert("Add player to the map first");
@@ -131,6 +146,14 @@ export default function PlaygroundPage() {
     setVisualizingUserSolution(false);
   }
 
+  React.useEffect(() => {
+    const maybeMap = window.localStorage.getItem(STORAGE_MAP_KEY);
+
+    if (maybeMap !== null) {
+      setMap(JSON.parse(maybeMap));
+    }
+  }, []);
+
   const visualizing = solution !== null || visualizingUserSolution;
 
   return (
@@ -143,9 +166,16 @@ export default function PlaygroundPage() {
             <div className="flex flex-col gap-0">
               <div className="flex gap-2">
                 <p>
-                  Map ({map.length}x{map[0]?.length ?? 0})
+                  Map ({ZombieSurvival.boardWidth(map)}x
+                  {ZombieSurvival.boardHeight(map)})
                 </p>
                 <CopyMapButton map={map} />
+                <button
+                  className="hover:scale-125 transition"
+                  onClick={handleReset}
+                >
+                  <EraserIcon size={16} />
+                </button>
               </div>
               <p className="text-xs">* Click on a cell to place entity</p>
             </div>
@@ -199,18 +229,18 @@ export default function PlaygroundPage() {
                     {simulating ? "Simulating..." : "Play With AI"}
                   </Button>
                 )}
-                {(solution !== null || userPlaying) && (
-                  <Button
-                    className="w-full"
-                    disabled={model === "" || simulating}
-                    onClick={handleEdit}
-                    type="button"
-                  >
-                    {simulating ? "Simulating..." : "Edit"}
-                  </Button>
-                )}
               </>
             )}
+            {(solution !== null || userPlaying) && (
+              <Button
+                className="w-full"
+                disabled={model === "" || simulating}
+                onClick={handleEdit}
+                type="button"
+              >
+                {simulating ? "Simulating..." : "Edit"}
+              </Button>
+            )}
             {solution === null && !simulating && !userPlaying && (
               <Button className="w-full" onClick={handleUserPlay} type="button">
                 Play Yourself

diff --git a/components/MapBuilder.tsx b/components/MapBuilder.tsx
@@ -42,7 +42,7 @@ export function MapBuilder({
       newValue = initialValue === " " ? "Z" : initialValue === "Z" ? "R" : " ";
     }
 
-    const newMap = [...map.map((row) => [...row])];
+    const newMap = ZombieSurvival.cloneMap(map);
     newMap[row][cell] = newValue;
     onChange(newMap);
   }
@@ -83,7 +83,7 @@ export function MapBuilder({
   const moreThanOneCell = map[0].length > 1;
 
   const buttonClassName = cn(
-    "border border-white w-[64px] h-[64px] disabled:opacity-50",
+    "border border-white w-[64px] h-[64px] disabled:opacity-50 select-none",
   );
 
   const controlClassName = cn(

diff --git a/components/ThemeToggle.tsx b/components/ThemeToggle.tsx
@@ -17,8 +17,6 @@ export function ThemeToggle() {
         // This check is needed because if the user clicks on a button twice the button gets unselected and the newTheme is undefined
         if (newTheme) {
           setTheme(newTheme);
-        } else {
-          console.log("No theme selected, keeping current theme:", theme);
         }
       }}
       className="flex px-1 py-1 rounded-md bg-blue-200 dark:bg-slate-700"