set up key handling for commands.js to process later

BoSLOO.pyproj

@@ -109,8 +109,10 @@
     <Content Include="GroundControl\frontend\public\manifest.json" />
     <Content Include="GroundControl\frontend\public\robots.txt" />
     <Content Include="GroundControl\frontend\README.md" />
+    <Content Include="GroundControl\frontend\src\commands.js" />
     <Content Include="GroundControl\frontend\src\index.css" />
     <Content Include="GroundControl\frontend\src\index.js" />
+    <Content Include="GroundControl\frontend\src\terminal.js" />
   </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\Python Tools\Microsoft.PythonTools.targets" />
   <!-- Uncomment the CoreCompile target to enable the Build command in

GroundControl/frontend/src/commands.js

@@ -0,0 +1,5 @@
+function sentCommand(command) {
+    return 'lol. lmao, even.'
+}
+
+export default sentCommand

GroundControl/frontend/src/index.css

@@ -8,56 +8,16 @@ body {
     white-space: pre-wrap;
 }
 
-ol, ul {
-  padding-left: 30px;
-}
-
-.board-row:after {
-  clear: both;
-  content: "";
-  display: table;
-}
-
-.status {
-  margin-bottom: 10px;
-}
-
-.square {
-  background: #fff;
-  border: 1px solid #999;
-  float: left;
-  font-size: 24px;
-  font-weight: bold;
-  line-height: 34px;
-  height: 34px;
-  margin-right: -1px;
-  margin-top: -1px;
-  padding: 0;
-  text-align: center;
-  width: 34px;
-}
-
-.square:focus {
-  outline: none;
-}
-
-.kbd-navigation .square:focus {
-  background: #ddd;
-}
-
-.game {
-  display: flex;
-  flex-direction: row;
-}
-
-.game-info {
-  margin-left: 20px;
-}
-
 .fail-text{
     color: #d82222;
 }
 
+.active-line{
+    outline: none;
+    width: 2em;
+    resize:horizontal;
+}
+
 .blink-text {
     animation: blinker 1s step-start infinite;
 }

GroundControl/frontend/src/index.js

@@ -5,12 +5,13 @@ import ClickableDiv from 'react-clickable-div';
 import KeyboardEventHandler from 'react-keyboard-event-handler'
 import './index.css';
 import logos from './BoSLOO logo.json';
+import Terminal from './terminal.js'
 
-class Terminal extends React.Component {
+class Console extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            bodyObj: <SelfTest />,
+            bodyObj: <span><SelfTest /><KeyboardEventHandler handleKeys={['all']} onKeyEvent={(key, e) => { this.replaceBody(<Terminal />); this.setState({ init: true }) }} /></span>,
             init: false,
         }
     }
@@ -28,17 +29,10 @@ class Terminal extends React.Component {
         });
     }
 
-    handler() {
-        const init = this.state.init;
-        if (!init) { this.replaceBody('YIPPIE!'); this.setState({ init: true }); }
-    }
-
     render() {
         return (
-            <div className='terminal'>
+            <div className='console'>
                 {this.state.bodyObj}
-                <KeyboardEventHandler handleKeys={['all']}
-                    onKeyEvent={(key, e) => { if (!this.state.init) { this.replaceBody('YIPPIE!'); this.setState({ init: true }); } }} />
             </div>
         );
     }
@@ -73,4 +67,4 @@ class SelfTest extends React.Component {
 // =========================================
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(<Terminal />);
+root.render(<Console />);

GroundControl/frontend/src/terminal.js

@@ -0,0 +1,82 @@
+import Typing from 'react-typing-animation';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import * as KeyboardEventHandler from 'react-keyboard-event-handler';
+import command from './commands.js'
+
+class Terminal extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            lines: ['Welcome!', "Well done."],
+            lastLine : '',
+            waitForUser: false
+        };
+        this.charIn = this.charIn.bind(this);
+        this.handleKey = this.handleKey.bind(this);
+    }
+
+    addLines(newLinesArray) {
+        let currLines = this.state.lines
+        this.setState({
+            lines: currLines.concat(newLinesArray),
+        });
+    }
+
+    addCharacter(newChar) {
+        this.setState({
+            lastLine: JSON.parse(JSON.stringify(this.state.lastLine)) + newChar,
+        });
+    }
+
+    deleteCharacter() {
+        this.setState({
+            lastLine: this.state.lastLine.slice(0,-1),
+        });
+    }
+
+    finishLine() {
+        this.addLines([">" + this.state.lastLine, command(this.state.lastLine)]);
+        this.setState({ lastLine: '' });
+    }
+
+    charIn(newCharObj) {
+        this.setState({
+            lastLine: newCharObj.target.value,
+        });
+    }
+
+    handleKey(key, e) {
+        if (e.key === 'Enter') {
+            this.finishLine();
+        } else if (e.keyCode === 8) { /*backspace*/
+            this.deleteCharacter();
+        } else if (e.keyCode === 32) {
+            this.addCharacter(' ');
+        } else if (e.keyCode >= 40) {
+            this.addCharacter(e.key);
+        }
+    }
+
+    displayLines() {
+        var stringOut = "";
+        for (let line of this.state.lines) {
+            stringOut += "\n";
+            stringOut += line;
+        }
+
+        return <span>{stringOut}</span>
+    }
+
+    render() {
+        return (
+            <div className='terminal'>
+                <KeyboardEventHandler handleKeys={['all']} onKeyEvent={this.handleKey} />
+                {this.displayLines()}<br />
+                {'>'}{this.state.lastLine}<span className='blink-text'>_</span>
+            </div>
+        )
+    }
+}
+
+export default Terminal