xc8ballpool

// 8 Ball Pool Line Calculator with Precise Hole Locations (Console Script)

(function() {
    let isDrawing = false;
    let svg;
    let holes = [
        {x: 455, y: 300},  // Top-left
        {x: 792, y: 300},  // Top-middle
        {x: 1135, y: 300}, // Top-right
        {x: 451, y: 656},  // Bottom-left
        {x: 794, y: 656},  // Bottom-middle
        {x: 1133, y: 656}  // Bottom-right
    ];
    let draggedHole = null;
    let cueBall = {x: 792, y: 478}; // Initial cue ball position (center of the table)

    function createToggleButton() {
        const button = document.createElement('button');
        button.textContent = 'Toggle Lines';
        button.style.cssText = `
            position: fixed;
            top: 10px;
            right: 10px;
            z-index: 9999;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 16px;
        `;
        button.addEventListener('click', toggleDrawing);
        document.body.appendChild(button);
    }

    function toggleDrawing() {
        isDrawing = !isDrawing;
        if (isDrawing) {
            calculateAndDrawLines();
        } else {
            removeLines();
        }
    }

    function calculateAndDrawLines() {
        removeLines(); // Clear existing lines

        svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        svg.setAttribute("width", "100%");
        svg.setAttribute("height", "100%");
        svg.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 9998;
        `;

        holes.forEach((hole, index) => {
            // Draw line
            const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
            line.setAttribute("x1", cueBall.x);
            line.setAttribute("y1", cueBall.y);
            line.setAttribute("x2", hole.x);
            line.setAttribute("y2", hole.y);
            line.setAttribute("stroke", "red");
            line.setAttribute("stroke-width", "2");
            svg.appendChild(line);

            // Draw hole
            const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
            circle.setAttribute("cx", hole.x);
            circle.setAttribute("cy", hole.y);
            circle.setAttribute("r", "10");
            circle.setAttribute("fill", "blue");
            circle.style.pointerEvents = "none";
            svg.appendChild(circle);

            // Display coordinates
            const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
            text.setAttribute("x", hole.x);
            text.setAttribute("y", hole.y - 15); // Position above the circle
            text.setAttribute("text-anchor", "middle");
            text.setAttribute("fill", "black");
            text.setAttribute("font-size", "12px");
            text.textContent = `(${Math.round(hole.x)}, ${Math.round(hole.y)})`;
            text.style.pointerEvents = "none";
            svg.appendChild(text);
        });

        // Draw draggable cue ball
        const cueBallCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        cueBallCircle.setAttribute("cx", cueBall.x);
        cueBallCircle.setAttribute("cy", cueBall.y);
        cueBallCircle.setAttribute("r", "10");
        cueBallCircle.setAttribute("fill", "white");
        cueBallCircle.setAttribute("stroke", "black");
        cueBallCircle.style.cursor = "move";
        cueBallCircle.style.pointerEvents = "all";
        cueBallCircle.addEventListener('mousedown', startDraggingCueBall);
        svg.appendChild(cueBallCircle);

        // Display cue ball coordinates
        const cueBallText = document.createElementNS("http://www.w3.org/2000/svg", "text");
        cueBallText.setAttribute("x", cueBall.x);
        cueBallText.setAttribute("y", cueBall.y - 15);
        cueBallText.setAttribute("text-anchor", "middle");
        cueBallText.setAttribute("fill", "black");
        cueBallText.setAttribute("font-size", "12px");
        cueBallText.textContent = `(${Math.round(cueBall.x)}, ${Math.round(cueBall.y)})`;
        cueBallText.style.pointerEvents = "none";
        svg.appendChild(cueBallText);

        document.body.appendChild(svg);
        document.addEventListener('mousemove', dragCueBall);
        document.addEventListener('mouseup', stopDragging);
    }

    function startDraggingCueBall(e) {
        draggedHole = e.target;
    }

    function dragCueBall(e) {
        if (draggedHole) {
            e.preventDefault();
            cueBall = { x: e.clientX, y: e.clientY };
            calculateAndDrawLines();
        }
    }

    function stopDragging() {
        draggedHole = null;
    }

    function removeLines() {
        if (svg && svg.parentNode) {
            svg.parentNode.removeChild(svg);
        }
        document.removeEventListener('mousemove', dragCueBall);
        document.removeEventListener('mouseup', stopDragging);
    }

    // Initialize
    createToggleButton();
    console.log("8 Ball Pool Line Calculator initialized with precise hole locations. Click the 'Toggle Lines' button to show/hide lines. You can drag the white circle to reposition the cue ball. Coordinates are displayed above each hole and the cue ball.");
})();