diff --git a/www/booper.js b/www/booper.js index ec4bcc0..0e9aa4a 100644 --- a/www/booper.js +++ b/www/booper.js @@ -1,47 +1,59 @@ -window.addEventListener('load', (e) => { - const overlayEl = document.getElementById('booperOverlay'); - const overlayName = document.getElementById('booperName'); - const overlayTotal = document.getElementById('booperTotal'); - const overlay24h = document.getElementById('booper24h'); - const targets = document.getElementsByClassName('booperTarget'); - let currentTimeout = null; +var booper = { + overlayEl: undefined, + overlayName: undefined, + overlayTotal: undefined, + overlay24h: undefined, + targets: undefined, +}; - for (let i = 0; i < targets.length; i++) { - const target = targets[i]; +let currentTimeout = 0; + +let onImageTouch = function(target, relX, relY, pageX, pageY) { + for (const [name, box] of Object.entries(target.locators)) { + const [x1, y1, x2, y2] = box; + if (relX >= x1 && relX <= x2 && relY >= y1 && relY <= y2) { + console.log(`[booper.js] Booped ${name}!`); + fetch(`/api/boop/${name}`, {method: 'POST'}).then((r) => { + if (r.ok) { + r.json().then((json) => { + clearTimeout(currentTimeout); + booper.overlayName.innerText = name[0].toUpperCase()+name.slice(1); + booper.overlayTotal.innerText = json['total']; + booper.overlay24h.innerText = json['24h']; + booper.overlayEl.style.left = `${pageX}px`; + booper.overlayEl.style.top = `${pageY}px`; + booper.overlayEl.style.opacity = 1; + booper.currentTimeout = setTimeout(() => { + booper.overlayEl.style.opacity = 0; + }, 2000); + console.debug(json); + }); + } else { + console.error(`[booper.js] Error whilst booping:`); + console.error(r); + } + }); + } + } +} + +window.addEventListener('load', (e) => { + booper.overlayEl = document.getElementById('booperOverlay'); + booper.overlayName = document.getElementById('booperName'); + booper.overlayTotal = document.getElementById('booperTotal'); + booper.overlay24h = document.getElementById('booper24h'); + booper.targets = document.getElementsByClassName('booperTarget'); + + for (let i = 0; i < booper.targets.length; i++) { + const target = booper.targets[i]; const locators = JSON.parse(target.getAttribute('data-booper')); - console.debug(locators); + target.locators = 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}!`); - console.debug(e); - fetch(`/api/boop/${name}`, {method: 'POST'}).then((r) => { - if (r.ok) { - r.json().then((json) => { - clearTimeout(currentTimeout); - overlayName.innerText = name[0].toUpperCase()+name.slice(1); - overlayTotal.innerText = json['total']; - overlay24h.innerText = json['24h']; - overlayEl.style.left = `${e.pageX}px`; - overlayEl.style.top = `${e.pageY}px`; - overlayEl.style.opacity = 1; - currentTimeout = setTimeout(() => { - overlayEl.style.opacity = 0; - }, 2000); - console.debug(json); - }); - } else { - console.error(`[booper.js] Error whilst booping:`); - console.error(r); - } - }); - } - } + onImageTouch(target, x, y, e.pageX, e.pageY); }); } - console.log(`[booper.js] Initialised ${targets.length} boop target(s)!`); + console.log(`[booper.js] Initialised ${booper.targets.length} boop target(s)!`); });