Why ga #36

Merged
Ghost merged 2 commits from why_ga into main 2026-09-11 17:11:24 +08:00
+78 -41
View File
@@ -207,20 +207,36 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
#topBar .ua-soon{font-size:10px;color:#778;background:rgba(255,255,255,.06);padding:1px 6px;border-radius:8px;}
/* 场景悬浮工具条:顶部栏下方居中、按钮横向排列
折叠态:一行 4 个核心按钮;展开态:两行 7 列共 14 个按钮 */
布局:功能按钮网格 + 底部全宽箭头条(不占格子) */
#sceneToolbar{
position:fixed; top:calc(58px + env(safe-area-inset-top) + 8px); right:max(18px, env(safe-area-inset-right)); left:auto; transform:none; z-index:110;
display:grid; grid-template-columns:repeat(7,64px);
grid-template-rows:repeat(2,72px); grid-auto-rows:72px;
grid-auto-flow:row; gap:10px; pointer-events:auto;
padding:11px; border-radius:16px;
display:grid; grid-template-columns:repeat(5,64px);
grid-auto-rows:auto;
grid-auto-flow:row dense; gap:8px; pointer-events:auto;
padding:10px; border-radius:16px;
background:rgba(12,18,32,.78); border:1px solid rgba(139,92,246,.35);
backdrop-filter:blur(10px); box-shadow:0 8px 28px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
transition:all .25s ease;
}
/* 折叠态:一行 4 列(汉堡键 + 任务/设置/排行榜) */
#sceneToolbar.collapsed{ grid-template-columns:repeat(4,64px); grid-template-rows:72px; }
/* 折叠态:一行 4 个核心按钮(任务/设置/排行榜/官网),箭头在底部横条 */
#sceneToolbar.collapsed{ grid-template-columns:repeat(5,64px); }
#sceneToolbar.collapsed .top-icon:not(.toolbar-core):not(#btnToolbarToggle){ display:none; }
/* 箭头按钮:横跨全宽的扁长条,不占功能按钮格子 */
#btnToolbarToggle{
grid-column: 1 / -1 !important;
height:28px !important; width:auto !important;
border-radius:9px !important;
background:rgba(139,92,246,.15) !important;
border:1px solid rgba(139,92,246,.3) !important;
flex-direction:row !important; gap:6px !important;
font-size:12px !important; color:#c4b5fd !important;
justify-content:center !important;
padding:0 !important;
margin:2px 0 0 0;
}
#btnToolbarToggle svg{ width:16px !important; height:16px !important; transition:transform .3s ease; }
/* 展开时箭头旋转 180° */
#sceneToolbar:not(.collapsed) #btnToolbarToggle svg{ transform:rotate(180deg); }
.top-icon{
position:relative; width:64px; height:64px; border-radius:13px; flex-shrink:0;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
@@ -231,7 +247,7 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
.top-icon:hover{background:linear-gradient(135deg, rgba(139,92,246,.28), rgba(74,175,255,.22)); border-color:rgba(139,92,246,.55); color:#fff; transform:translateY(-2px); box-shadow:0 6px 18px rgba(80,120,255,.35);}
.top-icon:active{transform:translateY(0);}
.top-icon img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));pointer-events:none;}
.top-icon svg{width:28px;height:28px;object-fit:contain;pointer-events:none;}
.top-icon svg{width:28px;height:28px;object-fit:contain;pointer-events:none;transition:transform .3s ease;}
.top-icon-label{font-size:10px;color:#b0c4de;line-height:1;text-align:center;white-space:nowrap;pointer-events:none;}
.top-icon-badge{
position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 5px;
@@ -458,15 +474,17 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
.we-pct{margin-left:2px; font-size:13px; font-weight:700; color:#c4b5fd; min-width:34px; text-align:right;}
.we-bar{width:100%; height:14px; background:rgba(255,255,255,.10); border-radius:7px; overflow:hidden;}
.we-fill{height:100%; width:0%; background:linear-gradient(90deg,#8b5cf6,#4af); border-radius:7px; transition:width .3s ease; box-shadow:0 0 12px rgba(139,92,246,.45);}
.we-currencies{display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0;}
.wc-item{display:flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color:#e6f0fb; background:rgba(255,255,255,.06); padding:3px 8px; border-radius:8px; border:1px solid rgba(255,255,255,.08); white-space:nowrap;}
.wc-item b{font-variant-numeric:tabular-nums;}
.we-currencies{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0;font-size:12px;font-weight:700;color:#e6f0fb;white-space:nowrap;}
.we-currencies .wc-tag{display:inline-flex;align-items:center;gap:3px;background:rgba(255,255,255,.06);padding:2px 7px;border-radius:7px;border:1px solid rgba(255,255,255,.08);}
.we-currencies .wc-val{font-variant-numeric:tabular-nums;}
.wc-tag{display:inline-flex;align-items:center;gap:3px;opacity:.9;transition:opacity .15s;}
.wc-tag:hover{opacity:1;}
.wc-tag .wc-val{font-variant-numeric:tabular-nums;color:#fff;}
@media (max-width:768px){
.we-currencies{gap:5px;}
.wc-item{font-size:11px; padding:2px 6px;}
.we-currencies{gap:6px;font-size:11px;}
}
@media (max-width:420px){
.we-currencies{display:none;}
.we-currencies{gap:4px;font-size:10px;}
}
/* 主沙盘底部功能框架(预留区:放功能按钮 / 素材槽,比微观边框更高) */
@@ -1244,8 +1262,9 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
#navControls{bottom:calc(96px + env(safe-area-inset-bottom));right:14px;
grid-template-columns:repeat(3,60px);grid-template-rows:repeat(3,60px);gap:6px;}
#navControls button{width:60px;height:60px;font-size:24px;border-radius:15px;}
#sceneToolbar{right:12px;left:auto;transform:none;gap:7px;padding:9px 10px;grid-template-columns:repeat(7,52px);grid-template-rows:repeat(2,58px);grid-auto-rows:58px;grid-auto-flow:row;}
#sceneToolbar.collapsed{grid-template-columns:repeat(4,52px);grid-template-rows:58px;}
#sceneToolbar{right:12px;left:auto;transform:none;gap:7px;padding:9px 10px;grid-template-columns:repeat(5,52px);grid-auto-flow:row;}
#sceneToolbar.collapsed{grid-template-columns:repeat(5,52px);}
#btnToolbarToggle{height:24px !important;}
#sceneToolbar .top-icon{width:52px;height:52px;font-size:17px;}
#sceneToolbar .top-icon img,
#sceneToolbar .top-icon svg{width:22px;height:22px;}
@@ -1261,8 +1280,9 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
#bottomBar .bb-btn{padding:7px 9px;font-size:11px;}
#worldExpBarWrap{width:280px;gap:5px;}
#worldExpBarWrap .we-title{display:none;}
#sceneToolbar{right:8px;left:auto;transform:none;gap:5px;padding:7px 8px;top:calc(58px + env(safe-area-inset-top) + 6px);grid-template-columns:repeat(7,46px);grid-template-rows:repeat(2,52px);grid-auto-rows:52px;grid-auto-flow:row;}
#sceneToolbar.collapsed{grid-template-columns:repeat(4,46px);grid-template-rows:52px;}
#sceneToolbar{right:8px;left:auto;transform:none;gap:5px;padding:7px 8px;top:calc(58px + env(safe-area-inset-top) + 6px);grid-template-columns:repeat(5,46px);grid-auto-flow:row;}
#sceneToolbar.collapsed{grid-template-columns:repeat(5,46px);}
#btnToolbarToggle{height:22px !important;}
#sceneToolbar .top-icon{width:46px;height:46px;font-size:15px;}
#sceneToolbar .top-icon img,
#sceneToolbar .top-icon svg{width:20px;height:20px;}
@@ -1461,9 +1481,6 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
<!-- 场景悬浮工具条:顶部栏正下方、浮于场景画面上 -->
<div id="sceneToolbar" class="collapsed">
<button class="top-icon toolbar-toggle" id="btnToolbarToggle" type="button" title="展开/收起菜单">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/></svg>
</button>
<button class="top-icon" id="talentBtn" hidden title="我的天赋">
<span style="font-size:24px;line-height:1;">🌟</span>
<span class="top-icon-label">天赋</span>
@@ -1472,7 +1489,7 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
<img src="assets/icons/task/task.png?v=2" alt="任务">
<span class="top-icon-label">任务</span>
</button>
<button class="top-icon" id="btnMail" type="button" title="邮箱">
<button class="top-icon toolbar-core" id="btnMail" type="button" title="邮箱">
<span class="ti-label"><img src="assets/icons/mail/mail.png?v=2" alt="邮箱"></span>
<span class="top-icon-label">邮箱</span>
<span class="top-icon-badge" id="topMailBadge" style="display:none;">0</span>
@@ -1519,10 +1536,13 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
<span class="top-icon-label">成就</span>
<span class="top-icon-badge" id="achBadge" hidden></span>
</button>
<button class="top-icon" id="btnWebsite" type="button" title="官网">
<button class="top-icon toolbar-core" id="btnWebsite" type="button" title="官网">
<img src="assets/icons/website/website.png?v=2" alt="官网">
<span class="top-icon-label">官网</span>
</button>
<button class="top-icon toolbar-toggle" id="btnToolbarToggle" type="button" title="展开/收起菜单">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
</button>
</div>
<!-- 主沙盘底部功能框架(世界等级经验条置于最右侧) -->
@@ -1552,11 +1572,8 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
<div class="we-info">
<span class="we-lv">世界 Lv.<b id="weLv">--</b></span>
<span class="we-title" id="weTitle">--</span>
<div class="we-currencies">
<span class="wc-item" title="金币">🪙 <b id="wcGold">0</b></span>
<span class="wc-item" title="铜币"><svg class="wc-icon-copper" width="14" height="14" viewBox="0 0 14 14"><defs><radialGradient id="gcu" cx="30%" cy="30%" r="70%"><stop offset="0%" stop-color="#db9b6b"/><stop offset="100%" stop-color="#8c4a1e"/></radialGradient></defs><circle cx="7" cy="7" r="6.5" fill="url(#gcu)" stroke="rgba(0,0,0,.2)" stroke-width="0.6"/><circle cx="7" cy="7" r="4.8" fill="none" stroke="rgba(0,0,0,.15)" stroke-width="0.6"/><text x="7" y="9.2" font-size="5.5" fill="rgba(0,0,0,.45)" text-anchor="middle" font-weight="bold" font-family="Arial, sans-serif">Cu</text></svg> <b id="wcCopper">0</b></span>
<span class="wc-item" title="银币"><svg class="wc-icon-silver" width="14" height="14" viewBox="0 0 14 14"><defs><radialGradient id="gag" cx="30%" cy="30%" r="70%"><stop offset="0%" stop-color="#f2f2f2"/><stop offset="100%" stop-color="#8e96a0"/></radialGradient></defs><circle cx="7" cy="7" r="6.5" fill="url(#gag)" stroke="rgba(0,0,0,.18)" stroke-width="0.6"/><circle cx="7" cy="7" r="4.8" fill="none" stroke="rgba(0,0,0,.12)" stroke-width="0.6"/><text x="7" y="9.2" font-size="5.5" fill="rgba(0,0,0,.4)" text-anchor="middle" font-weight="bold" font-family="Arial, sans-serif">Ag</text></svg> <b id="wcSilver">0</b></span>
<span class="wc-item" title="钻石">💎 <b id="wcDiamond">0</b></span>
<div class="we-currencies" id="weCurrencies">
<!-- 由 refreshBottomCurrency() 动态渲染:为0不显示,自动k/M换算,一行紧凑 -->
</div>
<span class="we-exp-txt" id="weExpTxt">EXP -- / --</span>
<span class="we-pct" id="weExpPct">--%</span>
@@ -2821,9 +2838,6 @@ function microChestIcon(t) {
function microChestColor(t) {
return ({ copper: '#c8854a', silver: '#cfd6e0', gold: '#ffd23f', diamond: '#7ad7ff' })[t] || '#ffd23f';
}
function microChestGlow(tier) {
return ({ common: '#9aa4b2', rare: '#4aa3ff', epic: '#b46bff', legendary: '#ffb13f' })[tier] || '#9aa4b2';
}
function microChestEmoji(tier) {
return ({ common: '📦', rare: '🎁', epic: '🧰', legendary: '💠' })[tier] || '📦';
}
@@ -2859,7 +2873,6 @@ function microDrawChests(c) {
const t = microState.animTime;
microChests.forEach(ch => {
const sp = microCellToScreen(ch.cell_i + 0.5, ch.cell_j + 0.5);
const glow = microChestGlow(ch.tier);
// 主体:优先使用俯视图 PNG,未加载成功则回退 emoji
const imgUrl = microChestTopImage(ch.tier);
const img = imgUrl ? getChestImage(imgUrl) : null;
@@ -3099,16 +3112,40 @@ function initGoldEditor() {
refreshBottomCurrency();
}
*/
// 底部世界经验条货币展示(金币/铜币/银币/钻石)
// 底部世界经验条货币展示:铜/银/金/钻 4 种,为 0 不显示,数字自动 k/M/B 换算,一行紧凑
const CURRENCY_LIST = [
{ key:'copper', icon:'🥉', label:'铜币', color:'#db9b6b' },
{ key:'silver', icon:'🥈', label:'银币', color:'#cfd6e0' },
{ key:'gold', icon:'🪙', label:'金币', color:'#ffd54f' },
{ key:'diamond', icon:'💎', label:'钻石', color:'#7ad7ff' },
];
// 紧凑数字:<1000原样;>=1000按 k/M/B 换算,2位小数去尾零(1000→1k,150230→150.23k,1200000→1.2M)
function fmtCompact(n) {
n = Number(n) || 0;
if (Math.abs(n) < 1000) return String(Math.floor(n));
const units = [
{ thresh:1e9, suffix:'B' },
{ thresh:1e6, suffix:'M' },
{ thresh:1e3, suffix:'k' },
];
for (const u of units) {
if (n >= u.thresh) {
const v = n / u.thresh;
return String(Math.trunc(n * 100 / u.thresh) / 100) + u.suffix;
}
}
return String(Math.floor(n));
}
function refreshBottomCurrency() {
const setWc = (id, val) => {
const el = document.getElementById(id);
if (el) el.textContent = Math.floor(val || 0);
};
setWc('wcGold', microChar ? microChar.gold : 0);
setWc('wcCopper', microChar ? microChar.copper : 0);
setWc('wcSilver', microChar ? microChar.silver : 0);
setWc('wcDiamond', microChar ? microChar.diamond : 0);
const el = document.getElementById('weCurrencies');
if (!el) return;
const mc = microChar || {};
const parts = CURRENCY_LIST
.filter(c => (mc[c.key] || 0) > 0)
.map(c => `<span class="wc-tag" title="${c.label}" style="color:${c.color}">${c.icon}<b class="wc-val">${fmtCompact(mc[c.key])}</b></span>`);
el.innerHTML = parts.join('');
}
// 编辑器已隐藏,顶部调用和入参都改为刷新底部货币即可
function updateGoldEditorDisplay() { refreshBottomCurrency(); }