better control

ibfi-ts/README.md

@@ -17,9 +17,10 @@ stopping it at any point in your program to see what went wrong.
 * manual stepping
 * breakpoints
 * error messages
-
+* seeing ASCII characters in memory
+* manual code input
 
 ### Future features
-* seeing ASCII characters in memory
 * fast excecution mode (no debugging info)
 * better speed control
+* (limited) backstepping

ibfi-ts/src/App.tsx

@@ -4,6 +4,8 @@ import ProgramOutput from "./components/ProgramOutput";
 import React, {useCallback, useState} from "react";
 import Runner from "./components/Runner";
 
+export const OptionContext = React.createContext<CodeOptions>({});
+
 function App() {
     const [out, setOut] = useState("");
     const [input, setInput] = useState<[string, CodeOptions]>(["", {}]);
@@ -20,16 +22,19 @@ function App() {
         }
     }
 
+
     const inputHandler = (code: string, options: CodeOptions) => setInput([code, options]);
     return (
         <div className="App-header">
+            <OptionContext.Provider value={input[1]}>
                 {
-                !running && <CodeInput code={input[0]} setInput={inputHandler}/>
+                    !running && <CodeInput input={input} setInput={inputHandler}/>
                 }
-            <Runner running={running} setRunning={runHandler} input={input} outHandler={outHandler}/>
+                <Runner running={running} setRunning={runHandler} code={input[0]} outHandler={outHandler}/>
                 {
                     running && <ProgramOutput text={out}/>
                 }
+            </OptionContext.Provider>
         </div>
     );
 }

ibfi-ts/src/brainfuck/Interpreter.ts

@@ -2,7 +2,6 @@ import {CodeOptions} from "../components/CodeInput";
 
 type InHandler = (() => number);
 type OutHandler = ((char: number) => void);
