等级h5

level/index.html

@@ -40,7 +40,7 @@
     .lv-next { left: 159px; }
     .progress-percent { position: absolute; left: 67px; top: 0; width: 45px; font-size: 8px; line-height: 8px; text-align: center; }
     .progress-track { position: absolute; left: 24px; top: 12px; width: 133px; height: 4px; border-radius: 3px; background: var(--progress-track); }
-    .progress-fill { width: 40%; height: 4px; border-radius: 3px; background: var(--progress-fill); }
+    .progress-fill { width: 0; height: 4px; border-radius: 3px; background: var(--progress-fill); }
     .need { position: absolute; left: 0; top: 27px; width: 220px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 8px; line-height: 8px; color: var(--need-text); }
     .level-table { position: absolute; left: 16px; top: 238px; z-index: 2; width: 343px; height: 318px; border-radius: 12px; background: rgba(67,0,255,.11); }
     .table-head { position: absolute; top: 16px; height: 16px; font-size: 16px; line-height: 16px; font-weight: 500; text-align: center; text-transform: capitalize; white-space: nowrap; }
@@ -115,7 +115,7 @@
       </div>
       <div class="progress">
         <div id="lvCurrent" class="lv-current">Lv.0</div>
-        <div id="progressPercent" class="progress-percent">40%</div>
+        <div id="progressPercent" class="progress-percent">0%</div>
         <div class="progress-track"><div id="progressFill" class="progress-fill"></div></div>
         <div id="lvNext" class="lv-next">Lv.1</div>
         <div id="needText" class="need">You need 12,345,600 more experience points</div>
@@ -188,7 +188,7 @@
           button: "purple", upgrades: [{ icon: A + "upgrade-game.svg", name: "Earned through gameplay", exp: "1 Coins = 1 EXP" }]
         }
       };
-      var state = { track: new URLSearchParams(window.location.search).get("track") || "charm", loading: false, details: {}, toastTimer: 0 };
+      var state = { track: new URLSearchParams(window.location.search).get("track") || "charm", loading: false, details: {}, userAvatar: "", toastTimer: 0 };
 
       function byId(id) { return document.getElementById(id); }
       function track() { return tracks[state.track] ? state.track : "charm"; }
@@ -198,9 +198,33 @@
         var cur = Number(o.current_level_required_value || 0);
         var next = Number(o.next_level_required_value || 0);
         var total = Number(o.total_value || 0);
-        if (next <= cur) return .4;
+        if (!d || !d.overview) return 0;
+        if (next <= cur) return total >= cur && cur > 0 ? 1 : 0;
         return Math.max(0, Math.min(1, (total - cur) / (next - cur)));
       }
+      function profileFromOverview(current) {
+        var user = current && current.user;
+        return (user && (user.profile || user.user || user)) || {};
+      }
+      function profileAvatar(profile) {
+        return String((profile && (profile.avatar || profile.user_avatar || profile.userAvatar || profile.avatar_url || profile.avatarUrl || profile.profile_avatar || profile.profileAvatar)) || "");
+      }
+      function applyUserProfile(current) {
+        state.userAvatar = profileAvatar(profileFromOverview(current));
+        render();
+      }
+      function setAvatarSource(src, fallback) {
+        var avatar = byId("avatar");
+        if (!avatar) return;
+        var fallbackSrc = fallback || "";
+        var nextSrc = src || fallbackSrc;
+        avatar.onerror = function () {
+          if (fallbackSrc && avatar.getAttribute("src") !== fallbackSrc) {
+            avatar.src = fallbackSrc;
+          }
+        };
+        if (avatar.getAttribute("src") !== nextSrc) avatar.src = nextSrc;
+      }
       function resizeApp() {
         var scale = Math.min(window.innerWidth / 375, 1.25);
         document.documentElement.style.setProperty("--app-scale", String(scale));
@@ -257,7 +281,14 @@
         byId("lvNext").textContent = "Lv." + next;
         byId("progressPercent").textContent = percent + "%";
         byId("progressFill").style.width = percent + "%";
-        var need = Math.max(0, Number(o.next_level_required_value || 12345600) - Number(o.total_value || 0));
+        var curRequired = Number(o.current_level_required_value || 0);
+        var nextRequired = Number(o.next_level_required_value || 0);
+        var total = Number(o.total_value || 0);
+        if (d && d.overview && nextRequired <= curRequired) {
+          byId("needText").textContent = "Max level reached";
+          return;
+        }
+        var need = Math.max(0, nextRequired - total);
         byId("needText").textContent = "You need " + fmt(need) + " more experience points";
       }
       function render() {
@@ -267,7 +298,7 @@
         byId("cardBg").src = cfg.cardBg;
         byId("decorLeft").src = cfg.decor;
         byId("decorRight").src = cfg.decor;
-        byId("avatar").src = cfg.avatar;
+        setAvatarSource(state.userAvatar, cfg.avatar);
         byId("avatarFrame").src = cfg.frame;
         byId("tierRows").innerHTML = rowsHTML(state.track, state.details[state.track]);
         byId("upgradeList").innerHTML = upgradesHTML(cfg);
@@ -321,6 +352,13 @@
           render();
         });
       }
+      function loadUserProfile() {
+        if (!window.HyAppParams || !window.HyAppParams.loadUser) return Promise.resolve(null);
+        return window.HyAppParams.loadUser().then(function (current) {
+          applyUserProfile(current);
+          return current;
+        }).catch(function () { return null; });
+      }
       byId("tabs").addEventListener("click", function (event) {
         var target = event.target.closest("[data-track]");
         if (!target) return;
@@ -334,7 +372,7 @@
       window.HyAppBridge.ready({ page: "level" });
       loadTrack(state.track).finally(function () {
         loadOverview();
-        window.HyAppParams.loadUser().catch(function () { return null; });
+        loadUserProfile();
       });
     })();
   </script>