diff --git a/travel-time/travel-helper.js b/travel-time/travel-helper.js index 926784f..59e4f54 100644 --- a/travel-time/travel-helper.js +++ b/travel-time/travel-helper.js @@ -24,6 +24,13 @@ animation: colorPulse 1s infinite ease-in-out; font-size: 2rem; } + .appraise-info { + border-radius: 30px; + border: 2px solid #777; + padding: 4px 8px; + background: #222; + margin: 5px; + } `); // Setup Formatter @@ -62,9 +69,7 @@ ); var timerContainer = null; const timeDisplay = document.createElement("div"); - timeDisplay.style.cssText = - "padding: 10px; margin-top: 10px; color: #fff; text-align: center; font-weight: bold; transition: color 0.5s ease; font-weight: bold; font-size: 1.5rem;"; - //timerElement.parentNode.insertBefore(timeDisplay, timerElement.nextSibling); + timeDisplay.style.cssText = "padding: 10px; margin-top: 10px; color: #fff; text-align: center; font-weight: bold; transition: color 0.5s ease; font-weight: bold; font-size: 1.5rem;"; parentContainer.insertAdjacentElement("beforebegin", timeDisplay); timeDisplay.innerText = "Calculating landing time..."; timerContainer = timeDisplay; @@ -73,7 +78,6 @@ // Enumerate Inventory items var travelInventory = travelRoot.querySelectorAll('[class^="itemButton"]'); var iteminfo = []; - console.log(`${travelInventory.length} items found.`); // TODO: DEBUG: Remove. if (travelInventory.length > 0) { travelInventory.forEach((item) => { let itemImg = item.querySelector("img"); // Use the image URL to get the item ID @@ -93,7 +97,6 @@ } // Function to update the page with price info function updatePriceInfo() { - var totalValue = 0; var values = { market: 0, bazaar_average: 0, @@ -102,17 +105,30 @@ const invPanel = travelRoot.querySelector('[class^="inventoryPanel"]'); const appraisePanel = document.createElement("div"); - appraisePanel.style.cssText = "color: #0c0; font-weight: bold; font-size: 1.2rem;" - invPanel.parentNode.insertBefore(appraisePanel, invPanel.nextSibling); - appraisePanel.innerText = "Appraising items..."; - iteminfo.forEach(item => { + appraisePanel.style.cssText = "color: #0c0; font-weight: bold; font-size: 1rem; text-align: center; background: #333; padding: 5px;" + invPanel.parentNode.insertBefore(appraisePanel, invPanel.nextSibling); // Add the new element after the travel inventory panel + iteminfo.forEach(item => { // Keep track of all totals for display console.log(`Market Value of ${item.qty} ${item.item_name}: ${item.market * item.qty}. Bazaar Avg: ${item.bazaar_average * item.qty}. Bazaar Min: ${item.bazaar_min * item.qty}`); - values.bazaar_min = currencyFormatter.format(item.bazaar_min * item.qty); - values.bazaar_average = currencyFormatter.format(item.bazaar_average * item.qty); - values.market = currencyFormatter.format(item.market * item.qty); + values.bazaar_min = item.bazaar_min * item.qty; + values.bazaar_average = item.bazaar_average * item.qty; + values.market = item.market * item.qty; }); - // TODO: Update UI Elements - appraisePanel.innerText = `Quick Sell: ${values.bazaar_min} | Market: ${values.market} | Bazaar Avg: ${values.bazaar_average}`; + // Update UI Elements + let bazMin = document.createElement("span"); + bazMin.classList.add('appraise-info'); + bazMin.innerText = `Quick Sale: ${currencyFormatter.format(values.bazaar_min)}`; + let marketVal = document.createElement("span"); + marketVal.classList.add('appraise-info'); + marketVal.innerText = `Market: ${currencyFormatter.format(values.market)}`; + let bazAvg = document.createElement("span"); + bazAvg.classList.add("appraise-info"); + bazAvg.innerText = `Bazaar Avg: ${currencyFormatter.format(values.bazaar_average)}`; + + appraisePanel.append(marketVal); + appraisePanel.append(bazMin); + appraisePanel.append(bazAvg); + + //appraisePanel.innerText = `Quick Sell: ${values.bazaar_min} | Market: ${values.market} | Bazaar Avg: ${values.bazaar_average}`; } // Function to get price information function getPriceInfo(itemId) {