admin/hyapp-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

等级h5

Browse Source
This commit is contained in:
zhx 2026-05-29 20:38:44 +08:00
parent 0cffeaf1c9
commit aa8070fec0
1 changed files with 45 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
level/index.html
View File

@ -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>