Life In 19x19

Posted: **Fri Mar 18, 2022 9:35 am**

Hey,

I made a small script that adds gender and country/region filters to goratings.org.

How to use in Chrome Browser?
Please note! An updated version of the script is in post #4
1. Add a new bookmark in Chrome (Right click the bookmark bar and select "Add Page..."). Add a name (for example "Enhance Ratings").
2. Copy-paste the following script to the URL part of the bookmark. Save.

Code: Select all

javascript:function fn(){ tables = Array.from(document.getElementsByTagName("tbody")); rankingTable = tables.at(-1); rankingTableRows = Array.from(rankingTable.children); if (rankingTableRows[0].children.length > 5) { console.log("Already initialized.."); } else { console.log("Initializing the enhanced rankings.."); gender = "all"; flag = "all"; function updateTable() { rank = 1; rankingTableRows.slice(1).forEach(el => { elGender = el.children[3]?.children[0]?.textContent === "♂" ? "men" : "women"; elFlag = el.children[4]?.children[0]?.alt; if (!['cn', 'jp', 'kr', 'tw'].includes(elFlag)) { elFlag = "other"; } if ((gender === "all" || elGender === gender) && (flag == "all" || elFlag === flag)) { el.children[0].textContent = rank++; el.style.display = "table-row"; } else { el.style.display = "none"; } }); } function createGenderSelect(parentEl) { const genderSelect = document.createElement("SELECT"); genderSelect.setAttribute("id", "genderSelect"); const all = document.createElement("option"); const men = document.createElement("option"); const women = document.createElement("option"); all.setAttribute("value", "all"); men.setAttribute("value", "men"); women.setAttribute("value", "women"); all.textContent = "All"; men.textContent = "Men"; women.textContent = "Women"; genderSelect.append(all, men, women); genderSelect.onchange = function(event){gender = event.target.value; updateTable();}; parentEl.setAttribute('style', 'white-space: pre;'); parentEl.textContent = "Gender\r\n"; parentEl.appendChild(genderSelect); } function createFlagSelect(parentEl) { const flagSelect = document.createElement("SELECT"); flagSelect.setAttribute("id", "flagSelect"); const all = document.createElement("option"); const china = document.createElement("option"); const japan = document.createElement("option"); const korea = document.createElement("option"); const taiwan = document.createElement("option"); const other = document.createElement("option"); all.setAttribute("value", "all"); china.setAttribute("value", "cn"); japan.setAttribute("value", "jp"); korea.setAttribute("value", "kr"); taiwan.setAttribute("value", "tw"); other.setAttribute("value", "other"); all.textContent = "All"; china.textContent = "China"; japan.textContent = "Japan"; korea.textContent = "Korea"; taiwan.textContent = "Taiwan"; other.textContent = "Other"; flagSelect.append(all, china, japan, korea, taiwan, other); flagSelect.onchange = function(event){flag = event.target.value; updateTable();}; parentEl.setAttribute('style', 'white-space: pre;'); parentEl.textContent = "Flag\r\n"; parentEl.appendChild(flagSelect); } header = rankingTableRows[0]; headerRow = header.children; headerRow[0].setAttribute('style', 'white-space: pre;'); headerRow[0].textContent = "Overall\r\nRank"; createGenderSelect(headerRow[2]); createFlagSelect(headerRow[3]); newRank = headerRow[0].cloneNode(); newRank.textContent = "Rank"; header.prepend(newRank); rank = 1; rankingTableRows.slice(1).forEach(el => { copyEl = el.children[0].cloneNode(); copyEl.textContent = rank++; el.prepend(copyEl); }); } } fn();

3. Navigate to https://www.goratings.org/en/. Click the bookmark you saved. Voila!

Full Code
Here is an easier-to-read version of the code (without the javascript: prefix). Feel free to inspect or improve, but please share with everyone if you make something cool

Code: Select all

function fn(){
tables = Array.from(document.getElementsByTagName("tbody"));
rankingTable = tables.at(-1);
rankingTableRows = Array.from(rankingTable.children);
if (rankingTableRows[0].children.length > 5) {
    console.log("Already initialized..");
} else {
    console.log("Initializing the enhanced rankings..");
    gender = "all";
    flag = "all";

    function updateTable() {
        rank = 1;
        rankingTableRows.slice(1).forEach(el => {
            elGender = el.children[3]?.children[0]?.textContent === "♂" ? "men" : "women";
            elFlag = el.children[4]?.children[0]?.alt;
            if (!['cn', 'jp', 'kr', 'tw'].includes(elFlag)) {
                elFlag = "other";
            }
            
            if ((gender === "all" || elGender === gender) && 
                (flag == "all" || elFlag === flag)) {
                el.children[0].textContent = rank++;
                el.style.display = "table-row";
            } else {
                el.style.display = "none";
            }
        });
    }

    function createGenderSelect(parentEl) {
      const genderSelect = document.createElement("SELECT");
      genderSelect.setAttribute("id", "genderSelect");
    
      const all = document.createElement("option");
      const men = document.createElement("option");
      const women = document.createElement("option");
      all.setAttribute("value", "all");
      men.setAttribute("value", "men");
      women.setAttribute("value", "women");
      all.textContent = "All";
      men.textContent = "Men";
      women.textContent = "Women";
      genderSelect.append(all, men, women);
      genderSelect.onchange = function(event){gender = event.target.value; updateTable();};
      parentEl.setAttribute('style', 'white-space: pre;');
      parentEl.textContent = "Gender\r\n";
      parentEl.appendChild(genderSelect);
    }

    function createFlagSelect(parentEl) {
      const flagSelect = document.createElement("SELECT");
      flagSelect.setAttribute("id", "flagSelect");
    
      const all = document.createElement("option");
      const china = document.createElement("option");
      const japan = document.createElement("option");
      const korea = document.createElement("option");
      const taiwan = document.createElement("option");
      const other = document.createElement("option");
      all.setAttribute("value", "all");
      china.setAttribute("value", "cn");
      japan.setAttribute("value", "jp");
      korea.setAttribute("value", "kr");
      taiwan.setAttribute("value", "tw");
      other.setAttribute("value", "other");
      all.textContent = "All";
      china.textContent = "China";
      japan.textContent = "Japan";
      korea.textContent = "Korea";
      taiwan.textContent = "Taiwan";
      other.textContent = "Other";
      flagSelect.append(all, china, japan, korea, taiwan, other);
      flagSelect.onchange = function(event){flag = event.target.value; updateTable();};
      parentEl.setAttribute('style', 'white-space: pre;');
      parentEl.textContent = "Flag\r\n";
      parentEl.appendChild(flagSelect);
    }
    
    header = rankingTableRows[0];
    headerRow = header.children;
    headerRow[0].setAttribute('style', 'white-space: pre;');
    headerRow[0].textContent = "Overall\r\nRank";
    createGenderSelect(headerRow[2]);
    createFlagSelect(headerRow[3]);
    newRank = headerRow[0].cloneNode();
    newRank.textContent = "Rank";
    header.prepend(newRank);
    
    rank = 1;
    rankingTableRows.slice(1).forEach(el => {
        copyEl = el.children[0].cloneNode();
        copyEl.textContent = rank++;
        el.prepend(copyEl);
    });
}
}
fn();

