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);