☰

Highlight VSBattles Stats based on Key

Highlights stat sections separated by '|' with different colours in a cyclical pattern on VSBattles wiki.

  1. // ==UserScript==
  2. // @name         Highlight VSBattles Stats based on Key
  3. // @description  Highlights stat sections separated by '|' with different colours in a cyclical pattern on VSBattles wiki.
  4. // @namespace    https://github.com/kaubu
  5. // @match        *://vsbattles.fandom.com/*
  6. // @match        *://fcoc-vs-battles.fandom.com/*
  7. // @match        *://miscvsbattles.fandom.com/*
  8. // @version      1.0.2
  9. // @author       kaubu (https://github.com/kaubu)
  10. // @grant        none
  11. // @license      0BSD
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     // Optimised colors for both dark (#19182f) and light (#d4e6f7) backgrounds
  18.     const colors = ["#E74C3C", "#E67E22", "#2ECC71", "#9B59B6", "#D81B60", "#1ABC9C"];
  19.  
  20.     function highlightElements(paragraph) {
  21.         // Ensure the paragraph contains a "|" before proceeding
  22.         if (!paragraph.textContent.includes("|")) return;
  23.  
  24.         let boldElements = Array.from(paragraph.querySelectorAll("b"));
  25.         if (boldElements.length === 0) return;
  26.  
  27.         let colorIndex = 0; // Reset color cycle for each paragraph
  28.         let nodes = Array.from(paragraph.childNodes); // Get all nodes in the paragraph
  29.  
  30.         nodes.forEach(node => {
  31.             if (node.nodeType === Node.TEXT_NODE && node.textContent.includes("|")) {
  32.                 // When encountering a '|', move to the next color
  33.                 colorIndex = (colorIndex + 1) % colors.length;
  34.             } else if (
  35.                 node.nodeType === Node.ELEMENT_NODE &&
  36.                 node.tagName === "B" &&
  37.                 !node.textContent.includes("Key:") && // Ignore "Key:" bold text
  38.                 !node.querySelector("a") // Ignore bold elements that contain links
  39.             ) {
  40.                 // Apply color to valid bold text only
  41.                 node.style.color = colors[colorIndex];
  42.                 node.style.fontWeight = "bold";
  43.             }
  44.         });
  45.     }
  46.  
  47.     function processParagraphs() {
  48.         let paragraphs = document.querySelectorAll(".mw-content-ltr > p");
  49.         paragraphs.forEach(highlightElements);
  50.     }
  51.  
  52.     // Run the script on the target paragraphs
  53.     processParagraphs();
  54. })();