// Hotbar UI import { state } from '../core/state.js'; import { BLOCKS } from '../data/blocks.js'; import { ITEMS } from '../data/items.js'; import { TOOLS } from '../data/tools.js'; import { tex } from '../render/textures.js'; import { playSound } from '../audio/sound-engine.js'; export function rebuildHotbar() { const hotbarEl = state.hotbarEl; const inv = state.inv; const selected = state.selected; const recentItems = state.recentItems; const toolDurability = state.toolDurability; hotbarEl.innerHTML = ''; // Показываем последние 5 выбранных предметов (если они есть в инвентаре) const items = recentItems.filter(id => inv[id] > 0).slice(0, 5); for (const id of items) { const s = document.createElement('div'); s.className = 'slot' + (id === selected ? ' sel' : ''); if (BLOCKS[id]) { s.style.backgroundImage = `url(${tex[id].toDataURL()})`; s.style.backgroundSize = 'cover'; } else if (ITEMS[id]) { s.textContent = ITEMS[id].icon; } else if (TOOLS[id]) { s.textContent = TOOLS[id].icon; } else if (id === 'iron_armor') { s.textContent = '🛡️'; s.style.background = 'linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%)'; } const c = document.createElement('div'); c.className = 'count'; c.textContent = inv[id]; s.appendChild(c); s.onclick = () => { playSound('click'); // Звук клика по инвентарю state.selected = id; // Обновляем список последних предметов state.recentItems = state.recentItems.filter(item => item !== id); // Удаляем если уже есть state.recentItems.unshift(id); // Добавляем в начало state.recentItems = state.recentItems.slice(0, 5); // Оставляем только 5 rebuildHotbar(); }; // Показываем индикатор надетой брони if (id === 'iron_armor' && state.player.equippedArmor === 'iron_armor') { const equipped = document.createElement('div'); equipped.className = 'equipped-indicator'; equipped.textContent = '✓'; s.appendChild(equipped); } // Durability bar для инструментов if (TOOLS[id] && inv[id] > 0) { // Находим текущую прочность let curDur = 0, maxDur = TOOLS[id].durability; for (const [tid, dur] of toolDurability) { if (dur.type === id) { curDur = dur.current; maxDur = dur.max; break; } } if (maxDur > 0) { const bar = document.createElement('div'); bar.style.cssText = `position:absolute;bottom:0;left:0;right:0;height:3px;background:#333;border-radius:0 0 6px 6px;overflow:hidden;`; const fill = document.createElement('div'); const pct = curDur / maxDur; const color = pct > 0.5 ? '#2ecc71' : pct > 0.25 ? '#f39c12' : '#e74c3c'; fill.style.cssText = `width:${pct * 100}%;height:100%;background:${color};`; bar.appendChild(fill); s.appendChild(bar); } } hotbarEl.appendChild(s); } }