From: Mischa POSLAWSKY <perl@shiar.org>
Date: Sat, 11 May 2019 13:57:19 +0000 (+0200)
Subject: indicate tier frills on division badges
X-Git-Tag: v0.3~6
X-Git-Url: http://git.shiar.nl/sc2-widget/commitdiff_plain/04bb4e875b78bc9e5e04cb31dd15d916fe067347

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 35cd7e4..1f042b6 100644
--- 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 c604c59..387d3db 100644
--- 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>