window.addEventListener('load', (e) => {
    const targets = document.getElementsByClassName('booperTarget');
    for (let i = 0; i < targets.length; i++) {
        const target = targets[i];
        const locators = JSON.parse(target.getAttribute('data-booper'));
        console.debug(locators);
        target.addEventListener('click', (e) => {
            let x = e.offsetX / e.originalTarget.clientWidth;
            let y = e.offsetY / e.originalTarget.clientHeight;
            for (const [name, box] of Object.entries(locators)) {
                const [x1, y1, x2, y2] = box;
                if (x >= x1 && x <= x2 && y >= y1 && y <= y2) {
                    console.log(`[booper.js] Booped ${name}!`);
                    fetch(`/api/boop/${name}`, {method: 'POST'}).then((r) => {
                        if (r.ok) {
                            r.json().then((json) => {
                                console.debug(json);
                            });
                        } else {
                            console.error(`[booper.js] Error whilst booping:`);
                            console.error(r);
                        }
                    });
                }
            }
        });
    }

    console.log(`[booper.js] Initialised ${targets.length} boop target(s)!`);
});