// ==UserScript==
// @name Greasy Fork Total Downloads
// @namespace -
// @version 0.5
// @description Shows a user's total downloads.
// @author NotYou
// @include *greasyfork.org/*/users/*
// @license GPL-3.0
// @run-at document-body
// @grant none
// @downloadURL none
// ==/UserScript==

/*

﹀ Change Log ﹀

0.5 Version:
- Changed event
- Converted function into arrow function.
- Better design

0.4 Version:
- Fixed counting bugs
- Converted jQuery to Pure JS
- ES6 Syntax using

*/

window.addEventListener('DOMContentLoaded', () => {
    let
        ti = 0,
        tdi = 0

    document.querySelectorAll('#user-script-list > li dd.script-list-total-installs span').forEach(function(e) {
        ti += +e.innerText.replace(/,/g, '')
    })
    document.querySelectorAll('#user-script-list > li dd.script-list-daily-installs span').forEach(function(e) {
        tdi += +e.innerText.replace(/,/g, '')
    })
    let tif = ti.toLocaleString()
    let tdif = tdi.toLocaleString()
    document.querySelector('div.sidebarred-main-content h3:first-child').insertAdjacentHTML('beforeend', `<div style="display: inline-flex;padding: 3px 4px 0px 4px;">
    <span style="font-size: 15px;border-radius: 3px;background: rgb(45, 45, 45);color: rgb(255, 255, 255);margin: 0px 4px;padding: 0 4px;outline: 2px solid rgb(123, 23, 23)">
        <span style="width: 8px;height: 8px;display: inline-flex;margin-bottom: 1px;margin-left: 4px;border-radius: 50%;background: rgb(123, 23, 23)"></span>
        ${tif} Installs</span>
    <span style="font-size: 15px;border-radius: 3px;background: rgb(45, 45, 45);color: rgb(255, 255, 255);margin: 0px 4px;padding: 0 4px;outline: 2px solid rgb(185, 32, 32)">
        <span style="width: 8px;height: 8px;display: inline-flex;margin-bottom: 1px;margin-left: 4px;border-radius: 50%;background: rgb(185, 32, 32)"></span>
        ${tdif} Daily Installs</span>
    </div>`)
})