Fade in and fade out

www/scripts/problem.js

@@ -1,15 +1,55 @@
-let state = "problem"; // problem | steps | done
 
 function showProblem() {
   const problemEl = document.getElementById("problem");
-  const stepsEl = document.getElementById("steps");
+  const stepsEl = document.getElementById("equation");
 
-  problemEl.innerHTML = `\\(${problemData.problem}\\)`;
+  const formatted = formatMath(problemData.problem);
+  problemEl.innerHTML = `\\(${formatted}\\)`;
   stepsEl.innerHTML = "";
 
   MathJax.typesetPromise();
 }
 
+function showStep() {
+  if (stepIndex >= problemData.steps.length) {
+    setTimeout(requestNextProblem, 3000);
+    return;
+  }
+
+  const eqEl = document.getElementById("equation");
+  const expEl = document.getElementById("explanation");
+
+  const step = problemData.steps[stepIndex];
+
+  expEl.innerHTML = step.step;
+
+  // STEP 1: fade out
+  eqEl.classList.remove("fade-in");
+  eqEl.classList.add("fade-out");
+
+  setTimeout(() => {
+    // STEP 2: update content
+    eqEl.innerHTML = `\\(${formatMath(step.after)}\\)`;
+    MathJax.typesetPromise();
+
+    // STEP 3: force reflow (CRUCIAL)
+    void eqEl.offsetWidth;
+
+    // STEP 4: fade back in
+    eqEl.classList.remove("fade-out");
+    eqEl.classList.add("fade-in");
+
+    stepIndex++;
+
+    setTimeout(showStep, 2000);
+  }, 500);
+}
+  
+function startSteps() {
+  stepIndex = 0;
+  showStep();
+}
+
 function startSequence() {
   setTimeout(() => {
     showNextStep();
@@ -29,17 +69,19 @@ function showNextStep() {
   }
 
   const s = problemData.steps[stepIndex];
+  const formatted_step_before = formatMath(s.before);
+  const formatted_step_after = formatMath(s.after);
 
   const html = `
-    <div class="step">
-      <div>\\(${s.before}\\)</div>
-      <div>${s.step}</div>
-      <div>\\(${s.after}\\)</div>
-    </div>
     <hr/>
+    <div class="step">
+      <div>\\(${formatted_step_before}\\)</div>
+      <div>${s.step}</div>
+      <div>\\(${formatted_step_after}\\)</div>
+    </div>
   `;
 
-  stepsEl.innerHTML += html;
+  stepsEl.innerHTML = html;
 
   MathJax.typesetPromise();
 
@@ -48,3 +90,19 @@ function showNextStep() {
   setTimeout(showNextStep, 2000); // time between steps
 }
 
+function formatMath(str) {
+  return str
+    .replace(/\*\*/g, "^")												// Exponent Fix
+    .replace(/(\d+)\s*\*\s*x/g, "$1x")  								// 4*x -> 4x
+    .replace(/x\s*\*\s*(\d+)/g, "$1x")  								// x*4 -> 4x
+    .replace(/\b1x\b/g, "x")											// 1x -> x
+    .replace(/(\d+)\s*\*\s*\(/g, "$1(") 								// 4*( -> 4(
+    .replace(/\)\s*\*\s*\(/g, ")(")     								// )*( -> )(
+    .replace(/x\s*\*\s*\(/g, "x(")										// x*( -> x(
+	
+	    // FRACTIONS (order matters!)
+    .replace(/\(([^()]+)\)\s*\/\s*\(([^()]+)\)/g, "\\frac{$1}{$2}")
+    .replace(/\(([^()]+)\)\s*\/\s*([a-zA-Z0-9]+)/g, "\\frac{$1}{$2}")
+    .replace(/([a-zA-Z0-9]+)\s*\/\s*\(([^()]+)\)/g, "\\frac{$1}{$2}")
+    .replace(/([a-zA-Z0-9]+)\s*\/\s*([a-zA-Z0-9]+)/g, "\\frac{$1}{$2}");
+}

www/scripts/web_sockets.js

@@ -21,7 +21,7 @@ socket.onmessage = (event) => {
     showProblem();
 
     // start animation sequence
-    startSequence();
+    startSteps();
   }
 };