From bc151473dcdd9a8c7ce8ee6dd1ad28fae5e27560 Mon Sep 17 00:00:00 2001 From: Accusedbold Date: Tue, 5 May 2026 15:43:42 -0400 Subject: [PATCH] Before Big refactor --- __pycache__/algebraic_steps.cpython-313.pyc | Bin 27573 -> 27988 bytes __pycache__/main.cpython-313.pyc | Bin 6077 -> 6077 bytes algebraic_steps.py | 10 +++ main.py | 2 +- www/index.html | 18 ++--- www/scripts/problem.js | 75 +++++++++++--------- www/scripts/timer.js | 14 ++-- www/scripts/web_sockets.js | 3 +- www/style/styles.css | 45 +++--------- 9 files changed, 83 insertions(+), 84 deletions(-) diff --git a/__pycache__/algebraic_steps.cpython-313.pyc b/__pycache__/algebraic_steps.cpython-313.pyc index b02f8cde895967af228c044f3c3bb13305530855..d4df446578448477f278a618f7cf557b1c68a929 100644 GIT binary patch delta 4243 zcmb7Hdr(x@8TalBVObu_WgjdH3oPiefFO&g_$&_ZqXLi;`CZo zH`AH12!?bTP>?4JGG##)bY)|!n{h618R<7w{vtK+8v0Im;5!TrILS&}ANNr^hrdCPcU8pQ4T0F*=xMOG%ei(_=f^Ah$ER zRh_cJ-731x$kKaScbdew{Cc>5yJ0WTj6a6G95p#vWN1F+0%?W|>j9p_Hl z#toCbqS2FNjqzrB_~f9N<4iKcc=u`j$(Kd8RMG!#&eC|NK67L%Wl+iygEY{=c5fg%$Zm|_G#k4ThnzjT4bx8O_B)kQWakB38zVY2+`AX5)@T`pM zo?tAbq%|@?VY9x8No@SK-mI;GOnPTD2>ncen8EOgmG;x-T@%bve}SmjPojXaK3;Ykm*O__`HPf#(7Trlb0p}OvByMD(Jc#c9HBxCVqd+M>sEuM54*=v>wKN9UlG$oX#S8Hs`p7U6#<`FmKq`PE@gv1F+ho=@g6tHnG##_ZE{lPl z^Qc)VlKRY4f}}K-l}BY#^M<0N>xUE+A&Obko=z?)3}O4YC6OU^BnUbjLR)fLECArwbsHeN*J{KQJ2_b?LyvH@|qQ6&d)m~zV;*j&;nb`Yub6) zqaT3R4%+gytuXN_Jz;ybgsrW*~7iB^V-AOqvf9g0MAzE2F~*CS~-TeY;}f zL{y;ovBO`6vgHVv_gryHKMUb`Eu9v(bVei=CGD`X2oFC6R^CECDp*y*He79b&-6~) z>>AP7no#G_{3dt`ujv^NyGI^z_||j?xEuN;==r5El+eSw7wyApwqX0dJHegFI=Wp306& zCHn`%5U`RKYajn*`TtU-hjG)tRt_*lbX%1h4(~{nO*;ZiJ{KmchEy8vwuTk5YV3@` z+BwoZRy?|C3`KP1(ovh$d9G`!(X^**_yJC zYz2za0vb5CV98e+8jj9aA^UKGI>dz~^?;8jyYW*OUgh-`3=Qrq3E_BTivv?dxiA*>#Nt`Z8FHWFmCYU}I5{oa^+m z#pbIeq?ev=EUn&y6XZx_m7FJA;OSS7H=69FM{tg8?ZeQLGQ!+TUcAx89r_@4yXn`O zsx=kRq}RLhz(K#$WYK;XJ}(Iuo8Dp!W_OZqbZ1K~Xcr%Yc@k4Wuuc*=-Z0g-5Iue;+wu?3RVy*qL9;uL zFstZ^&ZUfnUhiZXEB&~$phmXlc3e(G4 z%5j2DzP)~F<_dL1%*8lX?;qg&`{Wx3Pi8@qBi!%OFsyyajCSfJ(N>>q_q6SYOhwCQ zb7xa#Ult47$C^(TAK!G6yPcj-zqftQ)4H;D^svQ?Ce2fNvCxw|=an6PgS9f*0sp?^ z7fdG=b~?*sMN)=*QOM3=9*Y;ouN=DsE4K_C^glaSgC{gR|B>TW)JDf0jADA%_{d%* zOOah5cd5w@THTWmKGxo2*8UPi-89(K$vA~;JsBDc&Yf0Cs;X*&DTG%6;AZsm-lfb0 zHF?Y0`#~gUy!Kd#+<*^)la#QQ%L^_lrE=leAV+*a`Wx7do0IP&1h8A}3lF=}$u)Z1 zYh!NGA9<_UBJ4blohcZIfcsj~doWDmf@2OWge+^BS3KMHE%tw7;h&|lg z#YhatGtffPq_50$5meyO=|&d3Sw7xzPJPGdguf0K`$lWgD_trjYoj92{sdm+Ccp#D zQSe8EPXXSheg1}`x1i->$TfH+w!#5&;zzhZ-}RSioY10c7?bc{zelB$BfvwK_itCI zGg2yK|1Gh>K8}#z;7SQo<5IWirT&tm?;~|g-S>dJnBh9xG`|1!!zT`(ZTctq0Egie zg8w^PNt*sx*zeNGI>_VU4jDa{WR#!L_4|c zaK{)P92zD+qirvGj+WpMtdWnEMY0}cjR<&gC9Mc}xgsM7SiK15bTWx>76Bt!i4*io z#gF8Zl9fUl(+dc4kRwW3xN0yG(8WUB8uB-)-B*{H&1Bs#%K<2tfo|G2ARq1j0N=+c AS^xk5 delta 4094 zcmb7HeN0=|70>e*AI1iP4aQ*O7-KL2;_#IZ(i9dT2?SCaNE1S8jQs#B#wPdKSwdRz zA+;i#x+J<&#qzOaO_YHWtxPY;*wSretu}4VG)KwS^lfXl{k65yrnS?mYFfK zXu4T?$M>Cc?>)csanHH$zQo;lhtq$g)1|M1->q+c9Qf0~clE6t=cW^;19YCdqwnGN z=u1J^!#P&DGUC?=LatpL5Ja&#s-ZTnxo> z>SVYNa;oD4ZRSKfvD44Y`COTJJGF=d>?NFowx!!OC9o55(#dp#!v;esM~DtYh}RcM zR#^d(_3#Maj(e-$iJrRHa`yPlNNjCGEN4qXXF~ZSo#GYkHV(ACpV6#EKaoc&IUDWN z<)v2vw;8v;oY=n1SbnW`UVXJ;wlbEpF|qe@dtiZ2K^r-PxL)6=00ks#mkt%UQsaT3 zZ)cTh(Dkx`piQ5hudWBib7Dodg)25zTBbKu{p(UYCwm=N7zKZBghUYzO z^OTjMEUARU1kwzgC$M0<cqk!zk!d`>CIwW{RTyY=&FEDWp zrh>4NkJIBmP76mPqzz{Mg08WhEH-X=qkGYLt8bw*meZcFV)=m<@7aE+<<`^F6(vqL z>QDd~OY;W?2YF%}I7ZO8u{0=$w&Js$ljQVF-IUo{eZ6);C2pRtSn$RQ z8>iLN11Hi>Iq#D*tHr?I5a-OBWI6 zB_!v=W~7g=hzrhmCbNdMjTeY3Ulnt#6GUe(jF z%Enk>Q&I$Jtlc16B!1d{f$N;XO}_!;|Gy;sE$XnFK zY@O3Br|c(oo*KNHVWFG$^?#n|^?kjD;?15+?=wE6U(00h1z~4<%`}S~lv9C|BGU0A>3Q1ArCRl<51rStEr~0e8 zSLuy@=eQ48tYUUVgJcn22riQ2#@Z8ZDy8wE=m<}|V8$eh5e_+v#EW93H+0OEL4JVa zRQw(o^}=;i3m*kMVPk>(1ZCMt#|Y8`zB6dA*K8=ljb6qHDOfju$u>p@G?cXYMSRD_|~9tonNSOxI=Q{nZZm z&gk$@)?l)`6mo}Hl*jMFA49q1C1glQehXxda(u&@Gca;-%+Q1?oWPn4k}LEe?^M}g zM7MIe;(5MSpz@Rh3c;F8up+WLAfGbKVL6Xjq?l0%V{R2e4D#(eb<0TDuZafvt>k@rIarsO T$z^?L&j#XTg#I}=%tHGgdb$)x diff --git a/__pycache__/main.cpython-313.pyc b/__pycache__/main.cpython-313.pyc index 5d3abc5e6d3a964e84142e15e551e92a5293edd1..77817b7406b5d8a161ef96378daa0bda640b96b9 100644 GIT binary patch delta 26 gcmdn1zgM5@GcPX}0}#0W+Q_BK!^pMSfTx!m0Av0Jw*UYD delta 26 gcmdn1zgM5@GcPX}0}$;0xRFbhhf!{`0Z%VC0BSr3JOBUy diff --git a/algebraic_steps.py b/algebraic_steps.py index 82d0c5e..85553de 100644 --- a/algebraic_steps.py +++ b/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 diff --git a/main.py b/main.py index 3fe46c1..c4181aa 100644 --- a/main.py +++ b/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 diff --git a/www/index.html b/www/index.html index 58f1757..84d3b94 100644 --- a/www/index.html +++ b/www/index.html @@ -10,20 +10,20 @@ - +
- +
∞
@@ -31,8 +31,8 @@
-
+
diff --git a/www/scripts/problem.js b/www/scripts/problem.js index ea236e7..f9a61ba 100644 --- a/www/scripts/problem.js +++ b/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() { diff --git a/www/scripts/timer.js b/www/scripts/timer.js index 8d4a0cd..969b8cc 100644 --- a/www/scripts/timer.js +++ b/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 diff --git a/www/scripts/web_sockets.js b/www/scripts/web_sockets.js index 33e5fcc..e66dee5 100644 --- a/www/scripts/web_sockets.js +++ b/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); } }; diff --git a/www/style/styles.css b/www/style/styles.css index 70ab896..3723d29 100644 --- a/www/style/styles.css +++ b/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); }