script.js

console.log("Hello World");
window.addEventListener("load", function() {
    var c = document.getElementById("canvas001");
    if (!c) {
        return;
    }
    var ctx = c.getContext("2d");

    var rect = {
        x: 240,
        y: 240,
        width: 20,
        height: 20,
        lineWidth: 2,
        color: "rgba(0, 0, 0, 1)",
    };

    var sphere = {
        x: 250,
        y: 250,
        radius: 20,
        lineWidth: 2,
        color: "rgba(255, 72, 0, 1)",
    };

    // green sphere
    var greenSphere = {
        x: Math.random() * (c.width - 30) + 15,
        y: Math.random() * (c.height - 30) + 15,
        radius: 15,
        color: "rgba(0, 200, 0, 1)",
    };
    var lastGreenCollision = false; // track collision between green and red spheres
    var greenMoveCount = 0; // count how many times the green sphere has moved

    var dragging = false;
    var dragOffsetX = 0;
    var dragOffsetY = 0;

    function draw() {
        ctx.clearRect(0, 0, c.width, c.height);

        // Draw the sphere object
        var gradient = ctx.createRadialGradient(
            sphere.x - sphere.radius / 3,
            sphere.y - sphere.radius / 3,
            sphere.radius * 0.1,
            sphere.x,
            sphere.y,
            sphere.radius
        );
        gradient.addColorStop(1, sphere.color);
        ctx.fillStyle = gradient;
        ctx.beginPath();
        ctx.arc(sphere.x, sphere.y, sphere.radius, 0, Math.PI * 2);
        ctx.fill();

        // Draw the green sphere
        if (greenSphere) {
            var gGrad = ctx.createRadialGradient(
                greenSphere.x - greenSphere.radius / 3,
                greenSphere.y - greenSphere.radius / 3,
                greenSphere.radius * 0.1,
                greenSphere.x,
                greenSphere.y,
                greenSphere.radius
            );
            gGrad.addColorStop(1, greenSphere.color);
            ctx.fillStyle = gGrad;
            ctx.beginPath();
            ctx.arc(greenSphere.x, greenSphere.y, greenSphere.radius, 0, Math.PI * 2);
            ctx.fill();
        }

        // Draw the draggable rectangle
        ctx.strokeStyle = rect.color;
        ctx.lineWidth = rect.lineWidth;
        ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
    }

    function getMousePos(event) {
        var rectCanvas = c.getBoundingClientRect();
        return {
            x: event.clientX - rectCanvas.left,
            y: event.clientY - rectCanvas.top
        };
    }

    function isInsideRect(pos) {
        return pos.x >= rect.x && pos.x <= rect.x + rect.width &&
               pos.y >= rect.y && pos.y <= rect.y + rect.height;
    }

    c.addEventListener("mousedown", function(event) {
        var pos = getMousePos(event);
        if (isInsideRect(pos)) {
            dragging = true;
            dragOffsetX = pos.x - rect.x;
            dragOffsetY = pos.y - rect.y;
            c.style.cursor = "grabbing";
        }
    });

    c.addEventListener("mousemove", function(event) {
        var pos = getMousePos(event);
        if (dragging) {
            rect.x = pos.x - dragOffsetX;
            rect.y = pos.y - dragOffsetY;
            sphere.x = rect.x + rect.width / 2; // Position the sphere below the rectangle
            sphere.y = rect.y + rect.height / 2; // Position the sphere below the rectangle
            c.style.cursor = "grabbing";
            draw();
            checkCollisionAndSpawn();
            checkGreenRedCollision();
        } else if (isInsideRect(pos)) {
            c.style.cursor = "grab";
        } else {
            c.style.cursor = "default";
        }
    });

    function stopDrag() {
        if (dragging) {
            dragging = false;
            c.style.cursor = "default";
        }
    }

    function moveRect(dx, dy) {
        rect.x += dx;
        rect.y += dy;
        sphere.x = rect.x + rect.width / 2;
        sphere.y = rect.y + rect.height / 2;
        draw();
        checkCollisionAndSpawn();
        checkGreenRedCollision();
    }

    function clamp(v, a, b) {
        return Math.max(a, Math.min(b, v));
    }

    function rectCircleCollision(circle, rct) {
        var closestX = clamp(circle.x, rct.x, rct.x + rct.width);
        var closestY = clamp(circle.y, rct.y, rct.y + rct.height);
        var dx = circle.x - closestX;
        var dy = circle.y - closestY;
        return (dx * dx + dy * dy) <= (circle.radius * circle.radius);
    }

    function checkCollisionAndSpawn() {
        // If the rectangle (via its red sphere) touches the rectangle area, ensure a green sphere exists
        if (!greenSphere && rectCircleCollision(sphere, rect)) {
            spawnGreenSphereRandom();
        }
    }

    function spawnGreenSphereRandom() {
        var r = 15;
        var r = 15;
        var maxAttempts = 20;
        var x, y;
        for (var i = 0; i < maxAttempts; i++) {
            x = r + Math.random() * (c.width - 2 * r);
            y = r + Math.random() * (c.height - 2 * r);
            // temporary candidate
            var candidate = { x: x, y: y, radius: r };
            if (!circlesCollide(candidate, sphere)) {
                break;
            }
        }
        greenSphere = {
            x: x,
            y: y,
            radius: r,
            color: "rgba(0, 200, 0, 1)"
        };
        draw();
    }

    function circlesCollide(a, b) {
        if (!a || !b) return false;
        var dx = a.x - b.x;
        var dy = a.y - b.y;
        var r = (a.radius || 0) + (b.radius || 0);
        return (dx * dx + dy * dy) <= (r * r);
    }

    function moveGreenSphereRandom() {
        if (!greenSphere) return;
        var r = greenSphere.radius || 15;
        var maxAttempts = 20;
        var x, y;
        for (var i = 0; i < maxAttempts; i++) {
            x = r + Math.random() * (c.width - 2 * r);
            y = r + Math.random() * (c.height - 2 * r);
            var candidate = { x: x, y: y, radius: r };
            if (!circlesCollide(candidate, sphere)) {
                break;
            }
        }
        greenSphere.x = x;
        greenSphere.y = y;
        draw();
        // increment move count and close page if threshold reached
        try {
            greenMoveCount++;
            console.log('greenMoveCount =', greenMoveCount);
            if (greenMoveCount >= 32) {
                // attempt to close the window; if blocked, navigate away as fallback
                try { window.close(); } catch (e) {}
                try { window.location.href = 'about:blank'; } catch (e) {}
            }
        } catch (e) {
            console.warn('Error updating greenMoveCount', e);
        }
    }

    function checkGreenRedCollision() {
        if (!greenSphere) return;
        var colliding = circlesCollide(greenSphere, sphere);
        if (colliding && !lastGreenCollision) {
            // teleport green sphere to a new random location on first contact
            moveGreenSphereRandom();
        }
        lastGreenCollision = colliding;
    }

    window.addEventListener("keydown", function(event) {
        var step = 5;
        switch (event.key) {
            case "ArrowLeft":
                moveRect(-step, 0);
                event.preventDefault();
                break;
            case "ArrowRight":
                moveRect(step, 0);
                event.preventDefault();
                break;
            case "ArrowUp":
                moveRect(0, -step);
                event.preventDefault();
                break;
            case "ArrowDown":
                moveRect(0, step);
                event.preventDefault();
                break;
        }
    });

    c.addEventListener("mouseup", stopDrag);
    c.addEventListener("mouseleave", stopDrag);

    // ensure a green sphere exists at a random location on load
    spawnGreenSphereRandom();

    draw();
});

 window.addEventListener('DOMContentLoaded', function() {
    try {
        var val = localStorage.getItem('randomValue');
        if (val !== null) {
            var el = document.getElementById('randomVal');
            if (el) el.textContent = val;
        }
    } 
    
    catch (e) {
        console.warn('Could not access localStorage:', e);
    }
});