diff --git a/GroundControl/Assets/BoSLOO logo.txt b/GroundControl/frontend/src/Assets/BoSLOO logo.txt
similarity index 100%
rename from GroundControl/Assets/BoSLOO logo.txt
rename to GroundControl/frontend/src/Assets/BoSLOO logo.txt
diff --git a/GroundControl/frontend/src/Assets/consolebg.jpg b/GroundControl/frontend/src/Assets/consolebg.jpg
new file mode 100644
index 0000000..4a2700f
Binary files /dev/null and b/GroundControl/frontend/src/Assets/consolebg.jpg differ
diff --git a/GroundControl/frontend/src/Assets/consolebg.xcf b/GroundControl/frontend/src/Assets/consolebg.xcf
new file mode 100644
index 0000000..1c2163a
Binary files /dev/null and b/GroundControl/frontend/src/Assets/consolebg.xcf differ
diff --git a/GroundControl/frontend/src/commands.js b/GroundControl/frontend/src/commands.js
index e66f613..154dadc 100644
--- a/GroundControl/frontend/src/commands.js
+++ b/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 ({command.call(commandBody.trim())});
+ }
+ }
+
+ return (Unrecognized command.);
}
export default sentCommand
\ No newline at end of file
diff --git a/GroundControl/frontend/src/index.css b/GroundControl/frontend/src/index.css
index 6c5ab15..8d71380 100644
--- a/GroundControl/frontend/src/index.css
+++ b/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;
diff --git a/GroundControl/frontend/src/index.js b/GroundControl/frontend/src/index.js
index 6197c74..aadbb48 100644
--- a/GroundControl/frontend/src/index.js
+++ b/GroundControl/frontend/src/index.js
@@ -47,7 +47,7 @@ class SelfTest extends React.Component {
}
render() {
- const final = {logos.logo} < br />
Press any key to continue...
> _;
+ const final = {logos.logo} < br />
Press any key to continue...
{'>'} _;
return (
this.setState({logodisplay: true})}>
diff --git a/GroundControl/frontend/src/terminal.js b/GroundControl/frontend/src/terminal.js
index 48c2ddf..94ae2d2 100644
--- a/GroundControl/frontend/src/terminal.js
+++ b/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: [-20 | Welcome to BoSLOO Ground Control Console. |
, -10 | Time of connection: {new Date().toLocaleString('en-US')} |
],
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([{this.state.lineNumber} | {'>'}{this.state.lastLine} |
,
+ {this.state.lineNumber + 10} | {commandBody} |
]);
+ 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 {stringOut}
+ return this.state.lines;
}
render() {
return (
-
-
- {this.displayLines()}
- {'>'}{this.state.lastLine}
_
+
+
+
+
+ {this.displayLines()}
+ {this.state.lineNumber} | {'>'}{this.state.lastLine}_ |
+
+
)
}