From c0f6765a0622b7fa57471450994182439d40f572 Mon Sep 17 00:00:00 2001
From: Brosef <brosef@hotmale.gay>
Date: Wed, 11 Mar 2026 14:45:50 +0000
Subject: [PATCH] Implemented first version of UI for #4

---
 www/booper.js  | 17 +++++++++++++++++
 www/index.html |  8 ++++++++
 www/styles.css | 26 ++++++++++++++++++++++++++
 3 files changed, 51 insertions(+)

diff --git a/www/booper.js b/www/booper.js
index 3a66620..ec4bcc0 100644
--- a/www/booper.js
+++ b/www/booper.js
@@ -1,5 +1,11 @@
 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;
+
     for (let i = 0; i < targets.length; i++) {
         const target = targets[i];
         const locators = JSON.parse(target.getAttribute('data-booper'));
@@ -11,9 +17,20 @@ window.addEventListener('load', (e) => {
                 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 {
diff --git a/www/index.html b/www/index.html
index d5d0ceb..a649b6b 100644
--- a/www/index.html
+++ b/www/index.html
@@ -59,5 +59,13 @@
                 </div>
             </div>
         </footer>
+
+        <div id="booperOverlay">
+            <div>
+                <h4>Booped <span id="booperName"></span>!</h4>
+                <p>Total boops: <span id="booperTotal"></span></p>
+                <p>Boops in 24h: <span id="booper24h"></span></p>
+            </div>
+        </div>
     </body>
 </html>
\ No newline at end of file
diff --git a/www/styles.css b/www/styles.css
index 02c02dd..4b4eb34 100644
--- a/www/styles.css
+++ b/www/styles.css
@@ -165,3 +165,29 @@ button:hover, .buttonHighlight {
 .imgRightText > p {
     margin: auto;
 }
+
+
+
+#booperOverlay {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+    opacity: 0%;
+    transition: opacity 0.5s;
+}
+
+#booperOverlay > div {
+    background-color: #393e41A0;
+    position: absolute;
+    width: max-content;
+    bottom: 0px;
+    border-radius: 10px;
+    text-align: center;
+}
+
+#booperOverlay > div > * {
+    margin: 0.5em 1em;
+}
\ No newline at end of file