Transform the IcyVeins invocation list for Last Epoch into a more readable format

IcyVeinsInvocation.user.js

// ==UserScript==
// @name         IcyVeins Invocation
// @namespace    icy-veins.com
// @version      0.2
// @description  Transform the invocation list into a more readable format
// @author       rjf89
// @match        *://www.icy-veins.com/last-epoch/list-of-runic-invocations*
// @updateURL    https://gist.github.com/rf5860/2f579c742878fb78f9706056bf6960dd/raw/IcyVeinsInvocation.user.js
// @downloadURL  https://gist.github.com/rf5860/2f579c742878fb78f9706056bf6960dd/raw/IcyVeinsInvocation.user.js
// ==/UserScript==
(function () {
  // Make the main area a bit bigger
  document.querySelector('#main').style.width = '85%';
  document.querySelector('#center').style.width = '100%';
  document.querySelector('#center').style.maxWidth = '100%';
  let bgColor = getComputedStyle(document.querySelector('.image_block_content.selected')).backgroundColor;
  let [_, ...elementGroupButtons] = document.querySelectorAll('.image_block_header_buttons');
  /*
  For each button-group:
  - Get all the `<span>` elements
  - Append a copy of it to a new `<td>` element in a table
  */
  elementGroupButtons.forEach((elementGroupButton, index) => {
    // Create a container for the table, and add a header
    let container = document.createElement('div');
    container.style.backgroundColor = bgColor;
    container.style.padding = '10px';
    container.style.border = '1px solid black';
    container.style.borderRadius = '5px';
    container.style.margin = '10px';
    container.style.overflow = 'auto';
    container.style.maxHeight = '500px';
    document.querySelector('#center').appendChild(container);
    let header = document.createElement('h2');
    // Get the element text from the index:
    // 1 -> Cold, 2 -> Fire, 3 -> Lightning
    // Using an appropriate header text and background color
    let elementText = ['Cold', 'Fire', 'Lightning'][index];
    header.textContent = `${elementText} Invocation`;
    header.style.backgroundColor = bgColor;
    // Select a color for each element
    let color = ['blue', 'red', 'yellow'][index];
    header.style.color = color;
    container.appendChild(header);
    // Create a table for each button-group
    let table = document.createElement('table');
    // Make each row have a height of 100px
    table.style.height = '100%';
    table.style.width = '100%';
    table.style.tableLayout = 'fixed'; // Add this line to force equal-width columns
    container.appendChild(table);
    document.querySelector('.image_block_header').appendChild(container);
    // Create a row for each button-group
    let tr = document.createElement('tr');
    tr.style.backgroundColor = bgColor;
    table.appendChild(tr);
    // Create a cell for each button
    let [_, ...buttons] = elementGroupButton.querySelectorAll('span');
    buttons.forEach((button, index) => {
      // Get the corresponding image for each button, by removing `_button` from the span's ID and getting the corresponding `<div>`
      let image = document.querySelector(`#${button.id.replace('_button', '')}`);
      // Clone the div, give it a new id,  set the width to 100% to make it fill the cell, and change display to block to make it appear
      let clonedImage = image.cloneNode(true);
      clonedImage.id = `${button.id}_image`;
      // Add 'selected' to the classes
      clonedImage.classList.add('selected');
      clonedImage.style.width = '100%';
      clonedImage.style.bottom = '0';
      clonedImage.style.left = '0';
      clonedImage.style.right = '0';
      // clonedImage.style.display = 'block';
      // Ensure each image is centered in the cell and shows with the same height and width
      clonedImage.style.height = '100%';
      clonedImage.style.width = '100%';
      // Create a cell for each button
      let td = document.createElement('td');
      td.style.textAlign = 'center'; // Center the content horizontally
      td.style.verticalAlign = 'bottom'; // Bottom-align the content
      td.appendChild(clonedImage);
      tr.appendChild(td);
      // If the current index is divisible by 3 (0-based index), create a new row
      if ((index + 1) % 3 === 0) {
        tr = document.createElement('tr');
        tr.style.backgroundColor = bgColor;
        table.appendChild(tr);
      }
    });
  });
  console.info("Invocation tables transformed!");
})();