game.js

// ================================================
// EUCLID'S ELEMENTS — BOOK I
// ================================================

// ---------- GEOMETRY STATE ----------

var geo = {
    points: [],
    lines: [],
    circles: [],
    nextLabelIndex: 0,
    history: [],
};

var canvas, ctx;
var currentTool = "point";
var toolState = { firstPoint: null };
var mouseX = 0;
var mouseY = 0;
var hoveredPoint = null;
var snapTarget = null;

var SNAP_RADIUS = 15;
var POINT_RADIUS = 5;
var LABELS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

// ---------- MATH HELPERS ----------

function dist(x1, y1, x2, y2) {
    var dx = x2 - x1;
    var dy = y2 - y1;
    return Math.sqrt(dx * dx + dy * dy);
}

function getPointById(id) {
    for (var i = 0; i < geo.points.length; i++) {
        if (geo.points[i].id === id) return geo.points[i];
    }
    return null;
}

function getNextLabel() {
    var label = LABELS[geo.nextLabelIndex % LABELS.length];
    geo.nextLabelIndex++;
    return label;
}

// ---------- INTERSECTION MATH ----------

function circleCircleIntersections(c1x, c1y, r1, c2x, c2y, r2) {
    var d = dist(c1x, c1y, c2x, c2y);
    if (d > r1 + r2 + 0.01) return [];
    if (d < Math.abs(r1 - r2) - 0.01) return [];
    if (d < 0.01) return [];

    var a = (r1 * r1 - r2 * r2 + d * d) / (2 * d);
    var hSq = r1 * r1 - a * a;
    if (hSq < 0) hSq = 0;
    var h = Math.sqrt(hSq);

    var mx = c1x + a * (c2x - c1x) / d;
    var my = c1y + a * (c2y - c1y) / d;

    var results = [];
    results.push({
        x: mx + h * (c2y - c1y) / d,
        y: my - h * (c2x - c1x) / d
    });
    if (h > 0.01) {
        results.push({
            x: mx - h * (c2y - c1y) / d,
            y: my + h * (c2x - c1x) / d
        });
    }
    return results;
}

function lineCircleIntersections(p1x, p1y, p2x, p2y, cx, cy, r) {
    var dx = p2x - p1x;
    var dy = p2y - p1y;
    var fx = p1x - cx;
    var fy = p1y - cy;

    var a = dx * dx + dy * dy;
    var b = 2 * (fx * dx + fy * dy);
    var c = fx * fx + fy * fy - r * r;
    var disc = b * b - 4 * a * c;

    if (disc < 0) return [];

    var results = [];
    var sqrtDisc = Math.sqrt(disc);
    var t1 = (-b - sqrtDisc) / (2 * a);
    var t2 = (-b + sqrtDisc) / (2 * a);

    [t1, t2].forEach(function(t) {
        var ix = p1x + t * dx;
        var iy = p1y + t * dy;
        if (ix >= -20 && ix <= 800 && iy >= -20 && iy <= 520) {
            results.push({ x: ix, y: iy });
        }
    });

    return results;
}

function lineLineIntersection(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y) {
    var denom = (p1x - p2x) * (p3y - p4y) - (p1y - p2y) * (p3x - p4x);
    if (Math.abs(denom) < 0.01) return [];

    var t = ((p1x - p3x) * (p3y - p4y) - (p1y - p3y) * (p3x - p4x)) / denom;
    var ix = p1x + t * (p2x - p1x);
    var iy = p1y + t * (p2y - p1y);

    if (ix >= 0 && ix <= 800 && iy >= 0 && iy <= 520) {
        return [{ x: ix, y: iy }];
    }
    return [];
}

// ---------- FIND ALL INTERSECTIONS ----------

function getAllIntersections() {
    var pts = [];

    // Circle-circle
    for (var i = 0; i < geo.circles.length; i++) {
        for (var j = i + 1; j < geo.circles.length; j++) {
            var c1 = geo.circles[i];
            var c2 = geo.circles[j];
            var cen1 = getPointById(c1.centerId);
            var edge1 = getPointById(c1.edgeId);
            var cen2 = getPointById(c2.centerId);
            var edge2 = getPointById(c2.edgeId);
            if (cen1 && edge1 && cen2 && edge2) {
                var r1 = dist(cen1.x, cen1.y, edge1.x, edge1.y);
                var r2 = dist(cen2.x, cen2.y, edge2.x, edge2.y);
                var ints = circleCircleIntersections(cen1.x, cen1.y, r1, cen2.x, cen2.y, r2);
                pts = pts.concat(ints);
            }
        }
    }

    // Line-circle
    for (var i = 0; i < geo.lines.length; i++) {
        for (var j = 0; j < geo.circles.length; j++) {
            var l = geo.lines[i];
            var c = geo.circles[j];
            var p1 = getPointById(l.p1id);
            var p2 = getPointById(l.p2id);
            var cen = getPointById(c.centerId);
            var edge = getPointById(c.edgeId);
            if (p1 && p2 && cen && edge) {
                var r = dist(cen.x, cen.y, edge.x, edge.y);
                var ints = lineCircleIntersections(p1.x, p1.y, p2.x, p2.y, cen.x, cen.y, r);
                pts = pts.concat(ints);
            }
        }
    }

    // Line-line
    for (var i = 0; i < geo.lines.length; i++) {
        for (var j = i + 1; j < geo.lines.length; j++) {
            var l1 = geo.lines[i];
            var l2 = geo.lines[j];
            var p1 = getPointById(l1.p1id);
            var p2 = getPointById(l1.p2id);
            var p3 = getPointById(l2.p1id);
            var p4 = getPointById(l2.p2id);
            if (p1 && p2 && p3 && p4) {
                var ints = lineLineIntersection(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);
                pts = pts.concat(ints);
            }
        }
    }

    // Remove intersections too close to existing points
    var filtered = [];
    for (var i = 0; i < pts.length; i++) {
        var tooClose = false;
        for (var j = 0; j < geo.points.length; j++) {
            if (dist(pts[i].x, pts[i].y, geo.points[j].x, geo.points[j].y) < SNAP_RADIUS) {
                tooClose = true;
                break;
            }
        }
        if (!tooClose) {
            var duplicate = false;
            for (var j = 0; j < filtered.length; j++) {
                if (dist(pts[i].x, pts[i].y, filtered[j].x, filtered[j].y) < SNAP_RADIUS) {
                    duplicate = true;
                    break;
                }
            }
            if (!duplicate) filtered.push(pts[i]);
        }
    }

    return filtered;
}

