☰

sortColumns

Sort Redactle guessed-words table by a column

  1. // ==UserScript==
  2. // @name         sortColumns
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Sort Redactle guessed-words table by a column
  6. // @author       gauss256
  7. // @match        https://www.redactle.com/
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=redactle.com
  9. // @grant        none
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. /* jshint esversion:6 */
  14.  
  15. // The lovely code to do the sorting comes from:
  16. // https://stackoverflow.com/a/50127768/80309
  17.  
  18. (function () {
  19.     'use strict';
  20.  
  21.     function hash(node) {
  22.         return parseInt(node.querySelector('td:nth-child(1)').innerHTML);
  23.     }
  24.  
  25.     function guess(node) {
  26.         return node.querySelector('td:nth-child(2)').innerHTML;
  27.     }
  28.  
  29.     function hits(node) {
  30.         return parseInt(node.querySelector('td:nth-child(3)').innerHTML);
  31.     }
  32.  
  33.     function sortByHash() {
  34.         const guessLogBody = document.getElementById('guessLogBody');
  35.         [...guessLogBody.children]
  36.             .sort((a, b) => hash(b) - hash(a))
  37.             .forEach(node => guessLogBody.appendChild(node));
  38.     }
  39.  
  40.     function sortByGuess() {
  41.         const guessLogBody = document.getElementById('guessLogBody');
  42.         [...guessLogBody.children]
  43.             .sort((a, b) => guess(a) > guess(b))
  44.             .forEach(node => guessLogBody.appendChild(node));
  45.     }
  46.  
  47.     function sortByHits() {
  48.         const guessLogBody = document.getElementById('guessLogBody');
  49.         [...guessLogBody.children]
  50.             .sort((a, b) => hits(b) - hits(a))
  51.             .forEach(node => guessLogBody.appendChild(node));
  52.     }
  53.  
  54.     // Set up click events on the column headers
  55.     const columnHeads = document
  56.         .getElementById('tableHolder')
  57.         .querySelectorAll('th');
  58.     let hashBtn;
  59.     let guessBtn;
  60.     let hitsBtn;
  61.     for (let i = 0; i < columnHeads.length; i++) {
  62.         let headElem = columnHeads[i];
  63.         let headLabel = headElem.innerHTML;
  64.         switch(headLabel) {
  65.             case '#':
  66.                 hashBtn = headElem;
  67.                 break;
  68.             case 'Guess':
  69.                 guessBtn = headElem;
  70.                 break;
  71.             default:
  72.                 hitsBtn = headElem;
  73.         }
  74.     }
  75.     hashBtn.style = 'cursor: pointer';
  76.     guessBtn.style = 'cursor: pointer';
  77.     hitsBtn.style = 'cursor: pointer';
  78.  
  79.     // Set up event handlers
  80.     hashBtn.onclick = function () {
  81.         sortByHash();
  82.     };
  83.     guessBtn.onclick = function () {
  84.         sortByGuess();
  85.     };
  86.     hitsBtn.onclick = function () {
  87.         sortByHits();
  88.     };
  89.  
  90. })();