Command framework

components/REPL/REPLHistory.tsx

@@ -0,0 +1,10 @@
+import { NextPage } from "next";
+import styles from "../../styles/REPL/REPLHistory.module.css";
+
+const REPLHistory: NextPage<{history: string[]}> = ({history}) => {
+    return <div className={styles.container}>
+        { history.map((value, idx) => <div className={styles.line} key={idx}>{value === "" ? "\u00A0" : value}</div>) }
+    </div>;
+};
+
+export default REPLHistory;

components/REPL/REPLInput.tsx

@@ -1,7 +1,7 @@
 import type { NextPage } from "next";
 import React from "react";
-import { commandCompletion } from "../../lib/commands";
-import styles from "../../styles/REPLInput.module.css";
+import { commandCompletion, executeCommand } from "../../lib/commands";
+import styles from "../../styles/REPL/REPLInput.module.css";
 
 const REPLInput: NextPage<{historyCallback: CallableFunction}> = ({historyCallback}) => {
     const typed = React.createRef<HTMLSpanElement>();
@@ -25,7 +25,16 @@ const REPLInput: NextPage<{historyCallback: CallableFunction}> = ({historyCallba
             if(typed.current) typed.current.innerHTML = currentCmd[justTabbed % currentCmd.length];
             if(completion.current) completion.current.innerHTML = "";
             setJustTabbed(justTabbed + 1);
+        } else setJustTabbed(0);
+
+        if (e.key === "Enter") {
+            const result = executeCommand((e.target as HTMLInputElement).value);
+            (e.target as HTMLInputElement).value = "";
+            if(typed.current) typed.current.innerHTML = "";
+            if(completion.current) completion.current.innerHTML = "";
+            historyCallback(result);
         }
+
         return false;
     };
 

components/REPL/index.tsx

@@ -1,9 +1,15 @@
-import { useCallback, useState } from "react";
+import { useState } from "react";
 import REPLInput from "./REPLInput";
+import REPLHistory from "./REPLHistory";
 
 const REPL = () => {
-    const [history, manipulateHistory] = useState([]);
-    return <REPLInput historyCallback={manipulateHistory} />;
+    const [history, manipulateHistory] = useState<string[]>([]);
+    const onCommandExecuted = (result: string[]) => manipulateHistory(result.reverse().concat(history).slice(0, 1000));
+
+    return (<>
+        <REPLHistory history={history} />
+        <REPLInput historyCallback={onCommandExecuted} />
+    </>);
 };
 
 export default REPL;