MediaWiki:ClassMasteryCalculator.js: Difference between revisions

From EQOA Sandstorm Wiki
Jump to navigationJump to search
No edit summary
No edit summary
Line 29: Line 29:
         var selectedMasteries = {};
         var selectedMasteries = {};
         var activeCmTab = "General";
         var activeCmTab = "General";
var activeCmView = "detailed";
        var activeCmView = "detailed";
var showLockedCms = true;
        var showLockedCms = true;
var visibleMasteries = [];
        var visibleMasteries = [];
 
 


         app.innerHTML =
         app.innerHTML =
Line 79: Line 77:
                 '</table>' +
                 '</table>' +


'<div class="character-builder-section-title" style="margin-top:18px;">Master Class Title</div>' +
                '<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">' +
                '<div id="cm-master-class-panel" class="cm-master-class-panel">' +
    '<span class="cm-master-class-label">None selected</span>' +
                    '<span class="cm-master-class-label">None selected</span>' +
'</div>' +
                '</div>' +
 
'<div class="cm-build-actions">' +
    '<button type="button" id="cm-share-url" class="cm-action-button">Generate Share URL</button>' +
    '<button type="button" id="cm-export-card" class="cm-action-button">Export Build Card</button>' +
'</div>' +
 
'<div id="cm-build-card-panel" class="cm-build-card-panel" style="display:none;"></div>' +


                '<div class="cm-build-actions">' +
                    '<button type="button" id="cm-share-url" class="cm-action-button">Generate Share URL</button>' +
                    '<button type="button" id="cm-export-card" class="cm-action-button">Export Build Card</button>' +
                '</div>' +


'<div class="character-builder-section-title" style="margin-top:18px;">Stats / Spells Gained from CM</div>' +
                '<div id="cm-build-card-panel" class="cm-build-card-panel" style="display:none;"></div>' +


                '<div class="character-builder-section-title" style="margin-top:18px;">Stats / Spells Gained from CM</div>' +


                 '<div id="cm-unlocked-summary">' +
                 '<div id="cm-unlocked-summary">' +
Line 103: Line 99:


                 '<div class="cm-tabs">' +
                 '<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 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="Racial">Racial</button>' +
    '<button type="button" class="cm-tab-button" data-tab="Archetype">Archetype</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>' +
                    '<button type="button" class="cm-tab-button" data-tab="Class">Class</button>' +
'</div>' +
                '</div>' +


'<div class="cm-search-tools">' +
                '<div class="cm-search-tools">' +
    '<div class="cm-search-row">' +
                    '<div class="cm-search-row">' +
        '<input type="search" id="cm-search" class="cm-search-input" placeholder="Search mastery, stat, spell, requirement...">' +
                        '<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>' +
                        '<button type="button" id="cm-clear-search" class="cm-clear-search-button" title="Clear search">Clear</button>' +
    '</div>' +
                    '</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>' +


                    '<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-main-layout">' +
Line 148: Line 141:
         var pathSelect = document.getElementById('cm-path');
         var pathSelect = document.getElementById('cm-path');
         var resetButton = document.getElementById('cm-reset');
         var resetButton = document.getElementById('cm-reset');
var searchInput = document.getElementById('cm-search');
        var searchInput = document.getElementById('cm-search');
var clearSearchButton = document.getElementById('cm-clear-search');
        var clearSearchButton = document.getElementById('cm-clear-search');
var showLockedInput = document.getElementById('cm-show-locked');
        var showLockedInput = document.getElementById('cm-show-locked');
var viewButtons = document.querySelectorAll('.cm-view-button');
        var viewButtons = document.querySelectorAll('.cm-view-button');
var cmTooltip = document.getElementById('cm-tooltip');
        var cmTooltip = document.getElementById('cm-tooltip');
var shareUrlButton = document.getElementById('cm-share-url');
        var shareUrlButton = document.getElementById('cm-share-url');
var exportCardButton = document.getElementById('cm-export-card');
        var exportCardButton = document.getElementById('cm-export-card');
var buildCardPanel = document.getElementById('cm-build-card-panel');
        var buildCardPanel = document.getElementById('cm-build-card-panel');
 
 
 
function getCompressedMasteryNames(names) {
    var groups = {};
    var singles = [];
 
    names.forEach(function (name) {
        var base = getCmChainBase(name);
        var number = getCmChainNumber(name);
 
        if (number === null) {
            singles.push(name);
            return;
        }
 
        if (!groups[base]) {
            groups[base] = [];
        }
 
        groups[base].push(number);
    });
 
    Object.keys(groups).forEach(function (base) {
        groups[base].sort(function (a, b) {
            return a - b;
        });
 
        if (groups[base].length === 1) {
            singles.push(base + ' ' + groups[base][0]);
        } else {
            singles.push(base + ' ' + groups[base].join(' > '));
        }
    });
 
    return singles.sort();
}
 
 


         function safeArray(value) {
         function safeArray(value) {
Line 209: Line 163:
         }
         }


        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')
