// ==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);
})();