Adding Win-Percentage to Leaderboard / Tampermonkey Script

So that I don't always have to calculate the current win rates in the current leaderboard manually with the calculator, I asked ChatGPT without further delay if he could write me a small fine userscript for Tampermonkey. I gave him the following instruction:

I have a table on a page that has 2 columns. One column has a numeric value e.g. 286. The column looks like this in HTML: 286 next to it is a column with the value 176 which looks like this: 176.

Write me a code that I can use as a Tampermonkey script on the page https://splinterlands.com/?p=battle_history so that after the value that is in the column with wins-col adds another value in the color green. Search the whole page and in each Row there are these two columns. Now do a calculation that looks like this: 100 / battles-col * wins-col

The specification is the css class that is in the column.

The whole thing needed only 2 small adjustments and there it was. Now I have every time I open the battle page, in the leaderboard the % information, how high the winrate is. Try it out, if you have questions just write in the comments.

The Splinterlands Wins Percentage Calculator Tampermonkey script is a user script designed to enhance the Splinterlands battle history page's functionality. It is specifically intended for users of the Tampermonkey browser extension and is compatible with the website "https://splinterlands.com/?p=battle_history." This script adds a visual representation of battle wins percentages to the battles history table by calculating and displaying the win rate for each row in the table.

Functionality:

Win Percentage Calculation: The script first calculates the win percentage for each row in the table based on the numerical values present in the "battles-col" and "wins-col" columns. It divides the number of wins ("wins-col") by the total number of battles ("battles-col") and multiplies the result by 100. The calculated win percentage is then rounded to two decimal places.

Color-coded Visualization: Once the win percentage is calculated, the script visually represents it in the table by adding the calculated value in parentheses next to the original "wins-col" value. The win percentage is colored differently based on specific thresholds:

• Green (>= 50%): If the win percentage is 50% or higher, the calculated value is displayed in green.
• Gold (>= 80%): If the win percentage is 80% or higher, the calculated value is displayed in gold.
• Red (< 50%): If the win percentage is less than 50%, the calculated value is displayed in red.

Dynamic Monitoring: To accommodate dynamically generated content, the script continuously monitors the entire document for changes using a MutationObserver. This ensures that any updates to the table or its content, even those made via AJAX or other dynamic means, are automatically processed, and the win percentage visualization is updated accordingly.

Usage:

• Install Tampermonkey: Users must have the Tampermonkey browser extension installed on their web browser to run this script.
• Apply the Script: Copy the provided script code and paste it into a new Tampermonkey script.
• Save and Activate: Save the script and visit the "https://splinterlands.com/?p=battle_history" page. The script will automatically run, and the win percentage visualization will be added to the "wins-col" values in the table.
• Real-time Updates: The script will keep monitoring the page, and any changes to the table or its content will trigger the recalculation and visualization of win percentages.

Conclusion:

The Splinterlands Wins Percentage Calculator Tampermonkey script is a useful tool for Splinterlands players who want a quick and visually appealing overview of their win rates in the battle history table. It automatically calculates win percentages, applies color-coded visualization based on win thresholds, and dynamically updates the display to ensure real-time accuracy. With this script, users can better analyze their battle history and make strategic decisions based on their performance.

Get Tampermonkey for your Browser: https://www.tampermonkey.net

The Tampermonkey Script

// ==UserScript==
// @name         Splinterlands Wins Percentage Calculator
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  Calculate and display wins percentage in green (>= 50%), gold (>= 80%), or red (< 50%) color on Splinterlands battle history page
// @author       @louis88 / @louis.witness
// @match        https://splinterlands.com/?p=battle_history
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Function to add a value in the column "wins-col" in green, gold or red
    function addWinsPercentage() {
        const rows = document.querySelectorAll('.battles-col');
        rows.forEach(row => {
            const battles = parseFloat(row.textContent);
            const wins = parseFloat(row.nextElementSibling.textContent);
            const winsPercentage = (100 / battles * wins).toFixed(2);
            const winsColCell = row.nextElementSibling;

            // Create a new element to display the calculated percentage
            const winsPercentageElement = document.createElement('span');
            winsPercentageElement.innerText = ' (' + winsPercentage + '%)';

            // Determine the color based on the percentage
            if (winsPercentage >= 80) {
                winsPercentageElement.style.color = 'gold';
            } else if (winsPercentage >= 50) {
                winsPercentageElement.style.color = 'green';
            } else {
                winsPercentageElement.style.color = 'red';
            }

            // Check if the percentage has already been added to avoid duplicates
            if (!winsColCell.querySelector('.wins-percentage')) {
                winsColCell.appendChild(winsPercentageElement);
                winsPercentageElement.classList.add('wins-percentage');
            }
        });
    }

    // Run the function once and monitor the entire document for changes
    addWinsPercentage();
    const observer = new MutationObserver(addWinsPercentage);
    observer.observe(document, { childList: true, subtree: true });
})();

Next, I'll work on a tampermonkeyscript that displays information about your battles directly, and maybe display a total at the top of the page.