Before Big refactor

www/scripts/problem.js

@@ -11,14 +11,13 @@ function showProblem() {
   problemEl.innerHTML = `\\(${formatted}\\)`;
 
   // Initialize the main equation (this is what evolves)
-  mainEl.innerHTML = `\\(${formatted}\\)`;
+  mainEl.innerHTML = "";
 
   // Clear animation layer + explanation
   nextEl.innerHTML = "";
   nextEl.style.opacity = 0;
 
   expEl.innerHTML = "";
-  expEl.style.opacity = 0;
 
   MathJax.typesetPromise([problemEl, mainEl]);
 }
@@ -35,41 +34,49 @@ function showStep() {
 
   const step = problemData.steps[stepIndex];
 
-  // 1. Show explanation
-  expEl.innerHTML = step.step;
-  expEl.style.opacity = 1;
-
-  // 2. Prepare next equation
-  nextEl.innerHTML = `\\(${formatMath(step.after)}\\)`;
-  nextEl.classList.remove("fade-in", "move-up");
+  // 1. Start with the equation
+  mainEl.innerHTML = `\\(${formatMath(step.before)}\\)`;
+  MathJax.typesetPromise([mainEl]);
+  mainEl.style.opacity = 1;
   nextEl.style.opacity = 0;
 
-  MathJax.typesetPromise([nextEl]);
-
-  setTimeout(() => {
-    // 3. Fade in next equation (below)
-    nextEl.style.opacity = 1;
-    nextEl.classList.add("move-up");
-
-    // 4. Fade out old + explanation
-    mainEl.classList.add("fade-out");
-    expEl.style.opacity = 0;
-
+  setTimeout(() => {  
+    // 2. Show explanation
+    expEl.innerHTML = step.step;
+    expEl.style.opacity = 1;
+    
+    // 3. Prepare next equation
+    nextEl.innerHTML = `\\(${formatMath(step.after)}\\)`;
+    nextEl.classList.remove("move-up");
+    nextEl.style.opacity = 0;
+    
+    MathJax.typesetPromise([nextEl]);
+    
     setTimeout(() => {
-      // 5. Promote next → main
-      mainEl.innerHTML = nextEl.innerHTML;
-      MathJax.typesetPromise([mainEl]);
-
-      // reset styles
-      mainEl.classList.remove("fade-out");
-      nextEl.style.opacity = 0;
-
-      stepIndex++;
-
-      setTimeout(showStep, 1500);
-    }, 500);
-
-  }, 1000); // time to read explanation
+      // 3. Fade in next equation (below)
+      nextEl.style.opacity = 1;
+    
+      setTimeout(() => {
+        // 4. Fade out old and explanation
+	    mainEl.style.opacity = 0;
+	    expEl.style.opacity = 0;
+      
+        setTimeout(() => {
+		  
+		  // 5. Move up next equation
+		  nextEl.classList.add("move-up");
+		  
+          // 5. Promote next → main
+          mainEl.innerHTML = nextEl.innerHTML;
+          MathJax.typesetPromise([mainEl]);
+		  
+          stepIndex++;
+		  
+          setTimeout(showStep, 1500);
+        }, 1500); // Move up New Equation
+      }, 3000); // Fade Out Explanation and old
+	}, 1500); // Fade in Next Equation
+  }, 1500); // Show Explanation
 }
   
 function startSteps() {

www/scripts/timer.js

@@ -1,5 +1,5 @@
 // Copyright John Salguero All rights Reserved
-const radius = 25;
+const radius = 30;
 const circumference = 2 * Math.PI * radius;
 const circle = document.getElementById("timer-progress");
 
@@ -15,6 +15,9 @@ let timerInterval = null;
 function startTimer(duration) {
   let timeLeft = duration;
   const textEl = document.getElementById("timer-text");
+  textEl.textContent = timeLeft;
+  circle.style.stroke = startColor;
+  circle.style.strokeDashoffset = 0;
 
   // clear previous timer
   if (timerInterval) {
@@ -28,17 +31,18 @@ function startTimer(duration) {
     textEl.textContent = timeLeft;
 
     // 🔥 recompute progress EVERY tick
-    const progress = (duration - timeLeft) / duration;
+    const progress = (duration - (timeLeft - 1)) / duration;
+	const p = Math.max(0, Math.min(1, progress));
 
     // update circle
-    const offset = circumference * progress;
+    const offset = circumference * p;
     circle.style.strokeDashoffset = -offset;
 
     // color interpolation
     if (progress < 0.5) {
-      circle.style.stroke = lerpColor(startColor, middleColor, progress * 2);
+      circle.style.stroke = lerpColor(startColor, middleColor, p * 2);
     } else {
-      circle.style.stroke = lerpColor(middleColor, endColor, (progress - 0.5) * 2);
+      circle.style.stroke = lerpColor(middleColor, endColor, (p - 0.5) * 2);
     }
 
     // low-time pulse

www/scripts/web_sockets.js

@@ -22,8 +22,9 @@ socket.onmessage = (event) => {
     stepIndex = 0;
 
     showProblem();
-	initial_duration = msg.time;
 	startTimer(msg.time);
+	// Debug show problem timing
+	//startTimer(1);
   }
 };