function formatStatName(statName) {
                .replace(/^./, function (letter) {
    var map = {
                    return letter.toUpperCase();
        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) {
         function addOption(select, value, label) {
Line 394: Line 336:
         }
         }


        function getCmStatMinRequirements(cm) {
            var reqs = [];
            var sources = [
                cm && cm.statMins,
                cm && cm.statMinimums,
                cm && cm.statRequirements,
                cm && cm.statReqs,
                cm && cm.minStats
            ];


            sources.forEach(function (source) {
                if (!source) return;


function getCmSearchText(cm) {
                Object.keys(source).forEach(function (statName) {
    var parts = [];
                    var value = parseInt(source[statName], 10);
    var stats = cm && cm.stats ? cm.stats : {};


    if (!cm) return '';
                    if (!isNaN(value) && value > 0) {
                        reqs.push({
                            stat: statName,
                            value: value
                        });
                    }
                });
            });


    parts.push(cm.name || '');
            Object.keys(cm || {}).forEach(function (key) {
    parts.push(cm.description || '');
                var match = key.match(/^(.+?)(MinReq|ReqMin|Minimum|Min)$/);
    parts.push(cm.classification || '');
                var value;
    parts.push(cm.lycanthropy || '');


    Object.keys(stats).forEach(function (statName) {
                if (!match) return;
        parts.push(statName);
        parts.push(stats[statName]);
    });


    safeArray(cm.spellsAdded).forEach(function (spell) {
                value = parseInt(cm[key], 10);
        parts.push(spell);
    });


    safeArray(cm.spellsRemoved).forEach(function (spell) {
                if (!isNaN(value) && value > 0) {
        parts.push(spell);
                    reqs.push({
    });
                        stat: match[1],
                        value: value
                    });
                }
            });


    safeArray(cm.requirements).forEach(function (req) {
            return reqs;
         parts.push(req);
         }
    });


    return parts.join(' ').toLowerCase();
        function getStatMinRequirementsHtml(cm) {
}
            var reqs = getCmStatMinRequirements(cm);


            if (!reqs.length) return '';


            return reqs.map(function (req) {
                return '<span class="cm-stat-min-req">' +
                    escapeHtml(formatStatName(req.stat)) +
                    ' ' +
                    escapeHtml(req.value) +
                '</span>';
            }).join(', ');
        }


function getRequirementHtml(reqName) {
        function getCmSearchText(cm) {
    var owned = !!selectedMasteries[reqName];
            var parts = [];
    var className = owned ? 'cm-req-owned' : 'cm-req-missing';
            var stats = cm && cm.stats ? cm.stats : {};
            var statMinReqs;


    return '<span class="' + className + '">' + escapeHtml(reqName) + '</span>';
            if (!cm) return '';
}


function getRequirementsHtml(cm) {
            parts.push(cm.name || '');
    var reqs = safeArray(cm && cm.requirements);
            parts.push(cm.description || '');
            parts.push(cm.classification || '');
            parts.push(cm.lycanthropy || '');


    if (!reqs.length) return '';
            Object.keys(stats).forEach(function (statName) {
                parts.push(statName);
                parts.push(formatStatName(statName));
                parts.push(stats[statName]);
            });


    return reqs.map(function (reqName) {
        return getRequirementHtml(reqName);
    }).join(', ');
}


            statMinReqs = getCmStatMinRequirements(cm);
            statMinReqs.forEach(function (req) {
                parts.push(req.stat);
                parts.push(formatStatName(req.stat));
                parts.push(req.value);
            });


            safeArray(cm.spellsAdded).forEach(function (spell) {
                parts.push(spell);
            });


function getCmChainBase(name) {
            safeArray(cm.spellsRemoved).forEach(function (spell) {
    return String(name || '').replace(/\s+\d+$/, '');
                parts.push(spell);
}
            });


function getCmChainNumber(name) {
            safeArray(cm.requirements).forEach(function (req) {
    var match = String(name || '').match(/\s+(\d+)$/);
                parts.push(req);
            });


    return match ? parseInt(match[1], 10) : null;
            return parts.join(' ').toLowerCase();
}
        }
 
function getCmChain(cm) {
    var base;
    var currentNumber;
    var chain = [];


    if (!cm || !cm.name) return [];
        function getRequirementHtml(reqName) {
            var owned = !!selectedMasteries[reqName];
            var className = owned ? 'cm-req-owned' : 'cm-req-missing';


    base = getCmChainBase(cm.name);
            return '<span class="' + className + '">' + escapeHtml(reqName) + '</span>';
    currentNumber = getCmChainNumber(cm.name);
 
    if (currentNumber === null) return [];
 
    safeArray(data.masteries).forEach(function (item) {
        if (
            item &&
            getCmChainBase(item.name) === base &&
            getCmChainNumber(item.name) !== null
        ) {
            chain.push(item.name);
         }
         }
    });


    chain.sort(function (a, b) {
        function getRequirementsHtml(cm) {
        return getCmChainNumber(a) - getCmChainNumber(b);
            var reqs = safeArray(cm && cm.requirements);
    });


    return chain;
            if (!reqs.length) return '';
}


function getCmChainHtml(cm) {
            return reqs.map(function (reqName) {
    var chain = getCmChain(cm);
                return getRequirementHtml(reqName);
 
            }).join(', ');
    if (chain.length <= 1) return '';
 
    return chain.map(function (name) {
        var owned = !!selectedMasteries[name];
        var current = cm && cm.name === name;
        var className = 'cm-chain-step';
 
        if (owned) {
            className += ' cm-chain-owned';
         }
         }


         if (current) {
         function getCmChainBase(name) {
             className += ' cm-chain-current';
             return String(name || '').replace(/\s+\d+$/, '');
         }
         }


         return '<span class="' + className + '">' + escapeHtml(name) + '</span>';
         function getCmChainNumber(name) {
    }).join('<span class="cm-chain-arrow"> &gt; </span>');
            var match = String(name || '').match(/\s+(\d+)$/);
}


            return match ? parseInt(match[1], 10) : null;
        }


        function getCmChain(cm) {
            var base;
            var currentNumber;
            var chain = [];


            if (!cm || !cm.name) return [];


function getCmUnlockHint(cm) {
            base = getCmChainBase(cm.name);
    var spent = getSpentPoints();
            currentNumber = getCmChainNumber(cm.name);
    var hints = [];


    if (!cm) return '';
            if (currentNumber === null) return [];


    if (cm.level && cm.level > parseInt(levelInput.value, 10)) {
            safeArray(data.masteries).forEach(function (item) {
        hints.push('Reach level ' + cm.level);
                if (
    }
                    item &&
                    getCmChainBase(item.name) === base &&
                    getCmChainNumber(item.name) !== null
                ) {
                    chain.push(item.name);
                }
            });


    if (cm.cmSpentReq && spent < cm.cmSpentReq) {
            chain.sort(function (a, b) {
        hints.push('Spend ' + (cm.cmSpentReq - spent) + ' more CM');
                return getCmChainNumber(a) - getCmChainNumber(b);
    }
            });


    safeArray(cm.requirements).forEach(function (reqName) {
             return chain;
        if (!selectedMasteries[reqName]) {
             hints.push('Requires ' + reqName);
         }
         }
    });
getCmStatMinRequirements(cm).forEach(function (req) {
    hints.push('Requires ' + formatStatName(req.stat) + ' ' + req.value);
});


    return hints.join(' | ');
        function getCmChainHtml(cm) {
}
            var chain = getCmChain(cm);


            if (chain.length <= 1) return '';


            return chain.map(function (name) {
                var owned = !!selectedMasteries[name];
                var current = cm && cm.name === name;
                var className = 'cm-chain-step';


                if (owned) {
                    className += ' cm-chain-owned';
                }


                if (current) {
                    className += ' cm-chain-current';
                }


function updateMasterClassPanel() {
                return '<span class="' + className + '">' + escapeHtml(name) + '</span>';
    var panel = document.getElementById('cm-master-class-panel');
            }).join('<span class="cm-chain-arrow"> &gt; </span>');
    var selectedTitle = getSelectedMasterClassTitle();
        }


    if (!panel) return;
        function getCompressedMasteryNames(names) {
            var groups = {};
            var singles = [];


    if (!selectedTitle) {
            names.forEach(function (name) {
        panel.innerHTML =
                var base = getCmChainBase(name);
            '<span class="cm-master-class-label">None selected</span>';
                var number = getCmChainNumber(name);
        return;
    }


    panel.innerHTML =
                if (number === null) {
        '<span class="cm-master-class-label">' + escapeHtml(selectedTitle) + '</span>' +
                    singles.push(name);
        '<button type="button" id="cm-remove-master-class" class="cm-mini-remove-button">Remove</button>';
                    return;
                }


    document.getElementById('cm-remove-master-class').addEventListener('click', function () {
        delete selectedMasteries[selectedTitle];
        hideCmTooltip();
        updateSummary();
    });
}


                if (!groups[base]) {
                    groups[base] = [];
                }


                groups[base].push(number);
            });


function getCmType(cm) {
            Object.keys(groups).forEach(function (base) {
    if (isMasterClassTitle(cm)) {
                groups[base].sort(function (a, b) {
        return 'Master Class';
                    return a - b;
    }
                });


    return getCmDisplayTab(cm) || 'Other';
                if (groups[base].length === 1) {
}
                    singles.push(base + ' ' + groups[base][0]);
                } else {
                    singles.push(base + ' ' + groups[base].join(' > '));
                }
            });


function getCmTypeClass(cm) {
            return singles.sort();
    var type = getCmType(cm);
        }


    if (type === 'General') return 'cm-type-general';
        function getCmUnlockHint(cm) {
    if (type === 'Racial') return 'cm-type-racial';
            var spent = getSpentPoints();
    if (type === 'Archetype') return 'cm-type-archetype';
            var hints = [];
    if (type === 'Class') return 'cm-type-class';
    if (type === 'Master Class') return 'cm-type-master';


    return 'cm-type-other';
            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);
                }
            });


function findCmByName(name) {
            return hints.join(' | ');
    var found = null;
        }


    safeArray(data.masteries).forEach(function (cm) {
        function updateMasterClassPanel() {
        if (!found && cm && cm.name === name) {
            var panel = document.getElementById('cm-master-class-panel');
             found = cm;
             var selectedTitle = getSelectedMasterClassTitle();
        }
    });


    return found;
            if (!panel) return;
}


function getSelectedMasteryNames() {
            if (!selectedTitle) {
    return Object.keys(selectedMasteries).filter(function (name) {
                panel.innerHTML =
        return selectedMasteries[name];
                    '<span class="cm-master-class-label">None selected</span>';
    }).sort();
                return;
}
            }


function copyTextToClipboard(text, button) {
            panel.innerHTML =
    function showCopied() {
                '<span class="cm-master-class-label">' + escapeHtml(selectedTitle) + '</span>' +
        var oldText;
                '<button type="button" id="cm-remove-master-class" class="cm-mini-remove-button">Remove</button>';


        if (!button) {
            document.getElementById('cm-remove-master-class').addEventListener('click', function () {
            alert('Copied.');
                delete selectedMasteries[selectedTitle];
             return;
                hideCmTooltip();
                updateSummary();
             });
         }
         }


         oldText = button.textContent;
         function getCmDisplayTab(cm) {
        button.textContent = 'Copied';
            var classification = String((cm && cm.classification) || '');
            var races = safeArray(cm && cm.races);
            var classes = safeArray(cm && cm.classes);


        setTimeout(function () {
            if (classification === 'Master Class') {
            button.textContent = oldText;
                if (races.length && races[0] !== 'All') {
        }, 1200);
                    return 'Racial';
    }
                }
 
    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(text).then(showCopied, function () {
            alert(text);
        });
        return;
    }
 
    alert(text);
}
 
function getBuildTotals() {
    var statTotals = {};
    var spellsAdded = {};
    var spellsRemoved = {};
 
    Object.keys(selectedMasteries).forEach(function (name) {
        var cm = selectedMasteries[name];
        var stats;


        if (!cm) return;
                if (classes.length && classes[0] !== 'All') {
 
                     return 'Class';
        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;
             }
             }
        });


        safeArray(cm.spellsAdded).forEach(function (spell) {
             return classification;
             if (spell) spellsAdded[spell] = true;
         }
         });


         safeArray(cm.spellsRemoved).forEach(function (spell) {
         function getCmType(cm) {
             if (spell) spellsRemoved[spell] = true;
             if (isMasterClassTitle(cm)) {
        });
                return 'Master Class';
    });
            }


    return {
            return getCmDisplayTab(cm) || 'Other';
        stats: statTotals,
         }
        spellsAdded: spellsAdded,
         spellsRemoved: spellsRemoved
    };
}


