interpreter

ibfi-ts/src/components/CodeInput.tsx

@@ -0,0 +1,23 @@
+import React, {useState} from 'react';
+
+interface CodeInputProps {
+    setInput: ((input: string) => void),
+}
+
+const CodeInput = ({setInput}: CodeInputProps) => {
+    const [fontSize, setFontSize] = useState(40);
+
+    return (
+        <div>
+            <div className="bf-input">
+                <div>
+                    <label htmlFor="bf-input-fontsize-range">Font Size</label>
+                    <input type="range" id="bf-input-fontsize-range" onChange={v => setFontSize(+v.target.value)}/>
+                </div>
+                <textarea onChange={e => setInput(e.target.value)} style={{fontSize}} className="code-input" placeholder="Input your code here..."/>
+            </div>
+        </div>
+    );
+};
+
+export default CodeInput;

ibfi-ts/src/components/ProgramOutput.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface ProgramOutputProps {
+    text: string
+}
+
+const ProgramOutput = ({text}: ProgramOutputProps) => {
+    return (
+        <div className="bf-output">
+            <textarea readOnly className="output-area" value={text}/>
+        </div>
+    );
+};
+
+export default ProgramOutput;

ibfi-ts/src/components/RunInfo.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Interpreter from "../brainfuck/Interpreter";
+
+interface RunInfoProps {
+    nextHandler: () => void,
+    prevHandler: () => void,
+    startHandler: () => void,
+    interpreter: Interpreter | null,
+}
+
+const RunInfo = ({interpreter, ...props}: RunInfoProps) => {
+        return (
+            <div className="bf-run">
+                <div>
+                    <button onClick={props.startHandler}>Start</button>
+                    <button onClick={props.nextHandler}>Next</button>
+                    <button onClick={props.prevHandler}>Previous</button>
+                </div>
+
+                {interpreter &&
+                <div>Pointer: {interpreter.pointer} value {interpreter.value}</div>
+                }
+            </div>
+        );
+    }
+;
+
+export default RunInfo;