Language leaderboards (#21)

* language leaderboards - prototype * prototype - enable language selection * prototype - leaderboard tab
hobovsky · May 6, 2022 · 6cadb45 · 6cadb45
1 parent 981900b
commit 6cadb45
Showing 1 changed file with 92 additions and 3 deletions.
diff --git a/polyglot.js b/polyglot.js
@@ -504,8 +504,97 @@ jQuery(document).arrive('a[title="Leaders"]', { existing: true }, function() {
     elem.attr("href", "/users/leaderboard/kata");
 });
 
-jQuery(document).arrive("tr.is-current-player", { existing: true }, function() {
-    if (!isElementInViewport(this)) {
-        this.scrollIntoView();
+
+function decorateLeaderboardRow(tableRow, boardEntry) {
+    jQuery(tableRow.children[0]).text(boardEntry.position);
+    jQuery(tableRow.children[1]).text(boardEntry.username);
+    jQuery(tableRow.children[2]).text('');
+    jQuery(tableRow.children[3]).text(boardEntry.score);
+}
+
+function leaderboardDownloaded(resp) {
+    if (resp.readyState !== 4) return;
+    let cwResp = resp.response;
+    console.info(cwResp);
+
+    const leaderboardEntries = cwResp.data;
+    const leaderboardRows = jQuery('tr[data-username]');
+
+    const maxRow = Math.min(leaderboardEntries.length, leaderboardRows.length);
+
+    for(let rowNum = 0; rowNum < maxRow; ++rowNum) {
+        decorateLeaderboardRow(leaderboardRows[rowNum], leaderboardEntries[rowNum]);
+    }
+}
+
+function buildLeaderboard(lang) {
+
+    let url = "/api/v1/leaders/ranks/" + lang;
+    function fetchAborted() {
+        jQuery.notify("Fetch aborted.", "info");
+    }
+    function fetchError() {
+        jQuery.notify("ERROR!", "error");
     }
+    let opts = {
+        method: "GET",
+        url: url,
+        onreadystatechange: leaderboardDownloaded,
+        onabort: fetchAborted,
+        onerror: fetchError,
+        context: lang,
+        responseType: "json"
+    };
+    GM_xmlhttpRequest(opts);
+}
+
+function languageChanged() {
+    const selectedLanguage = jQuery('#languagesDropdown').val();
+    buildLeaderboard(selectedLanguage);
+}
+
+function buildLanguagesDropdown() {
+    let url = "/api/v1/languages";
+    function fetchAborted() {
+        jQuery.notify("Fetch aborted.", "info");
+    }
+    function fetchError() {
+        jQuery.notify("ERROR!", "error");
+    }
+
+    function makeLangItems(langItems) {
+        return langItems.map(({id, name}) => `<option value='${id}'>${name}</option>`)
+    }
+
+    function languagesDownloaded(resp) {
+        if (resp.readyState !== 4) return;
+        jQuery('div.leaderboard').prepend('<select id="languagesDropdown" class="mt-1 block w-full pl-3 pr-10 py-2 text-base dark:bg-gray-800 border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-cgray-300 dark:focus:ring-cgray-600 focus:border-cgray-300 dark:focus:border-cgray-600 sm:text-sm rounded-md"><option value="overall">Overall</option>'+ makeLangItems(resp.response.data).join('') +'</select>');
+        jQuery('div.leaderboard').prepend('<p id="disclaimer">Note from Polyglot script: The feature of language leaderboards is still work in progress. Expect it to be buggy or incomplete.</p>')
+        jQuery('#languagesDropdown').change(languageChanged);
+    }
+
+    let opts = {
+        method: "GET",
+        url: url,
+        onreadystatechange: languagesDownloaded,
+        onabort: fetchAborted,
+        onerror: fetchError,
+        responseType: "json"
+    };
+    GM_xmlhttpRequest(opts);
+}
+
+function buildLanguagesLeaderboardTab() {
+    jQuery('dl.tabs').append('<dd id="languagesLeaderboardTab"><a id="languagesLeaderboardLink">Languages (feature preview)</a></dd>');
+    jQuery('#languagesLeaderboardLink').click(function() {
+        if(jQuery('#languagesDropdown').length) return;
+        jQuery('dd.is-active').removeClass('is-active');
+        jQuery('#languagesLeaderboardTab').addClass('is-active');
+        buildLanguagesDropdown();
+        buildLeaderboard('overall');
+    });
+}
+
+jQuery(document).arrive("tr.is-current-player", { existing: true }, function() {
+    buildLanguagesLeaderboardTab();
 });