add rudimentary Text editor

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
 

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::*;

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 (
+    <div className="overlay rounded-md overflow-hidden w-full h-full shadow-4xl">
+      <Editor
+        height="85vh"
+        width={`100%`}
+        language={language || "javascript"}
+        value={value}
+        theme={theme}
+        defaultValue="// some comment"
+        onChange={handleEditorChange}
+      />
+    </div>
+  );
+};
+export default CodeEditorWindow;

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 (
+    <>
+      <ToastContainer
+        position="top-right"
+        autoClose={2000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+      />
+      <div className="h-4 w-full bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500"></div>
+      <div className="flex flex-row">
+        <div className="px-4 py-2">
+          <LanguagesDropdown onSelectChange={onSelectChange} />
+        </div>
+        <div className="px-4 py-2">
+          <ThemeDropdown handleThemeChange={handleThemeChange} theme={theme} />
+        </div>
+      </div>
+      <div className="flex flex-row space-x-4 items-start px-4 py-4">
+        <div className="flex flex-col w-full h-full justify-start items-end">
+          <CodeEditorWindow
+            code={code}
+            onChange={onChange}
+            language={language?.value}
+            theme={theme.value}
+          />
+        </div>
+
+        <div className="right-container flex flex-shrink-0 w-[30%] flex-col">
+          <OutputWindow outputDetails={outputDetails} />
+          <div className="flex flex-col items-end">
+            <CustomInput
+              customInput={customInput}
+              setCustomInput={setCustomInput}
+            />
+            <button
+              onClick={handleCompile}
+              disabled={!code}
+              className={classnames(
+                "mt-4 border-2 border-black z-10 rounded-md shadow-[5px_5px_0px_0px_rgba(0,0,0)] px-4 py-2 hover:shadow transition duration-200 bg-white flex-shrink-0",
+                !code ? "opacity-50" : ""
+              )}
+            >
+              {processing ? "Processing..." : "Compile and Execute"}
+            </button>
+          </div>
+          {outputDetails && <OutputDetails outputDetails={outputDetails} />}
+        </div>
+      </div>
+      <Footer />
+    </>
+  );
+};
+export default Landing;

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 (
+    <Select
+      placeholder={`Filter By Category`}
+      options={languageOptions}
+      styles={customStyles}
+      defaultValue={languageOptions[0]}
+      onChange={(selectedOption) => onSelectChange(selectedOption)}
+    />
+  );
+};
+
+export default LanguagesDropdown;

engine/text_editor/constants/languageOptions.js

@@ -0,0 +1,20 @@
+export const languageOptions = [
+    {
+      id: 63,
+      name: "JavaScript (Node.js 12.14.0)",
+      label: "JavaScript (Node.js 12.14.0)",
+      value: "javascript",
+    },
+    {
+      id: 45,
+      name: "Assembly (NASM 2.14.02)",
+      label: "Assembly (NASM 2.14.02)",
+      value: "assembly",
+    },  
+    {
+      id: 84,
+      name: "Visual Basic.Net (vbnc 0.0.0.5943)",
+      label: "Visual Basic.Net (vbnc 0.0.0.5943)",
+      value: "vbnet",
+    },
+  ];