MediaWiki:Common.js

2026-06-08T01:57:25Z

Sonja Phone:

/* 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-07-11T00:00:00Z');

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

const AGE_START_UTC = Date.parse('2026-04-28T18:00:00Z');

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

// Tick warning threshold
const TICK_SOON_MINUTES = 5;

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');
if (!firstTabId) return;

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

$('.wiki-tab-button').on('click', function () {
const $button = $(this);
const tabId = $button.data('tab');
if (!tabId) return;

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;
if (bar.querySelector(`[data-role="${role}"]`)) return;

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

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 msUntilNextHour = 3600000 - (now % 3600000);
const thresholdMs = TICK_SOON_MINUTES * 60 * 1000;
const shouldWarn = msUntilNextHour > 0 && msUntilNextHour <= thresholdMs;
const minutesLeft = Math.ceil(msUntilNextHour / 60000);

document.querySelectorAll('[data-role="game"]').forEach((el) => {
if (now < AGE_START_UTC) {
el.textContent = 'PRE AGE';
el.classList.remove('pulse-red');
} else if (shouldWarn) {
el.textContent = `TICK SOON (${minutesLeft}m)`;
el.classList.add('pulse-red');
} else {
el.textContent = computeGameString(now);
el.classList.remove('pulse-red');
}
});

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

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

if (stickyBar) {
ensureWidget(stickyBar, 'clock', 'UTC:');
ensureWidget(stickyBar, 'game', null);
ensureWidget(stickyBar, 'countdown', 'Age ends in:');
}

if (mainBar) {
ensureWidget(mainBar, 'clock', 'UTC:');
ensureWidget(mainBar, 'game', null);
ensureWidget(mainBar, 'countdown', 'Age ends in:');
}
}

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

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

$(initAll);
mw.hook('wikipage.content').add(initAll);
mw.hook('skin.ready').add(initAll);
})();

// 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), // 0–1, fades out after 0.8
};
}

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

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

particles.forEach((p, i) => {
// Fade in / out
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;

// Reset when off screen or fully faded
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();

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

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

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

Utopia Game - User contributions [en]

MediaWiki:Common.js