Added timer

www/scripts/background.js

@@ -1,3 +1,4 @@
+// Copyright John Salguero All rights Reserved
 const canvas = document.getElementById("waveCanvas");
 const ctx = canvas.getContext("2d");
 

www/scripts/problem.js

@@ -1,13 +1,26 @@
-
+// Copyright John Salguero All rights Reserved
 function showProblem() {
   const problemEl = document.getElementById("problem");
-  const stepsEl = document.getElementById("equation");
+  const mainEl = document.getElementById("equation-main");
+  const nextEl = document.getElementById("equation-next");
+  const expEl = document.getElementById("explanation");
 
   const formatted = formatMath(problemData.problem);
-  problemEl.innerHTML = `\\(${formatted}\\)`;
-  stepsEl.innerHTML = "";
 
-  MathJax.typesetPromise();
+  // Set the top problem (static)
+  problemEl.innerHTML = `\\(${formatted}\\)`;
+
+  // Initialize the main equation (this is what evolves)
+  mainEl.innerHTML = `\\(${formatted}\\)`;
+
+  // Clear animation layer + explanation
+  nextEl.innerHTML = "";
+  nextEl.style.opacity = 0;
+
+  expEl.innerHTML = "";
+  expEl.style.opacity = 0;
+
+  MathJax.typesetPromise([problemEl, mainEl]);
 }
 
 function showStep() {
@@ -16,33 +29,47 @@ function showStep() {
     return;
   }
 
-  const eqEl = document.getElementById("equation");
+  const mainEl = document.getElementById("equation-main");
+  const nextEl = document.getElementById("equation-next");
   const expEl = document.getElementById("explanation");
 
   const step = problemData.steps[stepIndex];
 
+  // 1. Show explanation
   expEl.innerHTML = step.step;
+  expEl.style.opacity = 1;
 
-  // STEP 1: fade out
-  eqEl.classList.remove("fade-in");
-  eqEl.classList.add("fade-out");
+  // 2. Prepare next equation
+  nextEl.innerHTML = `\\(${formatMath(step.after)}\\)`;
+  nextEl.classList.remove("fade-in", "move-up");
+  nextEl.style.opacity = 0;
+
+  MathJax.typesetPromise([nextEl]);
 
   setTimeout(() => {
-    // STEP 2: update content
-    eqEl.innerHTML = `\\(${formatMath(step.after)}\\)`;
-    MathJax.typesetPromise();
+    // 3. Fade in next equation (below)
+    nextEl.style.opacity = 1;
+    nextEl.classList.add("move-up");
 
-    // STEP 3: force reflow (CRUCIAL)
-    void eqEl.offsetWidth;
+    // 4. Fade out old + explanation
+    mainEl.classList.add("fade-out");
+    expEl.style.opacity = 0;
 
-    // STEP 4: fade back in
-    eqEl.classList.remove("fade-out");
-    eqEl.classList.add("fade-in");
+    setTimeout(() => {
+      // 5. Promote next → main
+      mainEl.innerHTML = nextEl.innerHTML;
+      MathJax.typesetPromise([mainEl]);
 
-    stepIndex++;
+      // reset styles
+      mainEl.classList.remove("fade-out");
+      nextEl.style.opacity = 0;
 
-    setTimeout(showStep, 2000);
-  }, 500);
+      stepIndex++;
+
+      setTimeout(showStep, 1500);
+    }, 500);
+
+  }, 1000); // time to read explanation
 }
   
 function startSteps() {
@@ -50,46 +77,6 @@ function startSteps() {
   showStep();
 }
 
-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 formatted_step_before = formatMath(s.before);
-  const formatted_step_after = formatMath(s.after);
-
-  const html = `
-    <hr/>
-    <div class="step">
-      <div>\\(${formatted_step_before}\\)</div>
-      <div>${s.step}</div>
-      <div>\\(${formatted_step_after}\\)</div>
-    </div>
-  `;
-
-  stepsEl.innerHTML = html;
-
-  MathJax.typesetPromise();
-
-  stepIndex++;
-
-  setTimeout(showNextStep, 2000); // time between steps
-}
-
 function formatMath(str) {
   return str
     .replace(/\*\*/g, "^")												// Exponent Fix

www/scripts/timer.js

@@ -0,0 +1,65 @@
+// Copyright John Salguero All rights Reserved
+const radius = 25;
+const circumference = 2 * Math.PI * radius;
+const circle = document.getElementById("timer-progress");
+
+const startColor = { r: 34, g: 197, b: 94 };   // green
+const middleColor = { r: 234, g: 179, b: 8 };  // yellow
+const endColor   = { r: 239, g: 68,  b: 68 };  // red
+
+circle.style.strokeDasharray = circumference;
+circle.style.strokeDashoffset = 0;
+
+let timerInterval = null;
+
+function startTimer(duration) {
+  let timeLeft = duration;
+  const textEl = document.getElementById("timer-text");
+
+  // clear previous timer
+  if (timerInterval) {
+    clearInterval(timerInterval);
+  }
+
+  timerInterval = setInterval(() => {
+    timeLeft--;
+
+    // update number
+    textEl.textContent = timeLeft;
+
+    // 🔥 recompute progress EVERY tick
+    const progress = (duration - timeLeft) / duration;
+
+    // update circle
+    const offset = circumference * progress;
+    circle.style.strokeDashoffset = -offset;
+
+    // color interpolation
+    if (progress < 0.5) {
+      circle.style.stroke = lerpColor(startColor, middleColor, progress * 2);
+    } else {
+      circle.style.stroke = lerpColor(middleColor, endColor, (progress - 0.5) * 2);
+    }
+
+    // low-time pulse
+    if (timeLeft < 10) {
+      document.getElementById("timer").classList.add("low");
+    }
+
+    if (timeLeft <= 0) {
+	  document.getElementById("timer").classList.remove("low");
+      clearInterval(timerInterval);
+	  // start animation sequence
+      startSteps();
+    }
+
+  }, 1000);
+}
+
+function lerpColor(start, end, t) {
+  const r = Math.round(start.r + (end.r - start.r) * t);
+  const g = Math.round(start.g + (end.g - start.g) * t);
+  const b = Math.round(start.b + (end.b - start.b) * t);
+
+  return `rgb(${r}, ${g}, ${b})`;
+}

www/scripts/web_sockets.js

@@ -1,3 +1,4 @@
+// Copyright John Salguero All rights Reserved
 //const socket = new WebSocket("ws://localhost:8000/ws");
 const socket = new WebSocket("ws://10.0.0.50:8000/ws");
 let problemData = null;
@@ -13,15 +14,16 @@ socket.onopen = () => {
 
 socket.onmessage = (event) => {
   const msg = JSON.parse(event.data);
+  console.log("Received problem:", msg);
 
   if (msg.type === "generated_problem") {
+	  
     problemData = msg.data;
     stepIndex = 0;
 
     showProblem();
-
-    // start animation sequence
-    startSteps();
+	initial_duration = msg.time;
+	startTimer(msg.time);
   }
 };