🦑🌈 ↝ Canvas for [ GP-15 ]

components/Gameplay/Sandbox/AlchemyUI.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+export default function AlchemyUI() {
+    return (
+        <div className="container mx-auto flex flex-col items-center">
+            <div className="mb-8 mt-4">
+                <canvas id="game-canvas" className="border border-gray-400" style={{ width: '80vw', height: '80vh' }}></canvas>
+            </div>
+            <div className="flex flex-row space-x-4">
+                <div className="bg-blue-500 w-12 h-12 rounded-full"></div>
+                <div className="bg-green-500 w-12 h-12 rounded-full"></div>
+                <div className="bg-red-500 w-12 h-12 rounded-full"></div>
+                <div className="bg-yellow-500 w-12 h-12 rounded-full"></div>
+            </div>
+        </div>
+    );
+};

components/Modals/rover-interface.tsx

@@ -769,4 +769,4 @@ function ZoomOutIcon(props) {
       <line x1="8" x2="14" y1="11" y2="11" />
     </svg>
   )
-}
+};

pages/explore/play.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import AlchemyUI from "../../components/Gameplay/Sandbox/AlchemyUI";
+import Navigation from "../../components/_Core/Section/Navbar";
+
+export default function AlchemyPage() {
+    return (
+        <>
+            <style jsx global>
+                {`
+                    body {
+                        background: url('garden.png') center/cover;
+                    }
+                    
+                    @media only screen and (max-width: 767px) {
+                        .planet-heading {
+                        color: white;
+                        font-size: 24px;
+                        text-align: center;
+                        margin-bottom: 10px;
+                        }
+                    }
+                `}
+           </style>
+           <Navigation />
+            <AlchemyUI />
+        </>
+    );
+};