Widget:Calculator/Magic/Aurum

<style>

 /* Main wrapper for the calculator */
 #aurum-widget-wrapper {
   max-width: 500px;
   margin-bottom: 15px;
 }
 /* Style for the form controls container */
 #aurum-widget-wrapper .form-controls {
   display: flex; /* Use flexbox for alignment */
   gap: 20px; /* Space between the two input sections */
   align-items: flex-end; /* Align items to the bottom */
 }
 /* Style for each individual control (label + input) */
 #aurum-widget-wrapper .control-group {
   display: flex;
   flex-direction: column; /* Stack label on top of input */
   gap: 4px;
 }
 /* Style for the input fields */
 #aurum-widget-wrapper input[type="number"] {
   background-color: var(--bg-main, #1e1f22);
   color: var(--text-main, #b6b4b2);
   border: 1px solid var(--border-color-base, #2d2d2d);
   border-radius: 4px;
   padding: 6px 8px;
   width: 120px; /* Give the inputs a fixed width */
 }
 /* Style for negative profit values in the results table */
 .profit-negative {
   color: #ee4231 !important;
 }

</style>

     <label for="scrollPrice"><a href="/w/Alchemy_Scroll" title="Alchemy Scroll">Alchemy Scroll</a> Price:</label>
     <input type="number" id="scrollPrice" value="400" min="1">

     <label for="quantity">Quantity:</label>
     <input type="number" id="quantity" value="1" min="1">

<script> (function() {

 'use strict';
 // --- Start of self-contained script ---
 
 function initializeCalculator() {
   const scrollPriceInput = document.getElementById('scrollPrice');
   const quantityInput = document.getElementById('quantity');
   const aurumTable = document.getElementById('aurum-table');
   const coinIcon = ' <a href="/w/Coins" title="Coins"><img alt="Coins" src="/w/images/thumb/9/9a/Coins_icon.png/16px-Coins_icon.png" decoding="async" loading="lazy" width="16" height="16" class="mw-file-element"></a>';

   function getNumericValue(input, fallback = 1) {
     const value = parseInt(input.value, 10);
     return !isNaN(value) && value >= 1 ? value : fallback;
   }

   function formatProfit(value) {
     const formatted = value.toLocaleString("en-US");
     return value < 0
       ? `${formatted}${coinIcon}`
       : `${formatted}${coinIcon}`;
   }

   function updateCalculations() {
     if (!aurumTable || !aurumTable.tBodies[0]) return;
     const scrollPrice = getNumericValue(scrollPriceInput);
     const quantity = getNumericValue(quantityInput);
     
     const rows = aurumTable.tBodies[0].rows;
     for (const row of rows) {
       if (row.dataset.aurumMinor === undefined || row.dataset.aurumMajor === undefined) continue;

       const minorVal = parseInt(row.dataset.aurumMinor, 10) || 0;
       const majorVal = parseInt(row.dataset.aurumMajor, 10) || 0;
       const minorProfit = minorVal - scrollPrice;
       const majorProfit = majorVal - scrollPrice;

       const cells = {
         minorEach: row.querySelector('.aurumMinorEach'),
         majorEach: row.querySelector('.aurumMajorEach'),
         minorTotal: row.querySelector('.aurumMinorTotal'),
         majorTotal: row.querySelector('.aurumMajorTotal')
       };
       
       if (cells.minorEach) cells.minorEach.innerHTML = formatProfit(minorProfit);
       if (cells.majorEach) cells.majorEach.innerHTML = formatProfit(majorProfit);
       if (cells.minorTotal) cells.minorTotal.innerHTML = formatProfit(minorProfit * quantity);
       if (cells.majorTotal) cells.majorTotal.innerHTML = formatProfit(majorProfit * quantity);
     }
   }

   // Attach listeners for manual updates
   scrollPriceInput.addEventListener('input', updateCalculations);
   quantityInput.addEventListener('input', updateCalculations);
   
   // Check if the table is already populated on initialization
   if (aurumTable && aurumTable.querySelector('tbody tr')) {
       updateCalculations();
       return;
   }
   
   // Fallback: If table is not ready, wait for it to be populated
   const observer = new MutationObserver((mutations, obs) => {
     if (aurumTable.querySelector('tbody tr')) {
       updateCalculations();
       obs.disconnect();
     }
   });

   if (aurumTable && aurumTable.querySelector('tbody')) {
       observer.observe(aurumTable.querySelector('tbody'), { childList: true });
   }
 }

 // Run the initializer when the basic document structure is ready.
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', initializeCalculator);
 } else {
   initializeCalculator();
 }

})(); </script>