Widget:Calculator/Coins
<style>
- gold-calculator { background-color: #1e1e1e; border: 1px solid #333; border-radius: 5px; padding: 15px; max-width: 400px; color: #ccc; }
- gold-calculator .calc-tabs { display: flex; gap: 5px; margin-bottom: 15px; }
/* Default state for ALL tabs is now the inactive style */
- 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 */
- 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 */
- gold-calculator .calc-tab.active { background-color: #0fc065 !important; border-color: #0fc065 !important; color: #000 !important; }
- gold-calculator .calc-inputs { display: grid; gap: 12px; }
- gold-calculator .calc-inputs label { display: flex; flex-direction: column; gap: 4px; }
- 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; }
- gold-calculator .calc-results { margin-top: 15px; padding-top: 15px; border-top: 1px solid #333; }
- 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>