slick css work

GroundControl/frontend/src/commands.js

@@ -1,5 +1,64 @@
-function sentCommand(command) {
-    return 'lol. lmao, even.'
+import Typing from 'react-typing-animation';
+import React from 'react';
+
+class Command {
+    constructor(keyword, fullName) {
+        this.keyword = keyword;
+        this.fullName = fullName;
+
+        this.helpString = "No help text for this command. Vivian, please be sure to fix this before deploying."
+    }
+
+    call(body) {
+        return 'This command exists, but does nothing. Vivian, please be sure to fix this before deploying.';
+    }
+}
+
+class helpCommand extends Command{
+    constructor() {
+        super('help','help');
+
+        this.helpString = "This contains basic help and usage instructions for all commands."
+    }
+
+    call(body) {
+        if (body === "") {
+            return (this.helpString);
+        } else {
+            for (let command of commandList) {
+                if (body === command.keyword || body === command.fullName) {
+                    return (command.helpString);
+                }
+            }
+            return ("Unrecognized command. Use without arguments to see full list.")
+        }
+    }
+}
+
+class loremCommand extends Command {
+    constructor() {
+        super('lorem', 'loremipsum');
+
+        this.helpString = 'Prints a lorem string.'
+    }
+
+    call(body) {
+        return ('Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before. Many say exploration is part of our destiny, but it is actually our duty to future generations and their quest to ensure the survival of the human species.');
+    }
+}
+
+const commandList = [new helpCommand(), new loremCommand()];
+
+function sentCommand(sentCommand) {
+    var commandId = sentCommand.split(" ")[0]
+    var commandBody = sentCommand.split(" ").slice(1).join(' ')
+    for (let command of commandList) {
+        if (commandId === command.keyword || commandId === command.fullName) {
+            return (<Typing className='typed-line' speed={5}>{command.call(commandBody.trim())}</Typing>);
+        }
+    }
+
+    return (<Typing className='typed-line' speed={5}>Unrecognized command.</Typing>);
 }
 
 export default sentCommand

GroundControl/frontend/src/index.css

@@ -1,15 +1,55 @@
 @import url('https://fonts.googleapis.com/css?family=Major+Mono+Display');
 
 body {
-    font: 14px "Courier New", monospace;
-    background: #0d0d0d;
+    font: 18px "Courier New", monospace;
+    background-color: black;
+    background-image: radial-gradient(at bottom right, rgb(30 30 30), black);
+    height: 100vh;
+    overflow: hidden;
     color: #02d300;
+    text-shadow: 0 0 6px #73ff71;
     margin: 20px;
+}
+
+body::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 99vh;
+    background: repeating-linear-gradient( 0deg, rgb(0 0 0 / 0.15), rgb(0 0 0 / 0.15) 3px, transparent 2px, transparent 6px);
+    pointer-events: none;
+}
+
+::selection{
+    background: #793d71;
+    text-shadow: none;
+}
+
+.console {
+    padding-left: 6em;
+    padding-top: 10vh;
+    height: 80vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.logo {
     white-space: pre-wrap;
 }
 
-.fail-text{
+.fail-text {
     color: #d82222;
+    text-shadow: 0 0 6px #ff1111;
+}
+
+.terminal-window{
+    width: 40%;
+    height: 100%;
+    overflow: auto;
+    flex-grow: 1;
 }
 
 .active-line{
@@ -22,6 +62,21 @@ body {
     animation: blinker 1s step-start infinite;
 }
 
+.typed-line{
+    display: inline;
+}
+
+.terminal-line th{
+    text-align: right;
+    vertical-align: top;
+    padding-right: 0.2em;
+    width: 4em;
+}
+
+.terminal-line td{
+    text-align: left;
+}
+
 @keyframes blinker {
     50% {
         opacity: 0;

GroundControl/frontend/src/index.js

@@ -47,7 +47,7 @@ class SelfTest extends React.Component {
     }
 
     render() {
-        const final = <span>{logos.logo} < br /><br /><br /><Typing speed={5}>Press any key to continue...<br/>> <span className='blink-text'>_</span></Typing></span>;
+        const final = <span className='logo'>{logos.logo} < br /><br /><br /><Typing speed={5}>Press any key to continue...<br />{'>'} <span className='blink-text'>_</span></Typing></span>;
         return (
             <div className='power-on-self-test'>
                 <Typing speed={5} onFinishedTyping={() => this.setState({logodisplay: true})}>

GroundControl/frontend/src/terminal.js

@@ -1,19 +1,29 @@
-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'
+import sentCommand from './commands.js'
 
 class Terminal extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            lines: ['Welcome!', "Well done."],
+            lines: [<tr className='terminal-line' key={-20}><th>-20</th><td>Welcome to BoSLOO Ground Control Console.</td></tr>, <tr className='terminal-line' key={-10}><th>-10</th><td> Time of connection: {new Date().toLocaleString('en-US')}</td></tr>],
             lastLine : '',
-            waitForUser: false
+            waitForUser: false,
+            lineNumber: 0,
+            controlHeld: false,
         };
         this.charIn = this.charIn.bind(this);
         this.handleKey = this.handleKey.bind(this);
+
+        const window = document.getRootNode();
+
+        window.addEventListener('paste', (e) => {
+            e.preventDefault();
+
+            let paste = (e.clipboardData || window.clipboardData).getData('text');
+            this.appendText(paste);
+        });
     }
 
     addLines(newLinesArray) {
@@ -29,6 +39,12 @@ class Terminal extends React.Component {
         });
     }
 
+    appendText(newText) {
+        this.setState({
+            lastLine: JSON.parse(JSON.stringify(this.state.lastLine)) + newText,
+        });
+    }
+
     deleteCharacter() {
         this.setState({
             lastLine: this.state.lastLine.slice(0,-1),
@@ -36,8 +52,10 @@ class Terminal extends React.Component {
     }
 
     finishLine() {
-        this.addLines([">" + this.state.lastLine, command(this.state.lastLine)]);
-        this.setState({ lastLine: '' });
+        let commandBody = sentCommand(this.state.lastLine);
+        this.addLines([<tr className='terminal-line' key={this.state.lineNumber}><th>{this.state.lineNumber}</th><td>{'>'}{this.state.lastLine}</td></tr>,
+            <tr className='terminal-line' key={this.state.lineNumber + 10}><th>{this.state.lineNumber + 10}</th><td>{commandBody}</td></tr>]);
+        this.setState({ lastLine: '', lineNumber: this.state.lineNumber+20 });
     }
 
     charIn(newCharObj) {
@@ -51,6 +69,8 @@ class Terminal extends React.Component {
             this.finishLine();
         } else if (e.keyCode === 8) { /*backspace*/
             this.deleteCharacter();
+        } else if (e.ctrlKey) {
+            return;
         } else if (e.keyCode === 32) {
             this.addCharacter(' ');
         } else if (e.keyCode >= 40) {
@@ -59,21 +79,19 @@ class Terminal extends React.Component {
     }
 
     displayLines() {
-        var stringOut = "";
-        for (let line of this.state.lines) {
-            stringOut += "\n";
-            stringOut += line;
-        }
-
-        return <span>{stringOut}</span>
+        return this.state.lines;
     }
 
     render() {
         return (
-            <div className='terminal'>
-                <KeyboardEventHandler handleKeys={['all']} onKeyEvent={this.handleKey} />
-                {this.displayLines()}<br />
-                {'>'}{this.state.lastLine}<span className='blink-text'>_</span>
+            <div className='terminal-window'>
+                <table className='terminal'>
+                    <tbody>
+                    <KeyboardEventHandler handleKeys={['all']} onKeyEvent={this.handleKey} />
+                    {this.displayLines()}
+                    <tr className='terminal-line'><th>{this.state.lineNumber}</th><td>{'>'}{this.state.lastLine}<span className='blink-text'>_</span></td></tr>
+                    </tbody>
+                </table>
             </div>
         )
     }