Before Big refactor

algebraic_steps.py

@@ -24,6 +24,8 @@ def move_all_to_one_side(equation):
     step["after"] = new_expr
     
     step["step"] = f"Subtract {sstr(clean(right_expr))} from both sides"
+    step["left"] = f"-{sstr(clean(right_expr))}"
+    step["right"] = f"-{sstr(clean(right_expr))}"
     step["rule"] = "Subtraction Property of Equality"
     return step
    
@@ -43,6 +45,8 @@ def add_both_sides(equation, value):
     step["after"] = f"{sstr(new_left_expr)} = {sstr(new_right_expr)}"
     
     step["step"] = f"Add {sstr(value)} to both sides"
+    step["left"] = f"+{sstr(value)}"
+    step["right"] = f"+{sstr(value)}"
     step["rule"] = "Addition Property of Equality"
     return step
    
@@ -62,6 +66,8 @@ def subtract_both_sides(equation, value):
     step["after"] = f"{sstr(new_left_expr)} = {sstr(new_right_expr)}"
     
     step["step"] = f"Subtract {sstr(value)} from both sides"
+    step["left"] = f"-{sstr(value)}"
+    step["right"] = f"-{sstr(value)}"
     step["rule"] = "Subtraction Property of Equality"
     return step
     
@@ -81,6 +87,8 @@ def divide_both_sides(equation, value):
     step["after"] = f"{sstr(new_left_expr)} = {sstr(new_right_expr)}"
     
     step["step"] = f"Divide both sides by {sstr(value)}"
+    step["left"] = f"÷{sstr(value)}"
+    step["right] = f"÷{sstr(value)}"
     step["rule"] = "Division Property of Equality"
     return step
     
@@ -119,6 +127,8 @@ def multiply_both_sides(equation, value):
         
     step["after"] = f"{sstr(new_left_expr)} = {sstr(new_right_expr)}"
     step["step"] = f"Multiply both sides by {sstr(value)}"
+    step["left"] = f"×{sstr(value)}"
+    step["right"] = f"×{sstr(value)}"
     step["rule"] = "Multiplication Property of Equality"
     return step
     

main.py

@@ -68,7 +68,7 @@ def generate_problem_message():
     return problem
 
 def get_time_for_problem(problem):
-    return 30
+    return 10
 
 def main():
     problem_solved = False

www/index.html

@@ -10,20 +10,20 @@
   <canvas id="waveCanvas"></canvas>
   <canvas id="particleCanvas"></canvas>
   
-  
+  <!-- Timer -->
   <div id="timer">
-    <svg width="60" height="60">
+    <svg width="72" height="72">
       <circle
         id="timer-bg"
-        cx="30"
-        cy="30"
-        r="25"
+        cx="36"
+        cy="36"
+        r="30"
       />
       <circle
         id="timer-progress"
-        cx="30"
-        cy="30"
-        r="25"
+        cx="36"
+        cy="36"
+        r="30"
       />
     </svg>
     <div id="timer-text">∞</div>
@@ -31,8 +31,8 @@
   
   <div id="problem"></div>
   <div id="equation-main"></div>
-  <div id="equation-next"></div>
   <div id="explanation"></div>
+  <div id="equation-next"></div>
 
   <script src="scripts/timer.js"></script>
   <script src="scripts/background.js"></script>

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);
   }
 };
 

www/style/styles.css

@@ -16,8 +16,8 @@ html, body {
   position: absolute;
   top: 20px;
   right: 20px;
-  width: 60px;
-  height: 60px;
+  width: 72px;
+  height: 72px;
   z-index: 10;
 }
 
@@ -59,38 +59,25 @@ html, body {
   text-align: center;
 }
 
-#equation-main, #equation-next {
+#equation-main, #explanation,  #equation-next{
   position: absolute;
-  top: 30%;
+  top: 31.5%;
   left: 50%;
   transform: translateX(-50%);
   font-size: 48px;
-  transition: all 0.5s ease;
-}
-
-#equation-next {
-  opacity: 0;
-  transform: translate(-50%, 40px); /* start slightly below */
+  transition: all 1.5s ease;
 }
 
 #explanation {
-  position: absolute;
-  top: 45%;
-  left: 50%;
-  transform: translateX(-50%);
+  transform: translate(-50%, 80px);
   font-size: 24px;
   opacity: 0.8;
 }
 
-#steps {
-  position: absolute;
-  top: 27%;                 /* below the problem */
-  left: 50%;
-  transform: translateX(-50%);
-
-  width: 800px;
-  text-align: center;
-  font-size: 28px;
+#equation-next {
+  font-size: 48px;
+  transform: translate(-50%, 160px); /* start slightly below */
+  opacity: 0;
 }
 
 #waveCanvas {
@@ -115,17 +102,7 @@ html, body {
   animation: pulse 1s infinite;
 }
 
-.fade-out {
-  opacity: 0;
-  transform: translateX(-50%) scale(0.95);
-}
-
-.fade-in {
-  opacity: 1;
-  transform: translateX(-50%) scale(1);
-}
-
-.move-up {
+#equation-next.move-up {
   transform: translate(-50%, 0);
 }