Widget:Calculator/Combat/Level
<style>
- combat-calc-widget { max-width: 360px; font-size: 14px; }
.combat-calc__lookup { display: flex; gap: 8px; margin-bottom: 15px; } .combat-calc__table { border-collapse: collapse; width: 100%; } .combat-calc__table td { padding: 6px 4px; } .combat-calc__stat-label { display: flex; align-items: center; gap: 8px; } .combat-calc__stat-label a { color: var(--theme-color-link, #5c97e6); text-decoration: none; } .combat-calc__stat-label a:hover { text-decoration: underline; } .combat-calc__stat-label img { vertical-align: middle; } .combat-calc__results { margin-top: 15px; padding: 12px; background-color: var(--bg-secondary, #1e1e1e); color: var(--text-main, #ccc); border: 1px solid var(--border-color-base, #333); border-radius: 5px; } .combat-calc__results b { color: var(--text-bright, #fff); } .combat-calc__hints ul { list-style: none; padding-left: 0; margin: 6px 0 0; } .combat-calc__hints li { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
- combat-calc-widget input[type="text"],
- combat-calc-widget input[type="number"] { width: 100%; 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; box-sizing: border-box; }
- combat-calc-widget button { background-color: var(--theme-color-accent-base, #2ecc71); color: white; border: none; padding: 6px 12px; cursor: pointer; border-radius: 4px; white-space: nowrap; }
- combat-calc-widget button:hover { background-color: var(--theme-color-accent-hover, #27ae60); }
- combat-calc-widget button:disabled { background-color: #555; cursor: not-allowed; }
</style>
<input type="text" id="username-input" placeholder="Enter HighSpell Username..."> <button id="lookup-btn">Lookup</button>
Combat Level: —
<script> (function() {
const STAT_CONFIG = [
{ id: 'hp', name: 'Hitpoints', icon: '/w/images/thumb/9/96/Hitpoints_icon.png/20px-Hitpoints_icon.png' },
{ id: 'accuracy', name: 'Accuracy', icon: '/w/images/thumb/d/df/Accuracy_icon.png/20px-Accuracy_icon.png' },
{ id: 'strength', name: 'Strength', icon: '/w/images/thumb/1/1b/Strength_icon.png/20px-Strength_icon.png' },
{ id: 'defense', name: 'Defense', icon: '/w/images/thumb/e/e5/Defense_icon.png/20px-Defense_icon.png' },
{ id: 'magic', name: 'Magic', icon: '/w/images/thumb/5/5c/Magic_icon.png/20px-Magic_icon.png' },
{ id: 'range', name: 'Range', icon: '/w/images/thumb/1/13/Range_icon.png/20px-Range_icon.png' },
];
const tbody = document.getElementById('stats-tbody');
const combatResultEl = document.getElementById('combat-result');
const levelHintsEl = document.getElementById('level-hints');
const lookupBtn = document.getElementById('lookup-btn');
const usernameInput = document.getElementById('username-input');
function generateStatRows() {
tbody.innerHTML = STAT_CONFIG.map(stat => `
<img src="${stat.icon}" alt="${stat.name} icon" width="20" height="20">
<a href="/w/${stat.name}" title="${stat.name}">${stat.name}</a>
<input type="number" id="stat-${stat.id}" value="${stat.id === 'hp' ? 10 : 1}" min="1" max="100" data-stat-id="${stat.id}">
`).join(); } function getStatValue(id) { const input = document.getElementById(`stat-${id}`); let value = parseInt(input.value, 10) || 1; value = Math.max(1, Math.min(100, value)); input.value = value; return value; } function renderHints(combatLvl, base) { const nextLevel = Math.floor(combatLvl) + 1; const needed = (nextLevel * 3.75) - base; if (needed <= 0) { levelHintsEl.innerHTML = "You are at the threshold for the next level!"; return; } const neededPrimary = Math.ceil(needed); const neededSecondary = Math.ceil(needed * 4); const icon = (name) => `<img src="${STAT_CONFIG.find(s=>s.name===name).icon}" alt="${name}" width="20" height="20">`; levelHintsEl.innerHTML = `
- +${neededPrimary} ${icon('Hitpoints')} Hitpoints
- +${neededPrimary} ${icon('Accuracy')} Accuracy, ${icon('Strength')} Strength, or ${icon('Defense')} Defense
- +${neededSecondary} ${icon('Magic')} Magic or ${icon('Range')} Range
`;
}
function updateCombatLevel() {
const stats = {
hp: getStatValue('hp'), accuracy: getStatValue('accuracy'), strength: getStatValue('strength'),
defense: getStatValue('defense'), magic: getStatValue('magic'), range: getStatValue('range')
};
const base = stats.hp + stats.accuracy + stats.strength + stats.defense + (stats.magic / 4) + (stats.range / 4);
const combat = base / 3.75;
combatResultEl.textContent = combat.toFixed(2);
levelHintsEl.style.fontStyle = 'normal';
renderHints(combat, base);
}
async function lookupStats() {
const username = usernameInput.value.trim();
if (!username) { levelHintsEl.innerHTML = 'Please enter a username.'; return; }
lookupBtn.disabled = true;
lookupBtn.textContent = '...';
levelHintsEl.textContent = `Searching for ${username}...`;
try {
const response = await fetch(`https://highspell.com/hiscores/player/${encodeURIComponent(username)}`);
if (!response.ok) throw new Error(`Player not found or server error.`);
const html = await response.text();
const doc = new DOMParser().parseFromString(html, "text/html");
let found = false;
doc.querySelectorAll('.hs_data__row').forEach(row => {
const skillName = row.querySelector('.hs_data__row__name')?.textContent.trim();
const config = STAT_CONFIG.find(s => s.name === skillName);
if (config) {
const level = row.querySelector('.hs_data__row__level')?.textContent.trim();
document.getElementById(`stat-${config.id}`).value = parseInt(level, 10) || 1;
found = true;
}
});
if (found) updateCombatLevel();
else throw new Error(`Could not parse stats for ${username}.`);
} catch (err) {
levelHintsEl.style.fontStyle = 'italic';
levelHintsEl.innerHTML = err.message;
combatResultEl.textContent = 'Error';
} finally {
lookupBtn.disabled = false;
lookupBtn.textContent = 'Lookup';
}
}
document.addEventListener('DOMContentLoaded', () => {
generateStatRows();
updateCombatLevel();
tbody.addEventListener('input', updateCombatLevel);
lookupBtn.addEventListener('click', lookupStats);
usernameInput.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); lookupStats(); } });
});
})(); </script>