added start page to allow for boot audio

This commit is contained in:
Sakimori 2022-07-04 20:39:35 -04:00
parent f06c0ae64d
commit 1a497e6aba
12 changed files with 84 additions and 16 deletions

View file

@ -45,6 +45,9 @@
<Folder Include="GroundControl\Assets\" />
<Folder Include="GroundControl\frontend\" />
<Folder Include="GroundControl\frontend\public\" />
<Folder Include="GroundControl\frontend\public\Assets\" />
<Folder Include="GroundControl\frontend\public\Assets\image\" />
<Folder Include="GroundControl\frontend\public\Assets\sound\" />
<Folder Include="GroundControl\frontend\src\" />
</ItemGroup>
<ItemGroup>
@ -98,6 +101,10 @@
<Content Include="Assets\Sphere\0048.png" />
<Content Include="Assets\Sphere\0049.png" />
<Content Include="Assets\Sphere\0050.png" />
<Content Include="GroundControl\frontend\public\Assets\image\BoSLOO logo.txt" />
<Content Include="GroundControl\frontend\public\Assets\image\testMap.png" />
<Content Include="GroundControl\frontend\public\Assets\sound\apricot-rustle-boot.wav" />
<Content Include="GroundControl\frontend\public\Assets\sound\disc-seek-test.mp3" />
<Content Include="GroundControl\frontend\src\BoSLOO logo.json" />
<Content Include="GroundControl\frontend\.gitignore" />
<Content Include="GroundControl\frontend\package-lock.json" />
@ -112,6 +119,7 @@
<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\statusbar.js" />
<Content Include="GroundControl\frontend\src\terminal.js" />
</ItemGroup>
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\Python Tools\Microsoft.PythonTools.targets" />

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

View file

@ -27,9 +27,10 @@
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
<noscript>You need to enable JavaScript to run this app.</noscript>
<audio id="boot-sound" src="./Assets/sound/disc-seek-test.mp3">Your browser does not support audio.</audio>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 168 KiB

View file

@ -23,7 +23,11 @@ class helpCommand extends Command{
call(body) {
if (body === "") {
return (this.helpString);
var commands = "";
for (let command of commandList) {
commands += command.keyword + " ";
}
return (commands);
} else {
for (let command of commandList) {
if (body === command.keyword || body === command.fullName) {

View file

@ -8,7 +8,6 @@ body {
overflow: hidden;
color: #02d300;
text-shadow: 0 0 6px #73ff71;
margin: 20px;
}
body::after {
@ -27,10 +26,28 @@ body::after {
text-shadow: none;
}
.power-on-container {
height: 90vh;
align-items:center;
justify-items:center;
text-align: center;
}
.power-on-box {
position:relative;
justify-self:center;
margin-top: 20vh;
}
#start-text{
font-size: 30px;
border:double;
padding:2em 6em;
}
.console {
padding-left: 6em;
padding-top: 10vh;
height: 80vh;
padding-top: 15vh;
height: 70vh;
overflow: hidden;
display: flex;
flex-direction: column;
@ -46,10 +63,12 @@ body::after {
}
.terminal-window{
width: 40%;
width: 65%;
height: 100%;
overflow: auto;
flex-grow: 1;
display: flex;
flex-direction: column-reverse;
}
.active-line{

View file

@ -5,17 +5,31 @@ 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'
import Terminal from './terminal.js';
import StatusBar from './statusbar.js';
const nominal = <div><Terminal /><StatusBar /></div>;
class Console extends React.Component {
constructor(props) {
super(props);
this.swapper = this.swapper.bind(this);
this.state = {
bodyObj: <span><SelfTest /><KeyboardEventHandler handleKeys={['all']} onKeyEvent={(key, e) => { this.replaceBody(<Terminal />); this.setState({ init: true }) }} /></span>,
init: false,
bodyObj: <PowerOn onClick={this.swapper} />,
init: 0,
}
}
swapper(key, e) {
if (this.state.init === 0) {
this.replaceBody(<SelfTest />);
this.playSound();
} else if (this.state.init === 1) {
this.replaceBody(nominal);
}
this.setState({ init: this.state.init + 1 });
}
appendToBody(newContent) {
let bodyObj = JSON.parse(JSON.stringify(this.state.bodyObj)) + newContent;
this.setState({
@ -29,9 +43,16 @@ class Console extends React.Component {
});
}
playSound() {
var sound = document.getElementById("boot-sound")
sound.volume = 0.1;
sound.play();
}
render() {
return (
<div className='console'>
<KeyboardEventHandler handleKeys={['all']} onKeyEvent={this.swapper} />
{this.state.bodyObj}
</div>
);
@ -50,10 +71,10 @@ class SelfTest extends React.Component {
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})}>
<Typing speed={30} 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 />
<Typing.Speed ms={ 5}/>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 />
@ -64,6 +85,12 @@ class SelfTest extends React.Component {
}
}
function PowerOn(props) {
return (
<div className="power-on-container"><div className='power-on-box'><span id='start-text' onClick={props.onClick}><span className='blink-text'>START</span></span></div></div>
);
}
// =========================================
const root = ReactDOM.createRoot(document.getElementById("root"));

View file

@ -0,0 +1,9 @@
import React from 'react';
class StatusBar extends React.Component {
render() {
return null;
}
}
export default StatusBar