SB100 / GGn Subscription and PM checker

// ==UserScript==
// @namespace    https://openuserjs.org/users/SB100
// @name         GGn Subscription and PM checker
// @updateURL    https://openuserjs.org/meta/SB100/GGn_Subscription_and_PM_checker.meta.js
// @description  Get a notification when you have a new subscription or PM on site
// @version      1.0.1
// @author       SB100
// @copyright    2021, SB100 (https://openuserjs.org/users/SB100)
// @license      MIT
// @match        https://gazellegames.net/*
// ==/UserScript==

// ==OpenUserJS==
// @author SB100
// ==/OpenUserJS==

/* jshint esversion: 6 */

/**
 * =============================
 * ADVANCED OPTIONS
 * =============================
 */

// true if you want to notify on new pms
const SETTING_CHECK_PM = true;

// true if you want to notify on new subscriptions
const SETTING_CHECK_SUBSCRIPTION = true;

/**
 * =============================
 * END ADVANCED OPTIONS
 * DO NOT MODIFY BELOW THIS LINE
 * =============================
 */

/**
 * Get number of new PMs
 */
function checkForPM() {
  const pms = document.querySelector('#nav_inbox');
  const numPMs = pms && pms.dataset.pms
  const numPMsInt = parseInt(numPMs, 10);
  return isNaN(numPMsInt) ? 0 : numPMsInt;
}

/**
 * Get number of new Subscriptions
 */
function checkForSubscriptions() {
  const subscriptions = document.querySelector('.notificationsico .newnoti');
  const textMatch = subscriptions && subscriptions.innerText.match(/[\d]+/gi);
  const numSubs = textMatch && textMatch[0];
  const numSubsInt = parseInt(numSubs, 10);
  return isNaN(numSubsInt) ? 0 : numSubsInt;
}

/**
 * If we have notifications to show, create a popup
 */
function createNotification(pms, subscriptions) {
  if (pms === 0 && subscriptions === 0) {
    return;
  }

  const innerHTML = `<div id="ggn-pm-subscription-notif" style='display: block; border-radius: 5px; border: 1px solid rgb(80, 194, 78); box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px; color: darkgreen; width: 290px; font-size: 13px; line-height: 16px; text-align: left; padding: 8px 10px 9px; overflow: hidden; background-image: linear-gradient(135deg, #8ae68a 25%, #8fee8f 25%, #8fee8f 50%, #8ae68a 50%, #8ae68a 75%, #8fee8f 75%, #8fee8f 100%); background-size: 28.28px 28.28px;'>
    <ul style='list-style-type: none; margin: 0; padding: 0;'>
      ${SETTING_CHECK_PM && pms > 0 ? `<li><a style='text-decoration:none; color: darkgreen;' href='https://gazellegames.net/inbox.php'>New PMs: <strong>${pms}</strong></a></li>` : ''}
      ${SETTING_CHECK_SUBSCRIPTION && subscriptions > 0 ? `<li><a style='text-decoration:none; color: darkgreen;' href='https://gazellegames.net/torrents.php?action=notify'>New Subscriptions: <strong>${subscriptions}</strong></a></li>` : ''}
</ul>
  </div>`;

  const notif = document.createElement('div');
  notif.classList.add('i-am-new');
  notif.innerHTML = innerHTML;

  document.body.appendChild(notif);

  notif.onclick = () => {
    notif.remove();
  };
}

/**
 * Creates the style tag to show a popup if needed
 */
function createStyleTag() {
  const css = `.i-am-new {
    bottom: 20px;
    right: 20px;
    position: fixed;
    width: 310px;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    z-index: 10000000;
}

.i-am-new + .i-am-new {
    bottom: 70px!important;
}`;

  const style = document.createElement('style');
  style.type = 'text/css';
  style.appendChild(document.createTextNode(css));

  document.head.appendChild(style);
}

(function () {
  'use strict';

  createStyleTag();
  createNotification(checkForPM(), checkForSubscriptions());
})();