// ---------- SNAP SYSTEM ----------

function findNearestPoint(x, y) {
    var best = null;
    var bestDist = SNAP_RADIUS;
    for (var i = 0; i < geo.points.length; i++) {
        var d = dist(x, y, geo.points[i].x, geo.points[i].y);
        if (d < bestDist) {
            bestDist = d;
            best = geo.points[i];
        }
    }
    return best;
}

function findNearestIntersection(x, y) {
    var intersections = getAllIntersections();
    var best = null;
    var bestDist = SNAP_RADIUS;
    for (var i = 0; i < intersections.length; i++) {
        var d = dist(x, y, intersections[i].x, intersections[i].y);
        if (d < bestDist) {
            bestDist = d;
            best = intersections[i];
        }
    }
    return best;
}

// ---------- ADD GEOMETRY ----------

function addPoint(x, y, label, isGiven) {
    var id = "pt_" + Date.now() + "_" + Math.floor(Math.random() * 10000);
    if (!label) label = getNextLabel();
    var pt = { id: id, x: x, y: y, label: label, isGiven: !!isGiven };
    geo.points.push(pt);
    if (!isGiven) geo.history.push({ type: "point", id: id });
    return pt;
}

function addLine(p1id, p2id, isGiven) {
    var id = "ln_" + Date.now() + "_" + Math.floor(Math.random() * 10000);
    var ln = { id: id, p1id: p1id, p2id: p2id, isGiven: !!isGiven };
    geo.lines.push(ln);
    if (!isGiven) geo.history.push({ type: "line", id: id });
    return ln;
}

function addCircle(centerId, edgeId, isGiven) {
    var id = "cr_" + Date.now() + "_" + Math.floor(Math.random() * 10000);
    var cr = { id: id, centerId: centerId, edgeId: edgeId, isGiven: !!isGiven };
    geo.circles.push(cr);
    if (!isGiven) geo.history.push({ type: "circle", id: id });
    return cr;
}

// ---------- UNDO ----------

function undo() {
    if (geo.history.length === 0) return;
    var last = geo.history.pop();

    if (last.type === "point") {
        var pid = last.id;
        geo.circles = geo.circles.filter(function(c) {
            return c.centerId !== pid && c.edgeId !== pid;
        });
        geo.lines = geo.lines.filter(function(l) {
            return l.p1id !== pid && l.p2id !== pid;
        });
        geo.points = geo.points.filter(function(p) { return p.id !== pid; });
        geo.nextLabelIndex = Math.max(0, geo.nextLabelIndex - 1);
    } else if (last.type === "line") {
        geo.lines = geo.lines.filter(function(l) { return l.id !== last.id; });
    } else if (last.type === "circle") {
        geo.circles = geo.circles.filter(function(c) { return c.id !== last.id; });
    }

    toolState.firstPoint = null;
    render();
}

function clearConstruction() {
    geo.points = geo.points.filter(function(p) { return p.isGiven; });
    geo.lines = geo.lines.filter(function(l) { return l.isGiven; });
    geo.circles = geo.circles.filter(function(c) { return c.isGiven; });
    geo.history = [];
    geo.nextLabelIndex = geo.points.length;
    toolState.firstPoint = null;
    render();
}

// ---------- CANVAS RENDERING ----------

function render() {
    if (!canvas || !ctx) return;
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Subtle grid
    ctx.strokeStyle = "#e8e4dc";
    ctx.lineWidth = 0.5;
    for (var x = 0; x < canvas.width; x += 40) {
        ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height); ctx.stroke();
    }
    for (var y = 0; y < canvas.height; y += 40) {
        ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(canvas.width, y); ctx.stroke();
    }

    // Circles
    for (var i = 0; i < geo.circles.length; i++) {
        var c = geo.circles[i];
        var center = getPointById(c.centerId);
        var edge = getPointById(c.edgeId);
        if (center && edge) {
            var r = dist(center.x, center.y, edge.x, edge.y);
            ctx.beginPath();
            ctx.arc(center.x, center.y, r, 0, Math.PI * 2);
            ctx.strokeStyle = c.isGiven ? "#2c2c2c" : "#4a90d9";
            ctx.lineWidth = c.isGiven ? 2 : 1.5;
            ctx.stroke();
        }
    }

    // Lines
    for (var i = 0; i < geo.lines.length; i++) {
        var l = geo.lines[i];
        var p1 = getPointById(l.p1id);
        var p2 = getPointById(l.p2id);
        if (p1 && p2) {
            ctx.beginPath();
            ctx.moveTo(p1.x, p1.y);
            ctx.lineTo(p2.x, p2.y);
            ctx.strokeStyle = l.isGiven ? "#2c2c2c" : "#4a90d9";
            ctx.lineWidth = l.isGiven ? 2 : 1.5;
            ctx.stroke();
        }
    }

    // Intersection indicators (small red circles)
    var intersections = getAllIntersections();
    for (var i = 0; i < intersections.length; i++) {
        var pt = intersections[i];
        ctx.beginPath();
        ctx.arc(pt.x, pt.y, 4, 0, Math.PI * 2);
        ctx.strokeStyle = "#d9534f";
        ctx.lineWidth = 1.5;
        ctx.stroke();
    }

    // Points
    for (var i = 0; i < geo.points.length; i++) {
        var p = geo.points[i];
        ctx.beginPath();
        ctx.arc(p.x, p.y, POINT_RADIUS, 0, Math.PI * 2);
        ctx.fillStyle = p.isGiven ? "#2c2c2c" : "#4a90d9";
        ctx.fill();

        ctx.font = "bold 16px 'Cormorant Garamond', serif";
        ctx.fillStyle = "#2c2c2c";
        ctx.fillText(p.label, p.x + 10, p.y - 10);
    }

    // Tool preview (ghost line or circle)
    if (toolState.firstPoint) {
        var fp = toolState.firstPoint;
        ctx.setLineDash([5, 5]);
        ctx.strokeStyle = "rgba(74, 144, 217, 0.5)";
        ctx.lineWidth = 1.5;

        if (currentTool === "line") {
            ctx.beginPath();
            ctx.moveTo(fp.x, fp.y);
            ctx.lineTo(mouseX, mouseY);
            ctx.stroke();
        } else if (currentTool === "circle") {
            var r = dist(fp.x, fp.y, mouseX, mouseY);
            ctx.beginPath();
            ctx.arc(fp.x, fp.y, r, 0, Math.PI * 2);
            ctx.stroke();
        }
        ctx.setLineDash([]);
    }

    // Hover highlight
    if (hoveredPoint) {
        ctx.beginPath();
        ctx.arc(hoveredPoint.x, hoveredPoint.y, SNAP_RADIUS, 0, Math.PI * 2);
        ctx.strokeStyle = "rgba(74, 144, 217, 0.3)";
        ctx.lineWidth = 2;
        ctx.stroke();
    }
    if (snapTarget) {
        ctx.beginPath();
        ctx.arc(snapTarget.x, snapTarget.y, SNAP_RADIUS, 0, Math.PI * 2);
        ctx.strokeStyle = "rgba(217, 83, 79, 0.4)";
        ctx.lineWidth = 2;
        ctx.stroke();
    }
}
// ---------- MOUSE HANDLING ----------

