/* Any JavaScript here will be loaded for all users on every page load. */
(function () {
'use strict';

/* =========================================================
CONFIG
========================================================= */
const DISCORD_URL = 'https://discord.gg/t2Rp2dRvze';

// Countdown target: Sat, 18 Apr 2026 00:00 UTC
const COUNTDOWN_TARGET_UTC = Date.parse('2026-04-18T00:00:00Z');

// Clock timezone (same for everyone)
const CLOCK_TIMEZONE = 'Etc/UTC';

// Game time anchor (real UTC -> game time)
// At 2026-02-19 14:00:00 UTC, game time was Jan 21 YR2
const GAME_ANCHOR_REAL_UTC = Date.parse('2026-02-19T14:00:00Z');
const GAME_ANCHOR_MONTH_INDEX = 0; // Jan
const GAME_ANCHOR_DAY = 21; // 1..24
const GAME_ANCHOR_YEAR = 2; // YR2
const GAME_MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];

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

/* =========================================================
Tabs (your existing code)
========================================================= */
$(function () {
$('.wiki-tabs-container').each(function () {
const $container = $(this);
const $firstButton = $container.find('.wiki-tab-button').first();
const firstTabId = $firstButton.data('tab');

$firstButton.addClass('active');
$container.find('#' + firstTabId).addClass('active').show();
});

$('.wiki-tab-button').on('click', function () {
const $button = $(this);
const tabId = $button.data('tab');
const $container = $button.closest('.wiki-tabs-container');

$container.find('.wiki-tab-button').removeClass('active');
$container.find('.wiki-tab-pane').removeClass('active').hide();

$button.addClass('active');
$container.find('#' + tabId).addClass('active').show();
});
});

/* =========================================================
Helpers: find/create containers in BOTH headers
========================================================= */
function ensureDiscordLink(container, id) {
if (!container) return null;
const existing = document.getElementById(id);
if (existing) return existing;

const link = document.createElement('a');
link.id = id;
link.href = DISCORD_URL;
link.target = '_blank';
link.className =
'cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet sticky-discord-link';
link.textContent = 'Join Us on Discord!';
link.style.fontWeight = 'bold';

container.prepend(link);
return link;
}

// Sticky header: insert our widget bar inside sticky icons row
function getStickyBar() {
const icons = document.querySelector('.vector-sticky-header-icons');
if (!icons) return null;

let bar = document.getElementById('sticky-time-widgets');
if (bar) return bar;

// Keep Discord where it was (far-left in sticky icons)
const discord = ensureDiscordLink(icons, 'custom-sticky-link');

bar = document.createElement('span');
bar.id = 'sticky-time-widgets';
bar.className = 'time-widgets';

// Put widgets immediately AFTER Discord (so Discord stays at the left)
if (discord && discord.parentNode === icons) {
discord.insertAdjacentElement('afterend', bar);
} else {
icons.prepend(bar);
}

return bar;
}

// Main header: put our widgets in header end area
function getMainBar() {
const header = document.querySelector('.vector-header');
if (!header) return null;

const headerEnd = header.querySelector('.vector-header-end');
if (!headerEnd) return null;

let bar = document.getElementById('main-time-widgets');
if (bar) return bar;

bar = document.createElement('span');
bar.id = 'main-time-widgets';
bar.className = 'time-widgets';

headerEnd.prepend(bar);
ensureDiscordLink(bar, 'main-discord-link');

return bar;
}

function ensureWidget(bar, role, labelText) {
if (!bar) return;

// already present?
if (bar.querySelector(`[data-role="${role}"]`)) return;

const wrap = document.createElement('span');
wrap.className = 'header-widget';
wrap.dataset.widget = role;

if (labelText) {
const label = document.createElement('span');
label.className = 'header-widget__label';
label.textContent = labelText;
wrap.appendChild(label);
}

const value = document.createElement('span');
value.className = 'header-widget__value';
value.dataset.role = role;

wrap.appendChild(value);
bar.appendChild(wrap);
}

/* =========================================================
Calculations / formatting
========================================================= */
function 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 ${pad2(hours)}:${pad2(minutes)}:${pad2(seconds)}`;
return `${pad2(hours)}:${pad2(minutes)}:${pad2(seconds)}`;
}

function computeGameString(nowMs) {
const hoursPassed = Math.floor((nowMs - GAME_ANCHOR_REAL_UTC) / 3600000);

// Day increments every hour (1..24)
const dayIndex = (GAME_ANCHOR_DAY - 1) + hoursPassed;
const dayNumber = ((dayIndex % 24) + 24) % 24 + 1;

// Month increments every 24 hours (Jan..Jul cycle)
const daysPassed = Math.floor(dayIndex / 24);
const totalMonthIndex = GAME_ANCHOR_MONTH_INDEX + daysPassed;
const monthIndex = ((totalMonthIndex % 7) + 7) % 7;

// Year increments every 7 real days
const yearsPassed = Math.floor(totalMonthIndex / 7);
const year = GAME_ANCHOR_YEAR + yearsPassed;

return `Current Game Date: ${GAME_MONTHS[monthIndex]} ${dayNumber} YR${year}`;
}

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

function updateAll() {
const now = Date.now();

// --- CLOCK ---
document.querySelectorAll('[data-role="clock"]').forEach((el) => {
el.textContent = clockFmt.format(new Date(now));
});

// --- GAME DATE ---
const gameString = computeGameString(now);

// how many ms until next hour
const d = new Date(now);
const msUntilNextHour =
3600000 - (d.getMinutes() * 60000 + d.getSeconds() * 1000 + d.getMilliseconds());

const fiveMinutesMs = 5 * 60 * 1000;

document.querySelectorAll('[data-role="game"]').forEach((el) => {
el.textContent = gameString;

// pulse red if within last 5 minutes before tick
if (msUntilNextHour <= fiveMinutesMs) {
el.classList.add("pulse-red");
} else {
el.classList.remove("pulse-red");
}
});

// --- COUNTDOWN ---
document.querySelectorAll('[data-role="countdown"]').forEach((el) => {
el.textContent = formatRemaining(COUNTDOWN_TARGET_UTC - now);
});
}

/* =========================================================
Build + Boot (FIXED)
========================================================= */
function buildBarsIfPossible() {
const stickyBar = getStickyBar();
const mainBar = getMainBar();

// Sticky: Discord is separate (left), widgets in bar
if (stickyBar) {
ensureWidget(stickyBar, 'clock', 'UTC:');
ensureWidget(stickyBar, 'game', null);
ensureWidget(stickyBar, 'countdown', 'Age ends in:');
}

// Main: Discord is inside the bar (first), then widgets
if (mainBar) {
ensureWidget(mainBar, 'clock', 'UTC:');
ensureWidget(mainBar, 'game', null);
ensureWidget(mainBar, 'countdown', 'Age ends in:');
}

updateAll();
}

function startTickerOnce() {
if (window.__timeWidgetsIntervalId) return; // already ticking
updateAll();
window.__timeWidgetsIntervalId = setInterval(updateAll, 1000);
}

function initAll() {
buildBarsIfPossible();
startTickerOnce();
}

// Initial page load
$(initAll);

// Vector 2022 navigation/content swaps
mw.hook('wikipage.content').add(initAll);
mw.hook('skin.ready').add(initAll); // harmless extra safety

})();

2026-02-19T15:13:37Z

Sonja says:

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

// =========================================================
// Sticky header: centered TIME widgets container (SAFE)
// - Centers ONLY the time widgets
// - Leaves your Discord link exactly where it is
// - Does NOT use absolute positioning
// =========================================================
function getStickyTimeContainer() {
const icons = document.querySelector('.vector-sticky-header-icons');
if (!icons) return null;

let mid = document.getElementById('sticky-time-widgets');
if (mid) return mid;

mid = document.createElement('span');
mid.id = 'sticky-time-widgets';
mid.className = 'sticky-time-widgets';

// Put container at the start; CSS will center it
icons.prepend(mid);

return mid;
}

// =========================================================
// Add Custom Sticky Header Link (Discord)
// =========================================================
mw.hook('wikipage.content').add(function () {
const icons = document.querySelector('.vector-sticky-header-icons');
if (!icons) return;

if (document.getElementById('custom-sticky-link')) return;

const link = document.createElement('a');
link.id = 'custom-sticky-link';
link.href = 'https://discord.gg/t2Rp2dRvze';
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!';
link.style.marginLeft = '10px';
link.style.fontWeight = 'bold';

// Keep it exactly where you had it
icons.prepend(link);
});

// =========================================================
// Sticky Header Clock (timezone-stable, UTC)
// =========================================================
mw.hook('wikipage.content').add(function () {
const icons = document.querySelector('.vector-sticky-header-icons');
if (!icons) return;

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

const CLOCK_TIMEZONE = 'Etc/UTC';

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 = 'UTC:';

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

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

const mid = getStickyTimeContainer();
if (mid) mid.appendChild(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);
});

// Floating particles
(function () {
const canvas = document.createElement('canvas');
canvas.id = 'particle-canvas';
document.body.prepend(canvas);

const ctx = canvas.getContext('2d');
const particles = [];
const COUNT = 80;

const COLORS = [
'rgba(0, 53, 102, 0.9)', // #003566
'rgba(0, 29, 61, 0.8)', // #001d3d
'rgba(0, 8, 20, 0.7)', // #000814
'rgba(255, 255, 255, 0.15)' // subtle white glint
];

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

function randomBetween(a, b) {
return a + Math.random() * (b - a);
}

function createParticle() {
return {
x: randomBetween(0, canvas.width),
y: randomBetween(canvas.height * 0.2, canvas.height),
radius: randomBetween(1.5, 5),
color: COLORS[Math.floor(Math.random() * COLORS.length)],
speedY: randomBetween(0.2, 0.7),
speedX: randomBetween(-0.2, 0.2),
opacity: 0,
fadeIn: randomBetween(0.003, 0.008),
life: randomBetween(0.4, 1)
};
}

for (let i = 0; i < COUNT; i++) {
const p = createParticle();
p.y = randomBetween(0, canvas.height);
p.opacity = randomBetween(0, 1);
particles.push(p);
}

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

particles.forEach((p, i) => {
if (p.life < 0.8) {
p.opacity = Math.min(1, p.opacity + p.fadeIn);
} else {
p.opacity = Math.max(0, p.opacity - p.fadeIn * 0.5);
}

p.life += 0.001;
p.y -= p.speedY;
p.x += p.speedX;

if (p.y < -10 || p.life > 1.2) {
particles[i] = createParticle();
return;
}

ctx.beginPath();
ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
ctx.globalAlpha = p.opacity;
ctx.fillStyle = p.color;
ctx.fill();

ctx.shadowBlur = 8;
ctx.shadowColor = p.color;
ctx.fill();
ctx.shadowBlur = 0;
});

ctx.globalAlpha = 1;
requestAnimationFrame(draw);
}

resize();
draw();
window.addEventListener('resize', resize);
})();

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

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

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 = 'Age ends in:';

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

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

const mid = getStickyTimeContainer();
if (mid) mid.appendChild(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 diff = target.getTime() - Date.now();
value.textContent = formatRemaining(diff);
wrap.classList.toggle('is-expired', diff <= 0);
};

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

// Cleanup if removed
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 (GLOBAL FIXED CLOCK)
// Rules:
// - 1 real hour = 1 in-game day (1..24)
// - 1 real day = 1 in-game month (Jan..Jul cycle)
// - 1 real week (7 real days) = 1 in-game year
// Anchor given: at 2026-02-19 14:00:00 UTC => Jan 21 YR2
// =========================================================
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'];

const ANCHOR_REAL_UTC = Date.parse('2026-02-19T14:00:00Z');
const ANCHOR_MONTH_INDEX = 0; // Jan
const ANCHOR_DAY = 21; // 1..24
const ANCHOR_YEAR = 2; // YR2

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);

const mid = getStickyTimeContainer();
if (mid) mid.appendChild(wrap);

function computeGameString() {
const hoursPassed = Math.floor((Date.now() - ANCHOR_REAL_UTC) / 3600000);

const dayIndex = (ANCHOR_DAY - 1) + hoursPassed;
const dayNumber = ((dayIndex % 24) + 24) % 24 + 1;

const daysPassed = Math.floor(dayIndex / 24);

const totalMonthIndex = ANCHOR_MONTH_INDEX + daysPassed;
const monthIndex = ((totalMonthIndex % 7) + 7) % 7;

const yearsPassed = Math.floor(totalMonthIndex / 7);
const year = ANCHOR_YEAR + yearsPassed;

return `Current Game Date:  ${months[monthIndex]} ${dayNumber} YR${year}`;
}

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

update();

// Update on next hour boundary, then hourly
const d = new Date();
const msUntilNextHour =
3600000 - (d.getMinutes() * 60000 + d.getSeconds() * 1000 + d.getMilliseconds());

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