Add extension (#2)

* Add extension

* Fix manifest

* Add link to ladders

* Fix auto addition

* Fix plugin installation

* Bump extension version

* Add legal warn

* Remember last choice

---------

Co-authored-by: marqdevx <marqdevx@users.noreply.github.com>

README.md

@@ -1,18 +1,28 @@
 # Filter-ESEA-League
 Filter teams on the ESEA's ranking webpage, javascript to filter the teams of an specific country and set colors if they are qualified for playoffs
 
+>The name ESEA is a trademark of ESL Gaming Online, Inc. 
+>Tis a third-party browser extension and is not affiliated with ESEA or ESL Gaming Online, Inc.
+>Use it under your responsability
+
 ## Features
 * Only needs to be run once, everytime it detects a division change, refreshes itself.
 * Color feedback for teams qualified/unqualified for playoffs, depending on the ladder ranking.
 * Working for every past season (Ony for Challenger, Advanced, Main, Intermdiate and Open divisions).
 
 ## How it works
-* It will filter all the teams, and show colors depending on the state of the team
+* It will filter all the teams, and show colors depending on the state of the team.
+
   * Green = qualified for playoffs
   * Red = not qualified for playoffs
 * Choose a country to show **only** the teams from that specific country.
 
 ## How to run it
+### Extension
+Install the extension and forget to run the script, it will auto load once you are on the https://play.esea.net/league/standings page.
+
+You can find the extension on [Firefox Add-ons platform](https://addons.mozilla.org/firefox/addon/esea-filter/)
+
 ### Console
 1. Copy the content of the `esea-league-filter.js`.
 2. Open your browser.

extension/eseaFilter.js

@@ -0,0 +1,242 @@
+lastCountrySelected = "Country";
+var myInterval = setInterval(autoChecker, 500);
+console.log("ESEA Filter enabled")
+
+function autoChecker() {
+  teamList = document.getElementsByClassName('Tr');
+  exists = document.getElementById('flag');
+  if (teamList.length > 1 && (exists === null || exists === undefined) ) {
+    doWork();
+    document.getElementById("level").onchange = function () {
+      console.log("Switched division");
+      myInterval = setInterval(autoChecker, 500);
+    };
+  }
+}
+
+function doWork() {
+  class dropDownFilter {
+    teamList = document.getElementsByClassName('Tr');
+    totalFlags = [];
+    flagImages = [];
+    flagsCount = 0;
+    flagBox = "";
+
+    constructor() { };
+    create() {
+      var regionBox = document.getElementById("region").parentElement.parentElement;
+      this.flagBox = regionBox.cloneNode(true);
+      this.flagBox.childNodes[0].childNodes[0].setAttribute("id", "flag");
+      this.flagBox.style.top = "10px";
+      this.flagBox.style.position = "relative";
+      this.flagBox.childNodes[0].childNodes[0].innerHTML = "";
+
+      regionBox.parentElement.parentElement.parentElement.append(this.flagBox);
+
+      this.flagBox = document.getElementById("flag");
+    }
+    addDropDownFlag(flagName) {
+      let newOption = document.createElement("option");
+      newOption.text = flagName;
+      this.flagBox.add(newOption);
+    }
+    addFlag(indexTeam) {
+      this.flagOptions = this.flagBox.childNodes[0].childNodes[0];
+
+      let flagName = this.teamList[indexTeam].childNodes[1].childNodes[0].childNodes[0].title ?? this.teamList[indexTeam].childNodes[1].childNodes[0].childNodes[0].childNodes[0].textContent;
+      for (let i = 0; i <= this.flagsCount; i++) {
+        if (flagName == this.totalFlags[i]) return;
+      }
+
+      this.totalFlags[this.flagsCount] = flagName;
+      this.flagsCount++;
+    }
+
+    fillDropDown() {
+      for (let i = 0; i < this.totalFlags.length; i++) {
+        this.addDropDownFlag(this.totalFlags[i]);
+        if (this.totalFlags[i] == lastCountrySelected) this.flagBox.selectedIndex = i+1;
+      }
+      lastCountrySelected = this.selectedCountry();
+    }
+
+    indexFlags() {
+      this.addDropDownFlag("Country");
+
+      for (let i = 1; i < this.teamList.length; i++) {
+        this.addFlag(i);
+      }
+
+      this.totalFlags = this.totalFlags.sort();
+      this.fillDropDown();
+    }
+
+    selectedCountry() {
+      return document.getElementById("flag").value;
+    }
+  } countryBox = new dropDownFilter;
+
+  class eseaHelper {
+    teamList = document.getElementsByClassName('Tr');
+    qeuedTeams = [];
+    removedTeams = 0;
+
+    largeCutOff(teamsSize) {
+      let newCuttOff = 0;
+      switch (true) {
+        case (teamsSize < 17):
+          newCuttOff = 8;
+          break;
+        case (teamsSize >= 17 && teamsSize < 24):
+          newCuttOff = 8;
+          break;
+        case (teamsSize >= 24 && teamsSize < 32):
+          newCuttOff = 12;
+          break;
+        case (teamsSize >= 32 && teamsSize < 48):
+          newCuttOff = 16;
+          break;
+        case (teamsSize >= 48 && teamsSize < 64):
+          newCuttOff = 24;
+          break;
+        case (teamsSize >= 64 && teamsSize < 96):
+          newCuttOff = 32;
+          break;
+        case (teamsSize >= 96 && teamsSize < 128):
+          newCuttOff = 48;
+          break;
+        case (teamsSize >= 128 && teamsSize < 192):
+          newCuttOff = 64;
+          break;
+        case (teamsSize >= 192 && teamsSize < 256):
+          newCuttOff = 96;
+          break;
+        case (teamsSize >= 256 && teamsSize < 384):
+          newCuttOff = 128;
+          break;
+        case (teamsSize >= 384 && teamsSize < 512):
+          newCuttOff = 192;
+          break;
+        case (teamsSize >= 512 && teamsSize < 768):
+          newCuttOff = 256;
+          break;
+        case (teamsSize >= 768 && teamsSize < 1024):
+          newCuttOff = 384;
+          break;
+        default:
+          newCuttOff = 4;
+          break;
+      }
+      return newCuttOff;
+    }
+
+    smallCutOff(teamsSize) {
+      let newCuttOff = 0;
+      switch (true) {
+        case (teamsSize < 48):
+          newCuttOff = 8;
+          break;
+        case (teamsSize >= 48 && teamsSize < 64):
+          newCuttOff = 16;
+          break;
+        case (teamsSize >= 64 && teamsSize < 96):
+          newCuttOff = 24;
+          break;
+        case (teamsSize >= 96 && teamsSize < 128):
+          newCuttOff = 32;
+          break;
+        case (teamsSize >= 128 && teamsSize < 192):
+          newCuttOff = 48;
+          break;
+        case (teamsSize >= 192 && teamsSize < 255):
+          newCuttOff = 64;
+          break;
+        default:
+          newCuttOff = 4;
+          break;
+      }
+      return newCuttOff;
+    }
+
+    getDivision() {
+      return document.getElementById("level").value;
+    }
+
+    getSeasonStage() {
+      return seasonStage = document.getElementById("round").value;
+    }
+
+    getCutOff() {
+      let cutOffValue = 0;
+      let teamsSize = this.teamList.length - 1;
+      switch (esea.getDivision()) {
+        case "open":
+          cutOffValue = esea.largeCutOff(teamsSize);
+          break;
+        case "intermediate":
+          cutOffValue = esea.largeCutOff(teamsSize);
+          break;
+        case "main":
+          cutOffValue = esea.smallCutOff(teamsSize);
+          break;
+        case "advanced":
+          cutOffValue = esea.smallCutOff(teamsSize);
+          break;
+        default:
+          cutOffValue = -1;
+          break;
+      }
+      return cutOffValue;
+    }
+
+    printInfo() {
+      console.log("Division: " + this.getDivision());
+      let size = this.teamList.length - 1;
+      console.log("Teams: " + size);
+      console.log("Cutoff: " + this.getCutOff());
+    }
+
+    filter() {
+      let qeuedCount = 0;
+      for (let i = 1; i < this.teamList.length; i++) {
+
+        let currentFlag = this.teamList[i].childNodes[1].childNodes[0].childNodes[0].title ?? this.teamList[i].childNodes[1].childNodes[0].childNodes[0].childNodes[0].textContent;
+        if (countryBox.selectedCountry() == "Country") {
+          currentFlag = countryBox.selectedCountry();
+        }
+        if (currentFlag != countryBox.selectedCountry()) {
+          this.teamList[i].style.display = "none";
+        } else {
+          this.teamList[i].style.display = "";
+          this.qeuedTeams[qeuedCount] = this.teamList[i];
+          qeuedCount++;
+        }
+      }
+      for (let i = 0; i < qeuedCount; i++) {
+        let targetTeam = this.qeuedTeams[i];
+        targetTeam.style.backgroundColor = 'rgb(51, 52, 51)';
+        if (i % 2) targetTeam.style.backgroundColor = 'rgb(68, 68, 68)';
+
+        let teamRank = targetTeam.childNodes[0].textContent.slice(0, targetTeam.childNodes[0].textContent.length - 1);
+
+        if ( esea.getCutOff() < 0 || teamRank <= esea.getCutOff()) {
+          targetTeam.childNodes[0].style.color = "green";
+        } else {
+          targetTeam.childNodes[0].style.color = "red";
+        }
+      }
+    }
+  } esea = new eseaHelper();
+
+  countryBox.create();
+  countryBox.indexFlags();
+
+  document.getElementById("flag").onchange = function () {
+
+    lastCountrySelected = countryBox.selectedCountry();
+    esea.filter();
+  };
+
+  esea.printInfo();
+  esea.filter();
+}

extension/manifest.json

@@ -0,0 +1,27 @@
+{
+    "manifest_version": 2,
+    "name": "ESEA filter",
+    "description": "A basic extension to ESEA seasons' ladderboards!",
+    "version": "1.3",
+    "author": "https://github.com/marqdevx",
+    "permissions": [
+        "https://play.esea.net/league/standings*"
+    ],
+    "browser_specific_settings": {
+        "gecko": {
+            "id": "<id>",
+            "strict_min_version": "78.0"
+        }
+    },
+    "content_scripts": [
+        {
+            "matches": [
+
+                "*://*.play.esea.net/*"
+            ],
+            "js": [
+                "eseaFilter.js"
+            ]
+        }
+    ]
+}

extension/readme.md

@@ -0,0 +1,5 @@
+## ESEA Filter extension
+
+This is a extension to filter [ESEA](https://play.esea.net) league divisions' [ladders](https://play.esea.net/league/standings).
+
+