/* geometrylab.jsx — GeometryTutor: the geometry workbench (three modules). Built on
window.BenchKit (loaded first), so this file is just the FIGURES + their field
computations. The GeometryFig dispatcher picks the sub-figure from spec.module; each
figure's computeFields() mirrors server/benches/geometry.js simulate() EXACTLY (same
660×540 unit space, same O / triangle / aim-point / tolerances) so the client and
server agree on every graded field. The construction is computed from the free point;
the learner drives a geometric observable to a target only the right model reaches. */
(function () {
const { useState, useMemo, useEffect, useRef } = React;
const K = window.BenchKit, C = K.C, SVG_BG = K.SVG_BG, btn = K.btn, fmt = K.fmt;
const TaskStrip = K.TaskStrip, StatMeter = K.StatMeter;
/* ── fixed scaffold (identical to the server bench) ── */
const O = { x: 330, y: 270 }, QAIM = { x: 348, y: 278 };
const TRI = { A: { x: 250, y: 70 }, B: { x: 120, y: 450 }, C: { x: 560, y: 430 } };
const TR = 170, PR = 130; // thales / pop circle radii
/* ── geometry kernel (mirrors the server kernel) ── */
const sub = (a, b) => ({ x: a.x - b.x, y: a.y - b.y });
const add = (a, b) => ({ x: a.x + b.x, y: a.y + b.y });
const mul = (a, s) => ({ x: a.x * s, y: a.y * s });
const dot = (a, b) => a.x * b.x + a.y * b.y;
const len = (a) => Math.hypot(a.x, a.y);
const dist = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
const unit = (a) => { const l = Math.hypot(a.x, a.y) || 1; return { x: a.x / l, y: a.y / l }; };
const perp = (a) => ({ x: -a.y, y: a.x });
const r1 = (x) => Math.round(x * 10) / 10;
const r2 = (x) => Math.round(x * 100) / 100;
function angleAt(V, P, Q) { const a = sub(P, V), b = sub(Q, V); const c = dot(a, b) / ((len(a) * len(b)) || 1); return Math.acos(Math.max(-1, Math.min(1, c))) * 180 / Math.PI; }
function lineCircle(P0, d, Oc, r) {
const f = sub(P0, Oc); const a = dot(d, d), b = 2 * dot(f, d), c = dot(f, f) - r * r;
const disc = b * b - 4 * a * c; if (disc < 0) return [];
const s = Math.sqrt(disc); const t1 = (-b - s) / (2 * a), t2 = (-b + s) / (2 * a);
return [add(P0, mul(d, t1)), add(P0, mul(d, t2))];
}
function tangents(P, Oc, r) { // [upper, lower] tangent points by screen-y (drawing only)
const dd = dist(P, Oc); if (dd <= r) return [];
const u = unit(sub(P, Oc)), n = perp(u); const cosA = r / dd, sinA = Math.sqrt(Math.max(0, 1 - cosA * cosA));
const T1 = add(Oc, add(mul(u, r * cosA), mul(n, r * sinA)));
const T2 = add(Oc, add(mul(u, r * cosA), mul(n, -r * sinA)));
return T1.y < T2.y ? [T1, T2] : [T2, T1];
}
function lineLine(A1, A2, B1, B2) { const d1 = sub(A2, A1), d2 = sub(B2, B1); const den = d1.x * d2.y - d1.y * d2.x; if (Math.abs(den) < 1e-9) return null; const t = ((B1.x - A1.x) * d2.y - (B1.y - A1.y) * d2.x) / den; return add(A1, mul(d1, t)); }
// arc path for an angle mark at vertex V between rays to P and Q
function arc(V, P, Q, rr) {
let a1 = Math.atan2(P.y - V.y, P.x - V.x), a2 = Math.atan2(Q.y - V.y, Q.x - V.x);
let diff = a2 - a1; while (diff <= -Math.PI) diff += 2 * Math.PI; while (diff > Math.PI) diff -= 2 * Math.PI;
const end = a1 + diff, sweep = diff > 0 ? 1 : 0;
const s = { x: V.x + rr * Math.cos(a1), y: V.y + rr * Math.sin(a1) }, e = { x: V.x + rr * Math.cos(end), y: V.y + rr * Math.sin(end) };
return `M ${s.x} ${s.y} A ${rr} ${rr} 0 0 ${sweep} ${e.x} ${e.y}`;
}
/* ── field computations — EXACTLY the server's per-module simulate() ── */
function fieldsThales(P, r) {
const A = { x: O.x - r, y: O.y }, B = { x: O.x + r, y: O.y };
const distOP = dist(P, O), angleAPB = angleAt(P, A, B);
const onTol = Math.max(4, r * 0.04), sideTol = Math.max(3, r * 0.03);
return { angleAPB: r1(angleAPB), distOP: r1(distOP), radius: r1(r), onCircle: Math.abs(distOP - r) <= onTol, isRight: Math.abs(angleAPB - 90) <= 2.5, inside: distOP < r - sideTol, outside: distOP > r + sideTol, pUpper: P.y < O.y };
}
function fieldsPop(P, r) {
const distPO = dist(P, O), power = distPO * distPO - r * r;
const isExternal = distPO > r + 0.5, tangentLen = power > 0 ? Math.sqrt(power) : 0;
const hits = lineCircle(P, unit(sub(QAIM, P)), O, r); let PA = 0, PB = 0, product = 0;
if (hits.length === 2) { let da = dist(P, hits[0]), db = dist(P, hits[1]); if (da > db) { const t = da; da = db; db = t; } PA = da; PB = db; product = PA * PB; }
const invariantHolds = isExternal && product > 0 && Math.abs(power - product) / Math.max(power, 1) < 0.02;
return { distPO: r1(distPO), radius: r1(r), power: Math.round(power), tangentLen: r1(tangentLen), isExternal, secPA: r1(PA), secPB: r1(PB), product: Math.round(product), invariantHolds };
}
function fieldsBisector(t) {
const { A, B, C: Cc } = TRI; const D = add(B, mul(sub(Cc, B), t));
const AB = dist(A, B), AC = dist(A, Cc), BD = dist(B, D), DC = dist(D, Cc);
const ratioBD_DC = DC > 1e-6 ? BD / DC : 999, ratioAB_AC = AC > 1e-6 ? AB / AC : 999;
const angleBAD = angleAt(A, B, D), angleDAC = angleAt(A, D, Cc);
return { AB: r1(AB), AC: r1(AC), BD: r1(BD), DC: r1(DC), ratioBD_DC: r2(ratioBD_DC), ratioAB_AC: r2(ratioAB_AC), angleBAD: r1(angleBAD), angleDAC: r1(angleDAC), isBisector: Math.abs(angleBAD - angleDAC) <= 1.5, ratiosMatch: Math.abs(ratioBD_DC - ratioAB_AC) <= 0.06 * ratioAB_AC + 0.02, D };
}
/* ── shared figure chrome ── */
const VB = "0 0 660 540";
function svgPt(ref, e) { const r = ref.current.getBoundingClientRect(); return { x: (e.clientX - r.left) / r.width * 660, y: (e.clientY - r.top) / r.height * 540 }; }
function Grid() {
const lines = [];
for (let x = 0; x <= 660; x += 30) lines.push();
for (let y = 0; y <= 540; y += 30) lines.push();
return {lines};
}
function Pt({ p, label, color, dx = 8, dy = -8 }) {
return {label ? {label} : null};
}
const Stage = (ref, onDown, children) => (
);
function RevealBtn({ on, onClick }) {
return ;
}
/* ===================== Module 1: Thales / inscribed angle ===================== */
function ThalesFig({ task, setTask, tasks, report, event, done }) {
const r = TR;
const [P, setP] = useState({ x: 330, y: 180 });
const [drag, setDrag] = useState(false), [show, setShow] = useState(false);
const ref = useRef(null);
const A = { x: O.x - r, y: O.y }, B = { x: O.x + r, y: O.y };
const fld = useMemo(() => fieldsThales(P, r), [P]);
useEffect(() => { report(fld); }, [P]); // eslint-disable-line
useEffect(() => {
if (!drag) return;
const move = (e) => { const p = svgPt(ref, e); setP({ x: Math.max(20, Math.min(640, p.x)), y: Math.max(20, Math.min(520, p.y)) }); };
const up = () => { setDrag(false); event("adjusted", "Moved P", { response: `∠APB ${fmt(fieldsThales(P, r).angleAPB)}°` }, C.blue); };
window.addEventListener("pointermove", move); window.addEventListener("pointerup", up);
return () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); };
}, [drag, P]); // eslint-disable-line
const t = tasks.find((x) => x.id === task) || tasks[0];
const where = fld.onCircle ? "on the circle" : fld.inside ? "inside" : "outside";
return (
<>
{Stage(ref, null, <>
{fld.isRight && 90°}
{show && <>
αβ
}
setDrag(true)}>
)}
P is {where} · ∠APB = {fmt(fld.angleAPB)}° — {fld.isRight ? "right angle (the angle in a semicircle)." : fld.inside ? "obtuse (vertex inside)." : "acute (vertex outside)."} Drag P.
{ setShow((s) => !s); if (!show) event("revealed", "Construction: radius OP + base angles", {}, C.gold); }} />
{fld.isExternal ? `PT² = ${Math.round(fld.tangentLen * fld.tangentLen)}, PA·PB = ${fld.product} — ${fld.invariantHolds ? "equal ✓ (power of the point)." : "…"}` : "P is inside the circle — no real tangent exists. Pull it out."} Drag P.
{ setShow((s) => !s); if (!show) event("revealed", "Construction: chords TA, TB + tangent–chord angle", {}, C.gold); }} />
);
}
/* ===================== Module 3: Angle-bisector ratio ===================== */
function BisectorFig({ task, setTask, tasks, report, event, done }) {
const { A, B, C: Cc } = TRI;
const [t, setT] = useState(0.3);
const [drag, setDrag] = useState(false), [show, setShow] = useState(false);
const ref = useRef(null);
const fld = useMemo(() => fieldsBisector(t), [t]);
const D = fld.D;
useEffect(() => { report(fld); }, [t]); // eslint-disable-line
useEffect(() => {
if (!drag) return;
const move = (e) => { const p = svgPt(ref, e); const bc = sub(Cc, B); const tt = Math.max(0.05, Math.min(0.95, dot(sub(p, B), bc) / dot(bc, bc))); setT(tt); };
const up = () => { setDrag(false); const f = fieldsBisector(t); event("adjusted", "Moved D along BC", { response: `BD/DC ${f.ratioBD_DC}` }, C.blue); };
window.addEventListener("pointermove", move); window.addEventListener("pointerup", up);
return () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); };
}, [drag, t]); // eslint-disable-line
// E = intersection of (line through C parallel to AD) with line BA — proof construction
const E = lineLine(Cc, add(Cc, sub(D, A)), B, A);
const tk = tasks.find((x) => x.id === task) || tasks[0];
return (
<>
{Stage(ref, null, <>
{show && E && <>
}
setDrag(true)}>
)}
∠BAD = {fmt(fld.angleBAD)}°, ∠DAC = {fmt(fld.angleDAC)}° {fld.isBisector ? "— equal ✓, AD bisects ∠A." : "— slide D until equal."} · BD/DC = {fld.ratioBD_DC}, AB/AC = {fld.ratioAB_AC}{fld.ratiosMatch ? " (match ✓)" : ""}. Drag D.
{ setShow((s) => !s); if (!show) event("revealed", "Construction: CE ∥ AD, △AEC isosceles", {}, C.gold); }} />