diff --git a/Assets/GroundControl/Assets/BoSLOO logo.txt b/GroundControl/Assets/BoSLOO logo.txt similarity index 100% rename from Assets/GroundControl/Assets/BoSLOO logo.txt rename to GroundControl/Assets/BoSLOO logo.txt diff --git a/GroundControl/frontend/package-lock.json b/GroundControl/frontend/package-lock.json index fd8f947..46d2576 100644 --- a/GroundControl/frontend/package-lock.json +++ b/GroundControl/frontend/package-lock.json @@ -11541,6 +11541,11 @@ "whatwg-fetch": "^3.6.2" } }, + "react-clickable-div": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/react-clickable-div/-/react-clickable-div-1.0.0.tgz", + "integrity": "sha512-N1ABsLy5tuCXXHHcO8azMkqbLXgXLqj57CraBih/pRpoYI3jLcyPXq/sMbl2o+FONgBTwZhGSBDrfj2OmyJ8TA==" + }, "react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -11646,6 +11651,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-keyboard-event-handler": { + "version": "1.5.4", + "resolved": "https://registry.npmjs.org/react-keyboard-event-handler/-/react-keyboard-event-handler-1.5.4.tgz", + "integrity": "sha512-MSOxU/sQ5q9XWNHhXAJxzh4xVLZjKORGNC2Pzvx3qUo24TQeztGB0tq8oSArwX6vfKSIVijiw8wBmkN5pJOB4w==" + }, "react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", diff --git a/GroundControl/frontend/package.json b/GroundControl/frontend/package.json index dcbea57..af74047 100644 --- a/GroundControl/frontend/package.json +++ b/GroundControl/frontend/package.json @@ -9,7 +9,9 @@ "babel-runtime": "^6.26.0", "react": "^18.2.0", "react-animated-text": "^0.1.4", + "react-clickable-div": "^1.0.0", "react-dom": "^18.2.0", + "react-keyboard-event-handler": "^1.5.4", "react-scripts": "5.0.1", "react-typing-animation": "^1.6.2", "web-vitals": "^2.1.4" diff --git a/GroundControl/frontend/src/index.css b/GroundControl/frontend/src/index.css index 5da9083..0099e0b 100644 --- a/GroundControl/frontend/src/index.css +++ b/GroundControl/frontend/src/index.css @@ -2,7 +2,7 @@ body { font: 14px "Courier New", monospace; - background: #121212; + background: #0d0d0d; color: #02d300; margin: 20px; white-space: pre-wrap; @@ -53,3 +53,17 @@ ol, ul { .game-info { margin-left: 20px; } + +.fail-text{ + color: #d82222; +} + +.blink-text { + animation: blinker 1s step-start infinite; +} + +@keyframes blinker { + 50% { + opacity: 0; + } +} \ No newline at end of file diff --git a/GroundControl/frontend/src/index.js b/GroundControl/frontend/src/index.js index 9283e8a..b68aefa 100644 --- a/GroundControl/frontend/src/index.js +++ b/GroundControl/frontend/src/index.js @@ -1,6 +1,8 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import Typing from 'react-typing-animation'; +import ClickableDiv from 'react-clickable-div'; +import KeyboardEventHandler from 'react-keyboard-event-handler' import './index.css'; import logos from './BoSLOO logo.json'; @@ -124,34 +126,67 @@ class Terminal extends React.Component { constructor(props) { super(props); this.state = { - lines: [ - { text: 'BoSLOO v0.1', printed: false }, - { text: 'Today is Saturday.', printed: false }, - { text: logos.logo, printed: false} - ] + bodyObj: , + init: false, } } + appendToBody(newContent) { + let bodyObj = JSON.parse(JSON.stringify(this.state.bodyObj)) + newContent; + this.setState({ + bodyObj: bodyObj + }); + } + + replaceBody(newContent) { + this.setState({ + bodyObj: newContent + }); + } + + handler() { + const init = this.state.init; + if (!init) { this.replaceBody('YIPPIE!'); this.setState({ init: true }); } + } + render() { - var rawLines = []; - var typingLines = []; - for (let line of this.state.lines) { - line.printed ? rawLines = rawLines.concat([line.text]) : typingLines = typingLines.concat([line.text]); - } - const raw = rawLines.join('\n'); - const type = typingLines.join('\n'); return ( -
- {raw} - - {type} - +
+ {this.state.bodyObj} + { if (!this.state.init) { this.replaceBody('YIPPIE!'); this.setState({ init: true }); } }} />
); } } -// ======================================== +class SelfTest extends React.Component { + constructor(props) { + super(props); + this.state = { + logodisplay: false + } + } + + render() { + const final = {logos.logo} < br />

Press any key to continue...
> _
; + return ( +
+ this.setState({logodisplay: true})}> + BoSLOO ACPI BIOS v0.1
+ Sakimori Ind. 2022
+ Initializing cache.................................... OK!
+ Initializing network.................................. OK!
+ Initializing GPU...................................... FAIL!
+
+
+ {this.state.logodisplay ? final : null} +
+ ) + } +} + +// ========================================= const root = ReactDOM.createRoot(document.getElementById("root")); -root.render(); +root.render(); \ No newline at end of file