Added Websocket stuff

www/scripts/background.js

@@ -0,0 +1,138 @@
+const canvas = document.getElementById("waveCanvas");
+const ctx = canvas.getContext("2d");
+
+const pCanvas = document.getElementById("particleCanvas");
+const pctx = pCanvas.getContext("2d");
+
+let t = 0;
+
+// Draw the left anchored Waves
+function drawLeftWaves(){
+
+  // angle controls diagonal direction
+  const angle = -Math.PI * t / 10 + Math.PI * 2/5; // oscilation
+
+  const cos = Math.cos(angle);
+  const sin = Math.sin(angle);
+
+  for (let i = 0; i < 3; i++) {
+    ctx.beginPath();
+
+    let offset = i * canvas.height * (5/12); // spacing
+
+    for (let x = 0; x < canvas.width; x += 10) {
+      // rotate coordinate system
+      let rx = x * cos;
+      let ry = x * sin;
+
+      let wave =
+        Math.sin((rx + ry) * 0.01 + t + i) * 40 +
+        Math.sin((rx + ry) * 0.005 + t * 0.5) * 25;
+
+      let y = ry + wave + offset;
+
+      ctx.lineTo(x, y);
+    }
+
+    ctx.stroke();
+  }
+}
+
+// Draw the right anchored waves
+function drawRightWaves() {
+  
+  // angle controls diagonal direction
+  const angle = Math.PI * t / 8; // oscilation
+
+  const cos = Math.cos(angle);
+  const sin = Math.sin(angle);
+
+  for (let i = 0; i < 3; i++) {
+    ctx.beginPath();
+
+    let offset = i * canvas.height * (5/12); // spacing
+
+    for (let x = 0; x < canvas.width; x += 10) {
+      // rotate coordinate system
+      let rx = x * cos;
+      let ry = x * sin;
+
+      let wave =
+        -Math.sin((rx + ry) * 0.01 + t + i) * 40 -
+        Math.sin((rx + ry) * 0.005 + t * 0.5) * 25;
+
+      let y = ry + wave + offset;
+
+      ctx.lineTo(canvas.width - x, y);
+    }
+
+    ctx.stroke();
+  }
+}
+
+// Draw the waves
+function drawWaves() {
+  
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+	
+  // Horizontal Waves
+  ctx.globalAlpha = 0.15;
+  ctx.strokeStyle = "#ffffff";
+  ctx.lineWidth = 2;
+  drawLeftWaves();
+
+  // Vertical Waves
+  ctx.globalAlpha = 0.12;
+  ctx.strokeStyle = "#ffffff";
+  ctx.lineWidth = 2;
+  drawRightWaves()
+
+  t += 0.01;
+  requestAnimationFrame(drawWaves);
+}
+
+// Draw the particles
+function drawParticles() {
+  pctx.clearRect(0, 0, pCanvas.width, pCanvas.height);
+
+  pctx.fillStyle = "rgba(255,255,255,0.4)";
+
+  for (let p of particles) {
+    p.x += p.dx;
+    p.y += p.dy;
+
+    if (p.x < 0) p.x = pCanvas.width;
+    if (p.x > pCanvas.width) p.x = 0;
+    if (p.y < 0) p.y = pCanvas.height;
+    if (p.y > pCanvas.height) p.y = 0;
+
+    pctx.beginPath();
+    pctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+    pctx.fill();
+  }
+
+  requestAnimationFrame(drawParticles);
+}
+
+// resize function
+function resize() {
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  pCanvas.width = window.innerWidth;
+  pCanvas.height = window.innerHeight;
+}
+
+
+resize();
+// Define the particles
+const particles = Array.from({ length: 80 }, () => ({
+  x: Math.random() * window.innerWidth,
+  y: Math.random() * window.innerHeight,
+  r: Math.random() * 2 + 1,
+  dx: (Math.random() - 0.5) * 0.3,
+  dy: (Math.random() - 0.5) * 0.3
+}));
+drawParticles();
+drawWaves();
+
+window.addEventListener("resize", resize);

www/scripts/problem.js

@@ -0,0 +1,50 @@
+let state = "problem"; // problem | steps | done
+
+function showProblem() {
+  const problemEl = document.getElementById("problem");
+  const stepsEl = document.getElementById("steps");
+
+  problemEl.innerHTML = `\\(${problemData.problem}\\)`;
+  stepsEl.innerHTML = "";
+
+  MathJax.typesetPromise();
+}
+
+function startSequence() {
+  setTimeout(() => {
+    showNextStep();
+  }, 3000); // thinking time
+}
+
+function showNextStep() {
+  const stepsEl = document.getElementById("steps");
+
+  if (stepIndex >= problemData.steps.length) {
+    // finished → request next problem
+    setTimeout(() => {
+      requestNextProblem();
+    }, 3000);
+
+    return;
+  }
+
+  const s = problemData.steps[stepIndex];
+
+  const html = `
+    <div class="step">
+      <div>\\(${s.before}\\)</div>
+      <div>${s.step}</div>
+      <div>\\(${s.after}\\)</div>
+    </div>
+    <hr/>
+  `;
+
+  stepsEl.innerHTML += html;
+
+  MathJax.typesetPromise();
+
+  stepIndex++;
+
+  setTimeout(showNextStep, 2000); // time between steps
+}
+

www/scripts/web_sockets.js

@@ -0,0 +1,31 @@
+const socket = new WebSocket("ws://localhost:8000/ws");
+let problemData = null;
+let stepIndex = 0;
+
+socket.onopen = () => {
+  console.log("Connected to server");
+
+  socket.send(JSON.stringify({
+    type: "query_problem"
+  }));
+};
+
+socket.onmessage = (event) => {
+  const msg = JSON.parse(event.data);
+
+  if (msg.type === "generated_problem") {
+    problemData = msg.data;
+    stepIndex = 0;
+
+    showProblem();
+
+    // start animation sequence
+    startSequence();
+  }
+};
+
+function requestNextProblem() {
+  socket.send(JSON.stringify({
+    type: "query_problem"
+  }));
+}