small changes

ibfi-ts/src/src/App.scss

@@ -0,0 +1,128 @@
+$main-color: #282c34;
+$main-color-brighter: #323942;
+$light-color: ghostwhite;
+$medium-color: #78787f;
+
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+.App-header {
+  background-color: $main-color;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: $light-color;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+.bf-input {
+  .code-input {
+    resize: none;
+    width: 80vw;
+    height: 400px;
+    font-size: 100px;
+  }
+
+  .code-options-wrapper > * {
+    margin: 10px;
+  }
+}
+
+.code-display-wrapper {
+  max-width: 80vw;
+  font-family: monospace;
+
+  span {
+    word-wrap: break-word;
+  }
+}
+
+.memory-display-table {
+  $border: 1px solid $light-color;
+
+  th, .cell {
+    border: $border;
+  }
+
+  th, td {
+    min-width: 60px;
+    text-align: center;
+  }
+
+  .array-set-value-field {
+    min-width: 50px;
+    max-width: 100px;
+    height: 40px;
+    color: $light-color;
+    font-size: 30px;
+    background-color: $main-color-brighter;
+  }
+}
+
+.run-button {
+  height: 50px;
+  width: 200px;
+
+}
+
+.bf-run {
+  margin: 20px;
+
+
+  .speed-control-wrapper > * {
+    margin: 10px;
+  }
+
+  .small-speed-button {
+    height: 40px;
+    width: 40px;
+  }
+
+  .program-input-area {
+    resize: none;
+    width: 80vw;
+    height: 50px;
+    font-size: 30px;
+  }
+
+  .info {
+    background-color: #579ca7;
+  }
+}
+
+.bf-output {
+  .output-area {
+    resize: none;
+    width: 80vw;
+    height: 200px;
+    font-size: 20px;
+  }
+}
+
+textarea {
+  background-color: $main-color-brighter;
+  color: $light-color;
+}
+
+button {
+  background-color: $medium-color;
+  font-size: 20px;
+  border: 1px solid $main-color;
+
+  &:hover {
+    cursor: pointer;
+    background-color: $light-color;
+  }
+}

ibfi-ts/src/src/brainfuck/Interpreter.ts

@@ -0,0 +1,157 @@
+import {CodeOptions} from "../components/CodeInput";
+
+type InHandler = (() => number);
+type OutHandler = ((char: number) => void);
+
+export default class Interpreter {
+    private readonly _array: Uint8Array;
+    private _pointer: number;
+    private readonly _code: string;
+    private _programCounter: number;
+
+    private readonly _inHandler: InHandler;
+    private readonly _outHandler: OutHandler;
+
+    private readonly _options: CodeOptions;
+
+    constructor(input: [string, CodeOptions], outHandler: OutHandler, inHandler: InHandler) {
+        const buf = new ArrayBuffer(32000);
+        this._array = new Uint8Array(buf);
+        this._pointer = 0;
+
+        this._options = input[1];
+        if (input[1].minify) {
+            this._code = this.minify(input[0])
+        } else {
+            this._code = input[0];
+        }
+
+        this._programCounter = 0;
+        this._inHandler = inHandler;
+        this._outHandler = outHandler;
+    }
+
+    public next() {
+        this.execute(this._code[this._programCounter++]);
+    }
+
+    public execute(char: string) {
+        switch (char) {
+            case '+':
+                this._array[this._pointer]++;
+                break;
+            case '-':
+                this._array[this._pointer]--;
+                break;
+            case '>':
+                this._pointer++;
+                break;
+            case '<':
+                if (this._pointer === 0) {
+                    throw new Error("Cannot wrap left");
+                }
+                this._pointer--;
+                break;
+            case '.':
+                this._outHandler(this.value);
+                break;
+            case ',':
+                this.input();
+                break;
+            case '[':
+                this.loopForwards();
+                break;
+            case ']':
+                this.loopBackwards();
+                break;
+            case '•':
+                if (this._options.enableBreakpoints) {
+                    throw new Error("Breakpoint reached");
+                }
+                break;
+            case undefined:
+                this._programCounter = this._code.length;
+                break;
+            default:
+                break;
+        }
+    }
+
+    private loopForwards() {
+        if (this.value === 0) {
+            let level = 0;
+            while (this.lastInstruction !== ']' || level > -1) {
+                this._programCounter++;
+                if (this._programCounter > this._code.length) {
+                    throw new Error("Reached end of code while searching ']'");
+                }
+                if (this.lastInstruction === '[') level++;
+                else if (this.lastInstruction === ']') level--;
+            }
+        }
+    }
+
+    private loopBackwards() {
+        if (this.value !== 0) {
+            let level = 0;
+            while (this.lastInstruction !== '[' || level > -1) {
+                this._programCounter--;
+                if (this._programCounter < 0) {
+                    throw new Error("Reached start of code while searching '['");
+                }
+                if (this.lastInstruction === '[') level--;
+                else if (this.lastInstruction === ']') level++;
+            }
+        }
+    }
+
+    private input() {
+        try {
+            this._array[this._pointer] = this._inHandler();
+        } catch {
+            this._programCounter--;
+        }
+    }
+
+    get reachedEnd(): boolean {
+        return this._programCounter === this._code.length;
+    }
+
+    get lastInstruction(): string {
+        return this._code[this._programCounter - 1];
+    }
+
+    get value(): number {
+        return this._array[this._pointer];
+    }
+
+    get array(): Uint8Array {
+        return this._array;
+    }
+
+    get pointer(): number {
+        return this._pointer;
+    }
+
+    get code(): string {
+        return this._code;
+    }
+
+    get programCounter(): number {
+        return this._programCounter;
+    }
+
+    private minify(code: string): string {
+        const CHARS = ['+', '-', '<', '>', '.', ',', '[', ']'];
+        if (this._options.enableBreakpoints) {
+            CHARS.push('•');
+        }
+
+        return code.split("")
+            .filter(c => CHARS.includes(c))
+            .join("");
+    }
+}
+
+
+

ibfi-ts/src/src/components/App.tsx

@@ -0,0 +1,41 @@
+import '../App.scss';
+import CodeInput, {CodeOptions} from "./CodeInput";
+import ProgramOutput from "./ProgramOutput";
+import React, {useCallback, useState} from "react";
+import Runner from "./Runner";
+
+export const OptionContext = React.createContext<CodeOptions>({});
+
+function App() {
+    const [out, setOut] = useState("");
+    const [input, setInput] = useState<[string, CodeOptions]>(["", {}]);
+    const [running, setRunning] = useState(false);
+
+    const outHandler = useCallback((char: number) => {
+        setOut(oldOut => oldOut + String.fromCharCode(char))
+    }, []);
+
+    const runHandler = (run: boolean) => {
+        setRunning(run);
+        if (!run) {
+            setOut("");
+        }
+    }
+
+    const inputHandler = (code: string, options: CodeOptions) => setInput([code, options]);
+    return (
+        <div className="App-header">
+            <OptionContext.Provider value={input[1]}>
+                {
+                    !running && <CodeInput input={input} setInput={inputHandler}/>
+                }
+                <Runner running={running} setRunning={runHandler} code={input[0]} outHandler={outHandler}/>
+                {
+                    running && <ProgramOutput text={out}/>
+                }
+            </OptionContext.Provider>
+        </div>
+    );
+}
+
+export default App;

ibfi-ts/src/src/components/CodeDisplay.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface CodeDisplayProps {
+    code: string,
+    index: number,
+}
+
+const CodeDisplay = ({code, index}: CodeDisplayProps) => {
+
+    const firstCodePart = code.substr(0, index);
+    const secondCodePart = code.substr(index + 1, code.length - index + 1);
+
+    return (
+        <div className="code-display-wrapper">
+            <code>{firstCodePart}</code>
+            <code style={{backgroundColor: "red"}}>{code[index] || " "}</code>
+            <code>{secondCodePart}</code>
+        </div>
+    );
+};
+
+export default CodeDisplay;

ibfi-ts/src/src/components/CodeInput.tsx

@@ -0,0 +1,83 @@
+import React, {ChangeEvent, useState} from 'react';
+import presets from "../presets.json";
+
+export interface CodeOptions {
+    minify?: boolean,
+    directStart?: boolean,
+    startSuperSpeed?: boolean,
+    enableBreakpoints?: boolean
+    asciiView?: boolean
+}
+
+interface CodeInputProps {
+    setInput: ((code: string, options: CodeOptions) => void),
+    input: [string, CodeOptions]
+}
+
+const codeOptions: Array<[string, keyof CodeOptions]> = [
+    ["Minify Code", "minify"],
+    ["Start directly", "directStart"],
+    ["Start in blocking mode", "startSuperSpeed"],
+    ["Breakpoints (•)", "enableBreakpoints"],
+    ["Show ASCII in memory", "asciiView"]
+]
+
+const CodeInput = ({input: [code, options], setInput}: CodeInputProps) => {
+    const [fontSize, setFontSize] = useState(40);
+
+    const setPreset = (name: keyof typeof presets) => () => {
+        setInput(presets[name], options);
+    }
+
+    const changeHandler = (name: keyof CodeOptions) => (event: ChangeEvent<HTMLInputElement>) => {
+        setInput(code, {...options, [name]: event.target.checked})
+    }
+
+    return (
+        <div className="bf-input">
+            <div className="code-options-wrapper">
+                <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>
+
+                {codeOptions.map(([display, id]) =>
+                    <CodeOption displayName={display} name={id} 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>
+                <div>Presets</div>
+                <div>
+                    <button onClick={setPreset("helloworld")}>Hello World</button>
+                    <button onClick={setPreset("hanoi")}>Towers of Hanoi</button>
+                    <button onClick={setPreset("quine")}>Quine</button>
+                    <button onClick={setPreset("gameoflife")}>Game Of Life</button>
+                    <button onClick={setPreset("benchmark")}>Benchmark</button>
+                    <button onClick={setPreset("fizzbuzz")}>Fizzbuzz</button>
+                </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) => (
+    <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/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/src/components/RunDisplay.tsx

@@ -0,0 +1,118 @@
+import React, {useContext, useRef, useState} from 'react';
+import Interpreter from "../brainfuck/Interpreter";
+import {OptionContext} from "./App";
+
+const MAX_TABLE_COLUMNS = 20;
+
+interface RunDisplayProps {
+    interpreter: Interpreter,
+}
+
+const RunDisplay = ({interpreter}: RunDisplayProps) => {
+    const options = useContext(OptionContext);
+
+    const index = interpreter.pointer;
+
+    let offset: number;
+
+    if (index < MAX_TABLE_COLUMNS / 2) {
+        offset = 0;
+    } else {
+        offset = index - MAX_TABLE_COLUMNS / 2;
+    }
+
+    const arrayWithIndex = Array(MAX_TABLE_COLUMNS).fill(0)
+        .map((_, i) => i + offset);
+
+    return (
+        <div>
+            <table className="memory-display-table">
+                <thead>
+                <tr>
+                    {
+                        arrayWithIndex.map((n => <th key={n}>{n}</th>))
+                    }
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    {
+                        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"
+                                                      key={n}>{interpreter.pointer === n && "^"}</td>)
+                    }
+                </tr>
+                </tbody>
+            </table>
+        </div>
+    );
+};
+
+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] + "");
+
+    const inputField = useRef<HTMLInputElement>(null);
+
+    const saveAndQuit = () => {
+        interpreter.array[index] = +(input);
+        setIsEditing(false);
+    }
+
+    const click = () => {
+        setIsEditing(true);
+        inputField.current?.select();
+    }
+
+    const keyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        console.log("key", e.key);
+        if (e.key === "Escape") {
+            setIsEditing(false);
+        } else if (e.key === "Enter") {
+            saveAndQuit();
+        }
+    }
+
+    const content = ascii ?
+        String.fromCharCode(interpreter.array[index])
+        :
+        interpreter.array[index];
+
+    return (
+        <td onClick={click} className="cell">
+            {
+                isEditing && !ascii ?
+                    <input onKeyDown={keyDown}
+                           className="array-set-value-field"
+                           ref={inputField}
+                           onChange={e => setInput(e.target.value)}
+                           value={input}
+                           onBlur={saveAndQuit}
+                           autoFocus
+                    />
+                    :
+                    content
+            }
+        </td>
+    );
+}
+
+export default RunDisplay;

