MediaWiki:CharacterBuilder.js: Difference between revisions

From EQOA Sandstorm Wiki
Jump to navigationJump to search
No edit summary
No edit summary
Line 10: Line 10:


     var data = window.EQOA_BUILDER_DATA;
     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 = `
     app.innerHTML = `
         <div class="character-builder-box">
         <div class="character-builder-box">
             <div class="character-builder-title">
             <div class="character-builder-title">EQOA Character Builder</div>
                EQOA Character Builder
            </div>


             <div class="character-builder-controls">
             <div class="character-builder-controls">
Line 25: Line 47:
             </div>
             </div>


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


             <table class="character-builder-stat-table">
             <table class="character-builder-stat-table">
Line 39: Line 59:
                     <th>CHA</th>
                     <th>CHA</th>
                 </tr>
                 </tr>
                 <tr>
                 <tr>
                     <td id="cb-str">0</td>
                     <td id="cb-str">0</td>
Line 50: Line 69:
                 </tr>
                 </tr>
             </table>
             </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>
         </div>
     `;
     `;
Line 55: Line 78:
     var raceSelect = document.getElementById('cb-race');
     var raceSelect = document.getElementById('cb-race');
     var classSelect = document.getElementById('cb-class');
     var classSelect = document.getElementById('cb-class');
    var gearGrid = document.getElementById('cb-gear-grid');


     function addOption(select, value, label) {
     function addOption(select, value, label) {
Line 68: Line 92:


     function loadClasses() {
     function loadClasses() {
         classSelect.innerHTML = '';
         classSelect.innerHTML = '';


Line 74: Line 97:


         Object.keys(data.baseStats[race]).forEach(function(classCode) {
         Object.keys(data.baseStats[race]).forEach(function(classCode) {
 
             var className = data.classes[classCode] || classCode;
             var className = data.classes[classCode];
             addOption(classSelect, classCode, classCode + ' - ' + className);
 
             addOption(
                classSelect,
                classCode,
                classCode + ' - ' + className
            );
         });
         });


Line 88: Line 105:


     function updateStats() {
     function updateStats() {
         var race = raceSelect.value;
         var race = raceSelect.value;
         var classCode = classSelect.value;
         var classCode = classSelect.value;
Line 101: Line 117:
         document.getElementById('cb-int').textContent = stats.int || 0;
         document.getElementById('cb-int').textContent = stats.int || 0;
         document.getElementById('cb-cha').textContent = stats.cha || 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);
        });
     }
     }


Line 107: Line 140:


     loadClasses();
     loadClasses();
    buildGearSlots();


});
});

Revision as of 02:38, 14 May 2026

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

});