MediaWiki:Common.js

// Image-based radial menu with 9 buttons (8 around + 1 center)
$(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 with placeholder images
  var radialMenuHTML = `
    <div id="duneRadialMenu" class="dune-radial-menu">
      <!-- Center button -->
      <a href="/Main_Page" class="dune-radial-center">
        <img src="https://dunedb.com/images/thumb/2/24/WikiPlaceholder.png/600px-WikiPlaceholder.png?20250401034151" alt="Home">
        <span class="dune-radial-tooltip">Home</span>
      </a>
      
      <!-- North button -->
      <a href="/Buildings" class="dune-radial-item north">
        <img src="https://dunedb.com/images/thumb/2/24/WikiPlaceholder.png/600px-WikiPlaceholder.png?20250401034151" alt="Buildings">
        <span class="dune-radial-tooltip">Buildings</span>
      </a>
      
      <!-- Northeast button -->
      <a href="/Items" class="dune-radial-item northeast">
        <img src="https://dunedb.com/images/thumb/2/24/WikiPlaceholder.png/600px-WikiPlaceholder.png?20250401034151" alt="Items">
        <span class="dune-radial-tooltip">Items</span>
      </a>
      
      <!-- East button -->
      <a href="/Crafting" class="dune-radial-item east">
        <img src="https://dunedb.com/images/thumb/2/24/WikiPlaceholder.png/600px-WikiPlaceholder.png?20250401034151" alt="Crafting">
        <span class="dune-radial-tooltip">Crafting</span>
      </a>
      
      <!-- Southeast button -->
      <a href="/Research" class="dune-radial-item southeast">
        <img src="https://dunedb.com/images/thumb/2/24/WikiPlaceholder.png/600px-WikiPlaceholder.png?20250401034151" alt="Research">
        <span class="dune-radial-tooltip">Research</span>
      </a>
      
      <!-- South button -->
      <a href="/Journeys" class="dune-radial-item south">
        <img src="https://dunedb.com/images/thumb/2/24/WikiPlaceholder.png/600px-WikiPlaceholder.png?20250401034151" alt="Journeys">
        <span class="dune-radial-tooltip">Journeys</span>
      </a>
      
      <!-- Southwest button -->
      <a href="/Vehicles" class="dune-radial-item southwest">
        <img src="https://dunedb.com/images/thumb/2/24/WikiPlaceholder.png/600px-WikiPlaceholder.png?20250401034151" alt="Vehicles">
        <span class="dune-radial-tooltip">Vehicles</span>
      </a>
      
      <!-- West button -->
      <a href="/Resources" class="dune-radial-item west">
        <img src="https://dunedb.com/images/thumb/2/24/WikiPlaceholder.png/600px-WikiPlaceholder.png?20250401034151" alt="Resources">
        <span class="dune-radial-tooltip">Resources</span>
      </a>
      
      <!-- Northwest button -->
      <a href="/Weapons" class="dune-radial-item northwest">
        <img src="https://dunedb.com/images/thumb/2/24/WikiPlaceholder.png/600px-WikiPlaceholder.png?20250401034151" alt="Weapons">
        <span class="dune-radial-tooltip">Weapons</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);
  
  // 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');
  });
});