☰

Userstyles World Stats Keeper v 1.15

Keeps stats of number of install and show number of install since your last visit of the page and if you don't clear with its button "Clear StatsKeeper"

// ==UserScript==
// @name           Userstyles World Stats Keeper v 1.15
// @version        1.16
// @description	   Keeps stats of number of install and show number of install since your last visit of the page and if you don't clear with its button "Clear StatsKeeper"
// @icon           https://external-content.duckduckgo.com/ip3/userstyles.world.ico
// @namespace      https://greasyfork.org/users/8
// @match          https://userstyles.world/user/*

// @author         decembre
// @grant          none
// ==/UserScript==

(function() {
  'use strict';

  // Create a storage object to store the stats
  var storage = localStorage;

  // Function to get the style ID and installs from a card
  function getStyleStats(card) {
    var styleId = card.querySelector('.grid.flex.rwrap .card.col.gap .card-header.thumbnail').href.match(/\/style\/(\d+)/)[1];
    console.log('Number ID found:', styleId);
    var installs = card.querySelector('.grid.flex.rwrap .card.col.gap small:first-of-type +  small > [data-tooltip]').textContent;
    console.log('Number Install found:', installs);
    return { styleId: styleId, installs: installs };
  }

// Function to update the stats and show the difference
function updateStats(card) {
  console.log('Updating stats for card:', card);
  var styleId = getStyleStats(card).styleId;
  var installs = card.querySelector('.grid.flex.rwrap .card.col.gap small:first-of-type +  small > [data-tooltip]').textContent;
  console.log('Number Install found:', installs);
  var initialInstalls = storage.getItem(styleId + '_initial');
  if (!initialInstalls) {
    initialInstalls = installs;
    storage.setItem(styleId + '_initial', initialInstalls);
  }
  console.log('Création de l\'élément statsElement');
  var statsElement = document.createElement('span');
  statsElement.className = 'StatsKeeper';
  var installsInt = parseInt(installs.replace(/[^0-9]/g, '')); // Remove non-numeric characters
  var initialInstallsInt = parseInt(initialInstalls.replace(/[^0-9]/g, '')); // Remove non-numeric characters
  var diff = installsInt - initialInstallsInt;
  console.log('Diff:', diff);
  if (diff > 0) {
    statsElement.textContent = '+' + diff;
    statsElement.style.background = 'green';
    statsElement.style.borderRadius = '5px';
    statsElement.style.color = 'gold';
  } else {
    statsElement.textContent = '⦁ ⦁ ⦁';
    statsElement.style.color = 'gray';
  }
  console.log('Récupération de l\'élément timeElement');
  var timeElement = card.querySelector('.grid.flex.rwrap .card.col.gap small:first-of-type +  small > [data-tooltip]');
  if (timeElement) {
    console.log('Time element trouvé:', timeElement);
    timeElement.parentNode.insertBefore(statsElement, timeElement.nextSibling);
    console.log('StatsKeeper ajouté:', statsElement);
  } else {
    console.error('Time element non trouvé');
  }
}

  // Function to load stored stats
  function loadStats(cards) {
    cards.forEach(function(card) {
      var styleId = getStyleStats(card).styleId;
      var installs = getStyleStats(card).installs;
      var initialInstalls = storage.getItem(styleId + '_initial');
      if (initialInstalls) {
        var statsElement = document.createElement('span');
        statsElement.className = 'StatsKeeper';
        var installsInt = parseInt(installs.replace(/[^0-9]/g, '')); // Remove non-numeric characters
        var initialInstallsInt = parseInt(initialInstalls.replace(/[^0-9]/g, '')); // Remove non-numeric characters
        var diff = installsInt - initialInstallsInt;
        console.log('Diff:', diff);
        if (diff > 0) {
          statsElement.textContent = '+' + diff;
          statsElement.style.background = 'green';
          statsElement.style.borderRadius = '5px';
          statsElement.style.color = 'gold';
        } else {
          statsElement.textContent = '⦁ ⦁ ⦁';
          statsElement.style.color = 'gray';
        }
        console.log('Stats element:', statsElement);
        var timeElement = card.querySelector('.grid.flex.rwrap .card.col.gap small:first-of-type +  small > [data-tooltip]');
console.log('Time element:', timeElement);
timeElement.parentNode.insertBefore(statsElement, timeElement.nextSibling);
console.log('StatsKeeper added:', statsElement);
}
});
}

// Function to clear all stats
function clearStats() {
console.log('Clearing all stats');
storage.clear();
var statsElements = document.querySelectorAll('.StatsKeeper');
statsElements.forEach(function(element) {
element.parentNode.removeChild(element);
});
}

// Get all cards and update the stats
var cards = document.querySelectorAll('.grid.flex.rwrap .card.col.gap');
console.log('Cards:', cards);
// loadStats(cards);
cards.forEach(function(card) {
  updateStats(card);
});

// Add a style to the page
   var style = document.createElement('style');
    style.innerHTML = `
.card-body:has(.StatsKeeper) span.author {
    position: relative !important;
    display: inline-block !important;
    width: 57% !important;
    top: 0vh !important;
    margin: 0vh 0 0 0px !important;
    padding: 2px 5px;
    font-size: 12px !important;
    border-radius: 5px;
/*border: 1px solid yellow  !important;*/
}
.card-footer small.flex:nth-child(2) span.StatsKeeper:not([style="color: gray;"]) {
    position: relative !important;
    display: inline-block !important;
    width: 40px!important;
    height: 1.5vh !important;
    line-height: 1.1vh !important;
    top: -0.2vh !important;
    left: -180px  !important;
    margin: 0vh 0 0 -20px !important;
    padding: 2px 5px;
    font-size: 12px !important;
    border-radius: 5px;
    text-align: right !important;
color: gold !important;
/*border: 1px solid aqua  !important;*/
}
.card-footer small.flex:nth-child(2) span.StatsKeeper[style="color: gray;"] {
    position: relative !important;
    display: inline-block !important;
    width: 40px!important;
    height: 1.5vh !important;
    line-height: 0.9vh !important;
    top: -0.2vh !important;
    left: -180px  !important;
    margin: 0vh 0 0 -20px !important;
    padding: 2px 5px;
    font-size: 8px !important;
    border-radius: 5px;
    text-align: right !important;
color: silver !important;
border: none  !important;
}

.ClearStatsButton {
    position: absolute !important;
    margin: 0 0 0 -150px !important;
    padding: 2px 5px !important;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
color: #fff;
background-color: #4CAF50;
border: none;
}
    `;
    document.head.appendChild(style);

// Add a button to clear all stats
var clearButton = document.createElement('button');
clearButton.textContent = 'Clear StatsKeeper';
clearButton.className = 'ClearStatsButton';
clearButton.onclick = clearStats;
var countElement = document.querySelector('#content section#styles .flex p.count');
countElement.parentNode.appendChild(clearButton);
})();