MediaWiki:KuranokaPageTransition.js
MediaWiki界面页面
更多操作
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/* ====================================================================
KURANOKA / KURONATA V6 — CATACLYSM / DAWN
MediaWiki:KuranokaPageTransition.js
Same-origin iframe + history.pushState: NO full reload on toggles.
Irregular tear + WebGL combustion + layered turbulent smoke/impact.
Wiki easter eggs: [[Kuronata|...]] / [[Kuranoka|...]].
Backgrounds are prewarmed on page load. Zero external dependencies.
==================================================================== */
(function () {
'use strict';
// The preview is a complete MediaWiki page. It must NOT spawn another.
if (window !== window.top || window.__kkptV6) return;
if (!window.mw || !mw.config) return;
// The URL is the source of truth if a skin/extension restored a page
// without immediately updating mw.config (soft navigation / bfcache).
const pathMatch = location.pathname.match(/\/wiki\/(Kuranoka|Kuronata)\/?$/);
const urlPage = pathMatch ? pathMatch[1] : new URLSearchParams(location.search).get('title');
const basePage = ['Kuranoka', 'Kuronata'].includes(urlPage)
? urlPage : mw.config.get('wgPageName');
const action = new URLSearchParams(location.search).get('action') || 'view';
if (!['Kuranoka', 'Kuronata'].includes(basePage) || action !== 'view') return;
window.__kkptV6 = true;
window.__kkptVersion = '6.0';
// For the easter egg: links inside the Wiki are the default trigger.
// Change to true only if you also want the fixed switch button.
const SHOW_FLOATING_BUTTON = false;
const otherPage = basePage === 'Kuranoka' ? 'Kuronata' : 'Kuranoka';
const baseUrl = location.href;
const baseTitle = document.title;
const otherUrl = new URL('/wiki/' + encodeURIComponent(otherPage), location.href);
const clipSide = basePage === 'Kuranoka' ? 'right' : 'left';
const hideClip = clipSide === 'right' ? 'inset(0 0 0 100%)' : 'inset(0 100% 0 0)';
const sleep = ms => new Promise(r => setTimeout(r, ms));
const smooth = t => t * t * (3 - 2 * t);
const imagePool = new Map();
let active = false; // false: original top-level doc; true: otherPage iframe
let animating = false;
let ready = false;
let loading = null;
let button, labelTitle, labelSub, labelIcon, frame;
let otherTitle = otherPage + ' - Blockland Wiki';
function whichPage() { return active ? otherPage : basePage; }
function destination() { return active ? basePage : otherPage; }
function isDark(page) { return page === 'Kuronata'; }
function pathPage() {
const url = new URL(location.href);
if (url.pathname.startsWith('/wiki/')) {
try { return decodeURIComponent(url.pathname.slice(6)).replace(/_/g, ' '); }
catch (e) { return ''; }
}
return url.searchParams.get('title') || '';
}
function updateButton() {
if (!button) return;
const to = destination();
button.href = to === basePage ? baseUrl : otherUrl.href;
labelTitle.textContent = to.toUpperCase();
labelSub.textContent = isDark(to) ? 'BURN THE SKY' : 'RECLAIM THE SKY';
labelIcon.textContent = isDark(to) ? '✦' : '❄';
button.classList.toggle('kkpt-dark', isDark(whichPage()));
button.setAttribute('aria-label', isDark(to) ? '燃尽天空，进入 Kuronata' : '驱散黑暗，回到 Kuranoka');
}
// Accept the two standard MediaWiki link forms, while rejecting
// edit/action links, external sites and similarly named articles.
function wikiLinkPage(anchor, doc) {
try {
const url = new URL(anchor.href, doc.baseURI);
if (url.origin !== location.origin) return null;
const action = url.searchParams.get('action');
if (action && action !== 'view') return null;
let title = url.searchParams.get('title');
if (!title) {
const matched = url.pathname.match(/^\/wiki\/([^/?#]+)\/?$/);
if (matched) title = decodeURIComponent(matched[1]);
}
title = (title || '').replace(/_/g, ' ');
return title === 'Kuranoka' || title === 'Kuronata' ? title : null;
} catch (_) {
return null;
}
}
function decoratePortalLinks(doc, targetPage) {
// Use only the article: sidebar, edit tools and site-wide links
// must retain their usual navigation behavior.
const content = doc.querySelector('#mw-content-text,.mw-parser-output');
if (!content) return;
content.querySelectorAll('a[href]').forEach(anchor => {
if (wikiLinkPage(anchor, doc) !== targetPage) return;
anchor.classList.add('kkpt-portal-link');
anchor.classList.toggle('kkpt-portal-red', targetPage === 'Kuronata');
anchor.classList.toggle('kkpt-portal-blue', targetPage === 'Kuranoka');
const caption = (anchor.textContent || '').trim();
if (caption) anchor.dataset.kkptText = caption.slice(0, 120);
anchor.setAttribute('aria-label', caption + '，切换至 ' + targetPage);
});
}
function watchPortalLinks(doc, targetPage) {
decoratePortalLinks(doc, targetPage);
if (doc.__kkptPortalObserver) return;
const root = doc.querySelector('#mw-content-text,.mw-parser-output');
if (!root) return;
const observer = new MutationObserver(() => decoratePortalLinks(doc, targetPage));
observer.observe(root, {childList:true,subtree:true});
doc.__kkptPortalObserver = observer;
}
function isPlainClick(event) {
return !event.defaultPrevented && event.button === 0 &&
!event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey;
}
function findAnchor(event, doc) {
const target = event.target;
return target && target.nodeType === 1 &&
typeof target.closest === 'function'
? target.closest('a[href]') : null;
}
function portalClick(event, doc, targetPage, nextActive) {
if (!isPlainClick(event)) return false;
const anchor = findAnchor(event, doc);
if (!anchor || (anchor.target && anchor.target !== '_self') ||
anchor.hasAttribute('download') ||
wikiLinkPage(anchor, doc) !== targetPage) return false;
event.preventDefault();
requestSwap(nextActive);
return true;
}
// Read backgrounds after background-template code populates --bg-image.
function backgroundUrls(doc) {
const urls = new Set();
const selector = [doc.documentElement, doc.body];
try {
doc.querySelectorAll('.background-theme,[class*="background"],[style*="background"],#mw-content-text,.citizen-page-container')
.forEach((el, i) => { if (i < 65) selector.push(el); });
} catch (e) { /* use html/body */ }
function add(value) {
if (!value) return;
const pattern = /url\(\s*(['"]?)(.*?)\1\s*\)/gi;
let match;
while ((match = pattern.exec(value))) {
try { urls.add(new URL(match[2], doc.baseURI).href); } catch (e) { /* ignore */ }
}
if (/^https?:\/\/\S+\.(?:jpg|jpeg|png|webp|avif)(?:\?\S*)?$/i.test(value)) {
try { urls.add(new URL(value, doc.baseURI).href); } catch (e) { /* ignore */ }
}
}
selector.forEach(el => {
if (!el) return;
try {
[null, '::before', '::after'].forEach(pseudo => {
const style = doc.defaultView.getComputedStyle(el, pseudo);
if (!style) return;
add(style.backgroundImage);
add(style.getPropertyValue('--bg-image'));
add(style.getPropertyValue('--background-image'));
});
if (el.dataset) add(el.dataset.bgImage);
} catch (e) { /* style not yet ready */ }
});
return [...urls];
}
function warmImage(url) {
if (imagePool.has(url)) return imagePool.get(url).promise;
const image = new Image();
const promise = new Promise(resolve => {
let finished = false;
const timeout = setTimeout(() => done(false), 5000);
function done(ok) {
if (finished) return;
finished = true;
clearTimeout(timeout);
resolve(ok);
}
image.onload = () => done(true);
image.onerror = () => done(false);
image.src = url;
if (image.complete) done(image.naturalWidth > 0);
}).then(ok => ok && image.decode
? Promise.race([image.decode().then(() => true).catch(() => true),sleep(900).then(() => true)])
: ok);
imagePool.set(url, { image, promise });
return promise;
}
async function warmBackgrounds(doc) {
const urls = backgroundUrls(doc);
await Promise.allSettled(urls.map(warmImage));
}
function wireFrame() {
try {
const doc = frame.contentDocument;
if (!doc) return;
otherTitle = doc.title || otherTitle;
watchPortalLinks(doc, basePage);
if (doc.__kkptFrameBridge) return;
doc.__kkptFrameBridge = true;
// Non-anchor navigation should leave the iframe and open normally
// in the top window, so the browser's URL doesn't become stale.
doc.addEventListener('click', event => {
if (!active || !isPlainClick(event)) return;
if (portalClick(event, doc, basePage, false)) return;
const el = findAnchor(event, doc);
if (!el || (el.target && el.target !== '_self')) return;
const href = el.href;
if (!href || href.startsWith('javascript:')) return;
const next = new URL(href, doc.baseURI);
// Same-document fragments stay inside the iframe.
const currentFrame = new URL(frame.contentWindow.location.href);
if (next.origin === currentFrame.origin &&
next.pathname === currentFrame.pathname &&
next.search === currentFrame.search && next.hash) {
history.replaceState(history.state, '', next.href);
return;
}
event.preventDefault();
window.location.assign(next.href);
}, true);
doc.addEventListener('submit', event => {
if (active && event.target instanceof doc.defaultView.HTMLFormElement) {
event.target.target = '_top';
}
}, true);
} catch (err) {
console.warn('[KuranokaPageTransition] Frame link bridge unavailable:', err);
}
}
function warmFrame() {
if (loading) return loading;
frame = document.createElement('iframe');
frame.id = 'kkpt-preview';
frame.src = otherUrl.href; // set BEFORE insertion, avoids extra initial history hop
frame.title = otherPage + ' 预载页面';
frame.tabIndex = -1;
frame.setAttribute('aria-hidden', 'true');
frame.setAttribute('loading', 'eager');
frame.style.clipPath = hideClip;
loading = new Promise(resolve => {
let settled = false;
let preparing = false;
let poll = null;
function finish(ok, reason) {
if (settled) return;
settled = true;
clearInterval(poll);
ready = ok;
if (!ok) console.warn('[KuranokaPageTransition] Preview:', reason);
resolve(ok);
}
async function inspect() {
if (settled || preparing) return;
try {
const doc = frame.contentDocument;
if (!doc || !doc.querySelector('#mw-content-text,.mw-parser-output')) return;
preparing = true;
clearInterval(poll);
await sleep(320); // Background.js / wiki style scripts
await Promise.race([warmBackgrounds(doc), sleep(3600)]);
await sleep(120);
await Promise.race([warmBackgrounds(doc), sleep(1300)]);
frame.contentWindow.scrollTo(0, 0);
wireFrame();
finish(true);
} catch (err) { finish(false, String(err)); }
}
frame.addEventListener('load', () => {
if (!settled && !preparing) inspect();
});
frame.addEventListener('error', () => finish(false,'iframe 网络加载错误'));
document.body.append(frame);
poll = setInterval(inspect, 130);
setTimeout(() => { if (!settled && !preparing) finish(false,'18 秒仍未找到目标正文'); }, 18000);
});
warmBackgrounds(document).catch(() => {});
setTimeout(() => warmBackgrounds(document).catch(() => {}), 700);
return loading;
}
// This edge is used by BOTH the DOM clip and the shader.
function edgeAt(y, seconds, progress, width) {
const eased = smooth(progress);
const toDark = window.__kkptVisualDark;
const center = toDark
? width + 110 - (width + 220) * eased
: -110 + (width + 220) * eased;
const wave = Math.sin(Math.PI * progress);
return center + wave * (
28 * Math.sin(y * .012 + seconds * 3.1) +
17 * Math.sin(y * .041 - seconds * 5.7) +
7 * Math.sin(y * .10 + seconds * 10.0) +
11 * Math.sin(y * .073 + seconds * 6.13 + 2 * Math.sin(y * .017 - seconds * 2.3))
);
}
function clipFrame(seconds, progress) {
const width = innerWidth, height = innerHeight;
const pts = [];
const count = Math.max(35, Math.ceil(height / 11));
for (let i = 0; i <= count; i++) {
const y = height * i / count;
pts.push([edgeAt(y, seconds, progress, width), y]);
}
const supportsPath = CSS.supports('clip-path', 'path("M 0 0 L 8 0 L 8 8 Z")');
if (supportsPath) {
const startX = clipSide === 'right' ? width + 4 : -4;
let d = `M ${startX} -4 L ${startX} ${height + 4} L ${pts[count][0].toFixed(1)} ${height}`;
// Quadratic smoothing eliminates the geometric triangular teeth.
for (let i = count - 1; i >= 0; i--) {
const point = pts[i];
const previous = pts[Math.max(0, i - 1)];
const mx = (point[0] + previous[0]) * .5;
const my = (point[1] + previous[1]) * .5;
d += ` Q ${point[0].toFixed(1)} ${point[1].toFixed(1)} ${mx.toFixed(1)} ${my.toFixed(1)}`;
}
d += ` L ${pts[0][0].toFixed(1)} 0 Z`;
frame.style.clipPath = `path("${d}")`;
} else {
const points = pts.slice().reverse().map(p => `${p[0].toFixed(1)}px ${p[1].toFixed(1)}px`).join(',');
frame.style.clipPath = clipSide === 'right'
? `polygon(100% 0,100% 100%,${points})`
: `polygon(0 0,0 100%,${points})`;
}
}
// Tiny fullscreen quad + procedural fBm fire. No sprites or dependencies.
const VERTEX = `
attribute vec2 aPosition;
void main() { gl_Position = vec4(aPosition, 0.0, 1.0); }
`;
const FRAGMENT = `
precision highp float;
uniform vec2 uSize;
uniform vec2 uBuffer;
uniform float uTime;
uniform float uProgress;
uniform float uDark;
float random2(vec2 p) {
return fract(sin(dot(p, vec2(127.1,311.7))) * 43758.5453123);
}
float noise(vec2 p) {
vec2 i = floor(p), f = fract(p);
vec2 u = f*f*(3.0-2.0*f);
return mix(mix(random2(i),random2(i+vec2(1.0,0.0)),u.x),
mix(random2(i+vec2(0.0,1.0)),random2(i+1.0),u.x),u.y);
}
float fbm(vec2 p) {
float result = 0.0, amp = 0.5;
for (int i = 0; i < 5; i++) {
result += amp * noise(p);
p = mat2(1.6,-1.2,1.2,1.6) * p;
amp *= 0.5;
}
return result;
}
float smoothProgress(float t) { return t*t*(3.0-2.0*t); }
float edge(float y) {
float w = uSize.x;
float t = smoothProgress(uProgress);
float c = uDark > .5 ? w+110.0-(w+220.0)*t : -110.0+(w+220.0)*t;
float wave = sin(3.14159265*uProgress);
return c+wave*(28.0*sin(y*.012+uTime*3.1)+
17.0*sin(y*.041-uTime*5.7)+7.0*sin(y*.10+uTime*10.0)+
11.0*sin(y*.073+uTime*6.13+2.0*sin(y*.017-uTime*2.3)));
}
void main() {
vec2 p = vec2(gl_FragCoord.x*uSize.x/uBuffer.x,
uSize.y-gl_FragCoord.y*uSize.y/uBuffer.y);
float d = p.x-edge(p.y);
float oldSide = uDark > .5 ? -d : d;
float t = uTime;
float impact = sin(3.14159265*uProgress);
vec3 col = vec3(0.0);
float alpha = 0.0;
if (uDark > .5) {
// Deep smoke blankets a 350px belt BEHIND the incandescent
// edge. Multiple warped noise scales break up smooth bands.
vec2 sq = vec2(p.y*.007-t*.29,oldSide*.006+t*.12);
vec2 warp = vec2(fbm(sq*1.5+vec2(t*.13,0.0)),
fbm(sq*1.9+vec2(0.0,-t*.21)));
float smokeCloud = fbm(sq*2.0+warp*2.2);
float smokeDetail = fbm(sq*5.1-warp*.8);
float billow = smoothstep(.29,.69,smokeCloud*.88+smokeDetail*.34);
// A thick, drifting smoke WALL. The lighter old world
// goes visibly dark before the red page consumes it.
float soot = smoothstep(-110.0,-5.0,oldSide)*
(1.0-smoothstep(260.0,555.0,oldSide))*
(.55+.58*billow);
vec3 sootColor = mix(vec3(.011,.012,.022),vec3(.18,.055,.041),smokeCloud);
// High-frequency fBm produces uneven, flame-like tongues,
// with a broad ember-red zone instead of a white rope.
vec2 q = vec2(p.y*.014-t*.60,oldSide*.015-t*.43);
float turbulence = fbm(q+vec2(fbm(q*1.6)*2.7,-t*.25));
float shredded = fbm(q*3.6+vec2(t*.24,-t*.34));
float lengthOfTongue = 55.0+215.0*turbulence+65.0*shredded;
float raggedEdge = 1.0-smoothstep(lengthOfTongue-62.0,lengthOfTongue+15.0,oldSide);
float flame = raggedEdge*smoothstep(-75.0,7.0,oldSide)*
smoothstep(.21,.68,turbulence+.23*shredded);
float deepEmber = exp(-max(0.0,oldSide)/86.0);
float core = exp(-abs(d)/12.0);
float outer = exp(-abs(d)/78.0);
float whiteCore = core*max(.2,shredded);
float heat = clamp(flame*.83+core*.69,0.0,1.0);
vec3 fireColor = mix(vec3(.30,.011,.009),vec3(1.0,.105,.016),smoothstep(.10,.57,heat));
fireColor = mix(fireColor,vec3(1.0,.47,.048),smoothstep(.43,.85,heat));
fireColor = mix(fireColor,vec3(1.0,.93,.63),smoothstep(.80,1.0,whiteCore));
col = mix(sootColor,fireColor,clamp(flame*.95+core+deepEmber*.20,0.0,1.0));
alpha = clamp(soot*.93+flame*.92+outer*.32+core*.68,0.0,.99);
// Sharp micron-scale cinders; the real ember trails live
// on the separate high-resolution atmosphere canvas.
vec2 cell = floor((p+vec2(t*23.0,-t*122.0))/11.0);
vec2 uv = fract((p+vec2(t*23.0,-t*122.0))/11.0)-.5;
float sparks = (1.0-smoothstep(.015,.12,length(uv)))*
step(.991,random2(cell))*exp(-abs(d)/240.0);
col = mix(col,vec3(1.0,.78,.23),sparks);
alpha = max(alpha,sparks*.97);
} else {
// Returning to blue is ELECTRIC AURORA / COLD MIST, NEVER FIRE.
vec2 q = vec2(p.y*.009-t*.25,oldSide*.013+t*.18);
float cloud = fbm(q+vec2(fbm(q*1.7),-t*.25));
float finer = fbm(q*3.1+vec2(-t*.15,t*.19));
float mist = exp(-abs(d)/208.0)*(cloud*.7+finer*.18+.23);
float ion = exp(-abs(d)/37.0);
float arcWobble = 25.0*sin(p.y*.043-t*6.0)+
10.0*sin(p.y*.14+t*13.0)+5.0*sin(p.y*.37-t*19.0);
float arc = exp(-abs(d+arcWobble)/2.7)*
(.7+.3*sin(p.y*.065+t*7.0));
float branches = exp(-abs(d+52.0*sin(p.y*.018+t*2.4))/1.9)*
smoothstep(.63,.92,noise(vec2(floor(p.y/54.0),floor(t*9.0))));
col = mix(vec3(.008,.07,.19),vec3(.15,.52,.96),cloud+.27);
col += vec3(.23,.45,.60)*ion;
col = mix(col,vec3(.90,1.0,1.0),clamp(arc*.93+branches*.55,0.0,1.0));
alpha = clamp(mist*.85+ion*.43+arc*.97+branches*.65,0.0,.91);
}
// No long-lasting screen tint after the burn has finished.
alpha *= (.35+.65*impact) * smoothstep(0.0,.07,uProgress) *
(1.0-smoothstep(.94,1.0,uProgress));
gl_FragColor = vec4(col,alpha);
}
`;
function createRenderer(canvas) {
const gl = canvas.getContext('webgl', {
alpha: true, antialias: false, depth: false, stencil: false,
preserveDrawingBuffer: false, premultipliedAlpha: false
});
if (!gl) return null;
function compile(type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('[KKPT WebGL] Shader:', gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
const vs = compile(gl.VERTEX_SHADER, VERTEX);
const fs = compile(gl.FRAGMENT_SHADER, FRAGMENT);
if (!vs || !fs) return null;
const program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('[KKPT WebGL] Program:', gl.getProgramInfoLog(program));
return null;
}
gl.useProgram(program);
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),gl.STATIC_DRAW);
const pos = gl.getAttribLocation(program,'aPosition');
gl.enableVertexAttribArray(pos);
gl.vertexAttribPointer(pos,2,gl.FLOAT,false,0,0);
const sizeUniform = gl.getUniformLocation(program,'uSize');
const bufferUniform = gl.getUniformLocation(program,'uBuffer');
const timeUniform = gl.getUniformLocation(program,'uTime');
const progressUniform = gl.getUniformLocation(program,'uProgress');
const modeUniform = gl.getUniformLocation(program,'uDark');
// This is a single fullscreen pass to a transparent canvas.
// Blending here would multiply alpha twice and wash out the fire.
gl.disable(gl.BLEND);
return function draw(seconds,progress,dark) {
const w=innerWidth,h=innerHeight;
// Keep a stable GPU budget on high-DPI/mobile displays.
const scale = w < 700 ? .68 : .84;
const bw=Math.round(w*scale),bh=Math.round(h*scale);
if (canvas.width!==bw || canvas.height!==bh) {
canvas.width=bw;canvas.height=bh;gl.viewport(0,0,bw,bh);
}
gl.clearColor(0,0,0,0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.uniform2f(sizeUniform,w,h);
gl.uniform2f(bufferUniform,bw,bh);
gl.uniform1f(timeUniform,seconds);
gl.uniform1f(progressUniform,progress);
gl.uniform1f(modeUniform,dark?1:0);
gl.drawArrays(gl.TRIANGLES,0,6);
};
}
function createFallback(canvas) {
const ctx = canvas.getContext('2d');
return function draw(seconds,progress,dark) {
const w=innerWidth,h=innerHeight;
if (canvas.width!==w || canvas.height!==h) {canvas.width=w;canvas.height=h;}
ctx.clearRect(0,0,w,h);
const x = edgeAt(h/2,seconds,progress,w);
const gradient = ctx.createLinearGradient(x-115,0,x+115,0);
if (dark) {
gradient.addColorStop(0,'#180d0d00');
gradient.addColorStop(.40,'#67180677');
gradient.addColorStop(.50,'#ffe186cc');
gradient.addColorStop(.62,'#ef3f0955');
gradient.addColorStop(1,'#180d0d00');
} else {
gradient.addColorStop(0,'#5abcf600');
gradient.addColorStop(.46,'#7cdbff77');
gradient.addColorStop(.5,'#ffffffbb');
gradient.addColorStop(.56,'#63c9ff77');
gradient.addColorStop(1,'#5abcf600');
}
ctx.fillStyle=gradient;ctx.fillRect(x-115,0,230,h);
};
}
// A second canvas adds real, textured soot / rolling vapor and violent
// short-lived pressure waves. It is deliberately independent of WebGL,
// so even browsers with GPU disabled still get the smoke and impact.
function createAtmosphere(canvas) {
const ctx = canvas.getContext('2d', {alpha:true});
const rand = n => {
const x = Math.sin(n*127.1+311.7)*43758.5453123;
return x-Math.floor(x);
};
const clamp01 = n => Math.max(0,Math.min(1,n));
function valueNoise(x,y,seed) {
const ix=Math.floor(x), iy=Math.floor(y);
let fx=x-ix,fy=y-iy;
fx=fx*fx*(3-2*fx);fy=fy*fy*(3-2*fy);
const h=(a,b)=>rand(a*171.3+b*513.7+seed*89.1);
const a=h(ix,iy)*(1-fx)+h(ix+1,iy)*fx;
const b=h(ix,iy+1)*(1-fx)+h(ix+1,iy+1)*fx;
return a*(1-fy)+b*fy;
}
function smokeTexture(seed,dark) {
const tex=document.createElement('canvas');
tex.width=tex.height=112;
const g=tex.getContext('2d');
const data=g.createImageData(112,112);
for(let y=0;y<112;y++) for(let x=0;x<112;x++){
const u=(x-56)/56,v=(y-56)/56;
const curl=valueNoise(u*2.9+11,v*2.9+1,seed);
const curl2=valueNoise(u*3.4+3,v*3.4+7,seed+7);
const wx=u+.47*(curl-.5),wy=v+.40*(curl2-.5);
const radius=Math.sqrt(wx*wx*.91+wy*wy*1.13);
const envelope=clamp01((1.05-radius)/.56);
const low=valueNoise(u*4.1+4,v*4.1-9,seed+2);
const high=valueNoise(u*11.4-3,v*11.4+6,seed+5);
const fibers=valueNoise(u*22.0+1,v*16.0+5,seed+9);
const density=clamp01((low*.62+high*.28+fibers*.10-.28)*2.0)*
envelope*envelope;
const i=(y*112+x)*4;
const variation=low*28+high*15;
if(dark){
data.data[i]=18+variation;
data.data[i+1]=15+variation*.58;
data.data[i+2]=19+variation*.48;
}else{
data.data[i]=44+variation;
data.data[i+1]=91+variation;
data.data[i+2]=125+variation;
}
data.data[i+3]=Math.round(240*density);
}
g.putImageData(data,0,0);
return tex;
}
const sootSprites=[0,1,2,3].map(n=>smokeTexture(n+17,true));
const mistSprites=[0,1,2,3].map(n=>smokeTexture(n+51,false));
const particles=Array.from({length:innerWidth<700?72:124},(_,i)=>({
seed:rand(i*4+71),height:rand(i*5+13),
lifetime:.5+rand(i*8+37)*.7,
phase:rand(i*9+21),sprite:i%4,
scale:.72+rand(i*7+9)*1.25,
bend:rand(i*15+23)*6.28
}));
const motes=Array.from({length:innerWidth<700?47:100},(_,i)=>({
y:rand(i*3+17),phase:rand(i*9+43),
speed:85+rand(i*12+5)*260,
drift:75+rand(i*15+2)*170,
length:3+rand(i*17+7)*11
}));
const shockDebris=Array.from({length:innerWidth<700?40:85},(_,i)=>({
angle:rand(i*17+131)*Math.PI*2,
velocity:190+rand(i*11+51)*900,
seed:rand(i*5+79),
length:6+rand(i*7+17)*26
}));
function pressureWave(x,y,radius,power,dark,time) {
if(power<=.005)return;
const core=ctx.createRadialGradient(x,y,0,x,y,radius*.75);
if(dark){
core.addColorStop(0,'rgba(255,231,169,'+(.20*power)+')');
core.addColorStop(.17,'rgba(253,88,18,'+(.21*power)+')');
core.addColorStop(.60,'rgba(106,16,12,'+(.09*power)+')');
core.addColorStop(1,'rgba(30,0,0,0)');
}else{
core.addColorStop(0,'rgba(237,255,255,'+(.24*power)+')');
core.addColorStop(.26,'rgba(98,193,255,'+(.18*power)+')');
core.addColorStop(1,'rgba(0,29,100,0)');
}
ctx.globalCompositeOperation='screen';
ctx.fillStyle=core;
ctx.fillRect(x-radius,y-radius,radius*2,radius*2);
ctx.globalCompositeOperation='source-over';
}
return function drawAtmosphere(seconds,progress,dark,elapsed) {
const w=innerWidth,h=innerHeight;
const scale=w<700?.67:.79;
const bw=Math.max(1,Math.round(w*scale));
const bh=Math.max(1,Math.round(h*scale));
if(canvas.width!==bw||canvas.height!==bh){canvas.width=bw;canvas.height=bh;}
ctx.setTransform(scale,0,0,scale,0,0);
ctx.clearRect(0,0,w,h);
const envelope=Math.sin(Math.PI*progress);
const fade=clamp01(progress/.075)*clamp01((1-progress)/.065);
const sprites=dark?sootSprites:mistSprites;
const direction=dark?-1:1;
// Continuous textured smoke wall: not isolated oval puffs.
// The base layer makes the plume visible on a pale blue sky.
ctx.globalCompositeOperation='source-over';
const bands=Math.max(10,Math.ceil(h/(dark?49:73)));
for(let i=0;i<bands;i++){
const baseY=(i+.5)*h/bands;
const y=baseY+24*Math.sin(seconds*2.5+i*.7);
const x=edgeAt(y,seconds,progress,w)+direction*
(dark?118:72)+Math.sin(seconds*1.2+i*1.3)*36;
const width=(dark?400:280)*(1+.19*Math.sin(i*2.9));
const height=(dark?315:260);
ctx.save();
ctx.globalAlpha=(dark?.62:.36)*fade*(.65+.35*envelope);
ctx.translate(x,y);
ctx.rotate(.16*Math.sin(i*2.1+seconds*1.5));
ctx.drawImage(sprites[i%4],-width/2,-height/2,width,height);
ctx.restore();
}
// Independent turbulent billows peel away and rise.
for(const item of particles){
const age=((elapsed/item.lifetime+item.phase)%1);
const baseY=item.height*h;
const y=baseY-age*(dark?230:128)+(Math.sin(elapsed*2+item.bend)*15);
if(y< -230||y>h+230)continue;
const frontier=edgeAt(baseY,seconds,progress,w);
const x=frontier+direction*(age*(dark?225:135)+
30*Math.sin(age*6.3+item.bend));
const size=(dark?175:145)*item.scale*(.68+age*1.9);
const opacity=(dark?.85:.42)*Math.sin(Math.PI*age)*fade*
(.55+.45*envelope);
if(opacity<=.005)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(x,y);
ctx.rotate((item.bend-3.14)*.14+age*.85*direction);
ctx.scale(1.18,.84);
ctx.drawImage(sprites[item.sprite],-size/2,-size/2,size,size);
ctx.restore();
}
// The impact happens at ignition and again as the rupture reaches
// the middle of the screen; pulses are intentionally fleeting.
for(const moment of (dark?[.10,.48]:[.18,.58])){
const age=(progress-moment)/.125;
if(age<0||age>1)continue;
const intensity=(1-age)*(1-age)*fade;
// A single-frame-ish exposure bloom punches through
// the entire page; the tone is red or icy blue by direction.
ctx.globalCompositeOperation='screen';
ctx.fillStyle=dark
? 'rgba(255,81,26,'+(.095*intensity)+')'
: 'rgba(150,219,255,'+(.080*intensity)+')';
ctx.fillRect(0,0,w,h);
ctx.globalCompositeOperation='source-over';
const x=edgeAt(h*.51,seconds,progress,w);
const y=h*.51;
const radius=95+age*Math.max(w,h)*.9;
pressureWave(x,y,radius,intensity,dark,seconds);
ctx.globalAlpha=(dark?.20:.28)*intensity;
ctx.lineWidth=(dark?2.5:2)*Math.max(.4,1-age);
ctx.strokeStyle=dark?'#ffb36c':'#b5eaff';
ctx.beginPath();
for(let i=0;i<=110;i++){
const a=i/110*Math.PI*2;
const jag=1+.03*Math.sin(a*29+seconds*12)+
.05*Math.sin(a*13-seconds*5);
const rx=Math.cos(a)*radius*jag,ry=Math.sin(a)*radius*jag;
if(i===0)ctx.moveTo(x+rx,y+ry);else ctx.lineTo(x+rx,y+ry);
}
ctx.stroke();
ctx.globalAlpha=1;
// Fragment trails explode outward from the rupture point.
// They follow independent directions and speeds; no circles.
ctx.globalCompositeOperation='screen';
for(const bit of shockDebris){
const f=age*(.5+bit.seed*.5);
const travel=bit.velocity*f;
const px=x+Math.cos(bit.angle)*travel;
const py=y+Math.sin(bit.angle)*travel;
const vx=Math.cos(bit.angle)*bit.length*(1-age);
const vy=Math.sin(bit.angle)*bit.length*(1-age);
ctx.globalAlpha=(dark?.82:.68)*intensity*(.3+bit.seed*.7);
ctx.strokeStyle=dark?'#ffdd9b':'#e0faff';
ctx.lineWidth=.6+bit.seed*1.3;
ctx.beginPath();
ctx.moveTo(px,py);
ctx.lineTo(px-vx,py-vy);
ctx.stroke();
}
ctx.globalCompositeOperation='source-over';
ctx.globalAlpha=1;
}
// Sharp, directional embers / crystalline fragments, not blobs.
ctx.save();
ctx.globalCompositeOperation='screen';
for(const mote of motes){
const age=(elapsed*(dark?.74:.94)+mote.phase)%1;
const yy=mote.y*h-age*mote.speed+Math.sin(age*12+mote.phase*8)*9;
const x=edgeAt(yy,seconds,progress,w)+direction*age*mote.drift;
if(x<-25||x>w+25||yy<-25||yy>h+25)continue;
const opacity=(1-age)*fade*(dark?.89:.61);
ctx.globalAlpha=opacity;
ctx.strokeStyle=dark?'#ffb45d':'#b2efff';
ctx.lineWidth=dark?.8:1.15;
ctx.beginPath();
ctx.moveTo(x,yy);
ctx.lineTo(x-direction*mote.length*.4,yy+mote.length);
ctx.stroke();
}
ctx.restore();
};
}
function setDisplayed(nextActive) {
active = nextActive;
frame.classList.toggle('kkpt-active', active);
frame.style.clipPath = active ? 'inset(0)' : hideClip;
frame.tabIndex = active ? 0 : -1;
frame.setAttribute('aria-hidden', active ? 'false' : 'true');
document.title = active ? otherTitle : baseTitle;
updateButton();
}
async function animateSwap(nextActive) {
if (animating) return;
animating = true;
button.classList.add('kkpt-busy');
// Warm-up should be done already; prepare if the user clicked early.
labelSub.textContent = 'PREPARING THE OTHER SIDE...';
if (!loading) warmFrame();
const canUseFrame = await Promise.race([loading,sleep(11000).then(() => false)]);
if (!canUseFrame || !ready) {
// No mock background: fall back to the genuine Wiki page.
window.location.assign(nextActive ? otherUrl.href : baseUrl);
return;
}
const destinationDark = isDark(nextActive ? otherPage : basePage);
window.__kkptVisualDark = destinationDark;
button.classList.remove('kkpt-quiet');
labelSub.textContent = destinationDark ? 'THE SKY IS BURNING' : 'DAWN IS BREAKING';
// Freeze frame interaction while its silhouette is animated.
frame.classList.remove('kkpt-active');
frame.style.pointerEvents = 'none';
frame.style.clipPath = active ? 'inset(0)' : hideClip;
const canvas = document.createElement('canvas');
canvas.id = 'kkpt-vfx';
document.body.append(canvas);
const atmosphere = document.createElement('canvas');
atmosphere.id = 'kkpt-atmosphere';
document.body.append(atmosphere);
const drawAtmosphere = createAtmosphere(atmosphere);
const blast = document.createElement('div');
blast.id = 'kkpt-impact';
blast.className = destinationDark ? 'kkpt-impact-red' : 'kkpt-impact-blue';
blast.setAttribute('aria-hidden','true');
document.body.append(blast);
let draw = createRenderer(canvas);
if (!draw) {
canvas.remove();
const fallbackCanvas = document.createElement('canvas');
fallbackCanvas.id = 'kkpt-vfx';
document.body.append(fallbackCanvas);
draw = createFallback(fallbackCanvas);
}
const fxCanvas = document.getElementById('kkpt-vfx');
const duration = destinationDark ? 3650 : 2950;
const started = performance.now();
await new Promise(resolve => {
function tick(now) {
const seconds = now / 1000;
const t = Math.min(1,(now-started)/duration);
clipFrame(seconds,t);
drawAtmosphere(seconds,t,destinationDark,(now-started)/1000);
draw(seconds,t,destinationDark);
const first=destinationDark?.10:.18;
const second=destinationDark?.48:.58;
const shockA=Math.exp(-Math.pow((t-first)/.041,2));
const shockB=Math.exp(-Math.pow((t-second)/.056,2));
const shock=Math.min(1,shockA*.98+shockB*.80);
blast.style.opacity=String(shock);
blast.style.setProperty('--kkpt-impact-x',
edgeAt(innerHeight*.51,seconds,t,innerWidth).toFixed(1)+'px');
frame.style.filter=shock>.01
? 'brightness('+(1+.48*shock).toFixed(3)+') saturate('+
(1+.25*shock).toFixed(3)+')'
: '';
if (t < 1) requestAnimationFrame(tick);
else resolve();
}
requestAnimationFrame(tick);
});
setDisplayed(nextActive);
fxCanvas.style.opacity = '0';
atmosphere.style.opacity = '0';
blast.style.opacity = '0';
await sleep(190);
fxCanvas.remove();
atmosphere.remove();
blast.remove();
frame.style.filter = '';
frame.style.pointerEvents = '';
animating = false;
button.classList.remove('kkpt-busy','kkpt-quiet');
// No location.assign here: the rendered target stays alive.
history.pushState({ kkptV6: true, active }, '', active ? otherUrl.href : baseUrl);
}
function requestSwap(nextActive) {
if (animating || nextActive === active) return;
if (matchMedia('(prefers-reduced-motion: reduce)').matches && ready) {
setDisplayed(nextActive);
history.pushState({kkptV6:true,active},'',active?otherUrl.href:baseUrl);
return;
}
animateSwap(nextActive).catch(err => {
console.error('[KuranokaPageTransition] V6:',err);
document.getElementById('kkpt-vfx')?.remove();
document.getElementById('kkpt-atmosphere')?.remove();
document.getElementById('kkpt-impact')?.remove();
if (frame) frame.style.filter = '';
window.location.assign(nextActive ? otherUrl.href : baseUrl);
});
}
function createButton() {
if (!document.body || document.getElementById('kkpt-toggle')) return;
button=document.createElement('a');
button.id='kkpt-toggle';
labelIcon=document.createElement('span');
labelIcon.className='kkpt-icon';
labelIcon.setAttribute('aria-hidden','true');
const text=document.createElement('span');
text.className='kkpt-text';
labelTitle=document.createElement('span');
labelSub=document.createElement('span');
labelSub.className='kkpt-sub';
text.append(labelTitle,labelSub);
button.append(labelIcon,text);
document.body.append(button);
button.hidden=!SHOW_FLOATING_BUTTON;
updateButton();
watchPortalLinks(document, otherPage);
warmFrame();
button.addEventListener('click', event => {
if (!isPlainClick(event)) return;
event.preventDefault();
requestSwap(!active);
});
}
// A plain [[Kuronata|your mysterious text]] now triggers everything.
// The inverse [[Kuranoka|...]] works inside the already-loaded iframe.
document.addEventListener('click', event => {
if (active) return;
portalClick(event, document, otherPage, true);
}, true);
mw.hook('wikipage.content').add(() => {
if (document.readyState !== 'loading') watchPortalLinks(document, otherPage);
});
// Back and Forward restore the two already-loaded documents instantly.
window.addEventListener('popstate', () => {
if (!frame || !ready || animating) return;
const route = pathPage();
if (route === basePage || route === otherPage) {
setDisplayed(route === otherPage);
}
});
window.addEventListener('pageshow', event => {
if (!event.persisted || !frame || !ready) return;
animating=false;
document.getElementById('kkpt-vfx')?.remove();
document.getElementById('kkpt-atmosphere')?.remove();
document.getElementById('kkpt-impact')?.remove();
frame.style.filter = '';
setDisplayed(pathPage() === otherPage);
button?.classList.remove('kkpt-busy','kkpt-quiet');
});
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded',createButton,{once:true});
} else {
createButton();
}
}());