Please Note! Always be cautious when you copy-paste scripts from online!

Posted: **Sat Mar 19, 2022 4:16 am**

Very interesting, although I won't try it myself.

Have you tried submitting it to Rémi Coulom?

Posted: **Sat Mar 19, 2022 12:47 pm**

pajaro wrote:Have you tried submitting it to Rémi Coulom?

Hey thanks! I just sent him an email! Let's see what he thinks!

Btw. I have some other ideas for the website too! Ideas that stats nerds like me would love. If I have free time next week, I'll try to implement something

Posted: **Mon Mar 21, 2022 10:35 am**

An update!
1. A new column: Age
2. You can now sort by Age or Elo.
3. Age column also has filters, so you can get rankings for different age groups.

Here are the ratings for women under 18:

Please let me know what you think

How to use in Chrome browser?
1. Add age data to Chrome local storage.
1a. First, navigate to https://www.goratings.org/en/ (The local storage is site specific, so the website has to be open before adding data to the storage!)
1b. Then, open Chrome devtools console: Click the three dots ⋮ in the upper right-hand corner of the browser window. Choose More Tools -> Developer Tools. Make sure that Console-tab is open.
1c. Finally copy-paste the following code to the console and press enter. It adds the date of birth data to goratings local storage for age calculation. (You only need to do this step once, unless you erase your browsing data)

Please Note! This was updated on 2022-03-23! You have to re-do this step to get the latest birthdays!

2. Add the UPDATED script to a chrome bookmark
2a. First, right click the bookmark bar and select "Add Page...". (or simply edit a bookmark if you have added it earlier). Add a name (for example "Enhance Ratings").
2b. Copy-paste the following UPDATED script to the URL part of the bookmark. Save.

Code: Select all

