cascading-reel 0.0.21 → 0.0.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +3 -2
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +30 -0
- package/dist/index.es.js +414 -342
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +3 -2
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=6,p=3,d=3,V=[.04,0,-.04],A={normal:{columnStaggerMs:76,fallMs:800,outroOverlapMs:88,outroRowGapMs:14,rowBaseSpacingRatio:.05,incomingAlphaRampMs:34,fixedStepMs:1e3/120,maxCatchUpStepsPerFrame:6,pixelSnapY:"none"},cinematic:{columnStaggerMs:170,fallMs:2200,outroOverlapMs:300,outroRowGapMs:28,rowBaseSpacingRatio:.05,incomingAlphaRampMs:90,fixedStepMs:1e3/120,maxCatchUpStepsPerFrame:6,pixelSnapY:"none"},turbo:{columnStaggerMs:120,fallMs:1200,outroOverlapMs:180,outroRowGapMs:20,rowBaseSpacingRatio:.04,incomingAlphaRampMs:50,fixedStepMs:1e3/120,maxCatchUpStepsPerFrame:4,pixelSnapY:"half"}},k="normal";function z(s){return A[s]}A.normal.outroRowGapMs;A.normal.rowBaseSpacingRatio;const $=5e3,y=1800,K=.1,x=720,G=34,Q=[255,235,110];A.normal.columnStaggerMs;A.normal.fallMs;A.normal.outroOverlapMs;const j=200;function L(s,t,i){return s<t?t:s>i?i:s}function Z(s){return Math.floor(Math.random()*s)}function v(s,t){return(s%t+t)%t}function T(s){return L(Math.round(s),0,255)}function H(s){const t=[];for(let i=0;i<p;i+=1){const e=[];for(let n=0;n<d;n+=1)e.push(Z(s));t.push(e)}return t}function U(s){const t=new Map;for(let r=0;r<p;r+=1)for(let o=0;o<d;o+=1){const h=s[r][o];t.set(h,(t.get(h)??0)+1)}let i=s[0][0],e=-1;for(const[r,o]of t.entries())o>e&&(e=o,i=r);const n=[];for(let r=0;r<p;r+=1)for(let o=0;o<d;o+=1)s[r][o]===i&&n.push({col:r,row:o});return n}function P(){return Array.from({length:p},()=>Array.from({length:d},()=>0))}function w(s,t){for(let i=0;i<p;i+=1)for(let e=0;e<d;e+=1)s[i][e]=t}class J{rafId=null;step=null;start(t){this.rafId===null&&(this.step=t,this.rafId=requestAnimationFrame(this.tick))}stop(){this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.step=null}isRunning(){return this.rafId!==null}tick=t=>{if(!this.step){this.stop();return}if(this.step(t)===!1){this.stop();return}this.rafId!==null&&(this.rafId=requestAnimationFrame(this.tick))}}function tt(s){const t=L(s,0,1);return t*t*t*(t*(t*6-15)+10)}function B(s,t){if(s.endMs<=s.startMs)return{value:s.to,t:1,done:!0};const i=L((t-s.startMs)/(s.endMs-s.startMs),0,1),e=tt(i);return{value:s.from+(s.to-s.from)*e,t:i,done:i>=1}}function it(s,t,i,e){const n=[0,0,0];let r=0;for(let o=d-1;o>=0;o-=1){if(s[o]===0){n[o]=0;continue}n[o]=r;const h=Math.floor(t*e);r+=h+i}return n}function W(s){const i=s.height-s.boardY+s.cellH+2,e=[i,i,i];return{columnStaggerMs:s.motionProfile.columnStaggerMs,fallMs:s.motionProfile.fallMs,incomingAlphaRampMs:s.motionProfile.incomingAlphaRampMs,outgoingDistance:i,incomingFromOffsets:[-s.cellH,-s.cellH*2,-s.cellH*3],rowStartDelays:it(e,s.motionProfile.fallMs,s.motionProfile.outroRowGapMs,s.motionProfile.rowBaseSpacingRatio),incomingStartShift:Math.max(0,s.motionProfile.fallMs-s.motionProfile.outroOverlapMs)}}function N(s){let t=!0,i=!0;for(let e=0;e<s.scriptedOutgoingOffsets.length;e+=1){const n=s.elapsedMs-e*s.motionPlan.columnStaggerMs;for(let r=0;r<d;r+=1){const o=n-s.motionPlan.rowStartDelays[r];if(o<=0){s.scriptedOutgoingOffsets[e][r]=0,s.scriptedIncomingOffsets[e][r]=s.motionPlan.incomingFromOffsets[r],s.scriptedIncomingAlpha[e][r]=0,s.scriptedIncomingVisibility[e][r]="hidden",t=!1,i=!1;continue}const h=B({startMs:0,endMs:s.motionPlan.fallMs,from:0,to:s.motionPlan.outgoingDistance},o);s.scriptedOutgoingOffsets[e][r]=h.value,s.scriptedIncomingVisibility[e][r]=h.done?"entering":"exiting",h.done||(t=!1);const l=o-s.motionPlan.incomingStartShift;if(l<=0){s.scriptedIncomingOffsets[e][r]=s.motionPlan.incomingFromOffsets[r],s.scriptedIncomingAlpha[e][r]=0,s.scriptedIncomingVisibility[e][r]="hidden",i=!1;continue}const u=B({startMs:0,endMs:s.motionPlan.fallMs,from:s.motionPlan.incomingFromOffsets[r],to:0},l);s.scriptedIncomingOffsets[e][r]=u.value,s.scriptedIncomingAlpha[e][r]=L(l/Math.max(1,s.motionPlan.incomingAlphaRampMs),0,1),s.scriptedIncomingVisibility[e][r]=u.done?"active":"entering",u.done||(i=!1)}}return{allOutgoingDone:t,allIncomingDone:i}}function et(s){return s?[T(s[0]),T(s[1]),T(s[2])]:Q}function st(s){return s==="rainbow"?"rainbow":"solid"}function F(s){if(s.length!==d)throw new Error(`rows must contain ${d} rows`);for(let t=0;t<d;t+=1)if(!Array.isArray(s[t])||s[t].length!==p)throw new Error(`rows[${t}] must contain ${p} columns`);return[[s[0][0],s[1][0],s[2][0]],[s[0][1],s[1][1],s[2][1]],[s[0][2],s[1][2],s[2][2]]]}function D(s,t){if(s.length!==p)throw new Error(`stopGrid must contain ${p} columns`);const i=[];for(let e=0;e<p;e+=1){const n=s[e];if(!Array.isArray(n)||n.length!==d)throw new Error(`stopGrid[${e}] must contain ${d} rows`);i[e]=[v(n[0],t),v(n[1],t),v(n[2],t)]}return i}function nt(s,t){return D(F(s),t)}function rt(s){return{stopGrid:s.stopGrid?.map(t=>[...t]),stopRows:s.stopRows?.map(t=>[...t]),finaleSequence:s.finaleSequence?.map(t=>t.map(i=>[...i])),finaleSequenceRows:s.finaleSequenceRows?.map(t=>t.map(i=>[...i])),highlightWin:s.highlightWin,callback:s.callback}}class ot{queue;constructor(t){this.queue=(t??[]).map(i=>rt(i))}hasPending(){return this.queue.length>0}consume(){return this.queue.length===0?null:this.queue.shift()??null}}function ht(){return{isSpinning:!1,hasStartedFirstSpin:!1,queueFinished:!1,shouldHighlightCurrentSpin:!1,activeSpinState:null,phase:"idle",winFlashStartedAt:0,outroStartedAt:0,idleStartedAt:0,preSpinStartedAt:0,winEffectsEnvelope:1}}function lt(s,t){s.hasStartedFirstSpin=!0,s.isSpinning=!0,s.phase="outro",s.outroStartedAt=t.startedAt,s.activeSpinState=t.activeSpinState,s.shouldHighlightCurrentSpin=t.shouldHighlightCurrentSpin}function at(s,t,i){s.phase="idle",s.idleStartedAt=i,s.isSpinning=!1,s.shouldHighlightCurrentSpin=!1,s.queueFinished=!t,s.activeSpinState=null}function q(s,t){s.winFlashStartedAt=t,s.phase="winFlash"}function ct(s){s.isSpinning=!1,s.queueFinished=!0}const ut=`
|
|
2
2
|
attribute vec2 a_pos;
|
|
3
3
|
uniform vec2 u_resolution;
|
|
4
4
|
uniform vec4 u_destRect;
|
|
@@ -50,5 +50,6 @@ void main() {
|
|
|
50
50
|
gl_FragColor = u_color;
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
|
-
`;class gt{canvas;spriteImage;spriteElementsCount;gl;program;uniforms;quadBuffer;texture;viewportW=1;viewportH=1;spriteWidth;spriteHeight;spriteSegmentHeight;constructor(t){this.canvas=t.canvas,this.spriteImage=t.spriteImage,this.spriteElementsCount=Math.max(1,t.spriteElementsCount),this.spriteWidth=this.spriteImage.width,this.spriteHeight=this.spriteImage.height,this.spriteSegmentHeight=this.spriteHeight/this.spriteElementsCount;const s=this.canvas.getContext("webgl2",{alpha:!0,antialias:!1})??this.canvas.getContext("webgl",{alpha:!0,antialias:!1});if(!s)throw new Error("WebGL context is not available");this.gl=s;const i=this.createShader(this.gl.VERTEX_SHADER,ut),r=this.createShader(this.gl.FRAGMENT_SHADER,dt);this.program=this.createProgram(i,r),this.gl.deleteShader(i),this.gl.deleteShader(r);const n=this.gl.createBuffer();if(!n)throw new Error("Failed to create WebGL quad buffer");this.quadBuffer=n,this.gl.bindBuffer(this.gl.ARRAY_BUFFER,this.quadBuffer),this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1]),this.gl.STATIC_DRAW);const o=this.gl.createTexture();if(!o)throw new Error("Failed to create WebGL texture");this.texture=o,this.gl.bindTexture(this.gl.TEXTURE_2D,this.texture),this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL,0),this.gl.pixelStorei(this.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL,1),this.gl.texImage2D(this.gl.TEXTURE_2D,0,this.gl.RGBA,this.gl.RGBA,this.gl.UNSIGNED_BYTE,this.spriteImage),this.gl.pixelStorei(this.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL,0),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MIN_FILTER,this.gl.LINEAR),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MAG_FILTER,this.gl.LINEAR),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_S,this.gl.CLAMP_TO_EDGE),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_T,this.gl.CLAMP_TO_EDGE),this.gl.useProgram(this.program);const l=this.gl.getAttribLocation(this.program,"a_pos");this.gl.enableVertexAttribArray(l),this.gl.vertexAttribPointer(l,2,this.gl.FLOAT,!1,8,0),this.uniforms={resolution:this.gl.getUniformLocation(this.program,"u_resolution"),destRect:this.gl.getUniformLocation(this.program,"u_destRect"),srcRect:this.gl.getUniformLocation(this.program,"u_srcRect"),color:this.gl.getUniformLocation(this.program,"u_color"),useTexture:this.gl.getUniformLocation(this.program,"u_useTexture"),shapeMode:this.gl.getUniformLocation(this.program,"u_shapeMode"),texture:this.gl.getUniformLocation(this.program,"u_texture")},this.gl.uniform1i(this.uniforms.texture,0),this.gl.clearColor(0,0,0,0),this.gl.enable(this.gl.BLEND),this.gl.blendFunc(this.gl.ONE,this.gl.ONE_MINUS_SRC_ALPHA)}resize(t,s){this.viewportW=Math.max(1,Math.floor(t)),this.viewportH=Math.max(1,Math.floor(s)),this.gl.viewport(0,0,this.viewportW,this.viewportH)}beginFrame(){this.gl.useProgram(this.program),this.gl.bindBuffer(this.gl.ARRAY_BUFFER,this.quadBuffer),this.gl.activeTexture(this.gl.TEXTURE0),this.gl.bindTexture(this.gl.TEXTURE_2D,this.texture),this.gl.uniform2f(this.uniforms.resolution,this.viewportW,this.viewportH),this.gl.uniform1f(this.uniforms.shapeMode,0),this.gl.clear(this.gl.COLOR_BUFFER_BIT)}drawSprite(t,s,i,r,n,o=1){const h=C(t,this.spriteElementsCount)*this.spriteSegmentHeight,c=h+this.spriteSegmentHeight,a=.5,f=a/this.spriteWidth,p=1-a/this.spriteWidth,S=1-(c-a)/this.spriteHeight,w=1-(h+a)/this.spriteHeight;this.gl.uniform4f(this.uniforms.destRect,s,i,r,n),this.gl.uniform4f(this.uniforms.srcRect,f,S,p,w),this.gl.uniform4f(this.uniforms.color,1,1,1,o),this.gl.uniform1f(this.uniforms.shapeMode,0),this.gl.uniform1f(this.uniforms.useTexture,1),this.gl.drawArrays(this.gl.TRIANGLES,0,6)}drawSolidRect(t,s,i,r,n){this.gl.uniform4f(this.uniforms.destRect,t,s,i,r),this.gl.uniform4f(this.uniforms.srcRect,0,0,1,1),this.gl.uniform4f(this.uniforms.color,n[0],n[1],n[2],n[3]),this.gl.uniform1f(this.uniforms.shapeMode,0),this.gl.uniform1f(this.uniforms.useTexture,0),this.gl.drawArrays(this.gl.TRIANGLES,0,6)}drawSoftCircle(t,s,i,r){const n=i*2;this.gl.uniform4f(this.uniforms.destRect,t-i,s-i,n,n),this.gl.uniform4f(this.uniforms.srcRect,0,0,1,1),this.gl.uniform4f(this.uniforms.color,r[0],r[1],r[2],r[3]),this.gl.uniform1f(this.uniforms.useTexture,0),this.gl.uniform1f(this.uniforms.shapeMode,1),this.gl.drawArrays(this.gl.TRIANGLES,0,6),this.gl.uniform1f(this.uniforms.shapeMode,0)}beginAdditiveBlend(){this.gl.blendFunc(this.gl.SRC_ALPHA,this.gl.ONE)}endAdditiveBlend(){this.gl.blendFunc(this.gl.ONE,this.gl.ONE_MINUS_SRC_ALPHA)}dispose(){this.gl.deleteTexture(this.texture),this.gl.deleteBuffer(this.quadBuffer),this.gl.deleteProgram(this.program)}createShader(t,s){const i=this.gl.createShader(t);if(!i)throw new Error("Failed to create WebGL shader");if(this.gl.shaderSource(i,s),this.gl.compileShader(i),!this.gl.getShaderParameter(i,this.gl.COMPILE_STATUS)){const r=this.gl.getShaderInfoLog(i)??"unknown error";throw this.gl.deleteShader(i),new Error(`WebGL shader compile failed: ${r}`)}return i}createProgram(t,s){const i=this.gl.createProgram();if(!i)throw new Error("Failed to create WebGL program");if(this.gl.attachShader(i,t),this.gl.attachShader(i,s),this.gl.linkProgram(i),!this.gl.getProgramParameter(i,this.gl.LINK_STATUS)){const r=this.gl.getProgramInfoLog(i)??"unknown error";throw this.gl.deleteProgram(i),new Error(`WebGL program link failed: ${r}`)}return i}}class u{static RAINBOW_HUE_BUCKETS=24;static PARTICLE_GLOBAL_ALPHA=.9;static PARTICLE_MAX_DISTANCE=.72;static PARTICLE_BASE_RADIUS=.028;canvas;container;button;spinQueueController;spriteUrl;spriteElementsCount;highlightInitialWinningCells;particleColorRgb;particleColorMode;motionProfile;pixelSnapY;spriteImage=null;webglRenderer=null;rafLoop=new J;runtime=lt();width=0;height=0;cellW=0;cellH=0;boardX=0;boardY=0;scriptedCascadeQueue=[];scriptedOutgoingGrid=null;scriptedPendingGrid=null;scriptedOutroStartedAt=0;scriptedOutroElapsedMs=0;outroMotionPlan=null;scriptedOutgoingOffsets=A();scriptedOutgoingOffsetsPrev=A();scriptedIncomingOffsets=A();scriptedIncomingOffsetsPrev=A();scriptedIncomingAlpha=A();scriptedIncomingAlphaPrev=A();scriptedIncomingVisibility=u.createVisibilityGrid("hidden");scriptedIncomingVisibilityPrev=u.createVisibilityGrid("hidden");winningCells=[];winningCellKeys=new Set;grid;particlesPerCell=G;lastRafTime=0;initialHighlightRequestedAt=0;simulationLastNow=0;simulationAccumulatorMs=0;outroInterpolationAlpha=1;isOutroPipelineWarmedUp=!1;isGpuPipelineWarmedUp=!1;static PRE_SPIN_MS=150;static WIN_EFFECTS_ENVELOPE_TAU_MS=120;static MAX_FRAME_DELTA_MS=250;static WIN_BORDER_ALPHA=.72;static WIN_BORDER_INSET_RATIO=.06;static particleSeedsCache=new Map;constructor(t){this.canvas=t.canvas,this.container=t.container,this.button=t.button,this.spriteUrl=t.sprite,this.spriteElementsCount=Math.max(1,t.spriteElementsCount??V),this.highlightInitialWinningCells=t.highlightInitialWinningCells!==!1,this.spinQueueController=new ot(t.queuedSpinStates),this.particleColorRgb=et(t.particleColorRgb),this.particleColorMode=st(t.particleColorMode),this.motionProfile=z(t.motionProfile??k),this.pixelSnapY=t.pixelSnapY??this.motionProfile.pixelSnapY,this.grid=t.initialSegments?nt(t.initialSegments,this.spriteElementsCount):U(this.spriteElementsCount)}async init(){if(this.bindEvents(),this.resize(),await this.loadSpriteIfProvided(),!this.spriteImage)throw new Error("sprite is required for WebGL renderer");this.webglRenderer=new gt({canvas:this.canvas,spriteImage:this.spriteImage,spriteElementsCount:this.spriteElementsCount}),this.webglRenderer.resize(this.width,this.height),this.warmUpOutroPipeline(),this.warmUpGpuPipeline(),this.applyInitialHighlightIfNeeded(),requestAnimationFrame(t=>{this.render(t),this.startLoop()})}destroy(){this.unbindEvents(),this.rafLoop.stop(),this.simulationLastNow=0,this.simulationAccumulatorMs=0,ct(this.runtime),this.webglRenderer?.dispose(),this.webglRenderer=null,this.clearWinningCells()}spin(){if(this.runtime.isSpinning||this.runtime.queueFinished)return;if(!this.spinQueueController.hasPending()){this.runtime.queueFinished=!0,this.button&&(this.button.disabled=!0);return}const t=this.spinQueueController.consume(),s=t?.highlightWin===!0;this.runtime.isSpinning=!0,this.runtime.phase="preSpin",this.runtime.preSpinStartedAt=performance.now(),this.runtime.activeSpinState=t,this.runtime.shouldHighlightCurrentSpin=s,this.runtime.hasStartedFirstSpin=!0,this.simulationLastNow=0,this.simulationAccumulatorMs=0,this.button&&(this.button.disabled=!0),this.startLoop()}bindEvents(){window.addEventListener("resize",this.resize),this.button?.addEventListener("click",this.onSpinClick)}unbindEvents(){window.removeEventListener("resize",this.resize),this.button?.removeEventListener("click",this.onSpinClick)}onSpinClick=()=>{if(this.runtime.phase==="winFlash"&&(this.runtime.shouldHighlightCurrentSpin||!this.runtime.hasStartedFirstSpin)){this.finishSpinWithUi(!0),this.spinQueueController.hasPending()&&this.spin();return}this.runtime.isSpinning||this.spin()};getNextGrid(t){return t?H(t,this.spriteElementsCount):U(this.spriteElementsCount)}update(t){if(this.runtime.isSpinning){if(this.runtime.phase==="preSpin"){if(t-this.runtime.preSpinStartedAt<u.PRE_SPIN_MS)return;ht(this.runtime,{activeSpinState:this.runtime.activeSpinState,shouldHighlightCurrentSpin:this.runtime.shouldHighlightCurrentSpin,startedAt:t}),this.runtime.preSpinStartedAt=0;const s=this.runtime.activeSpinState?.finaleSequenceRows?this.runtime.activeSpinState.finaleSequenceRows.map(n=>F(n)):this.runtime.activeSpinState?.finaleSequence??[];this.scriptedCascadeQueue=s.map(n=>n.map(o=>[...o])),this.clearWinningCells();const i=this.runtime.activeSpinState?.stopRows?F(this.runtime.activeSpinState.stopRows):this.runtime.activeSpinState?.stopGrid,r=this.getNextGrid(i);this.startOutroTransition(r,t)}if(this.runtime.phase!=="outro"&&this.runtime.phase==="winFlash"){!this.runtime.shouldHighlightCurrentSpin&&t-this.runtime.winFlashStartedAt>=$&&this.finishSpinWithUi();return}}}stepScriptedOutro(t){if(!this.scriptedOutgoingGrid||!this.scriptedPendingGrid){this.finishSpinWithUi();return}this.outroMotionPlan||(this.outroMotionPlan=W({height:this.height,boardY:this.boardY,cellH:this.cellH,motionProfile:this.motionProfile})),this.scriptedOutroElapsedMs+=t;const{allOutgoingDone:s,allIncomingDone:i}=D({elapsedMs:this.scriptedOutroElapsedMs,scriptedOutgoingOffsets:this.scriptedOutgoingOffsets,scriptedIncomingOffsets:this.scriptedIncomingOffsets,scriptedIncomingAlpha:this.scriptedIncomingAlpha,scriptedIncomingVisibility:this.scriptedIncomingVisibility,motionPlan:this.outroMotionPlan});if(!(!s||!i)&&(this.grid=this.scriptedPendingGrid,this.scriptedOutgoingGrid=null,this.scriptedPendingGrid=null,this.outroMotionPlan=null,this.clearWinningCells(),this.resetOutroBuffers(1,"active"),!this.tryStartScriptedCascade(this.scriptedOutroStartedAt+this.scriptedOutroElapsedMs))){if(!this.runtime.shouldHighlightCurrentSpin){this.finishSpinWithUi();return}this.setWinningCells(N(this.grid)),q(this.runtime,this.scriptedOutroStartedAt+this.scriptedOutroElapsedMs),this.runtime.activeSpinState?.callback?.(),this.button&&this.runtime.shouldHighlightCurrentSpin&&this.spinQueueController.hasPending()&&(this.button.disabled=!1)}}tryStartScriptedCascade(t){if(this.scriptedCascadeQueue.length===0)return!1;const s=this.scriptedCascadeQueue.shift();return s?(this.startOutroTransition(H(s,this.spriteElementsCount),t),!0):!1}startOutroTransition(t,s){this.scriptedOutgoingGrid=this.grid.map(i=>[...i]),this.scriptedPendingGrid=t.map(i=>[...i]),this.outroMotionPlan=W({height:this.height,boardY:this.boardY,cellH:this.cellH,motionProfile:this.motionProfile}),this.resetOutroBuffers(0,"hidden"),this.clearWinningCells(),this.runtime.phase="outro",this.scriptedOutroStartedAt=s,this.scriptedOutroElapsedMs=0,this.outroInterpolationAlpha=1}finishSpinWithUi(t=!1){const s=this.runtime.activeSpinState,i=t?void 0:s?.callback,r=this.spinQueueController.hasPending();at(this.runtime,r,performance.now()),this.button&&(this.button.disabled=this.runtime.queueFinished),i?.()}applyInitialHighlightIfNeeded(){this.highlightInitialWinningCells&&(this.setWinningCells(N(this.grid)),this.initialHighlightRequestedAt=performance.now())}warmUpOutroPipeline(){if(this.isOutroPipelineWarmedUp)return;const t=W({height:this.height,boardY:this.boardY,cellH:this.cellH,motionProfile:this.motionProfile}),s=A(),i=A(),r=A(),n=u.createVisibilityGrid("hidden"),o=Math.max(...t.rowStartDelays),l=(g-1)*t.columnStaggerMs,h=[0,this.motionProfile.fixedStepMs,t.incomingStartShift+this.motionProfile.fixedStepMs,t.fallMs+o+l+this.motionProfile.fixedStepMs];for(const c of h)D({elapsedMs:c,scriptedOutgoingOffsets:s,scriptedIncomingOffsets:i,scriptedIncomingAlpha:r,scriptedIncomingVisibility:n,motionPlan:t});this.isOutroPipelineWarmedUp=!0}warmUpGpuPipeline(){if(this.isGpuPipelineWarmedUp)return;const t=this.webglRenderer;if(!t)return;const s=Math.max(8,this.cellW*.2),i=Math.max(8,this.cellH*.2),r=this.boardX+2,n=this.boardY+2;t.beginFrame(),t.drawSprite(0,r,n,s,i,1),t.drawSolidRect(r+s+2,n,s,i,[1,1,1,.35]),t.beginAdditiveBlend(),t.drawSoftCircle(r+s*.5,n+i*.5,Math.max(2,s*.25),[1,.9,.4,.4]),t.endAdditiveBlend(),this.isGpuPipelineWarmedUp=!0}render(t){if(!this.webglRenderer)return;this.initialHighlightRequestedAt>0&&t-this.initialHighlightRequestedAt>=j&&(q(this.runtime,this.initialHighlightRequestedAt),this.runtime.winEffectsEnvelope=1,this.initialHighlightRequestedAt=0,this.button&&(this.button.disabled=!1));const s=this.runtime.phase==="preSpin"?0:this.runtime.phase==="winFlash"?1:0;if(this.lastRafTime>0){const l=Math.min(t-this.lastRafTime,50),h=1-Math.exp(-l/u.WIN_EFFECTS_ENVELOPE_TAU_MS);this.runtime.winEffectsEnvelope+=(s-this.runtime.winEffectsEnvelope)*h}this.lastRafTime=t,this.webglRenderer.beginFrame();const i=this.runtime.phase==="winFlash"||this.runtime.phase==="preSpin"||this.initialHighlightRequestedAt>0&&this.winningCells.length>0;this.runtime.phase==="outro"&&this.scriptedOutgoingGrid&&this.scriptedPendingGrid?(this.drawGridInterpolated(this.scriptedOutgoingGrid,this.scriptedOutgoingOffsetsPrev,this.scriptedOutgoingOffsets,this.outroInterpolationAlpha,i),this.drawGridInterpolated(this.scriptedPendingGrid,this.scriptedIncomingOffsetsPrev,this.scriptedIncomingOffsets,this.outroInterpolationAlpha,i,this.scriptedIncomingAlphaPrev,this.scriptedIncomingAlpha,this.scriptedIncomingVisibility)):this.drawGrid(this.grid,null,i);const r=this.initialHighlightRequestedAt>0?"winFlash":this.runtime.phase,n=this.initialHighlightRequestedAt>0?this.initialHighlightRequestedAt:this.runtime.winFlashStartedAt,o=this.initialHighlightRequestedAt>0?1:this.runtime.winEffectsEnvelope;this.drawWinningEffects({now:t,phase:r,winFlashStartedAt:n,winEffectsEnvelope:o})}isWinningCell=(t,s)=>this.winningCellKeys.has(`${t}:${s}`);getRowCompactOffset(t){return(X[t]??0)*this.cellH}applyPixelSnapY(t){return this.pixelSnapY==="integer"?Math.round(t):this.pixelSnapY==="half"?Math.round(t*2)/2:t}drawGrid(t,s,i){this.drawGridWithSampler({grid:t,skipWinningCells:i,sampleOffsetY:(r,n)=>s?s[r][n]:0,sampleAlpha:()=>1,isVisible:()=>!0})}drawGridInterpolated(t,s,i,r,n,o,l,h){this.drawGridWithSampler({grid:t,skipWinningCells:n,sampleOffsetY:(c,a)=>s[c][a]+(i[c][a]-s[c][a])*r,sampleAlpha:(c,a)=>o&&l?o[c][a]+(l[c][a]-o[c][a])*r:1,isVisible:(c,a)=>!h||h[c][a]!=="hidden"})}drawGridWithSampler(t){const s=this.webglRenderer;if(s)for(let i=0;i<g;i+=1){const r=this.boardX+i*this.cellW;for(let n=0;n<d;n+=1){if(t.skipWinningCells&&this.isWinningCell(i,n)||!t.isVisible(i,n))continue;const o=t.sampleOffsetY(i,n),l=this.applyPixelSnapY(this.boardY+n*this.cellH+o+this.getRowCompactOffset(n));if(l>this.height||l+this.cellH<0)continue;const h=t.sampleAlpha(i,n);h<=0||s.drawSprite(t.grid[i][n],r,l,this.cellW,this.cellH,h)}}}drawWinningEffects(t){const s=this.webglRenderer;if(!s||this.winningCells.length===0||t.phase!=="winFlash"&&t.phase!=="preSpin")return;const i=Math.max(0,Math.min(1,t.winEffectsEnvelope)),r=Math.max(0,t.now-t.winFlashStartedAt),n=r%y/y,o=1+Math.sin(n*Math.PI*2)*K*i,l=Math.max(1,this.cellW*u.WIN_BORDER_INSET_RATIO),h=Math.max(1,this.cellW*.03),c=this.runtime.phase==="winFlash"&&this.runtime.shouldHighlightCurrentSpin&&this.runtime.hasStartedFirstSpin;for(const a of this.winningCells){const f=this.boardX+a.col*this.cellW,p=this.boardY+a.row*this.cellH+this.getRowCompactOffset(a.row),S=this.grid[a.col][a.row],w=u.WIN_BORDER_ALPHA*i,m=this.particleColorMode==="rainbow"?u.hslToRgb01((r*.2+a.col*36+a.row*22)%360,.96,.64):[this.particleColorRgb[0]/255,this.particleColorRgb[1]/255,this.particleColorRgb[2]/255],I=this.cellW*o,R=this.cellH*o,P=(this.cellW-I)*.5,Y=(this.cellH-R)*.5;s.drawSprite(S,f+P,p+Y,I,R,1);const b=f+l,O=p+l,_=this.cellW-l*2,v=this.cellH-l*2;_<=h*2||v<=h*2||(s.drawSolidRect(b,O,_,h,[m[0],m[1],m[2],w]),s.drawSolidRect(b,O+v-h,_,h,[m[0],m[1],m[2],w]),s.drawSolidRect(b,O,h,v,[m[0],m[1],m[2],w]),s.drawSolidRect(b+_-h,O,h,v,[m[0],m[1],m[2],w]),c&&this.drawCellParticleBurst({renderer:s,cell:a,centerX:f+this.cellW*.5,centerY:p+this.cellH*.5,elapsed:r,envelope:i}))}}drawCellParticleBurst(t){const s=Math.min(this.cellW,this.cellH)*u.PARTICLE_MAX_DISTANCE,i=Math.min(this.cellW,this.cellH)*u.PARTICLE_BASE_RADIUS,r=u.getParticleSeeds(t.cell.col,t.cell.row),n=[this.particleColorRgb[0]/255,this.particleColorRgb[1]/255,this.particleColorRgb[2]/255];t.renderer.beginAdditiveBlend();for(let o=0;o<this.particlesPerCell;o+=1){const l=r[o],h=l.phaseOffset*x,c=t.elapsed-h;if(c<0)continue;const a=c%x/x,f=l.seedA*Math.PI*2,p=s*a*(.35+l.seedB*.65),S=t.centerX+Math.cos(f)*p,w=t.centerY+Math.sin(f)*p,m=.7+.9*Math.max(0,Math.sin((t.elapsed*.012+l.twinkleSeed*2)*Math.PI*2)),I=Math.max(1,i*(.55+l.seedC*.6)*(1-a*.5)),R=Math.max(0,Math.min(1,(.9+m*.2)*u.PARTICLE_GLOBAL_ALPHA*t.envelope));if(R<=0)continue;const P=this.particleColorMode==="rainbow"?u.getRainbowParticleColor(t.elapsed,t.cell.col,t.cell.row,l.seedA):n;t.renderer.drawSoftCircle(S,w,I,[P[0],P[1],P[2],R])}t.renderer.endAdditiveBlend()}static hslToRgb01(t,s,i){const r=(t%360+360)%360,n=Math.max(0,Math.min(1,s)),o=Math.max(0,Math.min(1,i)),l=(1-Math.abs(2*o-1))*n,h=r/60,c=l*(1-Math.abs(h%2-1));let a=0,f=0,p=0;h>=0&&h<1?(a=l,f=c):h<2?(a=c,f=l):h<3?(f=l,p=c):h<4?(f=c,p=l):h<5?(a=c,p=l):(a=l,p=c);const S=o-l*.5;return[a+S,f+S,p+S]}static getRainbowParticleColor(t,s,i,r){const n=(r*360+t*.24+s*38+i*22)%360,o=360/u.RAINBOW_HUE_BUCKETS,l=Math.floor(n/o)*o;return u.hslToRgb01(l,.98,.64)}static hash01(t,s,i,r){const n=Math.sin(t*127.1+s*311.7+i*74.7+r*19.3)*43758.5453;return n-Math.floor(n)}static getParticleSeeds(t,s){const i=`${t},${s}`,r=u.particleSeedsCache.get(i);if(r)return r;const n=[];for(let o=0;o<G;o+=1)n.push({seedA:u.hash01(t,s,o,1),seedB:u.hash01(t,s,o,2),seedC:u.hash01(t,s,o,3),phaseOffset:u.hash01(t,s,o,4),twinkleSeed:u.hash01(t,s,o,5)});return u.particleSeedsCache.set(i,n),n}clearWinningCells(){this.winningCells=[],this.winningCellKeys.clear()}setWinningCells(t){this.winningCells=t,this.winningCellKeys.clear();for(const s of t)this.winningCellKeys.add(`${s.col}:${s.row}`)}resize=()=>{const t=this.container.getBoundingClientRect(),i=typeof window.matchMedia=="function"&&window.matchMedia("(pointer: coarse)").matches||navigator.maxTouchPoints>0?1.5:2,r=Math.max(1,Math.min(window.devicePixelRatio||1,i)),n=Math.max(300,Math.floor(t.width*r));this.width=n,this.height=n;const o=Math.floor(Math.min(this.width/g,this.height/d));this.cellW=o,this.cellH=o,this.boardX=Math.floor((this.width-this.cellW*g)/2),this.boardY=Math.floor((this.height-this.cellH*d)/2),this.canvas.width=this.width,this.canvas.height=this.height,this.webglRenderer?.resize(this.width,this.height)};async loadSpriteIfProvided(){if(!this.spriteUrl)return;const t=new Image;t.decoding="async",t.src=this.spriteUrl;try{await t.decode(),this.spriteImage=t}catch{this.spriteImage=null}}advanceSimulation(t){if(this.simulationLastNow<=0){this.simulationLastNow=t,this.update(t);return}const s=Math.max(0,Math.min(t-this.simulationLastNow,u.MAX_FRAME_DELTA_MS));if(this.simulationLastNow=t,this.update(t),this.runtime.phase!=="outro"){this.outroInterpolationAlpha=1;return}this.snapshotOutroState(),this.simulationAccumulatorMs+=s;const i=this.motionProfile.fixedStepMs;let r=0;for(;this.simulationAccumulatorMs>=i&&r<this.motionProfile.maxCatchUpStepsPerFrame&&this.runtime.phase==="outro";)this.stepScriptedOutro(i),this.simulationAccumulatorMs-=i,r+=1;if(this.runtime.phase!=="outro"){this.outroInterpolationAlpha=1;return}this.outroInterpolationAlpha=Math.max(0,Math.min(1,this.simulationAccumulatorMs/i))}snapshotOutroState(){this.copyOffsets(this.scriptedOutgoingOffsetsPrev,this.scriptedOutgoingOffsets),this.copyOffsets(this.scriptedIncomingOffsetsPrev,this.scriptedIncomingOffsets),this.copyOffsets(this.scriptedIncomingAlphaPrev,this.scriptedIncomingAlpha),this.copyVisibility(this.scriptedIncomingVisibilityPrev,this.scriptedIncomingVisibility)}copyOffsets(t,s){for(let i=0;i<g;i+=1)for(let r=0;r<d;r+=1)t[i][r]=s[i][r]}copyVisibility(t,s){for(let i=0;i<g;i+=1)for(let r=0;r<d;r+=1)t[i][r]=s[i][r]}resetOutroBuffers(t,s){M(this.scriptedOutgoingOffsets,0),M(this.scriptedIncomingOffsets,0),M(this.scriptedOutgoingOffsetsPrev,0),M(this.scriptedIncomingOffsetsPrev,0),M(this.scriptedIncomingAlpha,t),M(this.scriptedIncomingAlphaPrev,t),this.fillVisibilityGrid(this.scriptedIncomingVisibility,s),this.fillVisibilityGrid(this.scriptedIncomingVisibilityPrev,s)}static createVisibilityGrid(t){return Array.from({length:g},()=>Array.from({length:d},()=>t))}fillVisibilityGrid(t,s){for(let i=0;i<g;i+=1)for(let r=0;r<d;r+=1)t[i][r]=s}startLoop(){this.rafLoop.isRunning()||this.rafLoop.start(t=>(this.advanceSimulation(t),this.render(t),this.shouldKeepAnimating()))}shouldKeepAnimating(){return this.runtime.isSpinning||this.initialHighlightRequestedAt>0?!0:this.runtime.winEffectsEnvelope>.001}}exports.CascadingReel=u;
|
|
53
|
+
`;class pt{canvas;spriteImage;spriteElementsCount;gl;program;uniforms;quadBuffer;texture;viewportW=1;viewportH=1;spriteWidth;spriteHeight;spriteSegmentHeight;constructor(t){this.canvas=t.canvas,this.spriteImage=t.spriteImage,this.spriteElementsCount=Math.max(1,t.spriteElementsCount),this.spriteWidth=this.spriteImage.width,this.spriteHeight=this.spriteImage.height,this.spriteSegmentHeight=this.spriteHeight/this.spriteElementsCount;const i=this.canvas.getContext("webgl2",{alpha:!0,antialias:!1})??this.canvas.getContext("webgl",{alpha:!0,antialias:!1});if(!i)throw new Error("WebGL context is not available");this.gl=i;const e=this.createShader(this.gl.VERTEX_SHADER,ut),n=this.createShader(this.gl.FRAGMENT_SHADER,dt);this.program=this.createProgram(e,n),this.gl.deleteShader(e),this.gl.deleteShader(n);const r=this.gl.createBuffer();if(!r)throw new Error("Failed to create WebGL quad buffer");this.quadBuffer=r,this.gl.bindBuffer(this.gl.ARRAY_BUFFER,this.quadBuffer),this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1]),this.gl.STATIC_DRAW);const o=this.gl.createTexture();if(!o)throw new Error("Failed to create WebGL texture");this.texture=o,this.gl.bindTexture(this.gl.TEXTURE_2D,this.texture),this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL,0),this.gl.pixelStorei(this.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL,1),this.gl.texImage2D(this.gl.TEXTURE_2D,0,this.gl.RGBA,this.gl.RGBA,this.gl.UNSIGNED_BYTE,this.spriteImage),this.gl.pixelStorei(this.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL,0),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MIN_FILTER,this.gl.LINEAR),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MAG_FILTER,this.gl.LINEAR),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_S,this.gl.CLAMP_TO_EDGE),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_T,this.gl.CLAMP_TO_EDGE),this.gl.useProgram(this.program);const h=this.gl.getAttribLocation(this.program,"a_pos");this.gl.enableVertexAttribArray(h),this.gl.vertexAttribPointer(h,2,this.gl.FLOAT,!1,8,0),this.uniforms={resolution:this.gl.getUniformLocation(this.program,"u_resolution"),destRect:this.gl.getUniformLocation(this.program,"u_destRect"),srcRect:this.gl.getUniformLocation(this.program,"u_srcRect"),color:this.gl.getUniformLocation(this.program,"u_color"),useTexture:this.gl.getUniformLocation(this.program,"u_useTexture"),shapeMode:this.gl.getUniformLocation(this.program,"u_shapeMode"),texture:this.gl.getUniformLocation(this.program,"u_texture")},this.gl.uniform1i(this.uniforms.texture,0),this.gl.clearColor(0,0,0,0),this.gl.enable(this.gl.BLEND),this.gl.blendFunc(this.gl.ONE,this.gl.ONE_MINUS_SRC_ALPHA)}resize(t,i){this.viewportW=Math.max(1,Math.floor(t)),this.viewportH=Math.max(1,Math.floor(i)),this.gl.viewport(0,0,this.viewportW,this.viewportH)}beginFrame(){this.gl.useProgram(this.program),this.gl.bindBuffer(this.gl.ARRAY_BUFFER,this.quadBuffer),this.gl.activeTexture(this.gl.TEXTURE0),this.gl.bindTexture(this.gl.TEXTURE_2D,this.texture),this.gl.uniform2f(this.uniforms.resolution,this.viewportW,this.viewportH),this.gl.uniform1f(this.uniforms.shapeMode,0),this.gl.clear(this.gl.COLOR_BUFFER_BIT)}drawSprite(t,i,e,n,r,o=1){const l=v(t,this.spriteElementsCount)*this.spriteSegmentHeight,u=l+this.spriteSegmentHeight,a=.5,f=a/this.spriteWidth,g=1-a/this.spriteWidth,S=1-(u-a)/this.spriteHeight,M=1-(l+a)/this.spriteHeight;this.gl.uniform4f(this.uniforms.destRect,i,e,n,r),this.gl.uniform4f(this.uniforms.srcRect,f,S,g,M),this.gl.uniform4f(this.uniforms.color,1,1,1,o),this.gl.uniform1f(this.uniforms.shapeMode,0),this.gl.uniform1f(this.uniforms.useTexture,1),this.gl.drawArrays(this.gl.TRIANGLES,0,6)}drawSolidRect(t,i,e,n,r){this.gl.uniform4f(this.uniforms.destRect,t,i,e,n),this.gl.uniform4f(this.uniforms.srcRect,0,0,1,1),this.gl.uniform4f(this.uniforms.color,r[0],r[1],r[2],r[3]),this.gl.uniform1f(this.uniforms.shapeMode,0),this.gl.uniform1f(this.uniforms.useTexture,0),this.gl.drawArrays(this.gl.TRIANGLES,0,6)}drawSoftCircle(t,i,e,n){const r=e*2;this.gl.uniform4f(this.uniforms.destRect,t-e,i-e,r,r),this.gl.uniform4f(this.uniforms.srcRect,0,0,1,1),this.gl.uniform4f(this.uniforms.color,n[0],n[1],n[2],n[3]),this.gl.uniform1f(this.uniforms.useTexture,0),this.gl.uniform1f(this.uniforms.shapeMode,1),this.gl.drawArrays(this.gl.TRIANGLES,0,6),this.gl.uniform1f(this.uniforms.shapeMode,0)}beginAdditiveBlend(){this.gl.blendFunc(this.gl.SRC_ALPHA,this.gl.ONE)}endAdditiveBlend(){this.gl.blendFunc(this.gl.ONE,this.gl.ONE_MINUS_SRC_ALPHA)}dispose(){this.gl.deleteTexture(this.texture),this.gl.deleteBuffer(this.quadBuffer),this.gl.deleteProgram(this.program)}createShader(t,i){const e=this.gl.createShader(t);if(!e)throw new Error("Failed to create WebGL shader");if(this.gl.shaderSource(e,i),this.gl.compileShader(e),!this.gl.getShaderParameter(e,this.gl.COMPILE_STATUS)){const n=this.gl.getShaderInfoLog(e)??"unknown error";throw this.gl.deleteShader(e),new Error(`WebGL shader compile failed: ${n}`)}return e}createProgram(t,i){const e=this.gl.createProgram();if(!e)throw new Error("Failed to create WebGL program");if(this.gl.attachShader(e,t),this.gl.attachShader(e,i),this.gl.linkProgram(e),!this.gl.getProgramParameter(e,this.gl.LINK_STATUS)){const n=this.gl.getProgramInfoLog(e)??"unknown error";throw this.gl.deleteProgram(e),new Error(`WebGL program link failed: ${n}`)}return e}}class c{static RAINBOW_HUE_BUCKETS=24;static PARTICLE_GLOBAL_ALPHA=.9;static PARTICLE_MAX_DISTANCE=.72;static PARTICLE_BASE_RADIUS=.028;canvas;container;button;spinQueueController;spriteUrl;spriteElementsCount;highlightInitialWinningCells;particleColorRgb;particleColorMode;motionProfile;pixelSnapY;debugPerf;adaptiveMobileDpr;isCoarsePointerDevice;spriteImage=null;webglRenderer=null;rafLoop=new J;runtime=ht();width=0;height=0;cellW=0;cellH=0;boardX=0;boardY=0;scriptedCascadeQueue=[];scriptedOutgoingGrid=null;scriptedPendingGrid=null;scriptedOutroStartedAt=0;scriptedOutroElapsedMs=0;outroMotionPlan=null;scriptedOutgoingOffsets=P();scriptedOutgoingOffsetsPrev=P();scriptedIncomingOffsets=P();scriptedIncomingOffsetsPrev=P();scriptedIncomingAlpha=P();scriptedIncomingAlphaPrev=P();scriptedIncomingVisibility=c.createVisibilityGrid("hidden");scriptedIncomingVisibilityPrev=c.createVisibilityGrid("hidden");winningCells=[];winningCellKeys=new Set;grid;particlesPerCell=G;lastRafTime=0;initialHighlightRequestedAt=0;simulationLastNow=0;simulationAccumulatorMs=0;outroInterpolationAlpha=1;isOutroPipelineWarmedUp=!1;isGpuPipelineWarmedUp=!1;perfWindowStartedAt=0;perfFrameCount=0;perfDtSum=0;perfOver20MsCount=0;perfDtSamples=[];perfLogLines=[];mobileDprCap=2;mobilePerfGoodWindows=0;mobilePerfBadWindows=0;static PERF_WINDOW_MS=1500;static PERF_LOG_LIMIT=60;static MOBILE_DPR_CAP_MIN=1.25;static MOBILE_DPR_CAP_MAX=1.5;static MOBILE_DPR_STEP_DOWN=.1;static MOBILE_DPR_STEP_UP=.05;static PRE_SPIN_MS=150;static WIN_EFFECTS_ENVELOPE_TAU_MS=120;static MAX_FRAME_DELTA_MS=250;static WIN_BORDER_ALPHA=.72;static WIN_BORDER_INSET_RATIO=.06;static particleSeedsCache=new Map;constructor(t){this.canvas=t.canvas,this.container=t.container,this.button=t.button,this.spriteUrl=t.sprite,this.spriteElementsCount=Math.max(1,t.spriteElementsCount??X),this.highlightInitialWinningCells=t.highlightInitialWinningCells!==!1,this.spinQueueController=new ot(t.queuedSpinStates),this.particleColorRgb=et(t.particleColorRgb),this.particleColorMode=st(t.particleColorMode),this.motionProfile=z(t.motionProfile??k),this.pixelSnapY=t.pixelSnapY??this.motionProfile.pixelSnapY,this.debugPerf=t.debugPerf===!0,this.adaptiveMobileDpr=t.adaptiveMobileDpr!==!1,this.isCoarsePointerDevice=c.detectCoarsePointerDevice(),this.mobileDprCap=this.isCoarsePointerDevice?c.MOBILE_DPR_CAP_MAX:2,this.grid=t.initialSegments?nt(t.initialSegments,this.spriteElementsCount):H(this.spriteElementsCount)}async init(){if(this.bindEvents(),this.resize(),await this.loadSpriteIfProvided(),!this.spriteImage)throw new Error("sprite is required for WebGL renderer");this.webglRenderer=new pt({canvas:this.canvas,spriteImage:this.spriteImage,spriteElementsCount:this.spriteElementsCount}),this.webglRenderer.resize(this.width,this.height),this.warmUpOutroPipeline(),this.warmUpGpuPipeline(),this.applyInitialHighlightIfNeeded(),requestAnimationFrame(t=>{this.render(t),this.startLoop()})}destroy(){this.unbindEvents(),this.rafLoop.stop(),this.simulationLastNow=0,this.simulationAccumulatorMs=0,ct(this.runtime),this.webglRenderer?.dispose(),this.webglRenderer=null,this.clearWinningCells()}getPerfLogs(){return[...this.perfLogLines]}clearPerfLogs(){this.perfLogLines.length=0}async copyPerfLogsToClipboard(){if(this.perfLogLines.length===0)return!1;const t=this.perfLogLines.join(`
|
|
54
|
+
`),i=navigator.clipboard;if(i&&typeof i.writeText=="function")return await i.writeText(t),!0;const e=document.createElement("textarea");e.value=t,e.setAttribute("readonly",""),e.style.position="fixed",e.style.left="-9999px",document.body.appendChild(e),e.select();const n=document.execCommand("copy");return document.body.removeChild(e),n}spin(){if(this.runtime.isSpinning||this.runtime.queueFinished)return;if(!this.spinQueueController.hasPending()){this.runtime.queueFinished=!0,this.button&&(this.button.disabled=!0);return}const t=this.spinQueueController.consume(),i=t?.highlightWin===!0;this.runtime.isSpinning=!0,this.runtime.phase="preSpin",this.runtime.preSpinStartedAt=performance.now(),this.runtime.activeSpinState=t,this.runtime.shouldHighlightCurrentSpin=i,this.runtime.hasStartedFirstSpin=!0,this.simulationLastNow=0,this.simulationAccumulatorMs=0,this.button&&(this.button.disabled=!0),this.startLoop()}bindEvents(){window.addEventListener("resize",this.resize),this.button?.addEventListener("click",this.onSpinClick)}unbindEvents(){window.removeEventListener("resize",this.resize),this.button?.removeEventListener("click",this.onSpinClick)}onSpinClick=()=>{if(this.runtime.phase==="winFlash"&&(this.runtime.shouldHighlightCurrentSpin||!this.runtime.hasStartedFirstSpin)){this.finishSpinWithUi(!0),this.spinQueueController.hasPending()&&this.spin();return}this.runtime.isSpinning||this.spin()};getNextGrid(t){return t?D(t,this.spriteElementsCount):H(this.spriteElementsCount)}update(t){if(this.runtime.isSpinning){if(this.runtime.phase==="preSpin"){if(t-this.runtime.preSpinStartedAt<c.PRE_SPIN_MS)return;lt(this.runtime,{activeSpinState:this.runtime.activeSpinState,shouldHighlightCurrentSpin:this.runtime.shouldHighlightCurrentSpin,startedAt:t}),this.runtime.preSpinStartedAt=0;const i=this.runtime.activeSpinState?.finaleSequenceRows?this.runtime.activeSpinState.finaleSequenceRows.map(r=>F(r)):this.runtime.activeSpinState?.finaleSequence??[];this.scriptedCascadeQueue=i.map(r=>r.map(o=>[...o])),this.clearWinningCells();const e=this.runtime.activeSpinState?.stopRows?F(this.runtime.activeSpinState.stopRows):this.runtime.activeSpinState?.stopGrid,n=this.getNextGrid(e);this.startOutroTransition(n,t)}if(this.runtime.phase!=="outro"&&this.runtime.phase==="winFlash"){!this.runtime.shouldHighlightCurrentSpin&&t-this.runtime.winFlashStartedAt>=$&&this.finishSpinWithUi();return}}}stepScriptedOutro(t){if(!this.scriptedOutgoingGrid||!this.scriptedPendingGrid){this.finishSpinWithUi();return}this.outroMotionPlan||(this.outroMotionPlan=W({height:this.height,boardY:this.boardY,cellH:this.cellH,motionProfile:this.motionProfile})),this.scriptedOutroElapsedMs+=t;const{allOutgoingDone:i,allIncomingDone:e}=N({elapsedMs:this.scriptedOutroElapsedMs,scriptedOutgoingOffsets:this.scriptedOutgoingOffsets,scriptedIncomingOffsets:this.scriptedIncomingOffsets,scriptedIncomingAlpha:this.scriptedIncomingAlpha,scriptedIncomingVisibility:this.scriptedIncomingVisibility,motionPlan:this.outroMotionPlan});if(!(!i||!e)&&(this.grid=this.scriptedPendingGrid,this.scriptedOutgoingGrid=null,this.scriptedPendingGrid=null,this.outroMotionPlan=null,this.clearWinningCells(),this.resetOutroBuffers(1,"active"),!this.tryStartScriptedCascade(this.scriptedOutroStartedAt+this.scriptedOutroElapsedMs))){if(!this.runtime.shouldHighlightCurrentSpin){this.finishSpinWithUi();return}this.setWinningCells(U(this.grid)),q(this.runtime,this.scriptedOutroStartedAt+this.scriptedOutroElapsedMs),this.runtime.activeSpinState?.callback?.(),this.button&&this.runtime.shouldHighlightCurrentSpin&&this.spinQueueController.hasPending()&&(this.button.disabled=!1)}}tryStartScriptedCascade(t){if(this.scriptedCascadeQueue.length===0)return!1;const i=this.scriptedCascadeQueue.shift();return i?(this.startOutroTransition(D(i,this.spriteElementsCount),t),!0):!1}startOutroTransition(t,i){this.scriptedOutgoingGrid=this.grid.map(e=>[...e]),this.scriptedPendingGrid=t.map(e=>[...e]),this.outroMotionPlan=W({height:this.height,boardY:this.boardY,cellH:this.cellH,motionProfile:this.motionProfile}),this.resetOutroBuffers(0,"hidden"),this.clearWinningCells(),this.runtime.phase="outro",this.scriptedOutroStartedAt=i,this.scriptedOutroElapsedMs=0,this.outroInterpolationAlpha=1}finishSpinWithUi(t=!1){const i=this.runtime.activeSpinState,e=t?void 0:i?.callback,n=this.spinQueueController.hasPending();at(this.runtime,n,performance.now()),this.button&&(this.button.disabled=this.runtime.queueFinished),e?.()}applyInitialHighlightIfNeeded(){this.highlightInitialWinningCells&&(this.setWinningCells(U(this.grid)),this.initialHighlightRequestedAt=performance.now())}warmUpOutroPipeline(){if(this.isOutroPipelineWarmedUp)return;const t=W({height:this.height,boardY:this.boardY,cellH:this.cellH,motionProfile:this.motionProfile}),i=P(),e=P(),n=P(),r=c.createVisibilityGrid("hidden"),o=Math.max(...t.rowStartDelays),h=(p-1)*t.columnStaggerMs,l=[0,this.motionProfile.fixedStepMs,t.incomingStartShift+this.motionProfile.fixedStepMs,t.fallMs+o+h+this.motionProfile.fixedStepMs];for(const u of l)N({elapsedMs:u,scriptedOutgoingOffsets:i,scriptedIncomingOffsets:e,scriptedIncomingAlpha:n,scriptedIncomingVisibility:r,motionPlan:t});this.isOutroPipelineWarmedUp=!0}warmUpGpuPipeline(){if(this.isGpuPipelineWarmedUp)return;const t=this.webglRenderer;if(!t)return;const i=Math.max(8,this.cellW*.2),e=Math.max(8,this.cellH*.2),n=this.boardX+2,r=this.boardY+2;t.beginFrame(),t.drawSprite(0,n,r,i,e,1),t.drawSolidRect(n+i+2,r,i,e,[1,1,1,.35]),t.beginAdditiveBlend(),t.drawSoftCircle(n+i*.5,r+e*.5,Math.max(2,i*.25),[1,.9,.4,.4]),t.endAdditiveBlend(),this.isGpuPipelineWarmedUp=!0}trackOutroPerf(t,i){if(this.debugPerf){if(this.runtime.phase!=="outro"){this.resetPerfWindow();return}this.perfWindowStartedAt<=0&&(this.perfWindowStartedAt=i),this.perfFrameCount+=1,this.perfDtSum+=t,t>20&&(this.perfOver20MsCount+=1),this.perfDtSamples.push(t),!(i-this.perfWindowStartedAt<c.PERF_WINDOW_MS)&&(this.flushPerfWindow(),this.perfWindowStartedAt=i)}}resetPerfWindow(){this.perfWindowStartedAt=0,this.perfFrameCount=0,this.perfDtSum=0,this.perfOver20MsCount=0,this.perfDtSamples.length=0}flushPerfWindow(){if(this.perfFrameCount===0)return;const t=this.perfDtSum/this.perfFrameCount,i=[...this.perfDtSamples].sort((u,a)=>u-a),e=Math.max(0,Math.min(i.length-1,Math.floor(i.length*.95))),n=i[e],r=i[i.length-1],o=t>0?1e3/t:0,h=this.isCoarsePointerDevice?this.mobileDprCap.toFixed(2):"2.00",l=`[CascadingReel][outro perf] avg=${t.toFixed(2)}ms p95=${n.toFixed(2)}ms max=${r.toFixed(2)}ms fps=${o.toFixed(1)} slow>20ms=${this.perfOver20MsCount}/${this.perfFrameCount} dprCap=${h} coarse=${this.isCoarsePointerDevice?"1":"0"}`;this.perfLogLines.push(l),this.perfLogLines.length>c.PERF_LOG_LIMIT&&this.perfLogLines.splice(0,this.perfLogLines.length-c.PERF_LOG_LIMIT),this.adjustMobileDprCap(n,this.perfOver20MsCount,this.perfFrameCount),console.log(l),this.perfFrameCount=0,this.perfDtSum=0,this.perfOver20MsCount=0,this.perfDtSamples.length=0}adjustMobileDprCap(t,i,e){if(!this.adaptiveMobileDpr||!this.isCoarsePointerDevice||e<=0)return;const n=i/e,r=t>19||n>.03,o=t<=17.5&&i===0;let h=this.mobileDprCap;r?(this.mobilePerfBadWindows+=1,this.mobilePerfGoodWindows=0,this.mobilePerfBadWindows>=2&&(h=Math.max(c.MOBILE_DPR_CAP_MIN,this.mobileDprCap-c.MOBILE_DPR_STEP_DOWN),this.mobilePerfBadWindows=0)):o?(this.mobilePerfGoodWindows+=1,this.mobilePerfBadWindows=0,this.mobilePerfGoodWindows>=4&&(h=Math.min(c.MOBILE_DPR_CAP_MAX,this.mobileDprCap+c.MOBILE_DPR_STEP_UP),this.mobilePerfGoodWindows=0)):(this.mobilePerfGoodWindows=0,this.mobilePerfBadWindows=0),!(Math.abs(h-this.mobileDprCap)<.001)&&(this.mobileDprCap=h,this.resize())}render(t){if(!this.webglRenderer)return;this.initialHighlightRequestedAt>0&&t-this.initialHighlightRequestedAt>=j&&(q(this.runtime,this.initialHighlightRequestedAt),this.runtime.winEffectsEnvelope=1,this.initialHighlightRequestedAt=0,this.button&&(this.button.disabled=!1));const i=this.runtime.phase==="preSpin"?0:this.runtime.phase==="winFlash"?1:0;if(this.lastRafTime>0){const h=Math.min(t-this.lastRafTime,50);this.trackOutroPerf(h,t);const l=1-Math.exp(-h/c.WIN_EFFECTS_ENVELOPE_TAU_MS);this.runtime.winEffectsEnvelope+=(i-this.runtime.winEffectsEnvelope)*l}else this.resetPerfWindow();this.lastRafTime=t,this.webglRenderer.beginFrame();const e=this.runtime.phase==="winFlash"||this.runtime.phase==="preSpin"||this.initialHighlightRequestedAt>0&&this.winningCells.length>0;this.runtime.phase==="outro"&&this.scriptedOutgoingGrid&&this.scriptedPendingGrid?(this.drawGridInterpolated(this.scriptedOutgoingGrid,this.scriptedOutgoingOffsetsPrev,this.scriptedOutgoingOffsets,this.outroInterpolationAlpha,e),this.drawGridInterpolated(this.scriptedPendingGrid,this.scriptedIncomingOffsetsPrev,this.scriptedIncomingOffsets,this.outroInterpolationAlpha,e,this.scriptedIncomingAlphaPrev,this.scriptedIncomingAlpha,this.scriptedIncomingVisibility)):this.drawGrid(this.grid,null,e);const n=this.initialHighlightRequestedAt>0?"winFlash":this.runtime.phase,r=this.initialHighlightRequestedAt>0?this.initialHighlightRequestedAt:this.runtime.winFlashStartedAt,o=this.initialHighlightRequestedAt>0?1:this.runtime.winEffectsEnvelope;this.drawWinningEffects({now:t,phase:n,winFlashStartedAt:r,winEffectsEnvelope:o})}isWinningCell=(t,i)=>this.winningCellKeys.has(`${t}:${i}`);getRowCompactOffset(t){return(V[t]??0)*this.cellH}applyPixelSnapY(t){return this.pixelSnapY==="integer"?Math.round(t):this.pixelSnapY==="half"?Math.round(t*2)/2:t}drawGrid(t,i,e){this.drawGridWithSampler({grid:t,skipWinningCells:e,sampleOffsetY:(n,r)=>i?i[n][r]:0,sampleAlpha:()=>1,isVisible:()=>!0})}drawGridInterpolated(t,i,e,n,r,o,h,l){this.drawGridWithSampler({grid:t,skipWinningCells:r,sampleOffsetY:(u,a)=>i[u][a]+(e[u][a]-i[u][a])*n,sampleAlpha:(u,a)=>o&&h?o[u][a]+(h[u][a]-o[u][a])*n:1,isVisible:(u,a)=>!l||l[u][a]!=="hidden"})}drawGridWithSampler(t){const i=this.webglRenderer;if(i)for(let e=0;e<p;e+=1){const n=this.boardX+e*this.cellW;for(let r=0;r<d;r+=1){if(t.skipWinningCells&&this.isWinningCell(e,r)||!t.isVisible(e,r))continue;const o=t.sampleOffsetY(e,r),h=this.applyPixelSnapY(this.boardY+r*this.cellH+o+this.getRowCompactOffset(r));if(h>this.height||h+this.cellH<0)continue;const l=t.sampleAlpha(e,r);l<=0||i.drawSprite(t.grid[e][r],n,h,this.cellW,this.cellH,l)}}}drawWinningEffects(t){const i=this.webglRenderer;if(!i||this.winningCells.length===0||t.phase!=="winFlash"&&t.phase!=="preSpin")return;const e=Math.max(0,Math.min(1,t.winEffectsEnvelope)),n=Math.max(0,t.now-t.winFlashStartedAt),r=n%y/y,o=1+Math.sin(r*Math.PI*2)*K*e,h=Math.max(1,this.cellW*c.WIN_BORDER_INSET_RATIO),l=Math.max(1,this.cellW*.03),u=this.runtime.phase==="winFlash"&&this.runtime.shouldHighlightCurrentSpin&&this.runtime.hasStartedFirstSpin;for(const a of this.winningCells){const f=this.boardX+a.col*this.cellW,g=this.boardY+a.row*this.cellH+this.getRowCompactOffset(a.row),S=this.grid[a.col][a.row],M=c.WIN_BORDER_ALPHA*e,m=this.particleColorMode==="rainbow"?c.hslToRgb01((n*.2+a.col*36+a.row*22)%360,.96,.64):[this.particleColorRgb[0]/255,this.particleColorRgb[1]/255,this.particleColorRgb[2]/255],I=this.cellW*o,E=this.cellH*o,b=(this.cellW-I)*.5,Y=(this.cellH-E)*.5;i.drawSprite(S,f+b,g+Y,I,E,1);const R=f+h,_=g+h,O=this.cellW-h*2,C=this.cellH-h*2;O<=l*2||C<=l*2||(i.drawSolidRect(R,_,O,l,[m[0],m[1],m[2],M]),i.drawSolidRect(R,_+C-l,O,l,[m[0],m[1],m[2],M]),i.drawSolidRect(R,_,l,C,[m[0],m[1],m[2],M]),i.drawSolidRect(R+O-l,_,l,C,[m[0],m[1],m[2],M]),u&&this.drawCellParticleBurst({renderer:i,cell:a,centerX:f+this.cellW*.5,centerY:g+this.cellH*.5,elapsed:n,envelope:e}))}}drawCellParticleBurst(t){const i=Math.min(this.cellW,this.cellH)*c.PARTICLE_MAX_DISTANCE,e=Math.min(this.cellW,this.cellH)*c.PARTICLE_BASE_RADIUS,n=c.getParticleSeeds(t.cell.col,t.cell.row),r=[this.particleColorRgb[0]/255,this.particleColorRgb[1]/255,this.particleColorRgb[2]/255];t.renderer.beginAdditiveBlend();for(let o=0;o<this.particlesPerCell;o+=1){const h=n[o],l=h.phaseOffset*x,u=t.elapsed-l;if(u<0)continue;const a=u%x/x,f=h.seedA*Math.PI*2,g=i*a*(.35+h.seedB*.65),S=t.centerX+Math.cos(f)*g,M=t.centerY+Math.sin(f)*g,m=.7+.9*Math.max(0,Math.sin((t.elapsed*.012+h.twinkleSeed*2)*Math.PI*2)),I=Math.max(1,e*(.55+h.seedC*.6)*(1-a*.5)),E=Math.max(0,Math.min(1,(.9+m*.2)*c.PARTICLE_GLOBAL_ALPHA*t.envelope));if(E<=0)continue;const b=this.particleColorMode==="rainbow"?c.getRainbowParticleColor(t.elapsed,t.cell.col,t.cell.row,h.seedA):r;t.renderer.drawSoftCircle(S,M,I,[b[0],b[1],b[2],E])}t.renderer.endAdditiveBlend()}static hslToRgb01(t,i,e){const n=(t%360+360)%360,r=Math.max(0,Math.min(1,i)),o=Math.max(0,Math.min(1,e)),h=(1-Math.abs(2*o-1))*r,l=n/60,u=h*(1-Math.abs(l%2-1));let a=0,f=0,g=0;l>=0&&l<1?(a=h,f=u):l<2?(a=u,f=h):l<3?(f=h,g=u):l<4?(f=u,g=h):l<5?(a=u,g=h):(a=h,g=u);const S=o-h*.5;return[a+S,f+S,g+S]}static getRainbowParticleColor(t,i,e,n){const r=(n*360+t*.24+i*38+e*22)%360,o=360/c.RAINBOW_HUE_BUCKETS,h=Math.floor(r/o)*o;return c.hslToRgb01(h,.98,.64)}static detectCoarsePointerDevice(){if(typeof window>"u")return!1;const t=typeof window.matchMedia=="function"&&window.matchMedia("(pointer: coarse)").matches,i=typeof navigator<"u"&&typeof navigator.maxTouchPoints=="number"?navigator.maxTouchPoints:0;return t||i>0}static hash01(t,i,e,n){const r=Math.sin(t*127.1+i*311.7+e*74.7+n*19.3)*43758.5453;return r-Math.floor(r)}static getParticleSeeds(t,i){const e=`${t},${i}`,n=c.particleSeedsCache.get(e);if(n)return n;const r=[];for(let o=0;o<G;o+=1)r.push({seedA:c.hash01(t,i,o,1),seedB:c.hash01(t,i,o,2),seedC:c.hash01(t,i,o,3),phaseOffset:c.hash01(t,i,o,4),twinkleSeed:c.hash01(t,i,o,5)});return c.particleSeedsCache.set(e,r),r}clearWinningCells(){this.winningCells=[],this.winningCellKeys.clear()}setWinningCells(t){this.winningCells=t,this.winningCellKeys.clear();for(const i of t)this.winningCellKeys.add(`${i.col}:${i.row}`)}resize=()=>{const t=this.container.getBoundingClientRect(),i=this.isCoarsePointerDevice?this.mobileDprCap:2,e=Math.max(1,Math.min(window.devicePixelRatio||1,i)),n=Math.max(300,Math.floor(t.width*e));this.width=n,this.height=n;const r=Math.floor(Math.min(this.width/p,this.height/d));this.cellW=r,this.cellH=r,this.boardX=Math.floor((this.width-this.cellW*p)/2),this.boardY=Math.floor((this.height-this.cellH*d)/2),this.canvas.width=this.width,this.canvas.height=this.height,this.webglRenderer?.resize(this.width,this.height)};async loadSpriteIfProvided(){if(!this.spriteUrl)return;const t=new Image;t.decoding="async",t.src=this.spriteUrl;try{await t.decode(),this.spriteImage=t}catch{this.spriteImage=null}}advanceSimulation(t){if(this.simulationLastNow<=0){this.simulationLastNow=t,this.update(t);return}const i=Math.max(0,Math.min(t-this.simulationLastNow,c.MAX_FRAME_DELTA_MS));if(this.simulationLastNow=t,this.update(t),this.runtime.phase!=="outro"){this.outroInterpolationAlpha=1;return}this.snapshotOutroState(),this.simulationAccumulatorMs+=i;const e=this.motionProfile.fixedStepMs;let n=0;for(;this.simulationAccumulatorMs>=e&&n<this.motionProfile.maxCatchUpStepsPerFrame&&this.runtime.phase==="outro";)this.stepScriptedOutro(e),this.simulationAccumulatorMs-=e,n+=1;if(this.runtime.phase!=="outro"){this.outroInterpolationAlpha=1;return}this.outroInterpolationAlpha=Math.max(0,Math.min(1,this.simulationAccumulatorMs/e))}snapshotOutroState(){this.copyOffsets(this.scriptedOutgoingOffsetsPrev,this.scriptedOutgoingOffsets),this.copyOffsets(this.scriptedIncomingOffsetsPrev,this.scriptedIncomingOffsets),this.copyOffsets(this.scriptedIncomingAlphaPrev,this.scriptedIncomingAlpha),this.copyVisibility(this.scriptedIncomingVisibilityPrev,this.scriptedIncomingVisibility)}copyOffsets(t,i){for(let e=0;e<p;e+=1)for(let n=0;n<d;n+=1)t[e][n]=i[e][n]}copyVisibility(t,i){for(let e=0;e<p;e+=1)for(let n=0;n<d;n+=1)t[e][n]=i[e][n]}resetOutroBuffers(t,i){w(this.scriptedOutgoingOffsets,0),w(this.scriptedIncomingOffsets,0),w(this.scriptedOutgoingOffsetsPrev,0),w(this.scriptedIncomingOffsetsPrev,0),w(this.scriptedIncomingAlpha,t),w(this.scriptedIncomingAlphaPrev,t),this.fillVisibilityGrid(this.scriptedIncomingVisibility,i),this.fillVisibilityGrid(this.scriptedIncomingVisibilityPrev,i)}static createVisibilityGrid(t){return Array.from({length:p},()=>Array.from({length:d},()=>t))}fillVisibilityGrid(t,i){for(let e=0;e<p;e+=1)for(let n=0;n<d;n+=1)t[e][n]=i}startLoop(){this.rafLoop.isRunning()||this.rafLoop.start(t=>(this.advanceSimulation(t),this.render(t),this.shouldKeepAnimating()))}shouldKeepAnimating(){return this.runtime.isSpinning||this.initialHighlightRequestedAt>0?!0:this.runtime.winEffectsEnvelope>.001}}exports.CascadingReel=c;
|
|
54
55
|
//# sourceMappingURL=index.cjs.js.map
|