MediaWiki:Gadget-VHResearchUI.js: Difference between revisions

// Minecraft Modpack Research UI JavaScript
(function() {
    'use strict';
if (mw.config.get('wgPageName') !== 'Research') return;
    // 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)'
      }
    ]
  },
  'altar-automation': {
    name: 'Altar Automation',
    description: 'Automatically pull items from your storage to the Vault Altar!',
    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)'
      }
    ]
  },
  'vault-filters': {
    name: 'Vault Filters',
    description: 'This mod allows you to deep filter vault items, including but not limited to jewels, vault gear and cards, which enables rich automation in machines like Modular Routers, Create and your digital storage!',
    prerequisites: [

    ],
    links: [
      {
        text: 'CurseForge',
        url: 'https://www.curseforge.com/minecraft/mc-mods/vault-filters'
      },
      {
        text: 'Guide',
        url: 'https://www.youtube.com/watch?v=0Yov7p5PaEE'
      }
    ]
  }
};

    // 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();
    }

})();