MediaWiki:ClassMasteryCalculator.js
From EQOA Sandstorm Wiki
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
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 || {};
var selectedMasteries = {};
var activeCmTab = "General";
var activeCmView = "detailed";
var showLockedCms = true;
var visibleMasteries = [];
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;">' +
'<label>Transformation Path</label>' +
'<select id="cm-path">' +
'<option value="">None</option>' +
'<option value="Werelion">Lionwere</option>' +
'<option value="Werebear">Bearwere</option>' +
'<option value="Werewolf">Wolfwere</option>' +
'<option value="Wererat">Ratwere</option>' +
'<option value="Weregator">Gatorwere</option>' +
'<option value="Vampire">Vampire</option>' +
'<option value="Were Hunter">Were-Hunter</option>' +
'</select>' +
'<button type="button" id="cm-reset" class="cm-reset-button">Reset</button>' +
'</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">1500</td>' +
'<td id="cm-spent">0</td>' +
'<td id="cm-remaining">1500</td>' +
'</tr>' +
'</table>' +
'<div class="character-builder-section-title" style="margin-top:18px;">Master Class Title</div>' +
'<div id="cm-master-class-panel" class="cm-master-class-panel">' +
'<span class="cm-master-class-label">None selected</span>' +
'</div>' +
'<div class="character-builder-section-title" style="margin-top:18px;">Stats / Spells Gained from CM</div>' +
'<div id="cm-unlocked-summary">' +
'No stats or spells gained yet.' +
'</div>' +
'<div class="character-builder-section-title" style="margin-top:18px;">Class Masteries</div>' +
'<div class="cm-tabs">' +
'<button type="button" class="cm-tab-button cm-tab-active" data-tab="General">General</button>' +
'<button type="button" class="cm-tab-button" data-tab="Racial">Racial</button>' +
'<button type="button" class="cm-tab-button" data-tab="Archetype">Archetype</button>' +
'<button type="button" class="cm-tab-button" data-tab="Class">Class</button>' +
'</div>' +
'<div class="cm-search-tools">' +
'<div class="cm-search-row">' +
'<input type="search" id="cm-search" class="cm-search-input" placeholder="Search mastery, stat, spell, requirement...">' +
'<button type="button" id="cm-clear-search" class="cm-clear-search-button" title="Clear search">Clear</button>' +
'</div>' +
'<label class="cm-lock-toggle">' +
'<input type="checkbox" id="cm-show-locked" checked>' +
'<span>Show locked</span>' +
'</label>' +
'</div>' +
'<div class="cm-view-toggle">' +
'<button type="button" class="cm-view-button cm-view-active" data-view="detailed">Detailed</button>' +
'<button type="button" class="cm-view-button" data-view="compact">Compact</button>' +
'</div>' +
'<div class="cm-main-layout">' +
'<div class="cm-purchased-panel">' +
'<div class="cm-panel-title">CM Purchased</div>' +
'<div id="cm-purchased-list">None purchased.</div>' +
'</div>' +
'<div id="cm-mastery-panel" class="character-builder-warning-box">' +
'Select a race and class to begin.' +
'</div>' +
'</div>' +
'<div id="cm-tooltip" class="cm-tooltip" style="display:none;"></div>' +
'</div>';
var raceSelect = document.getElementById('cm-race');
var classSelect = document.getElementById('cm-class');
var levelInput = document.getElementById('cm-level');
var pathSelect = document.getElementById('cm-path');
var resetButton = document.getElementById('cm-reset');
var searchInput = document.getElementById('cm-search');
var clearSearchButton = document.getElementById('cm-clear-search');
var showLockedInput = document.getElementById('cm-show-locked');
var viewButtons = document.querySelectorAll('.cm-view-button');
var cmTooltip = document.getElementById('cm-tooltip');
function safeArray(value) {
return Object.prototype.toString.call(value) === '[object Array]' ? value : [];
}
function escapeHtml(value) {
return String(value == null ? '' : value)
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
function formatStatName(statName) {
var map = {
ac: 'AC',
hp: 'HP',
pow: 'Power',
str: 'STR',
sta: 'STA',
agi: 'AGI',
dex: 'DEX',
wis: 'WIS',
int: 'INT',
cha: 'CHA',
strMax: 'STR Max',
staMax: 'STA Max',
agiMax: 'AGI Max',
dexMax: 'DEX Max',
wisMax: 'WIS Max',
intMax: 'INT Max',
chaMax: 'CHA Max',
offMod: 'Offense Mod',
defMod: 'Defense Mod',
hasteMod: 'Haste Mod',
regenMod: 'Regen Mod',
powerRegenMod: 'Power Regen Mod',
healMod: 'Healing Mod',
spellMod: 'Spell Mod',
meleeMod: 'Melee Mod',
fireResist: 'Fire Resist',
coldResist: 'Cold Resist',
diseaseResist: 'Disease Resist',
poisonResist: 'Poison Resist',
magicResist: 'Magic Resist',
fireResistMax: 'Fire Resist Max',
coldResistMax: 'Cold Resist Max',
diseaseResistMax: 'Disease Resist Max',
poisonResistMax: 'Poison Resist Max',
magicResistMax: 'Magic Resist Max'
};
if (map[statName]) {
return map[statName];
}
return String(statName || '')
.replace(/([a-z])([A-Z])/g, '$1 $2')
.replace(/^./, function (letter) {
return letter.toUpperCase();
});
}
function addOption(select, value, label) {
var option = document.createElement('option');
option.value = value;
option.textContent = label;
select.appendChild(option);
}
function normalizePath(value) {
value = String(value || '').toLowerCase().replace(/[\s-]/g, '');
var map = {
lionwere: 'werelion',
werelion: 'werelion',
bearwere: 'werebear',
werebear: 'werebear',
wolfwere: 'werewolf',
werewolf: 'werewolf',
ratwere: 'wererat',
wererat: 'wererat',
gatorwere: 'weregator',
weregator: 'weregator',
vampire: 'vampire',
werehunter: 'werehunter',
hunterwere: 'werehunter',
werebeast: 'werebeast'
};
return map[value] || value;
}
function getBitePath(name) {
name = String(name || '').toLowerCase();
if (name.indexOf('lion bite') !== -1) return 'werelion';
if (name.indexOf('bear bite') !== -1) return 'werebear';
if (name.indexOf('wolf bite') !== -1) return 'werewolf';
if (name.indexOf('rat bite') !== -1) return 'wererat';
if (name.indexOf('gator bite') !== -1) return 'weregator';
return '';
}
function isSharedWereMastery(name) {
return name === 'Lycanthropic Resistances' ||
name === 'Lycanthropic Regeneration' ||
name === 'Combat Senses';
}
function isWerePath(path) {
return path === 'werelion' ||
path === 'werebear' ||
path === 'werewolf' ||
path === 'wererat' ||
path === 'weregator';
}
function isMasterClassTitle(cm) {
var name = String((cm && cm.name) || '');
return name === 'Berserker' ||
name === 'Chosen' ||
name === 'Deputy' ||
name === 'Doomseeker' ||
name === 'Immortal' ||
name === 'Juggernaut' ||
name === 'Mercenary' ||
name === 'Savage' ||
name === 'Scholar' ||
name === 'Tinker' ||
name === 'Arcane Were-Hunter' ||
name === 'Divine Were-Hunter' ||
name === 'Gypsy Were-Hunter' ||
name === 'Heroic Were-Hunter' ||
name === 'Metabolist' ||
name === 'Transmuter' ||
name === 'Gypsy' ||
name === 'Minstrel' ||
name === 'Exorcist' ||
name === 'Faithful' ||
name === 'Storm Caller' ||
name === 'Wilding' ||
name === 'Animator' ||
name === 'Spellbinder' ||
name === 'Aeromancer' ||
name === 'Geomancer' ||
name === 'Hydromancer' ||
name === 'Pyromancer' ||
name === 'Ninja' ||
name === 'Sensei' ||
name === 'Defiler' ||
name === 'Lich' ||
name === 'Crusader' ||
name === 'Guardian' ||
name === 'Forester' ||
name === 'Hunter' ||
name === 'Assassin' ||
name === 'Burglar' ||
name === 'Death Knight' ||
name === 'Slayer' ||
name === 'Elder' ||
name === 'Mystic' ||
name === 'Defender' ||
name === 'Hero' ||
name === 'Channeler' ||
name === 'Sorcerer' ||
name === 'Bravo' ||
name === 'Diviner' ||
name === 'Sage' ||
name === 'Soldier';
}
function getSelectedMasterClassTitle() {
var selectedTitle = '';
Object.keys(selectedMasteries).forEach(function (name) {
if (isMasterClassTitle(selectedMasteries[name])) {
selectedTitle = name;
}
});
return selectedTitle;
}
function getCmSearchText(cm) {
var parts = [];
var stats = cm && cm.stats ? cm.stats : {};
if (!cm) return '';
parts.push(cm.name || '');
parts.push(cm.description || '');
parts.push(cm.classification || '');
parts.push(cm.lycanthropy || '');
Object.keys(stats).forEach(function (statName) {
parts.push(statName);
parts.push(stats[statName]);
});
safeArray(cm.spellsAdded).forEach(function (spell) {
parts.push(spell);
});
safeArray(cm.spellsRemoved).forEach(function (spell) {
parts.push(spell);
});
safeArray(cm.requirements).forEach(function (req) {
parts.push(req);
});
return parts.join(' ').toLowerCase();
}
function getRequirementHtml(reqName) {
var owned = !!selectedMasteries[reqName];
var className = owned ? 'cm-req-owned' : 'cm-req-missing';
return '<span class="' + className + '">' + escapeHtml(reqName) + '</span>';
}
function getRequirementsHtml(cm) {
var reqs = safeArray(cm && cm.requirements);
if (!reqs.length) return '';
return reqs.map(function (reqName) {
return getRequirementHtml(reqName);
}).join(', ');
}
function getCmUnlockHint(cm) {
var spent = getSpentPoints();
var hints = [];
if (!cm) return '';
if (cm.level && cm.level > parseInt(levelInput.value, 10)) {
hints.push('Reach level ' + cm.level);
}
if (cm.cmSpentReq && spent < cm.cmSpentReq) {
hints.push('Spend ' + (cm.cmSpentReq - spent) + ' more CM');
}
safeArray(cm.requirements).forEach(function (reqName) {
if (!selectedMasteries[reqName]) {
hints.push('Requires ' + reqName);
}
});
return hints.join(' | ');
}
function updateMasterClassPanel() {
var panel = document.getElementById('cm-master-class-panel');
var selectedTitle = getSelectedMasterClassTitle();
if (!panel) return;
if (!selectedTitle) {
panel.innerHTML =
'<span class="cm-master-class-label">None selected</span>';
return;
}
panel.innerHTML =
'<span class="cm-master-class-label">' + escapeHtml(selectedTitle) + '</span>' +
'<button type="button" id="cm-remove-master-class" class="cm-mini-remove-button">Remove</button>';
document.getElementById('cm-remove-master-class').addEventListener('click', function () {
delete selectedMasteries[selectedTitle];
hideCmTooltip();
updateSummary();
});
}
function getCmType(cm) {
if (isMasterClassTitle(cm)) {
return 'Master Class';
}
return getCmDisplayTab(cm) || 'Other';
}
function getCmTypeClass(cm) {
var type = getCmType(cm);
if (type === 'General') return 'cm-type-general';
if (type === 'Racial') return 'cm-type-racial';
if (type === 'Archetype') return 'cm-type-archetype';
if (type === 'Class') return 'cm-type-class';
if (type === 'Master Class') return 'cm-type-master';
return 'cm-type-other';
}
function getCmDisplayTab(cm) {
var classification = String((cm && cm.classification) || '');
var races = safeArray(cm && cm.races);
var classes = safeArray(cm && cm.classes);
if (classification === 'Master Class') {
if (races.length && races[0] !== 'All') {
return 'Racial';
}
if (classes.length && classes[0] !== 'All') {
return 'Class';
}
}
return classification;
}
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 = safeArray((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 getSpentPoints() {
var total = 0;
Object.keys(selectedMasteries).forEach(function (name) {
if (selectedMasteries[name]) {
total += selectedMasteries[name].points || 0;
}
});
return total;
}
Array.prototype.forEach.call(viewButtons, function (button) {
button.addEventListener('click', function () {
activeCmView = button.getAttribute('data-view') || 'detailed';
Array.prototype.forEach.call(viewButtons, function (btn) {
btn.classList.remove('cm-view-active');
});
button.classList.add('cm-view-active');
renderMasteryList();
});
});
function updatePurchasedList() {
var list = document.getElementById('cm-purchased-list');
var purchasedRows = [];
var groups = {
'Master Class': [],
'General': [],
'Racial': [],
'Archetype': [],
'Class': [],
'Other': []
};
var groupOrder = [
'Master Class',
'General',
'Racial',
'Archetype',
'Class',
'Other'
];
var html = '';
if (!list) return;
Object.keys(selectedMasteries).forEach(function (name) {
var cm = selectedMasteries[name];
var groupName;
if (!cm) return;
if (isMasterClassTitle(cm)) {
groupName = 'Master Class';
} else {
groupName = getCmDisplayTab(cm);
if (!groups[groupName]) {
groupName = 'Other';
}
}
groups[groupName].push(cm);
});
groupOrder.forEach(function (groupName) {
groups[groupName].sort(function (a, b) {
return String(a.name || '').localeCompare(String(b.name || ''));
});
});
groupOrder.forEach(function (groupName) {
if (!groups[groupName].length) return;
html +=
'<div class="cm-purchased-group">' +
'<div class="cm-purchased-group-title">' + escapeHtml(groupName) + '</div>';
groups[groupName].forEach(function (cm) {
var index = purchasedRows.length;
purchasedRows.push(cm);
html +=
'<div class="cm-purchased-item" data-purchased-index="' + index + '">' +
'<span>' + escapeHtml(cm.name) + '</span>' +
'<span class="cm-purchased-cost">' + escapeHtml(cm.points) + '</span>' +
'</div>';
});
html += '</div>';
});
if (!html) {
list.innerHTML = 'None purchased.';
return;
}
list.innerHTML = html;
Array.prototype.forEach.call(
list.querySelectorAll('.cm-purchased-item'),
function (row) {
var index = parseInt(row.getAttribute('data-purchased-index'), 10);
var cm = purchasedRows[index];
row.addEventListener('mouseenter', function () {
showCmTooltip(cm, row);
});
row.addEventListener('mouseleave', hideCmTooltip);
row.addEventListener('click', function () {
if (!cm) return;
delete selectedMasteries[cm.name];
hideCmTooltip();
updateSummary();
});
}
);
}
function updateUnlockedSummary() {
var summary = document.getElementById('cm-unlocked-summary');
var statTotals = {};
var spellsAdded = {};
var spellsRemoved = {};
var hasStats = false;
if (!summary) return;
Object.keys(selectedMasteries).forEach(function (name) {
var cm = selectedMasteries[name];
var stats;
if (!cm) return;
stats = cm.stats || {};
Object.keys(stats).forEach(function (statName) {
var value = parseInt(stats[statName], 10);
if (!isNaN(value) && value !== 0) {
if (!statTotals[statName]) {
statTotals[statName] = 0;
}
statTotals[statName] += value;
hasStats = true;
}
});
safeArray(cm.spellsAdded).forEach(function (spell) {
if (spell) {
spellsAdded[spell] = true;
}
});
safeArray(cm.spellsRemoved).forEach(function (spell) {
if (spell) {
spellsRemoved[spell] = true;
}
});
});
var html = '';
html += '<div class="cm-unlocked-grid cm-unlocked-grid-three">';
html += '<div class="cm-unlocked-box">';
html += '<div class="cm-panel-title">Stats</div>';
if (!hasStats) {
html += '<div class="cm-empty-line">No stat changes yet.</div>';
} else {
Object.keys(statTotals).sort().forEach(function (statName) {
var value = statTotals[statName];
var sign = value > 0 ? '+' : '';
html +=
'<div class="cm-purchased-item cm-stat-row">' +
'<span>' + escapeHtml(formatStatName(statName)) + '</span>' +
'<span class="cm-purchased-cost">' + sign + escapeHtml(value) + '</span>' +
'</div>';
});
}
html += '</div>';
html += '<div class="cm-unlocked-box">';
html += '<div class="cm-panel-title">Spells Gained</div>';
if (!Object.keys(spellsAdded).length) {
html += '<div class="cm-empty-line">No spells gained yet.</div>';
} else {
Object.keys(spellsAdded).sort().forEach(function (spell) {
html +=
'<div class="cm-purchased-item cm-spell-row cm-spell-gained">' +
'<span>+ ' + escapeHtml(spell) + '</span>' +
'</div>';
});
}
html += '</div>';
html += '<div class="cm-unlocked-box">';
html += '<div class="cm-panel-title">Spells Removed</div>';
if (!Object.keys(spellsRemoved).length) {
html += '<div class="cm-empty-line">No spells removed yet.</div>';
} else {
Object.keys(spellsRemoved).sort().forEach(function (spell) {
html +=
'<div class="cm-purchased-item cm-spell-row cm-spell-removed">' +
'<span>- ' + escapeHtml(spell) + '</span>' +
'</div>';
});
}
html += '</div>';
html += '</div>';
summary.innerHTML = html;
}
function updateSummary() {
var available = getAvailablePoints();
var spent = getSpentPoints();
var remaining = available - spent;
document.getElementById('cm-available').textContent = available;
document.getElementById('cm-spent').textContent = spent;
document.getElementById('cm-remaining').textContent = remaining;
updatePurchasedList();
updateMasterClassPanel();
updateUnlockedSummary();
renderMasteryList();
}
function buildCmTooltipHtml(cm) {
var statLines = [];
if (!cm) return '';
Object.keys(cm.stats || {}).forEach(function (key) {
var value = cm.stats[key];
if (value) {
var sign = value > 0 ? '+' : '';
statLines.push(
'<div class="cm-tooltip-stat">' +
escapeHtml(formatStatName(key)) + ': ' + sign + escapeHtml(value) +
'</div>'
);
}
});
var spellAdds = safeArray(cm.spellsAdded).map(function (spell) {
return '<div class="cm-tooltip-spell-add">+ ' + escapeHtml(spell) + '</div>';
}).join('');
var spellRemoves = safeArray(cm.spellsRemoved).map(function (spell) {
return '<div class="cm-tooltip-spell-remove">- ' + escapeHtml(spell) + '</div>';
}).join('');
var reqHtml = '';
if (safeArray(cm.requirements).length) {
reqHtml =
'<div class="cm-tooltip-req">' +
'Requires: ' + getRequirementsHtml(cm) +
'</div>';
}
return (
'<div class="cm-tooltip-title">' + escapeHtml(cm.name) + '</div>' +
'<div class="cm-tooltip-desc">' + escapeHtml(cm.description) + '</div>' +
'<div class="cm-tooltip-meta">' +
'Level ' + escapeHtml(cm.level) +
' | Cost ' + escapeHtml(cm.points) +
(cm.cmSpentReq ? ' | CM Spent Req ' + escapeHtml(cm.cmSpentReq) : '') +
'</div>' +
reqHtml +
statLines.join('') +
spellAdds +
spellRemoves
);
}
function showCmTooltip(cm, card) {
if (!cmTooltip || !cm) return;
cmTooltip.innerHTML = buildCmTooltipHtml(cm);
cmTooltip.style.display = 'block';
var rect = card.getBoundingClientRect();
var tooltipWidth = 340;
var leftPos = rect.right + 12;
if (leftPos + tooltipWidth > window.innerWidth) {
leftPos = rect.left - tooltipWidth - 12;
}
cmTooltip.style.left = leftPos + 'px';
cmTooltip.style.top = Math.max(10, rect.top) + 'px';
}
function hideCmTooltip() {
if (cmTooltip) {
cmTooltip.style.display = 'none';
}
}
function renderMasteryList() {
var masteryPanel = document.getElementById('cm-mastery-panel');
if (!masteryPanel) return;
var selectedRace = raceSelect.value;
var selectedRaceCode = (data.raceCodes || {})[selectedRace];
var selectedClass = classSelect.value;
var selectedPath = pathSelect ? pathSelect.value : '';
var selectedPathNormalized = normalizePath(selectedPath);
var selectedIsWere = isWerePath(selectedPathNormalized);
var searchQuery = searchInput ? String(searchInput.value || '').toLowerCase() : '';
var seenMasteries = {};
var availableMasteries = [];
var lockedMasteries = [];
visibleMasteries = [];
safeArray(data.masteries).forEach(function (cm) {
var cmRaces = safeArray(cm.races);
var cmClasses = safeArray(cm.classes);
var reqs = safeArray(cm.requirements);
var cmName = String(cm.name || '');
var cmPath = normalizePath(cm.lycanthropy);
var bitePath = getBitePath(cmName);
var pathOk = false;
var raceOk =
!cmRaces.length ||
cmRaces.indexOf(selectedRaceCode) !== -1;
var classOk =
!cmClasses.length ||
cmClasses.indexOf(selectedClass) !== -1;
var tabOk = getCmDisplayTab(cm) === activeCmTab;
var searchOk =
!searchQuery ||
getCmSearchText(cm).indexOf(searchQuery) !== -1;
if (bitePath) {
pathOk = selectedPathNormalized === bitePath;
} else if (!cmPath) {
pathOk = true;
} else if (!selectedPathNormalized) {
pathOk = false;
} else if (selectedIsWere && isSharedWereMastery(cmName)) {
pathOk = cmPath === 'werebeast' || isWerePath(cmPath);
} else if (selectedIsWere && cmPath === 'werebeast') {
pathOk = true;
} else {
pathOk = cmPath === selectedPathNormalized;
}
if (
!raceOk ||
!classOk ||
!tabOk ||
!pathOk ||
!searchOk ||
selectedMasteries[cmName] ||
seenMasteries[cmName]
) {
return;
}
seenMasteries[cmName] = true;
var unlockHint = getCmUnlockHint(cm);
if (unlockHint) {
lockedMasteries.push({
cm: cm,
locked: true,
unlockHint: unlockHint
});
} else {
availableMasteries.push({
cm: cm,
locked: false,
unlockHint: ''
});
}
});
if (showLockedCms) {
visibleMasteries = availableMasteries.concat(lockedMasteries);
} else {
visibleMasteries = availableMasteries;
}
if (!visibleMasteries.length) {
masteryPanel.innerHTML = 'No Class Masteries found for this selection.';
return;
}
masteryPanel.innerHTML = visibleMasteries.map(function (entry, index) {
var cm = entry.cm;
var lockedClass = entry.locked ? ' cm-card-locked' : '';
var typeClass = getCmTypeClass(cm);
var cmType = getCmType(cm);
var requirementsHtml = getRequirementsHtml(cm);
var metaHtml =
'<div class="cm-card-meta">' +
'Level: ' + escapeHtml(cm.level) +
' | Cost: ' + escapeHtml(cm.points) +
(cm.cmSpentReq ? ' | CM Spent Req: ' + escapeHtml(cm.cmSpentReq) : '') +
'</div>';
if (activeCmView === 'compact') {
return (
'<div class="cm-card cm-purchasable-card cm-card-compact ' + typeClass + lockedClass + '" data-cm-index="' + index + '">' +
'<div class="cm-card-compact-row">' +
'<div class="cm-card-title">' + escapeHtml(cm.name) + '</div>' +
'<div class="cm-card-type-tag">' + escapeHtml(cmType) + '</div>' +
metaHtml +
'</div>' +
(entry.unlockHint ? '<div class="cm-unlock-hint">' + escapeHtml(entry.unlockHint) + '</div>' : '') +
'</div>'
);
}
return (
'<div class="cm-card cm-purchasable-card ' + typeClass + lockedClass + '" data-cm-index="' + index + '">' +
'<div class="cm-card-title">' + escapeHtml(cm.name) + '</div>' +
'<div class="cm-card-type-tag">' + escapeHtml(cmType) + '</div>' +
'<div class="cm-card-desc">' + escapeHtml(cm.description) + '</div>' +
metaHtml +
(requirementsHtml ? '<div class="cm-card-req">Requires: ' + requirementsHtml + '</div>' : '') +
(entry.unlockHint ? '<div class="cm-unlock-hint">' + escapeHtml(entry.unlockHint) + '</div>' : '') +
'</div>'
);
}).join('');
Array.prototype.forEach.call(
masteryPanel.querySelectorAll('.cm-purchasable-card'),
function (card) {
var cmIndex = parseInt(card.getAttribute('data-cm-index'), 10);
var entry = visibleMasteries[cmIndex];
var cm = entry ? entry.cm : null;
card.addEventListener('mouseenter', function () {
showCmTooltip(cm, card);
});
card.addEventListener('mouseleave', hideCmTooltip);
card.addEventListener('click', function () {
var available;
var spent;
var selectedMasterClassTitle;
if (!cm || !entry) return;
if (entry.locked) {
alert(entry.unlockHint);
return;
}
available = getAvailablePoints();
spent = getSpentPoints();
if (spent + cm.points > available) {
alert('Not enough CM points.');
return;
}
if (isMasterClassTitle(cm)) {
selectedMasterClassTitle = getSelectedMasterClassTitle();
if (selectedMasterClassTitle && selectedMasterClassTitle !== cm.name) {
alert('You can only select one Master Class Title per character build. Remove ' + selectedMasterClassTitle + ' first.');
return;
}
}
selectedMasteries[cm.name] = cm;
hideCmTooltip();
updateSummary();
});
}
);
}
raceSelect.addEventListener('change', loadClasses);
classSelect.addEventListener('change', updateSummary);
levelInput.addEventListener('input', updateSummary);
if (searchInput) {
searchInput.addEventListener('input', renderMasteryList);
}
if (clearSearchButton && searchInput) {
clearSearchButton.addEventListener('click', function () {
searchInput.value = '';
renderMasteryList();
searchInput.focus();
});
}
if (showLockedInput) {
showLockedInput.addEventListener('change', function () {
showLockedCms = showLockedInput.checked;
renderMasteryList();
});
}
if (pathSelect) {
pathSelect.addEventListener('change', updateSummary);
}
Array.prototype.forEach.call(
document.querySelectorAll('.cm-tab-button'),
function (button) {
button.addEventListener('click', function () {
activeCmTab = button.getAttribute('data-tab');
Array.prototype.forEach.call(
document.querySelectorAll('.cm-tab-button'),
function (btn) {
btn.classList.remove('cm-tab-active');
}
);
button.classList.add('cm-tab-active');
updateSummary();
});
}
);
if (resetButton) {
resetButton.addEventListener('click', function () {
selectedMasteries = {};
activeCmTab = 'General';
activeCmView = 'detailed';
showLockedCms = true;
levelInput.value = 60;
if (pathSelect) {
pathSelect.value = '';
}
Array.prototype.forEach.call(
document.querySelectorAll('.cm-tab-button'),
function (btn) {
btn.classList.remove('cm-tab-active');
}
);
var generalTab = document.querySelector('.cm-tab-button[data-tab="General"]');
if (generalTab) {
generalTab.classList.add('cm-tab-active');
}
Array.prototype.forEach.call(viewButtons, function (btn) {
btn.classList.remove('cm-view-active');
});
var detailedView = document.querySelector('.cm-view-button[data-view="detailed"]');
if (detailedView) {
detailedView.classList.add('cm-view-active');
}
if (searchInput) {
searchInput.value = '';
}
if (showLockedInput) {
showLockedInput.checked = true;
}
hideCmTooltip();
updateSummary();
});
}
loadRaces();
}
});
