starting rendering, adding web sockets

www/problem.js

@@ -0,0 +1,79 @@
+let state = "problem"; // problem | steps | done
+let stepIndex = 0;
+let currentData = null;
+
+// Load the data to draw
+async function loadData() {
+  const res = await fetch("data/data.json");
+  currentData = await res.json();
+
+  state = "problem";
+  stepIndex = 0;
+
+  render();
+}
+
+function render() {
+  if (!currentData) return;
+
+  const problemEl = document.getElementById("problem");
+  const stepsEl = document.getElementById("steps");
+
+  if (state === "problem") {
+    problemEl.innerHTML = `\\(${currentData.problem}\\)`;
+    stepsEl.innerHTML = "";
+  }
+
+  if (state === "step") {
+    problemEl.innerHTML = `\\(${currentData.problem}\\)`;
+
+    let html = "";
+    for (let i = 0; i <= stepIndex; i++) {
+      const s = currentData.steps[i];
+      html += `
+        <div class="step">
+          <div>\\(${s.before}\\)</div>
+          <div>${s.step}</div>
+          <div>\\(${s.after}\\)</div>
+        </div>
+        <hr/>
+      `;
+    }
+
+    stepsEl.innerHTML = html;
+  }
+
+  MathJax.typesetPromise();
+}
+
+function startSequence() {
+  // 1. show problem
+  state = "problem";
+  render();
+
+  setTimeout(() => {
+    state = "step";
+    stepIndex = 0;
+    render();
+
+    let interval = setInterval(() => {
+      stepIndex++;
+
+      render();
+
+      if (stepIndex >= currentData.steps.length - 1) {
+        clearInterval(interval);
+
+        setTimeout(() => {
+          loadData(); // next problem
+        }, 3000);
+      }
+    }, 2000); // time between steps
+
+  }, 4000); // thinking time before reveal
+}
+
+loadData().then(() => {
+  startSequence();
+});
+