function getMousePos(e) {
    var rect = canvas.getBoundingClientRect();
    var scaleX = canvas.width / rect.width;
    var scaleY = canvas.height / rect.height;
    return {
        x: (e.clientX - rect.left) * scaleX,
        y: (e.clientY - rect.top) * scaleY
    };
}

function handleMouseMove(e) {
    var pos = getMousePos(e);
    mouseX = pos.x;
    mouseY = pos.y;

    hoveredPoint = findNearestPoint(pos.x, pos.y);
    snapTarget = null;

    if (!hoveredPoint) {
        snapTarget = findNearestIntersection(pos.x, pos.y);
    }

    // Update hint text based on tool state
    var hintEl = document.getElementById("hint-text");
    if (currentTool === "point") {
        if (snapTarget) {
            hintEl.textContent = "Click to place a point at this intersection.";
        } else if (hoveredPoint) {
            hintEl.textContent = "Point " + hoveredPoint.label + " — already placed.";
        } else {
            hintEl.textContent = "Click to place a free point.";
        }
    } else if (currentTool === "line") {
        if (toolState.firstPoint) {
            if (hoveredPoint) {
                hintEl.textContent = "Click " + hoveredPoint.label + " to complete line from " + toolState.firstPoint.label + ".";
            } else if (snapTarget) {
                hintEl.textContent = "Click intersection to create point and complete line from " + toolState.firstPoint.label + ".";
            } else {
                hintEl.textContent = "Click a point to complete line from " + toolState.firstPoint.label + ". (Or click empty space for free point.)";
            }
        } else {
            if (hoveredPoint) {
                hintEl.textContent = "Click " + hoveredPoint.label + " to start a line.";
            } else {
                hintEl.textContent = "Click a point to start a line.";
            }
        }
    } else if (currentTool === "circle") {
        if (toolState.firstPoint) {
            var r = Math.round(dist(toolState.firstPoint.x, toolState.firstPoint.y, mouseX, mouseY));
            if (hoveredPoint) {
                hintEl.textContent = "Click " + hoveredPoint.label + " to set radius. Circle centered at " + toolState.firstPoint.label + " (r≈" + r + ").";
            } else if (snapTarget) {
                hintEl.textContent = "Click intersection to set radius. Circle centered at " + toolState.firstPoint.label + " (r≈" + r + ").";
            } else {
                hintEl.textContent = "Click to set radius for circle centered at " + toolState.firstPoint.label + " (r≈" + r + ").";
            }
        } else {
            if (hoveredPoint) {
                hintEl.textContent = "Click " + hoveredPoint.label + " as center of circle.";
            } else {
                hintEl.textContent = "Click a point to set as center of circle.";
            }
        }
    }

    render();
}

function handleClick(e) {
    var pos = getMousePos(e);
    var clickedPoint = findNearestPoint(pos.x, pos.y);
    var clickedSnap = null;

    if (!clickedPoint) {
        clickedSnap = findNearestIntersection(pos.x, pos.y);
    }

    if (currentTool === "point") {
        handlePointTool(pos, clickedPoint, clickedSnap);
    } else if (currentTool === "line") {
        handleLineTool(pos, clickedPoint, clickedSnap);
    } else if (currentTool === "circle") {
        handleCircleTool(pos, clickedPoint, clickedSnap);
    }

    render();
}

// ---------- POINT TOOL ----------

function handlePointTool(pos, clickedPoint, clickedSnap) {
    if (clickedPoint) {
        // Already exists, do nothing
        return;
    }
    if (clickedSnap) {
        addPoint(clickedSnap.x, clickedSnap.y);
    } else {
        addPoint(pos.x, pos.y);
    }
}

// ---------- LINE TOOL ----------

function handleLineTool(pos, clickedPoint, clickedSnap) {
    var target = null;

    if (clickedPoint) {
        target = clickedPoint;
    } else if (clickedSnap) {
        target = addPoint(clickedSnap.x, clickedSnap.y);
    } else {
        // For lines, we require clicking on a point or intersection
        // but let's allow free points too for flexibility
        target = addPoint(pos.x, pos.y);
    }

    if (!toolState.firstPoint) {
        // First click — set start point
        toolState.firstPoint = target;
    } else {
        // Second click — complete the line
        if (target.id !== toolState.firstPoint.id) {
            addLine(toolState.firstPoint.id, target.id);
        }
        toolState.firstPoint = null;
    }
}

// ---------- CIRCLE TOOL ----------

