MediaWiki:ClassMasteryCalculator.js: Difference between revisions
From EQOA Sandstorm Wiki
Jump to navigationJump to search
RenodorDev (talk | contribs) (Created page with "mw.hook('wikipage.content').add(function () { function waitForCMData(attemptsLeft) { if (window.EQOA_CM_DATA) { initClassMasteryCalculator(); return; } if (attemptsLeft <= 0) { var app = document.getElementById('cm-calculator-app'); if (app) { app.innerHTML = '<div style="color:red;">EQOA_CM_DATA failed to load.</div>'; } return; } setTim...") |
RenodorDev (talk | contribs) No edit summary |
||
| Line 39: | Line 39: | ||
<select id="cm-class"></select> | <select id="cm-class"></select> | ||
<label> | <label>Character Level</label> | ||
<input type="number" id="cm-level" min="1" max="60" value="60" style="width:70px;"> | |||
</div> | </div> | ||
| Line 67: | Line 67: | ||
var raceSelect = document.getElementById('cm-race'); | var raceSelect = document.getElementById('cm-race'); | ||
var classSelect = document.getElementById('cm-class'); | var classSelect = document.getElementById('cm-class'); | ||
var | var levelInput = document.getElementById('cm-level'); | ||
function addOption(select, value, label) { | function addOption(select, value, label) { | ||
| Line 78: | Line 78: | ||
function loadRaces() { | function loadRaces() { | ||
raceSelect.innerHTML = ''; | raceSelect.innerHTML = ''; | ||
Object.keys(data.raceClasses).forEach(function (race) { | Object.keys(data.raceClasses).forEach(function (race) { | ||
| Line 105: | Line 104: | ||
function getAvailablePoints() { | function getAvailablePoints() { | ||
var level = parseInt(levelInput.value, 10); | |||
if (isNaN(level) || level < 1) level = 1; | |||
if (level > 60) level = 60; | |||
levelInput.value = level; | |||
return level * 25; | |||
} | |||
function updateSummary() { | function updateSummary() { | ||
| Line 135: | Line 135: | ||
raceSelect.addEventListener('change', loadClasses); | raceSelect.addEventListener('change', loadClasses); | ||
classSelect.addEventListener('change', updateSummary); | classSelect.addEventListener('change', updateSummary); | ||
levelInput.addEventListener('input', updateSummary); | |||
loadRaces(); | loadRaces(); | ||
Revision as of 17:52, 14 May 2026
mw.hook('wikipage.content').add(function () {
function waitForCMData(attemptsLeft) {
if (window.EQOA_CM_DATA) {
initClassMasteryCalculator();
return;
}
if (attemptsLeft <= 0) {
var app = document.getElementById('cm-calculator-app');
if (app) {
app.innerHTML = '<div style="color:red;">EQOA_CM_DATA failed to load.</div>';
}
return;
}
setTimeout(function () {
waitForCMData(attemptsLeft - 1);
}, 100);
}
waitForCMData(30);
function initClassMasteryCalculator() {
var app = document.getElementById('cm-calculator-app');
if (!app) return;
var data = window.EQOA_CM_DATA;
app.innerHTML = `
<div class="cm-calculator-box">
<div class="character-builder-title">Class Mastery Calculator</div>
<div class="character-builder-controls">
<label>Race</label>
<select id="cm-race"></select>
<label>Class</label>
<select id="cm-class"></select>
<label>Character Level</label>
<input type="number" id="cm-level" min="1" max="60" value="60" style="width:70px;">
</div>
<div class="character-builder-section-title" style="margin-top:15px;">Point Summary</div>
<table class="character-builder-stat-table">
<tr>
<th>Available</th>
<th>Spent</th>
<th>Remaining</th>
</tr>
<tr>
<td id="cm-available">60</td>
<td id="cm-spent">0</td>
<td id="cm-remaining">60</td>
</tr>
</table>
<div class="character-builder-section-title" style="margin-top:18px;">Class Masteries</div>
<div id="cm-mastery-panel" class="character-builder-warning-box">
Select a race and class to begin.
</div>
</div>
`;
var raceSelect = document.getElementById('cm-race');
var classSelect = document.getElementById('cm-class');
var levelInput = document.getElementById('cm-level');
function addOption(select, value, label) {
var option = document.createElement('option');
option.value = value;
option.textContent = label;
select.appendChild(option);
}
function loadRaces() {
raceSelect.innerHTML = '';
Object.keys(data.raceClasses).forEach(function (race) {
addOption(raceSelect, race, race);
});
loadClasses();
}
function loadClasses() {
classSelect.innerHTML = '';
var race = raceSelect.value;
var classList = data.raceClasses[race] || [];
classList.forEach(function (classCode) {
addOption(
classSelect,
classCode,
classCode + ' - ' + (data.classes[classCode] || classCode)
);
});
updateSummary();
}
function getAvailablePoints() {
var level = parseInt(levelInput.value, 10);
if (isNaN(level) || level < 1) level = 1;
if (level > 60) level = 60;
levelInput.value = level;
return level * 25;
}
function updateSummary() {
var available = getAvailablePoints();
var spent = 0;
var remaining = available - spent;
document.getElementById('cm-available').textContent = available;
document.getElementById('cm-spent').textContent = spent;
document.getElementById('cm-remaining').textContent = remaining;
var masteryPanel = document.getElementById('cm-mastery-panel');
masteryPanel.innerHTML =
'<b>Selected:</b> ' +
raceSelect.value +
' ' +
classSelect.value +
'<br><br>Mastery trees will go here.';
}
raceSelect.addEventListener('change', loadClasses);
classSelect.addEventListener('change', updateSummary);
levelInput.addEventListener('input', updateSummary);
loadRaces();
}
});