MediaWiki:Common.js

// MediaWiki Radial Menu with Custom Icons
$(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'
  });
  
  // Define menu items with icon paths
  const menuItems = [
    { id: "resources", name: "Resources", icon: "/images/ResourceNavIcon.png", position: "north" },
    { id: "crafting", name: "Crafting", icon: "/images/CraftingNavIcon.png", position: "northeast" },
    { id: "refining", name: "Refining", icon: "/images/RefiningNavIcon.png", position: "east" },
    { id: "vehicles", name: "Vehicles", icon: "/images/VehiclesNavIcon.png", position: "southeast" },
    { id: "armor", name: "Armor", icon: "/images/ArmorNavIcon.png", position: "south" },
    { id: "build", name: "Building", icon: "/images/BuildNavIcon.png", position: "southwest" },
    { id: "skills", name: "Skills", icon: "/images/SkillsNavIcon.png", position: "west" },
    { id: "technology", name: "Technology", icon: "/images/TechnologyNavIcon.png", position: "northwest" }
  ];
  
  // Create the center button HTML
  const centerButtonHTML = `
    <a href="/Main_Page" class="dune-radial-center">
      <img src="/images/QuestIconNav.png" alt="Home">
      <span class="dune-radial-tooltip">Home</span>
    </a>
  `;
  
  // Create the radial menu items HTML
  let radialItemsHTML = '';
  menuItems.forEach(item => {
    radialItemsHTML += `
      <a href="/${item.id}" class="dune-radial-item ${item.position}">
        <img src="${item.icon}" alt="${item.name}">
        <span class="dune-radial-tooltip">${item.name}</span>
      </a>
    `;
  });
  
  // Create the complete radial menu structure
  const radialMenuHTML = `
    <div id="duneRadialMenu" class="dune-radial-menu">
      ${centerButtonHTML}
      ${radialItemsHTML}
    </div>
    <div id="duneRadialOverlay" class="dune-radial-overlay"></div>
  `;
  
  // Add the menu to the page
  $('body').append(radialMenuHTML);
  
  // Create the logo container and breadcrumb
  const breadcrumbHTML = `
    <div class="dune-breadcrumb-nav">
      <a id="duneLogoBtn" class="dune-logo-btn">
        <img src="https://dunedb.com/favicon.ico" alt="DuneDB Logo" class="dune-logo">
      </a>
      <a href="/Main_Page">Home</a>
      <span class="dune-breadcrumb-separator">/</span>
      <a href="/Buildings">Buildings</a>
      <span class="dune-breadcrumb-separator">/</span>
      <a href="/Buildings/Refiners">Refiners</a>
      <span class="dune-breadcrumb-separator">/</span>
      <span>${$('h1.firstHeading').text() || $('.mw-page-title-main').text()}</span>
    </div>
  `;
  
  // Add the breadcrumb after the title
  $('h1.firstHeading, .mw-page-title-main').parent().after(breadcrumbHTML);
  
  // Opening animation effect
  const openMenu = () => {
    $('#duneRadialMenu').addClass('active');
    $('#duneRadialOverlay').addClass('active');
    
    // Add sequential animation to each item
    $('.dune-radial-item').each(function(index) {
      const $item = $(this);
      setTimeout(() => {
        $item.addClass('animated');
      }, index * 50);
    });
    
    // Animate center button last
    setTimeout(() => {
      $('.dune-radial-center').addClass('animated');
    }, menuItems.length * 50);
  };
  
  // Closing animation effect
  const closeMenu = () => {
    $('.dune-radial-item, .dune-radial-center').removeClass('animated');
    
    setTimeout(() => {
      $('#duneRadialMenu').removeClass('active');
      $('#duneRadialOverlay').removeClass('active');
    }, 300);
  };
  
  // Toggle menu when clicking the logo button
  $(document).on('click', '#duneLogoBtn', function(e) {
    e.preventDefault();
    e.stopPropagation();
    
    if ($('#duneRadialMenu').hasClass('active')) {
      closeMenu();
    } else {
      openMenu();
    }
  });
  
  // Close when clicking overlay
  $(document).on('click', '#duneRadialOverlay', function() {
    closeMenu();
  });
  
  // Close menu with ESC key
  $(document).on('keydown', function(e) {
    if (e.key === 'Escape' && $('#duneRadialMenu').hasClass('active')) {
      closeMenu();
    }
  });
});