HighSpell Wiki

Widget:Calculator/Combat/Level: Difference between revisions

← Older editNewer edit →
No edit summary
No edit summary
Line 8: Line 8:


#level-hints li {
#level-hints li {
   margin: 2px 0;
   margin: 4px 0;
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   gap: 6px;
   gap: 6px;
}
}




Line 77: Line 78:
     HighSpell Username:
     HighSpell Username:
     <input type="text" id="username" placeholder="Enter player name" />
     <input type="text" id="username" placeholder="Enter player name" />
     <button type="button" onclick="lookupStats()">Lookup</button>
     <button id="lookup-button" type="button" onclick="lookupStats()">Lookup</button>
   </label>
   </label>
</form>
</form>
Line 114: Line 115:
   document.getElementById("stat-range").value = rng;
   document.getElementById("stat-range").value = rng;


   const base = hp + acc + str + def + mag / 4 + rng / 4;
   const base = hp + acc + str + def + (mag / 4) + (rng / 4);
   const combat = base / 3.75;
   const combat = base / 3.75;
   document.getElementById("combat-result").textContent = combat.toFixed(2);
   document.getElementById("combat-result").textContent = combat.toFixed(2);
Line 135: Line 136:
   const neededRng = neededMag;
   const neededRng = neededMag;


   const hints = [
   const meleeIcons = [
    `+${neededHP} <span typeof="mw:File"><a href="/w/Hitpoints" title="Hitpoints"><img src="/w/images/thumb/9/96/Hitpoints_icon.png/20px-Hitpoints_icon.png" decoding="async" width="20" height="20" class="mw-file-element" srcset="/w/images/9/96/Hitpoints_icon.png 1.5x" loading="lazy"></a></span>`,
  `<span typeof="mw:File"><a href="/w/Accuracy" title="Accuracy"><img src="/w/images/thumb/d/df/Accuracy_icon.png/20px-Accuracy_icon.png" decoding="async" width="20" height="20" loading="lazy" /></a></span>`,
    `+${neededAcc} <span typeof="mw:File"><a href="/w/Accuracy" title="Accuracy"><img src="/w/images/thumb/d/df/Accuracy_icon.png/20px-Accuracy_icon.png" decoding="async" width="20" height="20" class="mw-file-element" srcset="/w/images/d/df/Accuracy_icon.png 1.5x" loading="lazy"></a></span>`,
  `<span typeof="mw:File"><a href="/w/Strength" title="Strength"><img src="/w/images/thumb/1/1b/Strength_icon.png/20px-Strength_icon.png" decoding="async" width="20" height="20" loading="lazy" /></a></span>`,
    `+${neededStr} <span typeof="mw:File"><a href="/w/Strength" title="Strength"><img src="/w/images/thumb/1/1b/Strength_icon.png/20px-Strength_icon.png" decoding="async" width="20" height="20" class="mw-file-element" srcset="/w/images/1/1b/Strength_icon.png 1.5x" loading="lazy"></a></span>`,
  `<span typeof="mw:File"><a href="/w/Defense" title="Defense"><img src="/w/images/thumb/e/e5/Defense_icon.png/20px-Defense_icon.png" decoding="async" width="20" height="20" loading="lazy" /></a></span>`
    `+${neededDef} <span typeof="mw:File"><a href="/w/Defense" title="Defense"><img src="/w/images/thumb/e/e5/Defense_icon.png/20px-Defense_icon.png" decoding="async" width="20" height="20" class="mw-file-element" srcset="/w/images/e/e5/Defense_icon.png 1.5x" loading="lazy"></a></span>`,
];
    `+${neededMag} <span typeof="mw:File"><a href="/w/Magic" title="Magic"><img src="/w/images/thumb/5/5c/Magic_icon.png/20px-Magic_icon.png" decoding="async" width="20" height="20" class="mw-file-element" srcset="/w/images/5/5c/Magic_icon.png 1.5x" loading="lazy"></a></span>`,
 
    `+${neededRng} <span typeof="mw:File"><a href="/w/Range" title="Range"><img src="/w/images/thumb/1/13/Range_icon.png/20px-Range_icon.png" decoding="async" width="20" height="20" class="mw-file-element" srcset="/w/images/1/13/Range_icon.png 1.5x" loading="lazy"></a></span>`
const mageRangedIcons = [
   ];
  `<span typeof="mw:File"><a href="/w/Magic" title="Magic"><img src="/w/images/thumb/5/5c/Magic_icon.png/20px-Magic_icon.png" decoding="async" width="20" height="20" loading="lazy" /></a></span>`,
  `<span typeof="mw:File"><a href="/w/Range" title="Range"><img src="/w/images/thumb/1/13/Range_icon.png/20px-Range_icon.png" decoding="async" width="20" height="20" loading="lazy" /></a></span>`
];
 
// Join with commas and "or"
const meleeGroup = meleeIcons.slice(0, 2).join(", ") + ", or " + meleeIcons[2];
const mageRangedGroup = mageRangedIcons[0] + " <span style=\"margin-right: 2px;\">or</span> " + mageRangedIcons[1];
 
const hints = [
  `+${neededHP} <span typeof="mw:File"><a href="/w/Hitpoints" title="Hitpoints"><img src="/w/images/thumb/9/96/Hitpoints_icon.png/20px-Hitpoints_icon.png" decoding="async" width="20" height="20" loading="lazy" /></a></span>, ${meleeGroup}`,
   `+${neededMag} ${mageRangedGroup}`
];
 
document.getElementById("level-hints").innerHTML =
  `<div>To reach level ${nextLevel}, you would need one of the following:</div><ul>${hints.map(h => `<li>${h}</li>`).join("")}</ul>`;


  //document.getElementById("level-hints").innerHTML = `To reach level ${nextLevel}: ${hints.join(" or ")}`;
  document.getElementById("level-hints").innerHTML = `<div>To reach level ${nextLevel}, you would need one of the following:</div><ul><li>${hints.join("</li><li>")}</li></ul>`;
}
}


Line 164: Line 177:
function lookupStats() {
function lookupStats() {
   const username = document.getElementById("username").value.trim();
   const username = document.getElementById("username").value.trim();
  const button = document.getElementById("lookup-button");
   if (!username) {
   if (!username) {
     alert("Please enter a username.");
     alert("Please enter a username.");
     return;
     return;
   }
   }
  // Update button to show loading state
  button.disabled = true;
  button.textContent = "Searching...";


   fetch(`https://highspell.com/hiscores/player/${encodeURIComponent(username)}`)
   fetch(`https://highspell.com/hiscores/player/${encodeURIComponent(username)}`)
Line 189: Line 208:
       alert("Lookup failed. Please check the username or try again later.");
       alert("Lookup failed. Please check the username or try again later.");
       console.error(err);
       console.error(err);
    })
    .finally(() => {
      button.disabled = false;
      button.textContent = "Lookup";
     });
     });
}
}


document.querySelectorAll('#combat-form input').forEach(input => {
document.querySelectorAll('#combat-form input').forEach(input => {
Retrieved from "https://highspell.wiki/w/Widget:Calculator/Combat/Level"