Widget:Calculator/Coins

<style>

1. gold-calculator { background-color: #1e1e1e; border: 1px solid #333; border-radius: 5px; padding: 15px; max-width: 400px; color: #ccc; }
2. gold-calculator .calc-tabs { display: flex; gap: 5px; margin-bottom: 15px; }

/* Default state for ALL tabs is now the inactive style */

1. gold-calculator .calc-tab { flex-grow: 1; border-radius: 4px; padding: 8px; cursor: pointer; text-align: center; font-weight: bold; transition: background-color 0.2s, color 0.2s, border-color 0.2s; background-color: #2a2c2f !important; border: 1px solid #444 !important; color: #b6b4b2 !important; }

/* This rule ONLY applies to inactive tabs on hover */

1. gold-calculator .calc-tab:not(.active):hover { background-color: #3a3a3a !important; border-color: #0fc065 !important; color: #0fc065 !important; }

/* This more specific rule OVERRIDES the default style for the active tab */

1. gold-calculator .calc-tab.active { background-color: #0fc065 !important; border-color: #0fc065 !important; color: #000 !important; }
2. gold-calculator .calc-inputs { display: grid; gap: 12px; }
3. gold-calculator .calc-inputs label { display: flex; flex-direction: column; gap: 4px; }
4. gold-calculator .calc-inputs input { 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; font-size: 14px; width: 100%; box-sizing: border-box; }
5. gold-calculator .calc-results { margin-top: 15px; padding-top: 15px; border-top: 1px solid #333; }
6. gold-calculator .calc-results b { color: #fff; }

</style>

   <button class="calc-tab active" data-mode="needed">Items Needed</button>
   <button class="calc-tab" data-mode="owned">Value of Items</button>

   <label>
     Coins per item:
     <input type="number" id="input1" min="1">
   </label>
   <label>
     Target total value:
     <input type="number" id="input2" min="1">
   </label>

Required items: --

Total cost: --

<script> document.addEventListener('DOMContentLoaded', () => {

 const calculator = document.getElementById('gold-calculator');
 const input1 = calculator.querySelector('#input1');
 const input2 = calculator.querySelector('#input2');
 const label1 = calculator.querySelector('#label1');
 const label2 = calculator.querySelector('#label2');
 const tabs = calculator.querySelectorAll('.calc-tab');
 const coinIcon = ' <img src="/w/images/thumb/9/9a/Coins_icon.png/16px-Coins_icon.png" decoding="async" width="16" height="16" class="mw-file-element" loading="lazy">';
 let currentMode = 'needed';
 const updateUIForMode = () => {
   if (currentMode === 'needed') {
     label1.innerHTML = '<a href="/w/Coins" title="Coins">Coins</a> per item:';
     label2.textContent = 'Target total value:';
     document.getElementById('result-line-1').innerHTML = 'Required items: --';
     document.getElementById('result-line-2').innerHTML = 'Total cost: --';
   } else {
     label1.innerHTML = '<a href="/w/Coins" title="Coins">Coins</a> per item:';
     label2.textContent = 'How many items you have:';
     document.getElementById('result-line-1').innerHTML = 'Total value: --';
     document.getElementById('result-line-2').innerHTML = ;
   }
 };
 const handleCalculation = () => {
   const val1 = parseFloat(input1.value) || 0;
   const val2 = parseFloat(input2.value) || 0;
   const res1 = document.getElementById('result1');
   const res2 = document.getElementById('result2');
   if (currentMode === 'needed') {
     if (val1 > 0 && val2 > 0) {
       const items = Math.ceil(val2 / val1);
       res1.textContent = items.toLocaleString();
       if(res2) res2.innerHTML = (items * val1).toLocaleString() + coinIcon;
     } else {
       res1.textContent = '--';
       if(res2) res2.textContent = '--';
     }
   } else {
     if (val1 > 0 && val2 >= 0) {
       res1.innerHTML = (val1 * val2).toLocaleString() + coinIcon;
     } else {
       res1.textContent = '--';
     }
   }
 };
 tabs.forEach(tab => {
   tab.addEventListener('click', () => {
     tabs.forEach(t => t.classList.remove('active'));
     tab.classList.add('active');
     currentMode = tab.dataset.mode;
     input1.value = ;
     input2.value = ;
     updateUIForMode();
     handleCalculation();
   });
 });
 input1.addEventListener('input', handleCalculation);
 input2.addEventListener('input', handleCalculation);
 updateUIForMode();

}); </script>