Tampermonkey script for https://fragile.city

tmScript.js

// ==UserScript==
// @name         Sorted list + stats
// @version      0.3
// @description  Sorts the cities + gives pollution & population stats
// @author       SteveHere
// @match        https://fragile.city/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=fragile.city
// @grant        none
// ==/UserScript==

window.doneSorting = false;

const cE = e => document.createElement(e),
      getByTN = e => document.getElementsByTagName(e),
      qs = e => document.querySelector(e),
      qsAll = e => document.querySelectorAll(e);

// There are only 2 options: By pollution, or by population.
window.sortingByPopulation = true;

function doSorting() {
    let article = Object.assign(cE('article'), { classList: 'sorted' });
    if (qsAll('article.sorted').length > 0) {
        qsAll('article.sorted')[0].remove();
    }

    let popCounter = undefined, newPopCounter = false;

    if (qsAll('div.pop-counter').length === 0) {
        popCounter = qsAll('article:not(.sorted)')[0].children[0].cloneNode(true);
        popCounter.children[0].innerText = "Global Population";
        popCounter.children[2].removeChild(popCounter.children[2].children[0]);
        popCounter.classList.add('pop-counter');
        newPopCounter = true;
    } else {
        popCounter = qsAll('div.pop-counter')[0];
    }


    article.append(
        Object.assign(cE('span'), { textContent: 'My City' }),
        qsAll('article:not(.sorted)')[0].children[0].cloneNode(true)
    );
    let pollutionProductionTotal = 0, populationTotal = 0;
    [...qsAll('article:not(.sorted)')[0].children].slice(1).map(
        e => [
            e,
            parseInt(e.children[e.children.length-1].children[0].children[1].innerText.replace(",",'')),
            parseInt(e.children[e.children.length-1].children[1].children[1].innerText.replace(",",''))
        ]
    ).sort((a, b)=> window.sortingByPopulation ? b[2]-a[2] : b[1]-a[1]).forEach(([element, pollution, population], i)=>{
        pollutionProductionTotal += pollution;
        populationTotal += population;
        let copy = element.cloneNode(true);
        copy.prepend(Object.assign(cE('span'), { textContent: `${i + 1}. ` }));
        article.appendChild(copy);
    });

    popCounter.children[2].children[0].children[1].innerText = populationTotal.toLocaleString();

    (e=>{
        if (newPopCounter) { e.insertBefore(popCounter, e.children[4]); }
        if (qsAll('article.sorted').length === 0) { e.append(article); }
    })(qs('section.basis-full.max-w-sm'))

    window.doneSorting = true;
};

let watcher = undefined;
let lastWatches = [];
const consecutiveWatches = 3;
const pollInterval = 500;

const watcherFunc = () => {
    if (qs('section.basis-full.max-w-sm') === null) {
        watcher = setTimeout(watcherFunc, pollInterval);
    } else {
        const article_length = getByTN('article')[0].children.length;
        lastWatches.push(article_length);
        if (lastWatches.length > consecutiveWatches) { lastWatches.shift(); }
        if (lastWatches.length === consecutiveWatches) {
            if (lastWatches.filter(e=>e===article_length).length === lastWatches.length){
                doSorting();
            }
        } else {
            watcher = setTimeout(watcherFunc, pollInterval);
        }
    }
}

watcher = setTimeout(watcherFunc, pollInterval);

window.examiner = setInterval(()=>{
    if (window.doneSorting && qsAll('article.sorted').length === 0) {
        console.log('Relaunching watcher');
        window.doneSorting = false;
        watcher = setTimeout(watcherFunc, pollInterval)
    }

    if (qsAll('style#hide-original').length === 0) {
        document.body.append(Object.assign(cE('style'), { id: "hide-original", textContent: "article:not(.sorted){ display: none; }" }));
    }

    if (qsAll('div.space-y-2').length > 0){
        if (qsAll('button.population-sort-button').length === 0){
            qsAll('div.space-y-2')[0].append(
                Object.assign(cE('button'), {
                    textContent: "Sort by Population",
                    classList: 'population-sort-button',
                    style: 'margin-right: 1em;',
                    onclick: ()=>{ window.sortingByPopulation = true; doSorting(); }
                })
            );
        }
        if (qsAll('button.pollution-sort-button').length === 0){
            qsAll('div.space-y-2')[0].append(
                Object.assign(cE('button'), {
                    textContent: "Sort by Pollution",
                    classList: 'pollution-sort-button',
                    onclick: ()=>{ window.sortingByPopulation = false; doSorting(); }
                }),
            );
        }
    }
}, 1000);

0.3: Removed global pollution counter, now that it's redundant.

Entire script has now been rendered redundant with latest version.