Widget:Calculator/Combat/Level: Difference between revisions

#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; }

<div id="combat-calc-widget">

   <div class="combat-calc__lookup">

     <input type="text" id="username-input" placeholder="Enter HighSpell Username...">

     <button id="lookup-btn">Lookup</button>

  </div>

  <table class="combat-calc__table">

     <tbody id="stats-tbody"></tbody>

   <div class="combat-calc__results">

     <b>Combat Level:</b> <span id="combat-result">—</span>

     <div class="combat-calc__hints" id="level-hints" style="font-style: italic;">—</div>

</div>

(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 => `

          <span class="combat-calc__stat-label">

            <img src="${stat.icon}" alt="${stat.name} icon" width="20" height="20">

            <a href="/w/${stat.name}" title="${stat.name}">${stat.name}</a>

        <td style="width: 80px;">

          <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;

   function updateCombatLevel() {

      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);

      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();

       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;

      });

       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.textContent = 'Lookup';

    }

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

    tbody.addEventListener('input', updateCombatLevel);

    lookupBtn.addEventListener('click', lookupStats);

    usernameInput.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); lookupStats(); } });

})();