Jump to content
McKay Development
Sign in to follow this  
EaGLE

Player steam level with shape and color

Recommended Posts

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 by EaGLE
added the websites i was talking about

Share this post


Link to post
Share on other sites

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 by 4049_1572836826

Share this post


Link to post
Share on other sites
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.?

Share this post


Link to post
Share on other sites

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 by 4049_1572836826

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...