indicate tier frills on division badges

Reposition image based on ranking as introduced by SC2 patch 3.4
(upper levels for top 8, 25, and 50 players).

diff --git a/battle.css b/battle.css
index 35cd7e4f283128b736147a9e9e8ec5b6d2fbb4e5..1f042b6320e672ffa87820caeb67af75896a689a 100644 (file)
--- a/battle.css
+++ b/battle.css
@@ -124,6 +124,15 @@ li, li img {
 .rank.grandmaster:before {
        background-image: url("https://static.starcraft2.com/dist/images/grandmaster.d2ab9065434e8fa4042d30e5010df5f9.png");
 }
+.rank.tier3:before {
+       background-position: -100px -50px;
+}
+.rank.tier2:before {
+       background-position: -100px -100px;
+}
+.rank.tier1:before {
+       background-position: -100px -150px;
+}
 
 .ladders li {
        float: none;

diff --git a/widget.html b/widget.html
index c604c5912391bc47bd3723a906c89676a45a30f9..387d3db7e16a55bf5b5be5cac63c58b1babf58d5 100644 (file)
--- a/widget.html
+++ b/widget.html
@@ -15,11 +15,12 @@
        fetch('/schtarr/inno.json')
        .then(res => res.json())
        .then(clan => {
+               let tiernum = (rank) => rank <= 8 ? 1 : rank <= 25 ? 2 : rank <= 50 ? 3 : 4;
                document.getElementById('clan').outerHTML = `
                        <h1>${clan.tag}</h1>
                        <ul class=ladders>
                        ${clan.ladders.map(ladder => `
-                               <li class="rank ${ladder.league}"
+                               <li class="rank ${ladder.league} tier${tiernum(ladder.rank)}"
                                 title="Division ${ladder.division} (${ladder.wins}:${ladder.losses})">
                                        ${ladder.league} <small>#${ladder.rank}</small>
                                </li>