function handleCircleTool(pos, clickedPoint, clickedSnap) {
    var target = null;

    if (clickedPoint) {
        target = clickedPoint;
    } else if (clickedSnap) {
        target = addPoint(clickedSnap.x, clickedSnap.y);
    } else {
        target = addPoint(pos.x, pos.y);
    }

    if (!toolState.firstPoint) {
        // First click — set center
        toolState.firstPoint = target;
    } else {
        // Second click — set edge point (radius)
        if (target.id !== toolState.firstPoint.id) {
            addCircle(toolState.firstPoint.id, target.id);
        }
        toolState.firstPoint = null;
    }
}

// ---------- TOOL SELECTION ----------

function setTool(tool) {
    currentTool = tool;
    toolState.firstPoint = null;

    // Update toolbar button styles
    var btns = document.querySelectorAll(".tool-btn");
    btns.forEach(function(btn) {
        btn.classList.remove("active");
        if (btn.getAttribute("data-tool") === tool) {
            btn.classList.add("active");
        }
    });

    // Update hint
    var hintEl = document.getElementById("hint-text");
    if (tool === "point") {
        hintEl.textContent = "Click on the canvas to place a point, or click an intersection.";
    } else if (tool === "line") {
        hintEl.textContent = "Click a point to start a line, then click another point to finish it. [Postulate 1]";
    } else if (tool === "circle") {
        hintEl.textContent = "Click a point for the center, then click another point to set the radius. [Postulate 3]";
    }

    render();
}

// ---------- KEYBOARD SHORTCUTS ----------

function handleKeypress(e) {
    if (e.key === "p" || e.key === "P") setTool("point");
    if (e.key === "l" || e.key === "L") setTool("line");
    if (e.key === "c" || e.key === "C") setTool("circle");
    if (e.key === "z" && (e.ctrlKey || e.metaKey)) {
        e.preventDefault();
        undo();
    }
}

// ---------- SETUP CANVAS EVENTS ----------

function initCanvas() {
    canvas = document.getElementById("geo-canvas");
    ctx = canvas.getContext("2d");

    canvas.addEventListener("mousemove", handleMouseMove);
    canvas.addEventListener("click", handleClick);
    document.addEventListener("keydown", handleKeypress);

    // Touch support for mobile
    canvas.addEventListener("touchstart", function(e) {
        e.preventDefault();
        var touch = e.touches[0];
        var mouseEvent = new MouseEvent("click", {
            clientX: touch.clientX,
            clientY: touch.clientY
        });
        canvas.dispatchEvent(mouseEvent);
    });

    canvas.addEventListener("touchmove", function(e) {
        e.preventDefault();
        var touch = e.touches[0];
        var mouseEvent = new MouseEvent("mousemove", {
            clientX: touch.clientX,
            clientY: touch.clientY
        });
        canvas.dispatchEvent(mouseEvent);
    });
}

// ---------- TOOLBAR BUTTON EVENTS ----------

function initToolbar() {
    var toolBtns = document.querySelectorAll(".tool-btn[data-tool]");
    toolBtns.forEach(function(btn) {
        btn.addEventListener("click", function() {
            setTool(btn.getAttribute("data-tool"));
        });
    });

    document.getElementById("undo-btn").addEventListener("click", function() {
        undo();
    });

    document.getElementById("clear-canvas-btn").addEventListener("click", function() {
        if (confirm("Clear all your construction? (Given elements will remain.)")) {
            clearConstruction();
        }
    });
}
// ---------- FACT DATABASES ----------

var definitions = [
    { id: "def1",  label: "Definition 1",  text: "A point is that which has no part." },
    { id: "def2",  label: "Definition 2",  text: "A line is breadthless length." },
    { id: "def4",  label: "Definition 4",  text: "A straight line lies evenly with the points on itself." },
    { id: "def10", label: "Definition 10", text: "When a straight line standing on another makes adjacent angles equal, each is a right angle." },
    { id: "def15", label: "Definition 15", text: "A circle is a plane figure contained by one line such that all straight lines from the center to the circumference are equal." },
    { id: "def20", label: "Definition 20", text: "Of trilateral figures, an equilateral triangle is that which has its three sides equal." },
    { id: "def21", label: "Definition 21", text: "An isosceles triangle is that which has two of its sides equal." },
];

var postulates = [
    { id: "post1", label: "Postulate 1", text: "To draw a straight line from any point to any point." },
    { id: "post2", label: "Postulate 2", text: "To produce a finite straight line continuously in a straight line." },
    { id: "post3", label: "Postulate 3", text: "To describe a circle with any center and radius." },
    { id: "post4", label: "Postulate 4", text: "All right angles are equal to one another." },
    { id: "post5", label: "Postulate 5", text: "If a straight line falling on two straight lines makes the interior angles on the same side less than two right angles, the lines if produced meet on that side." },
];

var commonNotions = [
    { id: "cn1", label: "Common Notion 1", text: "Things which are equal to the same thing are also equal to one another." },
    { id: "cn2", label: "Common Notion 2", text: "If equals are added to equals, the wholes are equal." },
    { id: "cn3", label: "Common Notion 3", text: "If equals are subtracted from equals, the remainders are equal." },
    { id: "cn4", label: "Common Notion 4", text: "Things which coincide with one another are equal to one another." },
    { id: "cn5", label: "Common Notion 5", text: "The whole is greater than the part." },
];

// ---------- PROPOSITIONS ----------