ibfi-ts/src/src/components/Runner.tsx

@@ -0,0 +1,189 @@
+import React, {useCallback, useContext, useEffect, useRef, useState} from 'react';
+import Interpreter from "../brainfuck/Interpreter";
+import CodeDisplay from "./CodeDisplay";
+import RunDisplay from "./RunDisplay";
+import {OptionContext} from "./App";
+
+
+interface RunInfoProps {
+    running: boolean,
+    setRunning: (running: boolean) => void,
+    code: string,
+    outHandler: (char: number) => void,
+}
+
+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 rerender = () => setRerenderNumber(n => n + 1);
+
+    const options = useContext(OptionContext);
+
+    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 startHandler = useCallback(() => {
+        if (options.directStart) {
+            if (options.startSuperSpeed) {
+                setSpeed(-1);
+            } else {
+                setSpeed(100);
+            }
+        } else {
+            setSpeed(0);
+        }
+
+        setStartTime(Date.now);
+        setInterpreter(new Interpreter([code, options], outHandler, inputHandler));
+        setRunning(false);
+        setRunning(true);
+    }, [options, code, outHandler, setRunning]);
+
+    const stopHandler = () => {
+        setRunning(false);
+        setInfo(null);
+    }
+
+    const nextHandler = useCallback(() => {
+        setInfo(null);
+        try {
+            interpreter?.next();
+        } catch (e) {
+            setInfo(e.message);
+            setSpeed(0);
+        }
+        if (interpreter?.reachedEnd) {
+            setSpeed(0);
+            setInfo(`Finished Execution. Took ${(Date.now() - startTime) / 1000}s`)
+        }
+        rerender();
+    }, [interpreter, startTime]);
+
+    const runBlocking = useCallback(() => {
+        try {
+            while (speed === -1 && !interpreter?.reachedEnd) {
+                interpreter?.next();
+            }
+            setSpeed(0);
+            setInfo(`Finished Execution. Took ${(Date.now() - startTime) / 1000}s`)
+        } catch (e) {
+            setInfo(e.message);
+            setSpeed(0);
+        }
+    }, [speed, interpreter, startTime]);
+
+
+    useEffect(() => {
+        if (running) {
+            if (speed === 0) {
+                return;
+            }
+
+            if (speed > 0) {
+                const interval = setInterval(() => {
+                    nextHandler();
+                }, 1000 / (speed * 10));
+                return () => clearInterval(interval);
+            }
+            runBlocking();
+        }
+    }, [runBlocking, running, nextHandler, speed]);
+
+    return (
+        <div className="bf-run">
+            {
+                running && interpreter && <>
+                    <CodeDisplay code={interpreter.code} index={interpreter.programCounter}/>
+                    <RunDisplay interpreter={interpreter}/>
+                </>
+            }
+            <div>
+                {running && <button className="run-button" onClick={stopHandler}>Back</button>}
+                <button className="run-button" onClick={startHandler}>{running ? "Restart" : "Start"}</button>
+                {running && <button className="run-button" onClick={nextHandler}>Next</button>}
+            </div>
+            {
+                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 className="speed-control-wrapper">
+            <label htmlFor="run-info-speed-range">Speed</label>
+            <input type="range" id="run-info-speed-range" value={speed}
+                   onChange={e => setSpeed(+e.target.value)}/>
+            <span> {speed}</span>
+            <span>
+                <button onClick={() => setSpeed(s => s === 0 ? 0 : s - 1)}
+                        className="small-speed-button">-</button>
+                <button onClick={() => setSpeed(0)}
+                        className="small-speed-button">0</button>
+                <button onClick={() => setSpeed(s => s === 100 ? 100 : s + 1)}
+                        className="small-speed-button">+</button>
+            </span>
+            <span>
+                <label>Superspeed Mode (blocking)</label>
+                <input id="superspeed-mode-check" type="checkbox" checked={speed === -1} onChange={() => setSpeed(-1)}/>
+            </span>
+        </div>
+    )
+}
+
+const ManualControlButtons = ({interpreter, rerender}: { interpreter: Interpreter, rerender: (() => void) }) => {
+
+    const run = (char: string) => {
+        try {
+            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;

ibfi-ts/src/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

ibfi-ts/src/src/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './components/App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);

ibfi-ts/src/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />