ranking_bga.user.js

// ==UserScript==
// @name         Show ranking in BGA
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  Show current game ranking
// @author       ameboide
// @match        https://boardgamearena.com/*?table=*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=boardgamearena.com
// @grant        none
// ==/UserScript==

(function () {
  "use strict";

  function showRanking() {
    let spans = [...document.querySelectorAll(".player_score_value")];
    spans
      .sort((a, b) => b.textContent - a.textContent)
      .forEach((span, index) => {
        // generate an increasing color from red to yellow to green
        let color = generateColorScale(index, 0, spans.length - 1);
        let style = `color: ${color}; font-weight: bold; background-color: black; padding: 0px 4px;`;
        let ranking = `<span style="${style}">${index + 1}</span>`;
        span.parentNode.querySelector(".fa-star").innerHTML = ranking;
      });

    myCity();
  }

  function generateColorScale(value, minValue, maxValue) {
    // calculate the percentage of value between minValue and maxValue
    let percentage = (value - minValue) / (maxValue - minValue);

    // calculate the RGB values for green, yellow, and red
    let green = [0, 255, 0];
    let yellow = [255, 255, 0];
    let red = [255, 0, 0];

    // calculate the RGB values for the color based on the percentage
    let color = [];
    if (percentage < 0.5) {
      color = green.map((v, i) =>
        Math.round(v + (yellow[i] - v) * percentage * 2)
      );
    } else {
      color = yellow.map((v, i) =>
        Math.round(v + (red[i] - v) * (percentage - 0.5) * 2)
      );
    }

    // return the color as an RGB string
    return `rgb(${color.join(", ")})`;
  }

  // show episode total in My City
  function myCity() {
    let divs = document.querySelectorAll("#cty_extra_result > div");
    if (!divs.length || document.querySelector('#cty_extra_result .subtotal')) return;

    let totals = document.querySelectorAll("#cty_extra_result > div[style*='font-weight']");
    for(let i=0; i<totals.length; i++) {
      let div = document.createElement('div');
      div.className = 'subtotal';
      let subtotal = parseInt(totals[i].innerHTML) - parseInt(divs[totals.length + i].innerHTML)
      div.innerHTML = i ? `${subtotal} pts` : 'Episode total';
      totals[0].parentNode.insertBefore(div, totals[0]);
    }
  }

  setInterval(showRanking, 2000);

  // let the game result statistics be scrollable
  let style = document.createElement('style');
  style.innerHTML = '#player_stats {overflow: auto;}';
  document.head.appendChild(style);
})();