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

@ -28,6 +28,7 @@
</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>
<audio id="boot-sound" src="./Assets/sound/disc-seek-test.mp3">Your browser does not support audio.</audio>
<div id="root"></div> <div id="root"></div>
<!-- <!--
This HTML file is a template. This HTML file is a template.

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,17 +5,31 @@ 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) {
let bodyObj = JSON.parse(JSON.stringify(this.state.bodyObj)) + newContent; let bodyObj = JSON.parse(JSON.stringify(this.state.bodyObj)) + newContent;
this.setState({ 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() { render() {
return ( return (
<div className='console'> <div className='console'>
<KeyboardEventHandler handleKeys={['all']} onKeyEvent={this.swapper} />
{this.state.bodyObj} {this.state.bodyObj}
</div> </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>; 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