-type ErrorHandler = ((msg: string) => void);
 
 export default class Interpreter {
     private readonly _array: Uint8Array;
@@ -33,7 +32,11 @@ export default class Interpreter {
     }
 
     public next() {
-        switch (this._code[this._programCounter++]) {
+        this.execute(this._code[this._programCounter++]);
+    }
+
+    public execute(char: string) {
+        switch (char) {
             case '+':
                 this._array[this._pointer]++;
                 break;
@@ -67,7 +70,7 @@ export default class Interpreter {
                 }
                 break;
             case undefined:
-                this._pointer = this._code.length;
+                this._programCounter = this._code.length;
                 break;
             default:
                 break;
@@ -112,7 +115,7 @@ export default class Interpreter {
     }
 
     public prev() {
-        // -
+        // - will add some day
     }
 
     get reachedEnd(): boolean {

ibfi-ts/src/components/CodeInput.tsx

@@ -1,67 +1,47 @@
-import React, {useState} from 'react';
+import React, {ChangeEvent, useState} from 'react';
 import presets from "../presets.json";
 
 export interface CodeOptions {
     minify?: boolean,
     directStart?: boolean,
     enableBreakpoints?: boolean
+    asciiView?: boolean
 }
 
 interface CodeInputProps {
     setInput: ((code: string, options: CodeOptions) => void),
-    code: string
+    input: [string, CodeOptions]
 }
 
-const CodeInput = ({code, setInput}: CodeInputProps) => {
+const CodeInput = ({input: [code, options], setInput}: CodeInputProps) => {
     const [fontSize, setFontSize] = useState(40);
 
-    const [codeOptions, setCodeOptions] = useState<CodeOptions>({});
-
-
     const setPreset = (name: keyof typeof presets) => () => {
-        setInput(presets[name], codeOptions);
+        setInput(presets[name], options);
     }
 
-    const changeMinify = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const changeHandler = (name: keyof CodeOptions) => (event: ChangeEvent<HTMLInputElement>) => {
-        setCodeOptions(old => ({...old, minify: e.target.checked}))
+        setInput(code, {...options, [name]: event.target.checked})
-        setInput(code, codeOptions);
-    }
-
-    const changeStart = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setCodeOptions(old => ({...old, directStart: e.target.checked}))
-        setInput(code, codeOptions);
-    }
-
-    const changeBreakpoint = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setCodeOptions(old => ({...old, enableBreakpoints: e.target.checked}))
-        setInput(code, codeOptions);
     }
 
     return (
-        <div>
         <div className="bf-input">
             <div>
-                <span>
+                <div>
                     <label htmlFor="bf-input-fontsize-range">Font Size</label>
                     <input type="range" id="bf-input-fontsize-range" onChange={v => setFontSize(+v.target.value)}/>
-                </span>
-                    <span>
-                    <input type="checkbox" checked={codeOptions.minify} id="input-options-minify"
-                           onChange={changeMinify}/>
-                    <label htmlFor="input-options-minify">Minify Code</label>
-                    </span>
-                    <span>
-                    <input type="checkbox" checked={codeOptions.directStart} id="input-options-directstart"
-                           onChange={changeStart}/>
-                    <label htmlFor="input-options-directstart">Start Directly</label>
-                    </span>
-                    <span>
-                    <input type="checkbox" checked={codeOptions.enableBreakpoints} id="input-options-enableBreakpoints"
-                           onChange={changeBreakpoint}/>
-                    <label htmlFor="input-options-enableBreakpoints">Breakpoints (•)</label>
-                    </span>
                 </div>
-                <textarea value={code} onChange={e => setInput(e.target.value, codeOptions)} style={{fontSize}}
+
+                <CodeOption displayName="Minify Code" name="minify" options={options} onChange={changeHandler}/>
+                <CodeOption displayName="Start Directly" name="directStart" options={options}
+                            onChange={changeHandler}/>
+                <CodeOption displayName="Breakpoints (•)" name="enableBreakpoints" options={options}
+                            onChange={changeHandler}/>
+                <CodeOption displayName="Show ASCII in memory" name="asciiView" options={options}
+                            onChange={changeHandler}/>
+
+            </div>
+            <textarea value={code} onChange={e => setInput(e.target.value, options)} style={{fontSize}}
                       className="code-input"
                       placeholder="Input your code here..."/>
             <div>
@@ -76,8 +56,24 @@ const CodeInput = ({code, setInput}: CodeInputProps) => {
                 </div>
             </div>
         </div>
-        </div>
     );
 };
 
+interface CodeOptionProps {
+    displayName: string,
+    name: keyof CodeOptions,
+    options: CodeOptions,
+    onChange: (name: keyof CodeOptions) => (event: ChangeEvent<HTMLInputElement>) => void,
+}
+
+const CodeOption = ({displayName, name, options, onChange}: CodeOptionProps) => {
+    return (
+        <span>
+        <input type="checkbox" checked={options[name]} id={`input-options-${name}`}
+               onChange={onChange(name)}/>
+        <label htmlFor={`input-options-${name}`}>{displayName}</label>
+        </span>
+    );
+}
+
 export default CodeInput;

ibfi-ts/src/components/RunDisplay.tsx

@@ -1,5 +1,6 @@
-import React, {useRef, useState} from 'react';
+import React, {useContext, useRef, useState} from 'react';
 import Interpreter from "../brainfuck/Interpreter";
+import {OptionContext} from "../App";
 
 const MAX_TABLE_COLUMNS = 20;
 
@@ -8,6 +9,7 @@ interface RunDisplayProps {
 }
 
 const RunDisplay = ({interpreter}: RunDisplayProps) => {
+    const options = useContext(OptionContext);
 
     const index = interpreter.pointer;
 
@@ -38,6 +40,14 @@ const RunDisplay = ({interpreter}: RunDisplayProps) => {
                         arrayWithIndex.map((n) => <MemoryCell key={n} index={n} interpreter={interpreter}/>)
                     }
                 </tr>
+                {
+                    options.asciiView &&
+                    <tr>
+                        {
+                            arrayWithIndex.map((n) => <MemoryCell key={n} index={n} interpreter={interpreter} ascii/>)
+                        }
+                    </tr>
+                }
                 <tr>
                     {
                         arrayWithIndex.map((n) => <td className="pointer"
@@ -50,7 +60,13 @@ const RunDisplay = ({interpreter}: RunDisplayProps) => {
     );
 };
 
-const MemoryCell = ({index, interpreter}: { index: number, interpreter: Interpreter }) => {
+interface MemoryCellProps {
+    index: number,
+    interpreter: Interpreter,
+    ascii?: boolean,
+}
+
+const MemoryCell = ({index, interpreter, ascii}: MemoryCellProps) => {
     const [isEditing, setIsEditing] = useState(false);
     const [input, setInput] = useState(interpreter.array[index] + "");
 
@@ -75,10 +91,15 @@ const MemoryCell = ({index, interpreter}: { index: number, interpreter: Interpre
         }
     }
 
+    const content = ascii ?
+        String.fromCharCode(interpreter.array[index])
+        :
+        interpreter.array[index];
+
     return (
         <td onClick={click} className="cell">
             {
-                isEditing ?
+                isEditing && !ascii ?
                     <input onKeyDown={keyDown}
                            className="array-set-value-field"
                            ref={inputField}
@@ -88,7 +109,7 @@ const MemoryCell = ({index, interpreter}: { index: number, interpreter: Interpre
                            autoFocus
                     />
                     :
-                    interpreter.array[index]
+                    content
             }
         </td>
     );

ibfi-ts/src/components/Runner.tsx

@@ -1,24 +1,27 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {useCallback, useContext, useEffect, useRef, useState} from 'react';
 import Interpreter from "../brainfuck/Interpreter";
 import CodeDisplay from "./CodeDisplay";
 import RunDisplay from "./RunDisplay";
-import {CodeOptions} from "./CodeInput";
+import {OptionContext} from "../App";
 
 interface RunInfoProps {
-    input: [string, CodeOptions],
+    code: string,
     setRunning: (running: boolean) => void,
     running: boolean
     outHandler: (char: number) => void,
 }
 
-const Runner = ({setRunning, running, outHandler, input}: RunInfoProps) => {
+const Runner = ({setRunning, running, outHandler, code}: RunInfoProps) => {
     const [speed, setSpeed] = useState(0);
     const [interpreter, setInterpreter] = useState<Interpreter | null>(null);
     const [info, setInfo] = useState<string | null>(null);
     const [startTime, setStartTime] = useState(0);
 
-
     const [, setRerenderNumber] = useState(0);
+    const options = useContext(OptionContext);
+
+
+    const rerender = () => setRerenderNumber(n => n + 1);
 
     const inputArea = useRef<HTMLTextAreaElement>(null);
 
@@ -37,17 +40,17 @@ const Runner = ({setRunning, running, outHandler, input}: RunInfoProps) => {
     }
 
     const startHandler = useCallback(() => {
-        if (input[1].directStart) {
+        if (options.directStart) {
             setSpeed(100);
         } else {
             setSpeed(0);
         }
 
         setStartTime(Date.now);
-        setInterpreter(new Interpreter(input, outHandler, inputHandler));
+        setInterpreter(new Interpreter([code, options], outHandler, inputHandler));
         setRunning(false);
         setRunning(true);
-    }, [input, outHandler, setRunning]);
+    }, [options, code, outHandler, setRunning]);
 
     const stopHandler = () => {
         setRunning(false);
@@ -66,7 +69,7 @@ const Runner = ({setRunning, running, outHandler, input}: RunInfoProps) => {
             setSpeed(0);
             setInfo(`Finished Execution. Took ${(Date.now() - startTime) / 1000}s`)
         }
-        setRerenderNumber(n => n + 1);
+        rerender();
     }, [interpreter, startTime]);
 
     useEffect(() => {
@@ -98,7 +101,31 @@ const Runner = ({setRunning, running, outHandler, input}: RunInfoProps) => {
                 {running && <button onClick={nextHandler}>Next</button>}
             </div>
             {
-                running &&
+                running && interpreter &&
+                <>
+                    <SpeedControl speed={speed} setSpeed={setSpeed}/>
+                    <ManualControlButtons interpreter={interpreter} rerender={rerender}/>
+                </>
+            }
+            {info && <div className="info">{info}</div>}
+            {
+                running && <div>
+                    <div>Input:</div>
+                    <textarea className="program-input-area" ref={inputArea}/>
+                </div>
+            }
+        </div>
+    );
+};
+
+interface SpeedControlProps {
+    speed: number,
+    setSpeed: React.Dispatch<React.SetStateAction<number>>,
+}
+
+const SpeedControl = ({speed, setSpeed}: SpeedControlProps) => {
+
+    return (
         <div>
             <label htmlFor="run-info-speed-range">Speed</label>
             <input type="range" id="run-info-speed-range" value={speed}
@@ -113,16 +140,28 @@ const Runner = ({setRunning, running, outHandler, input}: RunInfoProps) => {
                         className="small-speed-button">+</button>
             </span>
         </div>
+    )
 }
-            {info && <div className="info">{info}</div>}
+
-            {
+const ManualControlButtons = ({interpreter, rerender}: { interpreter: Interpreter, rerender: (() => void) }) => {
-                running && <div>
+
-                    <div>Input:</div>
+    const run = (char: string) => {
-                    <textarea className="program-input-area" ref={inputArea}/>
+        try {
-                </div>
+            interpreter.execute(char);
+        } catch {
         }
+        rerender();
+    }
+
+    return (
+        <div>
+            <button onClick={() => run('<')} className="small-speed-button">&lt;</button>
+            <button onClick={() => run('>')} className="small-speed-button">&gt;</button>
+            <button onClick={() => run('-')} className="small-speed-button">-</button>
+            <button onClick={() => run('+')} className="small-speed-button">+</button>
+            <button onClick={() => run('.')} className="small-speed-button">.</button>
         </div>
-    );
+    )
-};
+}
 
 export default Runner;

package.json

@@ -1,5 +0,0 @@
-{
-  "dependencies": {
-    "gh-pages": "^3.2.3"
-  }
-}