coordinate scanner (w.i.p)

// 1. Create the HUD container and styles
const hud = document.createElement('div');
hud.id = 'coord-hud-vista';
hud.innerHTML = `
    <div id="hud-header">
        <span class="hud-title">Coordinate Scanner</span>
        <button id="hud-close-btn" title="Close">X</button>
    </div>
    <div id="hud-body">
        <div class="hud-content-area">
            <div class="hud-input-group">
                <label for="hud-prefix-input">Prefix:</label>
                <input type="text" id="hud-prefix-input" value="project" placeholder="e.g. project">
            </div>
            <div class="hud-input-row">
                <div class="hud-input-group compact">
                    <label for="hud-x-input">Target X:</label>
                    <input type="number" id="hud-x-input" value="69420" placeholder="e.g. 69420">
                </div>
                <div class="hud-input-group compact">
                    <label for="hud-y-input">Target Y:</label>
                    <input type="number" id="hud-y-input" value="69420" placeholder="e.g. 69420">
                </div>
            </div>
            <button id="hud-start-btn">Start Scan</button>
            <div id="hud-progress">Progress: 0%</div>
            <pre id="hud-results">Matches will appear here...</pre>
        </div>
    </div>
    <div class="resizer n"></div>
    <div class="resizer s"></div>
    <div class="resizer e"></div>
    <div class="resizer w"></div>
    <div class="resizer ne"></div>
    <div class="resizer nw"></div>
    <div class="resizer se"></div>
    <div class="resizer sw"></div>
`;

const styles = document.createElement('style');
styles.innerHTML = `
    #coord-hud-vista {
        position: fixed;
        top: 20px;
        left: 20px;
        width: 330px;
        height: 460px;
        min-width: 250px;
        min-height: 320px;
        background: rgba(220, 235, 255, 0.5);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        font-family: "Segoe UI", Tahoma, sans-serif;
        font-size: 12px;
        color: #000000;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3),
                    0 0 1px 1px rgba(255, 255, 255, 0.2) inset;
        z-index: 99999;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    #hud-header {
        padding: 5px 10px 8px 10px;
        background: linear-gradient(to bottom,
                    rgba(255, 255, 255, 0.6) 0%,
                    rgba(255, 255, 255, 0.2) 50%,
                    rgba(255, 255, 255, 0.0) 51%,
                    rgba(255, 255, 255, 0.2) 100%);
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        cursor: move;
        user-select: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
    }

    #hud-header .hud-title {
        font-weight: bold;
        color: #000000;
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
    }

    #hud-close-btn {
        background: linear-gradient(to bottom, #fca 0%, #f77 50%, #f44 51%, #f77 100%);
        border: 1px solid #933;
        color: white;
        font-weight: bold;
        font-size: 10px;
        padding: 0 6px;
        border-radius: 2px;
        cursor: pointer;
    }
    #hud-close-btn:hover {
        background: linear-gradient(to bottom, #fdb 0%, #f88 50%, #f55 51%, #f88 100%);
    }

    #hud-body {
        flex: 1;
        background-color: #f0f5f9;
        padding: 10px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
    }

    .hud-content-area {
        display: flex;
        flex-direction: column;
        gap: 10px;
        height: 100%;
    }

    .hud-input-row {
        display: flex;
        gap: 10px;
        width: 100%;
    }

    .hud-input-group {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #000000;
        font-weight: 600;
    }

    .hud-input-group.compact {
        flex: 1;
    }

    #hud-prefix-input, #hud-x-input, #hud-y-input {
        background: #fff;
        border: 1px solid #666;
        padding: 3px 5px;
        color: #000000;
    }

    #hud-prefix-input {
        flex: 1;
    }

    #hud-x-input, #hud-y-input {
        width: 100%;
        box-sizing: border-box;
    }

    #hud-start-btn {
        background: linear-gradient(to bottom, #e1e1e1 0%, #e1e1e1 50%, #d5d5d5 51%, #d5d5d5 100%);
        border: 1px solid #777;
        color: #000000;
        font-weight: bold;
        padding: 5px;
        cursor: pointer;
        border-radius: 3px;
        position: relative;
    }
    #hud-start-btn::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 50%;
        background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.1) 100%);
        border-radius: 3px 3px 0 0;
    }
    #hud-start-btn:hover {
        background: linear-gradient(to bottom, #e9f0f7 0%, #e9f0f7 50%, #dce8f3 51%, #dce8f3 100%);
        border-color: #3c7fb1;
    }

    #hud-progress {
        color: #000000;
        font-weight: bold;
    }

    #hud-results {
        flex: 1;
        background: #fff;
        border: 1px solid #777;
        padding: 5px;
        overflow-y: auto;
        font-family: Consolas, monospace;
        font-size: 11px;
        white-space: pre-wrap;
        margin: 0;
        color: #000000;
    }

    /* Invisible Resize Borders & Corners */
    .resizer {
        position: absolute;
        z-index: 100000;
    }
    .resizer.n { top: -4px; left: 4px; right: 4px; height: 8px; cursor: n-resize; }
    .resizer.s { bottom: -4px; left: 4px; right: 4px; height: 8px; cursor: s-resize; }
    .resizer.e { right: -4px; top: 4px; bottom: 4px; width: 8px; cursor: e-resize; }
    .resizer.w { left: -4px; top: 4px; bottom: 4px; width: 8px; cursor: w-resize; }
    .resizer.ne { top: -4px; right: -4px; width: 10px; height: 10px; cursor: ne-resize; }
    .resizer.nw { top: -4px; left: -4px; width: 10px; height: 10px; cursor: nw-resize; }
    .resizer.se { bottom: -4px; right: -4px; width: 10px; height: 10px; cursor: se-resize; }
    .resizer.sw { bottom: -4px; left: -4px; width: 10px; height: 10px; cursor: sw-resize; }
`;

