index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="icon512.png" />
<title>LightningPiggy's Oink</title>
<link rel="manifest" href="manifest.json">
<style>
  body {
    font-family: sans-serif;
    text-align: center;
  }

  #myButton {
    display: block;
    margin: 20px auto; /* Add margin around the button */
    padding: 20px 40px;
    font-size: 20px;
    background-color: pink;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer; /* Change cursor to pointer */
    transition: background-color 0.3s ease; /* Smooth transition for background color change */
  }

  #myButton:hover {
    background-color: #ff4081; /* Change background color on hover */
  }

  #myButton:active {
    background-color: #e91e63; /* Change background color on click */
  }

  #myButton:focus {
    outline: none; /* Remove default focus outline */
    box-shadow: 0 0 0 3px rgba(255, 64, 129, 0.5); /* Add custom focus style */
  }

  .logo {
    width: 50%;
    height: auto;
  }

  .QR {
    width: 20%;
  }

  #overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 64, 128, 0.95); /* Semi-transparent background */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure the overlay appears on top of other content */
  }
  
  #overlay-message {
    font-size: 64px;
    font-weight: bold;
    color: black;
  }

  #notificationarea {
     color: white;
  }

  #donations {
    display: none;
  }
</style>
</head>
<body>
  <div id="overlay"><div id='overlay-message'></div></div>
      

  <img class="logo" src="logo.svg"/>
  <button id="myButton">Click to activate audio and visual notifications!</button>
  <a href="lightning:LNURL1DP68GURN8GHJ7ER9D4HJUMRWWP5KWEME9E3K7MF0D3H82UNVWQHNVKN8FFE85WY0TEP" class="text-secondary"><img class="QR" src="QR.png"/></a>
  <a href="lightning:oink@demo.lnpiggy.com" class="text-secondary"><h2>oink@demo.lnpiggy.com</h2></a>
  <div id="donations">
  <h1>Send some Bitcoin to hear the Oinks!</h1>
  </div>
  <!-- Audio permission: <div id="audiopermission">Unknown</div> -->
  <div id="notificationarea">New donation: <div id="notification">Empty</div></div>
  <audio id="notificationSound" src="Pig-Oinking-www.fesliyanstudios.com.mp3"></audio> <!-- Replace "notification_sound.mp3" with the path to your audio file -->
  
  
  <script>
    const apiUrl = "wss://demo.lnpiggy.com/api/v1/ws/1c1077016ce746b6beae47c5890a8422";
    let notificationsActive = false;
    let socket = null;

    // Function to poll the URL for data
    function listenWebsocket(url) {
      socket = new WebSocket(url);

      socket.onopen = function(e) {
        console.log("[open] Connection established");
        changeMode(true);
      };
      
      socket.onmessage = function(event) {
        console.log(`[message] Data received from server: ${event.data}`);
	// Example data: {"wallet_balance": 4936, "payment": {"checking_id": "037c1438b20ef4729b1d3dc252c2809dc2a2a2e641c7fb99fe4324e182f356b3", "pending": false, "amount": 1000000, "fee": 0, "memo": "zap2oink", "time": 1711226003, "bolt11": "lnbc10u1pjl70ynsp5mswj2j4ye2re60ufuh8pk62ffpw705d6676r4v33pg7866zr549spp5qd7pgw9jpm689xca8hp99s5qnhp29ghxg8rlhx07gvjwrqhn26eshp58ju5l0n4ykrc2q4shxp7lkurqj4pumlttzc53ts8n6xwnyzlh22sxqzjccqpjrzjqta942048v7qxh5x7pxwplhmtwfl0f25cq23jh87rhx7lgrwwvv86r90guqqnwgqqqqqqqqqqqqqqpcqyg9qxpqysgqvujxrahg2l48h8aredqsesqst3twfmpeemydg6ng9a24ykep25d4e6qjpvnutpedvwpfpqw36a5fwkq90nryzuaduhzq0ruz9snqlccqq9renr", "preimage": "0000000000000000000000000000000000000000000000000000000000000000", "payment_hash": "037c1438b20ef4729b1d3dc252c2809dc2a2a2e641c7fb99fe4324e182f356b3", "expiry": 1711226603.0, "extra": {"tag": "lnurlp", "link": "TkjgaB", "extra": "1000000", "comment": ["yes"], "lnaddress": "oink@demo.lnpiggy.com"}, "wallet_id": "c9168d53aa5942858354249f39f18de4", "webhook": null, "webhook_status": null}}
	const jsonData = parseJSON(event.data);
        if (typeof jsonData !== 'object' || jsonData === null) {
          console.error('Invalid JSON data. Expected an object.');
          return null;
        }
        if (!jsonData.hasOwnProperty('payment')) {
          console.error('No "payment" key found in the JSON object.');
          return null;
        }

	const amount = getAmountFromJSON(jsonData.payment);
        if (amount !== null) {
          console.log('Amount:', amount);
        } else {
          console.log('Failed to get amount from JSON data.');
          return null;
        }

	let comment = "";
        if (jsonData.payment.hasOwnProperty('extra')) {
          console.log('"extra" key found in the JSON.payment object.');
          comment = getCommentFromJSON(jsonData.payment.extra);
        }

	displayNotification("Payment came in!");
        displayHelloOverlay(amount, comment);
      };
      
      socket.onclose = function(event) {
        if (event.wasClean) {
          console.log(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
        } else {
          // e.g. server process killed or network down
          // event.code is usually 1006 in this case
          console.log('[close] Connection died');
        }
        changeMode(false);
      };

      socket.onerror = function(error) {
        console.error(`[websocket error]`);
      };

    }

    function parseJSON(thirdField) {
      try {
        return JSON.parse(thirdField);
      } catch (error) {
        console.error('Error parsing JSON from the third field:', error);
        return null;
      }
    }

   function getCommentFromJSON(jsonData) {
      // Check if the "amount" key exists in the JSON object
      if (!jsonData.hasOwnProperty('comment')) {
        console.error('No "comment" key found in the JSON object.');
        return null;
      }
    
      // Get the value of the "amount" key
      return jsonData.comment;
    }


    function getAmountFromJSON(jsonData) {
      // Check if the "amount" key exists in the JSON object
      if (!jsonData.hasOwnProperty('amount')) {
        console.error('No "amount" key found in the JSON object.');
        return null;
      }
    
      // Get the value of the "amount" key
      const amountValue = jsonData.amount;
    
      // Check if the value is valid
      if (typeof amountValue !== 'number') {
        console.error('Invalid value for "amount". Expected a number.');
        return null;
      }
    
      // Return the amount value
      return amountValue/1000;
    }

    function displayHelloOverlay(amount, comment) {
      const message = document.getElementById("overlay-message");
      message.innerHTML = 'Oink! Wow, ' + amount + ' satoshis, thank you so much!';
      if (comment !== null && comment.length > 0) {
        message.innerHTML += '<br/><br/>Comment:</br>' + comment;
      }
      
      const overlay = document.getElementById("overlay");
      overlay.style.display = "flex";
    
      // remove the overlay
      setTimeout(() => {
        const overlay = document.getElementById("overlay");
        overlay.style.display = "none";
      }, 10000);
    }
    
    // Function to display notification
    function displayNotification(message) {
      const notificationDiv = document.getElementById("notification");
      notificationDiv.innerText = message;

      const notificationSound = document.getElementById("notificationSound");
      notificationSound.play();

    }

    // Function to handle the button click event
    function buttonClickHandler(event) {
      if (!notificationsActive) {
        document.getElementById('myButton').textContent = 'Connecting websocket...';
        listenWebsocket(apiUrl);
      } else {
        document.getElementById('myButton').textContent = 'Closing websocket...';
        socket.close();
      }
    }

    function changeMode(active) {
      const donationsDiv = document.getElementById('donations');
      donationsDiv.style.display = (active ? "block" : "none");
      const myButton = document.getElementById('myButton');
      myButton.textContent = (active ? 'Oink Notifications Are Active! Volume up!' : 'Click to activate audio and visual notifications again!');
      notificationsActive = active;
    }

    // Attach the click event listener to the button
    const myButton = document.getElementById('myButton');
    myButton.addEventListener('click', buttonClickHandler);

    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
          .then(registration => {
            console.log('Service worker registered:', registration);
          })
          .catch(error => {
            console.error('Service worker registration failed:', error);
          });
      });
    }

  </script>
</body>
</html>