MediaWiki:KuranokaPageTransition.js：修订间差异

   Kuranoka / Kuronata — Page Transition V32 / V25 faithful restore

   V25 ORIGINAL fire edge, translucent fire pockets, smoke and dawn.

   Lightweight WebGL2 is restricted to subtle ember points, NEVER the

   fire curtain nor the reverse transition. Carbon sheets are 2D.

     // Citizen may reapply OS-preference classes after its own scripts load.

     // Keep each world's class correct without changing the user's setting.

     // V31's page-style retry solves occasional initial unstyled portals.

             if(getComputedStyle(root).getPropertyValue('--kkpt-css-v32').trim()==='ready')return;

         target.searchParams.set('kkptv','32');

         // V29's useful identity faults, transplanted without its transition

         // shaders. Only text nodes are wrapped; Wiki links stay clickable.

             while((node=walker.nextNode())&&matches.length<1800)matches.push(node);

                         fragment.append(document.createTextNode(raw.slice(previous,match.index)));

     window.__kkptVersion='32.0';

     function createAtmosphere(canvas,buildOneOnly=false) {

         const ctx = canvas.getContext('2d', {alpha:true});

                 // More long-lived sparks than V25, far below V31's 370/s.

                 const flow=(dark?132:96)*Math.min(1.5,h/720)*

                         ? r<.38?'flame':r<.91?'ember':'ash'

                         ? (soot?.7+Math.random()*1.1:

                             small?.9+Math.random()*1.55:.42+Math.random()*.76)

                         vx:(dark?1:-1)*(dark?(small?65+Math.random()*245:

                         vy:-(dark?(small?12+Math.random()*190:

                                 small?2+Math.random()*5:9+Math.random()*19)

                     sootRemainder+=dt*(h<680?32:46);

                     for(let i=0;i<sootBirths&&residualSoot.length<(w<700?92:155);i++){

                     shardRemainder+=dt*(h<680?18:30);

                     const shardBirths=Math.min(7,Math.floor(shardRemainder));

                     for(let i=0;i<shardBirths&&tornPaper.length<175;i++){

                         const life=.90+Math.random()*1.85;

                         const points=8+Math.floor(Math.random()*7);

                             a:Math.PI*2*j/points+(Math.random()-.5)*.50,

                             r:.25+Math.random()*1.06

                             x:edgeAt(y,seconds,progress,w)+(Math.random()-.20)*58,

                             y, vx:55+Math.random()*295,

                             vy:-190+Math.random()*270,

                             radius:2+Math.pow(Math.random(),2.5)*22,

         const particles=Array.from({length:innerWidth<700?40:62},(_,i)=>({

         const motes=Array.from({length:innerWidth<700?56:115},(_,i)=>({

             speed:100+rand(i*12+5)*340,

             drift:82+rand(i*15+2)*330,

             length:3+rand(i*17+7)*16

         const shockDebris=Array.from({length:innerWidth<700?32:66},(_,i)=>({

             const scale=w<700?.43:.55;

                 const count=Math.ceil(h/17);

                     (p.kind==='ember'?.74:p.kind==='glow'?.13:.66)*fade*

                         edgeAt(p.y,seconds,progress,w))/70):1);

                     ctx.shadowColor='#090506';

                     ctx.fillStyle=p.seed>3?'#190d11':'#302025';

                     ctx.lineWidth=.8+Math.sin(p.seed)**2*.8;

                     ctx.strokeStyle=age<.48?'rgba(255,107,35,.48)':

                         'rgba(49,20,19,.47)';

                 const opacity=(1-age)*fade*.89;

                 ctx.strokeStyle='#ffb45d';

                 ctx.lineWidth=.8;

     // V2's simple advancing boundary. The reader asked for the

     // vibrant fire curtain, not a mathematically fractal tearing wire.

         const center=dark

            ? w+105-(w+210)*smooth(t)

             : -105+(w+210)*smooth(t);

        const wobble=Math.sin(Math.PI*t);

         return y=>center+wobble*(

             17*Math.sin(y*.023+seconds*5.5)+

             9*Math.sin(y*.063-seconds*8.4)+

             4*Math.sin(y*.13+seconds*12)

        );

 

     // Clip the ACTUAL preloaded Wiki frame, precisely where the fire is.

     function clipFrame(edge) {

         const w=innerWidth,h=innerHeight;

         const rows=Math.max(24,Math.ceil(h/30));

     function canvasFire(canvas,dark,duration,drawAtmosphere,done,gpuEmbers) {

         const ctx=dark&&canvas

            ? canvas.getContext('2d',{alpha:true,desynchronized:true})

             : null;

         if(dark&&!ctx){done();return;}

         const art=dark?makeSprites():null;

         const w=innerWidth,h=innerHeight;

         if(ctx){

             const scale=Math.min(window.devicePixelRatio||1,w<650?.69:.80);

             canvas.width=Math.max(1,Math.round(w*scale));

             canvas.height=Math.max(1,Math.round(h*scale));

            ctx.setTransform(scale,0,0,scale,0,0);

        const rand=(a,b)=>a+Math.random()*(b-a);

        const mobile=w<650;

        const maxCount=mobile?160:250;

        const p=[];

        const accum={flame:0,ember:0,shard:0,sky:0,mist:0,pollen:0};

        const rates=dark

            ? {flame:mobile?80:105,ember:mobile?72:96,

            : {sky:mobile?50:80,mist:mobile?13:20,pollen:mobile?27:50};

        const started=performance.now();

        let previous=started;

        let lastPaint=0;

        let lastClip=0;

        function spawn(kind,edge,seconds) {

            if(p.length>=maxCount)return;

            const y=rand(-25,h+25);

            const x=edge(y);

            const type=kind;

            const smoke=type==='smoke';

            const shard=type==='shard';

            const ember=type==='ember'||type==='pollen';

            const blue=type==='sky'||type==='mist'||type==='pollen';

            let radius,life,vx,vy;

            if(shard){

                 radius=rand(4,18);life=rand(.6,1.65);

                 vx=rand(-130,65);vy=rand(-125,30);

             }else if(smoke){

                 radius=rand(32,85);life=rand(1.1,2.5);

                 vx=rand(-20,65);vy=rand(-88,-22);

            }else if(type==='mist'){

                 radius=rand(45,100);life=rand(.9,1.8);

                 vx=rand(-35,45);vy=rand(-75,-15);

             }else if(type==='flame'){

                 radius=rand(20,57);life=rand(.3,.82);

                vx=rand(-100,30);vy=rand(-180,-45);

             }else{

                 radius=ember?rand(2.5,9):rand(18,47);

                 life=ember?rand(.45,1.1):rand(.35,.85);

                 vx=rand(-95,75);vy=rand(-150,-25);

             p.push({

                 type,life,left:life,

                 x:x+rand(smoke?12:shard?-35:-27,smoke?140:shard?36:64),

                y:y+rand(-14,14),vx,vy,radius,

                angle:rand(-Math.PI,Math.PI),spin:rand(-5,5),

                drift:rand(-.65,.65),blue

        function spawnAtRate(dt,edge,seconds,strength){

            for(const type in rates){

                accum[type]+=rates[type]*dt*strength;

                const n=Math.min(11,Math.floor(accum[type]));

                 accum[type]-=n;

                 for(let i=0;i<n;i++)spawn(type,edge,seconds);

        function advance(dt){

            for(let i=p.length-1;i>=0;i--) {

                 const q=p[i];

                q.left-=dt;

                if(q.left<=0){p[i]=p[p.length-1];p.pop();continue;}

                 q.x+=q.vx*dt;

                q.y+=q.vy*dt;

                 q.vx+=q.drift*dt*35;

                q.vy-=10*dt;

                q.angle+=q.spin*dt;