Dune Awakening DB - User contributions [en]

MediaWiki:Gadget-ResourcePage.js

2025-06-04T05:51:37Z

Operator:

/**
* ResourcePage Gadget - Complete Fixed Version
* Handles recipe popups and search functionality for resource pages
*
* @requires jquery
* @requires mediawiki.api
* @requires mediawiki.util
*/

(function($, mw) {
'use strict';

// Only run on pages with resource page elements
if (!$('.crafting-section, .recipe-table').length) {
return;
}

console.log('[ResourcePage] Gadget loading...');

// Cache for storing recipe data
var recipeCache = {
craftedWith: null,
craftedFrom: null
};

// Initialize module
function init() {
console.log('[ResourcePage] Initializing...');

// Add required styles
injectRequiredStyles();

// Add table search functionality
initTableSearch();

// Add popup handlers - FIXED VERSION
initPopupHandlers();

// Format tables
formatTables();

// Add animation styles
addAnimationStyles();
}

// Inject required CSS
function injectRequiredStyles() {
if ($('#resourcePageGadgetStyles').length === 0) {
var styles = `<style id="resourcePageGadgetStyles">
/* Span button styles */
.dune-action-button {
display: inline-block !important;
cursor: pointer !important;
user-select: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
}

/* Loading spinner */
.loading-spinner {
font-size: 48px;
animation: spin 1s linear infinite;
}

@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

/* Sort indicators */
.recipe-popup-table th {
cursor: pointer;
user-select: none;
}

.recipe-popup-table th.sort-asc::after {
content: " ↑";
color: #fce7c8;
}

.recipe-popup-table th.sort-desc::after {
content: " ↓";
color: #fce7c8;
}

/* Popup note */
.popup-note {
background: rgba(252,231,200,.1);
border: 1px solid rgba(252,231,200,.3);
padding: 10px;
margin-bottom: 15px;
color: #E3BB7A;
text-align: center;
}

/* Recipe count */
.recipe-count {
position: absolute;
right: 60px;
top: 50%;
transform: translateY(-50%);
color: #E3BB7A;
font-size: 14px;
}

/* Popup stats */
.popup-stats {
color: #E3BB7A;
font-size: 13px;
margin-left: 15px;
}

/* Popup controls */
.popup-controls {
display: flex;
align-items: center;
margin-bottom: 15px;
gap: 15px;
}

.popup-search-container {
flex: 1;
}
</style>`;

$('head').append(styles);
}
}

// Format tables to ensure proper styling
function formatTables() {
$('.recipe-table').each(function() {
var $table = $(this);

// Ensure proper header styling
$table.find('thead tr').addClass('tr-dark');

// Add wrapper if missing
if (!$table.parent().hasClass('dune-table-wrapper')) {
$table.wrap('<div class="dune-table-wrapper"></div>');
}
});
}

// Initialize table search functionality
function initTableSearch() {
// Create search inputs if they don't exist
$('.crafting-section').each(function() {
var $section = $(this);
var $table = $section.find('.recipe-table');

if ($table.length && !$section.find('.recipe-search-container').length) {
var searchHtml = '<div class="recipe-search-container">' +
'<input type="text" class="recipe-search-input" placeholder="Search recipes...">' +
'</div>';
$section.find('.dune-card-description').after(searchHtml);
}
});

// Bind search functionality
$(document).on('input', '.recipe-search-input', function() {
var $input = $(this);
var $table = $input.closest('.crafting-section').find('.recipe-table');
filterTable($table, $input.val());
});
}

// Filter table rows based on search input
function filterTable($table, searchTerm) {
var term = searchTerm.toLowerCase();

$table.find('tbody tr').each(function() {
var $row = $(this);
var text = $row.text().toLowerCase();

if (text.indexOf(term) > -1) {
$row.show();
} else {
$row.hide();
}
});
}

// FIXED: Initialize popup handlers with event delegation
function initPopupHandlers() {
console.log('[ResourcePage] Setting up popup handlers...');

// View All Crafted With - using event delegation
$(document).on('click', '.view-all-crafted-with', function(e) {
e.preventDefault();
e.stopPropagation();
console.log('[ResourcePage] View All Crafted With clicked');

var $element = $(this);
var resourceName = $element.data('resource') || $element.attr('data-resource');

if (!resourceName) {
console.error('[ResourcePage] No resource name found!');
return false;
}

showRecipePopup('craftedWith', resourceName);
return false;
});

// View All Crafted From - using event delegation
$(document).on('click', '.view-all-crafted-from', function(e) {
e.preventDefault();
e.stopPropagation();
console.log('[ResourcePage] View All Crafted From clicked');

var $element = $(this);
var resourceName = $element.data('resource') || $element.attr('data-resource');

if (!resourceName) {
console.error('[ResourcePage] No resource name found!');
return false;
}

showRecipePopup('craftedFrom', resourceName);
return false;
});

// Close popup - overlay click
$(document).on('click', '.recipe-popup-overlay', function(e) {
if (e.target === this) {
console.log('[ResourcePage] Overlay clicked - closing popup');
closeRecipePopup();
}
});

// Close popup - close button
$(document).on('click', '.popup-close', function(e) {
e.preventDefault();
e.stopPropagation();
console.log('[ResourcePage] Close button clicked');
closeRecipePopup();
return false;
});

// Escape key to close popup
$(document).on('keydown', function(e) {
if (e.key === 'Escape' && $('.recipe-popup-overlay').length > 0) {
console.log('[ResourcePage] Escape key pressed - closing popup');
closeRecipePopup();
}
});

// Prevent text selection on span buttons
$(document).on('selectstart', '.dune-action-button', function(e) {
e.preventDefault();
return false;
});

// Add hover logging for debugging
$(document).on('mouseenter', '.dune-action-button', function() {
console.log('[ResourcePage] Hovering over button:', $(this).text());
});
}

// Show recipe popup
function showRecipePopup(type, resourceName) {
console.log('[ResourcePage] Showing popup for:', type, resourceName);

var title = type === 'craftedWith'
? 'All Recipes Using ' + resourceName
: 'All Recipes Creating ' + resourceName;

// Show loading state
showLoadingPopup();

// First, check for full data in hidden elements
var dataSelector = '.' + type.replace('craftedWith', 'crafted-with').replace('craftedFrom', 'crafted-from') + '-full-data';
var $fullDataElement = $(dataSelector);

console.log('[ResourcePage] Looking for data in:', dataSelector);

if ($fullDataElement.length && $fullDataElement.text().trim()) {
try {
// Parse JSON data from hidden element
var jsonText = $fullDataElement.text().trim();
console.log('[ResourcePage] Found JSON data, parsing...');

var jsonData = JSON.parse(jsonText);
var rows = jsonData.results || jsonData || [];

console.log('[ResourcePage] Parsed', rows.length, 'rows');

// Transform to expected format
var formattedRows = rows.map(function(row) {
return {
item: formatItemName(row.OutputItem || row.output_item || ''),
resources: formatResourceList(row.Resources || row.resources || ''),
stations: formatStations(row.Stations || row.station || row.stations || ''),
water: formatWater(row.WaterML || row.water_ml),
craftTime: formatCraftTime(row.CraftTime || row.craft_time),
schematic: formatSchematic(row.Schematic || row.schematic)
};
});

displayPopup(title, formattedRows, false);
return;
} catch (e) {
console.error('[ResourcePage] Failed to parse full recipe data:', e);
}
}

// Fallback to API call
console.log('[ResourcePage] No cached data found, making API call...');
fetchRecipeDataViaAPI(type, resourceName, title);
}

// Format item name (handle wiki links)
function formatItemName(name) {
if (!name) return 'Unknown';

// Handle wiki links if present
if (name.indexOf('[[') > -1) {
return name.replace(/\[\[([^\|]+)\|?([^\]]*)\]\]/g, function(match, link, display) {
return '<a href="/wiki/' + link.replace(/ /g, '_') + '">' + (display || link) + '</a>';
});
}
return name;
}

// Format resource list for display
function formatResourceList(resources) {
if (!resources) return 'None';

// If it's already HTML formatted, return as is
if (resources.indexOf('<br') > -1) {
return resources;
}

// Otherwise, split by semicolons or newlines and format
return resources.split(/[;\n]/).map(function(r) {
return r.trim();
}).filter(Boolean).join('<br>');
}

// Format stations
function formatStations(stations) {
if (!stations) return 'Unknown';

// Handle multiple stations
return stations.split(/[;,]/).map(function(s) {
return s.trim();
}).filter(Boolean).join('<br>');
}

// Format water amount
function formatWater(water) {
if (!water || water === '0' || water === 'N/A') return 'N/A';
return parseInt(water).toLocaleString() + ' mL';
}

// Format craft time
function formatCraftTime(time) {
if (!time || time === '0' || time === 'N/A') return 'Instant';

var seconds = parseInt(time);
if (isNaN(seconds)) return time;

if (seconds < 60) return seconds + 's';
if (seconds < 3600) {
var mins = Math.floor(seconds / 60);
var secs = seconds % 60;
return mins + 'm ' + (secs > 0 ? secs + 's' : '');
}

var hours = Math.floor(seconds / 3600);
var mins = Math.floor((seconds % 3600) / 60);
return hours + 'h ' + (mins > 0 ? mins + 'm' : '');
}

// Format schematic
function formatSchematic(schematic) {
if (!schematic || schematic === 'N/A' || schematic === 'None') return 'None';
return formatItemName(schematic);
}

// Fetch recipe data via API
function fetchRecipeDataViaAPI(type, resourceName, title) {
$.ajax({
url: mw.util.wikiScript('api'),
data: {
action: 'parse',
format: 'json',
page: mw.config.get('wgPageName'),
prop: 'text',
disablelimitreport: true,
disableeditsection: true,
disabletoc: true
},
success: function(response) {
if (response.parse && response.parse.text) {
var html = response.parse.text['*'];
var $html = $('<div>').html(html);

// Try to find full data first
var dataSelector = '.' + type.replace('craftedWith', 'crafted-with').replace('craftedFrom', 'crafted-from') + '-full-data';
var $dataElement = $html.find(dataSelector);

if ($dataElement.length && $dataElement.text().trim()) {
try {
var jsonData = JSON.parse($dataElement.text().trim());
var rows = (jsonData.results || jsonData || []).map(function(row) {
return {
item: formatItemName(row.OutputItem || row.output_item || ''),
resources: formatResourceList(row.Resources || row.resources || ''),
stations: formatStations(row.Stations || row.station || row.stations || ''),
water: formatWater(row.WaterML || row.water_ml),
craftTime: formatCraftTime(row.CraftTime || row.craft_time),
schematic: formatSchematic(row.Schematic || row.schematic)
};
});

console.log('[ResourcePage] Found full data via API:', rows.length, 'rows');
displayPopup(title, rows, false);
return;
} catch (e) {
console.error('[ResourcePage] Failed to parse API JSON data:', e);
}
}

// Fallback to parsing table
var tableId = type === 'craftedWith' ? '#craftedWithTable' : '#craftedFromTable';
var $table = $html.find(tableId);

var rows = [];
$table.find('tbody tr').each(function() {
var $cells = $(this).find('td');
if ($cells.length >= 3) {
rows.push({
item: $cells.eq(0).html(),
resources: $cells.eq(1).html(),
stations: $cells.eq(2).html(),
water: 'N/A',
craftTime: 'N/A',
schematic: 'N/A'
});
}
});

console.log('[ResourcePage] Found', rows.length, 'rows via API table parsing');
displayPopup(title, rows, rows.length < 10); // Mark as limited if less than 10
}
},
error: function(xhr, status, error) {
console.error('[ResourcePage] API call failed:', error);
var rows = getVisibleRows(type);
displayPopup(title, rows, true);
}
});
}

// Get visible rows as fallback
function getVisibleRows(type) {
var $table = $(type === 'craftedWith' ? '#craftedWithTable' : '#craftedFromTable');
var rows = [];

$table.find('tbody tr').each(function() {
var $row = $(this);
var $cells = $row.find('td');

if ($cells.length >= 3) {
rows.push({
item: $cells.eq(0).html(),
resources: $cells.eq(1).html(),
stations: $cells.eq(2).html(),
water: 'N/A',
craftTime: 'N/A',
schematic: 'N/A'
});
}
});

console.log('[ResourcePage] Using visible rows:', rows.length);
return rows;
}

// Show loading popup
function showLoadingPopup() {
var loadingHtml = '<div class="recipe-popup-overlay active">' +
'<div class="recipe-popup">' +
'<div class="popup-content" style="text-align: center; padding: 60px;">' +
'<div style="font-size: 24px; color: #fce7c8; margin-bottom: 20px;">Loading recipes...</div>' +
'<div class="loading-spinner">⟳</div>' +
'</div>' +
'</div>' +
'</div>';

$('body').append(loadingHtml);
}

// Display popup with data
function displayPopup(title, rows, isLimited) {
// Remove any existing popup
$('.recipe-popup-overlay').remove();

// Build table rows HTML
var tableRowsHtml = '';
rows.forEach(function(row, index) {
tableRowsHtml += '<tr data-index="' + index + '">' +
'<td>' + row.item + '</td>' +
'<td>' + row.resources + '</td>' +
'<td>' + row.stations + '</td>' +
'<td>' + row.water + '</td>' +
'<td>' + row.craftTime + '</td>' +
'<td>' + row.schematic + '</td>' +
'</tr>';
});

// Note if data is limited
var limitedNote = isLimited ?
'<div class="popup-note">Note: This may not show all recipes. Reload the page to see full data.</div>' :
'';

// Build popup HTML
var popupHtml = '<div class="recipe-popup-overlay">' +
'<div class="recipe-popup">' +
'<div class="popup-header">' +
'<h3 class="popup-title">' + title + '</h3>' +
'<span class="recipe-count">' + rows.length + ' recipe' + (rows.length !== 1 ? 's' : '') + '</span>' +
'<button class="popup-close">×</button>' +
'</div>' +
'<div class="popup-content">' +
limitedNote +
'<div class="popup-controls">' +
'<div class="popup-search-container">' +
'<input type="text" class="popup-search-input" placeholder="Search recipes..." id="popupSearchInput">' +
'</div>' +
'<div class="popup-stats">' +
'<span class="visible-count">' + rows.length + '</span> of <span class="total-count">' + rows.length + '</span> shown' +
'</div>' +
'</div>' +
'<div class="popup-table-wrapper">' +
'<table class="infobox-dune-standard-table recipe-popup-table" id="popupRecipeTable">' +
'<thead>' +
'<tr class="tr-dark">' +
'<th data-sort="item" class="sortable">Item Created</th>' +
'<th data-sort="resources" class="sortable">Resources Needed</th>' +
'<th data-sort="stations" class="sortable">Stations</th>' +
'<th data-sort="water" class="sortable">Water (mL)</th>' +
'<th data-sort="time" class="sortable">Craft Time</th>' +
'<th data-sort="schematic" class="sortable">Schematic</th>' +
'</tr>' +
'</thead>' +
'<tbody>' + tableRowsHtml + '</tbody>' +
'</table>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';

// Add to page
$('body').append(popupHtml);

// Activate popup
setTimeout(function() {
$('.recipe-popup-overlay').addClass('active');
}, 10);

// Initialize popup functionality
initPopupFunctionality();
}

// Initialize popup functionality (search and sort)
function initPopupFunctionality() {
var $searchInput = $('#popupSearchInput');
var $visibleCount = $('.visible-count');
var $totalCount = $('.total-count');
var totalRows = $('#popupRecipeTable tbody tr').length;

// Search functionality with counting
$searchInput.on('input', function() {
var searchTerm = $(this).val().toLowerCase();
var visibleRows = 0;

$('#popupRecipeTable tbody tr').each(function() {
var $row = $(this);
var text = $row.text().toLowerCase();

if (searchTerm === '' || text.indexOf(searchTerm) > -1) {
$row.show();
visibleRows++;
} else {
$row.hide();
}
});

$visibleCount.text(visibleRows);
});

// Sort functionality
$('#popupRecipeTable thead th.sortable').on('click', function() {
var $th = $(this);
var sortKey = $th.data('sort');
var $tbody = $('#popupRecipeTable tbody');
var rows = $tbody.find('tr').toArray();

// Determine sort direction
var ascending = !$th.hasClass('sort-desc');

// Remove sort classes from all headers
$('#popupRecipeTable thead th').removeClass('sort-asc sort-desc');

// Add appropriate class to clicked header
$th.addClass(ascending ? 'sort-asc' : 'sort-desc');

// Sort rows
rows.sort(function(a, b) {
var aText = $(a).find('td').eq($th.index()).text().trim();
var bText = $(b).find('td').eq($th.index()).text().trim();

// Special handling for numeric columns
if (sortKey === 'water') {
var aNum = parseInt(aText.replace(/[^\d]/g, '')) || 0;
var bNum = parseInt(bText.replace(/[^\d]/g, '')) || 0;
return ascending ? aNum - bNum : bNum - aNum;
}

if (sortKey === 'time') {
var aSeconds = parseTimeToSeconds(aText);
var bSeconds = parseTimeToSeconds(bText);
return ascending ? aSeconds - bSeconds : bSeconds - aSeconds;
}

// Sort as text
return ascending
? aText.localeCompare(bText)
: bText.localeCompare(aText);
});

// Re-append sorted rows
$tbody.empty();
rows.forEach(function(row) {
$tbody.append(row);
});
});

// Focus search input
$searchInput.focus();
}

// Parse time string to seconds for sorting
function parseTimeToSeconds(timeStr) {
if (!timeStr || timeStr === 'Instant' || timeStr === 'N/A') return 0;

var seconds = 0;
var hourMatch = timeStr.match(/(\d+)h/);
var minMatch = timeStr.match(/(\d+)m/);
var secMatch = timeStr.match(/(\d+)s/);

if (hourMatch) seconds += parseInt(hourMatch[1]) * 3600;
if (minMatch) seconds += parseInt(minMatch[1]) * 60;
if (secMatch) seconds += parseInt(secMatch[1]);

return seconds;
}

// Close recipe popup
function closeRecipePopup() {
$('.recipe-popup-overlay').removeClass('active');

setTimeout(function() {
$('.recipe-popup-overlay').remove();
}, 300);
}

// Add required CSS for animations
function addAnimationStyles() {
if ($('#resourcePageAnimations').length === 0) {
var styles = `
<style id="resourcePageAnimations">
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

.recipe-popup-table th.sort-asc::after {
content: ' ↑';
color: #fce7c8;
}

.recipe-popup-table th.sort-desc::after {
content: ' ↓';
color: #fce7c8;
}

.recipe-popup-table th.sortable:hover {
background: rgba(252,231,200,.1) !important;
cursor: pointer;
}

/* Gallery styles */
.gallery-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}

.gallery-item {
flex: 0 0 120px;
text-align: center;
}

.gallery-item img {
max-width: 100%;
height: auto;
border: 2px solid rgba(252,231,200,.3);
transition: all 0.3s ease;
}

.gallery-item:hover img {
border-color: #fce7c8;
transform: scale(1.05);
box-shadow: 0 0 15px rgba(252,231,200,.5);
}

.gallery-item .caption {
font-size: 12px;
color: #E3BB7A;
margin-top: 4px;
}
</style>
`;
$('head').append(styles);
}
}

// Initialize when DOM is ready
$(document).ready(function() {
init();
});

})(jQuery, mediaWiki);

