Progress on appraisal UI

This commit is contained in:
2026-07-07 09:41:59 -04:00
parent 97d1d0d2f4
commit a25d8e4012
+30 -14
View File
@@ -24,6 +24,13 @@
animation: colorPulse 1s infinite ease-in-out; animation: colorPulse 1s infinite ease-in-out;
font-size: 2rem; font-size: 2rem;
} }
.appraise-info {
border-radius: 30px;
border: 2px solid #777;
padding: 4px 8px;
background: #222;
margin: 5px;
}
`); `);
// Setup Formatter // Setup Formatter
@@ -62,9 +69,7 @@
); );
var timerContainer = null; var timerContainer = null;
const timeDisplay = document.createElement("div"); const timeDisplay = document.createElement("div");
timeDisplay.style.cssText = 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;";
"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);
parentContainer.insertAdjacentElement("beforebegin", timeDisplay); parentContainer.insertAdjacentElement("beforebegin", timeDisplay);
timeDisplay.innerText = "Calculating landing time..."; timeDisplay.innerText = "Calculating landing time...";
timerContainer = timeDisplay; timerContainer = timeDisplay;
@@ -73,7 +78,6 @@
// Enumerate Inventory items // Enumerate Inventory items
var travelInventory = travelRoot.querySelectorAll('[class^="itemButton"]'); var travelInventory = travelRoot.querySelectorAll('[class^="itemButton"]');
var iteminfo = []; var iteminfo = [];
console.log(`${travelInventory.length} items found.`); // TODO: DEBUG: Remove.
if (travelInventory.length > 0) { if (travelInventory.length > 0) {
travelInventory.forEach((item) => { travelInventory.forEach((item) => {
let itemImg = item.querySelector("img"); // Use the image URL to get the item ID 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 to update the page with price info
function updatePriceInfo() { function updatePriceInfo() {
var totalValue = 0;
var values = { var values = {
market: 0, market: 0,
bazaar_average: 0, bazaar_average: 0,
@@ -102,17 +105,30 @@
const invPanel = travelRoot.querySelector('[class^="inventoryPanel"]'); const invPanel = travelRoot.querySelector('[class^="inventoryPanel"]');
const appraisePanel = document.createElement("div"); const appraisePanel = document.createElement("div");
appraisePanel.style.cssText = "color: #0c0; font-weight: bold; font-size: 1.2rem;" appraisePanel.style.cssText = "color: #0c0; font-weight: bold; font-size: 1rem; text-align: center; background: #333; padding: 5px;"
invPanel.parentNode.insertBefore(appraisePanel, invPanel.nextSibling); invPanel.parentNode.insertBefore(appraisePanel, invPanel.nextSibling); // Add the new element after the travel inventory panel
appraisePanel.innerText = "Appraising items..."; iteminfo.forEach(item => { // Keep track of all totals for display
iteminfo.forEach(item => {
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}`); 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_min = item.bazaar_min * item.qty;
values.bazaar_average = currencyFormatter.format(item.bazaar_average * item.qty); values.bazaar_average = item.bazaar_average * item.qty;
values.market = currencyFormatter.format(item.market * item.qty); values.market = item.market * item.qty;
}); });
// TODO: Update UI Elements // Update UI Elements
appraisePanel.innerText = `Quick Sell: ${values.bazaar_min} | Market: ${values.market} | Bazaar Avg: ${values.bazaar_average}`; 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 to get price information
function getPriceInfo(itemId) { function getPriceInfo(itemId) {