input

ibfi-ts/src/components/CodeDisplay.tsx

@@ -13,7 +13,7 @@ const CodeDisplay = ({code, index}: CodeDisplayProps) => {
     return (
         <div className="code-display-wrapper">
             <span>{firstCodePart}</span>
-            <span style={{backgroundColor: "red"}}>{code[index]}</span>
+            <span style={{backgroundColor: "red"}}>{code[index] || " "}</span>
             <span>{secondCodePart}</span>
         </div>
     );

ibfi-ts/src/components/CodeInput.tsx

@@ -1,27 +1,48 @@
 import React, {useState} from 'react';
 
-interface CodeInputProps {
-    setInput: ((input: string) => void),
+export interface CodeOptions {
+    minify?: boolean
 }
 
-const CodeInput = ({setInput}: CodeInputProps) => {
+interface CodeInputProps {
+    setInput: ((code: string, options: CodeOptions) => void),
+    code: string
+}
+
+const CodeInput = ({code, setInput}: CodeInputProps) => {
     const [fontSize, setFontSize] = useState(40);
 
+    const [codeOptions, setCodeOptions] = useState<CodeOptions>({});
+
+
     const setStart = () => {
         setInput(
-            "++++++++[>++++[>++>+++>+++>+<<<<-]>+>+>->>+[<]<-]>>.>---.+++++++..+++.>>.<-.<.+++.------.--------.>>+.>++.");
+            "++++++++[>++++[>++>+++>+++>+<<<<-]>+>+>->>+[<]<-]>>.>---.+++++++..+++.>>.<-.<.+++.------.--------.>>+.>++.",
+            codeOptions);
+    }
+
+    const changeMinify = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setCodeOptions(old => ({...old, minify: e.target.checked}))
+        setInput(code, codeOptions);
     }
 
     return (
         <div>
             <div className="bf-input">
                 <div>
+                <span>
                     <label htmlFor="bf-input-fontsize-range">Font Size</label>
                     <input type="range" id="bf-input-fontsize-range" onChange={v => setFontSize(+v.target.value)}/>
-                    <button onClick={setStart}>set init</button>
+                </span>
+                    <input type="checkbox" checked={codeOptions.minify} id="input-options-minify" onChange={changeMinify}/>
+                    <label htmlFor="input-options-minify">Minify Code</label>
                 </div>
-                <textarea onChange={e => setInput(e.target.value)} style={{fontSize}} className="code-input"
+                <textarea value={code} onChange={e => setInput(e.target.value, codeOptions)} style={{fontSize}}
+                          className="code-input"
                           placeholder="Input your code here..."/>
+                <div>
+                    <button onClick={setStart}>Set Hello World</button>
+                </div>
             </div>
         </div>
     );

ibfi-ts/src/components/RunDisplay.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Interpreter from "../brainfuck/Interpreter";
 
-const MAX_TABLE_COLUMNS = 30;
+const MAX_TABLE_COLUMNS = 20;
 
 interface RunDisplayProps {
     interpreter: Interpreter,

ibfi-ts/src/components/Runner.tsx

@@ -1,33 +1,47 @@
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import Interpreter from "../brainfuck/Interpreter";
 import CodeDisplay from "./CodeDisplay";
 import RunDisplay from "./RunDisplay";
+import {CodeOptions} from "./CodeInput";
 
 interface RunInfoProps {
-    input: string,
+    input: [string, CodeOptions],
     setRunning: (running: boolean) => void,
     running: boolean
-    inHandler: () => number,
     outHandler: (char: number) => void,
 }
 
-const Runner = ({setRunning, running, inHandler, outHandler, input}: RunInfoProps) => {
+const Runner = ({setRunning, running, outHandler, input}: RunInfoProps) => {
     const [speed, setSpeed] = useState(0);
     const [interpreter, setInterpreter] = useState<Interpreter | null>(null);
     const [error, setError] = useState<string | null>(null);
 
     const [, setRerenderNumber] = useState(0);
 
-    const errorHandler = (msg: string) => {
-        setError(msg);
+    const inputArea = useRef<HTMLTextAreaElement>(null);
+
+
+    const inputHandler = () => {
+        if (!inputArea.current) {
+            throw new Error("Could not read input")
+        }
+        const value = inputArea.current.value;
+        if (value.length < 1) {
+            throw new Error("No input found");
+        }
+        const char = value.charCodeAt(0);
+        inputArea.current.value = value.substr(1);
+        return char;
     }
 
+    const errorHandler = (msg: string) => setError(msg);
+
     const startHandler = useCallback(() => {
         setSpeed(0);
-        setInterpreter(new Interpreter(input, outHandler, inHandler, errorHandler));
+        setInterpreter(new Interpreter(input, outHandler, inputHandler, errorHandler));
         setRunning(false);
         setRunning(true);
-    }, [input, inHandler, outHandler, setRunning]);
+    }, [input, outHandler, setRunning]);
 
     const stopHandler = () => setRunning(false);
 
@@ -58,7 +72,7 @@ const Runner = ({setRunning, running, inHandler, outHandler, input}: RunInfoProp
         <div className="bf-run">
             {
                 running && interpreter && <>
-                    <CodeDisplay code={input} index={interpreter.codePointer}/>
+                    <CodeDisplay code={interpreter.code} index={interpreter.programCounter}/>
                     <RunDisplay interpreter={interpreter}/>
                 </>
             }
@@ -78,7 +92,13 @@ const Runner = ({setRunning, running, inHandler, outHandler, input}: RunInfoProp
                 </>
             }
             {
-                error && <div className="error">Error: '{error}'</div>
+                error && <div className="error">{error}</div>
+            }
+            {
+                running && <div>
+                    <div>Input:</div>
+                    <textarea className="program-input-area" ref={inputArea}/>
+                </div>
             }
         </div>
     );