From 4135debe5be133f07d59397dd4ccffa19e4b9b2c Mon Sep 17 00:00:00 2001
From: Aaron Delasy <aaron@thelang.io>
Date: Fri, 18 Oct 2024 14:20:10 +0300
Subject: [PATCH 01/12] Replace ResultStatus with MapStatus

---
 app/games/[gameId]/result.tsx |  4 ++--
 app/result.tsx                |  4 ++--
 components/MapStatus.tsx      | 11 +++++++++++
 components/ResultStatus.tsx   | 11 -----------
 4 files changed, 15 insertions(+), 15 deletions(-)
 create mode 100644 components/MapStatus.tsx
 delete mode 100644 components/ResultStatus.tsx

diff --git a/app/games/[gameId]/result.tsx b/app/games/[gameId]/result.tsx
index 0dca204..9e70015 100644
--- 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/result.tsx b/app/result.tsx
index a1dab32..714f1f4 100644
--- a/app/result.tsx
+++ b/app/result.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ResultStatus } from "@/components/ResultStatus";
+import { MapStatus } from "@/components/MapStatus";
 import { type ResultWithGame } from "@/convex/results";
 import { Visualizer } from "@/components/Visualizer";
 import { format } from "date-fns";
@@ -51,7 +51,7 @@ export default function Result({ result }: { result: ResultWithGame }) {
               {result.status === "inProgress" ? (
                 "Started"
               ) : (
-                <ResultStatus result={result} />
+                <MapStatus map={result.map} />
               )}{" "}
               at {format(new Date(result._creationTime), "h:mma")}
             </div>
diff --git a/components/MapStatus.tsx b/components/MapStatus.tsx
new file mode 100644
index 0000000..2ca1391
--- /dev/null
+++ b/components/MapStatus.tsx
@@ -0,0 +1,11 @@
+import { ZombieSurvival } from "@/simulators/zombie-survival";
+
+export function MapStatus({ map }: { map: string[][] }) {
+  const isWin = ZombieSurvival.isWin(map);
+
+  return (
+    <div className={`font-bold ${isWin ? "text-green-500" : "text-red-500"}`}>
+      {isWin ? "WON" : "LOST"}
+    </div>
+  );
+}
diff --git a/components/ResultStatus.tsx b/components/ResultStatus.tsx
deleted file mode 100644
index 3053d85..0000000
--- a/components/ResultStatus.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Doc } from "@/convex/_generated/dataModel";
-
-export function ResultStatus({ result }: { result: Doc<"results"> }) {
-  return (
-    <div
-      className={`font-bold ${result.isWin ? "text-green-500" : "text-red-500"}`}
-    >
-      {result.isWin ? "WON" : "LOST"}
-    </div>
-  );
-}

From 8b9aa30240240be08d69578d63c5514678028bff Mon Sep 17 00:00:00 2001
From: Aaron Delasy <aaron@thelang.io>
Date: Fri, 18 Oct 2024 14:20:45 +0300
Subject: [PATCH 02/12] More static checks for ZombieSurvival

---
 simulators/zombie-survival/ZombieSurvival.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/simulators/zombie-survival/ZombieSurvival.ts b/simulators/zombie-survival/ZombieSurvival.ts
index df4a1d2..9a2ef9f 100644
--- a/simulators/zombie-survival/ZombieSurvival.ts
+++ b/simulators/zombie-survival/ZombieSurvival.ts
@@ -28,10 +28,20 @@ export class ZombieSurvival {
     return !game.getPlayer().dead();
   }
 
+  public static mapHasPlayer(map: string[][]): boolean {
+    return map.some((row) => row.includes("P"));
+  }
+
   public static mapHasZombies(map: string[][]): boolean {
     return map.some((row) => row.includes("Z"));
   }
 