Template:ResourcePage/styles.css

2025-06-04T05:50:22Z

Operator:

/**********************************************************
* Template:ResourcePage/styles.css (TemplateStyles version)
* Dune Awakening — Resource Page
* v1.2 · 2025-05-27
*
* This version is compliant with MediaWiki TemplateStyles restrictions
**********************************************************/

/* ========================================================
RESPONSIVE LAYOUT (from BuildingPage)
======================================================== */
.responsive-container {
display: flex !important;
flex-wrap: wrap !important;
gap: 24px !important;
width: 100% !important;
max-width: none !important;
margin: 0 auto 20px auto !important;
padding: 0 20px !important;
box-sizing: border-box !important;
}

.responsive-col {
display: flex !important;
flex-direction: column !important;
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: none !important;
}

/* Desktop: 3 columns */
@media (min-width: 1200px) {
.responsive-col {
flex: 1 1 calc(33.333% - 16px) !important;
}
}

/* Tablet: 2 columns */
@media (min-width: 768px) and (max-width: 1199px) {
.responsive-col {
flex: 1 1 calc(50% - 12px) !important;
}
}

/* Mobile: 1 column */
@media (max-width: 767px) {
.responsive-col {
flex: 1 1 100% !important;
}
}

/* ========================================================
DUNE CARD COMPONENTS
======================================================== */
.dune-card {
background: linear-gradient(135deg, rgba(0,0,2,.85) 0%, rgba(12,10,20,.85) 100%);
color: #E0E0E0;
padding: 0;
margin-bottom: 20px !important;
border: 2px solid rgba(252, 231, 200, 0.2);
position: relative;
overflow: hidden;
clip-path: polygon(
0 20px,
20px 0,
calc(100% - 20px) 0,
100% 20px,
100% calc(100% - 20px),
calc(100% - 20px) 100%,
20px 100%,
0 calc(100% - 20px)
);
box-shadow:
0 0 30px rgba(0,0,0,.8),
inset 0 0 30px rgba(252, 231, 200, 0.05);
display: flex;
flex-direction: column;
flex: 1 0 auto;
height: 100%;
}

.dune-card-inner {
padding: 24px !important;
position: relative;
z-index: 1;
}

.dune-card-decoration {
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 60px;
background: linear-gradient(135deg, transparent 50%, rgba(252, 231, 200, 0.1) 50%);
z-index: 2;
}

.dune-card-decoration::before {
content: '';
position: absolute;
top: 10px;
right: 10px;
width: 6px;
height: 6px;
background: #fce7c8;
border-radius: 50%;
box-shadow: 0 0 10px #fce7c8;
opacity: 0.7;
}

/* Card Label */
.dune-card-label {
color: #E3BB7A;
font-size: 11px;
text-transform: uppercase;
margin-bottom: 8px;
letter-spacing: 2px;
font-weight: 700;
display: inline-block;
padding: 4px 12px;
background: linear-gradient(90deg, rgba(227,187,122,.1) 0%, transparent 100%);
border-left: 3px solid #E3BB7A;
}

