85 lines
4.6 KiB
JavaScript
85 lines
4.6 KiB
JavaScript
// ==================== РЫНОК ПРЕДЛОЖЕНИЙ ====================
|
|
import { state } from '../core/state.js';
|
|
import { playSound } from '../audio/sound-engine.js';
|
|
|
|
let marketPanel, marketClose, marketContent;
|
|
|
|
export function initMarket() {
|
|
marketPanel = document.getElementById('marketPanel');
|
|
marketClose = document.getElementById('marketClose');
|
|
marketContent = document.getElementById('marketContent');
|
|
|
|
if (!marketPanel) return;
|
|
|
|
if (marketClose) marketClose.addEventListener('click', () => closeMarket());
|
|
document.addEventListener('toggleMarket', () => toggleMarket());
|
|
}
|
|
|
|
export function toggleMarket() {
|
|
if (!marketPanel) return;
|
|
if (marketPanel.style.display === 'none' || !marketPanel.style.display) {
|
|
openMarket();
|
|
} else {
|
|
closeMarket();
|
|
}
|
|
}
|
|
|
|
export function closeMarket() {
|
|
if (marketPanel) marketPanel.style.display = 'none';
|
|
}
|
|
|
|
function openMarket() {
|
|
if (marketPanel) {
|
|
marketPanel.style.display = 'block';
|
|
renderMarket();
|
|
}
|
|
}
|
|
|
|
function renderMarket() {
|
|
if (!marketContent) return;
|
|
if (!state.socket) {
|
|
marketContent.innerHTML = '<p style="color:#aaa;">Подключение к серверу...</p>';
|
|
return;
|
|
}
|
|
|
|
state.socket.emit('market_list', {}, (orders) => {
|
|
if (!orders || !orders.length) {
|
|
marketContent.innerHTML = '<p style="color:#aaa;text-align:center;">Предложений пока нет</p><div style="margin-top:12px;"><button id="createOrderBtn" style="width:100%;padding:10px;background:#4a8c4a;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;">+ Выставить предмет</button></div>';
|
|
const btn = document.getElementById('createOrderBtn');
|
|
if (btn) btn.addEventListener('click', showCreateOrder);
|
|
return;
|
|
}
|
|
|
|
let html = '<div style="margin-bottom:8px;"><button id="createOrderBtn" style="padding:8px 14px;background:#4a8c4a;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:13px;">+ Выставить предмет</button></div>';
|
|
html += orders.map(o => '<div style="display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.1);"><div><span style="color:#ffd700;">' + (o.offer_item||'') + '</span> x' + (o.offer_qty||1) + ' <span style="color:#888;"> ⇄ </span><span style="color:#7ecfff;">' + (o.want_item||'') + '</span> x' + (o.want_qty||1) + '</div><div style="font-size:11px;color:#888;">' + (o.seller || 'Аноним') + '</div></div>').join('');
|
|
marketContent.innerHTML = html;
|
|
const btn = document.getElementById('createOrderBtn');
|
|
if (btn) btn.addEventListener('click', showCreateOrder);
|
|
});
|
|
}
|
|
|
|
function showCreateOrder() {
|
|
if (!marketContent) return;
|
|
const invKeys = Object.keys(state.inv || {});
|
|
const invOpts = invKeys.filter(k => (state.inv[k]||0) > 0).map(k => '<option value="'+k+'">'+k+' (x'+state.inv[k]+')</option>').join('');
|
|
|
|
marketContent.innerHTML = '<div style="padding:8px;"><h3 style="margin:0 0 10px;font-size:14px;">Выставить предмет</h3><label style="font-size:12px;color:#aaa;">Отдаю:</label><select id="offerItem" style="width:100%;margin-bottom:8px;padding:6px;background:#222;color:#fff;border:1px solid #555;border-radius:4px;">'+invOpts+'</select><label style="font-size:12px;color:#aaa;">Хочу:</label><input id="wantItem" placeholder="Название предмета" style="width:100%;margin-bottom:8px;padding:6px;background:#222;color:#fff;border:1px solid #555;border-radius:4px;" /><div style="display:flex;gap:8px;"><button id="submitOrder" style="flex:1;padding:8px;background:#4a8c4a;color:#fff;border:none;border-radius:6px;cursor:pointer;">Выставить</button><button id="cancelOrder" style="flex:1;padding:8px;background:#555;color:#fff;border:none;border-radius:6px;cursor:pointer;">Отмена</button></div></div>';
|
|
|
|
const cancelBtn = document.getElementById('cancelOrder');
|
|
if (cancelBtn) cancelBtn.addEventListener('click', () => renderMarket());
|
|
const submitBtn = document.getElementById('submitOrder');
|
|
if (submitBtn) submitBtn.addEventListener('click', () => {
|
|
const offerItem = document.getElementById('offerItem');
|
|
const wantItem = document.getElementById('wantItem');
|
|
if (!offerItem || !wantItem) return;
|
|
const offer = offerItem.value;
|
|
const want = wantItem.value.trim();
|
|
if (!offer || !want) { alert('Выберите предмет и укажите что хотите получить'); return; }
|
|
if (state.socket) {
|
|
state.socket.emit('market_create', { offer_item: offer, offer_qty: 1, want_item: want, want_qty: 1 });
|
|
playSound('click');
|
|
setTimeout(renderMarket, 500);
|
|
}
|
|
});
|
|
}
|