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.

// == Confetti Effect ==
( function () {
    'use strict';

    var canvas, ctx, particles, animId;

    function random( min, max ) {
        return Math.random() * ( max - min ) + min;
    }

    function createParticle() {
        return {
            x:     random( 0, window.innerWidth ),
            y:     random( -20, 0 ),
            w:     random( 7, 14 ),
            h:     random( 4, 8 ),
            color: 'hsl(' + Math.floor( random( 0, 360 ) ) + ',90%,60%)',
            speed: random( 2, 6 ),
            angle: random( -0.4, 0.4 ),
            spin:  random( -0.15, 0.15 ),
            rot:   random( 0, Math.PI * 2 ),
            wobble: random( 0, Math.PI * 2 ),
            wobbleSpeed: random( 0.05, 0.12 )
        };
    }

    function launch( count ) {
        canvas = document.createElement( 'canvas' );
        canvas.style.cssText =
            'position:fixed;top:0;left:0;width:100%;height:100%;' +
            'pointer-events:none;z-index:99999;';
        canvas.width  = window.innerWidth;
        canvas.height = window.innerHeight;
        document.body.appendChild( canvas );
        ctx = canvas.getContext( '2d' );

        particles = [];
        for ( var i = 0; i < ( count || 150 ); i++ ) {
            particles.push( createParticle() );
        }

        function step() {
            ctx.clearRect( 0, 0, canvas.width, canvas.height );
            var alive = false;

            for ( var j = 0; j < particles.length; j++ ) {
                var p = particles[ j ];
                p.y       += p.speed;
                p.x       += Math.sin( p.wobble ) * 1.5;
                p.wobble  += p.wobbleSpeed;
                p.rot     += p.spin;

                if ( p.y < canvas.height + 20 ) {
                    alive = true;
                    ctx.save();
                    ctx.translate( p.x, p.y );
                    ctx.rotate( p.rot );
                    ctx.fillStyle = p.color;
                    ctx.fillRect( -p.w / 2, -p.h / 2, p.w, p.h );
                    ctx.restore();
                }
            }

            if ( alive ) {
                animId = requestAnimationFrame( step );
            } else {
                cancelAnimationFrame( animId );
                canvas.parentNode.removeChild( canvas );
            }
        }

        step();

        window.addEventListener( 'resize', function () {
            canvas.width  = window.innerWidth;
            canvas.height = window.innerHeight;
        } );
    }

    // Fire confetti when the DOM is ready
    mw.loader.using( 'mediawiki.util' ).done( function () {
        launch( 150 );
    } );

}() );

mw.hook('wikipage.content').add(function() {
    // Add class "rainbow-text" to any element you want animated
    document.querySelectorAll('.rainbow-text').forEach(function(el) {
        let hue = 0;
        setInterval(function() {
            el.style.color = 'hsl(' + hue + ', 100%, 50%)';
            hue = (hue + 2) % 360;
        }, 20);
    });
});

mw.hook('wikipage.content').add(function() {
    document.querySelectorAll('.glitch-text').forEach(function(el) {
        const original = el.textContent;
        const glitchChars = '!<>-_\\/[]{}—=+*^?#@$%&';

        setInterval(function() {
            if (Math.random() > 0.85) { // Trigger glitch ~15% of the time
                let glitched = '';
                for (let i = 0; i < original.length; i++) {
                    if (Math.random() > 0.8) {
                        glitched += glitchChars[Math.floor(Math.random() * glitchChars.length)];
                    } else {
                        glitched += original[i];
                    }
                }
                el.textContent = glitched;
                setTimeout(function() {
                    el.textContent = original; // Restore after brief glitch
                }, 80);
            }
        }, 150);
    });
});

mw.hook('wikipage.content').add(function() {
    document.querySelectorAll('.rainbow-glitch').forEach(function(el) {
        const original = el.textContent;
        const glitchChars = '!<>-_\\/[]{}—=+*^?#@$%&';
        let hue = 0;

        // Rainbow cycling
        setInterval(function() {
            el.style.color = 'hsl(' + hue + ', 100%, 55%)';
            el.style.textShadow = '2px 0 hsl(' + ((hue + 120) % 360) + ', 100%, 50%), -2px 0 hsl(' + ((hue + 240) % 360) + ', 100%, 50%)';
            hue = (hue + 3) % 360;
        }, 30);

        // Glitch effect
        setInterval(function() {
            if (Math.random() > 0.85) {
                let glitched = '';
                for (let i = 0; i < original.length; i++) {
                    glitched += Math.random() > 0.75
                        ? glitchChars[Math.floor(Math.random() * glitchChars.length)]
                        : original[i];
                }
                el.textContent = glitched;
                setTimeout(() => { el.textContent = original; }, 100);
            }
        }, 200);
    });
});

mw.hook('wikipage.content').add(function() {
    const canvas = document.createElement('canvas');
    canvas.style.cssText = 'position:fixed;top:0;left:0;pointer-events:none;z-index:9999';
    document.body.appendChild(canvas);
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const flakes = Array.from({length: 100}, () => ({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        r: Math.random() * 4 + 1,
        speed: Math.random() * 1.5 + 0.5
    }));

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'white';
        flakes.forEach(f => {
            ctx.beginPath();
            ctx.arc(f.x, f.y, f.r, 0, Math.PI * 2);
            ctx.fill();
            f.y += f.speed;
            if (f.y > canvas.height) f.y = 0;
        });
        requestAnimationFrame(draw);
    }
    draw();
});


(function() {
  var answers = ['It is certain.','Ask again later.','Outlook not so good.',
    'Signs point to yes.','Very doubtful.','Without a doubt.','Cannot predict now.','Yes definitely!'];
  var div = document.createElement('div');
  div.style.cssText = 'text-align:center;padding:8px;border:1px solid #a2a9b1;border-radius:6px;margin:8px 0;background:#f8f9fa;';
  div.innerHTML = '<b>🎱 Magic 8-Ball</b><br><small>Think of a question...</small><br>' +
    '<button id="mw-8ball" style="margin-top:6px;cursor:pointer;padding:4px 10px;">Ask!</button>' +
    '<p id="mw-8ball-ans" style="font-style:italic;min-height:20px;margin:6px 0 0;"></p>';
  var tb = document.querySelector('#p-tb .body, #p-tb ul');
  if (tb) tb.parentElement.insertBefore(div, tb.nextSibling);
  document.getElementById('mw-8ball').addEventListener('click', function() {
    document.getElementById('mw-8ball-ans').textContent = answers[Math.floor(Math.random() * answers.length)];
  });
})();