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

Implemented JS for #4

Browse Source
This commit is contained in:
Brosef
2026-03-07 18:21:20 +00:00
parent b07f3781fa
commit ccfa2bd48c
2 changed files with 32 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
www/booper.js Normal file
View File

@ -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)!`);
});

3
www/index.html
View File

@ -8,6 +8,7 @@
<title></title>
<link rel="stylesheet" href="/styles.css">
<script src="/main.js"></script>
<script src="/booper.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
@ -25,7 +26,7 @@
<h1 id="helloText"><noscript>Hewwo!</noscript></h1>
<h2><span id="imaText"><noscript>I'm a <span class="textHighlight">dumbass</span></noscript></span>.</h2>
<div class="mainContent">
<img src="/fag.png">
<img class="booperTarget" data-booper='{"brosef": [0.4752,0.3438,0.5773,0.3907]}' src="/fag.png">
<div>
<h3>Hi there! I'm <b>Brosef</b>, as you can see by the <i>very fancy</i> changing text about this, I'm interested in a lot of things!</h3>
</div>