implement PPTY

www/js/main.js.bak

@@ -0,0 +1,133 @@
+import { Smc } from "./smc/lib.js"
+
+main();
+
+async function fetchShader(uri, delegate) {
+  const res = await fetch(uri);
+  if (res.ok)
+    return await res.text();
+  this.raiseError(
+    SmcErr.FETCH_SHADER,
+    `Failed to load shader source ${url}: ${res.status} ${res.json()}`);
+  return ""
+}
+
+
+function animDelta(anim) {
+  const timing = anim.effect.getComputedTiming();
+  return (timing.delay ?? 0) + (timing.duration ?? 0) + (timing.endDelay ?? 0);
+}
+
+function main() {
+  const cps = 12; // chars per second
+  const promptDelay = 0.5;
+  const commandDelay = 5;
+  const outputDelay = 5;
+  const blinkTime = 600; // x2 then x1000
+
+  // WARNING: delay does not account for runtime
+  // WARNING: it assumes all computations are down instantaneously
+  var delay = 0;
+
+  const boot = document.querySelector("#boot-ppty");
+  // WARNING: ensure boot != null
+  boot
+    .querySelectorAll(".ppty-block")
+    .forEach((block, index, blocks) => {
+      const prompt = block.querySelector(".ppty-prompt");
+      const command = block.querySelector(".ppty-command");
+      const output = block.querySelector(".ppty-output");
+
+      // WARNING: ensure prompt|command|output != null
+      const promptAnim = prompt.animate(
+        [{ visibility: "visible" }],
+        {
+          delay: delay + promptDelay * 1000,
+          fill: "forwards",
+        },
+      );
+      delay = animDelta(promptAnim);
+
+      const showCursor = () => { command.style.borderRightColor = cursorColor; return true; };
+      const hideCursor = () => { command.style.borderRightColor = "transparent"; return false; };
+      const startCursorBlink = () => setInterval(() => {
+        cursorVisible = cursorVisible ? hideCursor() : showCursor();
+      }, blinkTime);
+
+      const cursorColor = command.style.borderRightColor;
+      var cursorVisible = true;
+      var blinkId = null;
+      setTimeout(() => {
+        command.style.visibility = "visible";
+        blinkId = startCursorBlink();
+      }, delay);
+
+      // WARNING: ensure command.textContent != null
+      const commandLen = command.textContent.trim().length
+      const commandAnim = command.animate(
+        [
+          {
+            width: "0ch",
+            visibility: "visible",
+          },
+          {
+            width: `${commandLen}ch`,
+            visibility: "visible",
+          }
+        ],
+        {
+          duration: commandLen / cps * 1000,
+          delay: delay + commandDelay * 1000,
+          easing: `steps(${commandLen}, end)`,
+          fill: "forwards",
+        }
+      );
+      // pause the cursor while typing
+      setTimeout(() => {
+        clearInterval(blinkId);
+        showCursor();
+        cursorVisible = true;
+      }, delay + commandDelay * 1000);
+      delay = animDelta(commandAnim);
+      setTimeout(() => {
+        blinkId = startCursorBlink();
+      }, delay);
+
+
+      setTimeout(() => {
+        clearInterval(blinkId);
+        hideCursor();
+      }, delay + outputDelay * 1000);
+
+      // unhide output
+      output.animate(
+        [{ visibility: "visible" }],
+        {
+          delay: delay + outputDelay * 1000,
+          fill: "forwards",
+        }
+      );
+      delay += outputDelay * 1000;
+
+      // hide the cursor after output displays
+      setTimeout(() => command.style.borderRightColor = "transparent", delay);
+    });
+
+
+
+  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()
+    );
+}
+