From 250f64d998933bd9ce940f8173d1a509589388b5 Mon Sep 17 00:00:00 2001
From: Liam Arbuckle <liam@skinetics.tech>
Date: Tue, 13 Feb 2024 15:43:23 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=A6=91=F0=9F=8C=88=20=E2=86=9D=20Canvas?=
 =?UTF-8?q?=20for=20[=20GP-15=20]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Gameplay/Sandbox/AlchemyUI.tsx | 17 ++++++++++++++
 components/Modals/rover-interface.tsx     |  2 +-
 pages/explore/play.tsx                    | 28 +++++++++++++++++++++++
 3 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 components/Gameplay/Sandbox/AlchemyUI.tsx
 create mode 100644 pages/explore/play.tsx

diff --git a/components/Gameplay/Sandbox/AlchemyUI.tsx b/components/Gameplay/Sandbox/AlchemyUI.tsx
new file mode 100644
index 00000000..4a55861d
--- /dev/null
+++ b/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>
+    );
+};
\ No newline at end of file
diff --git a/components/Modals/rover-interface.tsx b/components/Modals/rover-interface.tsx
index fe84db83..465258de 100644
--- a/components/Modals/rover-interface.tsx
+++ b/components/Modals/rover-interface.tsx
@@ -769,4 +769,4 @@ function ZoomOutIcon(props) {
       <line x1="8" x2="14" y1="11" y2="11" />
     </svg>
   )
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/pages/explore/play.tsx b/pages/explore/play.tsx
new file mode 100644
index 00000000..afd814ae
--- /dev/null
+++ b/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 />
+        </>
+    );
+};
\ No newline at end of file