var propositions = [
    {
        id: 1,
        title: "Proposition 1",
        statement: "On a given finite straight line, to construct an equilateral triangle.",
        type: "construction",
        unlockText: "🔧 Tool Unlocked: Equilateral Triangle Construction — You can now construct equilateral triangles on any line segment.",

        // What the player is given on the canvas
        givenSetup: function() {
            var A = addPoint(250, 300, "A", true);
            var B = addPoint(510, 300, "B", true);
            addLine(A.id, B.id, true);
        },

        // Validate the construction
        validateConstruction: function() {
            // Need: two circles and a point at their intersection
            // forming an equilateral triangle with A and B
            if (geo.circles.length < 2) {
                return { success: false, message: "You need two circles — one centered at each endpoint." };
            }

            var A = geo.points[0]; // first given point
            var B = geo.points[1]; // second given point
            var ab = dist(A.x, A.y, B.x, B.y);

            // Check for circle centered at A with radius AB
            var hasCircleA = false;
            var hasCircleB = false;

            for (var i = 0; i < geo.circles.length; i++) {
                var c = geo.circles[i];
                var center = getPointById(c.centerId);
                var edge = getPointById(c.edgeId);
                if (!center || !edge) continue;
                var r = dist(center.x, center.y, edge.x, edge.y);

                if (center.id === A.id && Math.abs(r - ab) < 5) hasCircleA = true;
                if (center.id === B.id && Math.abs(r - ab) < 5) hasCircleB = true;
            }

            if (!hasCircleA || !hasCircleB) {
                return { success: false, message: "You need a circle centered at A with radius AB, and a circle centered at B with radius BA." };
            }

            // Check for equilateral triangle vertex
            var foundVertex = false;
            var tolerance = 8;

            for (var i = 0; i < geo.points.length; i++) {
                var p = geo.points[i];
                if (p.id === A.id || p.id === B.id) continue;
                var dA = dist(p.x, p.y, A.x, A.y);
                var dB = dist(p.x, p.y, B.x, B.y);

                if (Math.abs(dA - ab) < tolerance && Math.abs(dB - ab) < tolerance) {
                    // Check that lines exist from this point to A and B
                    var hasLineToA = false;
                    var hasLineToB = false;

                    for (var j = 0; j < geo.lines.length; j++) {
                        var l = geo.lines[j];
                        if ((l.p1id === p.id && l.p2id === A.id) || (l.p2id === p.id && l.p1id === A.id)) {
                            hasLineToA = true;
                        }
                        if ((l.p1id === p.id && l.p2id === B.id) || (l.p2id === p.id && l.p1id === B.id)) {
                            hasLineToB = true;
                        }
                    }

                    if (hasLineToA && hasLineToB) {
                        foundVertex = true;
                        break;
                    }
                }
            }

            if (!foundVertex) {
                return { success: false, message: "Place a point at the intersection of the circles, and draw lines from it to both A and B to complete the triangle." };
            }

            return { success: true, message: "Excellent construction! The equilateral triangle is complete." };
        },

        requiredFacts: ["post1", "post3", "def15", "def20", "cn1"],

        proofSteps: [
            { id: "p1s1", text: "Let AB be the given finite straight line." },
            { id: "p1s2", text: "With center A and radius AB, describe circle BCD. [Postulate 3]" },
            { id: "p1s3", text: "With center B and radius BA, describe circle ACE. [Postulate 3]" },
            { id: "p1s4", text: "Let C be the point at which the circles intersect." },
            { id: "p1s5", text: "Draw the straight line CA from C to A. [Postulate 1]" },
            { id: "p1s6", text: "Draw the straight line CB from C to B. [Postulate 1]" },
            { id: "p1s7", text: "Since A is the center of circle BCD, AC equals AB. [Definition 15]" },
            { id: "p1s8", text: "Since B is the center of circle ACE, BC equals BA. [Definition 15]" },
            { id: "p1s9", text: "Both AC and BC equal AB, so AC also equals BC. [Common Notion 1]" },
            { id: "p1s10", text: "Therefore AB, BC, and AC are equal — triangle ABC is equilateral. [Definition 20] ∎" },
        ],

        distractorSteps: [
            { id: "p1d1", text: "Extend line AB beyond B to a new point D. [Postulate 2]" },
            { id: "p1d2", text: "Since all right angles are equal, angle ACB is right. [Postulate 4]" },
            { id: "p1d3", text: "The whole AB is greater than the part CB. [Common Notion 5]" },
        ],
    },

    {
        id: 2,
        title: "Proposition 2",
        statement: "To place at a given point (as an extremity) a straight line equal to a given straight line.",
        type: "construction",
        unlockText: "🔧 Tool Unlocked: Line Transfer — You can now place a line equal to any given line at any given point.",

        givenSetup: function() {
            var A = addPoint(200, 200, "A", true);
            var B = addPoint(450, 350, "B", true);
            var C = addPoint(550, 350, "C", true);
            addLine(B.id, C.id, true);
        },

        validateConstruction: function() {
            var A = geo.points[0];
            var B = geo.points[1];
            var C = geo.points[2];
            var bc = dist(B.x, B.y, C.x, C.y);
            var tolerance = 8;

            // Check: is there a line starting at A whose length equals BC?
            var found = false;
            for (var i = 0; i < geo.lines.length; i++) {
                var l = geo.lines[i];
                var p1 = getPointById(l.p1id);
                var p2 = getPointById(l.p2id);
                if (!p1 || !p2) continue;

                var hasA = (p1.id === A.id || p2.id === A.id);
                if (!hasA) continue;

                var len = dist(p1.x, p1.y, p2.x, p2.y);
                if (Math.abs(len - bc) < tolerance) {
                    found = true;
                    break;
                }
            }

            if (!found) {
                return { success: false, message: "You need a line starting at point A whose length equals BC. Use Proposition 1 to build an equilateral triangle on AB, then use circles to transfer the length." };
            }

            // Check that they used at least one circle (the construction requires circles)
            if (geo.circles.length < 1) {
                return { success: false, message: "This construction requires circles to transfer lengths." };
            }

            return { success: true, message: "The line has been placed at A equal to BC." };
        },

        requiredFacts: ["post1", "post2", "post3", "def15", "cn1", "cn3", "prop1"],

        proofSteps: [
            { id: "p2s1", text: "Let A be the given point, and BC the given straight line." },
            { id: "p2s2", text: "Draw the straight line AB from point A to point B. [Postulate 1]" },
            { id: "p2s3", text: "On AB, construct the equilateral triangle DAB. [Proposition 1]" },
            { id: "p2s4", text: "Produce DA to point E and DB to point F. [Postulate 2]" },
            { id: "p2s5", text: "With center B and radius BC, describe circle CGH. [Postulate 3]" },
            { id: "p2s6", text: "With center D and radius DG, describe circle GKL. [Postulate 3]" },
            { id: "p2s7", text: "Since B is the center of circle CGH, BC equals BG. [Definition 15]" },
            { id: "p2s8", text: "Since D is the center of circle GKL, DL equals DG. [Definition 15]" },
            { id: "p2s9", text: "DA equals DB, since DAB is equilateral." },
            { id: "p2s10", text: "Subtracting equals DA and DB from equals DL and DG, AL equals BG. [Common Notion 3]" },
            { id: "p2s11", text: "Since BC also equals BG, then AL equals BC. [Common Notion 1]" },
            { id: "p2s12", text: "Therefore AL is placed at point A and equals the given line BC. ∎" },
        ],

        distractorSteps: [
            { id: "p2d1", text: "All right angles are equal, so angle DAB is right. [Postulate 4]" },
            { id: "p2d2", text: "The whole DA is greater than the part BA. [Common Notion 5]" },
            { id: "p2d3", text: "If equals are added to equals, the wholes are equal. [Common Notion 2]" },
        ],
    },

    {
        id: 3,
        title: "Proposition 3",
        statement: "Given two unequal straight lines, to cut off from the greater a straight line equal to the less.",
        type: "construction",
        unlockText: "🔧 Tool Unlocked: Line Cutting — You can now cut a line segment to match any shorter given length.",

        givenSetup: function() {
            var A = addPoint(150, 280, "A", true);
            var B = addPoint(550, 280, "B", true);
            addLine(A.id, B.id, true);
            var C = addPoint(150, 400, "C", true);
            var D = addPoint(300, 400, "D", true);
            addLine(C.id, D.id, true);
        },

        validateConstruction: function() {
            var A = geo.points[0];
            var B = geo.points[1];
            var C = geo.points[2];
            var D = geo.points[3];
            var cd = dist(C.x, C.y, D.x, D.y);
            var tolerance = 8;

            // Check: is there a point E on line AB such that AE = CD?
            var found = false;
            for (var i = 0; i < geo.points.length; i++) {
                var p = geo.points[i];
                if (p.isGiven) continue;

                var dToA = dist(p.x, p.y, A.x, A.y);

                // Check point is roughly on line AB
                var dToB = dist(p.x, p.y, B.x, B.y);
                var ab = dist(A.x, A.y, B.x, B.y);
                var onLine = Math.abs(dToA + dToB - ab) < tolerance;

                if (onLine && Math.abs(dToA - cd) < tolerance) {
                    found = true;
                    break;
                }
            }

            if (!found) {
                return { success: false, message: "Place a line equal to CD at point A (Prop 2), then use a circle centered at A to find where it cuts AB." };
            }

            if (geo.circles.length < 1) {
                return { success: false, message: "This construction requires a circle to cut the line." };
            }

            return { success: true, message: "Line AB has been cut at a point equal to CD from A." };
        },

        requiredFacts: ["post3", "def15", "cn1", "prop2"],

        proofSteps: [
            { id: "p3s1", text: "Let AB be the greater and CD the less of two given unequal straight lines." },
            { id: "p3s2", text: "At point A, place a straight line AE equal to CD. [Proposition 2]" },
            { id: "p3s3", text: "With center A and radius AE, describe circle EFG. [Postulate 3]" },
            { id: "p3s4", text: "Let F be the point where the circle intersects AB." },
            { id: "p3s5", text: "Since A is the center of circle EFG, AF equals AE. [Definition 15]" },
            { id: "p3s6", text: "Since AE equals CD, then AF also equals CD. [Common Notion 1]" },
            { id: "p3s7", text: "Therefore AF has been cut off from AB, equal to the lesser line CD. ∎" },
        ],

        distractorSteps: [
            { id: "p3d1", text: "Draw a straight line from B to D. [Postulate 1]" },
            { id: "p3d2", text: "Extend AB beyond B to a new point G. [Postulate 2]" },
            { id: "p3d3", text: "The whole AB is greater than the part AF. [Common Notion 5]" },
        ],
    },
];

