${potentialProfit >= 0 ? 'PROFIT' : 'LOSS'}: ${potentialProfit >= 0 ? '$' : '-$'}${Math.abs(potentialProfit).toLocaleString()}
Total Cost: $${totalCost.toLocaleString()} (${quantity} item${quantity > 1 ? 's' : ''})
${listingFee > 0 ? `Min. Resell Price: $${minResellPrice.toLocaleString()}
` : ''}
`;
const span = document.createElement('span');
span.style.fontWeight = 'bold';
span.style.fontSize = '10px';
span.style.padding = '0 4px';
span.style.borderRadius = '2px';
span.style.color = color;
span.style.cursor = 'help';
span.style.whiteSpace = 'nowrap';
span.textContent = text;
span.className = 'bazaar-price-comparison';
span.setAttribute('data-tooltip', tooltipContent);
return span.outerHTML;
}
} catch (e) {
console.error("Price comparison error:", e);
}
return '';
}
function renderVirtualCards(infoContainer) {
const cardContainer = infoContainer.querySelector('.bazaar-card-container'),
scrollWrapper = infoContainer.querySelector('.bazaar-scroll-wrapper');
if (!cardContainer || !scrollWrapper || !infoContainer.isConnected) return;
try {
const minQtyInput = infoContainer.querySelector('.bazaar-min-qty');
const minQty = minQtyInput && minQtyInput.value ? parseInt(minQtyInput.value, 10) : 0;
if (!infoContainer.originalListings && allListings && allListings.length > 0) {
infoContainer.originalListings = [...allListings];
}
if ((!allListings || allListings.length === 0) && infoContainer.originalListings) {
allListings = [...infoContainer.originalListings];
}
const filteredListings = minQty > 0 ? allListings.filter(listing => listing.quantity >= minQty) : allListings;
if (filteredListings.length === 0 && allListings.length > 0) {
cardContainer.innerHTML = '';
const messageContainer = document.createElement('div');
messageContainer.style.cssText = 'display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; text-align:center; width:100%; height:70px;';
const iconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
iconSvg.setAttribute("viewBox", "0 0 512 512");
iconSvg.setAttribute("width", "24");
iconSvg.setAttribute("height", "24");
iconSvg.style.marginBottom = "10px";
iconSvg.innerHTML = svgTemplates.infoIcon;
const textDiv = document.createElement('div');
textDiv.textContent = `No listings found with quantity ≥ ${minQty}. Try a lower value.`;
messageContainer.appendChild(iconSvg);
messageContainer.appendChild(textDiv);
cardContainer.appendChild(messageContainer);
const countElement = infoContainer.querySelector('.bazaar-listings-count');
if (countElement) {
countElement.textContent = `No listings match minimum quantity of ${minQty} (from ${allListings.length} total listings)`;
}
return;
}
if (cardContainer.style.width !== (filteredListings.length * CARD_WIDTH) + "px") {
cardContainer.style.width = (filteredListings.length * CARD_WIDTH) + "px";
}
const scrollLeft = scrollWrapper.scrollLeft,
containerWidth = scrollWrapper.clientWidth;
const visibleCards = Math.ceil(containerWidth / CARD_WIDTH),
buffer = Math.max(2, Math.floor(visibleCards / 3));
const totalItems = filteredListings.length;
if (infoContainer.lastRenderScrollLeft !== undefined &&
Math.abs(infoContainer.lastRenderScrollLeft - scrollLeft) < CARD_WIDTH * 0.3) {
}
infoContainer.lastRenderScrollLeft = scrollLeft;
let startIndex = Math.max(0, Math.floor(scrollLeft / CARD_WIDTH) - buffer),
endIndex = Math.min(totalItems, Math.ceil((scrollLeft + containerWidth) / CARD_WIDTH) + buffer);
const newVisible = {};
for (let i = startIndex; i < endIndex; i++) {
const listing = filteredListings[i];
const key = listing.player_id + '-' + listing.price + '-' + listing.quantity;
newVisible[key] = i;
}
Array.from(cardContainer.children).forEach(card => {
if (!card.classList.contains('bazaar-listing-card')) return;
const key = card.dataset.listingKey;
if (key in newVisible) {
const newIndex = newVisible[key];
card.dataset.index = newIndex;
card.style.left = (newIndex * CARD_WIDTH) + "px";
delete newVisible[key];
} else {
card.classList.add('fade-out');
card.addEventListener('transitionend', () => card.remove(), { once: true });
}
});
const fragment = document.createDocumentFragment();
for (const key in newVisible) {
const newIndex = newVisible[key];
const listing = filteredListings[newIndex];
const newCard = createListingCard(listing, newIndex);
newCard.classList.add('fade-in');
fragment.appendChild(newCard);
requestAnimationFrame(() => {
newCard.classList.remove('fade-in');
});
}
if (fragment.childElementCount > 0) {
cardContainer.appendChild(fragment);
}
const totalQuantity = filteredListings.reduce((sum, listing) => sum + listing.quantity, 0);
const countElement = infoContainer.querySelector('.bazaar-listings-count');
if (countElement) {
if (minQty > 0 && filteredListings.length < allListings.length) {
countElement.textContent = `Showing ${filteredListings.length} of ${allListings.length} bazaars (${totalQuantity.toLocaleString()} items total, min qty: ${minQty})`;
} else {
countElement.textContent = `Showing bazaars ${startIndex + 1}-${endIndex} of ${totalItems} (${totalQuantity.toLocaleString()} items total)`;
}
}
} catch (error) {
console.error("Error rendering virtual cards:", error);
}
}
function createInfoContainer(itemName, itemId) {
const container = document.createElement('div');
container.className = 'bazaar-info-container';
container.dataset.itemid = itemId;
currentItemName = itemName;
const header = document.createElement('div');
header.className = 'bazaar-info-header';
let marketValueText = "";
try {
const stored = getStoredItems();
const match = Object.values(stored).find(item =>
item.name && item.name.toLowerCase() === itemName.toLowerCase());
if (match && match.market_value) {
marketValueText = `Market Value: $${Number(match.market_value).toLocaleString()}`;
}
} catch (e) {
console.error("Header market value error:", e);
}
header.textContent = `Bazaar Listings for ${itemName} (ID: ${itemId})`;
if (marketValueText) {
const span = document.createElement('span');
span.style.marginLeft = '8px';
span.style.fontSize = '14px';
span.style.fontWeight = 'normal';
span.style.color = currentDarkMode ? '#aaa' : '#666';
span.textContent = `• ${marketValueText}`;
header.appendChild(span);
}
container.appendChild(header);
currentSortOrder = getSortOrderForKey(currentSortKey);
const sortControls = document.createElement('div');
sortControls.className = 'bazaar-sort-controls';
sortControls.innerHTML = `
Loading bazaar listings...
';
}
const cachedData = getCache(itemId);
if (cachedData) {
allListings = sortListings(cachedData.listings);
if (allListings.length === 0) {
showEmptyState(false);
} else {
renderVirtualCards(infoContainer);
}
return;
}
let listings = [], apiErrors = false;
let requestTimeout = setTimeout(() => {
console.warn('Bazaar listings request timed out');
showEmptyState(true);
}, 15000);
fetchJSON(`https://weav3r.dev/api/marketplace/${itemId}`, data => {
clearTimeout(requestTimeout);
if (!data || !data.listings) {
showEmptyState(true);
return;
}
listings = data.listings.map(listing => ({
item_id: listing.item_id,
player_id: listing.player_id,
player_name: listing.player_name,
quantity: listing.quantity,
price: listing.price,
updated: listing.last_checked
}));
setCache(itemId, { listings });
if (listings.length === 0) {
showEmptyState(false);
} else {
allListings = sortListings(listings);
renderVirtualCards(infoContainer);
}
});
}
function renderMessageInContainer(container, isApiError) {
container.innerHTML = '';
const messageContainer = document.createElement('div');
messageContainer.style.cssText = 'display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; text-align:center; width:100%; height:70px;';
const iconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
iconSvg.setAttribute("viewBox", "0 0 512 512");
iconSvg.setAttribute("width", "24");
iconSvg.setAttribute("height", "24");
iconSvg.style.marginBottom = "10px";
const textDiv = document.createElement('div');
if (isApiError) {
iconSvg.innerHTML = svgTemplates.infoIcon;
textDiv.innerHTML = "API Error