Adding Win-Percentage to Leaderboard / Tampermonkey Script

in #hive-13323last year

image.png

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

image.png

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.

image.png

Sort:  
Well done @louis88! You successfully guessed the match result and unlocked your badge!
Click on the badge to view your board.

Thank you to our sponsors. Please consider supporting them.

@actifit @arcange @poshtoken @wrestorgonline

Check out our last posts:

Women's World Cup Contest - Recap of day 9
Hive Power Up Day - August 1st 2023
Women's World Cup Contest - Recap of day 8
Well done @louis88! You successfully guessed the match result and unlocked your badge!
Click on the badge to view your board.

Thank you to our sponsors. Please consider supporting them.

@actifit @arcange @poshtoken @wrestorgonline

Check out our last posts:

Women's World Cup Contest - Check your ranking!
Women's World Cup Contest - Recap of the third day
Women's World Cup Contest - Recap of the second day

Wow, congratulations sr!

Great work. It looks like a cool enhancement!

This post has been supported by @Splinterboost with a 12% upvote! Delagate HP to Splinterboost to Earn Daily HIVE rewards for supporting the @Splinterlands community!

Delegate HP | Join Discord

Well done @louis88! You successfully guessed the match result and unlocked your badge!
Click on the badge to view your board.

Thank you to our sponsors. Please consider supporting them.

@actifit @arcange @poshtoken @wrestorgonline

Check out our last posts:

Women's World Cup Contest - Recap of day 4
Women's World Cup Contest - Check your ranking!
Women's World Cup Contest - Recap of the third day
Well done @louis88! You successfully guessed the match result and unlocked your badge!
Click on the badge to view your board.

Thank you to our sponsors. Please consider supporting them.

@actifit @arcange @poshtoken @wrestorgonline

Check out our last posts:

Women's World Cup Contest - Check your ranking!
Women's World Cup Contest - Recap of the third day
Women's World Cup Contest - Recap of the second day
Well done @louis88! You successfully guessed the match result and unlocked your badge!
Click on the badge to view your board.

Thank you to our sponsors. Please consider supporting them.

@actifit @arcange @poshtoken @wrestorgonline

Check out our last posts:

Women's World Cup Contest - Recap of day 5
Women's World Cup Contest - Recap of day 4
Women's World Cup Contest - Check your ranking!
Well done @louis88! You successfully guessed the match result and unlocked your badge!
Click on the badge to view your board.

Thank you to our sponsors. Please consider supporting them.

@actifit @arcange @poshtoken @wrestorgonline

Check out our last posts:

Hive Power Up Day - August 1st 2023
Women's World Cup Contest - Recap of day 8
Women's World Cup Contest - Recap of day 7
Well done @louis88! You successfully guessed the match result and unlocked your badge!
Click on the badge to view your board.

Thank you to our sponsors. Please consider supporting them.

@actifit @arcange @poshtoken @wrestorgonline

Check out our last posts:

Women's World Cup Contest - Recap of day 6
Women's World Cup Contest - Recap of day 5
Women's World Cup Contest - Recap of day 4

!PGM
!PIZZA
!CTP

Sent 0.1 PGM - 0.1 LVL- 1 STARBITS - 0.05 DEC - 1 SBT - 0.1 THG - 0.000001 SQM - 0.1 BUDS - 0.01 WOO - 0.005 SCRAP tokens

remaining commands 4

BUY AND STAKE THE PGM TO SEND A LOT OF TOKENS!

The tokens that the command sends are: 0.1 PGM-0.1 LVL-0.1 THGAMING-0.05 DEC-15 SBT-1 STARBITS-[0.00000001 BTC (SWAP.BTC) only if you have 2500 PGM in stake or more ]

5000 PGM IN STAKE = 2x rewards!

image.png
Discord image.png

Support the curation account @ pgm-curator with a delegation 10 HP - 50 HP - 100 HP - 500 HP - 1000 HP

Get potential votes from @ pgm-curator by paying in PGM, here is a guide

I'm a bot, if you want a hand ask @ zottone444


PIZZA!