// ---------- CONSTRUCTION VALIDATION ----------

function validateCurrentConstruction() {
    var prop = state.currentProp;
    if (!prop || !prop.validateConstruction) return null;
    return prop.validateConstruction();
}

// ---------- GAME STATE ----------

var state = {
    completed: [],
    currentProp: null,
    selectedFacts: [],
    proofOrder: [],
    availableSteps: [],
    selectionResult: null,
    attempts: 0,
    constructionValidated: false,
};

// ---------- SAVE / LOAD ----------

function saveProgress() {
    localStorage.setItem("euclid-save", JSON.stringify(state.completed));
}

function loadProgress() {
    var data = localStorage.getItem("euclid-save");
    if (data) {
        state.completed = JSON.parse(data);
    }
}

// ---------- SCREEN HELPERS ----------

function showScreen(id) {
    var screens = document.querySelectorAll(".screen");
    for (var i = 0; i < screens.length; i++) {
        screens[i].classList.remove("active");
    }
    document.getElementById(id).classList.add("active");
}

function showPhase(id) {
    var phases = document.querySelectorAll(".phase");
    for (var i = 0; i < phases.length; i++) {
        phases[i].classList.remove("active");
    }
    document.getElementById(id).classList.add("active");
}

function shuffleArray(arr) {
    var a = arr.slice();
    for (var i = a.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = a[i];
        a[i] = a[j];
        a[j] = temp;
    }
    return a;
}

// ---------- GET ALL AVAILABLE FACTS ----------

function getAllFacts() {
    var facts = [];

    for (var i = 0; i < definitions.length; i++) facts.push(definitions[i]);
    for (var i = 0; i < postulates.length; i++) facts.push(postulates[i]);
    for (var i = 0; i < commonNotions.length; i++) facts.push(commonNotions[i]);

    for (var i = 0; i < propositions.length; i++) {
        var p = propositions[i];
        if (p.id < state.currentProp.id && state.completed.indexOf(p.id) !== -1) {
            facts.push({
                id: "prop" + p.id,
                label: "Proposition " + p.id,
                text: p.statement
            });
        }
    }

    return facts;
}
// ---------- TITLE SCREEN ----------

