Implemented JS for #4

www/booper.js

@@ -0,0 +1,30 @@
+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)!`);
+});