MediaWiki:ClassMasteryCalculator.js: Difference between revisions

From EQOA Sandstorm Wiki
Jump to navigationJump to search
No edit summary
No edit summary
Line 245: Line 245:
                 name === 'Bravo' ||
                 name === 'Bravo' ||
                 name === 'Diviner' ||
                 name === 'Diviner' ||
                 name === 'Sage' ||
                 name === 'Sage' ||
                 name === 'Soldier';
                 name === 'Soldier';
Line 293: Line 294:
     return parts.join(' ').toLowerCase();
     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(', ');
}




Line 679: Line 700:


             if (safeArray(cm.requirements).length) {
             if (safeArray(cm.requirements).length) {
                reqHtml =
    reqHtml =
                    '<div class="cm-tooltip-req">' +
        '<div class="cm-tooltip-req">' +
                        'Requires: ' + escapeHtml(safeArray(cm.requirements).join(', ')) +
            'Requires: ' + getRequirementsHtml(cm) +
                    '</div>';
        '</div>';
            }
}
 


             return (
             return (
Line 815: Line 837:


     if (!visibleMasteries.length) {
     if (!visibleMasteries.length) {
         masteryPanel.innerHTML = 'No Class Masteries found for this selection.';
         masteryPanel.innerHTML = 'No Class Masteries found for this selection.';
         return;
         return;
Line 820: Line 843:


     masteryPanel.innerHTML = visibleMasteries.map(function (entry, index) {
     masteryPanel.innerHTML = visibleMasteries.map(function (entry, index) {
        var cm = entry.cm;
    var cm = entry.cm;
        var lockedClass = entry.locked ? ' cm-card-locked' : '';
    var lockedClass = entry.locked ? ' cm-card-locked' : '';
    var requirementsHtml = getRequirementsHtml(cm);
 
    return (


        return (
             '<div class="cm-card cm-purchasable-card' + lockedClass + '" data-cm-index="' + index + '">' +
             '<div class="cm-card cm-purchasable-card' + lockedClass + '" data-cm-index="' + index + '">' +
                 '<div class="cm-card-title">' + escapeHtml(cm.name) + '</div>' +
                 '<div class="cm-card-title">' + escapeHtml(cm.name) + '</div>' +
Line 832: Line 857:
                     (cm.cmSpentReq ? ' | CM Spent Req: ' + escapeHtml(cm.cmSpentReq) : '') +
                     (cm.cmSpentReq ? ' | CM Spent Req: ' + escapeHtml(cm.cmSpentReq) : '') +
                 '</div>' +
                 '</div>' +
(requirementsHtml ? '<div class="cm-card-req">Requires: ' + requirementsHtml + '</div>' : '') +
                 (entry.unlockHint ? '<div class="cm-unlock-hint">' + escapeHtml(entry.unlockHint) + '</div>' : '') +
                 (entry.unlockHint ? '<div class="cm-unlock-hint">' + escapeHtml(entry.unlockHint) + '</div>' : '') +
             '</div>'
             '</div>'

Revision as of 21:48, 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 || {};
        var selectedMasteries = {};
        var activeCmTab = "General";
        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-row">' +
    '<input type="search" id="cm-search" class="cm-search-input" placeholder="Search mastery, stat, spell, requirement...">' +
'</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 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, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }

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

        


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(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(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: ''
            });
        }
    });

    visibleMasteries = availableMasteries.concat(lockedMasteries);

    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 requirementsHtml = getRequirementsHtml(cm);

    return (

            '<div class="cm-card cm-purchasable-card' + lockedClass + '" data-cm-index="' + index + '">' +
                '<div class="cm-card-title">' + escapeHtml(cm.name) + '</div>' +
                '<div class="cm-card-desc">' + escapeHtml(cm.description) + '</div>' +
                '<div class="cm-card-meta">' +
                    'Level: ' + escapeHtml(cm.level) +
                    ' | Cost: ' + escapeHtml(cm.points) +
                    (cm.cmSpentReq ? ' | CM Spent Req: ' + escapeHtml(cm.cmSpentReq) : '') +
                '</div>' +
(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 (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';

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

                hideCmTooltip();
                updateSummary();
            });
        }

        loadRaces();
    }

});