MediaWiki:Common.js

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.
// Madness Descent Wiki – Custom JS for Vector-2022 skin
// Place in MediaWiki:Common.js

$(document).ready(function () {
    // Add theme class to body for easier CSS targeting
    document.body.classList.add('madness-theme');

    // === Header Enhancements ===
    const $heading = $('#firstHeading');
    if ($heading.length) {
        $heading.css({
            'font-size': '3em',
            'font-weight': 'bold',
            'color': '#ff2c2c',
            'text-shadow': '0 0 8px #ff0000',
            'text-align': 'center',
            'margin-bottom': '20px'
        });
    }

    // === Homepage Enhancements ===
    if (mw.config.get('wgPageName') === 'Main_Page') {
        const content = $('#bodyContent');

        // Center the content
        content.css({
            'text-align': 'center',
            'padding': '20px',
            'background-color': '#2a1b14',
            'border': '2px solid #ff3b3b',
            'border-radius': '10px',
            'box-shadow': '0 0 12px #ff0000',
        });

        // Add a glowing welcome box
        const welcomeBox = `
            <div id="madness-welcome" style="
                margin-top: 1em;
                background-color: #120a07;
                color: #ffffff;
                padding: 20px;
                border: 2px solid #ff2c2c;
                border-radius: 12px;
                box-shadow: 0 0 15px #ff0000;
                font-size: 1.2em;
                line-height: 1.6em;
            ">
                <strong>Welcome to the official Madness Descent Wiki!</strong><br>
                Madness Descent is an asymmetrical Roblox game inspired by Pillar Chase 2.
            </div>
        `;

        content.prepend(welcomeBox);

        // Add a call-to-action "Explore" button
        const exploreBtn = `
            <div style="margin-top: 30px;">
                <button style="
                    background-color: #ff4646;
                    border: none;
                    color: white;
                    font-weight: bold;
                    font-size: 1.2em;
                    padding: 15px 30px;
                    border-radius: 12px;
                    box-shadow: 0 0 10px #ff2c2c;
                    cursor: pointer;
                " onclick="location.href='/wiki/Monsters'">Explore Monsters</button>
            </div>
        `;

        content.append(exploreBtn);
    }

    // === Sidebar Enhancements (Navigation & Community) ===
    const enhanceSidebarSection = (selector, title) => {
        const section = $(selector);
        if (section.length) {
            section.find('h3').css({
                'color': '#ff3b3b',
                'font-family': 'Impact, sans-serif',
                'font-size': '1.2em',
                'border-bottom': '2px solid #ff4444',
                'margin-bottom': '10px'
            });

            section.find('ul li a').css({
                'background-color': '#1a120e',
                'color': '#ffd966',
                'padding': '8px',
                'border-radius': '5px',
                'display': 'block',
                'margin-bottom': '5px',
                'text-decoration': 'none'
            }).hover(function () {
                $(this).css({
                    'background-color': '#333',
                    'color': '#fff'
                });
            });
        }
    };

    enhanceSidebarSection('#p-navigation');
    enhanceSidebarSection('#p-Community');

    // === Add favicon (optional) ===
    $('head').append('<link rel="icon" type="image/png" href="https://example.com/path/to/icon.png">');
});