Brosef/Website
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Changed booper.js layout

Browse Source
This commit is contained in:
Brosef
2026-04-19 13:10:05 +01:00
parent c0f6765a06
commit 322c09f10a
1 changed files with 50 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
www/booper.js
View File

@ -1,35 +1,30 @@
window.addEventListener('load', (e) => { var booper = {
const overlayEl = document.getElementById('booperOverlay'); overlayEl: undefined,
const overlayName = document.getElementById('booperName'); overlayName: undefined,
const overlayTotal = document.getElementById('booperTotal'); overlayTotal: undefined,
const overlay24h = document.getElementById('booper24h'); overlay24h: undefined,
const targets = document.getElementsByClassName('booperTarget'); targets: undefined,
let currentTimeout = null; };
for (let i = 0; i < targets.length; i++) { let currentTimeout = 0;
const target = targets[i];
const locators = JSON.parse(target.getAttribute('data-booper')); let onImageTouch = function(target, relX, relY, pageX, pageY) {
console.debug(locators); for (const [name, box] of Object.entries(target.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; const [x1, y1, x2, y2] = box;
if (x >= x1 && x <= x2 && y >= y1 && y <= y2) { if (relX >= x1 && relX <= x2 && relY >= y1 && relY <= y2) {
console.log(`[booper.js] Booped ${name}!`); console.log(`[booper.js] Booped ${name}!`);
console.debug(e);
fetch(`/api/boop/${name}`, {method: 'POST'}).then((r) => { fetch(`/api/boop/${name}`, {method: 'POST'}).then((r) => {
if (r.ok) { if (r.ok) {
r.json().then((json) => { r.json().then((json) => {
clearTimeout(currentTimeout); clearTimeout(currentTimeout);
overlayName.innerText = name[0].toUpperCase()+name.slice(1); booper.overlayName.innerText = name[0].toUpperCase()+name.slice(1);
overlayTotal.innerText = json['total']; booper.overlayTotal.innerText = json['total'];
overlay24h.innerText = json['24h']; booper.overlay24h.innerText = json['24h'];
overlayEl.style.left = `${e.pageX}px`; booper.overlayEl.style.left = `${pageX}px`;
overlayEl.style.top = `${e.pageY}px`; booper.overlayEl.style.top = `${pageY}px`;
overlayEl.style.opacity = 1; booper.overlayEl.style.opacity = 1;
currentTimeout = setTimeout(() => { booper.currentTimeout = setTimeout(() => {
overlayEl.style.opacity = 0; booper.overlayEl.style.opacity = 0;
}, 2000); }, 2000);
console.debug(json); console.debug(json);
}); });
@ -40,8 +35,25 @@ window.addEventListener('load', (e) => {
}); });
} }
} }
}
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'));
target.locators = locators;
target.addEventListener('click', (e) => {
let x = e.offsetX / e.originalTarget.clientWidth;
let y = e.offsetY / e.originalTarget.clientHeight;
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)!`);
}); });