javascript:function fn(){ missingAge = []; tables = Array.from(document.getElementsByTagName("tbody")); rankingTable = tables.at(-1); rankingTableRows = Array.from(rankingTable.children); if (rankingTableRows[0].children.length > 5) { console.log("Already initialized.."); } else { console.log("Initializing the enhanced rankings.."); dobDataEnabled = window.localStorage.hasOwnProperty('dobs'); if (dobDataEnabled) { dobData = JSON.parse(window.localStorage.getItem('dobs')); } gender = "all"; flag = "all"; isAgeFilter = false; sortCol = "Rank"; isSortAsc = false; function sortTable(newSortCol) { if (sortCol === newSortCol) { isSortAsc = !isSortAsc; } else { isSortAsc = newSortCol === "Age"; } sortCol = newSortCol; columnIndex = sortCol === "Age" ? 6 : 5; if (sortCol === "Age") { document.getElementById("age-sort-icon").textContent = isSortAsc ? "↑" : "↓"; document.getElementById("rank-sort-icon").textContent = "⇅"; } else { document.getElementById("rank-sort-icon").textContent = isSortAsc ? "↑" : "↓"; document.getElementById("age-sort-icon").textContent = "⇅"; } sortRows = Array.from(rankingTable.children); function sorter(a,b) { a = parseFloat(a.children[columnIndex].textContent); b = parseFloat(b.children[columnIndex].textContent); if (isNaN(a) && isNaN(b)) return 0; if (isNaN(a)) return 1; if (isNaN(b)) return -1; if (a < b) return isSortAsc ? -1 : 1; if (a > b) return isSortAsc ? 1 : -1; return 0; } sorted = sortRows.slice(1).sort(sorter); sorted.forEach(e => rankingTable.appendChild(e)); } function updateTable() { rank = 1; rankingTableRows.slice(1).forEach(el => { elGender = el.children[3]?.children[0]?.textContent === "♂" ? "men" : "women"; elFlag = el.children[4]?.children[0]?.alt; if (!['cn', 'jp', 'kr', 'tw'].includes(elFlag)) { elFlag = "other"; } ageOk = true; if (isAgeFilter) { age = parseFloat(el.children[6].textContent); minAge = document.getElementById('min-age').value; maxAge = document.getElementById('max-age').value; minAge = parseFloat(minAge); maxAge = parseFloat(maxAge); if (isNaN(age) || age < minAge || age > maxAge) { ageOk = false; } } if ((gender === "all" || elGender === gender) && (flag == "all" || elFlag === flag) && ageOk) { el.children[0].textContent = rank++; el.style.display = "table-row"; } else { el.style.display = "none"; } }); } function createGenderSelect(parentEl) { const genderSelect = document.createElement("SELECT"); genderSelect.setAttribute("id", "genderSelect"); const all = document.createElement("option"); const men = document.createElement("option"); const women = document.createElement("option"); all.setAttribute("value", "all"); men.setAttribute("value", "men"); women.setAttribute("value", "women"); all.textContent = "All"; men.textContent = "Men"; women.textContent = "Women"; genderSelect.append(all, men, women); genderSelect.onchange = (event) => {gender = event.target.value; updateTable();}; parentEl.setAttribute('style', 'white-space: pre;'); parentEl.textContent = "Gender\r\n"; parentEl.appendChild(genderSelect); } function createFlagSelect(parentEl) { const flagSelect = document.createElement("SELECT"); flagSelect.setAttribute("id", "flagSelect"); const all = document.createElement("option"); const china = document.createElement("option"); const japan = document.createElement("option"); const korea = document.createElement("option"); const taiwan = document.createElement("option"); const other = document.createElement("option"); all.setAttribute("value", "all"); china.setAttribute("value", "cn"); japan.setAttribute("value", "jp"); korea.setAttribute("value", "kr"); taiwan.setAttribute("value", "tw"); other.setAttribute("value", "other"); all.textContent = "All"; china.textContent = "China"; japan.textContent = "Japan"; korea.textContent = "Korea"; taiwan.textContent = "Taiwan"; other.textContent = "Other"; flagSelect.append(all, china, japan, korea, taiwan, other); flagSelect.onchange = (event) => {flag = event.target.value; updateTable();}; parentEl.setAttribute('style', 'white-space: pre;'); parentEl.textContent = "Flag\r\n"; parentEl.appendChild(flagSelect); } header = rankingTableRows[0]; headerRow = header.children; headerRow[0].setAttribute('style', 'white-space: pre;'); headerRow[0].textContent = "World\r\nRank"; sortIcon = document.createElement("SPAN"); sortIcon.id = "rank-sort-icon"; sortIcon.textContent = "↓"; sortIcon.style.fontSize = "18px"; headerRow[4].append(sortIcon); headerRow[4].onclick = () => {sortTable("Rank")}; headerRow[4].style.cursor = "pointer"; createGenderSelect(headerRow[2]); createFlagSelect(headerRow[3]); rankColumn = headerRow[0].cloneNode(); rankColumn.textContent = "Rank"; header.prepend(rankColumn); if (dobDataEnabled) { ageColumn = headerRow[0].cloneNode(); sortIcon = document.createElement("SPAN"); sortIcon.id = "age-sort-icon"; sortIcon.textContent = "⇅"; sortIcon.style.fontSize = "18px"; filterIcon = document.createElement("SPAN"); filterIcon.id = "age-filter-icon"; filterIcon.textContent = "⚙"; filterIcon.style.fontSize = "24px"; filterIcon.style.cursor = "pointer"; filterIcon.onclick = () => {isAgeFilter = true; filterIcon.style.display = "none"; filterDiv.style.display = "inline-block"; closeFilterIcon.style.display = "inline"; updateTable();}; minAge = document.createElement("input"); minAge.id = "min-age"; minAge.value; minAge.size = 4; minAge.onblur = () => {updateTable();}; minAgeLabel = document.createElement("label"); minAgeLabel.textContent = "Min:"; minAgeLabel.style.fontWeight = 400; minAgeLabel.setAttribute("for", "min-age"); maxAge = document.createElement("input"); maxAge.id = "max-age"; maxAge.value; maxAge.size = 4; maxAge.onblur = () => {updateTable();}; maxAgeLabel = document.createElement("label"); maxAgeLabel.style.fontWeight = 400; maxAgeLabel.textContent = "Max:"; maxAgeLabel.setAttribute("for", "max-age"); closeFilterIcon = document.createElement("SPAN"); closeFilterIcon.id = "age-filter-close-icon"; closeFilterIcon.textContent = "X"; closeFilterIcon.style.fontSize = "18px"; closeFilterIcon.style.color = "red"; closeFilterIcon.style.display = "none"; closeFilterIcon.style.cursor = "pointer"; closeFilterIcon.onclick = () => {isAgeFilter = false; filterIcon.style.display = "inline"; filterDiv.style.display = "none"; closeFilterIcon.style.display = "none"; updateTable();}; br = document.createElement("BR"); ageDiv = document.createElement("DIV"); ageDiv.style.display = "inline-block"; ageDiv.textContent = "Age"; ageDiv.append(sortIcon); ageDiv.onclick = () => {sortTable("Age")}; ageDiv.style.cursor = "pointer"; filterDiv = document.createElement("DIV"); filterDiv.append(minAgeLabel, minAge, br, maxAgeLabel, maxAge); filterDiv.style.display = "none"; ageColumn.append(ageDiv, filterIcon, filterDiv, closeFilterIcon); header.append(ageColumn); } rank = 1; rankingTableRows.slice(1).forEach(el => { playerId = el.children[1].children[0].href.split("/").at(-1).split(".")[0]; rankCell = el.children[0].cloneNode(); rankCell.textContent = rank++; el.prepend(rankCell); if (dobDataEnabled) { ageCell = el.children[0].cloneNode(); dob = dobData['p' + playerId]; if (dob === '-' || !dob) { missingAge.push(playerId); age = "-"; title = "N/A"; } else { age = ((Date.now() - new Date(dob)) / (1000 * 60*60*24*365.25)).toFixed(1); title = `Date of Birth: ${dob}`; } ageCell.textContent = age; ageCell.title = title; el.append(ageCell); } }); console.log({missingAge}); } } fn();

3. Navigate to https://www.goratings.org/en/. Click the bookmark you saved. Voila! (If the age column doesnt appear, please try repeating steps 1 and 2. Let me know if there are any problems!).

Full Code (without the javascript: prefix)
Feel free to inspect or improve. Please share if you made something cool

Code: Select all