+  public static mapMultiplePlayers(map: string[][]): boolean {
+    return (
+      map.map((row) => row.filter((cell) => cell === "P")).flat().length > 1
+    );
+  }
+
   public constructor(config: string[][]) {
     if (config.length === 0 || config[0].length === 0) {
       throw new Error("Config is empty");

From ee6e0976a66e608ddfa71872c62cb185b12f9416 Mon Sep 17 00:00:00 2001
From: Aaron Delasy <aaron@thelang.io>
Date: Fri, 18 Oct 2024 14:21:04 +0300
Subject: [PATCH 03/12] Use icons inside CopyMapButton

---
 components/CopyMapButton.tsx | 33 +++++++++++++++++++++++++++++----
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/components/CopyMapButton.tsx b/components/CopyMapButton.tsx
index b59ca1e..fc44c40 100644
--- a/components/CopyMapButton.tsx
+++ b/components/CopyMapButton.tsx
@@ -1,16 +1,41 @@
 "use client";
 
 import React from "react";
-import { Button } from "./ui/button";
+import { ClipboardCopyIcon, SmileIcon } from "lucide-react";
 
 export function CopyMapButton({ map }: { map: string[][] }) {
+  const timeout = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [copied, setCopied] = React.useState(false);
+
   async function handleClick() {
     await navigator.clipboard.writeText(JSON.stringify(map));
+    setCopied(true);
+
+    timeout.current = setTimeout(() => {
+      timeout.current = null;
+      setCopied(false);
+    }, 2000);
   }
 
+  React.useEffect(() => {
+    return () => {
+      if (timeout.current !== null) {
+        clearTimeout(timeout.current);
+      }
+    };
+  }, []);
+
   return (
-    <Button onClick={handleClick} type="button">
-      Copy As Code
-    </Button>
+    <button
+      className={
+        copied
+          ? "cursor-default"
+          : "enabled:hover:scale-125 transition disabled:opacity-50"
+      }
+      onClick={copied ? undefined : handleClick}
+      type="button"
+    >
+      {copied ? <SmileIcon size={16} /> : <ClipboardCopyIcon size={16} />}
+    </button>
   );
 }

From 627a2e390b788f4cf7247f7f86b72a82a56f3e65 Mon Sep 17 00:00:00 2001
From: Aaron Delasy <aaron@thelang.io>
Date: Fri, 18 Oct 2024 14:21:38 +0300
Subject: [PATCH 04/12] Add ability to place play entities in MapBuilder

---
 components/MapBuilder.tsx | 188 ++++++++++++++++++++++----------------
 1 file changed, 108 insertions(+), 80 deletions(-)

diff --git a/components/MapBuilder.tsx b/components/MapBuilder.tsx
index e98cf30..fec489f 100644
--- a/components/MapBuilder.tsx
+++ b/components/MapBuilder.tsx
@@ -10,10 +10,12 @@ import { cn } from "@/lib/utils";
 export function MapBuilder({
   disabled,
   onChange,
+  play,
   value,
 }: {
   disabled?: boolean;
   onChange: (value: string[][]) => unknown;
+  play?: boolean;
   value: string[][];
 }) {
   const map = value.length === 0 || value[0].length === 0 ? [[" "]] : value;
@@ -24,9 +26,20 @@ export function MapBuilder({
     }
   }, [value]);
 
-  function handleClickCell(row: number, cell: number, initialValue: string) {
-    const newValue =
-      initialValue === " " ? "R" : initialValue === "R" ? "Z" : " ";
+  function handleClickCell(row: number, cell: number) {
+    const initialValue = map[row][cell];
+    let newValue;
+
+    if (play) {
+      if (initialValue === "R" || initialValue === "Z") {
+        alert("You can't replace zombie or rock in play mode");
+        return;
+      }
+
+      newValue = initialValue === " " ? "P" : initialValue === "P" ? "B" : " ";
+    } else {
+      newValue = initialValue === " " ? "Z" : initialValue === "Z" ? "R" : " ";
+    }
 
     const newMap = [...map.map((row) => [...row])];
     newMap[row][cell] = newValue;
@@ -68,88 +81,103 @@ export function MapBuilder({
   const moreThanOneRow = map.length > 1;
   const moreThanOneCell = map[0].length > 1;
 
-  const buttonClassName = cn("border border-white w-8 h-8 disabled:opacity-50");
+  const buttonClassName = cn(
+    "border border-white w-[64px] h-[64px] disabled:opacity-50",
+  );
 
   const controlClassName = cn(
-    "h-8 absolute hover:scale-125 transition disabled:opacity-50",
+    "h-8 absolute enabled:hover:scale-125 transition disabled:opacity-50",
   );
 
   return (
     <div className="relative inline-flex flex-col p-7 w-fit">
-      <button
-        className={cn(controlClassName, "top-0 left-1/2 translate-x-[-100%]")}
-        disabled={disabled}
-        type="button"
-        onClick={handleIncreaseUp}
-      >
-        <ChevronUpIcon />
-      </button>
-      {moreThanOneRow && (
-        <button
-          className={cn(controlClassName, "top-0 left-1/2")}
-          disabled={disabled}
-          type="button"
-          onClick={handleDecreaseUp}
-        >
-          <ChevronDownIcon />
-        </button>
-      )}
-      <button
-        className={cn(controlClassName, "top-1/2 left-0 translate-y-[-100%]")}
-        disabled={disabled}
-        type="button"
-        onClick={handleIncreaseLeft}
-      >
-        <ChevronLeftIcon />
-      </button>
-      {moreThanOneCell && (
-        <button
-          className={cn(controlClassName, "top-1/2 left-0")}
-          disabled={disabled}
-          type="button"
-          onClick={handleDecreaseLeft}
-        >
-          <ChevronRightIcon />
-        </button>
-      )}
-      <button
-        className={cn(
-          controlClassName,
-          "bottom-0 left-1/2 translate-x-[-100%]",
-        )}
-        disabled={disabled}
-        type="button"
-        onClick={handleIncreaseDown}
-      >
-        <ChevronDownIcon />
-      </button>
-      {moreThanOneRow && (
-        <button
-          className={cn(controlClassName, "bottom-0 left-1/2")}
-          disabled={disabled}
-          type="button"
-          onClick={handleDecreaseDown}
-        >
-          <ChevronUpIcon />
-        </button>
-      )}
-      <button
-        className={cn(controlClassName, "top-1/2 right-0 translate-y-[-100%]")}
-        disabled={disabled}
-        type="button"
-        onClick={handleIncreaseRight}
-      >
-        <ChevronRightIcon />
-      </button>
-      {moreThanOneCell && (
-        <button
-          className={cn(controlClassName, "top-1/2 right-0")}
-          disabled={disabled}
-          type="button"
-          onClick={handleDecreaseRight}
-        >
-          <ChevronLeftIcon />
-        </button>
+      {!play && (
+        <>
+          <button
+            className={cn(
+              controlClassName,
+              "top-0 left-1/2 translate-x-[-100%]",
+            )}
+            disabled={disabled}
+            type="button"
+            onClick={handleIncreaseUp}
+          >
+            <ChevronUpIcon />
+          </button>
+          {moreThanOneRow && (
+            <button
+              className={cn(controlClassName, "top-0 left-1/2")}
+              disabled={disabled}
+              type="button"
+              onClick={handleDecreaseUp}
+            >
+              <ChevronDownIcon />
+            </button>
+          )}
+          <button
+            className={cn(
+              controlClassName,
+              "top-1/2 left-0 translate-y-[-100%]",
+            )}
+            disabled={disabled}
+            type="button"
+            onClick={handleIncreaseLeft}
+          >
+            <ChevronLeftIcon />
+          </button>
+          {moreThanOneCell && (
+            <button
+              className={cn(controlClassName, "top-1/2 left-0")}
+              disabled={disabled}
+              type="button"
+              onClick={handleDecreaseLeft}
+            >
+              <ChevronRightIcon />
+            </button>
+          )}
+          <button
+            className={cn(
+              controlClassName,
+              "bottom-0 left-1/2 translate-x-[-100%]",
+            )}
+            disabled={disabled}
+            type="button"
+            onClick={handleIncreaseDown}
+          >
+            <ChevronDownIcon />
+          </button>
+          {moreThanOneRow && (
+            <button
+              className={cn(controlClassName, "bottom-0 left-1/2")}
+              disabled={disabled}
+              type="button"
+              onClick={handleDecreaseDown}
+            >
+              <ChevronUpIcon />
+            </button>
+          )}
+          <button
+            className={cn(
+              controlClassName,
+              "top-1/2 right-0 translate-y-[-100%]",
+            )}
+            disabled={disabled}
+            type="button"
+            onClick={handleIncreaseRight}
+          >
+            <ChevronRightIcon />
+          </button>
+          {moreThanOneCell && (
+            <button
+              className={cn(controlClassName, "top-1/2 right-0")}
+              disabled={disabled}
+              type="button"
+              onClick={handleDecreaseRight}
+            >
+              <ChevronLeftIcon />
+            </button>
+          )}
+        </>
       )}
       {map.map((row, rowIdx) => (
         <div key={rowIdx} className="inline-flex">
@@ -158,7 +186,7 @@ export function MapBuilder({
               className={buttonClassName}
               disabled={disabled === true}
               key={`${rowIdx}.${cellIdx}`}
-              onClick={() => handleClickCell(rowIdx, cellIdx, cell)}
+              onClick={() => handleClickCell(rowIdx, cellIdx)}
               type="button"
             >
               {cell}

From 96dfa52e0882d240b56b297bbacd2d3ac9dffaca Mon Sep 17 00:00:00 2001
From: Aaron Delasy <aaron@thelang.io>
Date: Fri, 18 Oct 2024 14:22:04 +0300
Subject: [PATCH 05/12] Ability to manually play in Playground

---
 app/playground/page.tsx | 148 +++++++++++++++++++++++++++++-----------
 1 file changed, 109 insertions(+), 39 deletions(-)

diff --git a/app/playground/page.tsx b/app/playground/page.tsx
index 7ad0413..eb7c2c6 100644
--- a/app/playground/page.tsx
+++ b/app/playground/page.tsx
@@ -5,6 +5,7 @@ import { useAction } from "convex/react";
 import { Button } from "@/components/ui/button";
 import { CopyMapButton } from "@/components/CopyMapButton";
 import { MapBuilder } from "@/components/MapBuilder";
+import { MapStatus } from "@/components/MapStatus";
 import { ModelSelector } from "@/components/ModelSelector";
 import { Visualizer } from "@/components/Visualizer";
 import { ZombieSurvival } from "@/simulators/zombie-survival";
@@ -18,6 +19,10 @@ export default function PlaygroundPage() {
   const [solution, setSolution] = React.useState<string[][] | null>(null);
   const [reasoning, setReasoning] = React.useState<string | null>(null);
   const [simulating, setSimulating] = React.useState(false);
+  const [userPlaying, setUserPlaying] = React.useState(false);
+  const [userSolution, setUserSolution] = React.useState<string[][]>([]);
+  const [visualizingUserSolution, setVisualizingUserSolution] =
+    React.useState(false);
 
   async function handleSimulate() {
     setError(null);
@@ -59,62 +64,127 @@ export default function PlaygroundPage() {
   function handleEdit() {
     setSolution(null);
     setReasoning(null);
+    setUserPlaying(false);
+    setVisualizingUserSolution(false);
   }
 
+  function handleUserPlay() {
+    if (!ZombieSurvival.mapHasZombies(map)) {
+      alert("Add player to the map first");
+      return;
+    }
+
+    setUserPlaying(true);
+    setUserSolution(map);
+  }
+
+  function handleVisualize() {
+    if (!ZombieSurvival.mapHasPlayer(userSolution)) {
+      alert("Add player to the map first");
+      return;
+    }
+
+    if (ZombieSurvival.mapMultiplePlayers(userSolution)) {
+      alert("Map has multiple players");
+      return;
+    }
+
+    setVisualizingUserSolution(true);
+  }
+
+  function handleStopVisualization() {
+    setVisualizingUserSolution(false);
+  }
+
+  const visualizing = solution !== null || visualizingUserSolution;
+
   return (
     <div className="container mx-auto min-h-screen flex flex-col items-center py-12 gap-8">
-      <h1 className="text-4xl font-bold mb-8">Playground</h1>
+      <h1 className="text-4xl font-bold">Playground</h1>
 
-      <div>
-        <div className="flex gap-8">
-          {solution !== null && (
-            <div className="flex flex-col">
+      <div className="flex w-full gap-8">
+        <div className="flex flex-col gap-2 grow w-full">
+          <div className="flex flex-col gap-0">
+            <div className="flex gap-2">
+              <p>
+                Map ({map.length}x{map[0]?.length ?? 0})
+              </p>
+              <CopyMapButton map={map} />
+            </div>
+            <p className="text-xs">* Click on a cell to place entity</p>
+          </div>
+          <div
+            className={`flex justify-center ${visualizing ? "pt-[28px]" : ""}`}
+          >
+            {visualizing && (
               <Visualizer
                 autoReplay
                 autoStart
                 controls={false}
-                map={solution}
+                map={visualizingUserSolution ? userSolution : solution!}
               />
-            </div>
-          )}
-          {solution === null && (
-            <div className="flex flex-col gap-2 min-w-[700px]">
-              <div className="flex flex-col gap-0">
-                <p>
-                  Map ({map.length}x{map[0]?.length ?? 0})
-                </p>
-                <p className="text-xs">* Click on a cell to see magic</p>
-              </div>
-              <div className="flex justify-center">
-                <MapBuilder
-                  disabled={simulating}
-                  onChange={handleChangeMap}
-                  value={map}
-                />
-              </div>
-            </div>
-          )}
-          <div className="flex flex-col gap-4 max-w-[400px]">
-            <div className="flex flex-col gap-2 w-fit">
-              <p>Model (~$0.002)</p>
-              <ModelSelector onChange={handleChangeModel} value={model} />
+            )}
+            {!visualizing && (
+              <MapBuilder
+                disabled={simulating}
+                onChange={userPlaying ? setUserSolution : handleChangeMap}
+                play={userPlaying}
+                value={userPlaying ? userSolution : map}
+              />
+            )}
+          </div>
+        </div>
+        <div className="flex flex-col gap-4 shrink-0 w-[400px]">
+          <div className="flex flex-col gap-2 w-fit">
+            <p>Model (~$0.002)</p>
+            <ModelSelector onChange={handleChangeModel} value={model} />
+            {!userPlaying && solution === null && (
               <Button
+                className="w-full"
                 disabled={model === "" || simulating}
-                onClick={solution === null ? handleSimulate : handleEdit}
+                onClick={handleSimulate}
                 type="button"
+              >
+                {simulating ? "Simulating..." : "Play With AI"}
+              </Button>
+            )}
+            {(solution !== null || userPlaying) && (
+              <Button
                 className="w-full"
+                disabled={model === "" || simulating}
+                onClick={handleEdit}
+                type="button"
               >
-                {simulating
-                  ? "Simulating..."
-                  : solution === null
-                    ? "Play"
-                    : "Edit"}
+                {simulating ? "Simulating..." : "Edit"}
               </Button>
-              <CopyMapButton map={map} />
-            </div>
-            {error !== null && <p className="text-sm text-red-500">{error}</p>}
-            {reasoning !== null && <p className="text-sm">{reasoning}</p>}
+            )}
+            {solution === null && !simulating && !userPlaying && (
+              <Button className="w-full" onClick={handleUserPlay} type="button">
+                Play Yourself
+              </Button>
+            )}
+            {userPlaying && (
+              <Button
+                className="w-full"
+                onClick={
+                  visualizingUserSolution
+                    ? handleStopVisualization
+                    : handleVisualize
+                }
+                type="button"
+              >
+                {visualizingUserSolution ? "Stop" : "Visualize"}
+              </Button>
+            )}
           </div>
+          {error !== null && <p className="text-sm text-red-500">{error}</p>}
+          {visualizingUserSolution && <MapStatus map={userSolution} />}
+          {reasoning !== null && (
+            <div className="flex flex-col gap-0">
+              <MapStatus map={solution!} />
+              <p className="text-sm">{reasoning}</p>
+            </div>
+          )}
         </div>
       </div>
     </div>

From c1a08af05b77ce2179e904fe518bccae91bc2523 Mon Sep 17 00:00:00 2001
From: Aaron Delasy <aaron@thelang.io>
Date: Fri, 18 Oct 2024 14:29:08 +0300
Subject: [PATCH 06/12] Move testMap closer to testAIModel

---
 convex/maps.ts | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/convex/maps.ts b/convex/maps.ts
index e1c250c..ef61aff 100644
--- a/convex/maps.ts
+++ b/convex/maps.ts
@@ -171,22 +171,6 @@ export const seedMaps = internalMutation({
   },
 });
 
-export const testMap = action({
-  args: {
-    modelId: v.string(),
-    map: v.array(v.array(v.string())),
-  },
-  handler: async (ctx, args) => {
-    const flags = await ctx.runQuery(api.flags.getFlags);
-
-    if (!flags.showTestPage) {
-      throw new Error("Test page is not enabled");
-    }
-
-    return await runModel(args.modelId, args.map);
-  },
-});
-
 export const getMaps = query({
   args: {
     isReviewed: v.optional(v.boolean()),
@@ -321,6 +305,22 @@ export const playMapAction = internalAction({
   },
 });
 
+export const testMap = action({
+  args: {
+    modelId: v.string(),
+    map: v.array(v.array(v.string())),
+  },
+  handler: async (ctx, args) => {
+    const flags = await ctx.runQuery(api.flags.getFlags);
+
+    if (!flags.showTestPage) {
+      throw new Error("Test page is not enabled");
+    }
+
+    return await runModel(args.modelId, args.map);
+  },
+});
+
 export const testAIModel = action({
   args: {
     level: v.number(),

From 7615b97b33f49eb04fe1f4a017867966450627d6 Mon Sep 17 00:00:00 2001
From: Aaron Delasy <aaron@thelang.io>
Date: Fri, 18 Oct 2024 14:35:40 +0300
Subject: [PATCH 07/12] Fix watch page errors

---
 app/playground/page.tsx                      |  2 +-
 components/MapBuilder.tsx                    |  5 +++--
 simulators/zombie-survival/ZombieSurvival.ts | 18 +++++++++++++-----
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/app/playground/page.tsx b/app/playground/page.tsx
index eb7c2c6..34d6895 100644
--- a/app/playground/page.tsx
+++ b/app/playground/page.tsx
@@ -84,7 +84,7 @@ export default function PlaygroundPage() {
       return;
     }
 
-    if (ZombieSurvival.mapMultiplePlayers(userSolution)) {
+    if (ZombieSurvival.mapHasMultiplePlayers(userSolution)) {
       alert("Map has multiple players");
       return;
     }
diff --git a/components/MapBuilder.tsx b/components/MapBuilder.tsx
index fec489f..b07826d 100644
--- a/components/MapBuilder.tsx
+++ b/components/MapBuilder.tsx
@@ -5,6 +5,7 @@ import {
   ChevronRightIcon,
   ChevronUpIcon,
 } from "lucide-react";
+import { ZombieSurvival } from "@/simulators/zombie-survival";
 import { cn } from "@/lib/utils";
 
 export function MapBuilder({
@@ -18,10 +19,10 @@ export function MapBuilder({
   play?: boolean;
   value: string[][];
 }) {
-  const map = value.length === 0 || value[0].length === 0 ? [[" "]] : value;
+  const map = ZombieSurvival.mapIsEmpty(value) ? [[" "]] : value;
 
   React.useEffect(() => {
-    if (value.length === 0 || value[0].length === 0) {
+    if (ZombieSurvival.mapIsEmpty(value)) {
       onChange([[" "]]);
     }
   }, [value]);
diff --git a/simulators/zombie-survival/ZombieSurvival.ts b/simulators/zombie-survival/ZombieSurvival.ts
index 9a2ef9f..20d03b3 100644
--- a/simulators/zombie-survival/ZombieSurvival.ts
+++ b/simulators/zombie-survival/ZombieSurvival.ts
@@ -19,6 +19,10 @@ export class ZombieSurvival {
   }
 
   public static isWin(config: string[][]): boolean {
+    if (ZombieSurvival.mapIsEmpty(config)) {
+      return false;
+    }
+
     const game = new ZombieSurvival(config);
 
     while (!game.finished()) {
@@ -28,6 +32,12 @@ export class ZombieSurvival {
     return !game.getPlayer().dead();
   }
 
+  public static mapHasMultiplePlayers(map: string[][]): boolean {
+    return (
+      map.map((row) => row.filter((cell) => cell === "P")).flat().length > 1
+    );
+  }
+
   public static mapHasPlayer(map: string[][]): boolean {
     return map.some((row) => row.includes("P"));
   }
@@ -36,14 +46,12 @@ export class ZombieSurvival {
     return map.some((row) => row.includes("Z"));
   }
 
-  public static mapMultiplePlayers(map: string[][]): boolean {
-    return (
-      map.map((row) => row.filter((cell) => cell === "P")).flat().length > 1
-    );
+  public static mapIsEmpty(map: string[][]): boolean {
+    return map.length === 0 || map[0].length === 0;
   }
 
   public constructor(config: string[][]) {
-    if (config.length === 0 || config[0].length === 0) {
+    if (ZombieSurvival.mapIsEmpty(config)) {
       throw new Error("Config is empty");
     }
 

From 772c8b37bd7b8b4800c86bdbea3033611c1dc37c Mon Sep 17 00:00:00 2001
From: Aaron Delasy <aaron@thelang.io>
Date: Fri, 18 Oct 2024 14:43:02 +0300
Subject: [PATCH 08/12] Allow everyone to use playground

---
 app/header.tsx          | 14 +++++-------
 app/playground/page.tsx | 49 +++++++++++++++++++++++------------------
 convex/maps.ts          |  6 ++---
 3 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/app/header.tsx b/app/header.tsx
index e8ec595..684f951 100644
--- 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/playground/page.tsx b/app/playground/page.tsx
index 34d6895..c69dac9 100644
--- a/app/playground/page.tsx
+++ b/app/playground/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { useAction } from "convex/react";
+import { useAction, useQuery } from "convex/react";
 import { Button } from "@/components/ui/button";
 import { CopyMapButton } from "@/components/CopyMapButton";
 import { MapBuilder } from "@/components/MapBuilder";
@@ -13,6 +13,7 @@ import { api } from "@/convex/_generated/api";
 
 export default function PlaygroundPage() {
   const testMap = useAction(api.maps.testMap);
+  const isAdmin = useQuery(api.users.isAdmin);
   const [map, setMap] = React.useState<string[][]>([]);
   const [model, setModel] = React.useState("");
   const [error, setError] = React.useState<string | null>(null);
@@ -136,27 +137,31 @@ export default function PlaygroundPage() {
         </div>
         <div className="flex flex-col gap-4 shrink-0 w-[400px]">
           <div className="flex flex-col gap-2 w-fit">
-            <p>Model (~$0.002)</p>
-            <ModelSelector onChange={handleChangeModel} value={model} />
-            {!userPlaying && solution === null && (
-              <Button
-                className="w-full"
-                disabled={model === "" || simulating}
-                onClick={handleSimulate}
-                type="button"
-              >
-                {simulating ? "Simulating..." : "Play With AI"}
-              </Button>
-            )}
-            {(solution !== null || userPlaying) && (
-              <Button
-                className="w-full"
-                disabled={model === "" || simulating}
-                onClick={handleEdit}
-                type="button"
-              >
-                {simulating ? "Simulating..." : "Edit"}
-              </Button>
+            {isAdmin && (
+              <>
+                <p>Model (~$0.002)</p>
+                <ModelSelector onChange={handleChangeModel} value={model} />
+                {!userPlaying && solution === null && (
+                  <Button
+                    className="w-full"
+                    disabled={model === "" || simulating}
+                    onClick={handleSimulate}
+                    type="button"
+                  >
+                    {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 && !simulating && !userPlaying && (
               <Button className="w-full" onClick={handleUserPlay} type="button">
diff --git a/convex/maps.ts b/convex/maps.ts
index ef61aff..26c1880 100644
--- a/convex/maps.ts
+++ b/convex/maps.ts
@@ -311,10 +311,10 @@ export const testMap = action({
     map: v.array(v.array(v.string())),
   },
   handler: async (ctx, args) => {
-    const flags = await ctx.runQuery(api.flags.getFlags);
+    const isAdmin = await ctx.runQuery(api.users.isAdmin);
 
-    if (!flags.showTestPage) {
-      throw new Error("Test page is not enabled");
+    if (!isAdmin) {
+      throw new Error("Test map is available only for admin");
     }
 
     return await runModel(args.modelId, args.map);

From 06edc2a5a8deb949e582d231a8c9a3f9a8b3208a Mon Sep 17 00:00:00 2001
From: Aaron Delasy <aaron@thelang.io>
Date: Fri, 18 Oct 2024 15:23:16 +0300
Subject: [PATCH 09/12] Add toaster to providers

---
 app/provider.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/provider.tsx b/app/provider.tsx
index 1bf1a56..3d19e55 100644
--- a/app/provider.tsx
+++ b/app/provider.tsx
@@ -4,6 +4,7 @@ import { ConvexAuthNextjsProvider } from "@convex-dev/auth/nextjs";
 import { ConvexReactClient } from "convex/react";
 import { ThemeProvider } from "next-themes";
 import PlausibleProvider from "next-plausible";
+import { Toaster } from "@/components/ui/toaster";
 
 const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
 
@@ -17,6 +18,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
       <ThemeProvider attribute="class">
         <ConvexAuthNextjsProvider client={convex}>
           {children}
+          <Toaster />
         </ConvexAuthNextjsProvider>
       </ThemeProvider>
     </PlausibleProvider>

From 5cd59f54ba706e9f0802d01345327c117f411ea9 Mon Sep 17 00:00:00 2001
From: Aaron Delasy <aaron@thelang.io>
Date: Fri, 18 Oct 2024 15:23:36 +0300
Subject: [PATCH 10/12] Create errorMessage helper function

---
 app/play/[level]/test-mode.tsx | 5 ++---
 lib/utils.ts                   | 8 ++++++++
 models/index.ts                | 8 ++------
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/app/play/[level]/test-mode.tsx b/app/play/[level]/test-mode.tsx
index 3882e98..6ce534d 100644
--- 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/lib/utils.ts b/lib/utils.ts
index 365058c..5a7b05a 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -4,3 +4,11 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+export function errorMessage(error: unknown) {
+  return error instanceof Error
+    ? error.message
+    : typeof error === "string"
+      ? error
+      : "An unexpected error occurred";
+}
diff --git a/models/index.ts b/models/index.ts
index 50853fa..f9f0742 100644
--- a/models/index.ts
+++ b/models/index.ts
@@ -2,6 +2,7 @@ import { gemini15pro } from "./gemini-1.5-pro";
 import { gpt4o } from "./gpt-4o";
 import { claude35sonnet } from "./claude-3-5-sonnet";
 import { perplexityModel } from "./perplexity-llama";
+import { errorMessage } from "@/lib/utils";
 
 export type ModelHandler = (
   prompt: string,
@@ -141,12 +142,7 @@ export async function runModel(
   } catch (error) {
     return {
       reasoning: "Internal error",
-      error:
-        error instanceof Error
-          ? error.message
-          : typeof error === "string"
-            ? error
-            : "Unknown error",
+      error: errorMessage(error),
     };
   }
 }

From 9fb0d90d7a454291c8d6125cd9357e005079cb32 Mon Sep 17 00:00:00 2001
From: Aaron Delasy <aaron@thelang.io>
Date: Fri, 18 Oct 2024 15:24:05 +0300
Subject: [PATCH 11/12] Ability to publish map

---
 app/playground/page.tsx | 64 +++++++++++++++++++++++++++++++++++------
 convex/maps.ts          | 33 +++++++++++++++++++++
 2 files changed, 88 insertions(+), 9 deletions(-)

diff --git a/app/playground/page.tsx b/app/playground/page.tsx
index c69dac9..667c582 100644
--- a/app/playground/page.tsx
+++ b/app/playground/page.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import React from "react";
-import { useAction, useQuery } from "convex/react";
+import { CircleAlertIcon } from "lucide-react";
+import { useAction, useMutation, useQuery } from "convex/react";
 import { Button } from "@/components/ui/button";
 import { CopyMapButton } from "@/components/CopyMapButton";
 import { MapBuilder } from "@/components/MapBuilder";
@@ -10,21 +11,54 @@ import { ModelSelector } from "@/components/ModelSelector";
 import { Visualizer } from "@/components/Visualizer";
 import { ZombieSurvival } from "@/simulators/zombie-survival";
 import { api } from "@/convex/_generated/api";
+import { errorMessage } from "@/lib/utils";
+import { useToast } from "@/components/ui/use-toast";
 
 export default function PlaygroundPage() {
-  const testMap = useAction(api.maps.testMap);
   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 [model, setModel] = React.useState("");
   const [error, setError] = React.useState<string | null>(null);
   const [solution, setSolution] = React.useState<string[][] | null>(null);
   const [reasoning, setReasoning] = React.useState<string | null>(null);
+  const [publishing, setPublishing] = React.useState(false);
   const [simulating, setSimulating] = React.useState(false);
   const [userPlaying, setUserPlaying] = React.useState(false);
   const [userSolution, setUserSolution] = React.useState<string[][]>([]);
   const [visualizingUserSolution, setVisualizingUserSolution] =
     React.useState(false);
 
+  async function handlePublish() {
+    if (!ZombieSurvival.mapHasZombies(map)) {
+      alert("Add some zombies to the map first");
+      return;
+    }
+
+    if (!confirm("Are you sure?")) {
+      return;
+    }
+
+    setPublishing(true);
+
+    try {
+      await publishMap({ map });
+
+      toast({
+        description: "Map published successfully!",
+      });
+    } catch (error) {
+      toast({
+        description: errorMessage(error),
+        variant: "destructive",
+      });
+    } finally {
+      setPublishing(false);
+    }
+  }
+
   async function handleSimulate() {
     setError(null);
     setSolution(null);
@@ -105,14 +139,26 @@ export default function PlaygroundPage() {
 
       <div className="flex w-full gap-8">
         <div className="flex flex-col gap-2 grow w-full">
-          <div className="flex flex-col gap-0">
-            <div className="flex gap-2">
-              <p>
-                Map ({map.length}x{map[0]?.length ?? 0})
-              </p>
-              <CopyMapButton map={map} />
+          <div className="flex justify-between">
+            <div className="flex flex-col gap-0">
+              <div className="flex gap-2">
+                <p>
+                  Map ({map.length}x{map[0]?.length ?? 0})
+                </p>
+                <CopyMapButton map={map} />
+              </div>
+              <p className="text-xs">* Click on a cell to place entity</p>
             </div>
-            <p className="text-xs">* Click on a cell to place entity</p>
+            <Button
+              className="gap-1"
+              disabled={publishing}
+              onClick={handlePublish}
+              type="button"
+              variant="destructive"
+            >
+              <CircleAlertIcon size={16} />
+              <span>{publishing ? "Publishing..." : "Publish Map"}</span>
+            </Button>
           </div>
           <div
             className={`flex justify-center ${visualizing ? "pt-[28px]" : ""}`}
diff --git a/convex/maps.ts b/convex/maps.ts
index 26c1880..fdccccc 100644
--- a/convex/maps.ts
+++ b/convex/maps.ts
@@ -148,6 +148,39 @@ export const addMap = mutation({
   },
 });
 
+export const publishMap = mutation({
+  args: {
+    map: v.array(v.array(v.string())),
+  },
+  handler: async (ctx, args) => {
+    const userId = await getAuthUserId(ctx);
+
+    if (!userId) {
+      throw new Error("User not authenticated");
+    }
+
+    const isAdmin = await ctx.runQuery(api.users.isAdmin);
+
+    if (!isAdmin) {
+      throw new Error("Publishing maps is available only for admins");
+    }
+
+    const maps = await ctx.db
+      .query("maps")
+      .filter((q) => q.neq("level", undefined))
+      .collect();
+
+    const lastLevel = maps.sort((a, b) => b.level! - a.level!)[120].level!;
+
+    await ctx.db.insert("maps", {
+      grid: args.map,
+      level: lastLevel + 1,
+      submittedBy: userId,
+      isReviewed: true,
+    });
+  },
+});
+
 export const seedMaps = internalMutation({
   handler: async (ctx) => {
     const maps = await ctx.db.query("maps").collect();

From 972bb999c5b91cacf8e3b61444cc1ff6d5432402 Mon Sep 17 00:00:00 2001
From: Aaron Delasy <aaron@thelang.io>
Date: Fri, 18 Oct 2024 15:31:21 +0300
Subject: [PATCH 12/12] Show publish button only for admin

---
 app/playground/page.tsx | 22 ++++++++++++----------
 models/index.ts         |  2 +-
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/app/playground/page.tsx b/app/playground/page.tsx
index 667c582..4e709ea 100644
--- a/app/playground/page.tsx
+++ b/app/playground/page.tsx
@@ -149,16 +149,18 @@ export default function PlaygroundPage() {
               </div>
               <p className="text-xs">* Click on a cell to place entity</p>
             </div>
-            <Button
-              className="gap-1"
-              disabled={publishing}
-              onClick={handlePublish}
-              type="button"
-              variant="destructive"
-            >
-              <CircleAlertIcon size={16} />
-              <span>{publishing ? "Publishing..." : "Publish Map"}</span>
-            </Button>
+            {isAdmin && (
+              <Button
+                className="gap-1"
+                disabled={publishing}
+                onClick={handlePublish}
+                type="button"
+                variant="destructive"
+              >
+                <CircleAlertIcon size={16} />
+                <span>{publishing ? "Publishing..." : "Publish Map"}</span>
+              </Button>
+            )}
           </div>
           <div
             className={`flex justify-center ${visualizing ? "pt-[28px]" : ""}`}
diff --git a/models/index.ts b/models/index.ts
index f9f0742..d71881c 100644
--- a/models/index.ts
+++ b/models/index.ts
@@ -2,7 +2,7 @@ import { gemini15pro } from "./gemini-1.5-pro";
 import { gpt4o } from "./gpt-4o";
 import { claude35sonnet } from "./claude-3-5-sonnet";
 import { perplexityModel } from "./perplexity-llama";
-import { errorMessage } from "@/lib/utils";
+import { errorMessage } from "../lib/utils";
 
 export type ModelHandler = (
   prompt: string,