document.getElementById("start-btn").addEventListener("click", function() {
    showScreen("level-screen");
    renderLevels();
});

document.getElementById("back-to-title").addEventListener("click", function() {
    showScreen("title-screen");
});

// ---------- LEVEL SELECT ----------

function renderLevels() {
    var container = document.getElementById("level-list");
    container.innerHTML = "";

    for (var i = 0; i < propositions.length; i++) {
        var prop = propositions[i];
        var btn = document.createElement("button");
        btn.className = "level-btn";

        var done = state.completed.indexOf(prop.id) !== -1;
        var unlocked = i === 0 || state.completed.indexOf(propositions[i - 1].id) !== -1;

        btn.textContent = "Prop " + prop.id;

        if (done) {
            btn.classList.add("completed");
            btn.textContent += " ✓";
        }

        if (!unlocked) {
            btn.classList.add("locked");
            btn.textContent += " 🔒";
        }

        // Use closure to capture prop
        (function(p, u) {
            btn.addEventListener("click", function() {
                if (u) startProp(p);
            });
        })(prop, unlocked);

        container.appendChild(btn);
    }
}

// ---------- START PROPOSITION ----------

function startProp(prop) {
    state.currentProp = prop;
    state.selectedFacts = [];
    state.proofOrder = [];
    state.selectionResult = null;
    state.attempts = 0;
    state.constructionValidated = false;

    // Reset geometry
    geo.points = [];
    geo.lines = [];
    geo.circles = [];
    geo.history = [];
    geo.nextLabelIndex = 0;
    toolState.firstPoint = null;

    document.getElementById("prop-title").textContent = prop.title;
    document.getElementById("prop-statement").textContent = prop.statement;

    showScreen("game-screen");
    showPhase("phase-construction");

    initCanvas();
    initToolbar();
    setTool("point");

    // Set up given elements
    if (prop.givenSetup) {
        prop.givenSetup();
    }

    render();
}

document.getElementById("back-to-levels").addEventListener("click", function() {
    showScreen("level-screen");
    renderLevels();
});

// ---------- CONSTRUCTION DONE BUTTON ----------

document.getElementById("done-construction").addEventListener("click", function() {
    var result = validateCurrentConstruction();

    if (!result) {
        alert("No validation available for this proposition.");
        return;
    }

    if (result.success) {
        state.constructionValidated = true;
        alert("✓ " + result.message + "\n\nNow prove why your construction is correct.");
        showPhase("phase-selection");
        renderFactBank();
    } else {
        alert("✗ " + result.message);
    }
});

// ---------- PHASE 2: FACT SELECTION ----------

function renderFactBank() {
    var container = document.getElementById("fact-bank");
    container.innerHTML = "";
    state.selectedFacts = [];

    var facts = getAllFacts();

    for (var i = 0; i < facts.length; i++) {
        var fact = facts[i];
        var div = document.createElement("div");
        div.className = "fact-item";
        div.innerHTML = "<strong>" + fact.label + ":</strong> " + fact.text;

        // Use closure to capture fact
        (function(f, d) {
            d.addEventListener("click", function() {
                var idx = state.selectedFacts.indexOf(f.id);
                if (idx === -1) {
                    state.selectedFacts.push(f.id);
                    d.classList.add("selected");
                } else {
                    state.selectedFacts.splice(idx, 1);
                    d.classList.remove("selected");
                }
            });
        })(fact, div);

        container.appendChild(div);
    }
}

document.getElementById("confirm-selection").addEventListener("click", function() {
    if (state.selectedFacts.length === 0) {
        alert("Select at least one fact!");
        return;
    }

    var required = state.currentProp.requiredFacts;
    var selected = state.selectedFacts;

    var correct = 0;
    var extra = 0;
    var missed = 0;

    for (var i = 0; i < selected.length; i++) {
        if (required.indexOf(selected[i]) !== -1) {
            correct++;
        } else {
            extra++;
        }
    }
    for (var i = 0; i < required.length; i++) {
        if (selected.indexOf(required[i]) === -1) {
            missed++;
        }
    }

    state.selectionResult = {
        correct: correct,
        extra: extra,
        missed: missed,
        total: required.length,
        perfect: correct === required.length && extra === 0
    };

    showPhase("phase-ordering");
    renderOrdering();
});

// ---------- PHASE 3: PROOF ORDERING ----------

function renderOrdering() {
    var prop = state.currentProp;
    var allSteps = prop.proofSteps.concat(prop.distractorSteps);
    state.availableSteps = shuffleArray(allSteps);
    state.proofOrder = [];
    drawSteps();
    drawChain();
}

function drawSteps() {
    var container = document.getElementById("available-steps");
    container.innerHTML = "";

    for (var i = 0; i < state.availableSteps.length; i++) {
        var step = state.availableSteps[i];
        var div = document.createElement("div");
        div.className = "step-item";

        if (state.proofOrder.indexOf(step.id) !== -1) {
            div.classList.add("used");
        }

        div.textContent = step.text;

        // Closure to capture step
        (function(s) {
            div.addEventListener("click", function() {
                if (state.proofOrder.indexOf(s.id) === -1) {
                    state.proofOrder.push(s.id);
                    drawSteps();
                    drawChain();
                }
            });
        })(step);

        container.appendChild(div);
    }
}

function drawChain() {
    var container = document.getElementById("proof-chain");
    container.innerHTML = "";

    if (state.proofOrder.length === 0) {
        container.innerHTML = '<p class="empty-proof">Click steps above to build your proof…</p>';
        return;
    }

    for (var i = 0; i < state.proofOrder.length; i++) {
        var id = state.proofOrder[i];
        var step = null;

        for (var j = 0; j < state.availableSteps.length; j++) {
            if (state.availableSteps[j].id === id) {
                step = state.availableSteps[j];
                break;
            }
        }

        if (!step) continue;

        var div = document.createElement("div");
        div.className = "proof-step";
        div.innerHTML = '<span class="step-num">' + (i + 1) + '.</span><span>' + step.text + '</span>';

        // Closure to capture id
        (function(stepId) {
            div.addEventListener("click", function() {
                state.proofOrder = state.proofOrder.filter(function(x) {
                    return x !== stepId;
                });
                drawSteps();
                drawChain();
            });
        })(id);

        container.appendChild(div);
    }
}