function fn(){
missingAge = [];
tables = Array.from(document.getElementsByTagName("tbody"));
rankingTable = tables.at(-1);
rankingTableRows = Array.from(rankingTable.children);
if (rankingTableRows[0].children.length > 5) {
    console.log("Already initialized..");
} else {
    console.log("Initializing the enhanced rankings..");
    dobDataEnabled = window.localStorage.hasOwnProperty('dobs');
    if (dobDataEnabled) {
        dobData = JSON.parse(window.localStorage.getItem('dobs'));
    }
    gender = "all";
    flag = "all";
    isAgeFilter = false;
    sortCol = "Rank";
    isSortAsc = false;

    function sortTable(newSortCol) {
        if (sortCol === newSortCol) {
            isSortAsc = !isSortAsc;
        } else {
            isSortAsc = newSortCol === "Age";
        }
        sortCol = newSortCol;
        columnIndex = sortCol === "Age" ? 6 : 5;

        if (sortCol === "Age") {
            document.getElementById("age-sort-icon").textContent = isSortAsc ? "↑" : "↓";
            document.getElementById("rank-sort-icon").textContent = "⇅";
        } else {
            document.getElementById("rank-sort-icon").textContent = isSortAsc ? "↑" : "↓";
            document.getElementById("age-sort-icon").textContent = "⇅";
        }

        sortRows = Array.from(rankingTable.children);

        function sorter(a,b) {
            a = parseFloat(a.children[columnIndex].textContent);
            b = parseFloat(b.children[columnIndex].textContent);
            if (isNaN(a) && isNaN(b)) return 0;
            if (isNaN(a)) return 1;
            if (isNaN(b)) return -1;
           
            if (a < b) return isSortAsc ? -1 : 1;
            if (a > b) return isSortAsc ? 1 : -1;
            return 0;
        }

        sorted = sortRows.slice(1).sort(sorter);
        sorted.forEach(e => rankingTable.appendChild(e));
    }
    
    function updateTable() {
        rank = 1;
        rankingTableRows.slice(1).forEach(el => {
            elGender = el.children[3]?.children[0]?.textContent === "♂" ? "men" : "women";
            elFlag = el.children[4]?.children[0]?.alt;
            if (!['cn', 'jp', 'kr', 'tw'].includes(elFlag)) {
                elFlag = "other";
            }

            ageOk = true;
            if (isAgeFilter) {
                age = parseFloat(el.children[6].textContent);
                minAge = document.getElementById('min-age').value;
                maxAge = document.getElementById('max-age').value;
                minAge = parseFloat(minAge);
                maxAge = parseFloat(maxAge);
                if (isNaN(age) || age < minAge || age > maxAge) {
                    ageOk = false;   
                }
            }
            
            if ((gender === "all" || elGender === gender) && 
                (flag == "all" || elFlag === flag) && ageOk) {
                el.children[0].textContent = rank++;
                el.style.display = "table-row";
            } else {
                el.style.display = "none";
            }
        });
    }

    function createGenderSelect(parentEl) {
      const genderSelect = document.createElement("SELECT");
      genderSelect.setAttribute("id", "genderSelect");
    
      const all = document.createElement("option");
      const men = document.createElement("option");
      const women = document.createElement("option");
      all.setAttribute("value", "all");
      men.setAttribute("value", "men");
      women.setAttribute("value", "women");
      all.textContent = "All";
      men.textContent = "Men";
      women.textContent = "Women";
      genderSelect.append(all, men, women);
      genderSelect.onchange = (event) => {gender = event.target.value; updateTable();};
      parentEl.setAttribute('style', 'white-space: pre;');
      parentEl.textContent = "Gender\r\n";
      parentEl.appendChild(genderSelect);
    }

    function createFlagSelect(parentEl) {
      const flagSelect = document.createElement("SELECT");
      flagSelect.setAttribute("id", "flagSelect");
    
      const all = document.createElement("option");
      const china = document.createElement("option");
      const japan = document.createElement("option");
      const korea = document.createElement("option");
      const taiwan = document.createElement("option");
      const other = document.createElement("option");
      all.setAttribute("value", "all");
      china.setAttribute("value", "cn");
      japan.setAttribute("value", "jp");
      korea.setAttribute("value", "kr");
      taiwan.setAttribute("value", "tw");
      other.setAttribute("value", "other");
      all.textContent = "All";
      china.textContent = "China";
      japan.textContent = "Japan";
      korea.textContent = "Korea";
      taiwan.textContent = "Taiwan";
      other.textContent = "Other";
      flagSelect.append(all, china, japan, korea, taiwan, other);
      flagSelect.onchange = (event) => {flag = event.target.value; updateTable();};
      parentEl.setAttribute('style', 'white-space: pre;');
      parentEl.textContent = "Flag\r\n";
      parentEl.appendChild(flagSelect);
    }
    
    header = rankingTableRows[0];
    headerRow = header.children;
    headerRow[0].setAttribute('style', 'white-space: pre;');
    headerRow[0].textContent = "World\r\nRank";
    sortIcon = document.createElement("SPAN");
    sortIcon.id = "rank-sort-icon";
    sortIcon.textContent = "↓";
    sortIcon.style.fontSize = "18px";
    headerRow[4].append(sortIcon);
    headerRow[4].onclick = () => {sortTable("Rank")};
    headerRow[4].style.cursor = "pointer";
    createGenderSelect(headerRow[2]);
    createFlagSelect(headerRow[3]);
    rankColumn = headerRow[0].cloneNode();
    rankColumn.textContent = "Rank";
    header.prepend(rankColumn);

    if (dobDataEnabled) {
        ageColumn = headerRow[0].cloneNode();
        sortIcon = document.createElement("SPAN");
        sortIcon.id = "age-sort-icon";
        sortIcon.textContent = "⇅";
        sortIcon.style.fontSize = "18px";
        filterIcon = document.createElement("SPAN");
        filterIcon.id = "age-filter-icon";
        filterIcon.textContent = "⚙";
        filterIcon.style.fontSize = "24px";
        filterIcon.style.cursor = "pointer";
        filterIcon.onclick = () => {isAgeFilter = true; filterIcon.style.display = "none"; filterDiv.style.display = "inline-block"; closeFilterIcon.style.display = "inline"; updateTable();};
        minAge = document.createElement("input");
        minAge.id = "min-age";
        minAge.value;
        minAge.size = 4;
        minAge.onblur = () => {updateTable();};
        minAgeLabel = document.createElement("label");
        minAgeLabel.textContent = "Min:";
        minAgeLabel.style.fontWeight = 400;
        minAgeLabel.setAttribute("for", "min-age");
        maxAge = document.createElement("input");
        maxAge.id = "max-age";
        maxAge.value;
        maxAge.size = 4;
        maxAge.onblur = () => {updateTable();};
        maxAgeLabel = document.createElement("label");
        maxAgeLabel.style.fontWeight = 400;
        maxAgeLabel.textContent = "Max:";
        maxAgeLabel.setAttribute("for", "max-age");
        closeFilterIcon = document.createElement("SPAN");
        closeFilterIcon.id = "age-filter-close-icon";
        closeFilterIcon.textContent = "X";
        closeFilterIcon.style.fontSize = "18px";
        closeFilterIcon.style.color = "red";
        closeFilterIcon.style.display = "none";
        closeFilterIcon.style.cursor = "pointer";
        closeFilterIcon.onclick = () => {isAgeFilter = false; filterIcon.style.display = "inline"; filterDiv.style.display = "none"; closeFilterIcon.style.display = "none"; updateTable();};
        br = document.createElement("BR");
        ageDiv = document.createElement("DIV");
        ageDiv.style.display = "inline-block";
        ageDiv.textContent = "Age";
        ageDiv.append(sortIcon);
        ageDiv.onclick = () => {sortTable("Age")};
        ageDiv.style.cursor = "pointer";
        filterDiv = document.createElement("DIV");
        filterDiv.append(minAgeLabel, minAge, br, maxAgeLabel, maxAge);
        filterDiv.style.display = "none";
        ageColumn.append(ageDiv, filterIcon, filterDiv, closeFilterIcon);
        
        header.append(ageColumn);
    }
   
    rank = 1;
    rankingTableRows.slice(1).forEach(el => {
        playerId = el.children[1].children[0].href.split("/").at(-1).split(".")[0];
        rankCell = el.children[0].cloneNode();
        rankCell.textContent = rank++;
        el.prepend(rankCell);
        if (dobDataEnabled) {
            ageCell = el.children[0].cloneNode();
            dob = dobData['p' + playerId];
            if (dob === '-' || !dob) {
                missingAge.push(playerId);
                age = "-";
                title = "N/A";
            } else {
                age = ((Date.now() - new Date(dob)) / (1000 * 60*60*24*365.25)).toFixed(1);
                title = `Date of Birth: ${dob}`;
            }
            ageCell.textContent = age;
            ageCell.title = title;
            
            el.append(ageCell);
        }
    });
    console.log({missingAge});
}
}
fn();

