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;

    var gearSlots = [
    "Head",
    "Chest",
    "Hands",
    "Legs",
    "Feet",
    "Forearm",
    "Bracelet1",
    "Bracelet2",
    "Waist",
    "Neck",
    "Ear1",
    "Ear2",
    "Ring1",
    "Ring2",
    "Primary",
    "Secondary",
    "Shield",
    "Held1",
    "Held2",
    "Robe",
    "Range"
];

    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 class="character-builder-section-title" style="margin-top:18px;">Equipment</div>

            <div id="cb-gear-grid" class="character-builder-gear-grid"></div>
        </div>
    `;

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

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

    function buildGearSlots() {
        gearGrid.innerHTML = '';

        gearSlots.forEach(function(slot) {
            var slotBox = document.createElement('div');
            slotBox.className = 'character-builder-slot';

            slotBox.innerHTML =
                '<label>' + slot + '</label>' +
                '<select id="cb-slot-' + slot.toLowerCase() + '">' +
                    '<option value="">-- None --</option>' +
                '</select>';

            gearGrid.appendChild(slotBox);
        });
    }

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

    loadClasses();
    buildGearSlots();

});