MediaWiki:Common.js: Difference between revisions

Revision as of 02:28, 17 February 2026

/* Any JavaScript here will be loaded for all users on every page load. */

// Tab functionality
$(document).ready(function() {
    // Initialize tabs - show first tab by default
    $('.wiki-tabs-container').each(function() {
        var $container = $(this);
        var $firstButton = $container.find('.wiki-tab-button').first();
        var firstTabId = $firstButton.data('tab');
        
        $firstButton.addClass('active');
        $container.find('#' + firstTabId).addClass('active').show();
    });
    
    // Tab click handler
    $('.wiki-tab-button').on('click', function() {
        var $button = $(this);
        var tabId = $button.data('tab');
        var $container = $button.closest('.wiki-tabs-container');
        
        // Remove active class from all buttons and panes in this container
        $container.find('.wiki-tab-button').removeClass('active');
        $container.find('.wiki-tab-pane').removeClass('active').hide();
        
        // Add active class to clicked button and corresponding pane
        $button.addClass('active');
        $container.find('#' + tabId).addClass('active').show();
    });
});

// ===============================
// Add Custom Sticky Header Link
// ===============================
mw.hook('wikipage.content').add(function () {

    const icons = document.querySelector('.vector-sticky-header-icons');
    if (!icons) return;

    // Prevent duplicate button on navigation
    if (document.getElementById('custom-sticky-link')) return;

    const link = document.createElement('a');
    link.id = 'custom-sticky-link';
    link.href = 'https://discord.gg/t2Rp2dRvze'; // CHANGE THIS
    link.target = '_blank';
    link.className = 'cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet';
    link.textContent = 'Join Us on Discord!'; // CHANGE TEXT
    link.style.marginLeft = '10px';
    link.style.fontWeight = 'bold';

    icons.prepend(link); // use appendChild() if you want it at the end
});

