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\Assets\" />
<Folder Include="GroundControl\frontend\" /> <Folder Include="GroundControl\frontend\" />
<Folder Include="GroundControl\frontend\public\" /> <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\" /> <Folder Include="GroundControl\frontend\src\" />
</ItemGroup> </ItemGroup>
<ItemGroup> <ItemGroup>
@ -98,6 +101,10 @@
<Content Include="Assets\Sphere\0048.png" /> <Content Include="Assets\Sphere\0048.png" />
<Content Include="Assets\Sphere\0049.png" /> <Content Include="Assets\Sphere\0049.png" />
<Content Include="Assets\Sphere\0050.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\src\BoSLOO logo.json" />
<Content Include="GroundControl\frontend\.gitignore" /> <Content Include="GroundControl\frontend\.gitignore" />
<Content Include="GroundControl\frontend\package-lock.json" /> <Content Include="GroundControl\frontend\package-lock.json" />
@ -112,6 +119,7 @@
<Content Include="GroundControl\frontend\src\commands.js" /> <Content Include="GroundControl\frontend\src\commands.js" />
<Content Include="GroundControl\frontend\src\index.css" /> <Content Include="GroundControl\frontend\src\index.css" />
<Content Include="GroundControl\frontend\src\index.js" /> <Content Include="GroundControl\frontend\src\index.js" />
<Content Include="GroundControl\frontend\src\statusbar.js" />
<Content Include="GroundControl\frontend\src\terminal.js" /> <Content Include="GroundControl\frontend\src\terminal.js" />
</ItemGroup> </ItemGroup>
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\Python Tools\Microsoft.PythonTools.targets" /> <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> <title>React App</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <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. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. 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) { call(body) {
if (body === "") { if (body === "") {
return (this.helpString); var commands = "";
for (let command of commandList) {
commands += command.keyword + " ";
}
return (commands);
} else { } else {
for (let command of commandList) { for (let command of commandList) {
if (body === command.keyword || body === command.fullName) { if (body === command.keyword || body === command.fullName) {

View file

@ -8,7 +8,6 @@ body {
overflow: hidden; overflow: hidden;
color: #02d300; color: #02d300;
text-shadow: 0 0 6px #73ff71; text-shadow: 0 0 6px #73ff71;
margin: 20px;
} }
body::after { body::after {
@ -27,10 +26,28 @@ body::after {
text-shadow: none; 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 { .console {
padding-left: 6em; padding-top: 15vh;
padding-top: 10vh; height: 70vh;
height: 80vh;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -46,10 +63,12 @@ body::after {
} }
.terminal-window{ .terminal-window{
width: 40%; width: 65%;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
flex-grow: 1; flex-grow: 1;
display: flex;
flex-direction: column-reverse;
} }
.active-line{ .active-line{

View file

@ -5,15 +5,29 @@ import ClickableDiv from 'react-clickable-div';
import KeyboardEventHandler from 'react-keyboard-event-handler' import KeyboardEventHandler from 'react-keyboard-event-handler'
import './index.css'; import './index.css';
import logos from './BoSLOO logo.json'; 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 { class Console extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.swapper = this.swapper.bind(this);
this.state = { this.state = {
bodyObj: <span><SelfTest /><KeyboardEventHandler handleKeys={['all']} onKeyEvent={(key, e) => { this.replaceBody(<Terminal />); this.setState({ init: true }) }} /></span>, bodyObj: <PowerOn onClick={this.swapper} />,
init: false, 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) { appendToBody(newContent) {
@ -29,9 +43,16 @@ class Console extends React.Component {
}); });
} }
playSound() {
var sound = document.getElementById("boot-sound")
sound.volume = 0.1;
sound.play();
}
render() { render() {
return ( return (
<div className='console'> <div className='console'>
<KeyboardEventHandler handleKeys={['all']} onKeyEvent={this.swapper} />
{this.state.bodyObj} {this.state.bodyObj}
</div> </div>
); );
@ -43,17 +64,17 @@ class SelfTest extends React.Component {
super(props); super(props);
this.state = { this.state = {
logodisplay: false logodisplay: false
} }
} }
render() { render() {
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>; 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 ( return (
<div className='power-on-self-test'> <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 /> BoSLOO ACPI BIOS v0.1<br />
Sakimori Ind. 2022<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 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 /> Initializing GPU...................................<Typing.Speed ms={1000} />...<Typing.Speed ms={5} /> <span className='fail-text'>FAIL!</span><br />
<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")); 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