diff --git a/engine/Cargo.toml b/engine/Cargo.toml
index e52a077..c1369b9 100644
--- a/engine/Cargo.toml
+++ b/engine/Cargo.toml
@@ -22,6 +22,9 @@ tokio = { version = "1.42.0", features = ["macros", "parking_lot", "rt", "rt-mul
rand = "0.8.5"
+three-d = "0.18.0"
+window = "0.5.0"
+
[profile.dev]
debug-assertions = true
diff --git a/engine/src/core/repl/Re-exports.rs b/engine/src/core/repl/Re-exports.rs
new file mode 100644
index 0000000..8d7f394
--- /dev/null
+++ b/engine/src/core/repl/Re-exports.rs
@@ -0,0 +1,9 @@
+pub use renderer::*;
+pub use window::*;
+pub use crate::core::*;
+pub use material::*;
+pub use effect::*;
+pub use light::*;
+pub use geometry::*;
+pub use object::*;
+pub use control::*;
\ No newline at end of file
diff --git a/engine/text_editor/CodeEditorWindow.js b/engine/text_editor/CodeEditorWindow.js
new file mode 100644
index 0000000..370d592
--- /dev/null
+++ b/engine/text_editor/CodeEditorWindow.js
@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+
+import Editor from "@monaco-editor/react";
+
+const CodeEditorWindow = ({ onChange, language, code, theme }) => {
+ const [value, setValue] = useState(code || "");
+
+ const handleEditorChange = (value) => {
+ setValue(value);
+ onChange("code", value);
+ };
+
+ return (
+
+
+
+ );
+};
+export default CodeEditorWindow;
\ No newline at end of file
diff --git a/engine/text_editor/Landing.js b/engine/text_editor/Landing.js
new file mode 100644
index 0000000..6a69985
--- /dev/null
+++ b/engine/text_editor/Landing.js
@@ -0,0 +1,152 @@
+import React, { useEffect, useState } from "react";
+import CodeEditorWindow from "./CodeEditorWindow";
+import axios from "axios";
+import { classnames } from "../utils/general";
+import { languageOptions } from "../constants/languageOptions";
+
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+import { defineTheme } from "../lib/defineTheme";
+import useKeyPress from "../hooks/useKeyPress";
+import Footer from "./Footer";
+import OutputWindow from "./OutputWindow";
+import CustomInput from "./CustomInput";
+import OutputDetails from "./OutputDetails";
+import ThemeDropdown from "./ThemeDropdown";
+import LanguagesDropdown from "./LanguagesDropdown";
+
+const javascriptDefault = `// some comment`;
+
+const Landing = () => {
+ const [code, setCode] = useState(javascriptDefault);
+ const [customInput, setCustomInput] = useState("");
+ const [outputDetails, setOutputDetails] = useState(null);
+ const [processing, setProcessing] = useState(null);
+ const [theme, setTheme] = useState("cobalt");
+ const [language, setLanguage] = useState(languageOptions[0]);
+
+ const enterPress = useKeyPress("Enter");
+ const ctrlPress = useKeyPress("Control");
+
+ const onSelectChange = (sl) => {
+ console.log("selected Option...", sl);
+ setLanguage(sl);
+ };
+
+ useEffect(() => {
+ if (enterPress && ctrlPress) {
+ console.log("enterPress", enterPress);
+ console.log("ctrlPress", ctrlPress);
+ handleCompile();
+ }
+ }, [ctrlPress, enterPress]);
+ const onChange = (action, data) => {
+ switch (action) {
+ case "code": {
+ setCode(data);
+ break;
+ }
+ default: {
+ console.warn("case not handled!", action, data);
+ }
+ }
+ };
+ const handleCompile = () => {
+ // We will come to the implementation later in the code
+ };
+
+ const checkStatus = async (token) => {
+ // We will come to the implementation later in the code
+ };
+
+ function handleThemeChange(th) {
+ // We will come to the implementation later in the code
+ }
+ useEffect(() => {
+ defineTheme("oceanic-next").then((_) =>
+ setTheme({ value: "oceanic-next", label: "Oceanic Next" })
+ );
+ }, []);
+
+ const showSuccessToast = (msg) => {
+ toast.success(msg || `Compiled Successfully!`, {
+ position: "top-right",
+ autoClose: 1000,
+ hideProgressBar: false,
+ closeOnClick: true,
+ pauseOnHover: true,
+ draggable: true,
+ progress: undefined,
+ });
+ };
+ const showErrorToast = (msg) => {
+ toast.error(msg || `Something went wrong! Please try again.`, {
+ position: "top-right",
+ autoClose: 1000,
+ hideProgressBar: false,
+ closeOnClick: true,
+ pauseOnHover: true,
+ draggable: true,
+ progress: undefined,
+ });
+ };
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {outputDetails &&
}
+
+
+
+ >
+ );
+};
+export default Landing;
\ No newline at end of file
diff --git a/engine/text_editor/LanguageDropdown.js b/engine/text_editor/LanguageDropdown.js
new file mode 100644
index 0000000..e229035
--- /dev/null
+++ b/engine/text_editor/LanguageDropdown.js
@@ -0,0 +1,18 @@
+import React from "react";
+import Select from "react-select";
+import { customStyles } from "../constants/customStyles";
+import { languageOptions } from "../constants/languageOptions";
+
+const LanguagesDropdown = ({ onSelectChange }) => {
+ return (
+