Implemented first version of UI for #4

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 {

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>

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;
+}