MediaWiki:Gadget-VHResearchUI.js

// Minecraft Modpack Research UI JavaScript
(function() {
    'use strict';

    // Sample mod data - replace with your actual data
const modData = {
  cagerium: {
    name: 'Cagerium',
    description: 'Mob cages for automation and farming.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/cagerium'
      }
    ]
  },
  'mob-spawners': {
    name: 'Mob Spawners',
    description: 'Customizable mob spawner mechanics.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/ispawner'
      }
    ]
  },
  'easy-piglins': {
    name: 'Easy Piglins',
    description: 'Simplifies piglin trading and management.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/easy-piglins'
      },
      {
        text: 'Documentation',
        url: 'https://github.com/henkelmax/easy-piglins#readme'
      }
    ]
  },
  'automatic-genius': {
    name: 'Automatic Genius',
    description: 'Automation for various tasks.',
    prerequisites: [

    ],
    links: [
      {
        note: 'No CurseForge link available (custom modpack feature)'
      }
    ]
  },
  'easy-villagers': {
    name: 'Easy Villagers',
    description: 'Easier villager handling and automation.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/easy-villagers'
      },
      {
        text: 'Documentation',
        url: 'https://github.com/henkelmax/easy-villagers#readme'
      }
    ]
  },
  'vault-compass': {
    name: 'Vault Compass',
    description: 'Compass for vault navigation.',
    prerequisites: [

    ],
    links: [
      {
        note: 'No CurseForge link available (feature of Vault Mod)'
      }
    ]
  },
  'map-markers': {
    name: 'Map Markers',
    description: 'Mark locations on maps.',
    prerequisites: [

    ],
    links: [
      {
        note: 'No CurseForge link available (feature of Vault Mod)'
      }
    ]
  },
  'vault-map': {
    name: 'Vault Map',
    description: 'Specialized map for vaults.',
    prerequisites: [

    ],
    links: [
      {
        note: 'No CurseForge link available (feature of Vault Mod)'
      }
    ]
  },
  'botany-pots': {
    name: 'Botany Pots',
    description: 'Automated crop growth in pots.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/botany-pots'
      },
      {
        text: 'Wiki',
        url: 'https://github.com/Darkhax-Minecraft/BotanyPots/wiki'
      }
    ]
  },
  'thermal-expansion': {
    name: 'Thermal Expansion',
    description: 'Tech mod with machines and automation.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/thermal-expansion'
      },
      {
        text: 'Wiki',
        url: 'https://teamcofh.com/'
      }
    ]
  },
  'laser-bridges': {
    name: 'Laser Bridges',
    description: 'Transport items and energy with lasers.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/laser-bridges-doors'
      },
      {
        text: 'Documentation',
        url: 'https://www.curseforge.com/minecraft/mc-mods/laser-bridges-doors/screenshots'
      }
    ]
  },
  entangled: {
    name: 'Entangled',
    description: 'Link blocks for remote access.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/entangled'
      },
      {
        text: 'Wiki',
        url: 'https://wiki.mcjty.eu/mods/index.php?title=Entangled'
      }
    ]
  },
  'thermal-dynamos': {
    name: 'Thermal Dynamos',
    description: 'Power generation for Thermal Expansion.',
    prerequisites: [

    ],
    links: [
      {
        note: 'No CurseForge link available (feature of Thermal Expansion)'
      },
      {
        text: 'Documentation',
        url: 'https://teamcofh.com/docs/1.12/thermal-expansion/dynamos/'
      }
    ]
  },
  'mekanism-qio': {
    name: 'Mekanism QIO',
    description: 'Advanced item storage system.',
    prerequisites: [

    ],
    links: [
      {
        note: 'No CurseForge link available (feature of Mekanism)'
      }
    ]
  },
  'digital-miner': {
    name: 'Digital Miner',
    description: 'Automated mining machine.',
    prerequisites: [

    ],
    links: [
      {
        note: 'No CurseForge link available (feature of Mekanism)'
      }
    ]
  },
  'mining-gadgets': {
    name: 'Mining Gadgets',
    description: 'Handheld mining tools.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/mining-gadgets'
      },
      {
        text: 'Documentation',
        url: 'https://github.com/Direwolf20-MC/MiningGadgets#readme'
      }
    ]
  },
  'weirding-gadgets': {
    name: 'Weirding Gadgets',
    description: 'Chunk loading and automation gadgets.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/chunky-mcchunkface'
      }
    ]
  },
  'building-gadgets': {
    name: 'Building Gadgets',
    description: 'Tools for building structures quickly.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/building-gadgets'
      },
      {
        text: 'Wiki',
        url: 'https://github.com/Direwolf20-MC/BuildingGadgets/wiki'
      }
    ]
  },
  pipez: {
    name: 'Pipez',
    description: 'Transport items, fluids, and energy.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/pipez'
      },
      {
        text: 'Documentation',
        url: 'https://github.com/henkelmax/pipez#readme'
      }
    ]
  },
  mekanism: {
    name: 'Mekanism',
    description: 'Tech mod with machines and power systems.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/mekanism'
      },
      {
        text: 'Wiki',
        url: 'https://wiki.aidancbrady.com/wiki/Main_Page'
      }
    ]
  },
  botania: {
    name: 'Botania',
    description: 'Magic mod based on nature and flowers.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/botania'
      },
      {
        text: 'Documentation',
        url: 'https://botaniamod.net/lexicon.html'
      }
    ]
  },
  'botania-flux-field': {
    name: 'Botania Flux Field',
    description: 'Mana-based energy field for Botania.',
    prerequisites: [

    ],
    links: [
      {
        note: 'No CurseForge link available (feature of Botania)'
      },
      {
        text: 'Documentation',
        url: 'https://botaniamod.net/lexicon.html#mana/rf_generator'
      }
    ]
  },
  'mekanism-generators': {
    name: 'Mekanism Generators',
    description: 'Power generation for Mekanism.',
    prerequisites: [

    ],
    links: [
      {
        note: 'No CurseForge link available (feature of Mekanism)'
      }
    ]
  },
  'flux-networks': {
    name: 'Flux Networks',
    description: 'Wireless energy networks.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/flux-networks'
      },
      {
        text: 'Wiki',
        url: 'https://github.com/SonarSonic/Flux-Networks/wiki'
      }
    ]
  },
  powah: {
    name: 'Powah',
    description: 'Power generation and management.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/powah-rearchitected'
      },
      {
        text: 'Wiki',
        url: 'https://github.com/Technici4n/Powah#readme'
      },
      {
        text: 'Support',
        url: 'https://discord.gg/Zd6t9ka7ne'
      }
    ]
  },
  'iron-generators': {
    name: 'Iron Generators',
    description: 'Simple iron-based generators.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/iron-generators'
      }
    ]
  },
  'junk-management': {
    name: 'Junk Management',
    description: 'Tools for managing junk items.',
    prerequisites: [

    ],
    links: [
      {
        note: 'No CurseForge link available (custom modpack feature)'
      }
    ]
  },
  pouches: {
    name: 'Pouches',
    description: 'Portable item storage.',
    prerequisites: [

    ],
    links: [
      {
        note: 'No CurseForge link available (feature of Sophisticated Backpacks)'
      }
    ]
  },
  'colossal-chests': {
    name: 'Colossal Chests',
    description: 'Massive storage chests.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/colossal-chests'
      },
      {
        text: 'Wiki',
        url: 'https://github.com/ljfa-ag/ColossalChests/wiki'
      }
    ]
  },
  drawers: {
    name: 'Drawers',
    description: 'Compact item storage drawers.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/storage-drawers'
      },
      {
        text: 'Documentation',
        url: 'https://github.com/jaquadro/StorageDrawers'
      }
    ]
  },
  snad: {
    name: 'SNAD',
    description: 'Faster crop growth on sand.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/snad'
      },
      {
        text: 'Documentation',
        url: 'https://github.com/TheRoBrit/Snad'
      }
    ]
  },
  'phytogenic-insulator': {
    name: 'Phytogenic Insulator',
    description: 'Machine for growing plants.',
    prerequisites: [

    ],
    links: [
      {
        note: 'No CurseForge link available (feature of Thermal Expansion)'
      },
      {
        text: 'Documentation',
        url: 'https://teamcofh.com/docs/1.12/thermal-expansion/phytogenic-insolator/'
      }
    ]
  },
  create: {
    name: 'Create',
    description: 'Mechanical automation and contraptions.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/create'
      },
      {
        text: 'Wiki',
        url: 'https://create.fandom.com/wiki/Create_Mod_Wiki'
      }
    ]
  },
  'iron-furnaces': {
    name: 'Iron Furnaces',
    description: 'Upgradable furnaces.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/iron-furnaces'
      },
      {
        text: 'Wiki',
        url: 'https://github.com/Qelifern/IronFurnaces/wiki'
      }
    ]
  },
  xnet: {
    name: 'Xnet',
    description: 'Networked item, fluid, and energy transport.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/xnet'
      },
      {
        text: 'Wiki',
        url: 'https://wiki.mcjty.eu/mods/index.php?title=XNet'
      }
    ]
  },
  'modular-routers': {
    name: 'Modular Routers',
    description: 'Modular item transport system.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/modular-routers'
      },
      {
        text: 'Wiki',
        url: 'https://github.com/desht/ModularRouters/wiki'
      }
    ]
  },
  'dark-utilities': {
    name: 'Dark Utilities',
    description: 'Utility blocks for automation and combat.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/dark-utilities'
      },
      {
        text: 'Wiki',
        url: 'https://github.com/Darkhax-Minecraft/Dark-Utilities/wiki'
      }
    ]
  },
  waystones: {
    name: 'Waystones',
    description: 'Teleportation waystones.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/waystones'
      },
      {
        text: 'Wiki',
        url: 'https://mods.twelveiterations.com/mc/waystones'
      }
    ]
  },
  'torch-master': {
    name: 'Torch Master',
    description: 'Prevents mob spawning with mega torches.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/torchmaster'
      },
      {
        text: 'Wiki',
        url: 'https://github.com/Xalcon/TorchMaster/wiki'
      }
    ]
  },
  trashcans: {
    name: 'Trashcans',
    description: 'Dispose of unwanted items.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/trashcans'
      },
      {
        text: 'Documentation',
        url: 'https://github.com/SuperMartijn642/TrashCans#readme'
      }
    ]
  },
  elevators: {
    name: 'Elevators',
    description: 'Simple vertical transport.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/openblocks-elevator'
      },
      {
        text: 'Documentation',
        url: 'https://github.com/VsnGamer/ElevatorMod#readme'
      }
    ]
  },
  'simple-storage-networks': {
    name: 'Simple Storage Networks',
    description: 'Simple item storage and access.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/simple-storage-network'
      },
      {
        text: 'Documentation',
        url: 'https://github.com/Lothrazar/Storage-Network#readme'
      }
    ]
  },
  'refined-storage': {
    name: 'Refined Storage',
    description: 'Digital item storage and automation.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/refined-storage'
      },
      {
        text: 'Wiki',
        url: 'https://refinedstorage.com/'
      }
    ]
  },
  'applied-energistics': {
    name: 'Applied Energistics',
    description: 'Digital item storage and automation.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/applied-energistics-2'
      },
      {
        text: 'Wiki',
        url: 'https://ae-mod.info/'
      }
    ]
  },
  'stack-upgrading': {
    name: 'Stack Upgrading',
    description: 'Upgrade item stack sizes.',
    prerequisites: [

    ],
    links: [
      {
        note: 'No CurseForge link available (feature of Sophisticated Backpacks)'
      }
    ]
  },
  'auto-refill': {
    name: 'Auto Refill',
    description: 'Automatically refill items.',
    prerequisites: [

    ],
    links: [
      {
        note: 'No CurseForge link available (feature of Sophisticated Backpacks)'
      }
    ]
  },
  'auto-feeding': {
    name: 'Auto Feeding',
    description: 'Automatically feed the player.',
    prerequisites: [

    ],
    links: [
      {
        note: 'No CurseForge link available (feature of Sophisticated Backpacks)'
      }
    ]
  },
  belts: {
    name: 'Belts',
    description: 'Transport items with conveyor belts.',
    prerequisites: [

    ],
    links: [
      {
        note: 'No CurseForge link available (feature of Sophisticated Backpacks)'
      }
    ]
  },
  backpacks: {
    name: 'Backpacks',
    description: 'Wearable backpacks for extra storage.',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/sophisticated-backpacks-vault-hunters-edition'
      },
      {
        text: 'Wiki',
        url: 'https://github.com/P3pp3rF1y/SophisticatedBackpacks/wiki'
      }
    ]
  },
  'big-backpacks': {
    name: 'Big Backpacks',
    description: 'Large capacity backpacks.',
    prerequisites: [

    ],
    links: [
      {
        note: 'No CurseForge link available (feature of Sophisticated Backpacks)'
      }
    ]
  },
  'double-pouches': {
    name: 'Double Pouches',
    description: 'Double capacity pouches.',
    prerequisites: [

    ],
    links: [
      {
        note: 'No CurseForge link available (feature of Sophisticated Backpacks)'
      }
    ]
  },
  'soul-harvester': {
    name: 'Soul Harvester',
    description: 'Harvest mob souls for crafting.',
    prerequisites: [

    ],
    links: [
      {
        note: 'No CurseForge link available (custom modpack feature)'
      }
    ]
  },
  potions: {
    name: 'Potions',
    description: 'Tier 1 Vault Potions',
    prerequisites: [

    ],
    links: [
      {
        note: 'No CurseForge link available (feature of Vault Mod)'
      }
    ]
  },
  mixtures: {
    name: 'Mixtures',
    description: 'Tier 2 Vault Potions',
    prerequisites: [

    ],
    links: [
      {
        note: 'No CurseForge link available (feature of Vault Mod)'
      }
    ]
  },
  brews: {
    name: 'Brews',
    description: 'Tier 3 Vault Potions',
    prerequisites: [

    ],
    links: [
      {
        note: 'No CurseForge link available (feature of Vault Mod)'
      }
    ]
  }
};

    // 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 = `
            <div class="vho-close-button">&times;</div>
            <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();
            console.log("This is a test")
        });
        return flyout;
    }
    


    function showFlyout(modId, event) {
        const target = event.currentTarget;
        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
        target.parentElement.appendChild(flyout);

        // Reset styles
        flyout.style.left = '';
        flyout.style.top = '';
        flyout.style.bottom = '';
        flyout.style.right = '';

        // Position below and to the right
        flyout.style.position = 'absolute';
        flyout.style.left = `${target.offsetLeft + target.offsetWidth + 10}px`;
        flyout.style.top = `${target.offsetTop}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();
    }

})();