Implement a basic input/output console for printing and reading.

.gitignore

@@ -17,7 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
-
+.idea
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

package.json

@@ -12,7 +12,8 @@
     "react-ace": "^8.0.0",
     "react-d3-tree": "^1.16.1",
     "react-dom": "^16.13.0",
-    "react-scripts": "3.4.0"
+    "react-scripts": "3.4.0",
+    "terminal-in-react": "^4.3.1"
   },
   "scripts": {
     "start": "react-scripts start",

public/index.html

@@ -15,6 +15,10 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <script>
+      var EMULATOR_CONSOLE_READ = "";
+      var EMULATOR_IS_INPUT = false;
+    </script>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.js

@@ -6,10 +6,10 @@ import Tree from 'react-d3-tree';
 import ButtonStrip from './view/ButonStrip'
 import CodeEditor from './view/CodeEditor'
 import UserIO from './view/UserIO'
+import Terminal from 'terminal-in-react';
 
 import {sendWaccCode, astMetaToGraphData} from './Comm'
 
-import './App.css';
 
 class App extends React.Component {
   constructor(props) {
@@ -33,6 +33,12 @@ class App extends React.Component {
     })
   }
 
+  readInputCallBack = (input) => {
+
+    console.log(test)
+    test = "";
+  }
+
   processWaccCode = (code) => {
     let rsp = sendWaccCode(code)
     let graph = astMetaToGraphData(rsp.astMeta)
@@ -49,7 +55,8 @@ class App extends React.Component {
       <div className="App">
         <ButtonStrip
           onCompileClick={(e) => { this.processWaccCode(this.state.wacc.code) }}
-          onStepJsClick={(e) => { this.setState({js: {code: "Hello World!"}}) }} />
+          onStepJsClick={(e) => { this.setState({js: {code: "Hello World!"}}) }}
+          onStepOverAstClick = {(e) => { this.readInputCallBack(e)}}/>
 
         <div className="App-code-editors">
           <CodeEditor
@@ -74,6 +81,9 @@ class App extends React.Component {
             data={this.state.graphData}
             orientation="vertical" />
         </div>
+        <div id="inputoutput">
+          <Terminal commandPassThrough={cmd => {test = cmd[0]}} watchConsoleLogging/>
+        </div>
 
         <UserIO />
       </div>

src/index.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
-
+export var test = ""
 ReactDOM.render(<App />, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change