/* Card Title */
.dune-card-title {
margin: 0;
font-size: 24px !important;
color: #fce7c8;
text-transform: uppercase;
padding-bottom: 12px;
margin-bottom: 16px;
display: flex;
align-items: center;
position: relative;
font-weight: 700;
letter-spacing: 1px;
text-shadow: 0 0 20px rgba(252, 231, 200, 0.5);
}

.dune-card-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
#fce7c8 20%,
#E3BB7A 50%,
#fce7c8 80%,
transparent 100%
);
}

.dune-card-title .icon {
margin-right: 12px;
font-size: 28px;
color: #E3BB7A;
filter: drop-shadow(0 0 5px rgba(227,187,122,.7));
}

/* Card Description */
.dune-card-description {
font-size: 18px !important;
line-height: 1.5 !important;
background: rgba(0,0,2,.8);
border: 1px solid rgba(252, 231, 200, 0.2);
padding: 16px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
}

.dune-card-description::before,
.dune-card-description::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
border: 2px solid rgba(252, 231, 200, 0.3);
}

.dune-card-description::before {
top: -1px;
left: -1px;
border-right: none;
border-bottom: none;
}

.dune-card-description::after {
bottom: -1px;
right: -1px;
border-left: none;
border-top: none;
}

.dune-card-description:empty {
display: none;
}

/* Card Image */
.dune-card-image {
text-align: center;
margin: 16px 0;
position: relative;
}

.dune-card-image img {
max-width: 260px !important;
max-height: 260px !important;
width: 100%;
height: auto;
object-fit: contain;
filter: drop-shadow(0 0 20px rgba(252, 231, 200, 0.3));
transition: transform 0.3s ease, filter 0.3s ease;
}

.dune-card-image:hover img {
transform: scale(1.05);
filter: drop-shadow(0 0 30px rgba(252, 231, 200, 0.5));
}

/* Border Styling */
.has-border {
border: 3px solid transparent;
background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%) padding-box,
linear-gradient(135deg, #fce7c8 0%, #E3BB7A 100%) border-box;
padding: 8px;
position: relative;
overflow: hidden;
display: inline-block;
}

/* Card Video */
.dune-card-video {
max-height: 250px;
}

.dune-card-video iframe,
.dune-card-video video {
width: 100%;
height: auto;
max-height: 240px;
}

/* ========================================================
TABLE STYLES
======================================================== */
.dune-table-wrapper {
border: 2px solid rgba(252, 231, 200, 0.3);
overflow: hidden;
width: 100%;
position: relative;
background: rgba(0,0,2,.6);
box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
margin: 12px 0;
}

table.infobox-dune-two-column,
table.infobox-dune-standard-table {
width: 100%;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
background: transparent;
}

/* Table cells */
table.infobox-dune-two-column th,
table.infobox-dune-two-column td,
table.infobox-dune-standard-table th,
table.infobox-dune-standard-table td {
padding: 12px 10px !important;
font-size: 17px !important;
color: #E0E0E0;
background: rgba(12,10,20,.6);
border-bottom: 1px solid rgba(252, 231, 200, 0.2);
transition: background 0.2s ease, color 0.2s ease;
}

/* Table hover effects */
table.infobox-dune-two-column tr:hover td,
table.infobox-dune-standard-table tr:hover td {
background: rgba(252, 231, 200, 0.05);
color: #fff;
}

/* Table headers */
table.infobox-dune-two-column thead th,
table.infobox-dune-standard-table thead th,
.tr-dark,
tr.tr-dark td {
background: rgba(0,0,2,.9) !important;
color: #fce7c8 !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 2px solid rgba(252, 231, 200, 0.4);
}

/* Remove last row border */
table.infobox-dune-two-column tr:last-child td,
table.infobox-dune-standard-table tr:last-child td {
border-bottom: none;
}

/* ========================================================
CRAFTING SECTION
======================================================== */
.crafting-section {
margin-bottom: 24px;
padding: 16px;
background: rgba(0,0,2,.6);
border: 1px solid rgba(252,231,200,.2);
position: relative;
}

.dune-section-header {
color: #fce7c8;
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
margin: 0 0 8px 0;
padding-bottom: 8px;
border-bottom: 2px solid rgba(252,231,200,.3);
letter-spacing: 1px;
}

/* Recipe Table Preview - Limited Height with Scroll */
.recipe-table-preview {
max-height: 320px;
overflow-y: auto;
overflow-x: hidden;
margin: 12px 0;
position: relative;
}

/* Recipe Table Styling */
.recipe-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}

.recipe-table thead th {
background: rgba(0,0,2,.9) !important;
color: #fce7c8 !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 12px 10px !important;
font-size: 14px !important;
position: sticky;
top: 0;
z-index: 10;
border-bottom: 2px solid rgba(252,231,200,.4);
}

.recipe-table tbody tr {
transition: background 0.2s ease;
}

.recipe-table tbody tr:hover {
background: rgba(252,231,200,.05);
}

.recipe-table tbody td {
padding: 10px !important;
font-size: 14px !important;
color: #E0E0E0;
background: rgba(12,10,20,.6);
border-bottom: 1px solid rgba(252,231,200,.2);
}

/* Recipe Search Container */
.recipe-search-container {
margin: 8px 0;
}

.recipe-search-input {
width: 100%;
padding: 8px 12px;
background: rgba(0,0,2,.8);
border: 2px solid rgba(252,231,200,.3);
color: #fce7c8;
font-size: 14px;
font-family: 'Rajdhani', sans-serif;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
outline: none;
box-sizing: border-box;
}

.recipe-search-input:focus {
border-color: #fce7c8;
box-shadow: 0 0 10px rgba(252,231,200,.3);
}

.recipe-search-input::placeholder {
color: rgba(252,231,200,.5);
}

/* Recipe Actions */
.recipe-actions {
text-align: center;
margin-top: 12px;
}

.dune-action-button {
display: inline-block;
padding: 10px 20px;
background: linear-gradient(135deg, rgba(252,231,200,.1) 0%, rgba(227,187,122,.1) 100%);
border: 2px solid rgba(252,231,200,.3);
color: #fce7c8;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
text-decoration: none;
position: relative;
overflow: hidden;
}

.dune-action-button:hover {
background: linear-gradient(135deg, rgba(252,231,200,.2) 0%, rgba(227,187,122,.2) 100%);
border-color: #fce7c8;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(252,231,200,.3);
}

.dune-action-button .icon {
margin-right: 8px;
}

/* ========================================================
GALLERY
======================================================== */
.gallery-container {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 12px;
justify-content: center;
}

.gallery-item {
flex: 0 0 120px;
text-align: center;
position: relative;
overflow: hidden;
}

.gallery-item img {
width: 100%;
height: auto;
max-height: 120px;
object-fit: cover;
border: 2px solid rgba(252,231,200,.3);
transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
display: block;
}

.gallery-item:hover img {
border-color: #fce7c8;
transform: scale(1.1);
box-shadow: 0 0 20px rgba(252,231,200,.6);
}

.gallery-item .caption {
font-size: 12px;
color: #E3BB7A;
margin-top: 6px;
padding: 0 4px;
line-height: 1.2;
}

/* ========================================================
MOBILE RESPONSIVE
======================================================== */
@media (max-width: 768px) {
/* Container adjustments */
.responsive-container {
padding: 0 10px !important;
gap: 16px !important;
}

/* Card adjustments */
.dune-card {
clip-path: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
}

.dune-card-inner {
padding: 16px !important;
}

.dune-card-title {
font-size: 20px !important;
}

.dune-card-description {
font-size: 14px !important;
padding: 12px;
}

.dune-card-image img {
max-width: 180px !important;
max-height: 180px !important;
}

/* Table adjustments */
table.infobox-dune-two-column th,
table.infobox-dune-two-column td,
table.infobox-dune-standard-table th,
table.infobox-dune-standard-table td {
padding: 10px 6px !important;
font-size: 14px !important;
}

/* Recipe table mobile */
.recipe-table-preview {
max-height: 240px;
}

/* Gallery mobile */
.gallery-container {
gap: 8px;
}

.gallery-item {
flex: 0 0 80px;
}

.gallery-item img {
max-height: 80px;
}
}

/* ResourcePage Template Fixes - Add to ResourcePage_TemplateStyles.css */

/* ========================================================
FIX 1: REDUCE TABLE ROW SIZE TO FIT VIEWPORT
======================================================== */

/* Reduce recipe table preview height for better viewport fit */
.recipe-table-preview {
max-height: 240px !important; /* Reduced from 320px */
overflow-y: auto;
overflow-x: hidden;
margin: 8px 0 !important;
position: relative;
}

/* Smaller table cells and text */
.recipe-table tbody td {
padding: 6px 8px !important; /* Reduced from 10px */
font-size: 13px !important; /* Reduced from 14px */
line-height: 1.3 !important;
}

.recipe-table thead th {
padding: 8px 6px !important; /* Reduced from 12px 10px */
font-size: 13px !important; /* Reduced from 14px */
}

/* Tighter recipe rows */
.recipe-row {
height: auto !important;
}

/* Reduce crafting section padding */
.crafting-section {
margin-bottom: 16px !important; /* Reduced from 24px */
padding: 12px !important; /* Reduced from 16px */
}

/* ========================================================
FIX 2: VIDEO CONTAINER SIZING
======================================================== */

/* Make video container responsive */
.dune-card-video {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
height: 0;
overflow: hidden;
background-color: #262626;
border: 2px solid #e2d3ae;
border-radius: 4px;
}

/* Position iframe absolutely within container */
.dune-card-video iframe,
.dune-card-video .embedvideo-wrapper {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}

/* Fix YouTube embed wrapper */
.embedvideo {
width: 100% !important;
}

.embedvideo-wrapper {
position: relative !important;
width: 100% !important;
height: 100% !important;
}

/* ========================================================
FIX 3: GOLD COLOR FOR ICONS
======================================================== */

/* Apply gold color to all icons in resource info card */
.dune-card-inner .icon,
table.infobox-dune-two-column th .icon {
color: #E3BB7A !important;
filter: drop-shadow(0 0 3px rgba(227,187,122,.5));
}

/* Specific icon styling */
.dune-card-inner .icon::before {
color: #E3BB7A !important;
}

/* Icon hover effect */
.dune-card-inner tr:hover .icon {
color: #fce7c8 !important;
filter: drop-shadow(0 0 5px rgba(252,231,200,.7));
}

/* ========================================================
FIX 4: CLICKABLE SPAN BUTTONS
======================================================== */

/* Style spans to look and act like buttons */
.dune-action-button {
display: inline-block !important;
padding: 8px 16px !important;
background: linear-gradient(135deg, rgba(252,231,200,.1) 0%, rgba(227,187,122,.1) 100%) !important;
border: 2px solid rgba(252,231,200,.3) !important;
color: #fce7c8 !important;
font-size: 13px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
text-decoration: none !important;
position: relative !important;
overflow: hidden !important;
user-select: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
}

/* Hover state for span buttons */
.dune-action-button:hover {
background: linear-gradient(135deg, rgba(252,231,200,.2) 0%, rgba(227,187,122,.2) 100%) !important;
border-color: #fce7c8 !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(252,231,200,.3) !important;
color: #fff !important;
text-decoration: none !important;
}

/* Active/click state */
.dune-action-button:active {
transform: translateY(0) !important;
box-shadow: 0 2px 6px rgba(252,231,200,.2) !important;
}

