boot-up screen active, state change on keypress

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",

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"

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;
+    }
+}

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: <SelfTest />,
+            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 (
-            <div className='Terminal'>
-                {raw}
-                <Typing speed={2 }>
-                    {type}
-                </Typing>
+            <div className='terminal'>
+                {this.state.bodyObj}
+                <KeyboardEventHandler handleKeys={['all']}
+                    onKeyEvent={(key, e) => { if (!this.state.init) { this.replaceBody('YIPPIE!'); this.setState({ init: true }); } }} />
             </div>
         );
     }
 }
 
-// ========================================
+class SelfTest extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            logodisplay: false
+        }
+    }
+
+    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>;
+        return (
+            <div className='power-on-self-test'>
+                <Typing speed={5} onFinishedTyping={() => this.setState({logodisplay: true})}>
+                BoSLOO ACPI BIOS v0.1<br />
+                Sakimori Ind. 2022<br />
+                Initializing cache.................................<Typing.Speed ms={200} />...<Typing.Speed ms={5} /> OK!<br />
+                Initializing network.........<Typing.Speed ms={500} />....<Typing.Speed ms={5} />.................<Typing.Speed ms={300} />....<Typing.Speed ms={5} /> OK!<br />
+                Initializing GPU...................................<Typing.Speed ms={1000} />...<Typing.Speed ms={5} /> <span className='fail-text'>FAIL!</span><br />
+                <br />             
+                </Typing>
+                {this.state.logodisplay ? final : null}
+            </div>
+        )
+    }
+}
+
+// =========================================
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<Terminal />);