ITL live rank tracker completed

2 years ago · bb195bd47f
commit bb195bd47f
3 changed files with 101 additions and 0 deletions
--- a/tracker.css
+++ b/tracker.css
@ -0,0 +1,48 @@
+body{
+    background-color:lime;
+    font-family:"Calibri";
+    font-weight:800;
+}
+.player{
+    color:purple;
+    font-size:96px;
+    text-align:center;
+}
+.player .rankSymbol{
+    font-size:72px;
+    color:black;
+    position:relative;
+    top:-32px;
+}
+.player .rank{
+    font-size:128px;
+    color:black;
+}
+.player .rankTotal{
+    font-size:72px;
+    color:black;
+}
+.player .points{
+    font-size:48px;
+    color:black;
+}
+.prevRank{
+    padding-top:24px;
+    font-size:48px;
+    color:black;
+    text-align:center;
+}
+.nextRank{
+    padding-bottom:24px;
+    font-size:48px;
+    color:black;
+    text-align:center;
+}
+.prevRank .points,.nextRank .points,.prevRank .rank,.nextRank .rank,.prevRank .rankSymbol,.nextRank .rankSymbol{
+    font-size:42px;
+    color:#666666;
+}
+#tracker{
+    border-radius:36px;
+    background-image:linear-gradient(#e6f2ff, #e6e6ff,#ffe6e6);
+}
--- a/tracker.html
+++ b/tracker.html
@ -0,0 +1,14 @@
+<html>
+    <head>
+        <title>ITL Rank Tracker</title>
+        <link rel="stylesheet" href="tracker.css">
+    </head>
+    <body>
+        <div id="tracker">
+            <div id="nextRank"></div>
+            <div id="playerRank"></div>
+            <div id="prevRank"></div>
+        </div>
+        <script type="text/javascript" src="tracker.js"></script>
+    </body>
+</html>
--- a/tracker.js
+++ b/tracker.js
@ -0,0 +1,39 @@
+console.log("Hello World!");
+var targetPlayer="sigonasr2";
+var prevRankData;
+var currentPlayerData;
+var nextRankData;
+function DisplayPlayerInfo(pl,showTotal=false){
+    return "<div><span class=\"rankSymbol\">#</span><span class=\"rank\">"+pl.position+"</span>"+
+    (showTotal?"<span class=\"rankTotal\">/"+pl.leaderboardSize+"</span>":"")+` 
+    <span class=\"name\">`+pl.name+`</span>
+    <span class=\"points\">`+pl.rankingPoints+" pts</span></div>";
+}
+function GetData(){
+    fetch("http://projectdivar.com/files/leaderboardinfo", {cache: "no-cache"}).then((resp)=>resp.json())
+    .then((data)=>{
+        for(i=0;i<data.data.leaderboard.length;i++){
+            var member = data.data.leaderboard[i];
+            if (member.name===targetPlayer){
+                currentPlayerData=member;
+                currentPlayerData.position=i+1
+                currentPlayerData.leaderboardSize=data.data.leaderboard.length
+            }
+        }
+        nextRankData={...data.data.leaderboard[currentPlayerData.position-2],position:currentPlayerData.position-1};
+        prevRankData={...data.data.leaderboard[currentPlayerData.position],position:currentPlayerData.position+1};
+        document.getElementById("playerRank").innerHTML="<div class=\"player\">"+DisplayPlayerInfo(currentPlayerData,true)+"</div>"
+        if (prevRankData){
+            document.getElementById("prevRank").innerHTML="<div class=\"prevRank\">"+DisplayPlayerInfo(prevRankData)+"</div>";
+        }else{
+            document.getElementById("prevRank").innerHTML="";
+        }
+        if (nextRankData){
+            document.getElementById("nextRank").innerHTML="<div class=\"nextRank\">"+DisplayPlayerInfo(nextRankData)+"</div>";
+        }else{
+            document.getElementById("nextRank").innerHTML="";
+        }
+    })
+}
+GetData();
+setInterval(GetData,5000);