document.head.appendChild(styles);
document.body.appendChild(hud);

// --- Moving and Resizing Implementation ---

let currentWindowMode = null;
let activeResizer = null;
let startX, startY, startWidth, startHeight, startLeft, startTop;

const MIN_WIDTH = 250;
const MIN_HEIGHT = 320;

const header = document.getElementById('hud-header');

header.addEventListener('mousedown', (e) => {
    if (e.target.id === 'hud-close-btn') return;
    currentWindowMode = 'moving';
    startX = e.clientX;
    startY = e.clientY;
    startLeft = hud.offsetLeft;
    startTop = hud.offsetTop;
    e.preventDefault();
});

hud.querySelectorAll('.resizer').forEach(resizer => {
    resizer.addEventListener('mousedown', (e) => {
        currentWindowMode = 'resizing';
        activeResizer = e.target;
        startX = e.clientX;
        startY = e.clientY;
        startWidth = hud.offsetWidth;
        startHeight = hud.offsetHeight;
        startLeft = hud.offsetLeft;
        startTop = hud.offsetTop;
        e.preventDefault();
    });
});

document.addEventListener('mousemove', (e) => {
    if (!currentWindowMode) return;

    const dx = e.clientX - startX;
    const dy = e.clientY - startY;

    if (currentWindowMode === 'moving') {
        hud.style.left = `${startLeft + dx}px`;
        hud.style.top = `${startTop + dy}px`;
    }
    else if (currentWindowMode === 'resizing') {
        const classes = activeResizer.classList;

        let targetWidth = startWidth;
        let targetHeight = startHeight;
        let targetLeft = startLeft;
        let targetTop = startTop;

        if (classes.contains('e') || classes.contains('se') || classes.contains('ne')) {
            targetWidth = Math.max(MIN_WIDTH, startWidth + dx);
        } else if (classes.contains('w') || classes.contains('sw') || classes.contains('nw')) {
            const calculatedWidth = startWidth - dx;
            if (calculatedWidth >= MIN_WIDTH) {
                targetWidth = calculatedWidth;
                targetLeft = startLeft + dx;
            } else {
                targetWidth = MIN_WIDTH;
                targetLeft = startLeft + (startWidth - MIN_WIDTH);
            }
        }

        if (classes.contains('s') || classes.contains('se') || classes.contains('sw')) {
            targetHeight = Math.max(MIN_HEIGHT, startHeight + dy);
        } else if (classes.contains('n') || classes.contains('ne') || classes.contains('nw')) {
            const calculatedHeight = startHeight - dy;
            if (calculatedHeight >= MIN_HEIGHT) {
                targetHeight = calculatedHeight;
                targetTop = startTop + dy;
            } else {
                targetHeight = MIN_HEIGHT;
                targetTop = startTop + (startHeight - MIN_HEIGHT);
            }
        }

        hud.style.width = `${targetWidth}px`;
        hud.style.height = `${targetHeight}px`;
        hud.style.left = `${targetLeft}px`;
        hud.style.top = `${targetTop}px`;
    }
});

document.addEventListener('mouseup', () => {
    currentWindowMode = null;
    activeResizer = null;
});

document.getElementById('hud-close-btn').addEventListener('click', () => {
    hud.remove();
    styles.remove();
});

// --- Scan Logic ---
const startBtn = document.getElementById('hud-start-btn');
const progressDiv = document.getElementById('hud-progress');
const resultsPre = document.getElementById('hud-results');
const prefixInput = document.getElementById('hud-prefix-input');
const xInput = document.getElementById('hud-x-input');
const yInput = document.getElementById('hud-y-input');

startBtn.addEventListener('click', async () => {
    const prefix = prefixInput.value.trim() || 'project';

    // Parse target values or fall back to original defaults
    const targetX = xInput.value !== '' ? parseInt(xInput.value, 10) : 69420;
    const targetY = yInput.value !== '' ? parseInt(yInput.value, 10) : 69420;

    if (typeof w === 'undefined' || !w.generateCoords) {
        resultsPre.innerText = "Error: Global context engine target 'w.generateCoords' is missing.";
        return;
    }

    startBtn.disabled = true;
    prefixInput.disabled = true;
    xInput.disabled = true;
    yInput.disabled = true;
    resultsPre.innerText = `Scanning for "${prefix}" matching coordinates (${targetX}, ${targetY})...\n`;

    let matches = [];
    const total = 1e6;
    const batchSize = 20000;

    for (let i = 0; i < total; i++) {
        let c = w.generateCoords(`${prefix}${i}`);

        // Dynamically validate calculated target ruleset coordinates
        if (c && (Math.abs(c.x) === Math.abs(targetX) || Math.abs(c.y) === Math.abs(targetY))) {
            const matchStr = `/${prefix}${i} (${c.x}, ${-c.y})`;
            matches.push(matchStr);
            resultsPre.innerText += matchStr + '\n';
            resultsPre.scrollTop = resultsPre.scrollHeight;
        }

        if (i % batchSize === 0) {
            progressDiv.innerText = `Progress: ${((i / total) * 100).toFixed(1)}%`;
            await new Promise(resolve => setTimeout(resolve, 1));
        }
    }

    progressDiv.innerText = "Scan Complete! 100%";
    startBtn.disabled = false;
    prefixInput.disabled = false;
    xInput.disabled = false;
    yInput.disabled = false;

    if (matches.length === 0) {
        resultsPre.innerText = `No coordinates matched (${targetX}, ${targetY}) using prefix "${prefix}".`;
    }
});