Please note:
1. Always be cautious if you copy paste scripts online!
2. Some dates of births only have the year!! Feel free to contribute!

Posted: **Mon Mar 21, 2022 10:58 am**

Wow, these are really great

!

I could do the first one last time around easily on a browser other than chrome, just this one I'd have to figure out now. But the first one has been more than useful!

Posted: **Mon Mar 21, 2022 11:27 am**

Elom0 wrote:Wow, these are really great !

I could do the first one last time around easily on a browser other than chrome, just this one I'd have to figure out now. But the first one has been more than useful!

Thanks!

All major browsers should support localStorage and they surely have a console to access it. Bookmarking a script may have some character limitations hmm

Let me know if I can be of any help!

Posted: **Mon Mar 21, 2022 12:06 pm**

Toukopouko wrote:
Elom0 wrote:Wow, these are really great !

I could do the first one last time around easily on a browser other than chrome, just this one I'd have to figure out now. But the first one has been more than useful!
Thanks!

All major browsers should support localStorage and they surely have a console to access it. Bookmarking a script may have some character limitations hmm

Let me know if I can be of any help!

Great! I'm using brave for easy access to ecosia, perhaps I made an error somewhere pasting it into the console, or the name of the store is slightly different from chrome and other's window.localStorage.setItem, which is what I'm checking next . . .

Posted: **Mon Mar 21, 2022 12:12 pm**

Elom0 wrote:Great! I'm using brave for easy access to ecosia, perhaps I made an error somewhere pasting it into the console, or the name of the store is slightly different from chrome and other's window.localStorage.setItem, which is what I'm checking next . . .

Hmm! One thing I forgot in the instructions! You have to be at goratings.org before adding the data to the local storage! (The storage is site specific!). I hope this helps and sorry about that!

Edit: Updated the instructions!

Posted: **Mon Mar 21, 2022 12:26 pm**

Toukopouko wrote:
pajaro wrote:Have you tried submitting it to Rémi Coulom?
Hey thanks! I just sent him an email! Let's see what he thinks!

Has he replied?

Posted: **Mon Mar 21, 2022 12:33 pm**

pajaro wrote:
Toukopouko wrote:
pajaro wrote:Have you tried submitting it to Rémi Coulom?
Hey thanks! I just sent him an email! Let's see what he thinks!
Has he replied?

Not yet. I emailed him on Saturday and it is only Monday. I will let you know

Posted: **Wed Mar 23, 2022 4:33 am**

pajaro wrote:Has he replied?

He replied. Unfortunately he is too busy at the moment. Maybe he has more time in the future.

However, you can use my scripts as a workaround, (Or if someone else comes up with a better solution

)

Posted: **Wed Mar 23, 2022 5:53 am**

Toukopouko wrote:
Elom0 wrote:Great! I'm using brave for easy access to ecosia, perhaps I made an error somewhere pasting it into the console, or the name of the store is slightly different from chrome and other's window.localStorage.setItem, which is what I'm checking next . . .
Hmm! One thing I forgot in the instructions! You have to be at goratings.org before adding the data to the local storage! (The storage is site specific!). I hope this helps and sorry about that!

Edit: Updated the instructions!

Wow it works now

!

Posted: **Wed Mar 23, 2022 10:20 am**

An update:
I added most of the missing birthdays! Some birthdays still only have the year part only! Feel free to contribute!

To get the latest data, please, re-do the step1 in the post #4

Posted: **Wed May 18, 2022 7:13 am**

It would probably be a bit to tricky to implement so this is not a request, but maybe in the slightly far future it might be possible to select multiple flags at once!

It might be a bit interesting checking rankings between Korea and China (both parts), but most intersting may be rankings between Taiwan and Japan which could be very interesting . . ! (Amongst Japanese and Taiwanese professionals combined Xu Haohong is 3rd!). Although honestly so many Taiwanese are top Japanese pros, that perhaps it's best to often treat Taiwan and Japan as one and the same group.

Posted: **Thu Jun 09, 2022 8:07 am**

Elom0 wrote:It would probably be a bit to tricky to implement so this is not a request, but maybe in the slightly far future it might be possible to select multiple flags at once!

It might be a bit interesting checking rankings between Korea and China (both parts), but most intersting may be rankings between Taiwan and Japan which could be very interesting . . ! (Amongst Japanese and Taiwanese professionals combined Xu Haohong is 3rd!). Although honestly so many Taiwanese are top Japanese pros, that perhaps it's best to often treat Taiwan and Japan as one and the same group.

This is a miracle for incompetent at programming me but this might work

Code: Select all

