+ // 装备槽：槽位列表来自后端真源（microEquipSlots），环绕方位由 EQUIP_SLOT_POS 决定；
+ // 未落入方位的槽位（后端将来新增）自动进入底部兜底网格 —— 不写死、不丢槽。
+ const slotList = microEquipSlots();
+ const bySlot = {};
+ slotList.forEach(s => { bySlot[s.value] = s; });
+ const eqCell = (value) => {
+ const s = bySlot[value];
+ if (!s) return `
`; // 槽位缺失 → 占位保持环绕对称
+ const cur = (unit.equip && unit.equip[value]) || null;
+ return `
`;
};
+ const extraSlots = slotList.filter(s => !EQUIP_SLOT_POS[s.value]);
+ const extraGridHTML = extraSlots.length
+ ? `
` : '';
const statusColor = unit.status==='working'?'#8bc34a':unit.status==='resting'?'#ff9800':'#4af';
const statusText = unit.status==='working'?'🟢 工作中':unit.status==='resting'?'🟡 休息中':'🔵 空闲中';
document.getElementById('modalBody').innerHTML = `
@@ -6161,12 +6219,17 @@ async function showUnitModal(unitId) {
- ${eqCell('accessory','饰品')}
- ${eqCell('weapon','武器')}
-
${portrait}
- ${eqCell('armor','护甲')}
- ${eqCell('boots','鞋子')}
+
+
${eqCell('hat')}
+
+
${eqCell('bracelet')}${eqCell('weapon')}${eqCell('accessory')}
+
${portrait}
+
${eqCell('armor')}${eqCell('belt')}${eqCell('pants')}
+
+
${eqCell('boots')}
+
+ ${extraGridHTML}
@@ -6185,33 +6248,67 @@ async function showUnitModal(unitId) {
`;
window._umUnit = unit;
- if (sprite) _drawRacePortrait(sprite, document.getElementById('umPortraitCv'));
+ if (sprite) _drawRacePortrait(sprite, document.getElementById('umPortraitCv'), (raceCfg && raceCfg.fw) || 0);
modal.classList.add('active');
}
-// 精灵图第一帧 → 面板立绘 canvas（精确取 48:64 帧比例、居中、脚下光晕底座）
-function _drawRacePortrait(src, cv) {
+// 精灵图第一帧 → 面板立绘 canvas
+// 要点：① 位图尺寸跟随 CSS 显示尺寸(×DPR)，杜绝 canvas 被非等比拉伸致人像变形；
+// ② 按第一帧的"不透明像素包围盒"等比放大，人像不被帧内透明留白浪费，填满立绘区；
+// ③ 帧宽优先取种族配置 fw（宽帧表按 48/64 反推会算错）。
+function _drawRacePortrait(src, cv, frameW) {
if (!cv) return;
+ // 位图尺寸 = 实际显示尺寸 × DPR（拿不到布局时退回 CSS 声明值 132×200）
+ let rect = { width: 0, height: 0 };
+ try { rect = cv.getBoundingClientRect(); } catch (e) {}
+ const dpr = 2;
+ const cssW = rect.width > 8 ? rect.width : 132;
+ const cssH = rect.height > 8 ? rect.height : 200;
+ cv.width = Math.round(cssW * dpr);
+ cv.height = Math.round(cssH * dpr);
+
const ctx = cv.getContext('2d');
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => {
const W = cv.width, H = cv.height;
ctx.clearRect(0, 0, W, H);
- // 脚下光晕底座
- const gy = H * 0.88;
- const grd = ctx.createRadialGradient(W / 2, gy, 2, W / 2, gy, W * 0.42);
+ ctx.imageSmoothingEnabled = false;
+ const fh = img.naturalHeight;
+ const fw = frameW || Math.max(1, Math.round(fh * 48 / 64));
+ // 量第一帧的不透明包围盒
+ let sx = 0, sy = 0, sw = fw, sh = fh;
+ try {
+ const off = document.createElement('canvas');
+ off.width = fw; off.height = fh;
+ const octx = off.getContext('2d');
+ octx.drawImage(img, 0, 0, fw, fh, 0, 0, fw, fh);
+ const d = octx.getImageData(0, 0, fw, fh).data;
+ let x0 = fw, y0 = fh, x1 = -1, y1 = -1;
+ for (let y = 0; y < fh; y++) {
+ for (let x = 0; x < fw; x++) {
+ if (d[(y * fw + x) * 4 + 3] > 12) {
+ if (x < x0) x0 = x;
+ if (x > x1) x1 = x;
+ if (y < y0) y0 = y;
+ if (y > y1) y1 = y;
+ }
+ }
+ }
+ if (x1 > x0 && y1 > y0) { sx = x0; sy = y0; sw = x1 - x0 + 1; sh = y1 - y0 + 1; }
+ } catch (e) { /* 取像素受限（跨域）→ 退回整帧比例 */ }
+ // 等比缩放：高度优先（立绘区偏瘦高），宽度不足时自动以宽度为准
+ const scale = Math.min((W * 0.94) / sw, (H * 0.80) / sh);
+ const dw = sw * scale, dh = sh * scale;
+ const gy = H * 0.90; // 脚底基线
+ // 脚下光晕底座（随人像宽度自适应）
+ const gx = Math.max(W * 0.40, dw * 0.62);
+ const grd = ctx.createRadialGradient(W / 2, gy, 2, W / 2, gy, gx);
grd.addColorStop(0, 'rgba(139,92,246,.5)');
grd.addColorStop(1, 'rgba(139,92,246,0)');
ctx.fillStyle = grd;
- ctx.beginPath(); ctx.ellipse(W / 2, gy, W * 0.42, H * 0.06, 0, 0, Math.PI * 2); ctx.fill();
- // 统一帧规格 48×64（characters.js CHAR_FW/CHAR_FH），按原图高反推帧宽，只画第一帧
- const fh = img.naturalHeight;
- const fw = Math.max(1, Math.round(fh * 48 / 64));
- const scale = Math.min((W * 0.86) / fw, (H * 0.84) / fh);
- const dw = fw * scale, dh = fh * scale;
- ctx.imageSmoothingEnabled = false;
- ctx.drawImage(img, 0, 0, fw, fh, (W - dw) / 2, gy - dh, dw, dh);
+ ctx.beginPath(); ctx.ellipse(W / 2, gy, gx, H * 0.055, 0, 0, Math.PI * 2); ctx.fill();
+ ctx.drawImage(img, sx, sy, sw, sh, (W - dw) / 2, gy - dh, dw, dh);
};
img.src = src;
}
@@ -6232,7 +6329,9 @@ window.umTogglePicker = function(slot){
if (!box || !unit) return;
if (box.dataset.slot === slot) { box.innerHTML = ''; box.dataset.slot = ''; return; }
box.dataset.slot = slot;
- const map = { weapon: '武器', armor: '护甲', accessory: '饰品', boots: '鞋子' };
+ const labelMap = {};
+ microEquipSlots().forEach(s => { labelMap[s.value] = s.label; });
+ const map = labelMap;
const cur = unit.equip && unit.equip[slot];
const cid = unit.cid || unit.id;
let html = `
${map[slot]} · 点击穿戴×
`;
@@ -6296,7 +6395,7 @@ async function updateChar() {
});
if (r && r.ok && r.char) {
microChar = r.char;
- if (!microChar.equip) microChar.equip = { weapon: null, armor: null, accessory: null, boots: null };
+ if (!microChar.equip) microChar.equip = {};
if (!microChar.inventory) microChar.inventory = {};
['gold','copper','silver','diamond'].forEach(k => { if (microChar[k] == null) microChar[k] = 0; });
}