// ─── Inventory UI ─── // Pure drag-and-drop. No click-to-place. // mousedown on item = pick up, mouseup on slot = drop, mouseup elsewhere = cancel. // Injected once: keyframes for hotbar-drop pulse var _hotbarStyle = ''; function esc(s) { return (s || '').replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"'); } // ─── Slot ─── function renderSlot(item, index, isSelected, isDragSource, isDragActive, pulseSelected) { var bg = 'rgba(15,12,30,0.85)'; var border = isSelected ? 'rgba(139,92,246,0.6)' : 'rgba(139,92,246,0.15)'; var glow = isSelected ? '0 0 10px rgba(139,92,246,0.4),inset 0 0 8px rgba(139,92,246,0.15)' : 'none'; var opacity = '1'; if (isDragSource) { // Source slot: dashed border, fully visible border = 'rgba(139,92,246,0.3)'; glow = 'inset 0 0 12px rgba(139,92,246,0.15)'; } else if (isDragActive && !isSelected) { // Drop target slots (but not the selected one): subtle lift, brighter border border = 'rgba(139,92,246,0.3)'; bg = 'rgba(20,16,40,0.9)'; glow = 'inset 0 0 6px rgba(139,92,246,0.08)'; } var content = ''; var tooltip = ''; if (item) { var iconSrc = item.icon || '/cdn/pixel-tileobj-mystery-box.png'; var isTool = item.heldIcon ? true : false; var iconSize = isTool ? 'width:40px;height:40px;' : 'width:38px;height:38px;'; var flipStyle = item.flip ? 'transform:rotate(180deg);' : ''; content = '

'; if (item.count > 1) { content += '' + item.count + ''; } if (!isDragActive && !isDragSource) { var tipName = esc(item.name || 'Item'); var tipExtra = ''; if (item.desc) tipExtra += '

' + esc(item.desc) + '

'; if (item.count > 1) tipExtra += '

x' + item.count + '

