site/www/js/main.js

81 lines
1.8 KiB
JavaScript

import { Smc, fetchShader } from "./smc/lib.js";
import { PPTY } from "./ppty/lib.js";
main();
function endBoot(root) {
const style = getComputedStyle(root);
const paddingLeft = parseFloat(style.paddingLeft);
const paddingRight = parseFloat(style.paddingRight);
const contentWidth = root.clientWidth - paddingLeft - paddingRight;
const paddingTop = parseFloat(style.paddingTop);
const paddingBottom = parseFloat(style.paddingBottom);
const contentHeight = root.clientHeight - paddingTop - paddingBottom;
root.style.width = `${contentWidth}px`;
root.style.height = `${contentHeight}px`;
const fade = root.animate(
[{ opacity: 0 }],
{
duration: 400,
delay: 3000,
fill: "forwards",
}
);
fade.onfinish = () => {
root.remove();
document
.querySelector("main")
.animate(
[
{ visibility: "visible" },
{ visibility: "visible", opacity: 1 }
],
{
duration: 400,
fill: "forwards",
}
);
}
}
function main() {
const boot = document.querySelector("#boot-ppty")
new PPTY(
boot,
[
{
cps: 12,
promptDelay: 0.5,
commandDelay: 0.7,
outputDelay: 1,
blinkTime: 0.6,
},
{
cps: 10,
promptDelay: 0,
commandDelay: 1.5,
outputDelay: 1.2,
blinkTime: 0.6,
}
])
.onfinish(endBoot)
.run();
const canvas = document.querySelector("#bg-canvas");
canvas.setAttribute('width', window.innerWidth);
canvas.setAttribute('height', window.innerHeight);
fetchShader("../shaders/segfault.glsl")
.then(frag =>
new Smc(canvas)
.setMaxFps(30)
.setProgram(builder =>
builder
.addFragmentShader(frag))
.run()
);
}