$PIZZA slices delivered:
@torran(6/10) tipped @louis88

Well done @louis88! You successfully guessed the match result and unlocked your badge!
Click on the badge to view your board.

Thank you to our sponsors. Please consider supporting them.

@actifit @arcange @poshtoken @wrestorgonline

Check out our last posts:

Women's World Cup Contest - Recap of day 9
Hive Power Up Day - August 1st 2023
Women's World Cup Contest - Recap of day 8
Well done @louis88! You successfully guessed the match result and unlocked your badge!
Click on the badge to view your board.

Thank you to our sponsors. Please consider supporting them.

@actifit @arcange @poshtoken @wrestorgonline

Check out our last posts:

Women's World Cup Contest - Recap of the second day
Women's World Cup Contest - Recap of the first day
Join the HiveBuzz Women's World Cup Contest - Register Before It Starts And Win Big!
Well done @louis88! You successfully guessed the match result and unlocked your badge!
Click on the badge to view your board.

Thank you to our sponsors. Please consider supporting them.

@actifit @arcange @poshtoken @wrestorgonline

Check out our last posts:

Women's World Cup Contest - Recap of day 4
Women's World Cup Contest - Check your ranking!
Women's World Cup Contest - Recap of the third day
Well done @louis88! You successfully guessed the match result and unlocked your badge!
Click on the badge to view your board.

Thank you to our sponsors. Please consider supporting them.

@actifit @arcange @poshtoken @wrestorgonline

Check out our last posts:

Women's World Cup Contest - Recap of the second day
Women's World Cup Contest - Recap of the first day
Join the HiveBuzz Women's World Cup Contest - Register Before It Starts And Win Big!
Well done @louis88! You successfully guessed the match result and unlocked your badge!
Click on the badge to view your board.

Thank you to our sponsors. Please consider supporting them.

@actifit @arcange @poshtoken @wrestorgonline

Check out our last posts:

Women's World Cup Contest - Recap of the second day
Women's World Cup Contest - Recap of the first day
Join the HiveBuzz Women's World Cup Contest - Register Before It Starts And Win Big!

Congratulations @louis88! You have completed the following achievement on the Hive blockchain And have been rewarded with New badge(s)

You distributed more than 145000 upvotes.
Your next target is to reach 150000 upvotes.

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

To support your work, I also upvoted your post!

Check out our last posts:

Women's World Cup Contest - Recap of the second day
Women's World Cup Contest - Recap of the first day
Join the HiveBuzz Women's World Cup Contest - Register Before It Starts And Win Big!
Well done @louis88! You successfully guessed the match result and unlocked your badge!
Click on the badge to view your board.

Thank you to our sponsors. Please consider supporting them.

@actifit @arcange @poshtoken @wrestorgonline

Check out our last posts:

Women's World Cup Contest - Recap of the second day
Women's World Cup Contest - Recap of the first day
Join the HiveBuzz Women's World Cup Contest - Register Before It Starts And Win Big!
Well done @louis88! You successfully guessed the match result and unlocked your badge!
Click on the badge to view your board.

Thank you to our sponsors. Please consider supporting them.

@actifit @arcange @poshtoken @wrestorgonline

Check out our last posts:

Women's World Cup Contest - Recap of day 7
Women's World Cup Contest - Recap of day 6
Women's World Cup Contest - Recap of day 5
Well done @louis88! You successfully guessed the match result and unlocked your badge!
Click on the badge to view your board.

Thank you to our sponsors. Please consider supporting them.

@actifit @arcange @poshtoken @wrestorgonline

Check out our last posts:

Women's World Cup Contest - Recap of day 7
Women's World Cup Contest - Recap of day 6
Women's World Cup Contest - Recap of day 5
Well done @louis88! You successfully guessed the match result and unlocked your badge!
Click on the badge to view your board.

Thank you to our sponsors. Please consider supporting them.

@actifit @arcange @poshtoken @wrestorgonline

Check out our last posts:

Hive Power Up Day - August 1st 2023
Women's World Cup Contest - Recap of day 8
Women's World Cup Contest - Recap of day 7