☰

Flag Tooltip - Bonk.io

Shows full country name when hovering over flags in the Lobby Listing.

// ==UserScript==
// @name         Flag Tooltip - Bonk.io
// @version      1.0.0
// @description  Shows full country name when hovering over flags in the Lobby Listing.
// @author       Miquella
// @namespace    https://greasyfork.org/en/users/1502869
// @license      GPL-3.0
// @match        https://bonk.io/gameframe-release.html
// @run-at       document-idle
// ==/UserScript==

(function () {
    //for the non-flag knowers out there...
    //skill issue in my opinion.
  // dictionary of country codes mapped to readable country names
  const countryMap = {
    // common
    br: "Brazil", ru: "Russia", kr: "South Korea", tr: "Turkey", us: "United States", ca: "Canada",
    tw: "Taiwan", in: "India", ph: "Philippines", de: "Germany", fr: "France", gb: "United Kingdom",
    mx: "Mexico", jp: "Japan", cn: "China", ar: "Argentina", au: "Australia", es: "Spain", it: "Italy",
    pl: "Poland", nl: "Netherlands", id: "Indonesia", ve: "Venezuela", th: "Thailand", eg: "Egypt",
    my: "Malaysia", se: "Sweden", no: "Norway", fi: "Finland", pt: "Portugal", vn: "Vietnam",
    ro: "Romania", hu: "Hungary", il: "Israel", sa: "Saudi Arabia", pk: "Pakistan", bd: "Bangladesh",
    cl: "Chile", ae: "United Arab Emirates", za: "South Africa", cz: "Czech Republic", ua: "Ukraine",
    be: "Belgium", dk: "Denmark", at: "Austria", gr: "Greece", nz: "New Zealand", co: "Colombia",
    hk: "Hong Kong", sg: "Singapore",
    // additional supported
    az: "Azerbaijan", ie: "Ireland", tn: "Tunisia", hr: "Croatia", rs: "Serbia", ge: "Georgia",
    bg: "Bulgaria", sk: "Slovakia", si: "Slovenia", lt: "Lithuania", lv: "Latvia", ee: "Estonia",
    iq: "Iraq", ir: "Iran", sy: "Syria", jo: "Jordan", ma: "Morocco", dz: "Algeria", ng: "Nigeria",
    ke: "Kenya", gh: "Ghana", et: "Ethiopia", kz: "Kazakhstan", uz: "Uzbekistan", lk: "Sri Lanka",
    ne: "Niger", zm: "Zambia"
  };
  // set to avoid logging duplicate unknown flags
  const loggedUnknowns = new Set();
  // injects CSS to style the country name tooltip
  const style = document.createElement('style');
  style.textContent = `
    tr[data-country-name] {
      position: relative;
    }

    tr[data-country-name]::after {
      content: attr(data-country-name);
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      background: #222;
      color: #fff;
      padding: 4px 8px;
      font-size: 12px;
      border-radius: 4px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.15s ease-in-out;
      z-index: 9999;
    }

    tr[data-country-name]:hover::after {
      opacity: 1;
    }
  `;
  document.head.appendChild(style);
  /**
   * applies tooltips with country names to each lobby row
   */
  const applyCountryTooltips = () => {
    const rows = document.querySelectorAll('tr[data-myid]');
    rows.forEach(row => {
      // skip if already processed
      if (row.hasAttribute("data-country-name")) return;
      // find flag image in this row
      const flag = row.querySelector('img[src*="graphics/flags/"]');
      if (!flag) return;
      // extract 2-letter country code from the image filename
      const src = flag.getAttribute("src");
      const match = src.match(/graphics\/flags\/([a-z]{2})\.png/i);
      if (!match) return;
      const code = match[1].toLowerCase();
      const name = countryMap[code];
      // warn once for any unknown country code
      if (!name && !loggedUnknowns.has(code)) {
        console.warn("unknown flag code:", code);
        loggedUnknowns.add(code);
        return;
      }
      // apply country name as attribute for tooltip display
      if (name) {
        row.setAttribute("data-country-name", name);
      }
    });
  };
  // monitor DOM changes and reapply tooltips when lobby list updates
  new MutationObserver(applyCountryTooltips).observe(document.body, {
    childList: true,
    subtree: true
  });
  // run immediately on page load
  applyCountryTooltips();
})();