Player steam level with shape and color

EaGLE · May 14, 2020

As of my pervious question relating to the same steam levels.I was surfing around some websites which show the steam player information using steam's web api .

I found something in common.They all had a class to a "div " or "span" of "friendPlayerLevel" and according to the levels also had a class of "lvl_plus_50" or classes respective to the levels.

I did not quite understand how multiple different websites have the same symantic going on.And one more thing which I found in common was

this url 'steamcommunity-a.akamai.net'

which is used to fetch the background image for steam levels.

Can anyone please explain to me.Whats all this

The websites are steamrep.com and steamdb.com and also steamcommunity.com

Edited May 14, 2020 by EaGLE
added the websites i was talking about

Dr. McKay · May 15, 2020

They're using steamcommunity.com's CSS to render the levels.

4049_1572836826 · May 15, 2020

class every 10 lvl with bg or img and u get e.g. . if class lvl_20 end 20 on javascript set if from 20 to 29 lvl and lvl if is 25, add class to div around lvl to lvl 20 img shape.

I take shapes from this site.

https://steamlvlup.com/img/steam_levels/100.png

only change png number, site have lvls shape from lvl 100-4999

if (lvl >= 0 && lvl <= 9) {
    document.getElementById("lvl").style.border = "2px solid #9b9b9b" //lvl 1 to 99 dont want img bcs only circle
} else if (lvl >= 10 && lvl <= 19) {
    here same style border ... 
} else if (lvl >= 20 && lvl <= 29) {
    orange
} else if (lvl >= 30 && lvl <= 39) {
    yellow
} else if (lvl >= 40 && lvl <= 49) {
    green
} else if (lvl >= 50 && lvl <= 59) {
    blue
} else if (lvl >= 60 && lvl <= 69) {
    purple
} else if (lvl >= 70 && lvl <= 79) {
    pink
} else if (lvl >= 80 && lvl <= 89) {
    idk
} else if (lvl >= 90 && lvl <= 99) {
    idk
} else if (lvl >= 100 && lvl <= 109) {
    document.getElementById("lvl").style.backgroundImage = "url('lvl_100.png')"; //this change background lvl div to lvl shape with color
    document.getElementById("lvl").style.backgroundPosition = "0px 40px"; //position of background if u use steamlvlup pngs
    document.getElementById("lvl").style.border = "none";
} ....

Edited May 15, 2020 by 4049_1572836826

EaGLE · May 15, 2020

7 hours ago, Dr. McKay said:

They're using steamcommunity.com's CSS to render the levels.

Where can i access steamcommunity.com's CSS

53 minutes ago, 4049_1572836826 said:

class every 10 lvl with bg or img and u get e.g. . if class lvl_20 end 20 on javascript set if from 20 to 29 lvl and lvl if is 25, add class to div around lvl to lvl 20 img shape.

I take shapes from this site.

https://steamlvlup.com/img/steam_levels/100.png

only change png number, site have lvls shape from lvl 100-4999


if (lvl >= 0 && lvl <= 9) {
    document.getElementById("lvl").style.border = "2px solid #9b9b9b" //lvl 1 to 99 dont want img bcs only circle
} else if (lvl >= 10 && lvl <= 19) {
    here same style border ... 
} else if (lvl >= 20 && lvl <= 29) {
    orange
} else if (lvl >= 30 && lvl <= 39) {
    yellow
} else if (lvl >= 40 && lvl <= 49) {
    green
} else if (lvl >= 50 && lvl <= 59) {
    blue
} else if (lvl >= 60 && lvl <= 69) {
    purple
} else if (lvl >= 70 && lvl <= 79) {
    pink
} else if (lvl >= 80 && lvl <= 89) {
    idk
} else if (lvl >= 90 && lvl <= 99) {
    idk
} else if (lvl >= 100 && lvl <= 109) {
    document.getElementById("lvl").style.backgroundImage = "url('lvl_100.png')"; //this change background lvl div to lvl shape with color
    document.getElementById("lvl").style.backgroundPosition = "0px 40px"; //position of background if u use steamlvlup pngs
    document.getElementById("lvl").style.border = "none";
} ....

How is the background position decided ? How is it relative to the level of the player.?

4049_1572836826 · May 15, 2020

And lvl add with steam web api or another api.

<head>
    <link rel="stylesheet" type="text/css" href="https://steamcommunity-a.akamaihd.net/public/shared/css/shared_global.css">
</head>

<body>
    <div class="friendPlayerLevel"><span class="friendPlayerLevelNum">274</span></div> <!--cahnge lvl-->
    <script>
        var lvl = document.getElementsByClassName('friendPlayerLevelNum')[0].innerHTML;
        if (lvl.length == 1) {
            document.getElementsByClassName('friendPlayerLevel')[0].classList.add("lvl_0");
        } else if (lvl.length == 2) {
            document.getElementsByClassName('friendPlayerLevel')[0].classList.add("lvl_" + lvl[0] + "0");
        } else if (lvl.length == 3) {
            document.getElementsByClassName('friendPlayerLevel')[0].classList.add("lvl_" + lvl[0] + "00");
            document.getElementsByClassName('friendPlayerLevel')[0].classList.add("lvl_plus_" + lvl[1] + "0");
        }

    </script>
</body>

Edited May 15, 2020 by 4049_1572836826

Sign In

Player steam level with shape and color

Recommended Posts

EaGLE

Dr. McKay

4049_1572836826

EaGLE

4049_1572836826

Join the conversation

Browse

Activity

Donate