javascript:function fn(){ missingAge = []; tables = Array.from(document.getElementsByTagName("tbody")); rankingTable = tables.at(-1); rankingTableRows = Array.from(rankingTable.children); if (rankingTableRows[0].children.length > 5) { console.log("Already initialized.."); } else { console.log("Initializing the enhanced rankings.."); dobDataEnabled = window.localStorage.hasOwnProperty('dobs'); if (dobDataEnabled) { dobData = JSON.parse(window.localStorage.getItem('dobs')); } gender = "all"; flag = "all"; isAgeFilter = false; sortCol = "Rank"; isSortAsc = false; function sortTable(newSortCol) { if (sortCol === newSortCol) { isSortAsc = !isSortAsc; } else { isSortAsc = newSortCol === "Age"; } sortCol = newSortCol; columnIndex = sortCol === "Age" ? 6 : 5; if (sortCol === "Age") { document.getElementById("age-sort-icon").textContent = isSortAsc ? "↑" : "↓"; document.getElementById("rank-sort-icon").textContent = "⇅"; } else { document.getElementById("rank-sort-icon").textContent = isSortAsc ? "↑" : "↓"; document.getElementById("age-sort-icon").textContent = "⇅"; } sortRows = Array.from(rankingTable.children); function sorter(a,b) { a = parseFloat(a.children[columnIndex].textContent); b = parseFloat(b.children[columnIndex].textContent); if (isNaN(a) && isNaN(b)) return 0; if (isNaN(a)) return 1; if (isNaN(b)) return -1; if (a < b) return isSortAsc ? -1 : 1; if (a > b) return isSortAsc ? 1 : -1; return 0; } sorted = sortRows.slice(1).sort(sorter); sorted.forEach(e => rankingTable.appendChild(e)); } function updateTable() { rank = 1; rankingTableRows.slice(1).forEach(el => { elGender = el.children[3]?.children[0]?.textContent === "♂" ? "men" : "women"; elFlag = el.children[4]?.children[0]?.alt; if (!['cn', 'jp', 'kr', 'tw'].includes(elFlag)) { elFlag = "other"; } ageOk = true; if (isAgeFilter) { age = parseFloat(el.children[6].textContent); minAge = document.getElementById('min-age').value; maxAge = document.getElementById('max-age').value; minAge = parseFloat(minAge); maxAge = parseFloat(maxAge); if (isNaN(age) || age < minAge || age > maxAge) { ageOk = false; } } if ((gender === "all" || elGender === gender) && (flag == "all" || elFlag === flag) && ageOk) { el.children[0].textContent = rank++; el.style.display = "table-row"; } else { el.style.display = "none"; } }); } function createGenderSelect(parentEl) { const genderSelect = document.createElement("SELECT"); genderSelect.setAttribute("id", "genderSelect"); const all = document.createElement("option"); const men = document.createElement("option"); const women = document.createElement("option"); all.setAttribute("value", "all"); men.setAttribute("value", "men"); women.setAttribute("value", "women"); all.textContent = "All"; men.textContent = "Men"; women.textContent = "Women"; genderSelect.append(all, men, women); genderSelect.onchange = (event) => {gender = event.target.value; updateTable();}; parentEl.setAttribute('style', 'white-space: pre;'); parentEl.textContent = "Gender\r\n"; parentEl.appendChild(genderSelect); } function createFlagSelect(parentEl) { const flagSelect = document.createElement("SELECT"); flagSelect.setAttribute("id", "flagSelect"); const all = document.createElement("option"); const china = document.createElement("option"); const japan = document.createElement("option"); const korea = document.createElement("option"); const taiwan = document.createElement("option"); const other = document.createElement("option"); const chinato = document.createElement("option"); const japanto = document.createElement("option", "option", "option"); const koreato = document.createElement("option"); const taiwano = document.createElement("option"); all.setAttribute("value", "all"); china.setAttribute("value", "cn"); japan.setAttribute("value", "jp"); korea.setAttribute("value", "kr"); taiwan.setAttribute("value", "tw"); chinato.setAttribute("value", "cn", "tw", "other"); japanto.setAttribute("value", "jp", "value", "tw", "value", "other"); koreato.setAttribute("value", "kr",  "tw", "other"); taiwano.setAttribute("value", "tw", "other"); other.setAttribute("value", "other"); all.textContent = "All"; china.textContent = "China"; japan.textContent = "Japan"; korea.textContent = "Korea"; taiwan.textContent = "Taiwan"; other.textContent = "Other"; all.textContent = "All"; chinato.textContent = "China and Taiwan and Others"; japanto.textContent = "Japan and Taiwan and Others"; koreato.textContent = "Korea and Taiwan and Others"; taiwano.textContent = "Taiwan and Others"; flagSelect.append(all, china, japan, korea, taiwan, chinato, koreato, japanto, other); flagSelect.onchange = (event) => {flag = event.target.value; updateTable();}; parentEl.setAttribute('style', 'white-space: pre;'); parentEl.textContent = "Flag\r\n"; parentEl.appendChild(flagSelect); } header = rankingTableRows[0]; headerRow = header.children; headerRow[0].setAttribute('style', 'white-space: pre;'); headerRow[0].textContent = "World\r\nRank"; sortIcon = document.createElement("SPAN"); sortIcon.id = "rank-sort-icon"; sortIcon.textContent = "↓"; sortIcon.style.fontSize = "18px"; headerRow[4].append(sortIcon); headerRow[4].onclick = () => {sortTable("Rank")}; headerRow[4].style.cursor = "pointer"; createGenderSelect(headerRow[2]); createFlagSelect(headerRow[3]); rankColumn = headerRow[0].cloneNode(); rankColumn.textContent = "Rank"; header.prepend(rankColumn); if (dobDataEnabled) { ageColumn = headerRow[0].cloneNode(); sortIcon = document.createElement("SPAN"); sortIcon.id = "age-sort-icon"; sortIcon.textContent = "⇅"; sortIcon.style.fontSize = "18px"; filterIcon = document.createElement("SPAN"); filterIcon.id = "age-filter-icon"; filterIcon.textContent = "⚙"; filterIcon.style.fontSize = "24px"; filterIcon.style.cursor = "pointer"; filterIcon.onclick = () => {isAgeFilter = true; filterIcon.style.display = "none"; filterDiv.style.display = "inline-block"; closeFilterIcon.style.display = "inline"; updateTable();}; minAge = document.createElement("input"); minAge.id = "min-age"; minAge.value; minAge.size = 4; minAge.onblur = () => {updateTable();}; minAgeLabel = document.createElement("label"); minAgeLabel.textContent = "Min:"; minAgeLabel.style.fontWeight = 400; minAgeLabel.setAttribute("for", "min-age"); maxAge = document.createElement("input"); maxAge.id = "max-age"; maxAge.value; maxAge.size = 4; maxAge.onblur = () => {updateTable();}; maxAgeLabel = document.createElement("label"); maxAgeLabel.style.fontWeight = 400; maxAgeLabel.textContent = "Max:"; maxAgeLabel.setAttribute("for", "max-age"); closeFilterIcon = document.createElement("SPAN"); closeFilterIcon.id = "age-filter-close-icon"; closeFilterIcon.textContent = "X"; closeFilterIcon.style.fontSize = "18px"; closeFilterIcon.style.color = "red"; closeFilterIcon.style.display = "none"; closeFilterIcon.style.cursor = "pointer"; closeFilterIcon.onclick = () => {isAgeFilter = false; filterIcon.style.display = "inline"; filterDiv.style.display = "none"; closeFilterIcon.style.display = "none"; updateTable();}; br = document.createElement("BR"); ageDiv = document.createElement("DIV"); ageDiv.style.display = "inline-block"; ageDiv.textContent = "Age"; ageDiv.append(sortIcon); ageDiv.onclick = () => {sortTable("Age")}; ageDiv.style.cursor = "pointer"; filterDiv = document.createElement("DIV"); filterDiv.append(minAgeLabel, minAge, br, maxAgeLabel, maxAge); filterDiv.style.display = "none"; ageColumn.append(ageDiv, filterIcon, filterDiv, closeFilterIcon); header.append(ageColumn); } rank = 1; rankingTableRows.slice(1).forEach(el => { playerId = el.children[1].children[0].href.split("/").at(-1).split(".")[0]; rankCell = el.children[0].cloneNode(); rankCell.textContent = rank++; el.prepend(rankCell); if (dobDataEnabled) { ageCell = el.children[0].cloneNode(); dob = dobData['p' + playerId]; if (dob === '-' || !dob) { missingAge.push(playerId); age = "-"; title = "N/A"; } else { age = ((Date.now() - new Date(dob)) / (1000 * 60*60*24*365.25)).toFixed(1); title = `Date of Birth: ${dob}`; } ageCell.textContent = age; ageCell.title = title; el.append(ageCell); } }); console.log({missingAge}); } } fn();

