81 lines
3.1 KiB
JavaScript
81 lines
3.1 KiB
JavaScript
// 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);
|
|
}
|
|
} |