MediaWiki:Common.js

// load various utilities from the commons wiki, including l10nFactory and isEditorActive
mw.loader.getScript( 'https://commons.wiki.gg/MediaWiki:Common-base.js?action=raw\u0026ctype=text/javascript' ).then(function(){
////////////////////////////////////////////////////////////////////////////////
/* Now we can use l10nFactory and isEditorActive  /
/* Example for l10nFactory:
var l10n = l10nFactory(mw.config.get('wgUserLanguage'), {
	l10n_key {
		'en': 'en_text',
		'de': 'de_text',
		'zh': 'zh_text',
	},
	l10n_key2 {
		'en': 'en_text2',
		'zh': 'zh_text2',
	}
});
var text = l10n('l10n_key');
*/

////////////////////////////////////////////////////////////////////////////////
/*end of .then() callback*/ 

$(document).ready(function() {
	if (mw.config.get('wgPageName') !== 'World_Map') {
	    if ($(".global-notice").length == 0) {
	        var notice = $('<div class="global-notice">').html(
	          '<center>This is a wiki for a reason, anyone can contribute. If you see something that is inaccurate, don\'t ask to fix it, improve it yourself. </center>' +
	          '<center>[ <a href="/wiki/Template:Disclaimer">Disclaimer</a>, <a href="https://kaetram.wiki.gg/index.php?title=Special:CreateAccount&returnto=Kaetram+Wiki">Create new user</a> ] </center><br> <br>'
	        );
	        $("#mw-content-text").prepend(notice);  // Insert into the page content
	    }
	
	
	    // Check if the current page is the Template:DivinityCalculator page
	    if (mw.config.get('wgPageName') === 'Template:DivinityCalculator') {
	
	        // Replace the static divs with input fields
	        document.getElementById("soul").innerHTML = '<input type="number" id="soul-input" class="input-style" value="0" min="0">';
	        document.getElementById("spirit").innerHTML = '<input type="number" id="spirit-input" class="input-style" value="0" min="0">';
	        document.getElementById("essence").innerHTML = '<input type="number" id="essence-input" class="input-style" value="0" min="0">';
	        document.getElementById("psyche").innerHTML = '<input type="number" id="psyche-input" class="input-style" value="0" min="0">';
	        document.getElementById("ethos").innerHTML = '<input type="number" id="ethos-input" class="input-style" value="0" min="0">';
	        document.getElementById("pneuma").innerHTML = '<input type="number" id="pneuma-input" class="input-style" class="input-style" value="0" min="0">';
	        document.getElementById("cur-div-lvl").innerHTML = 'Current Level: <input type="number" id="cur-div-lvl-input" class="input-style-tiny" value="1" min="1" max="120">';
	        document.getElementById("cur-div-xp").innerHTML = 'Current XP: <input type="number" id="cur-div-xp-input" class="input-style" value="0" min="0" max="250000000">';
	        document.getElementById("calculator-submit").innerHTML = '<button id="calculate-btn" class="button-style">Calculate</button>';
	        
	        const xpLevels = [
	        0, 83, 174, 275, 387, 511, 648, 799, 966, 1151, 1355, 1580, 1829, 2103, 2406, 
	        2740, 3109, 3517, 3967, 4463, 5011, 5616, 6283, 7020, 7833, 8730, 9720, 10813, 
	        12020, 13352, 14822, 16444, 18235, 20212, 22394, 24802, 27460, 30394, 33633, 
	        37209, 41156, 45513, 50323, 55633, 61495, 67966, 75110, 82996, 91702, 101314, 
	        111925, 123640, 136573, 150851, 166614, 184017, 203231, 224443, 247862, 273718, 
	        302264, 333780, 368575, 406990, 449403, 496229, 547928, 605006, 668024, 737600, 
	        814417, 899228, 992866, 1096249, 1210391, 1336413, 1475551, 1629170, 1798777, 
	        1986037, 2192787, 2421055, 2673082, 2951341, 3258562, 3597759, 3972261, 4385743, 
	        4842262, 5346298, 5902797, 6517219, 7195594, 7944579, 8771523, 9684541, 10692593, 
	        11805570, 13034394, 14391123, 15889071, 17542938, 19368953, 21385034, 23610966, 
	        26068592, 28782028, 31777902, 35085613, 38737619, 42769758, 47221598, 52136826, 
	        57563675, 63555399, 70170796, 77474784, 85539037, 94442692, 104273121
	    ];
	
	        // Add event listener for calculation
	        document.getElementById("calculate-btn").addEventListener("click", function() {
	
	            // Fetch the values from the inputs
	            var soulValue = parseInt(document.getElementById("soul-input").value) || 0;
	            var spiritValue = parseInt(document.getElementById("spirit-input").value) || 0;
	            var essenceValue = parseInt(document.getElementById("essence-input").value) || 0;
	            var psycheValue = parseInt(document.getElementById("psyche-input").value) || 0;
	            var ethosValue = parseInt(document.getElementById("ethos-input").value) || 0;
	            var pneumaValue = parseInt(document.getElementById("pneuma-input").value) || 0;
	            var curDivLvl = parseInt(document.getElementById("cur-div-lvl-input").value) || 1;
	            var curDivXp = parseInt(document.getElementById("cur-div-xp-input").value) || 0;
	            
	            // Set the current XP to the minimum required for the current level if it is too low
				    var minRequiredXpForLvl = xpLevels[curDivLvl - 1]; // Current level's minimum XP
				    if (curDivXp < minRequiredXpForLvl) {
				        curDivXp = minRequiredXpForLvl; // Automatically adjust current XP to the minimum for the level
				    }
	
	            // Calculate the total EXP
	            var soulEXP = (soulValue * 8) + (spiritValue * 20) + (essenceValue * 55) + (psycheValue * 256) + (ethosValue * 455) + (pneumaValue * 965);
	            
	            // Calculate the total EXP
	            var TotalEXP = soulEXP + curDivXp;
	            
				// Determine the final level based on the total EXP
				var finalLevel = 1;
				for (var i = 0; i < xpLevels.length; i++) {
				    if (TotalEXP < xpLevels[i]) {
				        finalLevel = i; // Level before the level where TotalEXP fits
				        break;
				    }
				}
				if (finalLevel < 1) finalLevel = 1; // Ensure level is not negative
	
	            // Display the total EXP
	            document.getElementById("TotalEXP").innerHTML = 'Total EXP: ' + TotalEXP;
	            document.getElementById("soulEXP").innerHTML = 'Soul EXP: ' + soulEXP;
	            document.getElementById("FinalLevel").innerHTML = 'Final Level: ' + finalLevel;
	        });
	    }
	    
		// Define the sections you want to toggle by their IDs
		var sections = ['#p-Mechanics', '#p-Combat', '#p-Skills', '#p-Miscellaneous'];
		
		// Loop through each section and apply the same toggle behavior
		for (var i = 0; i < sections.length; i++) {
		    var section = sections[i];
		    var $section = $(section);
		    var $content = $section.find('div.body');
		    
		    // Collapse the section by default
		    $content.hide();
		    
		    // Add a 'collapsed' class to indicate the section is collapsed initially
		    $section.addClass('collapsed');
		    
		    // Add click event handler for toggling
		    $section.on('click', function() {
		        var $thisContent = $(this).find('div.body');
		        
		        // Toggle the 'collapsed' class to visually indicate state
		        $(this).toggleClass('collapsed');
		        
		        // If the section is hidden, show it; if it's shown, hide it
		        if ($thisContent.is(':visible')) {
		            $thisContent.slideUp();  // Collapse the section
		        } else {
		            $thisContent.slideDown();  // Expand the section
		        }
		    });
		}
	}
	
// Check if the current page is the Map:Interactive_Map page
    if (mw.config.get('wgPageName') === 'Map:Interactive_Map' || mw.config.get('wgPageName') === 'World_Map') {

        // Define the big groups with their small group labels
        var bigGroups = {
            "Trees": ["Dead Oak"],
            "Foraging": ["Mushroom Patch", "Blueberry Bush", "Corn Bush", "Blue Lily Bush", "Tomato Bush", "Peach Bush", "Raspberry Bush", "Blackberry Bush", "Mustard Bush", "Paprika Bush", "Cumin Bush", "Dandelion Bush", "Kiwi Bush", "Mulberry Bush", "Oat Bush", "Quinoa Bush", "Banana Bush", "Galaxy Lily Bush",],
            "Fishing": ["Cage Spot 1", "Cage Spot 2"]
        };

        // Function to create and show the big group checkboxes
        function createBigGroups() {
            var container = document.createElement('div');
            container.id = 'bigGroupsContainer';
            container.style.display = 'block';

            // Clear previous big group content if it exists
            var existingContainer = document.getElementById('bigGroupsContainer');
            if (existingContainer) {
                existingContainer.parentNode.removeChild(existingContainer);
            }

            // Create checkboxes for each big group
            for (var groupName in bigGroups) {
                if (bigGroups.hasOwnProperty(groupName)) {
                    var groupDiv = document.createElement('div');
                    groupDiv.style.marginBottom = '10px';

                    var checkbox = document.createElement('input');
                    checkbox.type = 'checkbox';
                    checkbox.id = 'bigGroup-' + groupName;
                    checkbox.checked = true; // Default to checked

                    var label = document.createElement('label');
                    label.htmlFor = checkbox.id;
                    label.textContent = groupName;

                    groupDiv.appendChild(checkbox);
                    groupDiv.appendChild(label);

                    // Add event listener to the checkbox to toggle small groups
                    checkbox.addEventListener('change', function(event) {
                        var isChecked = event.target.checked;
                        var bigGroup = event.target.id.replace('bigGroup-', '');
                        toggleSmallGroups(bigGroup, isChecked);
                        updateInteractiveMap(bigGroup, isChecked);
                    });

                    container.appendChild(groupDiv);
                }
            }

            // Ensure the button container exists before appending the new container
            var buttonContainer = document.querySelector('.oo-ui-menuLayout-content');
            if (buttonContainer) {
                buttonContainer.appendChild(container);
            } else {
                console.error('Button container not found');
                // Retry after a short delay
                setTimeout(createBigGroups, 1000); // Retry after 1 second
            }
        }

        // Function to toggle small groups based on big group checkbox
        function toggleSmallGroups(bigGroupName, isChecked) {
            var labels = document.getElementsByClassName('oo-ui-labelElement-label');
            for (var i = 0; i < labels.length; i++) {
                var label = labels[i];
                var labelText = label.textContent.trim();
                if (bigGroups[bigGroupName].indexOf(labelText) > -1) {
                    var id = label.getAttribute('for');
                    var checkbox = document.getElementById(id);
                    if (checkbox) {
                        checkbox.checked = isChecked;
                        simulateCheckboxChange(checkbox);
                    }
                }
            }
        }

        // Function to simulate a user change event on a checkbox
        function simulateCheckboxChange(checkbox) {
            var event = new Event('change', { bubbles: true });
            checkbox.dispatchEvent(event);
        }

        // Function to update the interactive map based on big group toggles
        function updateInteractiveMap(bigGroupName, isChecked) {
            var images = document.querySelectorAll('.leaflet-marker-icon');
            images.forEach(function(image) {
                var smallGroupName = image.getAttribute('data-small-group');
                var shouldShow = true;
                if (smallGroupName && bigGroups[bigGroupName].indexOf(smallGroupName) > -1) {
                    shouldShow = isChecked;
                }
                image.style.display = shouldShow ? 'block' : 'none';
            });
        }

        // Function to toggle between showing big groups and small groups
        function toggleGroups(showBigGroups) {
            var bigGroupContainer = document.getElementById('bigGroupsContainer');
            var smallGroupsButton = document.getElementById('smallGroupsButton');
            var bigGroupsButton = document.getElementById('bigGroupsButton');

            if (showBigGroups) {
                if (!bigGroupContainer) {
                    createBigGroups();
                } else {
                    bigGroupContainer.style.display = 'block';
                }
                if (smallGroupsButton) {
                    smallGroupsButton.style.display = 'block';
                }
                if (bigGroupsButton) {
                    bigGroupsButton.style.display = 'none';
                }

                // Hide small groups
                var smallGroupItems = document.querySelectorAll('.ext-datamaps-filters-mgroup-row');
                smallGroupItems.forEach(function(item) {
                    item.style.display = 'none';
                });
            } else {
                if (bigGroupContainer) {
                    bigGroupContainer.style.display = 'none';
                }
                if (smallGroupsButton) {
                    smallGroupsButton.style.display = 'none';
                }
                if (bigGroupsButton) {
                    bigGroupsButton.style.display = 'block';
                }

                // Show small groups
                var smallGroupItems = document.querySelectorAll('.ext-datamaps-filters-mgroup-row');
                smallGroupItems.forEach(function(item) {
                    item.style.display = 'block';
                });
            }
        }

        // Add buttons for toggling groups
        function addButtons() {
            var buttonContainer = document.querySelector('.oo-ui-buttonGroupWidget');
            if (buttonContainer) {
                // Adding the "Big Groups" button
                var bigGroupsButton = document.createElement('span');
                bigGroupsButton.id = 'bigGroupsButton';
                bigGroupsButton.innerHTML = '<span class="oo-ui-widget oo-ui-widget-enabled oo-ui-buttonElement oo-ui-buttonElement-framed oo-ui-labelElement oo-ui-buttonWidget"><a class="oo-ui-buttonElement-button" role="button" tabindex="0" rel="nofollow"><span class="oo-ui-iconElement-icon oo-ui-iconElement-noIcon"></span><span class="oo-ui-labelElement-label">Big Groups</span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator"></span></a></span>';
                buttonContainer.appendChild(bigGroupsButton);

                // Adding the "Small Groups" button
                var smallGroupsButton = document.createElement('span');
                smallGroupsButton.id = 'smallGroupsButton';
                smallGroupsButton.style.display = 'none';
                smallGroupsButton.innerHTML = '<span class="oo-ui-widget oo-ui-widget-enabled oo-ui-buttonElement oo-ui-buttonElement-framed oo-ui-labelElement oo-ui-buttonWidget"><a class="oo-ui-buttonElement-button" role="button" tabindex="0" rel="nofollow"><span class="oo-ui-iconElement-icon oo-ui-iconElement-noIcon"></span><span class="oo-ui-labelElement-label">Small Groups</span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator"></span></a></span>';
                buttonContainer.appendChild(smallGroupsButton);

                // Initial button setup
                bigGroupsButton.addEventListener('click', function() {
                    toggleGroups(true); // Show big groups
                });

                smallGroupsButton.addEventListener('click', function() {
                    toggleGroups(false); // Show small groups
                });
            } else {
                console.error('Button container not found');
                // Retry after a short delay
                setTimeout(addButtons, 1000); // Retry after 1 second
            }
        }

        // Initial button setup
        addButtons();

    }
    
if (mw.config.get('wgPageName') === 'Test_JS') {
    // Create the balloon container
    var container = document.createElement('div');
    container.id = 'balloon-container'; // Set the ID for styling
    document.body.appendChild(container); // Append it to the body

    // Set the CSS styles for the container
    container.style.position = 'fixed';
    container.style.top = '0';
    container.style.left = '0';
    container.style.width = '100vw'; // Full width
    container.style.height = '100vh'; // Full height
    container.style.zIndex = '-2'; // Behind other content

    var balloonImages = [
        'https://kaetram.wiki.gg/images/e/e4/Rat_balloon_pet.png',
        'https://kaetram.wiki.gg/images/f/ff/Jellyfish_pet.png',
        'https://kaetram.wiki.gg/images/7/77/Eye_pet.png',
        'https://kaetram.wiki.gg/images/a/a1/Axolotl_pet.png',
        'https://kaetram.wiki.gg/images/9/92/Snowman_pet.png'
    ];

    for (var i = 0; i < 20; i++) { // Create 20 balloons
        var balloon = document.createElement('img');
        balloon.src = balloonImages[Math.floor(Math.random() * balloonImages.length)];
        balloon.className = 'balloon';
        
        // Random position and delay for natural look
        balloon.style.left = Math.random() * 100 + "vw"; // Random horizontal position
        balloon.style.animationDelay = Math.random() * 3 + "s"; // Random delay for each balloon
        balloon.style.animationDuration = (4 + Math.random() * 2) + "s"; // Slight random duration
        
        container.appendChild(balloon); // Append balloon to the container
    }
}


});


});



/* DRUID */
$(function () {
  $(".druid-main-images-label").off("click");
  $(".druid-main-images-label").click(function () {
    var $parent = $(this).closest(".druid-container");
    $parent.find(".druid-toggleable").removeClass("focused");
    var i = $(this).attr("data-druid");
    $parent.find(".druid-toggleable[data-druid=" + i + "]").addClass("focused");
  });

  $(".druid-collapsible").off("click");
  $(".druid-collapsible").click(function () {
    var kind = $(this).attr("data-druid-section");
    $(this).toggleClass("druid-collapsible-collapsed");
    $(this)
      .closest(".druid-container")
      .find("[data-druid-section-row=" + kind + "]")
      .toggleClass("druid-collapsed");
  });
});
/* End DRUID */