From e9aec6704f66529d9739b9c3ed2ae0282be1002b Mon Sep 17 00:00:00 2001
From: Aaron Delasy <aaron@thelang.io>
Date: Fri, 25 Oct 2024 15:13:47 +0300
Subject: [PATCH] Fix compilation issues in playground

---
 app/playground/page.tsx | 63 +++++++++++++++++++++--------------------
 1 file changed, 32 insertions(+), 31 deletions(-)

diff --git a/app/playground/page.tsx b/app/playground/page.tsx
index 0b0816e..0d9cf3b 100644
--- a/app/playground/page.tsx
+++ b/app/playground/page.tsx
@@ -273,35 +273,37 @@ export default function PlaygroundPage() {
           </DialogHeader>
         </DialogContent>
       </Dialog>
-    <Page>
-      <PageTitle>Playground</PageTitle>
-
-      <div className="flex gap-8">
-        {/* Left side: Grid */}
-        <div className="flex-1">
-          <Card className="p-8">
-            {!visualizing && !userPlaying && (
-              <p className="mb-12 text-sm">
-                Click on the board to place or remove units. Use the buttons
-                below to switch between unit types.
-              </p>
-            )}
-            {!visualizing && userPlaying && (
-              <p className="mb-6 text-sm text-gray-600">
-                Place a player (P) and blocks (B) on the board to create your
-                escape route. Click to toggle between empty, player, and block.
-              </p>
-            )}
-            <div
-              className={`flex justify-center ${visualizing ? "pt-[28px]" : ""} relative`}
-            >
-              {visualizing && (
-                <Visualizer
-                  autoReplay
-                  autoStart
-                  controls={false}
-                  map={visualizingUserSolution ? userSolution : solution!}
-                />
+      <Page>
+        <PageTitle>Playground</PageTitle>
+
+        <div className="flex gap-8">
+          {/* Left side: Grid */}
+          <div className="flex-1">
+            <Card className="p-8">
+              {!visualizing && !userPlaying && (
+                <p className="mb-12 text-sm">
+                  Click on the board to place or remove units. Use the buttons
+                  below to switch between unit types.
+                </p>
+              )}
+              {!visualizing && userPlaying && (
+                <p className="mb-6 text-sm text-gray-600">
+                  Place a player (P) and blocks (B) on the board to create your
+                  escape route. Click to toggle between empty, player, and
+                  block.
+                </p>
+              )}
+              <div
+                className={`flex justify-center ${visualizing ? "pt-[28px]" : ""} relative`}
+              >
+                {visualizing && (
+                  <Visualizer
+                    autoReplay
+                    autoStart
+                    controls={false}
+                    map={visualizingUserSolution ? userSolution : solution!}
+                  />
+                )}
                 {!visualizing && (
                   <div className="relative">
                     <Map map={userPlaying ? userSolution : map} />
@@ -518,8 +520,7 @@ export default function PlaygroundPage() {
             </div>
           </Card>
         </div>
-      </div>
-    </Page>
+      </Page>
     </>
   );
 }