Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
// Minecraft Modpack Research UI JavaScript
(function() {
'use strict';
// Sample mod data - replace with your actual data
const modData = {
'backpack': {
name: 'Backpack',
description: 'Adds wearable backpacks that provide additional inventory space for adventuring.',
prerequisites: ['No prerequisites'],
links: [
{ text: 'Documentation', url: 'https://example.com/backpack' },
{ text: 'CurseForge', url: 'https://curseforge.com/minecraft/mc-mods/backpack' }
]
},
'storage-drawers': {
name: 'Storage Drawers',
description: 'Compact storage solution with visual representation of stored items.',
prerequisites: ['Basic crafting knowledge'],
links: [
{ text: 'Documentation', url: 'https://example.com/storage-drawers' },
{ text: 'CurseForge', url: 'https://curseforge.com/minecraft/mc-mods/storage-drawers' }
]
},
'thermal': {
name: 'Thermal Expansion',
description: 'Comprehensive tech mod featuring machines, energy systems, and automation.',
prerequisites: ['Basic redstone knowledge', 'Iron and copper resources'],
links: [
{ text: 'Documentation', url: 'https://example.com/thermal' },
{ text: 'CurseForge', url: 'https://curseforge.com/minecraft/mc-mods/thermal-expansion' }
]
},
'mekanism': {
name: 'Mekanism',
description: 'Advanced technology mod with complex machinery and power systems.',
prerequisites: ['Thermal Expansion', 'Advanced crafting'],
links: [
{ text: 'Documentation', url: 'https://example.com/mekanism' },
{ text: 'Wiki', url: 'https://wiki.aidancbrady.com/wiki/Mekanism' }
]
},
'botania': {
name: 'Botania',
description: 'Magic mod based on nature and flowers, providing unique automation through mana.',
prerequisites: ['Basic flower farming'],
links: [
{ text: 'Documentation', url: 'https://example.com/botania' },
{ text: 'Official Wiki', url: 'https://botaniamod.net/' }
]
},
'jei': {
name: 'Just Enough Items',
description: 'Essential utility mod for viewing recipes and managing items.',
prerequisites: ['No prerequisites'],
links: [
{ text: 'Documentation', url: 'https://example.com/jei' },
{ text: 'CurseForge', url: 'https://curseforge.com/minecraft/mc-mods/jei' }
]
}
};
// Default data for mods not explicitly defined
const defaultModData = {
name: 'Mod Name',
description: 'This is a placeholder description for this mod. Replace with actual mod information.',
prerequisites: ['No prerequisites'],
links: [
{ text: 'Documentation', url: '#' },
{ text: 'CurseForge', url: '#' }
]
};
let currentFlyout = null;
function createFlyout() {
const flyout = document.createElement('div');
flyout.id = 'mod-flyout';
flyout.className = 'vho-flyout';
flyout.innerHTML = `
<button class="vho-close-button">×</button>
<div class="vho-flyout-header" id="flyout-title">Mod Name</div>
<div class="vho-flyout-section">
<h4>Description</h4>
<p id="flyout-description">Mod description goes here...</p>
</div>
<div class="vho-flyout-section">
<h4>Prerequisites</h4>
<div class="vho-prerequisites">
<ul class="vho-prerequisites-list" id="flyout-prerequisites">
<li>No prerequisites</li>
</ul>
</div>
</div>
<div class="vho-flyout-section">
<h4>External Links</h4>
<div class="vho-external-links" id="flyout-links">
<a href="#" class="vho-external-link">Documentation</a>
<a href="#" class="vho-external-link">CurseForge</a>
</div>
</div>
`;
document.body.appendChild(flyout);
flyout.querySelector('.vho-close-button').addEventListener('click', function() {
closeFlyout();
});
return flyout;
}
function showFlyout(modId, event) {
let flyout = document.getElementById('mod-flyout');
if (!flyout) {
flyout = createFlyout();
}
const data = modData[modId] || Object.assign({}, defaultModData, {
name: modId.charAt(0).toUpperCase() + modId.slice(1).replace(/-/g, ' ')
});
// Update flyout content
document.getElementById('flyout-title').textContent = data.name;
document.getElementById('flyout-description').textContent = data.description;
// Update prerequisites
const prereqList = document.getElementById('flyout-prerequisites');
prereqList.innerHTML = '';
data.prerequisites.forEach(prereq => {
const li = document.createElement('li');
li.textContent = prereq;
prereqList.appendChild(li);
});
// Update links
const linksContainer = document.getElementById('flyout-links');
linksContainer.innerHTML = '';
data.links.forEach(link => {
const a = document.createElement('a');
a.href = link.url;
a.textContent = link.text;
a.className = 'vho-external-link';
a.target = '_blank';
linksContainer.appendChild(a);
});
// Position flyout near the clicked element
const rect = event.target.getBoundingClientRect();
const flyoutWidth = 420; // max-width + padding
const flyoutHeight = 400; // estimated height
// Calculate position, ensuring flyout stays on screen
let left = rect.right + 10;
let top = rect.top;
// Adjust horizontal position if flyout would go off screen
if (left + flyoutWidth > window.innerWidth) {
left = rect.left - flyoutWidth - 10;
}
if (left < 10) {
left = 10;
}
// Adjust vertical position if flyout would go off screen
if (top + flyoutHeight > window.innerHeight) {
top = window.innerHeight - flyoutHeight - 10;
}
if (top < 10) {
top = 10;
}
flyout.style.left = left + 'px';
flyout.style.top = top + 'px';
// Show flyout
flyout.classList.add('active');
currentFlyout = flyout;
}
function closeFlyout() {
const flyout = document.getElementById('mod-flyout');
if (flyout) {
flyout.classList.remove('active');
}
currentFlyout = null;
}
function initializeVHResearchUI() {
// Add click listeners to all mod icons
const modIcons = document.querySelectorAll('.vho-mod-icon');
modIcons.forEach(icon => {
icon.addEventListener('click', function(e) {
e.stopPropagation();
e.preventDefault();
const modId = this.getAttribute('data-mod');
showFlyout(modId, e);
});
});
// Close flyout when clicking outside
document.addEventListener('click', function(e) {
if (currentFlyout && !currentFlyout.contains(e.target)) {
closeFlyout();
}
});
// Close flyout on escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && currentFlyout) {
closeFlyout();
}
});
}
// Expose functions globally for onclick handlers
window.VHResearchUI = {
showFlyout: showFlyout,
closeFlyout: closeFlyout,
initializeVHResearchUI: initializeVHResearchUI
};
// Initialize when DOM is ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initializeVHResearchUI);
} else {
initializeVHResearchUI();
}
})();