'; tooltip = ''; } } var canPickup = (item && !isDragActive) ? true : false; var mousedownAction = canPickup ? 'sendAction(\'invDragStart\',{slot:' + index + '})' : ''; var mouseupAction = isDragActive ? 'event.stopPropagation();sendAction(\'invDragDrop\',{slot:' + index + '})' : ''; // Hover: when dragging, slots glow brighter on hover to show they're valid targets var hoverBorder = isDragActive ? 'rgba(139,92,246,0.65)' : 'rgba(139,92,246,0.45)'; var hoverGlow = isDragActive ? '0 0 10px rgba(139,92,246,0.25),inset 0 0 8px rgba(139,92,246,0.12)' : glow; var borderStyle = isDragSource ? 'dashed' : 'solid'; return '

' + tooltip + content + '

'; } // ─── Equip Slot ─── function renderEquipSlot(item, slotName, label, isDragActive) { var border = item ? 'rgba(234,179,8,0.35)' : 'rgba(139,92,246,0.15)'; var glow = item ? '0 0 8px rgba(234,179,8,0.15)' : 'none'; var content = ''; var tooltip = ''; if (item) { var iconSrc = item.icon || '/cdn/pixel-tileobj-mystery-box.png'; content = '

'; if (!isDragActive) { tooltip = ''; } } var mouseupAction = isDragActive ? 'event.stopPropagation();sendAction(\'invEquipDrop\',{slot:\'' + slotName + '\'})' : ''; var labelHtml = (!item) ? '' + esc(label) + '' : ''; return '

' + tooltip + content + labelHtml + '

'; } // ─── Hotbar Number Badge ─── function hotbarBadge(n, isSelected) { return '' + n + ''; } // ─── Ghost (follows cursor when dragging) ─── function renderGhost(item) { if (!item) return ''; var iconSrc = item.icon || '/cdn/pixel-tileobj-mystery-box.png'; return '

' + '

' + (item.count > 1 ? '' + item.count + '' : '') + '

'; } // ═══════════════════════════════════════ // Main render // ═══════════════════════════════════════ // ═══════════════════════════════════════ // Hotbar + XP bar (always visible, locked at bottom center) // ═══════════════════════════════════════ function renderHotbar(p) { var slots = p.invSlots || []; var hotbar = p.invHotbar || 0; var hotbarAnim = p.invHotbarAnim || false; var drag = p.invDrag; var isDragging = drag != null; var dragSlot = isDragging ? drag.slot : -1; var level = p.level || 1; var xp = p.xp || 0; var xpNext = p.xpNext || 100; var xpProgress = xpNext > 0 ? Math.min(xp / xpNext, 1) : 0; var xpPct = (xpProgress * 100).toFixed(1); var xpBar = '

' + 'Lv ' + level + '' + '

' + '

' + '' + xpPct + '%' + '

' + '

'; var hotbarHtml = ''; for (var h = 0; h < 9; h++) { var hi = 27 + h; var sel = (h === hotbar); hotbarHtml += '

' + hotbarBadge(h + 1, sel) + renderSlot(slots[hi], hi, sel, isDragging && dragSlot === hi, isDragging, sel && hotbarAnim) + '

'; } var hotbarStrip = '

' + hotbarHtml + '

'; var wrapStyle = 'display:flex;flex-direction:column;align-items:center;'; if (isDragging) { return _hotbarStyle + '

' + xpBar + hotbarStrip + '

'; } return _hotbarStyle + '

' + xpBar + hotbarStrip + '

'; } // ═══════════════════════════════════════ // Inventory panel (draggable, only when open) // ═══════════════════════════════════════ function renderInventoryPanel(p) { if (!p.invOpen) return ''; var slots = p.invSlots || []; var equip = p.invEquip || {}; var extended = p.invExtended; var drag = p.invDrag; var isDragging = drag != null; var dragSlot = isDragging ? drag.slot : -1; // ── Main grid (27 slots, 3 rows of 9) ── var mainGrid = ''; for (var r = 0; r < 3; r++) { var row = ''; for (var c = 0; c < 9; c++) { var si = r * 9 + c; row += renderSlot(slots[si], si, false, isDragging && dragSlot === si, isDragging, false); } mainGrid += '

' + row + '

'; } // ── Hotbar row inside panel (4th row, slots 27-35) ── var hotbarRow = ''; for (var h = 0; h < 9; h++) { var hi = 27 + h; hotbarRow += '

' + hotbarBadge(h + 1, false) + renderSlot(slots[hi], hi, false, isDragging && dragSlot === hi, isDragging, false) + '

'; } var hotbarRowHtml = '

' + hotbarRow + '

'; // ── Equipment wing ── var equipWing = ''; if (extended) { var equipSlots = ['helmet', 'chest', 'legs', 'boots', 'weapon']; var equipLabels = ['Head', 'Chest', 'Legs', 'Boots', 'Wpn']; var equipHtml = ''; for (var e = 0; e < equipSlots.length; e++) { equipHtml += renderEquipSlot(equip[equipSlots[e]], equipSlots[e], equipLabels[e], isDragging); } equipWing = '

' + '

EQUIP

' + equipHtml + '

'; } // ── Equipment toggle button ── var eqBtn = '

' + '⚔ Equipment

'; // ── Panel ── return '

' + '

☰ Inventory

' + '

' + mainGrid + '

' + hotbarRowHtml + '

' + equipWing + '

' + eqBtn + '

'; } function renderDragOverlay(p) { var drag = p.invDrag; if (drag == null) return ''; return '

' + '

'; } function renderDragGhost(p) { var drag = p.invDrag; if (drag == null) return ''; var slots = p.invSlots || []; var dragItem = slots[drag.slot]; if (!dragItem) return ''; var iconSrc = dragItem.icon || '/cdn/pixel-tileobj-mystery-box.png'; // Starts hidden (opacity 0) until first mousemove positions it return '

' + '

' + (dragItem.count > 1 ? '' + dragItem.count + '' : '') + '

'; } exports.renderHotbar = renderHotbar; exports.renderInventoryPanel = renderInventoryPanel; exports.renderDragOverlay = renderDragOverlay; exports.renderDragGhost = renderDragGhost;

Spawn