// ===============================
// Sticky Header Countdown Timer (Vector 2022) - to Apr 18, 2026 00:00 UTC
// ===============================
mw.hook('wikipage.content').add(function () {
    const icons = document.querySelector('.vector-sticky-header-icons');
    if (!icons) return;

    // Prevent duplicates
    if (document.getElementById('sticky-countdown')) return;

    // Target: Sat, 18 Apr 2026 at 00:00 GMT+00:00 (UTC)
    const target = new Date('2026-04-18T00:00:00Z');

    const wrap = document.createElement('span');
    wrap.id = 'sticky-countdown';
    wrap.className = 'sticky-countdown';

    const label = document.createElement('span');
    label.className = 'sticky-countdown__label';
    label.textContent = 'Ends in:';

    const value = document.createElement('span');
    value.className = 'sticky-countdown__value';
    value.textContent = '--:--:--';

    wrap.appendChild(label);
    wrap.appendChild(value);

    // Put it before the default icons (Talk/History/Edit)
    icons.prepend(wrap);

    const pad = (n) => String(n).padStart(2, '0');

    const formatRemaining = (ms) => {
        if (ms <= 0) return '00:00:00';
        const totalSeconds = Math.floor(ms / 1000);

        const days = Math.floor(totalSeconds / 86400);
        const hours = Math.floor((totalSeconds % 86400) / 3600);
        const minutes = Math.floor((totalSeconds % 3600) / 60);
        const seconds = totalSeconds % 60;

        if (days > 0) return `${days}d ${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
        return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
    };

    const update = () => {
        const now = new Date();
        const diff = target.getTime() - now.getTime();
        value.textContent = formatRemaining(diff);
        wrap.classList.toggle('is-expired', diff <= 0);
    };

    update();
    const timerId = window.setInterval(update, 1000);

    // Cleanup if element removed (rare, but safe)
    const observer = new MutationObserver(() => {
        if (!document.getElementById('sticky-countdown')) {
            clearInterval(timerId);
            observer.disconnect();
        }
    });
    observer.observe(document.body, { childList: true, subtree: true });
});

// ===============================



// ===============================
// Sticky Header Game Time
// Display: "Mar 1 YR1"
// Rules:
// - Each real hour = +1 in-game day (1..24)
// - Each 24 hours = +1 in-game month (Jan..Jul cycle)
// - Each 7 days = +1 in-game year
// ===============================
mw.hook('wikipage.content').add(function () {
    const icons = document.querySelector('.vector-sticky-header-icons');
    if (!icons) return;

    if (document.getElementById('sticky-game-time')) return;

    const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul'];

    // --------- ANCHOR: right now is Mar 1 YR1 ----------
    const ANCHOR_MONTH_INDEX = 5; // Mar (Jan=0)
    const ANCHOR_DAY = 14;         // 1..24
    const ANCHOR_YEAR = 1;        // YR1

    // If you want the game to follow a fixed timezone for everyone:
    // 0 = UTC. (Use 0 unless you KNOW you want another fixed offset.)
    const GAME_TZ_OFFSET_HOURS = 0;

    const getShiftedNow = () => new Date(Date.now() + GAME_TZ_OFFSET_HOURS * 3600000);

    // Anchor to the current hour boundary (so it flips cleanly each hour)
    const now = getShiftedNow();
    const anchorRealHour = new Date(Date.UTC(
        now.getUTCFullYear(),
        now.getUTCMonth(),
        now.getUTCDate(),
        now.getUTCHours(), 0, 0, 0
    ));

    // UI pill
    const wrap = document.createElement('span');
    wrap.id = 'sticky-game-time';
    wrap.className = 'sticky-game-time';

    const value = document.createElement('span');
    value.className = 'sticky-game-time__value';

    wrap.appendChild(value);

    // Put it before the default icons
    icons.prepend(wrap);

    function computeGameString() {
        const t = getShiftedNow();

        // Whole hours passed since we declared "Mar 1 YR1"
        const hoursPassed = Math.floor((t.getTime() - anchorRealHour.getTime()) / 3600000);

        // Day increments each hour
        const dayIndex = (ANCHOR_DAY - 1) + hoursPassed; // 0-based
        const dayNumber = (dayIndex % 24) + 1;           // 1..24

        // Month increments each 24 hours
        const daysPassed = Math.floor(dayIndex / 24);    // 0..∞

        // Month+Year cycle is 7 days long
        const totalMonthIndex = (ANCHOR_YEAR - 1) * 7 + ANCHOR_MONTH_INDEX + daysPassed;

        const year = Math.floor(totalMonthIndex / 7) + 1;
        const month = months[((totalMonthIndex % 7) + 7) % 7];

        return `${month} ${dayNumber} YR${year}`;
    }

    function update() {
        value.textContent = computeGameString();
    }

    // Initial update
    update();

    // Update exactly on next hour, then every hour
    const now2 = getShiftedNow();
    const msUntilNextHour =
        3600000 - (now2.getUTCMinutes() * 60000 + now2.getUTCSeconds() * 1000 + now2.getUTCMilliseconds());

    setTimeout(function () {
        update();
        setInterval(update, 3600000);
    }, msUntilNextHour);
});


// ===============================
// Sticky Header Clock (timezone-stable)
// Shows the same time for everyone by forcing a timezone (UTC by default)
// ===============================
mw.hook('wikipage.content').add(function () {
    const icons = document.querySelector('.vector-sticky-header-icons');
    if (!icons) return;

    if (document.getElementById('sticky-clock')) return;

    // Choose the clock timezone:
    // - "Etc/UTC" for UTC (same for all users)
    // - Or "America/New_York" (same for all users, displayed in NY time)
    const CLOCK_TIMEZONE = 'Etc/UTC'; // <-- change if you want a specific zone

    const wrap = document.createElement('span');
    wrap.id = 'sticky-clock';
    wrap.className = 'sticky-clock';

    const label = document.createElement('span');
    label.className = 'sticky-clock__label';
    label.textContent = (CLOCK_TIMEZONE === 'Etc/UTC') ? 'UTC:' : 'Time:';

    const value = document.createElement('span');
    value.className = 'sticky-clock__value';

    wrap.appendChild(label);
    wrap.appendChild(value);

    // Put it near the front (use appendChild to put it at the end)
    icons.prepend(wrap);

    const fmt = new Intl.DateTimeFormat('en-GB', {
        timeZone: CLOCK_TIMEZONE,
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
    });

    function updateClock() {
        value.textContent = fmt.format(new Date());
    }

    updateClock();
    setInterval(updateClock, 1000);
});