Code: Select all

function fn(){
missingAge = [];
tables = Array.from(document.getElementsByTagName("tbody"));
rankingTable = tables.at(-1);
rankingTableRows = Array.from(rankingTable.children);
if (rankingTableRows[0].children.length > 5) {
    console.log("Already initialized..");
} else {
    console.log("Initializing the enhanced rankings..");
    dobDataEnabled = window.localStorage.hasOwnProperty('dobs');
    if (dobDataEnabled) {
        dobData = JSON.parse(window.localStorage.getItem('dobs'));
    }
    gender = "all";
    flag = "all";
    isAgeFilter = false;
    sortCol = "Rank";
    isSortAsc = false;

    function sortTable(newSortCol) {
        if (sortCol === newSortCol) {
            isSortAsc = !isSortAsc;
        } else {
            isSortAsc = newSortCol === "Age";
        }
        sortCol = newSortCol;
        columnIndex = sortCol === "Age" ? 6 : 5;

        if (sortCol === "Age") {
            document.getElementById("age-sort-icon").textContent = isSortAsc ? "↑" : "↓";
            document.getElementById("rank-sort-icon").textContent = "⇅";
        } else {
            document.getElementById("rank-sort-icon").textContent = isSortAsc ? "↑" : "↓";
            document.getElementById("age-sort-icon").textContent = "⇅";
        }

        sortRows = Array.from(rankingTable.children);

        function sorter(a,b) {
            a = parseFloat(a.children[columnIndex].textContent);
            b = parseFloat(b.children[columnIndex].textContent);
            if (isNaN(a) && isNaN(b)) return 0;
            if (isNaN(a)) return 1;
            if (isNaN(b)) return -1;
           
            if (a < b) return isSortAsc ? -1 : 1;
            if (a > b) return isSortAsc ? 1 : -1;
            return 0;
        }

        sorted = sortRows.slice(1).sort(sorter);
        sorted.forEach(e => rankingTable.appendChild(e));
    }
   
    function updateTable() {
        rank = 1;
        rankingTableRows.slice(1).forEach(el => {
            elGender = el.children[3]?.children[0]?.textContent === "♂" ? "men" : "women";
            elFlag = el.children[4]?.children[0]?.alt;
            if (!['cn', 'jp', 'kr', 'tw'].includes(elFlag)) {
                elFlag = "other";
            }

            ageOk = true;
            if (isAgeFilter) {
                age = parseFloat(el.children[6].textContent);
                minAge = document.getElementById('min-age').value;
                maxAge = document.getElementById('max-age').value;
                minAge = parseFloat(minAge);
                maxAge = parseFloat(maxAge);
                if (isNaN(age) || age < minAge || age > maxAge) {
                    ageOk = false;   
                }
            }
           
            if ((gender === "all" || elGender === gender) &&
                (flag == "all" || elFlag === flag) && ageOk) {
                el.children[0].textContent = rank++;
                el.style.display = "table-row";
            } else {
                el.style.display = "none";
            }
        });
    }

    function createGenderSelect(parentEl) {
      const genderSelect = document.createElement("SELECT");
      genderSelect.setAttribute("id", "genderSelect");
   
      const all = document.createElement("option");
      const men = document.createElement("option");
      const women = document.createElement("option");
      all.setAttribute("value", "all");
      men.setAttribute("value", "men");
      women.setAttribute("value", "women");
      all.textContent = "All";
      men.textContent = "Men";
      women.textContent = "Women";
      genderSelect.append(all, men, women);
      genderSelect.onchange = (event) => {gender = event.target.value; updateTable();};
      parentEl.setAttribute('style', 'white-space: pre;');
      parentEl.textContent = "Gender\r\n";
      parentEl.appendChild(genderSelect);
    }

    function createFlagSelect(parentEl) {
      const flagSelect = document.createElement("SELECT");
      flagSelect.setAttribute("id", "flagSelect");
   
      const all = document.createElement("option");
      const china = document.createElement("option");
      const japan = document.createElement("option");
      const korea = document.createElement("option");
      const taiwan = document.createElement("option");
      const other = document.createElement("option");
      const chinato = document.createElement("option");
      const japanto = document.createElement("option", "option");
      const koreato = document.createElement("option");
      const taiwano = document.createElement("option");
      all.setAttribute("value", "all");
      china.setAttribute("value", "cn");
      japan.setAttribute("value", "jp");
      korea.setAttribute("value", "kr");
      taiwan.setAttribute("value", "tw");
      chinato.setAttribute("value", "cn", "tw", "other");
      japanto.setAttribute("value", "jp", "value "tw", "value "other");
      koreato.setAttribute("value", "kr",  "tw", "other");
      taiwano.setAttribute("value", "tw", "other");
      other.setAttribute("value", "other");
      all.textContent = "All";
      china.textContent = "China";
      japan.textContent = "Japan";
      korea.textContent = "Korea";
      taiwan.textContent = "Taiwan";
      other.textContent = "Other";
      all.textContent = "All";
      chinato.textContent = "China and Taiwan and Others";
      japanto.textContent = "Japan and Taiwan and Others";
      koreato.textContent = "Korea and Taiwan and Others";
      taiwano.textContent = "Taiwan and Others";
      flagSelect.append(all, china, japan, korea, taiwan, chinato, koreato, japanto, other);
      flagSelect.onchange = (event) => {flag = event.target.value; updateTable();};
      parentEl.setAttribute('style', 'white-space: pre;');
      parentEl.textContent = "Flag\r\n";
      parentEl.appendChild(flagSelect);
    }
   
    header = rankingTableRows[0];
    headerRow = header.children;
    headerRow[0].setAttribute('style', 'white-space: pre;');
    headerRow[0].textContent = "World\r\nRank";
    sortIcon = document.createElement("SPAN");
    sortIcon.id = "rank-sort-icon";
    sortIcon.textContent = "↓";
    sortIcon.style.fontSize = "18px";
    headerRow[4].append(sortIcon);
    headerRow[4].onclick = () => {sortTable("Rank")};
    headerRow[4].style.cursor = "pointer";
    createGenderSelect(headerRow[2]);
    createFlagSelect(headerRow[3]);
    rankColumn = headerRow[0].cloneNode();
    rankColumn.textContent = "Rank";
    header.prepend(rankColumn);

    if (dobDataEnabled) {
        ageColumn = headerRow[0].cloneNode();
        sortIcon = document.createElement("SPAN");
        sortIcon.id = "age-sort-icon";
        sortIcon.textContent = "⇅";
        sortIcon.style.fontSize = "18px";
        filterIcon = document.createElement("SPAN");
        filterIcon.id = "age-filter-icon";
        filterIcon.textContent = "⚙";
        filterIcon.style.fontSize = "24px";
        filterIcon.style.cursor = "pointer";
        filterIcon.onclick = () => {isAgeFilter = true; filterIcon.style.display = "none"; filterDiv.style.display = "inline-block"; closeFilterIcon.style.display = "inline"; updateTable();};
        minAge = document.createElement("input");
        minAge.id = "min-age";
        minAge.value;
        minAge.size = 4;
        minAge.onblur = () => {updateTable();};
        minAgeLabel = document.createElement("label");
        minAgeLabel.textContent = "Min:";
        minAgeLabel.style.fontWeight = 400;
        minAgeLabel.setAttribute("for", "min-age");
        maxAge = document.createElement("input");
        maxAge.id = "max-age";
        maxAge.value;
        maxAge.size = 4;
        maxAge.onblur = () => {updateTable();};
        maxAgeLabel = document.createElement("label");
        maxAgeLabel.style.fontWeight = 400;
        maxAgeLabel.textContent = "Max:";
        maxAgeLabel.setAttribute("for", "max-age");
        closeFilterIcon = document.createElement("SPAN");
        closeFilterIcon.id = "age-filter-close-icon";
        closeFilterIcon.textContent = "X";
        closeFilterIcon.style.fontSize = "18px";
        closeFilterIcon.style.color = "red";
        closeFilterIcon.style.display = "none";
        closeFilterIcon.style.cursor = "pointer";
        closeFilterIcon.onclick = () => {isAgeFilter = false; filterIcon.style.display = "inline"; filterDiv.style.display = "none"; closeFilterIcon.style.display = "none"; updateTable();};
        br = document.createElement("BR");
        ageDiv = document.createElement("DIV");
        ageDiv.style.display = "inline-block";
        ageDiv.textContent = "Age";
        ageDiv.append(sortIcon);
        ageDiv.onclick = () => {sortTable("Age")};
        ageDiv.style.cursor = "pointer";
        filterDiv = document.createElement("DIV");
        filterDiv.append(minAgeLabel, minAge, br, maxAgeLabel, maxAge);
        filterDiv.style.display = "none";
        ageColumn.append(ageDiv, filterIcon, filterDiv, closeFilterIcon);
       
        header.append(ageColumn);
    }
   
    rank = 1;
    rankingTableRows.slice(1).forEach(el => {
        playerId = el.children[1].children[0].href.split("/").at(-1).split(".")[0];
        rankCell = el.children[0].cloneNode();
        rankCell.textContent = rank++;
        el.prepend(rankCell);
        if (dobDataEnabled) {
            ageCell = el.children[0].cloneNode();
            dob = dobData['p' + playerId];
            if (dob === '-' || !dob) {
                missingAge.push(playerId);
                age = "-";
                title = "N/A";
            } else {
                age = ((Date.now() - new Date(dob)) / (1000 * 60*60*24*365.25)).toFixed(1);
                title = `Date of Birth: ${dob}`;
            }
            ageCell.textContent = age;
            ageCell.title = title;
           
            el.append(ageCell);
        }
    });
    console.log({missingAge});
}
}
fn();

Hmm actually I can't seem to make it work . . .

Life In 19x19

Enhanced rankings at goratings.org -Update: Added Age column

Enhanced rankings at goratings.org -Update: Added Age column

Re: Enhanced rankings at goratings.org

Re: Enhanced rankings at goratings.org

Re: Enhanced rankings at goratings.org -Update: Added Age co

Re: Enhanced rankings at goratings.org -Update: Added Age co

Re: Enhanced rankings at goratings.org -Update: Added Age co

Re: Enhanced rankings at goratings.org -Update: Added Age co

Re: Enhanced rankings at goratings.org -Update: Added Age co

Re: Enhanced rankings at goratings.org

Re: Enhanced rankings at goratings.org

Re: Enhanced rankings at goratings.org

Re: Enhanced rankings at goratings.org -Update: Added Age co

Re: Enhanced rankings at goratings.org -Update: Added Age co

Re: Enhanced rankings at goratings.org -Update: Added Age co

Re: Enhanced rankings at goratings.org -Update: Added Age co