98 lines
3.2 KiB
JavaScript
98 lines
3.2 KiB
JavaScript
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';
|
|
import Terminal from './terminal.js';
|
|
import StatusBar from './statusbar.js';
|
|
|
|
const nominal = <Terminal />;
|
|
|
|
class Console extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.swapper = this.swapper.bind(this);
|
|
this.state = {
|
|
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({
|
|
bodyObj: bodyObj
|
|
});
|
|
}
|
|
|
|
replaceBody(newContent) {
|
|
this.setState({
|
|
bodyObj: newContent
|
|
});
|
|
}
|
|
|
|
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}
|
|
{this.state.init >= 2 ? <StatusBar/> : null}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
class SelfTest extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
logodisplay: false
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const final = <span className='logo'>{logos.logo} < br /><br /><br /><Typing speed={5}>Press any key to continue...<br /><span>{'>'} <span className='blink-text'>_</span></span></Typing></span>;
|
|
return (
|
|
<div className='power-on-self-test'>
|
|
{this.state.logodisplay ? final : null}
|
|
<Typing speed={30} onFinishedTyping={() => this.setState({ logodisplay: true })}>
|
|
BoSLOO ACPI BIOS v0.1<br />
|
|
Sakimori Ind. 2022<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 />
|
|
</Typing>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
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"));
|
|
root.render(<Console />); |