MediaWiki:Gadget-VaultAltarComponent.js

/*
 * Gadget: VaultAltarComponent
 * ----------------------------
 * Activated only when a <div class="js-vault-altar" id="vault-altar-component"> is present.
 * Loads Vault altar data from: MediaWiki:Vault_altar_ingredients.json
 */

(function () {
  const JSON_PAGE = 'MediaWiki:Vault_altar_ingredients.json';

  $(function () {
    const host = document.querySelector('.js-vault-altar#vault-altar-component');
    if (!host) return;

    $.getJSON(getRawURL(JSON_PAGE, 'application/json'))
      .done(data => initialise(host, data))
      .fail(() => host.textContent = '❌ Could not load altar data.');
  });

  function getRawURL(title, type) {
    return mw.util.wikiScript() +
      '?title=' + encodeURIComponent(title) +
      '&action=raw&ctype=' + encodeURIComponent(type || 'text/plain');
  }

  function initialise(root, data) {
  console.log('[VaultAltar] Loaded data:', data);

  const levels = Object.keys(data).map(Number).sort((a, b) => a - b);
  console.log('[VaultAltar] Available levels:', levels);

  if (!levels.length) {
    root.textContent = 'No data.';
    return;
  }

  const defaultLevel = levels[0];
  console.log('[VaultAltar] Default level to show:', defaultLevel);

    const header = $('<div>', { class: 'vault-altar-header' }).appendTo(root);
    header.append('<span>Vault Level </span>');
    const valueEl = $('<span>', { class: 'vault-altar-slider-value' }).appendTo(header);

    const slider = $('<input>', {
      type: 'range',
      min: levels[0],
      max: levels[levels.length - 1],
      value: levels[0],
      class: 'vault-altar-level-slider'
    }).appendTo(header);

    const output = $('<div>', { class: 'vault-altar-output' }).appendTo(root);

    slider.on('input change', () => render(+slider.val()));
    render(levels[0]);

    function render(level) {
      valueEl.text(level);
      output.empty();

      const entry = data[level];
      if (!entry) {
        output.text('No data for this level.');
        return;
      }

      Object.keys(entry).forEach(category => {
        const catBox = $('<div>', { class: 'vault-altar-category' }).appendTo(output);
        $('<h3>').text(capitalise(category)).appendTo(catBox);

        const table = $('<table>', { class: 'vault-altar-table' }).appendTo(catBox);
        table.append('<thead><tr><th>Item</th><th>Amount</th></tr></thead>');
        const tbody = $('<tbody>').appendTo(table);

        (entry[category] || []).forEach(row => {
          $('<tr>')
            .append($('<td>').text(row.item))
            .append($('<td>').text(row.amount))
            .appendTo(tbody);
        });
      });
    }
  }

  function capitalise(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
  }
})();