function buildShareUrl() {
        function getCmTypeClass(cm) {
    var build = {
            var type = getCmType(cm);
        r: raceSelect.value,
        c: classSelect.value,
        l: levelInput.value,
        p: pathSelect ? pathSelect.value : '',
        cms: getSelectedMasteryNames()
    };


    return window.location.href.split('#')[0] +
            if (type === 'General') return 'cm-type-general';
        '#cm-build=' +
            if (type === 'Racial') return 'cm-type-racial';
        encodeURIComponent(JSON.stringify(build));
            if (type === 'Archetype') return 'cm-type-archetype';
}
            if (type === 'Class') return 'cm-type-class';
            if (type === 'Master Class') return 'cm-type-master';


function loadBuildFromUrl() {
            return 'cm-type-other';
    var hash = window.location.hash || '';
        }
    var raw;
    var build;


    if (hash.indexOf('#cm-build=') !== 0) return;
        function findCmByName(name) {
            var found = null;


    raw = hash.replace('#cm-build=', '');
            safeArray(data.masteries).forEach(function (cm) {
                if (!found && cm && cm.name === name) {
                    found = cm;
                }
            });


    try {
            return found;
        build = JSON.parse(decodeURIComponent(raw));
         }
    } catch (e) {
        return;
    }
 
    if (build.r && data.raceClasses && data.raceClasses[build.r]) {
        raceSelect.value = build.r;
        loadClasses();
    }
 
    if (build.c) {
        classSelect.value = build.c;
    }
 
    if (build.l) {
         levelInput.value = build.l;
    }
 
    if (pathSelect && build.p !== undefined) {
        pathSelect.value = build.p;
    }
 
    selectedMasteries = {};
 
    safeArray(build.cms).forEach(function (name) {
        var cm = findCmByName(name);


         if (cm) {
         function getSelectedMasteryNames() {
             selectedMasteries[cm.name] = cm;
             return Object.keys(selectedMasteries).filter(function (name) {
                return selectedMasteries[name];
            }).sort();
         }
         }
    });


    updateSummary();
        function copyTextToClipboard(text, button) {
}
            function showCopied() {
                var oldText;


function loadQrLibrary(callback) {
                if (!button) {
    if (window.QRious) {
                    alert('Copied.');
        callback(true);
                    return;
        return;
                }
    }


    var script = document.createElement('script');
                oldText = button.textContent;
    script.src = 'https://cdn.jsdelivr.net/npm/qrious@4.0.2/dist/qrious.min.js';
                button.textContent = 'Copied';
    script.onload = function () {
        callback(!!window.QRious);
    };
    script.onerror = function () {
        callback(false);
    };


    document.head.appendChild(script);
                setTimeout(function () {
}
                    button.textContent = oldText;
                }, 1200);
            }


function drawWrappedText(ctx, text, x, y, maxWidth, lineHeight, maxLines) {
            if (navigator.clipboard && navigator.clipboard.writeText) {
    var words = String(text || '').split(' ');
                navigator.clipboard.writeText(text).then(showCopied, function () {
    var line = '';
                    alert(text);
    var lines = [];
                });
    var i;
                return;
    var testLine;
            }


    for (i = 0; i < words.length; i++) {
             alert(text);
        testLine = line + words[i] + ' ';
 
        if (ctx.measureText(testLine).width > maxWidth && line) {
             lines.push(line.trim());
            line = words[i] + ' ';
        } else {
            line = testLine;
         }
         }
    }


    if (line) {
        function getBuildTotals() {
        lines.push(line.trim());
            var statTotals = {};
    }
            var spellsAdded = {};
            var spellsRemoved = {};


    if (maxLines && lines.length > maxLines) {
            Object.keys(selectedMasteries).forEach(function (name) {
        lines = lines.slice(0, maxLines);
                var cm = selectedMasteries[name];
        lines[lines.length - 1] += '...';
                var stats;
    }


    lines.forEach(function (lineText, index) {
                if (!cm) return;
        ctx.fillText(lineText, x, y + (index * lineHeight));
    });


    return y + (lines.length * lineHeight);
                stats = cm.stats || {};
}


function drawPanel(ctx, x, y, w, h, title) {
                Object.keys(stats).forEach(function (statName) {
    ctx.strokeStyle = '#9b7330';
                    var value = parseInt(stats[statName], 10);
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.roundRect(x, y, w, h, 14);
    ctx.stroke();


    ctx.fillStyle = '#d9a64d';
                    if (!isNaN(value) && value !== 0) {
    ctx.font = 'bold 32px Georgia';
                        if (!statTotals[statName]) {
    ctx.textAlign = 'center';
                            statTotals[statName] = 0;
    ctx.fillText(title, x + w / 2, y + 42);
                        }


    ctx.strokeStyle = 'rgba(217,166,77,0.35)';
                        statTotals[statName] += value;
    ctx.lineWidth = 1;
                    }
    ctx.beginPath();
                });
    ctx.moveTo(x + 28, y + 58);
    ctx.lineTo(x + w - 28, y + 58);
    ctx.stroke();


    ctx.textAlign = 'left';
                safeArray(cm.spellsAdded).forEach(function (spell) {
}
                    if (spell) spellsAdded[spell] = true;
                });


 
                safeArray(cm.spellsRemoved).forEach(function (spell) {
 
                    if (spell) spellsRemoved[spell] = true;
 
 
function fitText(text, maxWidth, font) {
    var value = String(text || '');
 
    ctx.font = font;
 
    while (value.length > 3 && ctx.measureText(value).width > maxWidth) {
        value = value.slice(0, -1);
    }
 
    if (value !== String(text || '')) {
        value = value.slice(0, -3) + '...';
    }
 
    return value;
}
 
function measureCleanColumnList(items, columns, lineH) {
    if (!items.length) return lineH;
 
    return Math.ceil(items.length / columns) * lineH;
}
 
function drawCleanColumnList(items, x, y, width, columns, color, font, lineH) {
    var colGap = 36;
    var colWidth = (width - colGap * (columns - 1)) / columns;
    var rows = Math.ceil(Math.max(items.length, 1) / columns);
 
    ctx.fillStyle = color;
    ctx.font = font;
    ctx.textAlign = 'left';
    ctx.textBaseline = 'alphabetic';
 
    if (!items.length) {
        ctx.fillText('None', x, y);
        return y + lineH;
    }
 
    items.forEach(function (item, index) {
        var col = Math.floor(index / rows);
        var row = index % rows;
        var drawX = x + col * (colWidth + colGap);
        var drawY = y + row * lineH;
 
        ctx.fillText(fitText(item, colWidth, font), drawX, drawY);
    });
 
    return y + rows * lineH;
}
 
 
 
 
function getCmStatMinRequirements(cm) {
    var reqs = [];
    var sources = [
        cm && cm.statMins,
        cm && cm.statMinimums,
        cm && cm.statRequirements,
        cm && cm.statReqs,
        cm && cm.minStats
    ];
 
    sources.forEach(function (source) {
        if (!source) return;
 
        Object.keys(source).forEach(function (statName) {
            var value = parseInt(source[statName], 10);
 
            if (!isNaN(value) && value > 0) {
                reqs.push({
                    stat: statName,
                    value: value
                 });
                 });
             }
             });
        });
    });


    Object.keys(cm || {}).forEach(function (key) {
            return {
        var match = key.match(/^(.+)(MinReq|ReqMin|Minimum)$/);
                stats: statTotals,
         var value;
                spellsAdded: spellsAdded,
                spellsRemoved: spellsRemoved
            };
         }


         if (!match) return;
         function buildShareUrl() {
            var build = {
                r: raceSelect.value,
                c: classSelect.value,
                l: levelInput.value,
                p: pathSelect ? pathSelect.value : '',
                cms: getSelectedMasteryNames()
            };


        value = parseInt(cm[key], 10);
            return window.location.href.split('#')[0] +
 
                '#cm-build=' +
        if (!isNaN(value) && value > 0) {
                encodeURIComponent(JSON.stringify(build));
            reqs.push({
                stat: match[1],
                value: value
            });
         }
         }
    });


    return reqs;
        function loadBuildFromUrl() {
}
            var hash = window.location.hash || '';
            var raw;
            var build;


function getStatMinRequirementsHtml(cm) {
            if (hash.indexOf('#cm-build=') !== 0) return;
    var reqs = getCmStatMinRequirements(cm);


    if (!reqs.length) return '';
            raw = hash.replace('#cm-build=', '');


    return reqs.map(function (req) {
             try {
        return '<span class="cm-stat-min-req">' +
                build = JSON.parse(decodeURIComponent(raw));
             escapeHtml(formatStatName(req.stat)) +
             } catch (e) {
            ' ' +
            escapeHtml(req.value) +
        '</span>';
    }).join(', ');
}
 
 
 
 
 
function renderBuildCard() {
    loadQrLibrary(function (qrReady) {
        var shareUrl = buildShareUrl();
        var totals = getBuildTotals();
        var selectedNames = getSelectedMasteryNames();
        var purchasedDisplayNames = getCompressedMasteryNames(selectedNames);
        var selectedTitle = getSelectedMasterClassTitle() || 'None';
        var available = getAvailablePoints();
        var spent = getSpentPoints();
        var remaining = available - spent;
        var statsList = Object.keys(totals.stats).sort();
        var gainedList = Object.keys(totals.spellsAdded).sort();
        var removedList = Object.keys(totals.spellsRemoved).sort();
 
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
 
        var cardWidth = 1800;
        var margin = 55;
        var gap = 35;
        var panelW = cardWidth - margin * 2;
        var y = 390;
 
        var qrW = 360;
        var summaryW = panelW - qrW - gap;
        var qrH = 360;
 
        function roundedRect(x, y, w, h, r) {
             if (ctx.roundRect) {
                ctx.beginPath();
                ctx.roundRect(x, y, w, h, r);
                 return;
                 return;
             }
             }


             ctx.beginPath();
             if (build.r && data.raceClasses && data.raceClasses[build.r]) {
            ctx.moveTo(x + r, y);
                raceSelect.value = build.r;
            ctx.lineTo(x + w - r, y);
                loadClasses();
            ctx.quadraticCurveTo(x + w, y, x + w, y + r);
             }
            ctx.lineTo(x + w, y + h - r);
            ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
            ctx.lineTo(x + r, y + h);
            ctx.quadraticCurveTo(x, y + h, x, y + h - r);
            ctx.lineTo(x, y + r);
             ctx.quadraticCurveTo(x, y, x + r, y);
        }


        function drawPanel(x, y, w, h, title) {
            if (build.c) {
            ctx.strokeStyle = '#9b7330';
                classSelect.value = build.c;
            ctx.lineWidth = 3;
             }
            roundedRect(x, y, w, h, 16);
             ctx.stroke();


             ctx.fillStyle = '#d9a64d';
             if (build.l) {
            ctx.font = 'bold 36px Georgia';
                levelInput.value = build.l;
            ctx.textAlign = 'center';
             }
             ctx.fillText(title, x + w / 2, y + 48);


             ctx.strokeStyle = 'rgba(217,166,77,0.35)';
             if (pathSelect && build.p !== undefined) {
            ctx.lineWidth = 1;
                pathSelect.value = build.p;
            ctx.beginPath();
             }
             ctx.moveTo(x + 35, y + 68);
            ctx.lineTo(x + w - 35, y + 68);
            ctx.stroke();


             ctx.textAlign = 'left';
             selectedMasteries = {};
        }


        function drawInfoBox(label, value, x, y, w) {
            safeArray(build.cms).forEach(function (name) {
            ctx.strokeStyle = '#9b7330';
                var cm = findCmByName(name);
            ctx.lineWidth = 2;
            roundedRect(x, y, w, 100, 12);
            ctx.stroke();


            ctx.textAlign = 'left';
                if (cm) {
             ctx.textBaseline = 'alphabetic';
                    selectedMasteries[cm.name] = cm;
                }
             });


             ctx.fillStyle = '#f4e6c8';
             updateSummary();
            ctx.font = 'bold 25px Georgia';
            ctx.fillText(label, x + 28, y + 38);
 
            ctx.font = 'bold 30px Georgia';
            ctx.fillText(value || 'None', x + 28, y + 72);
         }
         }


         function measureColumnList(items, columns, lineH) {
         function loadQrLibrary(callback) {
             if (!items.length) return lineH;
             if (window.QRious) {
            return Math.ceil(items.length / columns) * lineH;
                 callback(true);
        }
                 return;
 
        function drawColumnList(items, x, y, width, columns, color, font, lineH) {
            var colGap = 42;
            var colWidth = (width - colGap * (columns - 1)) / columns;
            var rows = Math.ceil(Math.max(items.length, 1) / columns);
 
            ctx.fillStyle = color;
            ctx.font = font;
            ctx.textAlign = 'left';
            ctx.textBaseline = 'alphabetic';
 
            if (!items.length) {
                 ctx.fillText('None', x, y);
                 return y + lineH;
             }
             }


             items.forEach(function (item, index) {
             var script = document.createElement('script');
                var col = Math.floor(index / rows);
            script.src = 'https://cdn.jsdelivr.net/npm/qrious@4.0.2/dist/qrious.min.js';
                var row = index % rows;
            script.onload = function () {
                 var drawX = x + col * (colWidth + colGap);
                 callback(!!window.QRious);
                var drawY = y + row * lineH;
            };
 
            script.onerror = function () {
                 ctx.fillText(item, drawX, drawY);
                 callback(false);
             });
             };


             return y + rows * lineH;
             document.head.appendChild(script);
         }
         }


         var statsItems = statsList.map(function (statName) {
         function renderBuildCard() {
            var value = totals.stats[statName];
            loadQrLibrary(function (qrReady) {
            var sign = value > 0 ? '+' : '';
                var shareUrl = buildShareUrl();
            return formatStatName(statName) + ': ' + sign + value;
                var totals = getBuildTotals();
        });
                var selectedNames = getSelectedMasteryNames();
                var purchasedDisplayNames = getCompressedMasteryNames(selectedNames);
                var selectedTitle = getSelectedMasterClassTitle() || 'None';
                var available = getAvailablePoints();
                var spent = getSpentPoints();
                var remaining = available - spent;
                var statsList = Object.keys(totals.stats).sort();
                var gainedList = Object.keys(totals.spellsAdded).sort();
                var removedList = Object.keys(totals.spellsRemoved).sort();


        var gainedItems = gainedList.map(function (spell) {
                var canvas = document.createElement('canvas');
            return '+ ' + spell;
                var ctx = canvas.getContext('2d');
        });


        var removedItems = removedList.map(function (spell) {
                var cardWidth = 1800;
            return '- ' + spell;
                var margin = 55;
        });
                var gap = 35;
                var panelW = cardWidth - margin * 2;
                var y = 390;


        var statsHeight = measureColumnList(statsItems, 3, 30);
                var qrW = 360;
        var purchasedHeight = measureColumnList(purchasedDisplayNames, 2, 30);
                var summaryW = panelW - qrW - gap;
        var gainedHeight = measureColumnList(gainedItems, 2, 30);
                var qrH = 360;
        var removedHeight = measureColumnList(removedItems, 2, 30);


        var summaryH = Math.max(430, 335 + statsHeight);
                function roundedRect(x, y, w, h, r) {
        var topRowH = Math.max(summaryH, qrH);
                    if (ctx.roundRect) {
        var purchasedH = Math.max(280, 130 + purchasedHeight);
                        ctx.beginPath();
        var spellsH = Math.max(420, 250 + gainedHeight + removedHeight);
                        ctx.roundRect(x, y, w, h, r);
                        return;
                    }


        canvas.width = cardWidth;
                    ctx.beginPath();
        canvas.height =
                    ctx.moveTo(x + r, y);
            390 +
                    ctx.lineTo(x + w - r, y);
            topRowH + 35 +
                    ctx.quadraticCurveTo(x + w, y, x + w, y + r);
            purchasedH + 35 +
                    ctx.lineTo(x + w, y + h - r);
            spellsH + 180;
                    ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
                    ctx.lineTo(x + r, y + h);
                    ctx.quadraticCurveTo(x, y + h, x, y + h - r);
                    ctx.lineTo(x, y + r);
                    ctx.quadraticCurveTo(x, y, x + r, y);
                }


        ctx.fillStyle = '#05080d';
                function drawPanel(x, y, w, h, title) {
        ctx.fillRect(0, 0, canvas.width, canvas.height);
                    ctx.strokeStyle = '#9b7330';
                    ctx.lineWidth = 3;
                    roundedRect(x, y, w, h, 16);
                    ctx.stroke();


        ctx.strokeStyle = '#9b7330';
                    ctx.fillStyle = '#d9a64d';
        ctx.lineWidth = 6;
                    ctx.font = 'bold 36px Georgia';
        roundedRect(8, 8, canvas.width - 16, canvas.height - 16, 28);
                    ctx.textAlign = 'center';
        ctx.stroke();
                    ctx.fillText(title, x + w / 2, y + 48);


        ctx.textAlign = 'center';
                    ctx.strokeStyle = 'rgba(217,166,77,0.35)';
        ctx.fillStyle = '#d9a64d';
                    ctx.lineWidth = 1;
        ctx.font = 'bold 78px Georgia';
                    ctx.beginPath();
        ctx.fillText('EQOA: SANDSTORM', canvas.width / 2, 100);
                    ctx.moveTo(x + 35, y + 68);
                    ctx.lineTo(x + w - 35, y + 68);
                    ctx.stroke();


        ctx.font = 'bold 46px Georgia';
                    ctx.textAlign = 'left';
        ctx.fillText('CLASS MASTERY CALCULATOR', canvas.width / 2, 155);
                }


        ctx.fillStyle = '#f4e6c8';
                function drawInfoBox(label, value, x, y, w) {
        ctx.font = 'bold 38px Georgia';
                    ctx.strokeStyle = '#9b7330';
        ctx.fillText('Unnamed CM Build', canvas.width / 2, 205);
                    ctx.lineWidth = 2;
                    roundedRect(x, y, w, 100, 12);
                    ctx.stroke();


        drawInfoBox('Race', raceSelect.value || 'None', margin, 250, 380);
                    ctx.textAlign = 'left';
        drawInfoBox('Class', classSelect.value || 'None', 480, 250, 380);
                    ctx.textBaseline = 'alphabetic';
        drawInfoBox('Level', String(levelInput.value || '60'), 905, 250, 300);
        drawInfoBox('Path', (pathSelect && pathSelect.value) || 'None', 1250, 250, 495);


        drawPanel(margin, y, summaryW, topRowH, 'CM SUMMARY');
                    ctx.fillStyle = '#f4e6c8';
        drawPanel(margin + summaryW + gap, y, qrW, qrH, 'SCAN');
                    ctx.font = 'bold 25px Georgia';
                    ctx.fillText(label, x + 28, y + 38);


        ctx.fillStyle = '#f4e6c8';
                    ctx.font = 'bold 30px Georgia';
        ctx.font = 'bold 29px Georgia';
                    ctx.fillText(value || 'None', x + 28, y + 72);
        ctx.fillText('Master Class: ' + selectedTitle, margin + 45, y + 115);
                }
        ctx.fillText('Points: ' + spent + ' / ' + available + ' spent', margin + 45, y + 155);
        ctx.fillText('Remaining: ' + remaining, margin + 45, y + 195);


        ctx.fillStyle = '#d9a64d';
                function measureColumnList(items, columns, lineH) {
        ctx.font = 'bold 30px Georgia';
                    if (!items.length) return lineH;
        ctx.fillText('Stats Gained', margin + 45, y + 255);
                    return Math.ceil(items.length / columns) * lineH;
                }


        drawColumnList(statsItems, margin + 45, y + 295, summaryW - 90, 3, '#f4e6c8', 'bold 23px Georgia', 30);
                function drawColumnList(items, x, y, width, columns, color, font, lineH) {
                    var colGap = 42;
                    var colWidth = (width - colGap * (columns - 1)) / columns;
                    var rows = Math.ceil(Math.max(items.length, 1) / columns);


        if (qrReady) {
                    ctx.fillStyle = color;
            var qrCanvas = document.createElement('canvas');
                    ctx.font = font;
                    ctx.textAlign = 'left';
                    ctx.textBaseline = 'alphabetic';


            new QRious({
                    if (!items.length) {
                element: qrCanvas,
                        ctx.fillText('None', x, y);
                value: shareUrl,
                        return y + lineH;
                size: 220,
                    }
                background: 'white',
                foreground: 'black',
                level: 'M'
            });


            ctx.drawImage(qrCanvas, margin + summaryW + gap + 70, y + 105, 220, 220);
                    items.forEach(function (item, index) {
        }
                        var col = Math.floor(index / rows);
                        var row = index % rows;
                        var drawX = x + col * (colWidth + colGap);
                        var drawY = y + row * lineH;


        y += topRowH + 35;
                        ctx.fillText(item, drawX, drawY);
                    });


        drawPanel(margin, y, panelW, purchasedH, 'PURCHASED CMS');
                    return y + rows * lineH;
        drawColumnList(purchasedDisplayNames, margin + 45, y + 115, panelW - 90, 2, '#e066ff', 'bold 23px Georgia', 30);
                }


        y += purchasedH + 35;
                var statsItems = statsList.map(function (statName) {
                    var value = totals.stats[statName];
                    var sign = value > 0 ? '+' : '';
                    return formatStatName(statName) + ': ' + sign + value;
                });


        drawPanel(margin, y, panelW, spellsH, 'SPELLS');
                var gainedItems = gainedList.map(function (spell) {
                    return '+ ' + spell;
                });


        ctx.fillStyle = '#8fd9ff';
                var removedItems = removedList.map(function (spell) {
        ctx.font = 'bold 30px Georgia';
                    return '- ' + spell;
        ctx.fillText('Gained', margin + 45, y + 115);
                });


        var afterGainedY = drawColumnList(gainedItems, margin + 45, y + 155, panelW - 90, 2, '#8fd9ff', 'bold 22px Georgia', 30);
                var statsHeight = measureColumnList(statsItems, 3, 30);
                var purchasedHeight = measureColumnList(purchasedDisplayNames, 2, 30);
                var gainedHeight = measureColumnList(gainedItems, 2, 30);
                var removedHeight = measureColumnList(removedItems, 2, 30);


        ctx.fillStyle = '#ff8f8f';
                var summaryH = Math.max(430, 335 + statsHeight);
        ctx.font = 'bold 30px Georgia';
                var topRowH = Math.max(summaryH, qrH);
        ctx.fillText('Removed', margin + 45, afterGainedY + 55);
                var purchasedH = Math.max(280, 130 + purchasedHeight);
                var spellsH = Math.max(420, 250 + gainedHeight + removedHeight);


        drawColumnList(removedItems, margin + 45, afterGainedY + 95, panelW - 90, 2, '#ff8f8f', 'bold 22px Georgia', 30);
                canvas.width = cardWidth;
                canvas.height =
                    390 +
                    topRowH + 35 +
                    purchasedH + 35 +
                    spellsH + 180;


        ctx.fillStyle = '#d9a64d';
                ctx.fillStyle = '#05080d';
        ctx.font = 'bold 30px Georgia';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.textAlign = 'center';
        ctx.fillText(
            'EQOA: Sandstorm Wiki Class Mastery Calculator',
            canvas.width / 2,
            canvas.height - 55
        );


        var link = document.createElement('a');
                ctx.strokeStyle = '#9b7330';
        link.href = canvas.toDataURL('image/png');
                ctx.lineWidth = 6;
        link.download = 'EQOA_CM_Build.png';
                roundedRect(8, 8, canvas.width - 16, canvas.height - 16, 28);
        document.body.appendChild(link);
                ctx.stroke();
        link.click();
        document.body.removeChild(link);
    });
}


                ctx.textAlign = 'center';
                ctx.fillStyle = '#d9a64d';
                ctx.font = 'bold 78px Georgia';
                ctx.fillText('EQOA: SANDSTORM', canvas.width / 2, 100);


                ctx.font = 'bold 46px Georgia';
                ctx.fillText('CLASS MASTERY CALCULATOR', canvas.width / 2, 155);


                ctx.fillStyle = '#f4e6c8';
                ctx.font = 'bold 38px Georgia';
                ctx.fillText('Unnamed CM Build', canvas.width / 2, 205);


                drawInfoBox('Race', raceSelect.value || 'None', margin, 250, 380);
                drawInfoBox('Class', classSelect.value || 'None', 480, 250, 380);
                drawInfoBox('Level', String(levelInput.value || '60'), 905, 250, 300);
                drawInfoBox('Path', (pathSelect && pathSelect.value) || 'None', 1250, 250, 495);


                drawPanel(margin, y, summaryW, topRowH, 'CM SUMMARY');
                drawPanel(margin + summaryW + gap, y, qrW, qrH, 'SCAN');


                ctx.fillStyle = '#f4e6c8';
                ctx.font = 'bold 29px Georgia';
                ctx.fillText('Master Class: ' + selectedTitle, margin + 45, y + 115);
                ctx.fillText('Points: ' + spent + ' / ' + available + ' spent', margin + 45, y + 155);
                ctx.fillText('Remaining: ' + remaining, margin + 45, y + 195);


                ctx.fillStyle = '#d9a64d';
                ctx.font = 'bold 30px Georgia';
                ctx.fillText('Stats Gained', margin + 45, y + 255);


                drawColumnList(statsItems, margin + 45, y + 295, summaryW - 90, 3, '#f4e6c8', 'bold 23px Georgia', 30);


                if (qrReady) {
                    var qrCanvas = document.createElement('canvas');


                    new QRious({
                        element: qrCanvas,
                        value: shareUrl,
                        size: 220,
                        background: 'white',
                        foreground: 'black',
                        level: 'M'
                    });


                    ctx.drawImage(qrCanvas, margin + summaryW + gap + 70, y + 105, 220, 220);
                }


                y += topRowH + 35;


                drawPanel(margin, y, panelW, purchasedH, 'PURCHASED CMS');
                drawColumnList(purchasedDisplayNames, margin + 45, y + 115, panelW - 90, 2, '#e066ff', 'bold 23px Georgia', 30);


                y += purchasedH + 35;


                drawPanel(margin, y, panelW, spellsH, 'SPELLS');


                ctx.fillStyle = '#8fd9ff';
                ctx.font = 'bold 30px Georgia';
                ctx.fillText('Gained', margin + 45, y + 115);


                var afterGainedY = drawColumnList(gainedItems, margin + 45, y + 155, panelW - 90, 2, '#8fd9ff', 'bold 22px Georgia', 30);


function getCmDisplayTab(cm) {
                ctx.fillStyle = '#ff8f8f';
    var classification = String((cm && cm.classification) || '');
                ctx.font = 'bold 30px Georgia';
    var races = safeArray(cm && cm.races);
                ctx.fillText('Removed', margin + 45, afterGainedY + 55);
    var classes = safeArray(cm && cm.classes);


    if (classification === 'Master Class') {
                drawColumnList(removedItems, margin + 45, afterGainedY + 95, panelW - 90, 2, '#ff8f8f', 'bold 22px Georgia', 30);
        if (races.length && races[0] !== 'All') {
 
            return 'Racial';
                ctx.fillStyle = '#d9a64d';
        }
                ctx.font = 'bold 30px Georgia';
                ctx.textAlign = 'center';
                ctx.fillText(
                    'EQOA: Sandstorm Wiki Class Mastery Calculator',
                    canvas.width / 2,
                    canvas.height - 55
                );


        if (classes.length && classes[0] !== 'All') {
                var link = document.createElement('a');
             return 'Class';
                link.href = canvas.toDataURL('image/png');
                link.download = 'EQOA_CM_Build.png';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
             });
         }
         }
    }
    return classification;
}


         function loadRaces() {
         function loadRaces() {
Line 1,259: Line 1,087:
         }
         }


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