/* ========================================================
ADDITIONAL VIEWPORT OPTIMIZATIONS
======================================================== */

/* Reduce card padding on smaller screens */
@media (max-width: 1400px) {
.dune-card-inner {
padding: 16px !important;
}

.dune-card-title {
font-size: 20px !important;
}

.dune-card-description {
font-size: 14px !important;
padding: 12px !important;
}
}

/* Optimize column layout for better viewport usage */
@media (min-width: 1200px) and (max-width: 1600px) {
.responsive-container {
gap: 16px !important;
}

.recipe-table-preview {
max-height: 200px !important;
}
}

/* ========================================================
POPUP STYLES
======================================================== */

/* Ensure popup overlay works */
.recipe-popup-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: rgba(0,0,0,.85) !important;
z-index: 100000 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
opacity: 0;
visibility: hidden;
transition: opacity .3s ease, visibility .3s ease !important;
}

.recipe-popup-overlay.active {
opacity: 1 !important;
visibility: visible !important;
}

/* Popup close button styling */
.popup-close {
background: transparent !important;
border: none !important;
color: #fce7c8 !important;
font-size: 28px !important;
cursor: pointer !important;
transition: transform 0.3s ease, color 0.3s ease !important;
padding: 0 !important;
width: 40px !important;
height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
}

.popup-close:hover {
color: #fff !important;
transform: rotate(90deg) !important;
}

Template:ResourcePage

2025-06-04T05:49:29Z

Operator:

