MediaWiki:Common.js

$(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'
  });
  
  // Create the radial menu structure
  var radialMenuHTML = `
    <div id="duneRadialMenu" class="dune-radial-menu">
      <a href="/Buildings" class="dune-radial-item">
        <i class="fa fa-building"></i>
        <span class="dune-radial-tooltip">Buildings</span>
      </a>
      <a href="/Items" class="dune-radial-item">
        <i class="fa fa-cube"></i>
        <span class="dune-radial-tooltip">Items</span>
      </a>
      <a href="/Crafting" class="dune-radial-item">
        <i class="fa fa-hammer"></i>
        <span class="dune-radial-tooltip">Crafting</span>
      </a>
      <a href="/Research" class="dune-radial-item">
        <i class="fa fa-flask"></i>
        <span class="dune-radial-tooltip">Research</span>
      </a>
      <a href="/Journeys" class="dune-radial-item">
        <i class="fa fa-map"></i>
        <span class="dune-radial-tooltip">Journeys</span>
      </a>
      <a href="/Vehicles" class="dune-radial-item">
        <i class="fa fa-car"></i>
        <span class="dune-radial-tooltip">Vehicles</span>
      </a>
      <a href="/Resources" class="dune-radial-item">
        <i class="fa fa-box"></i>
        <span class="dune-radial-tooltip">Resources</span>
      </a>
      <a href="/Main_Page" class="dune-radial-item">
        <i class="fa fa-home"></i>
        <span class="dune-radial-tooltip">Home</span>
      </a>
    </div>
    <div id="duneRadialOverlay" class="dune-radial-overlay"></div>
  `;
  
  // Add the menu to the page
  $('body').append(radialMenuHTML);
  
  // Create the logo container and breadcrumb
  var 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);
  
  // Add Font Awesome if not already present
  if ($('link[href*="font-awesome"]').length === 0) {
    $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">');
  }
  
  // Direct button click event
  $(document).on('click', '#duneLogoBtn', function(e) {
    e.preventDefault();
    e.stopPropagation();
    $('#duneRadialMenu').toggleClass('active');
    $('#duneRadialOverlay').toggleClass('active');
    console.log('Logo clicked'); // Debug output
  });
  
  // Close when clicking overlay
  $(document).on('click', '#duneRadialOverlay', function() {
    $('#duneRadialMenu').removeClass('active');
    $('#duneRadialOverlay').removeClass('active');
  });
});