diff --git a/ibfi-ts/package.json b/ibfi-ts/package.json index a563502..7a9698b 100644 --- a/ibfi-ts/package.json +++ b/ibfi-ts/package.json @@ -10,6 +10,7 @@ "@types/node": "^12.0.0", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", + "node-sass": "^6.0.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", diff --git a/ibfi-ts/src/App.scss b/ibfi-ts/src/App.scss index aabd829..7d50644 100644 --- a/ibfi-ts/src/App.scss +++ b/ibfi-ts/src/App.scss @@ -1,3 +1,7 @@ +$main-color: #282c34; +$main-color-brighter: #323942; +$font-color: ghostwhite; + .App { text-align: center; } @@ -8,16 +12,48 @@ } .App-header { - background-color: #282c34; + background-color: $main-color; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); - color: white; + color: $font-color; } .App-link { color: #61dafb; +} + +.bf-input { + .code-input { + resize: none; + width: 80vw; + height: 400px; + font-size: 100px; + } +} + +.bf-run { + margin: 20px; + + button { + height: 50px; + width: 200px; + } +} + +.bf-output { + .output-area { + resize: none; + width: 80vw; + height: 200px; + font-size: 20px; + } +} + +textarea { + background-color: $main-color-brighter; + color: $font-color; } \ No newline at end of file diff --git a/ibfi-ts/src/App.tsx b/ibfi-ts/src/App.tsx index 11fa52b..f78223e 100644 --- a/ibfi-ts/src/App.tsx +++ b/ibfi-ts/src/App.tsx @@ -1,13 +1,35 @@ import './App.scss'; +import CodeInput from "./components/CodeInput"; +import ProgramOutput from "./components/ProgramOutput"; +import React, {useState} from "react"; +import Interpreter from "./brainfuck/Interpreter"; +import RunInfo from "./components/RunInfo"; function App() { + const [interpreter, setInterpreter] = useState(null); + + const [out, setOut] = useState(""); + const [input, setInput] = useState(""); + + const outHandler = (char: number) => { + setOut(out => out + String.fromCharCode(char)) + } + + const inHandler = (): number => { + return 65; + } + + const start = () => setInterpreter(new Interpreter(input, outHandler, inHandler)); + const next = () => interpreter?.next(); + const prev = () => interpreter?.prev(); + return (
-
-