dan/ester_os
1
0
Fork 0
mirror of https://github.com/danbulant/ester_os synced 2026-05-19 04:08:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Simple boot animation

Browse source
This commit is contained in:
danbulant 2020-02-15 19:58:35 +01:00
parent 256d76855b
commit d417b97674
2 changed files with 63 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
client/src/renderers/boot.ts
View file

@ -1,6 +1,15 @@
import RendererDef from '../defs/renderer';
import RenderStates from '../defs/renderStates';
import Welcome from './welcome';
import './styles/boot.css';
/*
A word why this is the only renderer that doesn't have prepare() function that prepares
rendering elements between actually rendering them.
It's quite simple: this is the first renderer to start, so we want to user to see
something as fast as possible, so they don't stare at white screen.
*/
export default class Boot implements RendererDef {
name = "boot";
removePrevious = true;
@ -10,9 +19,26 @@ export default class Boot implements RendererDef {
console.log("Boot renderer active");
this.state = RenderStates.Rendered;
const body = document.body;
var boot = document.createElement("div");
body.appendChild(boot);
boot.className = "boot-rendered";
boot.id = "boot";
var text = document.createElement("div");
text.innerText = "Booting Ester OS!";
text.className = "boot-text";
boot.appendChild(text);
var w = new Welcome();
w.prepare().then(()=>{w.render()});
}
eject(){
console.log("Boot renderer ejected");
this.state = RenderStates.Ejected;
document.body.removeChild(document.getElementById("boot"));
}
}

37
client/src/renderers/styles/boot.css Normal file
View file

@ -0,0 +1,37 @@
@import url("/fonts/roboto/roboto_medium_macroman/stylesheet.css");
.boot-rendered {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(31, 31, 31);
color: white;
font-size: 30px;
font-family: "robotomedium";
animation-name: boot-text-anim;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes boot-text-anim {
0% {
text-shadow: 0 0 0 rgb(255, 255, 255);
}
50% {
text-shadow: 0 0 5px rgb(255, 255, 255);
}
100% {
text-shadow: 0 0 0 rgb(255, 255, 255);
}
}
.boot-text {
position: fixed;
text-align: center;
width: 400px;
left: 50%;
margin-left: -200px;
height: 100px;
top: 50%;
margin-top: -50px;
}