Widget:Calculator/Combat/Level: Difference between revisions

(11 intermediate revisions by 2 users not shown)

Line 1:

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

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

</div>

</table>

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

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

<tr>

<td>

</span>

</td>

</td>

</tr>

`).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 = `

<div>To reach level ${nextLevel}, gain one of:</div>

<ul>

<li><b>+${neededPrimary}</b> ${icon('Hitpoints')} Hitpoints</li>

<li><b>+${neededPrimary}</b> ${icon('Accuracy')} Accuracy, ${icon('Strength')} Strength, or ${icon('Defense')} Defense</li>

<li><b>+${neededSecondary}</b> ${icon('Magic')} Magic or ${icon('Range')} Range</li>

</ul>`;

}

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>

@@ Line 1: / Line 1: @@
+<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>
+<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>
+  </table>
+  <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>
+</div>
+<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 => `
+      <tr>
+        <td>
+          <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>
+          </span>
+        </td>
+        <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}">
+        </td>
+      </tr>
+    `).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 = `
+      <div>To reach level ${nextLevel}, gain one of:</div>
+      <ul>
+        <li><b>+${neededPrimary}</b> ${icon('Hitpoints')} Hitpoints</li>
+        <li><b>+${neededPrimary}</b> ${icon('Accuracy')} Accuracy, ${icon('Strength')} Strength, or ${icon('Defense')} Defense</li>
+        <li><b>+${neededSecondary}</b> ${icon('Magic')} Magic or ${icon('Range')} Range</li>
+      </ul>`;
+  }
+  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>