document.getElementById("clear-proof").addEventListener("click", function() {
    state.proofOrder = [];
    drawSteps();
    drawChain();
});

document.getElementById("check-proof").addEventListener("click", function() {
    if (state.proofOrder.length === 0) {
        alert("Build your proof first!");
        return;
    }
    state.attempts++;
    evaluateProof();
});

// ---------- EVALUATE PROOF ----------

function evaluateProof() {
    var prop = state.currentProp;
    var correctIds = [];
    var distractorIds = [];

    for (var i = 0; i < prop.proofSteps.length; i++) {
        correctIds.push(prop.proofSteps[i].id);
    }
    for (var i = 0; i < prop.distractorSteps.length; i++) {
        distractorIds.push(prop.distractorSteps[i].id);
    }

    // Check for distractors
    var hasDistractors = false;
    for (var i = 0; i < state.proofOrder.length; i++) {
        if (distractorIds.indexOf(state.proofOrder[i]) !== -1) {
            hasDistractors = true;
            break;
        }
    }

    // Filter to real steps only
    var playerReal = [];
    for (var i = 0; i < state.proofOrder.length; i++) {
        if (distractorIds.indexOf(state.proofOrder[i]) === -1) {
            playerReal.push(state.proofOrder[i]);
        }
    }

    // Check order and completeness
    var orderMatch = JSON.stringify(playerReal) === JSON.stringify(correctIds);
    var allIncluded = true;
    for (var i = 0; i < correctIds.length; i++) {
        if (state.proofOrder.indexOf(correctIds[i]) === -1) {
            allIncluded = false;
            break;
        }
    }

    var success = orderMatch && !hasDistractors && allIncluded;

    // Calculate stars
    var stars = 0;
    if (success) {
        stars = 1;
        if (state.selectionResult.extra === 0 && state.selectionResult.missed === 0) {
            stars = 2;
        }
        if (state.selectionResult.perfect && state.attempts === 1) {
            stars = 3;
        }
    }

    // Show results
    showPhase("phase-results");

    var starsEl = document.getElementById("results-stars");
    var titleEl = document.getElementById("results-title");
    var detailsEl = document.getElementById("results-details");
    var unlockEl = document.getElementById("unlock-message");
    var btn = document.getElementById("results-btn");

    if (success) {
        var starText = "";
        for (var s = 0; s < stars; s++) starText += "★";
        for (var s = 0; s < 3 - stars; s++) starText += "☆";
        starsEl.textContent = starText;

        if (prop.type === "construction") {
            titleEl.textContent = "Q.E.F. — Construction Complete!";
        } else {
            titleEl.textContent = "Q.E.D. — Proof Complete!";
        }

        var html = '<p class="result-good">✓ The proof is logically valid.</p>';

        html += "<p>Fact Selection: " + state.selectionResult.correct + "/" + state.selectionResult.total + " needed facts identified.";
        if (state.selectionResult.extra > 0) {
            html += ' <span class="result-bad">(' + state.selectionResult.extra + " unnecessary selected)</span>";
        }
        if (state.selectionResult.missed > 0) {
            html += ' <span class="result-bad">(' + state.selectionResult.missed + " needed facts missed)</span>";
        }
        html += "</p>";

        if (state.attempts === 1) {
            html += '<p class="result-good">✓ Proof ordered correctly on first attempt!</p>';
        } else {
            html += "<p>Proof completed in " + state.attempts + " attempt(s).</p>";
        }

        detailsEl.innerHTML = html;

        // Unlock message
        if (prop.unlockText) {
            unlockEl.style.display = "block";
            unlockEl.textContent = prop.unlockText;
        } else {
            unlockEl.style.display = "none";
        }

        // Save completion
        if (state.completed.indexOf(prop.id) === -1) {
            state.completed.push(prop.id);
            saveProgress();
        }

        btn.textContent = "Continue →";
        btn.onclick = function() {
            showScreen("level-screen");
            renderLevels();
        };

    } else {
        // Failure
        starsEl.textContent = "☆☆☆";
        titleEl.textContent = "Not Quite Right";

        var html = "";

        if (hasDistractors) {
            html += '<p class="result-bad">✗ Your proof contains irrelevant steps. Remove anything that doesn\'t contribute to the argument.</p>';
        }

        if (!allIncluded) {
            var missingCount = 0;
            for (var i = 0; i < correctIds.length; i++) {
                if (state.proofOrder.indexOf(correctIds[i]) === -1) {
                    missingCount++;
                }
            }
            html += '<p class="result-bad">✗ Your proof is missing ' + missingCount + ' required step(s).</p>';
        }

        if (!hasDistractors && allIncluded && !orderMatch) {
            html += '<p class="result-bad">✗ You have the right steps, but the logical order is not correct. Think about what must come before what.</p>';
        }

        html += "<p>Attempts so far: " + state.attempts + "</p>";
        html += '<p style="color:#666; font-style:italic; margin-top:10px;">Hint: The proof should follow from the construction you just performed. Each step must be justified by a definition, postulate, common notion, or previously proven proposition.</p>';

        detailsEl.innerHTML = html;
        unlockEl.style.display = "none";

        btn.textContent = "← Try Again";
        btn.onclick = function() {
            showPhase("phase-ordering");
            state.proofOrder = [];
            drawSteps();
            drawChain();
        };
    }
}

// ---------- RESET PROGRESS ----------

function resetProgress() {
    if (confirm("Reset all progress? This cannot be undone.")) {
        state.completed = [];
        localStorage.removeItem("euclid-save");
        showScreen("title-screen");
    }
}

// ---------- INITIALIZE ----------

function init() {
    loadProgress();
    showScreen("title-screen");
}

init();