diff --git a/assets/css/250.less b/assets/css/250.less index 91c1c41cf3..4e8f03787d 100644 --- a/assets/css/250.less +++ b/assets/css/250.less @@ -112,7 +112,8 @@ h2 { #user .avatar { display: inline-block; - overflow: hidden; + width: 32px; + height: $width; padding: 1px; margin: 0 .5em; line-height: 0; @@ -120,6 +121,10 @@ h2 { background: #3f7085; border: 1px solid #4c92ae; + + >img { + width: 100%; + } } #user button { margin: 0 .5em; diff --git a/assets/js/User.ts b/assets/js/User.ts index 252fb60f36..42b1955fe2 100644 --- a/assets/js/User.ts +++ b/assets/js/User.ts @@ -26,11 +26,12 @@ export default class User { } const [userId, identity, noads, tier] = body.split("\0", 4); + let avatar; localStorage.setItem('user', JSON.stringify({ id: userId, - name: identity.substring(40), - avatar: identity.substring(0, 40), + avatar: avatar = identity.match(/^(?:\d+\/[\da-z]{40}\..{3}|[\da-z]{40})/)?.[0], + name: identity.substring(avatar.length), noads: noads === '1', tier: +tier, })); @@ -116,6 +117,8 @@ export default class User { } private static updateUserBar() { + const IMAGE_BASE_URL = 'https://cdn.cloudflare.steamstatic.com/steamcommunity/public/images'; + const userJson = localStorage.getItem('user'); if (!userJson) return; @@ -127,8 +130,11 @@ export default class User { const img = a.appendChild(document.createElement('img')); img.alt = img.title = user.name; - img.src = 'https://cdn.cloudflare.steamstatic.com/steamcommunity/public/images/avatars/' - + `${user.avatar.substring(0, 2)}/${user.avatar}.jpg'`; + if (user.avatar.includes('/')) { + img.src = `${IMAGE_BASE_URL}/items/${user.avatar}`; + } else { + img.src = `${IMAGE_BASE_URL}/avatars/${user.avatar.substring(0, 2)}/${user.avatar}.jpg'`; + } this.markOwnedGames(); }