Added support for animated avatars.

250 · Feb 1, 2025 · c598f3a · c598f3a
1 parent 8470e0c
commit c598f3a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/assets/css/250.less b/assets/css/250.less
@@ -112,14 +112,19 @@ h2 {
 
 #user .avatar {
     display: inline-block;
-    overflow: hidden;
+    width: 32px;
+    height: $width;
     padding: 1px;
     margin: 0 .5em;
     line-height: 0;
     vertical-align: middle;
 
     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
@@ -26,11 +26,12 @@ export default class User {
         }
 
         const [userId, identity, noads, tier] = body.split("\0", 4);
+        let avatar = identity.match(/^(?:\d+\/[\da-z]{40}\..{3}|[\da-z]{40})/)?.[0];
 
         localStorage.setItem('user', JSON.stringify({
             id: userId,
-            name: identity.substring(40),
-            avatar: identity.substring(0, 40),
+            avatar,
+            name: avatar ? identity.substring(avatar.length) : 'ERROR',
             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();
     }