Array.prototype.forEach.call(viewButtons, function (button) {
                button.classList.add('cm-view-active');
    button.addEventListener('click', function () {
        activeCmView = button.getAttribute('data-view') || 'detailed';


        Array.prototype.forEach.call(viewButtons, function (btn) {
                renderMasteryList();
             btn.classList.remove('cm-view-active');
             });
         });
         });


         button.classList.add('cm-view-active');
         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 = '';


        renderMasteryList();
            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);


function updatePurchasedList() {
                    if (!groups[groupName]) {
    var list = document.getElementById('cm-purchased-list');
                        groupName = 'Other';
    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;
                groups[groupName].push(cm);
            });


    Object.keys(selectedMasteries).forEach(function (name) {
            groupOrder.forEach(function (groupName) {
        var cm = selectedMasteries[name];
                groups[groupName].sort(function (a, b) {
        var groupName;
                    return String(a.name || '').localeCompare(String(b.name || ''));
 
                });
        if (!cm) return;
            });


        if (isMasterClassTitle(cm)) {
            groupOrder.forEach(function (groupName) {
            groupName = 'Master Class';
                if (!groups[groupName].length) return;
        } else {
            groupName = getCmDisplayTab(cm);


            if (!groups[groupName]) {
                html +=
                groupName = 'Other';
                    '<div class="cm-purchased-group">' +
            }
                        '<div class="cm-purchased-group-title">' + escapeHtml(groupName) + '</div>';
        }


        groups[groupName].push(cm);
                groups[groupName].forEach(function (cm) {
    });
                    var index = purchasedRows.length;
                    purchasedRows.push(cm);


    groupOrder.forEach(function (groupName) {
                    html +=
        groups[groupName].sort(function (a, b) {
                        '<div class="cm-purchased-item" data-purchased-index="' + index + '">' +
            return String(a.name || '').localeCompare(String(b.name || ''));
                            '<span>' + escapeHtml(cm.name) + '</span>' +
        });
                            '<span class="cm-purchased-cost">' + escapeHtml(cm.points) + '</span>' +
    });
                        '</div>';
                });


    groupOrder.forEach(function (groupName) {
                html += '</div>';
        if (!groups[groupName].length) return;
            });


        html +=
            if (!html) {
            '<div class="cm-purchased-group">' +
                list.innerHTML = 'None purchased.';
                 '<div class="cm-purchased-group-title">' + escapeHtml(groupName) + '</div>';
                 return;
            }


        groups[groupName].forEach(function (cm) {
            list.innerHTML = html;
            var index = purchasedRows.length;
            purchasedRows.push(cm);


             html +=
             Array.prototype.forEach.call(
                 '<div class="cm-purchased-item" data-purchased-index="' + index + '">' +
                 list.querySelectorAll('.cm-purchased-item'),
                    '<span>' + escapeHtml(cm.name) + '</span>' +
                function (row) {
                     '<span class="cm-purchased-cost">' + escapeHtml(cm.points) + '</span>' +
                     var index = parseInt(row.getAttribute('data-purchased-index'), 10);
                '</div>';
                    var cm = purchasedRows[index];
        });


        html += '</div>';
                    row.addEventListener('mouseenter', function () {
    });
                        showCmTooltip(cm, row);
                    });


    if (!html) {
                    row.addEventListener('mouseleave', hideCmTooltip);
        list.innerHTML = 'None purchased.';
        return;
    }


    list.innerHTML = html;
                    row.addEventListener('click', function () {
                        if (!cm) return;


    Array.prototype.forEach.call(
                        delete selectedMasteries[cm.name];
        list.querySelectorAll('.cm-purchased-item'),
                        hideCmTooltip();
        function (row) {
                        updateSummary();
            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() {
         function updateUnlockedSummary() {
Line 1,442: Line 1,260:
                         '<div class="cm-purchased-item cm-stat-row">' +
                         '<div class="cm-purchased-item cm-stat-row">' +
                             '<span>' + escapeHtml(formatStatName(statName)) + '</span>' +
                             '<span>' + escapeHtml(formatStatName(statName)) + '</span>' +
                             '<span class="cm-purchased-cost">' + sign + escapeHtml(value) + '</span>' +
                             '<span class="cm-purchased-cost">' + sign + escapeHtml(value) + '</span>' +
                         '</div>';
                         '</div>';
Line 1,496: Line 1,313:


             updatePurchasedList();
             updatePurchasedList();
updateMasterClassPanel();
            updateMasterClassPanel();
updateUnlockedSummary();
            updateUnlockedSummary();
renderMasteryList();
            renderMasteryList();
 
         }
         }


         function buildCmTooltipHtml(cm) {
         function buildCmTooltipHtml(cm) {
             var statLines = [];
             var statLines = [];
            var spellAdds;
            var spellRemoves;
            var reqHtml = '';
            var statMinHtml = '';
            var statMinReqHtml = '';


             if (!cm) return '';
             if (!cm) return '';


             Object.keys(cm.stats || {}).forEach(function (key) {
             Object.keys(cm.stats || {}).forEach(function (key) {
                 var value = cm.stats[key];
                 var value = cm.stats[key];


Line 1,515: Line 1,337:
                         '<div class="cm-tooltip-stat">' +
                         '<div class="cm-tooltip-stat">' +
                             escapeHtml(formatStatName(key)) + ': ' + sign + escapeHtml(value) +
                             escapeHtml(formatStatName(key)) + ': ' + sign + escapeHtml(value) +
                         '</div>'
                         '</div>'
                     );
                     );
Line 1,521: Line 1,342:
             });
             });


             var spellAdds = safeArray(cm.spellsAdded).map(function (spell) {
             spellAdds = safeArray(cm.spellsAdded).map(function (spell) {
                 return '<div class="cm-tooltip-spell-add">+ ' + escapeHtml(spell) + '</div>';
                 return '<div class="cm-tooltip-spell-add">+ ' + escapeHtml(spell) + '</div>';
             }).join('');
             }).join('');


             var spellRemoves = safeArray(cm.spellsRemoved).map(function (spell) {
             spellRemoves = safeArray(cm.spellsRemoved).map(function (spell) {
                 return '<div class="cm-tooltip-spell-remove">- ' + escapeHtml(spell) + '</div>';
                 return '<div class="cm-tooltip-spell-remove">- ' + escapeHtml(spell) + '</div>';
             }).join('');
             }).join('');
            var reqHtml = '';


             if (safeArray(cm.requirements).length) {
             if (safeArray(cm.requirements).length) {
    reqHtml =
                reqHtml =
var statMinHtml = getStatMinRequirementsHtml(cm);
                    '<div class="cm-tooltip-req">' +
var statMinReqHtml = '';
                        'Requires: ' + getRequirementsHtml(cm) +
                    '</div>';
            }


if (statMinHtml) {
             statMinHtml = getStatMinRequirementsHtml(cm);
    statMinReqHtml =
        '<div class="cm-tooltip-req">' +
             'Stat Min: ' + statMinHtml +
        '</div>';
}
 
        '<div class="cm-tooltip-req">' +
            'Requires: ' + getRequirementsHtml(cm) +
        '</div>';
}


            if (statMinHtml) {
                statMinReqHtml =
                    '<div class="cm-tooltip-req">' +
                        'Stat Min: ' + statMinHtml +
                    '</div>';
            }


             return (
             return (
Line 1,558: Line 1,375:
                 '</div>' +
                 '</div>' +
                 reqHtml +
                 reqHtml +
statMinReqHtml +
                statMinReqHtml +
statLines.join('') +
                statLines.join('') +
 
                 spellAdds +
                 spellAdds +
                 spellRemoves
                 spellRemoves
Line 1,589: Line 1,405:
             }
             }
         }
         }


         function renderMasteryList() {
         function renderMasteryList() {
    var masteryPanel = document.getElementById('cm-mastery-panel');
            var masteryPanel = document.getElementById('cm-mastery-panel');
    if (!masteryPanel) return;
            if (!masteryPanel) return;


    var selectedRace = raceSelect.value;
            var selectedRace = raceSelect.value;
    var selectedRaceCode = (data.raceCodes || {})[selectedRace];
            var selectedRaceCode = (data.raceCodes || {})[selectedRace];
    var selectedClass = classSelect.value;
            var selectedClass = classSelect.value;
    var selectedPath = pathSelect ? pathSelect.value : '';
            var selectedPath = pathSelect ? pathSelect.value : '';
    var selectedPathNormalized = normalizePath(selectedPath);
            var selectedPathNormalized = normalizePath(selectedPath);
    var selectedIsWere = isWerePath(selectedPathNormalized);
            var selectedIsWere = isWerePath(selectedPathNormalized);
    var searchQuery = searchInput ? String(searchInput.value || '').toLowerCase() : '';
            var searchQuery = searchInput ? String(searchInput.value || '').toLowerCase() : '';
    var seenMasteries = {};
            var seenMasteries = {};
    var availableMasteries = [];
            var availableMasteries = [];
    var lockedMasteries = [];
            var lockedMasteries = [];


    visibleMasteries = [];
            visibleMasteries = [];


    safeArray(data.masteries).forEach(function (cm) {
            safeArray(data.masteries).forEach(function (cm) {
        var cmRaces = safeArray(cm.races);
                var cmRaces = safeArray(cm.races);
        var cmClasses = safeArray(cm.classes);
                var cmClasses = safeArray(cm.classes);
        var reqs = safeArray(cm.requirements);
                var cmName = String(cm.name || '');
        var cmName = String(cm.name || '');
                var cmPath = normalizePath(cm.lycanthropy);
        var cmPath = normalizePath(cm.lycanthropy);
                var bitePath = getBitePath(cmName);
        var bitePath = getBitePath(cmName);
                var pathOk = false;
        var pathOk = false;


        var raceOk =
                var raceOk =
            !cmRaces.length ||
                    !cmRaces.length ||
            cmRaces.indexOf(selectedRaceCode) !== -1;
                    cmRaces.indexOf('All') !== -1 ||
                    cmRaces.indexOf(selectedRaceCode) !== -1;


        var classOk =
                var classOk =
            !cmClasses.length ||
                    !cmClasses.length ||
            cmClasses.indexOf(selectedClass) !== -1;
                    cmClasses.indexOf('All') !== -1 ||
                    cmClasses.indexOf(selectedClass) !== -1;


        var tabOk = getCmDisplayTab(cm) === activeCmTab;
                var tabOk = getCmDisplayTab(cm) === activeCmTab;


        var searchOk =
                var searchOk =
            !searchQuery ||
                    !searchQuery ||
            getCmSearchText(cm).indexOf(searchQuery) !== -1;
                    getCmSearchText(cm).indexOf(searchQuery) !== -1;


        if (bitePath) {
                if (bitePath) {
            pathOk = selectedPathNormalized === bitePath;
                    pathOk = selectedPathNormalized === bitePath;
        } else if (!cmPath) {
                } else if (!cmPath) {
            pathOk = true;
                    pathOk = true;
        } else if (!selectedPathNormalized) {
                } else if (!selectedPathNormalized) {
            pathOk = false;
                    pathOk = false;
        } else if (selectedIsWere && isSharedWereMastery(cmName)) {
                } else if (selectedIsWere && isSharedWereMastery(cmName)) {
            pathOk = cmPath === 'werebeast' || isWerePath(cmPath);
                    pathOk = cmPath === 'werebeast' || isWerePath(cmPath);
        } else if (selectedIsWere && cmPath === 'werebeast') {
                } else if (selectedIsWere && cmPath === 'werebeast') {
            pathOk = true;
                    pathOk = true;
        } else {
                } else {
            pathOk = cmPath === selectedPathNormalized;
                    pathOk = cmPath === selectedPathNormalized;
        }
                }


        if (
                if (
            !raceOk ||
                    !raceOk ||
            !classOk ||
                    !classOk ||
            !tabOk ||
                    !tabOk ||
            !pathOk ||
                    !pathOk ||
            !searchOk ||
                    !searchOk ||
            selectedMasteries[cmName] ||
                    selectedMasteries[cmName] ||
            seenMasteries[cmName]
                    seenMasteries[cmName]
        ) {
                ) {
            return;
                    return;
        }
                }


        seenMasteries[cmName] = true;
                seenMasteries[cmName] = true;


        var unlockHint = getCmUnlockHint(cm);
                var unlockHint = getCmUnlockHint(cm);


        if (unlockHint) {
                if (unlockHint) {
            lockedMasteries.push({
                    lockedMasteries.push({
                cm: cm,
                        cm: cm,
                locked: true,
                        locked: true,
                 unlockHint: unlockHint
                        unlockHint: unlockHint
                    });
                 } else {
                    availableMasteries.push({
                        cm: cm,
                        locked: false,
                        unlockHint: ''
                    });
                }
             });
             });
        } else {
            availableMasteries.push({
                cm: cm,
                locked: false,
                unlockHint: ''
            });
        }
    });


    if (showLockedCms) {
            if (showLockedCms) {
    visibleMasteries = availableMasteries.concat(lockedMasteries);
                visibleMasteries = availableMasteries.concat(lockedMasteries);
} else {
            } else {
    visibleMasteries = availableMasteries;
                visibleMasteries = availableMasteries;
}
            }


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


    if (!visibleMasteries.length) {
            masteryPanel.innerHTML = visibleMasteries.map(function (entry, index) {
        masteryPanel.innerHTML = 'No Class Masteries found for this selection.';
                var cm = entry.cm;
        return;
                var lockedClass = entry.locked ? ' cm-card-locked' : '';
    }
                var typeClass = getCmTypeClass(cm);
                var cmType = getCmType(cm);
                var requirementsHtml = getRequirementsHtml(cm);
                var statMinHtml = getStatMinRequirementsHtml(cm);
                var chainHtml = getCmChainHtml(cm);


    masteryPanel.innerHTML = visibleMasteries.map(function (entry, index) {
                var metaHtml =
    var cm = entry.cm;
                    '<div class="cm-card-meta">' +
    var lockedClass = entry.locked ? ' cm-card-locked' : '';
                        'Level: ' + escapeHtml(cm.level) +
    var typeClass = getCmTypeClass(cm);
                        ' | Cost: ' + escapeHtml(cm.points) +
    var cmType = getCmType(cm);
                        (cm.cmSpentReq ? ' | CM Spent Req: ' + escapeHtml(cm.cmSpentReq) : '') +
    var requirementsHtml = getRequirementsHtml(cm);
                    '</div>';
var statMinHtml = getStatMinRequirementsHtml(cm);
var chainHtml = getCmChainHtml(cm);


                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>' +
                            (statMinHtml ? '<div class="cm-card-req">Stat Min: ' + statMinHtml + '</div>' : '') +
                            (chainHtml ? '<div class="cm-chain-preview">Chain: ' + chainHtml + '</div>' : '') +
                            (entry.unlockHint ? '<div class="cm-unlock-hint">' + escapeHtml(entry.unlockHint) + '</div>' : '') +
                        '</div>'
                    );
                }


    var metaHtml =
                return (
        '<div class="cm-card-meta">' +
                    '<div class="cm-card cm-purchasable-card ' + typeClass + lockedClass + '" data-cm-index="' + index + '">' +
            'Level: ' + escapeHtml(cm.level) +
                        '<div class="cm-card-title">' + escapeHtml(cm.name) + '</div>' +
            ' | Cost: ' + escapeHtml(cm.points) +
                        '<div class="cm-card-type-tag">' + escapeHtml(cmType) + '</div>' +
            (cm.cmSpentReq ? ' | CM Spent Req: ' + escapeHtml(cm.cmSpentReq) : '') +
                        '<div class="cm-card-desc">' + escapeHtml(cm.description) + '</div>' +
        '</div>';
                        metaHtml +
                        (requirementsHtml ? '<div class="cm-card-req">Requires: ' + requirementsHtml + '</div>' : '') +
                        (statMinHtml ? '<div class="cm-card-req">Stat Min: ' + statMinHtml + '</div>' : '') +
                        (chainHtml ? '<div class="cm-chain-preview">Chain: ' + chainHtml + '</div>' : '') +
                        (entry.unlockHint ? '<div class="cm-unlock-hint">' + escapeHtml(entry.unlockHint) + '</div>' : '') +
                    '</div>'
                );
            }).join('');


    if (activeCmView === 'compact') {
            Array.prototype.forEach.call(
        return (
                masteryPanel.querySelectorAll('.cm-purchasable-card'),
            '<div class="cm-card cm-purchasable-card cm-card-compact ' + typeClass + lockedClass + '" data-cm-index="' + index + '">' +
                 function (card) {
                 '<div class="cm-card-compact-row">' +
                     var cmIndex = parseInt(card.getAttribute('data-cm-index'), 10);
                     '<div class="cm-card-title">' + escapeHtml(cm.name) + '</div>' +
                     var entry = visibleMasteries[cmIndex];
                    '<div class="cm-card-type-tag">' + escapeHtml(cmType) + '</div>' +
                    var cm = entry ? entry.cm : null;
                     metaHtml +
                '</div>' +
                (chainHtml ? '<div class="cm-chain-preview">Chain: ' + chainHtml + '</div>' : '') +
                (entry.unlockHint ? '<div class="cm-unlock-hint">' + escapeHtml(entry.unlockHint) + '</div>' : '') +
            '</div>'
        );
    }


    return (
                    card.addEventListener('mouseenter', function () {
        '<div class="cm-card cm-purchasable-card ' + typeClass + lockedClass + '" data-cm-index="' + index + '">' +
                        showCmTooltip(cm, card);
            '<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>' : '') +
(statMinHtml ? '<div class="cm-card-req">Stat Min: ' + statMinHtml + '</div>' : '') +


            (chainHtml ? '<div class="cm-chain-preview">Chain: ' + chainHtml + '</div>' : '') +
                    card.addEventListener('mouseleave', hideCmTooltip);
            (entry.unlockHint ? '<div class="cm-unlock-hint">' + escapeHtml(entry.unlockHint) + '</div>' : '') +
        '</div>'
    );
}).join('');


                    card.addEventListener('click', function () {
                        var available;
                        var spent;
                        var selectedMasterClassTitle;


                        if (!cm || !entry) return;


    Array.prototype.forEach.call(
                        if (entry.locked) {
        masteryPanel.querySelectorAll('.cm-purchasable-card'),
                            alert(entry.unlockHint);
        function (card) {
                            return;
            var cmIndex = parseInt(card.getAttribute('data-cm-index'), 10);
                        }
            var entry = visibleMasteries[cmIndex];
            var cm = entry ? entry.cm : null;


            card.addEventListener('mouseenter', function () {
                        available = getAvailablePoints();
                showCmTooltip(cm, card);
                        spent = getSpentPoints();
            });


            card.addEventListener('mouseleave', hideCmTooltip);
                        if (spent + cm.points > available) {
                            alert('Not enough CM points.');
                            return;
                        }


            card.addEventListener('click', function () {
                        if (isMasterClassTitle(cm)) {
                var available;
                            selectedMasterClassTitle = getSelectedMasterClassTitle();
                var spent;
                var selectedMasterClassTitle;


                if (!cm || !entry) return;
                            if (selectedMasterClassTitle && selectedMasterClassTitle !== cm.name) {
                                alert('You can only select one Master Class Title per character build. Remove ' + selectedMasterClassTitle + ' first.');
                                return;
                            }
                        }


                if (entry.locked) {
                        selectedMasteries[cm.name] = cm;
                    alert(entry.unlockHint);
                    return;
                }


                available = getAvailablePoints();
                        hideCmTooltip();
                spent = getSpentPoints();
                        updateSummary();
 
                     });
                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);
         raceSelect.addEventListener('change', loadClasses);
         classSelect.addEventListener('change', updateSummary);
         classSelect.addEventListener('change', updateSummary);
         levelInput.addEventListener('input', updateSummary);
         levelInput.addEventListener('input', updateSummary);
if (searchInput) {
    searchInput.addEventListener('input', renderMasteryList);
}


if (clearSearchButton && searchInput) {
        if (searchInput) {
    clearSearchButton.addEventListener('click', function () {
            searchInput.addEventListener('input', renderMasteryList);
        searchInput.value = '';
         }
        renderMasteryList();
         searchInput.focus();
    });
}


if (shareUrlButton) {
        if (clearSearchButton && searchInput) {
    shareUrlButton.addEventListener('click', function () {
            clearSearchButton.addEventListener('click', function () {
        copyTextToClipboard(buildShareUrl(), shareUrlButton);
                searchInput.value = '';
    });
                renderMasteryList();
}
                searchInput.focus();
            });
        }


if (exportCardButton) {
        if (shareUrlButton) {
    exportCardButton.addEventListener('click', function () {
            shareUrlButton.addEventListener('click', function () {
        renderBuildCard();
                copyTextToClipboard(buildShareUrl(), shareUrlButton);
    });
            });
}
        }
 
 
if (showLockedInput) {
    showLockedInput.addEventListener('change', function () {
        showLockedCms = showLockedInput.checked;
        renderMasteryList();
    });
}


        if (exportCardButton) {
            exportCardButton.addEventListener('click', function () {
                renderBuildCard();
            });
        }


        if (showLockedInput) {
            showLockedInput.addEventListener('change', function () {
                showLockedCms = showLockedInput.checked;
                renderMasteryList();
            });
        }


         if (pathSelect) {
         if (pathSelect) {
Line 1,856: Line 1,659:


         if (resetButton) {
         if (resetButton) {
    resetButton.addEventListener('click', function () {
            resetButton.addEventListener('click', function () {
        selectedMasteries = {};
                selectedMasteries = {};
        activeCmTab = 'General';
                activeCmTab = 'General';
        activeCmView = 'detailed';
                activeCmView = 'detailed';
showLockedCms = true;
                showLockedCms = true;


        levelInput.value = 60;
                levelInput.value = 60;


        if (pathSelect) {
                if (pathSelect) {
            pathSelect.value = '';
                    pathSelect.value = '';
        }
                }


        Array.prototype.forEach.call(
                Array.prototype.forEach.call(
            document.querySelectorAll('.cm-tab-button'),
                    document.querySelectorAll('.cm-tab-button'),
            function (btn) {
                    function (btn) {
                btn.classList.remove('cm-tab-active');
                        btn.classList.remove('cm-tab-active');
            }
                    }
        );
                );


        var generalTab = document.querySelector('.cm-tab-button[data-tab="General"]');
                var generalTab = document.querySelector('.cm-tab-button[data-tab="General"]');
        if (generalTab) {
                if (generalTab) {
            generalTab.classList.add('cm-tab-active');
                    generalTab.classList.add('cm-tab-active');
        }
                }


        Array.prototype.forEach.call(viewButtons, function (btn) {
                Array.prototype.forEach.call(viewButtons, function (btn) {
            btn.classList.remove('cm-view-active');
                    btn.classList.remove('cm-view-active');
        });
                });


        var detailedView = document.querySelector('.cm-view-button[data-view="detailed"]');
                var detailedView = document.querySelector('.cm-view-button[data-view="detailed"]');
        if (detailedView) {
                if (detailedView) {
            detailedView.classList.add('cm-view-active');
                    detailedView.classList.add('cm-view-active');
        }
                }
if (searchInput) {
    searchInput.value = '';
}


if (showLockedInput) {
                if (searchInput) {
    showLockedInput.checked = true;
                    searchInput.value = '';
}
                }


        hideCmTooltip();
                if (showLockedInput) {
        updateSummary();
                    showLockedInput.checked = true;
    });
                }
}


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


         loadRaces();
         loadRaces();
loadBuildFromUrl();
        loadBuildFromUrl();
 
     }
     }


});
});

Revision as of 00:39, 15 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 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="cm-build-actions">' +
                    '<button type="button" id="cm-share-url" class="cm-action-button">Generate Share URL</button>' +
                    '<button type="button" id="cm-export-card" class="cm-action-button">Export Build Card</button>' +
                '</div>' +

                '<div id="cm-build-card-panel" class="cm-build-card-panel" style="display:none;"></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');
        var shareUrlButton = document.getElementById('cm-share-url');
        var exportCardButton = document.getElementById('cm-export-card');
        var buildCardPanel = document.getElementById('cm-build-card-panel');

        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 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 getCmStatMinRequirements(cm) {
            var reqs = [];
            var sources = [
                cm && cm.statMins,
                cm && cm.statMinimums,
                cm && cm.statRequirements,
                cm && cm.statReqs,
                cm && cm.minStats
            ];

            sources.forEach(function (source) {
                if (!source) return;

                Object.keys(source).forEach(function (statName) {
                    var value = parseInt(source[statName], 10);

                    if (!isNaN(value) && value > 0) {
                        reqs.push({
                            stat: statName,
                            value: value
                        });
                    }
                });
            });

            Object.keys(cm || {}).forEach(function (key) {
                var match = key.match(/^(.+?)(MinReq|ReqMin|Minimum|Min)$/);
                var value;

                if (!match) return;

                value = parseInt(cm[key], 10);

                if (!isNaN(value) && value > 0) {
                    reqs.push({
                        stat: match[1],
                        value: value
                    });
                }
            });

            return reqs;
        }

        function getStatMinRequirementsHtml(cm) {
            var reqs = getCmStatMinRequirements(cm);

            if (!reqs.length) return '';

            return reqs.map(function (req) {
                return '<span class="cm-stat-min-req">' +
                    escapeHtml(formatStatName(req.stat)) +
                    ' ' +
                    escapeHtml(req.value) +
                '</span>';
            }).join(', ');
        }

        function getCmSearchText(cm) {
            var parts = [];
            var stats = cm && cm.stats ? cm.stats : {};
            var statMinReqs;

            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(formatStatName(statName));
                parts.push(stats[statName]);
            });


            statMinReqs = getCmStatMinRequirements(cm);
            statMinReqs.forEach(function (req) {
                parts.push(req.stat);
                parts.push(formatStatName(req.stat));
                parts.push(req.value);
            });

            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 getCmChainBase(name) {
            return String(name || '').replace(/\s+\d+$/, '');
        }

        function getCmChainNumber(name) {
            var match = String(name || '').match(/\s+(\d+)$/);

            return match ? parseInt(match[1], 10) : null;
        }

        function getCmChain(cm) {
            var base;
            var currentNumber;
            var chain = [];

            if (!cm || !cm.name) return [];

            base = getCmChainBase(cm.name);
            currentNumber = getCmChainNumber(cm.name);

            if (currentNumber === null) return [];

            safeArray(data.masteries).forEach(function (item) {
                if (
                    item &&
                    getCmChainBase(item.name) === base &&
                    getCmChainNumber(item.name) !== null
                ) {
                    chain.push(item.name);
                }
            });

            chain.sort(function (a, b) {
                return getCmChainNumber(a) - getCmChainNumber(b);
            });

            return chain;
        }

        function getCmChainHtml(cm) {
            var chain = getCmChain(cm);

            if (chain.length <= 1) return '';

            return chain.map(function (name) {
                var owned = !!selectedMasteries[name];
                var current = cm && cm.name === name;
                var className = 'cm-chain-step';

                if (owned) {
                    className += ' cm-chain-owned';
                }

                if (current) {
                    className += ' cm-chain-current';
                }

                return '<span class="' + className + '">' + escapeHtml(name) + '</span>';
            }).join('<span class="cm-chain-arrow"> &gt; </span>');
        }

        function getCompressedMasteryNames(names) {
            var groups = {};
            var singles = [];

            names.forEach(function (name) {
                var base = getCmChainBase(name);
                var number = getCmChainNumber(name);

                if (number === null) {
                    singles.push(name);
                    return;
                }


                if (!groups[base]) {
                    groups[base] = [];
                }

                groups[base].push(number);
            });

            Object.keys(groups).forEach(function (base) {
                groups[base].sort(function (a, b) {
                    return a - b;
                });

                if (groups[base].length === 1) {
                    singles.push(base + ' ' + groups[base][0]);
                } else {
                    singles.push(base + ' ' + groups[base].join(' > '));
                }
            });

            return singles.sort();
        }

        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 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 findCmByName(name) {
            var found = null;

            safeArray(data.masteries).forEach(function (cm) {
                if (!found && cm && cm.name === name) {
                    found = cm;
                }
            });

            return found;
        }

        function getSelectedMasteryNames() {
            return Object.keys(selectedMasteries).filter(function (name) {
                return selectedMasteries[name];
            }).sort();
        }

        function copyTextToClipboard(text, button) {
            function showCopied() {
                var oldText;

                if (!button) {
                    alert('Copied.');
                    return;
                }

                oldText = button.textContent;
                button.textContent = 'Copied';

                setTimeout(function () {
                    button.textContent = oldText;
                }, 1200);
            }

            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(text).then(showCopied, function () {
                    alert(text);
                });
                return;
            }

            alert(text);
        }

        function getBuildTotals() {
            var statTotals = {};
            var spellsAdded = {};
            var spellsRemoved = {};

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

                safeArray(cm.spellsAdded).forEach(function (spell) {
                    if (spell) spellsAdded[spell] = true;
                });

                safeArray(cm.spellsRemoved).forEach(function (spell) {
                    if (spell) spellsRemoved[spell] = true;
                });
            });

            return {
                stats: statTotals,
                spellsAdded: spellsAdded,
                spellsRemoved: spellsRemoved
            };
        }

        function buildShareUrl() {
            var build = {
                r: raceSelect.value,
                c: classSelect.value,
                l: levelInput.value,
                p: pathSelect ? pathSelect.value : '',
                cms: getSelectedMasteryNames()
            };

            return window.location.href.split('#')[0] +
                '#cm-build=' +
                encodeURIComponent(JSON.stringify(build));
        }

        function loadBuildFromUrl() {
            var hash = window.location.hash || '';
            var raw;
            var build;

            if (hash.indexOf('#cm-build=') !== 0) return;

            raw = hash.replace('#cm-build=', '');

            try {
                build = JSON.parse(decodeURIComponent(raw));
            } catch (e) {
                return;
            }

            if (build.r && data.raceClasses && data.raceClasses[build.r]) {
                raceSelect.value = build.r;
                loadClasses();
            }

            if (build.c) {
                classSelect.value = build.c;
            }

            if (build.l) {
                levelInput.value = build.l;
            }

            if (pathSelect && build.p !== undefined) {
                pathSelect.value = build.p;
            }

            selectedMasteries = {};

            safeArray(build.cms).forEach(function (name) {
                var cm = findCmByName(name);

                if (cm) {
                    selectedMasteries[cm.name] = cm;
                }
            });

            updateSummary();
        }

        function loadQrLibrary(callback) {
            if (window.QRious) {
                callback(true);
                return;
            }

            var script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/qrious@4.0.2/dist/qrious.min.js';
            script.onload = function () {
                callback(!!window.QRious);
            };
            script.onerror = function () {
                callback(false);
            };

            document.head.appendChild(script);
        }

        function renderBuildCard() {
            loadQrLibrary(function (qrReady) {
                var shareUrl = buildShareUrl();
                var totals = getBuildTotals();
                var selectedNames = getSelectedMasteryNames();
                var purchasedDisplayNames = getCompressedMasteryNames(selectedNames);
                var selectedTitle = getSelectedMasterClassTitle() || 'None';
                var available = getAvailablePoints();
                var spent = getSpentPoints();
                var remaining = available - spent;
                var statsList = Object.keys(totals.stats).sort();
                var gainedList = Object.keys(totals.spellsAdded).sort();
                var removedList = Object.keys(totals.spellsRemoved).sort();

                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');

                var cardWidth = 1800;
                var margin = 55;
                var gap = 35;
                var panelW = cardWidth - margin * 2;
                var y = 390;

                var qrW = 360;
                var summaryW = panelW - qrW - gap;
                var qrH = 360;

                function roundedRect(x, y, w, h, r) {
                    if (ctx.roundRect) {
                        ctx.beginPath();
                        ctx.roundRect(x, y, w, h, r);
                        return;
                    }

                    ctx.beginPath();
                    ctx.moveTo(x + r, y);
                    ctx.lineTo(x + w - r, y);
                    ctx.quadraticCurveTo(x + w, y, x + w, y + r);
                    ctx.lineTo(x + w, y + h - r);
                    ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
                    ctx.lineTo(x + r, y + h);
                    ctx.quadraticCurveTo(x, y + h, x, y + h - r);
                    ctx.lineTo(x, y + r);
                    ctx.quadraticCurveTo(x, y, x + r, y);
                }

                function drawPanel(x, y, w, h, title) {
                    ctx.strokeStyle = '#9b7330';
                    ctx.lineWidth = 3;
                    roundedRect(x, y, w, h, 16);
                    ctx.stroke();

                    ctx.fillStyle = '#d9a64d';
                    ctx.font = 'bold 36px Georgia';
                    ctx.textAlign = 'center';
                    ctx.fillText(title, x + w / 2, y + 48);

                    ctx.strokeStyle = 'rgba(217,166,77,0.35)';
                    ctx.lineWidth = 1;
                    ctx.beginPath();
                    ctx.moveTo(x + 35, y + 68);
                    ctx.lineTo(x + w - 35, y + 68);
                    ctx.stroke();

                    ctx.textAlign = 'left';
                }

                function drawInfoBox(label, value, x, y, w) {
                    ctx.strokeStyle = '#9b7330';
                    ctx.lineWidth = 2;
                    roundedRect(x, y, w, 100, 12);
                    ctx.stroke();

                    ctx.textAlign = 'left';
                    ctx.textBaseline = 'alphabetic';

                    ctx.fillStyle = '#f4e6c8';
                    ctx.font = 'bold 25px Georgia';
                    ctx.fillText(label, x + 28, y + 38);

                    ctx.font = 'bold 30px Georgia';
                    ctx.fillText(value || 'None', x + 28, y + 72);
                }

                function measureColumnList(items, columns, lineH) {
                    if (!items.length) return lineH;
                    return Math.ceil(items.length / columns) * lineH;
                }

                function drawColumnList(items, x, y, width, columns, color, font, lineH) {
                    var colGap = 42;
                    var colWidth = (width - colGap * (columns - 1)) / columns;
                    var rows = Math.ceil(Math.max(items.length, 1) / columns);

                    ctx.fillStyle = color;
                    ctx.font = font;
                    ctx.textAlign = 'left';
                    ctx.textBaseline = 'alphabetic';

                    if (!items.length) {
                        ctx.fillText('None', x, y);
                        return y + lineH;
                    }

                    items.forEach(function (item, index) {
                        var col = Math.floor(index / rows);
                        var row = index % rows;
                        var drawX = x + col * (colWidth + colGap);
                        var drawY = y + row * lineH;

                        ctx.fillText(item, drawX, drawY);
                    });

                    return y + rows * lineH;
                }

                var statsItems = statsList.map(function (statName) {
                    var value = totals.stats[statName];
                    var sign = value > 0 ? '+' : '';
                    return formatStatName(statName) + ': ' + sign + value;
                });

                var gainedItems = gainedList.map(function (spell) {
                    return '+ ' + spell;
                });

                var removedItems = removedList.map(function (spell) {
                    return '- ' + spell;
                });

                var statsHeight = measureColumnList(statsItems, 3, 30);
                var purchasedHeight = measureColumnList(purchasedDisplayNames, 2, 30);
                var gainedHeight = measureColumnList(gainedItems, 2, 30);
                var removedHeight = measureColumnList(removedItems, 2, 30);

                var summaryH = Math.max(430, 335 + statsHeight);
                var topRowH = Math.max(summaryH, qrH);
                var purchasedH = Math.max(280, 130 + purchasedHeight);
                var spellsH = Math.max(420, 250 + gainedHeight + removedHeight);

                canvas.width = cardWidth;
                canvas.height =
                    390 +
                    topRowH + 35 +
                    purchasedH + 35 +
                    spellsH + 180;

                ctx.fillStyle = '#05080d';
                ctx.fillRect(0, 0, canvas.width, canvas.height);

                ctx.strokeStyle = '#9b7330';
                ctx.lineWidth = 6;
                roundedRect(8, 8, canvas.width - 16, canvas.height - 16, 28);
                ctx.stroke();

                ctx.textAlign = 'center';
                ctx.fillStyle = '#d9a64d';
                ctx.font = 'bold 78px Georgia';
                ctx.fillText('EQOA: SANDSTORM', canvas.width / 2, 100);

                ctx.font = 'bold 46px Georgia';
                ctx.fillText('CLASS MASTERY CALCULATOR', canvas.width / 2, 155);

                ctx.fillStyle = '#f4e6c8';
                ctx.font = 'bold 38px Georgia';
                ctx.fillText('Unnamed CM Build', canvas.width / 2, 205);

                drawInfoBox('Race', raceSelect.value || 'None', margin, 250, 380);
                drawInfoBox('Class', classSelect.value || 'None', 480, 250, 380);
                drawInfoBox('Level', String(levelInput.value || '60'), 905, 250, 300);
                drawInfoBox('Path', (pathSelect && pathSelect.value) || 'None', 1250, 250, 495);

                drawPanel(margin, y, summaryW, topRowH, 'CM SUMMARY');
                drawPanel(margin + summaryW + gap, y, qrW, qrH, 'SCAN');

                ctx.fillStyle = '#f4e6c8';
                ctx.font = 'bold 29px Georgia';
                ctx.fillText('Master Class: ' + selectedTitle, margin + 45, y + 115);
                ctx.fillText('Points: ' + spent + ' / ' + available + ' spent', margin + 45, y + 155);
                ctx.fillText('Remaining: ' + remaining, margin + 45, y + 195);

                ctx.fillStyle = '#d9a64d';
                ctx.font = 'bold 30px Georgia';
                ctx.fillText('Stats Gained', margin + 45, y + 255);

                drawColumnList(statsItems, margin + 45, y + 295, summaryW - 90, 3, '#f4e6c8', 'bold 23px Georgia', 30);

                if (qrReady) {
                    var qrCanvas = document.createElement('canvas');

                    new QRious({
                        element: qrCanvas,
                        value: shareUrl,
                        size: 220,
                        background: 'white',
                        foreground: 'black',
                        level: 'M'
                    });

                    ctx.drawImage(qrCanvas, margin + summaryW + gap + 70, y + 105, 220, 220);
                }

                y += topRowH + 35;

                drawPanel(margin, y, panelW, purchasedH, 'PURCHASED CMS');
                drawColumnList(purchasedDisplayNames, margin + 45, y + 115, panelW - 90, 2, '#e066ff', 'bold 23px Georgia', 30);

                y += purchasedH + 35;

                drawPanel(margin, y, panelW, spellsH, 'SPELLS');

                ctx.fillStyle = '#8fd9ff';
                ctx.font = 'bold 30px Georgia';
                ctx.fillText('Gained', margin + 45, y + 115);

                var afterGainedY = drawColumnList(gainedItems, margin + 45, y + 155, panelW - 90, 2, '#8fd9ff', 'bold 22px Georgia', 30);

                ctx.fillStyle = '#ff8f8f';
                ctx.font = 'bold 30px Georgia';
                ctx.fillText('Removed', margin + 45, afterGainedY + 55);

                drawColumnList(removedItems, margin + 45, afterGainedY + 95, panelW - 90, 2, '#ff8f8f', 'bold 22px Georgia', 30);

                ctx.fillStyle = '#d9a64d';
                ctx.font = 'bold 30px Georgia';
                ctx.textAlign = 'center';
                ctx.fillText(
                    'EQOA: Sandstorm Wiki Class Mastery Calculator',
                    canvas.width / 2,
                    canvas.height - 55
                );

                var link = document.createElement('a');
                link.href = canvas.toDataURL('image/png');
                link.download = 'EQOA_CM_Build.png';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });
        }

        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 = [];
            var spellAdds;
            var spellRemoves;
            var reqHtml = '';
            var statMinHtml = '';
            var statMinReqHtml = '';

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

            spellAdds = safeArray(cm.spellsAdded).map(function (spell) {
                return '<div class="cm-tooltip-spell-add">+ ' + escapeHtml(spell) + '</div>';
            }).join('');

            spellRemoves = safeArray(cm.spellsRemoved).map(function (spell) {
                return '<div class="cm-tooltip-spell-remove">- ' + escapeHtml(spell) + '</div>';
            }).join('');

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

            statMinHtml = getStatMinRequirementsHtml(cm);

            if (statMinHtml) {
                statMinReqHtml =
                    '<div class="cm-tooltip-req">' +
                        'Stat Min: ' + statMinHtml +
                    '</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 +
                statMinReqHtml +
                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 cmName = String(cm.name || '');
                var cmPath = normalizePath(cm.lycanthropy);
                var bitePath = getBitePath(cmName);
                var pathOk = false;

                var raceOk =
                    !cmRaces.length ||
                    cmRaces.indexOf('All') !== -1 ||
                    cmRaces.indexOf(selectedRaceCode) !== -1;

                var classOk =
                    !cmClasses.length ||
                    cmClasses.indexOf('All') !== -1 ||
                    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 statMinHtml = getStatMinRequirementsHtml(cm);
                var chainHtml = getCmChainHtml(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>' +
                            (statMinHtml ? '<div class="cm-card-req">Stat Min: ' + statMinHtml + '</div>' : '') +
                            (chainHtml ? '<div class="cm-chain-preview">Chain: ' + chainHtml + '</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>' : '') +
                        (statMinHtml ? '<div class="cm-card-req">Stat Min: ' + statMinHtml + '</div>' : '') +
                        (chainHtml ? '<div class="cm-chain-preview">Chain: ' + chainHtml + '</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 (shareUrlButton) {
            shareUrlButton.addEventListener('click', function () {
                copyTextToClipboard(buildShareUrl(), shareUrlButton);
            });
        }

        if (exportCardButton) {
            exportCardButton.addEventListener('click', function () {
                renderBuildCard();
            });
        }

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

});