MediaWiki:CharacterBuilder.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

mw.hook('wikipage.content').add(function () {

    var app = document.getElementById('character-builder-app');
    if (!app) return;

    if (!window.EQOA_BUILDER_DATA) {
        app.innerHTML = '<div style="color:red;">EQOA_BUILDER_DATA failed to load.</div>';
        return;
    }

    var data = window.EQOA_BUILDER_DATA;

    app.innerHTML = `
        <div class="character-builder-box">
            <div class="character-builder-title">
                EQOA Character Builder
            </div>

            <div class="character-builder-controls">
                <label>Race</label>
                <select id="cb-race"></select>

                <label>Class</label>
                <select id="cb-class"></select>
            </div>

            <div class="character-builder-section-title">
                Base Stats
            </div>

            <table class="character-builder-stat-table">
                <tr>
                    <th>STR</th>
                    <th>STA</th>
                    <th>AGI</th>
                    <th>DEX</th>
                    <th>WIS</th>
                    <th>INT</th>
                    <th>CHA</th>
                </tr>

                <tr>
                    <td id="cb-str">0</td>
                    <td id="cb-sta">0</td>
                    <td id="cb-agi">0</td>
                    <td id="cb-dex">0</td>
                    <td id="cb-wis">0</td>
                    <td id="cb-int">0</td>
                    <td id="cb-cha">0</td>
                </tr>
            </table>
        </div>
    `;

    var raceSelect = document.getElementById('cb-race');
    var classSelect = document.getElementById('cb-class');

    function addOption(select, value, label) {
        var option = document.createElement('option');
        option.value = value;
        option.textContent = label;
        select.appendChild(option);
    }

    Object.keys(data.baseStats).forEach(function(race) {
        addOption(raceSelect, race, race);
    });

    function loadClasses() {

        classSelect.innerHTML = '';

        var race = raceSelect.value;

        Object.keys(data.baseStats[race]).forEach(function(classCode) {

            var className = data.classes[classCode];

            addOption(
                classSelect,
                classCode,
                classCode + ' - ' + className
            );
        });

        updateStats();
    }

    function updateStats() {

        var race = raceSelect.value;
        var classCode = classSelect.value;

        var stats = data.baseStats[race][classCode];

        document.getElementById('cb-str').textContent = stats.str || 0;
        document.getElementById('cb-sta').textContent = stats.sta || 0;
        document.getElementById('cb-agi').textContent = stats.agi || 0;
        document.getElementById('cb-dex').textContent = stats.dex || 0;
        document.getElementById('cb-wis').textContent = stats.wis || 0;
        document.getElementById('cb-int').textContent = stats.int || 0;
        document.getElementById('cb-cha').textContent = stats.cha || 0;
    }

    raceSelect.addEventListener('change', loadClasses);
    classSelect.addEventListener('change', updateStats);

    loadClasses();

});