MediaWiki:Common.js

// Final Radial Menu with Square Buttons and Home Icon
$(document).ready(function() {
  // Remove the "From Dune Awakening DB" tagline
  $('#tagline').remove();

  // Reduce spacing above the title
  $('h1.title, .mw-page-title-main, h1.firstHeading').css({
    'margin-top': '0',
    'padding-top': '5px',
    'line-height': '1.2'
  });

  const menuItems = [
    { id: "resources", name: "Resources", shortname: "Resou", icon: "https://dunedb.com/images/0/08/ResourcesNavIcon.png", position: "north", subcategories: [ { name: "Metals", url: "https://dunedb.com/Resources/Metals" }, { name: "Chemicals", url: "https://dunedb.com/Resources/Chemicals" } ] },
    { id: "crafting", name: "Crafting", shortname: "Craft", icon: "https://dunedb.com/images/d/d7/CraftingNavIcon.png", position: "northeast", subcategories: [ { name: "Blueprints", url: "https://dunedb.com/Crafting/Blueprints" }, { name: "Stations", url: "https://dunedb.com/Crafting/Stations" } ] },
    { id: "refining", name: "Refining", shortname: "Refin", icon: "https://dunedb.com/images/5/5e/RefiningNavIcon.png", position: "east", subcategories: [ { name: "Refineries", url: "https://dunedb.com/Refining/Refineries" }, { name: "Processes", url: "https://dunedb.com/Refining/Processes" } ] },
    { id: "vehicles", name: "Vehicles", shortname: "Vehic", icon: "https://dunedb.com/images/0/06/VehiclesNavIcon.png", position: "southeast", subcategories: [ { name: "Land Vehicles", url: "https://dunedb.com/Vehicles/Land" }, { name: "Aircraft", url: "https://dunedb.com/Vehicles/Aircraft" } ] },
    { id: "armor", name: "Armor", shortname: "Armo", icon: "https://dunedb.com/images/a/ae/ArmorNavIcon.png", position: "south", subcategories: [ { name: "Light Armor", url: "https://dunedb.com/Armor/Light" }, { name: "Heavy Armor", url: "https://dunedb.com/Armor/Heavy" } ] },
    { id: "building", name: "Building", shortname: "Build", icon: "https://dunedb.com/images/5/58/BuildNavIcon.png", position: "southwest", subcategories: [ { name: "Bases", url: "https://dunedb.com/Building/Bases" }, { name: "Structures", url: "https://dunedb.com/Building/Structures" } ] },
    { id: "skills", name: "Skills", shortname: "Skills", icon: "https://dunedb.com/images/a/a8/SkillsNavIcon.png", position: "west", subcategories: [ { name: "Combat", url: "https://dunedb.com/Skills/Combat" }, { name: "Survival", url: "https://dunedb.com/Skills/Survival" } ] },
    { id: "technology", name: "Technology", shortname: "Techn", icon: "https://dunedb.com/images/0/05/TechnologyNavIcon.png", position: "northwest", subcategories: [ { name: "Research", url: "https://dunedb.com/Technology/Research" }, { name: "Equipment", url: "https://dunedb.com/Technology/Equipment" } ] }
  ];

  const centerButtonHTML = `
    <a href="https://dunedb.com/Main_Page" class="dune-radial-center">
      <img src="https://dunedb.com/images/9/99/HomeNavIcon.png" alt="Home" class="dune-radial-icon">
      <span class="dune-radial-tooltip">Main Page</span>
    </a>
  `;

  let radialItemsHTML = '';
  menuItems.forEach(item => {
    radialItemsHTML += `
      <div class="dune-radial-item-container ${item.position}">
        <a data-id="${item.id}" class="dune-radial-item">
          <img src="${item.icon}" alt="${item.name}" class="dune-radial-icon">
          <span class="dune-radial-tooltip">${item.name}</span>
        </a>
      </div>
    `;
  });

  const radialMenuHTML = `
    <div id="duneRadialMenu" class="dune-radial-menu">
      <div class="dune-radial-background">
        <div class="dune-radial-circle outer"></div>
        <div class="dune-radial-circle middle"></div>
        <div class="dune-radial-circle inner"></div>
      </div>
      ${centerButtonHTML}
      ${radialItemsHTML}
    </div>
    <div id="duneRadialOverlay" class="dune-radial-overlay"></div>
  `;

  const subcategoryContainerHTML = `<div id="duneSubcategoryContainer" class="dune-subcategory-container"></div>`;
  $('body').append(radialMenuHTML);
  $('body').append(subcategoryContainerHTML);

  const breadcrumbHTML = `
    <div class="dune-breadcrumb-nav">
      <a id="duneLogoBtn" class="dune-logo-btn">
        <img src="https://dunedb.com/images/9/99/HomeNavIcon.png" alt="DuneDB Logo" class="dune-logo">
      </a>
      <a href="https://dunedb.com/Main_Page" class="breadcrumb-home-link">
        <span>Home</span>
      </a>
      <span class="dune-breadcrumb-separator">/</span>
      <a href="https://dunedb.com/Buildings">Buildings</a>
      <span class="dune-breadcrumb-separator">/</span>
      <a href="https://dunedb.com/Buildings/Refiners">Refiners</a>
      <span class="dune-breadcrumb-separator">/</span>
      <span>${$('h1.firstHeading').text() || $('.mw-page-title-main').text()}</span>
    </div>
  `;
  $('h1.firstHeading, .mw-page-title-main').parent().after(breadcrumbHTML);

  const openMenu = () => {
    $('#duneRadialMenu').addClass('active');
    $('#duneRadialOverlay').addClass('active');
    $('.dune-radial-item-container').each(function(index) {
      const $item = $(this);
      setTimeout(() => {
        $item.addClass('animated');
      }, index * 50);
    });
    setTimeout(() => {
      $('.dune-radial-center').addClass('animated');
    }, menuItems.length * 50);
  };

  const closeMenu = () => {
    hideSubcategories();
    $('.dune-radial-item-container, .dune-radial-center').removeClass('animated');
    setTimeout(() => {
      $('#duneRadialMenu').removeClass('active');
      $('#duneRadialOverlay').removeClass('active');
    }, 300);
  };

  const isMobile = () => window.innerWidth <= 768;

  const showSubcategories = (itemId, event) => {
    const item = menuItems.find(i => i.id === itemId);
    if (!item || !item.subcategories) return;
    $('.dune-radial-item').removeClass('selected');
    $(`.dune-radial-item[data-id="${itemId}"]`).addClass('selected');

    let subcategoryHTML = `
      <div class="dune-subcategory-header">
        <img src="${item.icon}" alt="${item.name}" class="dune-subcategory-icon">
        <span>${item.name}</span>
      </div>
      <div class="dune-subcategory-items">
    `;

    item.subcategories.forEach((sub, index) => {
      subcategoryHTML += `
        <a href="${sub.url}" class="dune-subcategory-item" style="--item-index: ${index}">
          <span class="dune-subcategory-name">${sub.name}</span>
        </a>
      `;
    });

    subcategoryHTML += `
      </div>
      <div class="dune-subcategory-footer">
        <a href="https://dunedb.com/${item.id}" class="dune-subcategory-all">View All ${item.name}</a>
      </div>
    `;

    const $subcategoryContainer = $('#duneSubcategoryContainer');
    $subcategoryContainer.html(subcategoryHTML);

    $subcategoryContainer.removeClass((index, className) => {
      return (className.match(/from-\S+/g) || []).join(' ');
    });
    $subcategoryContainer.addClass(`from-${item.position}`);
    $subcategoryContainer.addClass('active');

    event.stopPropagation();
  };

  const hideSubcategories = () => {
    $('#duneSubcategoryContainer').removeClass('active');
    $('.dune-radial-item').removeClass('selected');
  };

  $(document).on('click', '#duneLogoBtn', function(e) {
    e.preventDefault();
    e.stopPropagation();
    if ($('#duneRadialMenu').hasClass('active')) {
      closeMenu();
    } else {
      openMenu();
    }
  });

  $(document).on('click', '.dune-radial-item', function(e) {
    e.preventDefault();
    e.stopPropagation();
    const itemId = $(this).data('id');
    if ($(this).hasClass('selected')) {
      hideSubcategories();
    } else {
      showSubcategories(itemId, e);
    }
  });

  $(document).on('click', '#duneRadialMenu', function(e) {
    if (!$(e.target).closest('.dune-radial-item').length) {
      hideSubcategories();
    }
  });

  $(document).on('click', '#duneRadialOverlay', function() {
    closeMenu();
  });

  $(document).on('keydown', function(e) {
    if (e.key === 'Escape') {
      if ($('#duneSubcategoryContainer').hasClass('active')) {
        hideSubcategories();
      } else if ($('#duneRadialMenu').hasClass('active')) {
        closeMenu();
      }
    }
  });

  $(window).on('resize', function() {
    if ($('#duneSubcategoryContainer').hasClass('active')) {
      const itemId = $('.dune-radial-item.selected').data('id');
      if (itemId) {
        hideSubcategories();
        showSubcategories(itemId, { stopPropagation: function() {} });
      }
    }
  });
});