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 = '<b>Character Builder Error:</b> CharacterBuilderData.js did not load.';
    return;
  }

  var data = window.EQOA_BUILDER_DATA;
  var baseStats = data.baseStats;
  var classes = data.classes;

  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-stats">' +
        '<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><th>HP</th><th>POW</th><th>AC</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>' +
            '<td id="cb-hp">0</td>' +
            '<td id="cb-pow">0</td>' +
            '<td id="cb-ac">0</td>' +
          '</tr>' +
        '</table>' +
      '</div>' +
    '</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);
  }

  function loadRaces() {
    raceSelect.innerHTML = '';

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

  function loadClassesForRace() {
    var race = raceSelect.value;
    classSelect.innerHTML = '';

    if (!baseStats[race]) return;

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

    updateStats();
  }

  function updateStats() {
    var race = raceSelect.value;
    var classCode = classSelect.value;

    if (!baseStats[race] || !baseStats[race][classCode]) return;

    var stats = 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;
    document.getElementById('cb-hp').textContent = stats.hp || 0;
    document.getElementById('cb-pow').textContent = stats.pow || 0;
    document.getElementById('cb-ac').textContent = stats.ac || 0;
  }

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

  loadRaces();
  loadClassesForRace();
});