<templatestyles src="Template:ResourcePage/styles.css" />{{#get_external_data:source=externaldb|from=data_items|data=ItemID=item_id,InternalName=internal_name,ItemClass=item_class,ItemSubclass=item_subclass,Tier=tier,Rarity=rarity,Faction=faction,Name=name,Description=description,HowToObtain=how_to_obtain,Notes=notes,AdditionalNotes=additional_notes,Weight=weight,MaxStacks=max_stacks,XPPerHarvest=xp_per_harvest,BaseVendorPrice=base_vendor_price,GuideLink=guide_link,IconLink=icon_link,ImageLink=image_link,Category1=category_1,Category2=category_2,Category3=category_3|cache=yes|where=name='{{PAGENAME}}'|limit=1
}}
{{#for_external_table:|{{#vardefine:ItemID|{{{ItemID}}}}}{{#vardefine:InternalName|{{{InternalName}}}}}{{#vardefine:ItemClass|{{{ItemClass}}}}}{{#vardefine:ItemSubclass|{{{ItemSubclass}}}}}{{#vardefine:Tier|{{{Tier}}}}}{{#vardefine:Rarity|{{{Rarity}}}}}{{#vardefine:Faction|{{{Faction}}}}}{{#vardefine:Name|{{{Name}}}}}{{#vardefine:Description|{{{Description}}}}}{{#vardefine:HowToObtain|{{{HowToObtain}}}}}{{#vardefine:Notes|{{{Notes}}}}}{{#vardefine:AdditionalNotes|{{{AdditionalNotes}}}}}{{#vardefine:Weight|{{{Weight}}}}}{{#vardefine:MaxStacks|{{{MaxStacks}}}}}{{#vardefine:XPPerHarvest|{{{XPPerHarvest}}}}}{{#vardefine:BaseVendorPrice|{{{BaseVendorPrice}}}}}{{#vardefine:GuideLink|{{{GuideLink}}}}}{{#vardefine:IconLink|{{{IconLink}}}}}{{#vardefine:ImageLink|{{{ImageLink}}}}}{{#vardefine:Category1|{{{Category1}}}}}{{#vardefine:Category2|{{{Category2}}}}}{{#vardefine:Category3|{{{Category3}}}}}
}}
<div class="responsive-container">
<div class="responsive-col col1">
<div class="skin-pivot">
<div class="dune-card">
<div class="dune-card-decoration"></div>
<div class="dune-card-inner">
<div class="dune-card-label">{{#var:ItemClass}} - {{#var:ItemSubclass}}</div>
<div class="dune-card-title"><span class="icon">◆</span> Resource Information</div>
<div style="padding:3px;"></div>
<div class="dune-card-image" style="text-align:center;"><div class="has-border">{{#if:{{#var:ImageLink}}|[[File:{{#var:ImageLink}}|200px|alt={{#var:Name}}]]|[[File:Placeholder.png|200px|alt=No image available]]}}</div></div>
<div style="padding:3px;"></div>
<div class="dune-card-description">{{#invoke:DataTableParserV2|iconize|{{#var:Description}}}}</div>
<div class="dune-table-wrapper">
<table class="infobox-dune-two-column">
<tr><th><span class="icon">{{#if:{{#var:IconLink}}|[[File:{{#var:IconLink}}|16px]]|}}</span> Tier</th><td>{{#var:Tier}}</td></tr>
<tr><th><span class="icon">✦</span> Rarity</th><td>{{#var:Rarity}}</td></tr>
<tr><th><span class="icon">🏛</span> Faction</th><td>{{#var:Faction}}</td></tr>
<tr><th><span class="icon">⚖</span> Weight</th><td>{{#var:Weight}} kg</td></tr>
<tr><th><span class="icon">📦</span> Max Stacks</th><td>{{#var:MaxStacks}}</td></tr>
<tr><th><span class="icon">💰</span> Base Vendor Price</th><td>{{#var:BaseVendorPrice}} Solaris</td></tr>
<tr><th><span class="icon">⭐</span> XP per Harvest</th><td>{{#var:XPPerHarvest}}</td></tr>
</table>
</div>
{{#get_external_data:
source=externaldb
|from=data_item_locations
|data=LocationName=location_name,Note=note
|cache=yes
|where=internal_name='{{PAGENAME}}'
}}
{{#if:{{{LocationName|}}}|<div style="clear:both; padding:10px;"></div><div class="dune-card-title"><span class="icon">🗺</span> Harvest Locations</div><div style="padding:3px;"></div><div class="dune-card-description"><ul class="location-list">{{#for_external_table:|<li>'''{{{LocationName}}}'''{{#if:{{{Note|}}}|: {{{Note}}}}}</li>}}</ul></div>}}
</div>
</div>
</div>
</div>
<div class="responsive-col col2">
<div class="skin-pivot">
<div class="dune-card">
<div class="dune-card-decoration"></div>
<div class="dune-card-inner">
<div class="dune-card-label">CRAFTING</div>
<div class="dune-card-title"><span class="icon">⚒</span> Crafting Recipes</div>
<div style="padding:3px;"></div>
<div class="crafting-section">
<h3 class="dune-section-header">Crafted With</h3>
<div class="dune-card-description">Items that require {{#var:Name}} as an ingredient</div>
<div id="craftedWithPreview" class="recipe-table-preview">
{{#get_external_data:
source=externaldb
|from=vw_recipe_by_ingredient
|data=OutputItem=output_item,Resources=resources,Stations=stations
|cache=yes
|where=ingredient='{{PAGENAME}}'
|order by=Stations
|limit=5
|table=crafted_with_preview
}}

<div class="crafted-with-full-data" style="display:none;">
{{#get_external_data:
source=externaldb
|from=vw_recipe_by_ingredient
|data=OutputItem=output_item,Resources=resources,Stations=stations,WaterML=water_ml,CraftTime=craft_time,Schematic=schematic
|format=json
|cache=yes
|where=ingredient='{{PAGENAME}}'
|order by=Stations
}}
</div>
<div class="dune-table-wrapper">
<table class="infobox-dune-standard-table recipe-table" id="craftedWithTable">
<tr class="tr-dark"><th style="width:35%;">Item Created</th><th style="width:40%;">Resources Needed</th><th style="width:25%;">Stations</th></tr>
{{#for_external_table:|<tr class="recipe-row"><td>{{#invoke:DataTableParserV2|iconize|{{{OutputItem}}}}}</td><td>{{#invoke:DataTableParserV2|formatRecipeList|{{{Resources}}}}}</td><td>{{{Stations}}}</td></tr>}}
</table>
</div>
</div>
<div class="recipe-actions"><span class="dune-action-button view-all-crafted-with" data-resource="{{PAGENAME}}">View All Recipes</span></div>
</div>
<div style="clear:both; padding:10px;"></div>
<div class="crafting-section">
<h3 class="dune-section-header">Crafted From</h3>
<div class="dune-card-description">Recipes that produce {{#var:Name}}</div>
<div id="craftedFromPreview" class="recipe-table-preview">
{{#get_external_data:
source=externaldb
|from=vw_recipe_summary
|data=OutputItem=output_item,Resources=resources,Stations=station,WaterML=water_ml,CraftTime=craft_time,Schematic=schematic
|cache=yes
|where=output_item='{{PAGENAME}}'
|order by=station
|limit=5
}}

<div class="crafted-from-full-data" style="display:none;">
{{#get_external_data:
source=externaldb
|from=vw_recipe_summary
|data=OutputItem=output_item,Resources=resources,Stations=station,WaterML=water_ml,CraftTime=craft_time,Schematic=schematic
|format=json
|cache=yes
|where=output_item='{{PAGENAME}}'
|order by=station
|table=crafted_from_preview
}}
</div>
<div class="dune-table-wrapper">
<table class="infobox-dune-standard-table recipe-table" id="craftedFromTable">
<tr class="tr-dark"><th style="width:35%;">Item Created</th><th style="width:40%;">Resources Needed</th><th style="width:25%;">Stations</th></tr>
{{#for_external_table:|<tr class="recipe-row"><td>{{#invoke:DataTableParserV2|iconize|{{{OutputItem}}}}}</td><td>{{#invoke:DataTableParserV2|formatRecipeList|{{{Resources}}}}}</td><td>{{{Stations}}}</td></tr>}}
</table>
</div>
</div>
<div class="recipe-actions"><span class="dune-action-button view-all-crafted-from" data-resource="{{PAGENAME}}">View All Recipes</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="responsive-col col3">

<div class="skin-pivot">
<div class="dune-card">
<div class="dune-card-decoration"></div>
<div class="dune-card-inner">
<div class="dune-card-label">VIDEO TUTORIALS</div>
<div class="dune-card-title"><span class="icon">▶</span> Building Guide</div>
<div style="padding:3px;"></div>
<div class="dune-card-video">
{{#if:{{{YoutubeEmbed|}}}|
{{{YoutubeEmbed}}}
|
<youtube id="r8lxVDqoHLQ" />
}}
</div>
<div style="clear:both; padding:10px;"></div>

<div class="dune-card-title"><span class="icon">☰</span> Notes</div>
<div style="padding:3px;"></div>
<div class="dune-card-description">{{#invoke:DataTableParserV2|iconize|{{#var:AdditionalNotes}}}}</div>
</div>
</div>
</div>
</div>

{{#tag:script|
<nowiki>
<div class="recipe-popup-overlay">
<div class="recipe-popup">
<div class="popup-header">
<h3 class="popup-title">{{title}}</h3>
<button class="popup-close">×</button>
</div>
<div class="popup-content">
<div class="popup-search-container">
<input type="text" class="popup-search-input" placeholder="Search recipes…">
</div>
<div class="popup-table-wrapper">
<table class="infobox-dune-standard-table recipe-popup-table">
<thead>
<tr class="tr-dark">
<th>Item Created</th><th>Resources Needed</th><th>Stations</th>
<th>Water (mL)</th><th>Craft Time</th><th>Schematic</th>
</tr>
</thead>
<tbody>{{tableRows}}</tbody>
</table>
</div>
</div>
</div>
</div>
</nowiki>
|type="text/template" id="recipePopupTemplate"}}

MediaWiki:Gadget-ResourcePage.js

2025-06-04T05:45:49Z

Operator:

MediaWiki:Common.js

2025-06-04T05:45:32Z

Operator:

/* ========================================
MediaWiki:Common.js - Fixed Header Spacing
FIXED VERSION - Addresses all positioning issues
======================================== */

/* ░ MOBILE DISCLAIMER BANNER ░ */
$( function () {
if ( window.innerWidth > 768 ) return; // desktop? abort.

// already injected? abort.
if ( $('#mobile-disclaimer').length ) return;

// Build & inject
const $banner = $( '<div>', {
id: 'mobile-disclaimer',
html: 'Heads-up: this section is optimised for desktop. Smaller layouts are experimental 👀'
});

// insert right after the site header / before main content.
// Adjust selector to your skin; Vector uses #content, Timeless uses #mw-site.
$( '#mw-content-text' ).prepend( $banner );
// If you prefer it at absolute top, use $('body').prepend( $banner );
});

/* util: "Fabricator Basics" → "fabricator-basics" */
function makeSlug(str){
return str.toLowerCase().trim()
.replace(/[^\\w\\s-]/g,'') // drop punctuation
.replace(/\\s+/g,'-'); // spaces → dashes
}

$(document).ready(function() {
// FIXED: Check if page has breadcrumb navigation
var hasBreadcrumb = $('.dune-breadcrumb-nav').length > 0;
if (hasBreadcrumb) {
$('body').addClass('has-breadcrumb');
}

// HEADER FIX - Wait for page to load then force header
setTimeout(function() {
// Remove ALL existing headers and nav attempts
$('.mw-header, #mw-header-container, nav.tab-bar, .tab-bar').remove();

// Hide the page title and extra elements completely
$('.firstHeading, h1.title, .mw-page-title-main, #firstHeading, #tagline, h3#tagline, #contentSub, .mw-content-subtitle').remove();

// Remove any MediaWiki notices that might appear
$('#siteNotice, .mw-indicators, .printfooter, .catlinks').remove();

// Create the navigation bar HTML with inline styles
var headerHTML = `
<div id="dune-header" style="position: fixed; top: 0; left: 0; right: 0; height: 60px; background: linear-gradient(180deg, rgba(20, 18, 28, 0.95) 0%, rgba(10, 8, 16, 0.98) 100%); border-bottom: 3px solid rgba(252, 231, 200, 0.4); box-shadow: 0 2px 20px rgba(0,0,0,0.8); z-index: 99999; display: flex; align-items: center;">
<div style="width: 100%; max-width: 1600px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 100%;">
<a href="/wiki/Main_Page" style="font-family: 'Orbitron', sans-serif; font-size: 22px; color: #fce7c8; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; text-shadow: 0 0 15px rgba(252, 231, 200, 0.4); text-decoration: none; white-space: nowrap;">DUNE DB</a>

<nav style="display: flex; gap: 0; margin: 0 20px; height: 100%;">
<a href="/Items" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-left: 1px solid rgba(252, 231, 200, 0.1); border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">◇ Items</a>
<a href="/Crafting" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">⚒ Crafting</a>
<a href="/Building" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">⌂ Building</a>
<a href="/Tech_Tree" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">⬢ Tech Tree</a>
<a href="/Journeys" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">➤ Journeys</a>
<a href="/Skills" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">★ Skills</a>
<a href="/Map" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">🗺 Map</a>
</nav>

<div style="display: flex; align-items: center;">
<form action="/index.php" method="get" style="display: flex; align-items: center; gap: 0; height: 38px;">
<input type="search" name="search" placeholder="Search wiki..." style="background: rgba(0, 0, 2, 0.8); border: 2px solid rgba(252, 231, 200, 0.3); border-radius: 0; color: #fce7c8; padding: 0 12px; width: 200px; font-size: 13px; font-family: 'Rajdhani', sans-serif; transition: all 0.3s ease; outline: none; height: 38px; box-sizing: border-box; margin: 0; vertical-align: middle;" onfocus="this.style.borderColor='#fce7c8'; this.style.boxShadow='0 0 10px rgba(252, 231, 200, 0.3)'; this.style.width='250px';" onblur="this.style.borderColor='rgba(252, 231, 200, 0.3)'; this.style.boxShadow='none'; this.style.width='200px';">
<button type="submit" style="background: rgba(252, 231, 200, 0.1); border: 2px solid rgba(252, 231, 200, 0.3); border-left: none; color: #fce7c8; padding: 0 12px; cursor: pointer; font-size: 14px; transition: all 0.3s ease; height: 38px; box-sizing: border-box; margin: 0; vertical-align: middle; display: flex; align-items: center; justify-content: center;" onmouseover="this.style.background='rgba(252, 231, 200, 0.2)'; this.style.borderColor='#fce7c8';" onmouseout="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.borderColor='rgba(252, 231, 200, 0.3)';"><span>🔍</span></button>
</form>
</div>
</div>
</div>
`;

// Check if header already exists to avoid duplicates
if ($('#dune-header').length === 0) {
$('body').prepend(headerHTML);
}

// CRITICAL: Force proper spacing
$('body').css({
'padding-top': '60px',
'margin-top': '0',
'overflow-y': 'auto',
'height': 'auto'
});

// FIXED: Different spacing for pages with/without breadcrumb
if (hasBreadcrumb) {
// Pages with breadcrumb - content starts immediately after header
$('#content, .mw-body, #mw-content-text, .mw-body-content, .mw-parser-output, #main-section, .main-section, #page-content').css({
'padding-top': '0',
'margin-top': '0'
});

// Breadcrumb should have proper spacing from header
$('.dune-breadcrumb-nav').css({
'margin-top': '20px',
'margin-bottom': '20px'
});
} else {
// Pages without breadcrumb - add padding to content
$('#content, .mw-body, #mw-content-text, .mw-body-content, .mw-parser-output, #main-section, .main-section, #page-content').css({
'padding-top': '20px',
'margin-top': '0'
});
}

// Force first element to start at top (unless it's breadcrumb)
$('.mw-parser-output > *:first-child:not(.dune-breadcrumb-nav), .mw-body-content > *:first-child:not(.dune-breadcrumb-nav)').css({
'margin-top': '0',
'padding-top': '0'
});

// Remove sidebar space
$('#sidebar, .columns.large-2.medium-3').css('display', 'none');
$('#page-content, .columns.large-10.medium-9').css({
'width': '100%',
'max-width': '100%',
'margin': '0',
'padding': '0'
});

// Handle Actions button positioning
$('#p-cactions').css({
'position': 'fixed',
'top': '11px',
'right': '20px',
'z-index': '100001',
'margin': '0',
'padding': '0',
'height': '38px'
});

// Remove spacing from all column wrappers
$('.row > .columns').css({
'padding-top': '0',
'margin-top': '0'
});

// FIXED: Ensure page content can scroll
$('#content').css({
'min-height': 'calc(100vh - 60px)',
'position': 'relative',
'z-index': '1'
});

// Remove any floating MediaWiki elements
$('.mw-jump-link, .mw-redirectedfrom, #siteNotice').remove();

}, 100);
});

/* ===== RADIAL MENU CODE ===== */
function waitForRadialData(callback, attempts = 0) {
const dataTag = document.getElementById('radialMenuData');
if (dataTag) {
try {
const menuItems = JSON.parse(dataTag.innerText || dataTag.textContent);
console.log("✅ Loaded radialMenuData:", menuItems);
callback(menuItems);
} catch (e) {
console.error("❌ Failed to parse radialMenuData", e);
}
} else if (attempts < 20) {
setTimeout(() => waitForRadialData(callback, attempts + 1), 100);
} else {
console.warn("⚠️ radialMenuData tag not found after timeout.");
}
}

$(document).ready(function () {
waitForRadialData(function (menuItems) {
const isMobile = () => window.innerWidth <= 768;

let radialItemsHTML = '';
menuItems.forEach((item, index) => {
const id = item.category.toLowerCase().replace(/\s+/g, '-');
item.id = id;

radialItemsHTML += `
<div class="dune-radial-item-container ${item.position}">
<a data-id="${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 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>
`;

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);

if (isMobile()) {
$('#duneRadialMenu').addClass('mobile-grid');
}

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="${item.url}" 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');
};

const toggleRadialMenu = () => {
if ($('#duneRadialMenu').hasClass('active')) {
hideSubcategories();
$('#duneRadialMenu').removeClass('active');
$('#duneRadialOverlay').removeClass('active');
} else {
$('#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);
}
};

$(document).on('click', '#duneLogoBtn, #menuRadialTrigger img', function (e) {
console.log("✅ Radial trigger clicked");
e.preventDefault();
e.stopPropagation();
toggleRadialMenu();
});

$(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', '#duneRadialOverlay', function () {
hideSubcategories();
$('#duneRadialMenu').removeClass('active');
$('#duneRadialOverlay').removeClass('active');
});

$(document).on('click', 'li.name.logo a[href="/Main_Page"]', function (e) {
e.preventDefault();
toggleRadialMenu();
});

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

$(window).on('resize', function () {
if (isMobile()) {
$('#duneRadialMenu').addClass('mobile-grid');
} else {
$('#duneRadialMenu').removeClass('mobile-grid');
}
});
});
});

/* Used-In dynamic filters & search */
mw.hook( 'wikipage.content' ).add( function ( $content ) {

const $holder = $content.find( '#usedInFilterHolder' );
const $table = $content.find( '#usedInTable' );

if ( !$holder.length || !$table.length ) return;

const rowsData = [];
const stations = new Set();
const types = new Set();

$table.find( 'tbody tr' ).each( function () {
const $tds = $( this ).children( 'td' );
const output = $tds.eq( 0 ).text().trim();
const type = $tds.eq( 1 ).text().trim();
const station = $tds.last().text().trim();

rowsData.push( { tr: this, output, type, station } );
stations.add( station );
types.add( type );
} );

const makeSel = ( id, label, opts ) => {
const $sel = $( '<select>', { id, class: 'game-button', css:{margin:'6px 4px 6px 0'} } )
.append( $( '<option>', { value:'', text:label } ) );
opts.forEach( o => $sel.append( $( '<option>', { value:o, text:o } ) ) );
return $sel;
};

const $stationSel = makeSel( 'filterStation', 'All Stations', [ ...stations ].sort() );
const $typeSel = makeSel( 'filterType', 'All Types', [ ...types ].sort() );
const $search = $( '<input>', {
type:'text',
placeholder:'Search…',
css:{ margin:'6px 0', padding:'4px', width:'140px',
'background':'#111', color:'#fff', border:'1px solid #555' }
} );

$holder.append( $stationSel, $typeSel, $search );

function applyFilters() {
const sVal = $stationSel.val();
const tVal = $typeSel.val();
const q = $search.val().toLowerCase();

rowsData.forEach( ({ tr, output, type, station }) => {
const show =
(!sVal || station === sVal) &&
(!tVal || type === tVal) &&
(!q || output.toLowerCase().includes( q ));
tr.style.display = show ? '' : 'none';
} );
}

$stationSel.on( 'change', applyFilters );
$typeSel .on( 'change', applyFilters );
$search .on( 'input', applyFilters );
} );

/* Lazy-load background image Blur */
document.addEventListener('DOMContentLoaded', () => {
const hero = document.querySelector('.dune-hero');
if (hero && !hero.style.backgroundImage) {
hero.style.backgroundImage =
'url(/images/7/70/Arrakis_dunes.jpg?2025)';
}

const radial = document.querySelector('.radial-menu-wrapper');
if (!radial) return;
const y = radial.offsetTop;
window.addEventListener('scroll', () => {
radial.classList.toggle('is-fixed', window.scrollY > y);
});
});

/**
* Resource Page Module Loader
*/
$(function() {
// Only on resource pages
if ($('.crafting-section, .recipe-table, [class*="crafted-"]').length > 0) {
// Load dependencies first
mw.loader.using(['jquery', 'mediawiki.api', 'mediawiki.util'], function() {
// Load resource page module
$.getScript('/index.php?title=MediaWiki:ResourcePage.js&action=raw&ctype=text/javascript')
.done(function() {
console.log('Resource page module loaded');
})
.fail(function() {
console.error('Failed to load resource page module');
});
});
}
});

$(function () {
const $drop = $('#drop');
const $menu = $('#drop1');

if ($drop.length && $menu.length) {
// Move Actions button into the footer visually
$('#footer').append($drop);
$('#footer').append($menu);

// Style the button like a footer element
$drop.css({
position: 'relative',
display: 'inline-block',
marginTop: '12px',
background: 'rgba(252,231,200,0.08)',
border: '1px solid rgba(252,231,200,0.2)',
color: '#fce7c8',
fontFamily: 'Rajdhani, sans-serif',
padding: '6px 12px',
boxShadow: '0 0 6px rgba(0,0,0,0.3)',
cursor: 'pointer'
});

$drop.hover(
() => $drop.css({ background: 'rgba(252,231,200,0.15)', color: '#fff' }),
() => $drop.css({ background: 'rgba(252,231,200,0.08)', color: '#fce7c8' })
);

// Ensure dropdown menu opens below and is styled cleanly
$menu.css({
position: 'absolute',
top: '100%',
right: '0',
zIndex: '9999',
background: '#1a1a1a',
boxShadow: '0 2px 6px rgba(0,0,0,0.5)',
marginTop: '4px'
});
}

// Footer message logic
if (!$('#custom-footer-note').length) {
const $customLine = $('<div>', {
id: 'custom-footer-note',
html: `This is an experimental solo project exploring what’s possible in gaming UI and data experiences. Things may break—thank you for being part of the push forward.<br>
<a href="${mw.util.getUrl('Disclaimer')}" class="footer-link">Legal & Disclaimer</a>`
});

$('#footer').prepend($customLine);
$('#footer-left').hide();
}
});

MediaWiki:Common.js

2025-06-04T05:30:12Z

Operator:

/* ========================================
MediaWiki:Common.js - Fixed Header Spacing
FIXED VERSION - Addresses all positioning issues
======================================== */

/* ░ MOBILE DISCLAIMER BANNER ░ */
$( function () {
if ( window.innerWidth > 768 ) return; // desktop? abort.

// already injected? abort.
if ( $('#mobile-disclaimer').length ) return;

// Build & inject
const $banner = $( '<div>', {
id: 'mobile-disclaimer',
html: 'Heads-up: this section is optimised for desktop. Smaller layouts are experimental 👀'
});

// insert right after the site header / before main content.
// Adjust selector to your skin; Vector uses #content, Timeless uses #mw-site.
$( '#mw-content-text' ).prepend( $banner );
// If you prefer it at absolute top, use $('body').prepend( $banner );
});

/* util: "Fabricator Basics" → "fabricator-basics" */
function makeSlug(str){
return str.toLowerCase().trim()
.replace(/[^\\w\\s-]/g,'') // drop punctuation
.replace(/\\s+/g,'-'); // spaces → dashes
}

$(document).ready(function() {
// FIXED: Check if page has breadcrumb navigation
var hasBreadcrumb = $('.dune-breadcrumb-nav').length > 0;
if (hasBreadcrumb) {
$('body').addClass('has-breadcrumb');
}

// HEADER FIX - Wait for page to load then force header
setTimeout(function() {
// Remove ALL existing headers and nav attempts
$('.mw-header, #mw-header-container, nav.tab-bar, .tab-bar').remove();

// Hide the page title and extra elements completely
$('.firstHeading, h1.title, .mw-page-title-main, #firstHeading, #tagline, h3#tagline, #contentSub, .mw-content-subtitle').remove();

// Remove any MediaWiki notices that might appear
$('#siteNotice, .mw-indicators, .printfooter, .catlinks').remove();

// Create the navigation bar HTML with inline styles
var headerHTML = `
<div id="dune-header" style="position: fixed; top: 0; left: 0; right: 0; height: 60px; background: linear-gradient(180deg, rgba(20, 18, 28, 0.95) 0%, rgba(10, 8, 16, 0.98) 100%); border-bottom: 3px solid rgba(252, 231, 200, 0.4); box-shadow: 0 2px 20px rgba(0,0,0,0.8); z-index: 99999; display: flex; align-items: center;">
<div style="width: 100%; max-width: 1600px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 100%;">
<a href="/wiki/Main_Page" style="font-family: 'Orbitron', sans-serif; font-size: 22px; color: #fce7c8; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; text-shadow: 0 0 15px rgba(252, 231, 200, 0.4); text-decoration: none; white-space: nowrap;">DUNE DB</a>

<nav style="display: flex; gap: 0; margin: 0 20px; height: 100%;">
<a href="/Items" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-left: 1px solid rgba(252, 231, 200, 0.1); border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">◇ Items</a>
<a href="/Crafting" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">⚒ Crafting</a>
<a href="/Building" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">⌂ Building</a>
<a href="/Tech_Tree" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">⬢ Tech Tree</a>
<a href="/Journeys" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">➤ Journeys</a>
<a href="/Skills" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">★ Skills</a>
<a href="/Map" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">🗺 Map</a>
</nav>

<div style="display: flex; align-items: center;">
<form action="/index.php" method="get" style="display: flex; align-items: center; gap: 0; height: 38px;">
<input type="search" name="search" placeholder="Search wiki..." style="background: rgba(0, 0, 2, 0.8); border: 2px solid rgba(252, 231, 200, 0.3); border-radius: 0; color: #fce7c8; padding: 0 12px; width: 200px; font-size: 13px; font-family: 'Rajdhani', sans-serif; transition: all 0.3s ease; outline: none; height: 38px; box-sizing: border-box; margin: 0; vertical-align: middle;" onfocus="this.style.borderColor='#fce7c8'; this.style.boxShadow='0 0 10px rgba(252, 231, 200, 0.3)'; this.style.width='250px';" onblur="this.style.borderColor='rgba(252, 231, 200, 0.3)'; this.style.boxShadow='none'; this.style.width='200px';">
<button type="submit" style="background: rgba(252, 231, 200, 0.1); border: 2px solid rgba(252, 231, 200, 0.3); border-left: none; color: #fce7c8; padding: 0 12px; cursor: pointer; font-size: 14px; transition: all 0.3s ease; height: 38px; box-sizing: border-box; margin: 0; vertical-align: middle; display: flex; align-items: center; justify-content: center;" onmouseover="this.style.background='rgba(252, 231, 200, 0.2)'; this.style.borderColor='#fce7c8';" onmouseout="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.borderColor='rgba(252, 231, 200, 0.3)';"><span>🔍</span></button>
</form>
</div>
</div>
</div>
`;

// Check if header already exists to avoid duplicates
if ($('#dune-header').length === 0) {
$('body').prepend(headerHTML);
}

// CRITICAL: Force proper spacing
$('body').css({
'padding-top': '60px',
'margin-top': '0',
'overflow-y': 'auto',
'height': 'auto'
});

// FIXED: Different spacing for pages with/without breadcrumb
if (hasBreadcrumb) {
// Pages with breadcrumb - content starts immediately after header
$('#content, .mw-body, #mw-content-text, .mw-body-content, .mw-parser-output, #main-section, .main-section, #page-content').css({
'padding-top': '0',
'margin-top': '0'
});

// Breadcrumb should have proper spacing from header
$('.dune-breadcrumb-nav').css({
'margin-top': '20px',
'margin-bottom': '20px'
});
} else {
// Pages without breadcrumb - add padding to content
$('#content, .mw-body, #mw-content-text, .mw-body-content, .mw-parser-output, #main-section, .main-section, #page-content').css({
'padding-top': '20px',
'margin-top': '0'
});
}

// Force first element to start at top (unless it's breadcrumb)
$('.mw-parser-output > *:first-child:not(.dune-breadcrumb-nav), .mw-body-content > *:first-child:not(.dune-breadcrumb-nav)').css({
'margin-top': '0',
'padding-top': '0'
});

// Remove sidebar space
$('#sidebar, .columns.large-2.medium-3').css('display', 'none');
$('#page-content, .columns.large-10.medium-9').css({
'width': '100%',
'max-width': '100%',
'margin': '0',
'padding': '0'
});

// Handle Actions button positioning
$('#p-cactions').css({
'position': 'fixed',
'top': '11px',
'right': '20px',
'z-index': '100001',
'margin': '0',
'padding': '0',
'height': '38px'
});

// Remove spacing from all column wrappers
$('.row > .columns').css({
'padding-top': '0',
'margin-top': '0'
});

// FIXED: Ensure page content can scroll
$('#content').css({
'min-height': 'calc(100vh - 60px)',
'position': 'relative',
'z-index': '1'
});

// Remove any floating MediaWiki elements
$('.mw-jump-link, .mw-redirectedfrom, #siteNotice').remove();

}, 100);
});

/* ===== RADIAL MENU CODE ===== */
function waitForRadialData(callback, attempts = 0) {
const dataTag = document.getElementById('radialMenuData');
if (dataTag) {
try {
const menuItems = JSON.parse(dataTag.innerText || dataTag.textContent);
console.log("✅ Loaded radialMenuData:", menuItems);
callback(menuItems);
} catch (e) {
console.error("❌ Failed to parse radialMenuData", e);
}
} else if (attempts < 20) {
setTimeout(() => waitForRadialData(callback, attempts + 1), 100);
} else {
console.warn("⚠️ radialMenuData tag not found after timeout.");
}
}

$(document).ready(function () {
waitForRadialData(function (menuItems) {
const isMobile = () => window.innerWidth <= 768;

let radialItemsHTML = '';
menuItems.forEach((item, index) => {
const id = item.category.toLowerCase().replace(/\s+/g, '-');
item.id = id;

radialItemsHTML += `
<div class="dune-radial-item-container ${item.position}">
<a data-id="${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 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>
`;

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);

if (isMobile()) {
$('#duneRadialMenu').addClass('mobile-grid');
}

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="${item.url}" 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');
};

const toggleRadialMenu = () => {
if ($('#duneRadialMenu').hasClass('active')) {
hideSubcategories();
$('#duneRadialMenu').removeClass('active');
$('#duneRadialOverlay').removeClass('active');
} else {
$('#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);
}
};

$(document).on('click', '#duneLogoBtn, #menuRadialTrigger img', function (e) {
console.log("✅ Radial trigger clicked");
e.preventDefault();
e.stopPropagation();
toggleRadialMenu();
});

$(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', '#duneRadialOverlay', function () {
hideSubcategories();
$('#duneRadialMenu').removeClass('active');
$('#duneRadialOverlay').removeClass('active');
});

$(document).on('click', 'li.name.logo a[href="/Main_Page"]', function (e) {
e.preventDefault();
toggleRadialMenu();
});

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

$(window).on('resize', function () {
if (isMobile()) {
$('#duneRadialMenu').addClass('mobile-grid');
} else {
$('#duneRadialMenu').removeClass('mobile-grid');
}
});
});
});

/* Used-In dynamic filters & search */
mw.hook( 'wikipage.content' ).add( function ( $content ) {

const $holder = $content.find( '#usedInFilterHolder' );
const $table = $content.find( '#usedInTable' );

if ( !$holder.length || !$table.length ) return;

const rowsData = [];
const stations = new Set();
const types = new Set();

$table.find( 'tbody tr' ).each( function () {
const $tds = $( this ).children( 'td' );
const output = $tds.eq( 0 ).text().trim();
const type = $tds.eq( 1 ).text().trim();
const station = $tds.last().text().trim();

rowsData.push( { tr: this, output, type, station } );
stations.add( station );
types.add( type );
} );

const makeSel = ( id, label, opts ) => {
const $sel = $( '<select>', { id, class: 'game-button', css:{margin:'6px 4px 6px 0'} } )
.append( $( '<option>', { value:'', text:label } ) );
opts.forEach( o => $sel.append( $( '<option>', { value:o, text:o } ) ) );
return $sel;
};

const $stationSel = makeSel( 'filterStation', 'All Stations', [ ...stations ].sort() );
const $typeSel = makeSel( 'filterType', 'All Types', [ ...types ].sort() );
const $search = $( '<input>', {
type:'text',
placeholder:'Search…',
css:{ margin:'6px 0', padding:'4px', width:'140px',
'background':'#111', color:'#fff', border:'1px solid #555' }
} );

$holder.append( $stationSel, $typeSel, $search );

function applyFilters() {
const sVal = $stationSel.val();
const tVal = $typeSel.val();
const q = $search.val().toLowerCase();

rowsData.forEach( ({ tr, output, type, station }) => {
const show =
(!sVal || station === sVal) &&
(!tVal || type === tVal) &&
(!q || output.toLowerCase().includes( q ));
tr.style.display = show ? '' : 'none';
} );
}

$stationSel.on( 'change', applyFilters );
$typeSel .on( 'change', applyFilters );
$search .on( 'input', applyFilters );
} );

/* Lazy-load background image Blur */
document.addEventListener('DOMContentLoaded', () => {
const hero = document.querySelector('.dune-hero');
if (hero && !hero.style.backgroundImage) {
hero.style.backgroundImage =
'url(/images/7/70/Arrakis_dunes.jpg?2025)';
}

const radial = document.querySelector('.radial-menu-wrapper');
if (!radial) return;
const y = radial.offsetTop;
window.addEventListener('scroll', () => {
radial.classList.toggle('is-fixed', window.scrollY > y);
});
});

/**
* Resource Page Module Loader
*/
$(function() {
// Only on resource pages
if ($('.crafting-section, .recipe-table, [class*="crafted-"]').length > 0) {
// Load dependencies first
mw.loader.using(['jquery', 'mediawiki.api', 'mediawiki.util'], function() {
// Load resource page module
$.getScript('/index.php?title=MediaWiki:ResourcePage.js&action=raw&ctype=text/javascript')
.done(function() {
console.log('Resource page module loaded');
})
.fail(function() {
console.error('Failed to load resource page module');
});
});
}
});

$(function () {
const $drop = $('#drop');
const $menu = $('#drop1');

if ($drop.length && $menu.length) {
// Move Actions button into the footer visually
$('#footer').append($drop);
$('#footer').append($menu);

// Style the button like a footer element
$drop.css({
position: 'relative',
display: 'inline-block',
marginTop: '12px',
background: 'rgba(252,231,200,0.08)',
border: '1px solid rgba(252,231,200,0.2)',
color: '#fce7c8',
fontFamily: 'Rajdhani, sans-serif',
padding: '6px 12px',
boxShadow: '0 0 6px rgba(0,0,0,0.3)',
cursor: 'pointer'
});

$drop.hover(
() => $drop.css({ background: 'rgba(252,231,200,0.15)', color: '#fff' }),
() => $drop.css({ background: 'rgba(252,231,200,0.08)', color: '#fce7c8' })
);

// Ensure dropdown menu opens below and is styled cleanly
$menu.css({
position: 'absolute',
top: '100%',
right: '0',
zIndex: '9999',
background: '#1a1a1a',
boxShadow: '0 2px 6px rgba(0,0,0,0.5)',
marginTop: '4px'
});
}

// Footer message logic
if (!$('#custom-footer-note').length) {
const $customLine = $('<div>', {
id: 'custom-footer-note',
text: `This is an experimental solo project exploring what’s possible in gaming UI and data experiences. Things may break—thank you for being part of the push forward. <br>Legal & [[Disclaimer]]`

});

$('#footer').prepend($customLine);
$('#footer-left').hide();
}
});

MediaWiki:Common.js

2025-06-04T05:27:20Z

Operator:

/* ========================================
MediaWiki:Common.js - Fixed Header Spacing
FIXED VERSION - Addresses all positioning issues
======================================== */

/* ░ MOBILE DISCLAIMER BANNER ░ */
$( function () {
if ( window.innerWidth > 768 ) return; // desktop? abort.

// already injected? abort.
if ( $('#mobile-disclaimer').length ) return;

// Build & inject
const $banner = $( '<div>', {
id: 'mobile-disclaimer',
html: 'Heads-up: this section is optimised for desktop. Smaller layouts are experimental 👀'
});

// insert right after the site header / before main content.
// Adjust selector to your skin; Vector uses #content, Timeless uses #mw-site.
$( '#mw-content-text' ).prepend( $banner );
// If you prefer it at absolute top, use $('body').prepend( $banner );
});

/* util: "Fabricator Basics" → "fabricator-basics" */
function makeSlug(str){
return str.toLowerCase().trim()
.replace(/[^\\w\\s-]/g,'') // drop punctuation
.replace(/\\s+/g,'-'); // spaces → dashes
}

$(document).ready(function() {
// FIXED: Check if page has breadcrumb navigation
var hasBreadcrumb = $('.dune-breadcrumb-nav').length > 0;
if (hasBreadcrumb) {
$('body').addClass('has-breadcrumb');
}

// HEADER FIX - Wait for page to load then force header
setTimeout(function() {
// Remove ALL existing headers and nav attempts
$('.mw-header, #mw-header-container, nav.tab-bar, .tab-bar').remove();

// Hide the page title and extra elements completely
$('.firstHeading, h1.title, .mw-page-title-main, #firstHeading, #tagline, h3#tagline, #contentSub, .mw-content-subtitle').remove();

// Remove any MediaWiki notices that might appear
$('#siteNotice, .mw-indicators, .printfooter, .catlinks').remove();

// Create the navigation bar HTML with inline styles
var headerHTML = `
<div id="dune-header" style="position: fixed; top: 0; left: 0; right: 0; height: 60px; background: linear-gradient(180deg, rgba(20, 18, 28, 0.95) 0%, rgba(10, 8, 16, 0.98) 100%); border-bottom: 3px solid rgba(252, 231, 200, 0.4); box-shadow: 0 2px 20px rgba(0,0,0,0.8); z-index: 99999; display: flex; align-items: center;">
<div style="width: 100%; max-width: 1600px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 100%;">
<a href="/wiki/Main_Page" style="font-family: 'Orbitron', sans-serif; font-size: 22px; color: #fce7c8; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; text-shadow: 0 0 15px rgba(252, 231, 200, 0.4); text-decoration: none; white-space: nowrap;">DUNE DB</a>

<nav style="display: flex; gap: 0; margin: 0 20px; height: 100%;">
<a href="/Items" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-left: 1px solid rgba(252, 231, 200, 0.1); border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">◇ Items</a>
<a href="/Crafting" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">⚒ Crafting</a>
<a href="/Building" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">⌂ Building</a>
<a href="/Tech_Tree" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">⬢ Tech Tree</a>
<a href="/Journeys" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">➤ Journeys</a>
<a href="/Skills" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">★ Skills</a>
<a href="/Map" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">🗺 Map</a>
</nav>

<div style="display: flex; align-items: center;">
<form action="/index.php" method="get" style="display: flex; align-items: center; gap: 0; height: 38px;">
<input type="search" name="search" placeholder="Search wiki..." style="background: rgba(0, 0, 2, 0.8); border: 2px solid rgba(252, 231, 200, 0.3); border-radius: 0; color: #fce7c8; padding: 0 12px; width: 200px; font-size: 13px; font-family: 'Rajdhani', sans-serif; transition: all 0.3s ease; outline: none; height: 38px; box-sizing: border-box; margin: 0; vertical-align: middle;" onfocus="this.style.borderColor='#fce7c8'; this.style.boxShadow='0 0 10px rgba(252, 231, 200, 0.3)'; this.style.width='250px';" onblur="this.style.borderColor='rgba(252, 231, 200, 0.3)'; this.style.boxShadow='none'; this.style.width='200px';">
<button type="submit" style="background: rgba(252, 231, 200, 0.1); border: 2px solid rgba(252, 231, 200, 0.3); border-left: none; color: #fce7c8; padding: 0 12px; cursor: pointer; font-size: 14px; transition: all 0.3s ease; height: 38px; box-sizing: border-box; margin: 0; vertical-align: middle; display: flex; align-items: center; justify-content: center;" onmouseover="this.style.background='rgba(252, 231, 200, 0.2)'; this.style.borderColor='#fce7c8';" onmouseout="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.borderColor='rgba(252, 231, 200, 0.3)';"><span>🔍</span></button>
</form>
</div>
</div>
</div>
`;

// Check if header already exists to avoid duplicates
if ($('#dune-header').length === 0) {
$('body').prepend(headerHTML);
}

// CRITICAL: Force proper spacing
$('body').css({
'padding-top': '60px',
'margin-top': '0',
'overflow-y': 'auto',
'height': 'auto'
});

// FIXED: Different spacing for pages with/without breadcrumb
if (hasBreadcrumb) {
// Pages with breadcrumb - content starts immediately after header
$('#content, .mw-body, #mw-content-text, .mw-body-content, .mw-parser-output, #main-section, .main-section, #page-content').css({
'padding-top': '0',
'margin-top': '0'
});

// Breadcrumb should have proper spacing from header
$('.dune-breadcrumb-nav').css({
'margin-top': '20px',
'margin-bottom': '20px'
});
} else {
// Pages without breadcrumb - add padding to content
$('#content, .mw-body, #mw-content-text, .mw-body-content, .mw-parser-output, #main-section, .main-section, #page-content').css({
'padding-top': '20px',
'margin-top': '0'
});
}

// Force first element to start at top (unless it's breadcrumb)
$('.mw-parser-output > *:first-child:not(.dune-breadcrumb-nav), .mw-body-content > *:first-child:not(.dune-breadcrumb-nav)').css({
'margin-top': '0',
'padding-top': '0'
});

// Remove sidebar space
$('#sidebar, .columns.large-2.medium-3').css('display', 'none');
$('#page-content, .columns.large-10.medium-9').css({
'width': '100%',
'max-width': '100%',
'margin': '0',
'padding': '0'
});

// Handle Actions button positioning
$('#p-cactions').css({
'position': 'fixed',
'top': '11px',
'right': '20px',
'z-index': '100001',
'margin': '0',
'padding': '0',
'height': '38px'
});

// Remove spacing from all column wrappers
$('.row > .columns').css({
'padding-top': '0',
'margin-top': '0'
});

// FIXED: Ensure page content can scroll
$('#content').css({
'min-height': 'calc(100vh - 60px)',
'position': 'relative',
'z-index': '1'
});

// Remove any floating MediaWiki elements
$('.mw-jump-link, .mw-redirectedfrom, #siteNotice').remove();

}, 100);
});

/* ===== RADIAL MENU CODE ===== */
function waitForRadialData(callback, attempts = 0) {
const dataTag = document.getElementById('radialMenuData');
if (dataTag) {
try {
const menuItems = JSON.parse(dataTag.innerText || dataTag.textContent);
console.log("✅ Loaded radialMenuData:", menuItems);
callback(menuItems);
} catch (e) {
console.error("❌ Failed to parse radialMenuData", e);
}
} else if (attempts < 20) {
setTimeout(() => waitForRadialData(callback, attempts + 1), 100);
} else {
console.warn("⚠️ radialMenuData tag not found after timeout.");
}
}

$(document).ready(function () {
waitForRadialData(function (menuItems) {
const isMobile = () => window.innerWidth <= 768;

let radialItemsHTML = '';
menuItems.forEach((item, index) => {
const id = item.category.toLowerCase().replace(/\s+/g, '-');
item.id = id;

radialItemsHTML += `
<div class="dune-radial-item-container ${item.position}">
<a data-id="${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 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>
`;

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);

if (isMobile()) {
$('#duneRadialMenu').addClass('mobile-grid');
}

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="${item.url}" 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');
};

const toggleRadialMenu = () => {
if ($('#duneRadialMenu').hasClass('active')) {
hideSubcategories();
$('#duneRadialMenu').removeClass('active');
$('#duneRadialOverlay').removeClass('active');
} else {
$('#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);
}
};

$(document).on('click', '#duneLogoBtn, #menuRadialTrigger img', function (e) {
console.log("✅ Radial trigger clicked");
e.preventDefault();
e.stopPropagation();
toggleRadialMenu();
});

$(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', '#duneRadialOverlay', function () {
hideSubcategories();
$('#duneRadialMenu').removeClass('active');
$('#duneRadialOverlay').removeClass('active');
});

$(document).on('click', 'li.name.logo a[href="/Main_Page"]', function (e) {
e.preventDefault();
toggleRadialMenu();
});

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

$(window).on('resize', function () {
if (isMobile()) {
$('#duneRadialMenu').addClass('mobile-grid');
} else {
$('#duneRadialMenu').removeClass('mobile-grid');
}
});
});
});

/* Used-In dynamic filters & search */
mw.hook( 'wikipage.content' ).add( function ( $content ) {

const $holder = $content.find( '#usedInFilterHolder' );
const $table = $content.find( '#usedInTable' );

if ( !$holder.length || !$table.length ) return;

const rowsData = [];
const stations = new Set();
const types = new Set();

$table.find( 'tbody tr' ).each( function () {
const $tds = $( this ).children( 'td' );
const output = $tds.eq( 0 ).text().trim();
const type = $tds.eq( 1 ).text().trim();
const station = $tds.last().text().trim();

rowsData.push( { tr: this, output, type, station } );
stations.add( station );
types.add( type );
} );

const makeSel = ( id, label, opts ) => {
const $sel = $( '<select>', { id, class: 'game-button', css:{margin:'6px 4px 6px 0'} } )
.append( $( '<option>', { value:'', text:label } ) );
opts.forEach( o => $sel.append( $( '<option>', { value:o, text:o } ) ) );
return $sel;
};

const $stationSel = makeSel( 'filterStation', 'All Stations', [ ...stations ].sort() );
const $typeSel = makeSel( 'filterType', 'All Types', [ ...types ].sort() );
const $search = $( '<input>', {
type:'text',
placeholder:'Search…',
css:{ margin:'6px 0', padding:'4px', width:'140px',
'background':'#111', color:'#fff', border:'1px solid #555' }
} );

$holder.append( $stationSel, $typeSel, $search );

function applyFilters() {
const sVal = $stationSel.val();
const tVal = $typeSel.val();
const q = $search.val().toLowerCase();

rowsData.forEach( ({ tr, output, type, station }) => {
const show =
(!sVal || station === sVal) &&
(!tVal || type === tVal) &&
(!q || output.toLowerCase().includes( q ));
tr.style.display = show ? '' : 'none';
} );
}

$stationSel.on( 'change', applyFilters );
$typeSel .on( 'change', applyFilters );
$search .on( 'input', applyFilters );
} );

/* Lazy-load background image Blur */
document.addEventListener('DOMContentLoaded', () => {
const hero = document.querySelector('.dune-hero');
if (hero && !hero.style.backgroundImage) {
hero.style.backgroundImage =
'url(/images/7/70/Arrakis_dunes.jpg?2025)';
}

const radial = document.querySelector('.radial-menu-wrapper');
if (!radial) return;
const y = radial.offsetTop;
window.addEventListener('scroll', () => {
radial.classList.toggle('is-fixed', window.scrollY > y);
});
});

/**
* Resource Page Module Loader
*/
$(function() {
// Only on resource pages
if ($('.crafting-section, .recipe-table, [class*="crafted-"]').length > 0) {
// Load dependencies first
mw.loader.using(['jquery', 'mediawiki.api', 'mediawiki.util'], function() {
// Load resource page module
$.getScript('/index.php?title=MediaWiki:ResourcePage.js&action=raw&ctype=text/javascript')
.done(function() {
console.log('Resource page module loaded');
})
.fail(function() {
console.error('Failed to load resource page module');
});
});
}
});

$(function () {
const $drop = $('#drop');
const $menu = $('#drop1');

if ($drop.length && $menu.length) {
// Move Actions button into the footer visually
$('#footer').append($drop);
$('#footer').append($menu);

// Style the button like a footer element
$drop.css({
position: 'relative',
display: 'inline-block',
marginTop: '12px',
background: 'rgba(252,231,200,0.08)',
border: '1px solid rgba(252,231,200,0.2)',
color: '#fce7c8',
fontFamily: 'Rajdhani, sans-serif',
padding: '6px 12px',
boxShadow: '0 0 6px rgba(0,0,0,0.3)',
cursor: 'pointer'
});

$drop.hover(
() => $drop.css({ background: 'rgba(252,231,200,0.15)', color: '#fff' }),
() => $drop.css({ background: 'rgba(252,231,200,0.08)', color: '#fce7c8' })
);

// Ensure dropdown menu opens below and is styled cleanly
$menu.css({
position: 'absolute',
top: '100%',
right: '0',
zIndex: '9999',
background: '#1a1a1a',
boxShadow: '0 2px 6px rgba(0,0,0,0.5)',
marginTop: '4px'
});
}

// Footer message logic
if (!$('#custom-footer-note').length) {
const $customLine = $('<div>', {
id: 'custom-footer-note',
text: `This is an experimental solo project exploring what’s possible in gaming UI and data experiences. Things may break—thank you for being part of the push forward. <a href="/Disclaimer" class="footer-link">Legal & Disclaimer</a>`

});

$('#footer').prepend($customLine);
$('#footer-left').hide();
}
});

Disclaimer

2025-06-04T05:19:43Z

Operator: Created page with " = Legal Notice & Disclaimer = <small>Last updated: 4 June 2025</small> == 1 - Interpretation & Definitions == ; Wiki / We / Us / Our : the Dune DB Project ; Service : the website at '''www.dunedb.com''' and any sub-pages ; You / User : any individual or entity accessing..."

= Legal Notice & Disclaimer =
<small>Last updated: 4 June 2025</small>

== 1 - Interpretation & Definitions ==
; Wiki / We / Us / Our
: the Dune DB Project
; Service
: the website at '''www.dunedb.com''' and any sub-pages
; You / User
: any individual or entity accessing the Service
; Funcom Assets
: game art, logos, screenshots, audio, icons, models and other IP owned by Funcom Oslo AS or its licensors

== 2 - Non-Affiliation ==
This is an '''unofficial, fan-operated resource'''.
It is <strong>not endorsed by, affiliated with, or sponsored by Funcom Oslo AS, Legendary Entertainment, or any related parties.</strong>
All Funcom trademarks and copyrights remain the property of their respective owners.

== 3 - Copyright & Trademark Notice ==
© Funcom Oslo AS. “Dune: Awakening” and related logos are trademarks of Funcom Oslo AS or its licensors.
Original text written by our contributors is released under <small>CC BY-NC-SA 4.0</small> unless otherwise noted.

== 4 - Fair-Use Statement ==
Images, video frames, audio snippets and text excerpts are reproduced solely for criticism, commentary, news reporting, teaching and research in accordance with 17 U.S.C. §107.
If you wish to use Funcom Assets beyond fair use, obtain permission from Funcom first.

== 5 - Datamined Material ==
Some icons and data are <em>extracted from public game builds</em> for analysis and are marked with a <code>Datamined</code> label.
* They may change before release.
* No raw, high-resolution files are hosted here.
If you are the rights-holder and object to any such material, contact us at '''[[email protected]]''' and we will remove or alter it promptly.

== 6 - External Links ==
The Service may link to external sites not operated by Us. We make <em>no warranties</em> regarding the accuracy or safety of external content and accept no liability for any loss arising from its use.

== 7 - Errors & Omissions ==
While we aim for accuracy, the information provided is for general guidance only. Content may be out of date, incomplete or erroneous. The Wiki assumes <em>no responsibility</em> for errors or omissions, or for results obtained from the use of this information.

== 8 - Views & User-Generated Content ==
Opinions expressed in articles or comments are solely those of their authors and do not necessarily reflect Our views or Funcom’s. Users are responsible for their own contributions; We reserve the right to remove any content at Our discretion.

== 9 - No Professional Advice ==
Nothing on the Service constitutes legal, financial, medical or any other professional advice. Always consult qualified professionals before acting on information obtained here.

== 10 - Limitation of Liability ==
The Service and all content are provided <em>“as is” and “as available,” without warranty of any kind</em>, express or implied.
In no event shall the Wiki or its contributors be liable for any direct, indirect, incidental, special or consequential damages arising out of—or in connection with—Your use of the Service.

== 11 - Viruses & Security ==
We do not warrant that the Service will be uninterrupted or free of viruses or other harmful components. You are responsible for implementing sufficient safeguards to prevent damage or loss.

== 12 - Changes ==
We may modify this Disclaimer at any time without prior notice. Changes take effect once posted on this page.

== 13 - Contact & Takedown Requests ==
For copyright concerns, takedown requests or legal inquiries, e-mail '''legal@dunedb.com''' with the subject line “DMCA / Legal Request”.

----
''Use the Service at your own risk. By continuing to browse or contribute, You acknowledge that You have read, understood and agreed to this Disclaimer.''

File:T UI IconWpn2HChoamMaula01 T5R D.png

2025-06-04T04:43:15Z