From 8d6bb42e83fd983593945444df8bc75a17f44257 Mon Sep 17 00:00:00 2001 From: GhostedGaming Date: Tue, 24 Dec 2024 21:51:56 -0500 Subject: [PATCH] add rudimentary Text editor --- engine/Cargo.toml | 3 + engine/src/core/repl/Re-exports.rs | 9 ++ engine/text_editor/CodeEditorWindow.js | 27 ++++ engine/text_editor/Landing.js | 152 ++++++++++++++++++ engine/text_editor/LanguageDropdown.js | 18 +++ .../text_editor/constants/languageOptions.js | 20 +++ 6 files changed, 229 insertions(+) create mode 100644 engine/src/core/repl/Re-exports.rs create mode 100644 engine/text_editor/CodeEditorWindow.js create mode 100644 engine/text_editor/Landing.js create mode 100644 engine/text_editor/LanguageDropdown.js create mode 100644 engine/text_editor/constants/languageOptions.js 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 && } +
+
+