artsite/dist/assets/main-DOADjK2a.js

import"./modulepreload-polyfill-B5Qt9EMX.js";import{L as F,c as S,a as _,C as b,g as tt,m as et,f as w,r as j,b as it,F as ot,l as rt,d as st,e as at,P as nt,B as ct,h as lt,i as ht,W as dt,j as ut,k as I,n as ft}from"./WorkLayer-CuLsTjxY.js";class mt extends F{constructor(t,i,e,a,s,r=4294901760,c=1){super(),this.scene=t,this.x=i,this.y=e,this.width=a,this.height=s,this.color=r,this.lineWidth=c,this.vertexShaderCode=`
    attribute vec2 a_position;
    uniform mat4 u_matrix;

    void main() {
      gl_Position = u_matrix * vec4(a_position, 0, 1);
    }

  `,this.fragmentShaderCode=`
    precision mediump float;
    uniform vec4 u_color;

    void main() {
      gl_FragColor = u_color;
    }
  
  `;const n=t.gl;this.program=S(n,_(n,n.VERTEX_SHADER,this.vertexShaderCode),_(n,n.FRAGMENT_SHADER,this.fragmentShaderCode)),this.aPositionLoc=n.getAttribLocation(this.program,"a_position"),this.uMatrixLoc=n.getUniformLocation(this.program,"u_matrix"),this.uColorLoc=n.getUniformLocation(this.program,"u_color"),this.vertexArray=new Float32Array([i,e,i,e+s,i+a,e+s,i+a,e]),this.vertexBuffer=n.createBuffer(),n.bindBuffer(n.ARRAY_BUFFER,this.vertexBuffer),n.bufferData(n.ARRAY_BUFFER,this.vertexArray,n.STATIC_DRAW),this.colorArray=new b(r).toFloatArray()}draw(){const t=this.scene.gl;t.useProgram(this.program),t.enableVertexAttribArray(this.aPositionLoc),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.vertexAttribPointer(this.aPositionLoc,2,t.FLOAT,!1,0,0),t.uniformMatrix4fv(this.uMatrixLoc,!1,this.scene.drawMatrix),t.uniform4fv(this.uColorLoc,this.colorArray),t.lineWidth(this.lineWidth),t.drawArrays(t.LINE_LOOP,0,4)}}class gt extends F{constructor(t,i,e,a,s,r=4294901760,c=30){super(),this.scene=t,this.x=i,this.y=e,this.width=a,this.height=s,this.color=r,this.lineWidth=c,this.vertexShaderCode=`
    attribute vec2 a_position;
    uniform mat4 u_matrix;

    void main() {
      gl_Position = u_matrix * vec4(a_position, 0, 1);
    }
  `,this.fragmentShaderCode=`
    precision mediump float;
    uniform vec4 u_color;

    void main() {
      gl_FragColor = u_color;
    }
  `;const n=t.gl;this.program=S(n,_(n,n.VERTEX_SHADER,this.vertexShaderCode),_(n,n.FRAGMENT_SHADER,this.fragmentShaderCode)),this.aPositionLoc=n.getAttribLocation(this.program,"a_position"),this.uMatrixLoc=n.getUniformLocation(this.program,"u_matrix"),this.uColorLoc=n.getUniformLocation(this.program,"u_color"),this.vertexArray=this.generateThickBorderVertices(i,e,a,s,c),this.vertexBuffer=n.createBuffer(),n.bindBuffer(n.ARRAY_BUFFER,this.vertexBuffer),n.bufferData(n.ARRAY_BUFFER,this.vertexArray,n.STATIC_DRAW),this.colorArray=new b(r).toFloatArray()}generateThickBorderVertices(t,i,e,a,s){const r=s/2;return new Float32Array([t-r,i-r,t+e+r,i-r,t-r,i+r,t+e+r,i+r,t+e-r,i-r,t+e+r,i-r,t+e-r,i+a+r,t+e+r,i+a+r,t+e+r,i+a-r,t-r,i+a-r,t+e+r,i+a+r,t-r,i+a+r,t+r,i+a,t-r,i+a,t+r,i,t-r,i])}draw(){const t=this.scene.gl;t.useProgram(this.program),t.enableVertexAttribArray(this.aPositionLoc),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.vertexAttribPointer(this.aPositionLoc,2,t.FLOAT,!1,0,0),t.uniformMatrix4fv(this.uMatrixLoc,!1,this.scene.drawMatrix),t.uniform4fv(this.uColorLoc,this.colorArray),t.drawArrays(t.TRIANGLE_STRIP,0,16)}}var B=(o=>(o[o.ColorDone=0]="ColorDone",o[o.AllDone=1]="AllDone",o[o.Hint=2]="Hint",o))(B||{});class vt{constructor(){this.audioColorDone=new Audio("/assets/sound/section_done.mp3"),this.audioAllDone=new Audio("/assets/sound/color_done_02.mp3"),this.audioHint=new Audio("/assets/sound/sound_hint.mp3")}playAudio(t){switch(console.log(`play sound ${t}`),t){case 0:this.audioColorDone.play();break;case 1:this.audioAllDone.play();break;case 2:this.audioHint.play();break}}}class pt{constructor(t,i,e,a,s,r,c){this.x=i,this.y=e,this.r=a,this.dx=s,this.dy=r,this.color=c,this.a=1,this.ctx=t}draw(){let t=this.ctx;t.save(),t.globalAlpha=this.a,t.fillStyle=this.color,t.beginPath(),t.arc(this.x,this.y,this.r,0,Math.PI*2,!1),t.fill(),t.restore()}update(){this.draw(),this.a-=1/120,this.x+=this.dx,this.y+=this.dy}}class xt{constructor(t,i,e,a){this.particles=[],this.canvas=t,this.canvas.width=Math.floor(this.canvas.offsetWidth*window.devicePixelRatio),this.canvas.height=Math.floor(this.canvas.offsetHeight*window.devicePixelRatio),this.ctx=this.canvas.getContext("2d"),this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.initParticles(i,e),this.onend=a}explode(){if(this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.particles.forEach((t,i)=>{t.a<=0?this.particles.splice(i,1):t.update()}),this.particles.length==0){this.onend&&this.onend();return}requestAnimationFrame(this.explode.bind(this))}initParticles(t,i){let e=tt(t,i);for(let a=0;a<i;a++){let s=this.canvas.width/2+(Math.random()-.5)*(Math.random()*10),r=this.canvas.height/2+(Math.random()-.5)*(Math.random()*10),c=(Math.floor(Math.random()*4)+1)*window.devicePixelRatio,n=(Math.random()-.5)*(Math.random()*8)*window.devicePixelRatio,h=(Math.random()-.5)*(Math.random()*6)*window.devicePixelRatio,l=e[a],d=new pt(this.ctx,s,r,c,n,h,l);this.particles.push(d)}}}class At{constructor(t,i){this.gl=t,this.fillerData=i,this.vertexShaderCode=`
    attribute vec2 a_position;
    attribute vec2 a_texCoord;
    attribute vec4 a_colorId;
    uniform mat4 u_matrix;
    varying vec2 v_texCoord;
    varying vec4 v_colorId;
    void main() {
      gl_Position = u_matrix * vec4(a_position, 0, 1);
      v_texCoord = a_texCoord;
      v_colorId = a_colorId;
    }

  `,this.fragmentShaderCode=`
    precision mediump float;
    uniform sampler2D u_map;
    varying vec2 v_texCoord;
    varying vec4 v_colorId;
    void main() {
      vec4 mapColor = texture2D(u_map, v_texCoord);
      float dist = distance(mapColor, v_colorId);
      if(dist < 0.001) {
        gl_FragColor = vec4(1, 1, 0, 1);
      }else{
        gl_FragColor = vec4(0, 0, 0, 0);
      }
    }
  
  `,this.pendingAreas=[],this.program=S(t,_(t,t.VERTEX_SHADER,this.vertexShaderCode),_(t,t.FRAGMENT_SHADER,this.fragmentShaderCode)),this.aPositionLoc=t.getAttribLocation(this.program,"a_position"),this.aTexcoordLoc=t.getAttribLocation(this.program,"a_texCoord"),this.aColorIdLoc=t.getAttribLocation(this.program,"a_colorId"),this.uMatrixLoc=t.getUniformLocation(this.program,"u_matrix"),this.positionBuffer=t.createBuffer(),this.texCoordBuffer=t.createBuffer(),this.colorIdBuffer=t.createBuffer(),this.matrix=et.projectionNoflipY(i.width,i.height),this.texture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.texture),t.texImage2D(t.TEXTURE_2D,0,t.RGB,this.fillerData.width,this.fillerData.height,0,t.RGB,t.UNSIGNED_SHORT_5_6_5,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.fb=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.fb),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.texture,0),t.bindFramebuffer(t.FRAMEBUFFER,null)}get width(){return this.fillerData.width}get height(){return this.fillerData.height}dispose(){this.gl.deleteTexture(this.texture),this.gl.deleteFramebuffer(this.fb),this.gl.deleteBuffer(this.positionBuffer),this.gl.deleteBuffer(this.texCoordBuffer),this.gl.deleteBuffer(this.colorIdBuffer),this.gl.deleteProgram(this.program)}addArea(t){this.pendingAreas.push(t)}flush(t=!1){if(this.pendingAreas.length<=0)return;const i=new Float32Array(12*this.pendingAreas.length),e=new Float32Array(12*this.pendingAreas.length),a=new Float32Array(24*this.pendingAreas.length);var s=0,r=0;const c=this.fillerData.width,n=this.fillerData.height;for(var h=0;h<this.pendingAreas.length;h++){var l=this.pendingAreas[h];w(i,s,l.rect.x,l.rect.y,l.rect.width,l.rect.height),w(e,s,l.rect.x/c,l.rect.y/n,l.rect.width/c,l.rect.height/n);var d=new b(l.id);d.fillFloatArray(a,r,6),s+=12,r+=24}const u=this.gl;u.bindBuffer(u.ARRAY_BUFFER,this.positionBuffer),u.bufferData(u.ARRAY_BUFFER,i,u.STATIC_DRAW),u.bindBuffer(u.ARRAY_BUFFER,this.texCoordBuffer),u.bufferData(u.ARRAY_BUFFER,e,u.STATIC_DRAW),u.bindBuffer(u.ARRAY_BUFFER,this.colorIdBuffer),u.bufferData(u.ARRAY_BUFFER,a,u.STATIC_DRAW),this.draw(this.pendingAreas.length*6,t),this.pendingAreas=[]}draw(t,i=!1){const e=this.gl;e.bindFramebuffer(e.FRAMEBUFFER,this.fb),console.log("mask.fb=",this.fb),e.useProgram(this.program),e.viewport(0,0,this.fillerData.width,this.fillerData.height),i&&(e.clearColor(0,0,0,0),e.clear(e.COLOR_BUFFER_BIT)),e.enableVertexAttribArray(this.aPositionLoc),e.bindBuffer(e.ARRAY_BUFFER,this.positionBuffer),e.vertexAttribPointer(this.aPositionLoc,2,e.FLOAT,!1,0,0),e.enableVertexAttribArray(this.aTexcoordLoc),e.bindBuffer(e.ARRAY_BUFFER,this.texCoordBuffer),e.vertexAttribPointer(this.aTexcoordLoc,2,e.FLOAT,!1,0,0),e.enableVertexAttribArray(this.aColorIdLoc),e.bindBuffer(e.ARRAY_BUFFER,this.colorIdBuffer),e.vertexAttribPointer(this.aColorIdLoc,4,e.FLOAT,!1,0,0),e.uniformMatrix4fv(this.uMatrixLoc,!1,this.matrix),e.bindTexture(e.TEXTURE_2D,this.fillerData.mapTexure),e.drawArrays(e.TRIANGLES,0,t),e.bindFramebuffer(e.FRAMEBUFFER,null)}}class _t extends F{constructor(t,i){super(),this.scene=t,this.fillerData=i,this.vertexShaderCode=`
    attribute vec2 a_position;
    attribute vec2 a_texCoord;
    uniform mat4 u_matrix;
    varying vec2 v_texCoord;

    void main() {
      gl_Position = u_matrix * vec4(a_position, 0, 1);
      v_texCoord = a_texCoord;
    }

  `,this.fragmentShaderCode=`
    precision mediump float;
    uniform sampler2D u_hint;
    uniform sampler2D u_mask;
    uniform vec2 u_pixelSize;
    uniform vec4 u_scale;
    uniform vec4 u_colorDark;
    uniform vec4 u_colorLight;
    
    varying vec2 v_texCoord;


    const float w1 = 0.147761;
    const float w2 = 0.118318; 
    const float w3 = 0.0947416; 
    
    
    vec4 GaussianBlur(in sampler2D image, in vec2 texCoord, in vec2 pixelSize) {
      vec4 C00 = texture2D(image, texCoord + vec2(-pixelSize.x, -pixelSize.y)) * w3 ;
      vec4 C01 = texture2D(image, texCoord + vec2(0.0, -pixelSize.y)) * w2;
      vec4 C02 = texture2D(image, texCoord + vec2(pixelSize.x, -pixelSize.y)) * w3 ;
    
      vec4 C10 = texture2D(image, texCoord + vec2(-pixelSize.x, 0.0)) * w2;
      vec4 C11 = texture2D(image, texCoord + vec2(0.0, 0.0)) * w1;
      vec4 C12 = texture2D(image, texCoord + vec2(pixelSize.x, 0.0)) * w2;
    
      vec4 C20 = texture2D(image, texCoord + vec2(-pixelSize.x, pixelSize.y)) * w3;
      vec4 C21 = texture2D(image, texCoord + vec2(0.0, pixelSize.y)) * w2;
      vec4 C22 = texture2D(image, texCoord + vec2(pixelSize.x, pixelSize.y)) * w3;
    
      return 
        C00 + C01 + C02 +
        C10 + C11 + C12 +
        C20 + C21 + C22 ;
    }


    void main() {
      vec4 hint = texture2D(u_hint, v_texCoord);
      vec4 mask = GaussianBlur(u_mask, v_texCoord, u_pixelSize);
      if(mask.r >= 0.4) {
          //gl_FragColor = hint;
            if(hint.r > 0.5) {
                gl_FragColor = u_colorDark;
                //gl_FragColor = vec4(1, 0, 0, 1);
            }else{
                gl_FragColor = u_colorLight;
                //gl_FragColor = vec4(0, 1, 0, 1);
            }
      }else {
            gl_FragColor = vec4(0,0,0,0);
      }
    }
  
  `,this.colorDarkArray=new Float32Array(4),this.colorLightArray=new Float32Array(4),this.fillerData.addListener(this);const e=t.gl;this.program=S(e,_(e,e.VERTEX_SHADER,this.vertexShaderCode),_(e,e.FRAGMENT_SHADER,this.fragmentShaderCode)),this.aPositionLoc=e.getAttribLocation(this.program,"a_position"),this.aTexcoordLoc=e.getAttribLocation(this.program,"a_texCoord"),this.uMatrixLoc=e.getUniformLocation(this.program,"u_matrix"),this.uScaleLoc=e.getUniformLocation(this.program,"u_scale"),this.uPixelSizeLoc=e.getUniformLocation(this.program,"u_pixelSize"),this.uHintLoc=e.getUniformLocation(this.program,"u_hint"),this.uMaskLoc=e.getUniformLocation(this.program,"u_mask"),this.uColorDarkLoc=e.getUniformLocation(this.program,"u_colorDark"),this.uColorLightLoc=e.getUniformLocation(this.program,"u_colorLight"),this.vertexArray=j(0,0,i.width,i.height),this.texCoordArray=j(0,0,1,1),this.vertexBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,this.vertexBuffer),e.bufferData(e.ARRAY_BUFFER,this.vertexArray,e.STATIC_DRAW),this.texcoordBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,this.texcoordBuffer),e.bufferData(e.ARRAY_BUFFER,this.texCoordArray,e.STATIC_DRAW),this.mask=new At(e,i),this.hintTexture=this.createHintTexture(e,i.width,i.height),this.fillerData.currentGroup&&this.setGroup(this.fillerData.currentGroup)}dispose(){this.mask.dispose();let t=this.scene.gl;t.deleteProgram(this.program),t.deleteBuffer(this.vertexBuffer),t.deleteBuffer(this.texcoordBuffer),t.deleteTexture(this.hintTexture)}createHintTexture(t,i,e){let a=t.createTexture();t.bindTexture(t.TEXTURE_2D,a);const s=10,r=Math.floor(i/s),c=Math.floor(e/s),n=new Uint8Array(r*c);for(var h=0;h<c;h++){let d=h%2==0;for(var l=0;l<r;l++){d=!d;let u=h*r+l;n[u]=d?0:255}}return t.pixelStorei(t.UNPACK_ALIGNMENT,1),t.texImage2D(t.TEXTURE_2D,0,t.LUMINANCE,r,c,0,t.LUMINANCE,t.UNSIGNED_BYTE,n),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),a}setGroup(t){for(var i=0;i<t.areas.length;i++)this.mask.addArea(t.areas[i]);this.mask.flush(!0),this.scene.invalidate()}onGroupChange(t){var i;console.log("onGroupChange",t),t!=null&&this.setGroup(t),(i=this.fillerData.callback)==null||i.onSwitchGroup()}draw(){const t=this.scene.gl;t.useProgram(this.program),t.enableVertexAttribArray(this.aPositionLoc),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.vertexAttribPointer(this.aPositionLoc,2,t.FLOAT,!1,0,0),t.enableVertexAttribArray(this.aTexcoordLoc),t.bindBuffer(t.ARRAY_BUFFER,this.texcoordBuffer),t.vertexAttribPointer(this.aTexcoordLoc,2,t.FLOAT,!1,0,0),t.uniformMatrix4fv(this.uMatrixLoc,!1,this.scene.drawMatrix),t.uniform1f(this.uScaleLoc,this.scene.userMat[0]),t.uniform2f(this.uPixelSizeLoc,1/this.mask.width,1/this.mask.height),new b(this.fillerData.config.hintColorDark).fillFloatArray(this.colorDarkArray,0),new b(this.fillerData.config.hintColorLight).fillFloatArray(this.colorLightArray,0),t.uniform4fv(this.uColorDarkLoc,this.colorDarkArray),t.uniform4fv(this.uColorLightLoc,this.colorLightArray),t.uniform1i(this.uHintLoc,0),t.uniform1i(this.uMaskLoc,1),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,this.hintTexture),t.activeTexture(t.TEXTURE1),t.bindTexture(t.TEXTURE_2D,this.mask.texture),t.drawArrays(t.TRIANGLES,0,6)}toString(){return"HintLayer()"}}class yt extends F{constructor(t,i,e,a){super(),this.scene=t,this.image=i,this.fillerData=e,this.bestFitScale=a,this.vertexShaderCode=`
    attribute vec2 a_position;
    attribute vec2 a_texCoord;
    uniform mat4 u_matrix;
    varying vec2 v_texCoord;

    void main() {
      gl_Position = u_matrix * vec4(a_position, 0, 1);
      v_texCoord = a_texCoord;
    }

  `,this.fragmentShaderCode=`
    precision mediump float;
    uniform sampler2D u_image;
    varying vec2 v_texCoord;

    void main() {
      vec4 color = texture2D(u_image, v_texCoord);
      gl_FragColor = color;
    }
  
  `;const s=t.gl;this.program=S(s,_(s,s.VERTEX_SHADER,this.vertexShaderCode),_(s,s.FRAGMENT_SHADER,this.fragmentShaderCode)),this.aPositionLoc=s.getAttribLocation(this.program,"a_position"),this.aTexcoordLoc=s.getAttribLocation(this.program,"a_texCoord"),this.uMatrixLoc=s.getUniformLocation(this.program,"u_matrix"),this.uScaleLoc=s.getUniformLocation(this.program,"u_scale"),this.uTexSizeLoc=s.getUniformLocation(this.program,"u_texSize"),this.texture=it(s,i,s.LINEAR);const r=[],c=i.width/10/i.height,n=Array(4);for(var h=0;h<4;h++)n[h]=2/Math.sqrt(h*h*c*c+1);const l=1.2,d=.8;var u=0;const m=e.config,y=e.data.areaGroups;for(var h=0;h<y.length;h++)for(var E=y[h],f=0;f<E.areas.length;f++){var p=E.areas[f];if(!p.colored){u+=p.center.label.length,r.push(p.center);var x=p.center.radius*n[p.center.label.length],v=x*m.maxScale/m.visibleFontSize;v<=1?v*=l:v>1&&v<1/d?v=(1/d-l)/(1/d-1)*(v-1)+l:v>=1/d&&(v=d*v+(1/d-1)),x=v*m.visibleFontSize/m.maxScale,x*this.bestFitScale>m.visibleFontSize*1.2&&(x=m.visibleFontSize*1.2/a),p.center.fontHeight=x}}r.sort((T,L)=>L.fontHeight-T.fontHeight),this.digits=u,this.centers=r,this.vertexArray=new Float32Array(u*12),this.texCoordArray=new Float32Array(u*12);for(var C=0,h=0;h<r.length;h++){var R=r[h];this.fillVertexArray(this.vertexArray,this.texCoordArray,C,R,c),C+=12*R.label.length,R.offset=C/2}this.vertexBuffer=s.createBuffer(),s.bindBuffer(s.ARRAY_BUFFER,this.vertexBuffer),s.bufferData(s.ARRAY_BUFFER,this.vertexArray,s.STATIC_DRAW),this.texcoordBuffer=s.createBuffer(),s.bindBuffer(s.ARRAY_BUFFER,this.texcoordBuffer),s.bufferData(s.ARRAY_BUFFER,this.texCoordArray,s.STATIC_DRAW)}dispose(){let t=this.scene.gl;t.deleteProgram(this.program),t.deleteBuffer(this.vertexBuffer),t.deleteBuffer(this.texcoordBuffer),t.deleteTexture(this.texture)}draw(){var t=0;const i=this.fillerData.config.maxScale-.2,e=this.scene.userMat[0];if(e>i)t=this.vertexArray.length/2;else for(var a=this.centers.length-1;a>=0;a--)if(this.centers[a].fontHeight*e>this.fillerData.config.visibleFontSize){t=this.centers[a].offset;break}const s=this.scene.gl;s.useProgram(this.program),s.enableVertexAttribArray(this.aPositionLoc),s.bindBuffer(s.ARRAY_BUFFER,this.vertexBuffer),s.vertexAttribPointer(this.aPositionLoc,2,s.FLOAT,!1,0,0),s.enableVertexAttribArray(this.aTexcoordLoc),s.bindBuffer(s.ARRAY_BUFFER,this.texcoordBuffer),s.vertexAttribPointer(this.aTexcoordLoc,2,s.FLOAT,!1,0,0),s.uniformMatrix4fv(this.uMatrixLoc,!1,this.scene.drawMatrix),s.uniform1f(this.uScaleLoc,this.scene.userMat[0]),s.activeTexture(s.TEXTURE0),s.bindTexture(s.TEXTURE_2D,this.texture),s.drawArrays(s.TRIANGLES,0,t)}fillVertexArray(t,i,e,a,s){const r=a.label,c=r.length,n=a.fontHeight*s,h=a.fontHeight,l=n*c,d=a.x-l/2,u=a.y-h/2;for(var m=0;m<c;m++){w(t,e+12*m,d+m*n,u,n,h);const y=parseInt(r.substring(m,m+1));w(i,e+12*m,y*.1,0,.1,1)}}toString(){return"NumberLayer()"}}class Et{constructor(t={}){this.startTime=0,this.overlay=document.getElementById("loading-overlay"),this.config={minDisplayTime:500,fadeDuration:300,...t}}show(){this.startTime=Date.now(),this.overlay.classList.add("active")}async hide(){const t=Date.now()-this.startTime,i=Math.max(this.config.minDisplayTime-t,0);await new Promise(e=>setTimeout(e,i)),this.overlay.classList.remove("active"),await new Promise(e=>setTimeout(e,this.config.fadeDuration))}async wrap(t){try{return this.show(),await t}finally{await this.hide()}}}function k(o,t){if(!(o instanceof t))throw new TypeError("Cannot call a class as a function")}function bt(o,t){for(var i=0;i<t.length;i++){var e=t[i];e.enumerable=e.enumerable||!1,e.configurable=!0,"value"in e&&(e.writable=!0),Object.defineProperty(o,e.key,e)}}function N(o,t,i){return t&&bt(o.prototype,t),o}function z(o){return+o.replace(/px/,"")}function Ct(o){var t=window.devicePixelRatio,i=getComputedStyle(o),e=z(i.getPropertyValue("width")),a=z(i.getPropertyValue("height"));o.setAttribute("width",(e*t).toString()),o.setAttribute("height",(a*t).toString())}function A(o,t){var i=arguments.length>2&&arguments[2]!==void 0?arguments[2]:0,e=Math.random()*(t-o)+o;return Math.floor(e*Math.pow(10,i))/Math.pow(10,i)}function X(o){return o[A(0,o.length)]}var Rt=.00125,St=5e-4,Tt=9e-4,Lt=1e-5,It=6,wt=80,Ft=.9,Bt=1.7,Dt=.2,Pt=.6,Ut=.03,kt=.07,$=15,W=82,Nt=150,Mt=100,Ot=250,Gt=40,jt=["#fcf403","#62fc03","#f4fc03","#03e7fc","#03fca5","#a503fc","#fc03ad","#fc03c2"];function H(o){var t=1920;return Math.log(o)/Math.log(t)}var Y=function(){function o(t){k(this,o);var i=t.initialPosition,e=t.direction,a=t.confettiRadius,s=t.confettiColors,r=t.emojis,c=t.emojiSize,n=t.canvasWidth,h=A(Ft,Bt,3),l=h*H(n);this.confettiSpeed={x:l,y:l},this.finalConfettiSpeedX=A(Dt,Pt,3),this.rotationSpeed=r.length?.01:A(Ut,kt,3)*H(n),this.dragForceCoefficient=A(St,Tt,6),this.radius={x:a,y:a},this.initialRadius=a,this.rotationAngle=e==="left"?A(0,.2,3):A(-.2,0,3),this.emojiSize=c,this.emojiRotationAngle=A(0,2*Math.PI),this.radiusYUpdateDirection="down";var d=e==="left"?A(W,$)*Math.PI/180:A(-$,-W)*Math.PI/180;this.absCos=Math.abs(Math.cos(d)),this.absSin=Math.abs(Math.sin(d));var u=A(-Nt,0),m={x:i.x+(e==="left"?-u:u)*this.absCos,y:i.y-u*this.absSin};this.currentPosition=Object.assign({},m),this.initialPosition=Object.assign({},m),this.color=r.length?null:X(s),this.emoji=r.length?X(r):null,this.createdAt=new Date().getTime(),this.direction=e}return N(o,[{key:"draw",value:function(i){var e=this.currentPosition,a=this.radius,s=this.color,r=this.emoji,c=this.rotationAngle,n=this.emojiRotationAngle,h=this.emojiSize,l=window.devicePixelRatio;s?(i.fillStyle=s,i.beginPath(),i.ellipse(e.x*l,e.y*l,a.x*l,a.y*l,c,0,2*Math.PI),i.fill()):r&&(i.font="".concat(h,"px serif"),i.save(),i.translate(l*e.x,l*e.y),i.rotate(n),i.textAlign="center",i.fillText(r,0,0),i.restore())}},{key:"updatePosition",value:function(i,e){var a=this.confettiSpeed,s=this.dragForceCoefficient,r=this.finalConfettiSpeedX,c=this.radiusYUpdateDirection,n=this.rotationSpeed,h=this.createdAt,l=this.direction,d=e-h;if(a.x>r&&(this.confettiSpeed.x-=s*i),this.currentPosition.x+=a.x*(l==="left"?-this.absCos:this.absCos)*i,this.currentPosition.y=this.initialPosition.y-a.y*this.absSin*d+Rt*Math.pow(d,2)/2,this.rotationSpeed-=this.emoji?1e-4:Lt*i,this.rotationSpeed<0&&(this.rotationSpeed=0),this.emoji){this.emojiRotationAngle+=this.rotationSpeed*i%(2*Math.PI);return}c==="down"?(this.radius.y-=i*n,this.radius.y<=0&&(this.radius.y=0,this.radiusYUpdateDirection="up")):(this.radius.y+=i*n,this.radius.y>=this.initialRadius&&(this.radius.y=this.initialRadius,this.radiusYUpdateDirection="down"))}},{key:"getIsVisibleOnCanvas",value:function(i){return this.currentPosition.y<i+Mt}}]),o}();function zt(){var o=document.createElement("canvas");return o.style.position="fixed",o.style.width="100%",o.style.height="100%",o.style.top="0",o.style.left="0",o.style.zIndex="1000",o.style.pointerEvents="none",document.body.appendChild(o),o}function Xt(o){var t=o.confettiRadius,i=t===void 0?It:t,e=o.confettiNumber,a=e===void 0?o.confettiesNumber||(o.emojis?Gt:Ot):e,s=o.confettiColors,r=s===void 0?jt:s,c=o.emojis,n=c===void 0?o.emojies||[]:c,h=o.emojiSize,l=h===void 0?wt:h;return o.emojies&&console.error("emojies argument is deprecated, please use emojis instead"),o.confettiesNumber&&console.error("confettiesNumber argument is deprecated, please use confettiNumber instead"),{confettiRadius:i,confettiNumber:a,confettiColors:r,emojis:n,emojiSize:l}}var $t=function(){function o(t){var i=this;k(this,o),this.canvasContext=t,this.shapes=[],this.promise=new Promise(function(e){return i.resolvePromise=e})}return N(o,[{key:"getBatchCompletePromise",value:function(){return this.promise}},{key:"addShapes",value:function(){var i;(i=this.shapes).push.apply(i,arguments)}},{key:"complete",value:function(){var i;return this.shapes.length?!1:((i=this.resolvePromise)===null||i===void 0||i.call(this),!0)}},{key:"processShapes",value:function(i,e,a){var s=this,r=i.timeDelta,c=i.currentTime;this.shapes=this.shapes.filter(function(n){return n.updatePosition(r,c),n.draw(s.canvasContext),a?n.getIsVisibleOnCanvas(e):!0})}}]),o}(),Wt=function(){function o(){var t=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};k(this,o),this.activeConfettiBatches=[],this.canvas=t.canvas||zt(),this.canvasContext=this.canvas.getContext("2d"),this.requestAnimationFrameRequested=!1,this.lastUpdated=new Date().getTime(),this.iterationIndex=0,this.loop=this.loop.bind(this),requestAnimationFrame(this.loop)}return N(o,[{key:"loop",value:function(){this.requestAnimationFrameRequested=!1,Ct(this.canvas);var i=new Date().getTime(),e=i-this.lastUpdated,a=this.canvas.offsetHeight,s=this.iterationIndex%10===0;this.activeConfettiBatches=this.activeConfettiBatches.filter(function(r){return r.processShapes({timeDelta:e,currentTime:i},a,s),s?!r.complete():!0}),this.iterationIndex++,this.queueAnimationFrameIfNeeded(i)}},{key:"queueAnimationFrameIfNeeded",value:function(i){this.requestAnimationFrameRequested||this.activeConfettiBatches.length<1||(this.requestAnimationFrameRequested=!0,this.lastUpdated=i||new Date().getTime(),requestAnimationFrame(this.loop))}},{key:"addConfetti",value:function(){for(var i=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},e=Xt(i),a=e.confettiRadius,s=e.confettiNumber,r=e.confettiColors,c=e.emojis,n=e.emojiSize,h=this.canvas.getBoundingClientRect(),l=h.width,d=h.height,u=d*5/7,m={x:0,y:u},y={x:l,y:u},E=new $t(this.canvasContext),f=0;f<s/2;f++){var p=new Y({initialPosition:m,direction:"right",confettiRadius:a,confettiColors:r,confettiNumber:s,emojis:c,emojiSize:n,canvasWidth:l}),x=new Y({initialPosition:y,direction:"left",confettiRadius:a,confettiColors:r,confettiNumber:s,emojis:c,emojiSize:n,canvasWidth:l});E.addShapes(p,x)}return this.activeConfettiBatches.push(E),this.queueAnimationFrameIfNeeded(),E.getBatchCompletePromise()}},{key:"clearCanvas",value:function(){this.activeConfettiBatches=[]}},{key:"destroyCanvas",value:function(){this.canvas.remove()}}]),o}();document.body.onload=function(){function o(s){const r=/\/play\/([\w-]+)/,c=s.match(r);return c?c[1]:null}let t=window.location.href;console.log("current url:",t);let i=t.substring(0,t.indexOf("/play")),e=o(t);console.log("host:",i),console.log("id:",e),e||(e="test");let a=`${i}/proxy/zips/v2/number_mini/1501/${e}.zip`;i.includes("art.pcoloring.com")&&(a=`https://pcoloring.com/zips/v2/number_mini/1501/${e}.zip`),Ht(e,a)};async function Ht(o,t){var C,R,T,L,M,O,G;console.log(t);const i=new Et({minDisplayTime:1e3,fadeDuration:300});i.show();let e=document.querySelector("#canvas"),a=e.getContext("webgl2",{premultipliedAlpha:!1}),s=window.devicePixelRatio;e.width=e.clientWidth*s,e.height=e.clientHeight*s;let r=new ot(a,s),c=new vt,n={hintStyle:"default",sound:!0,vibrate:!0,autoNext:!0,...JSON.parse(localStorage.getItem("settings")||"{}")};window.addEventListener("resize",()=>r.updateViewport()),(C=document.querySelector("#toggleTestLayer"))==null||C.addEventListener("click",()=>r.toggleTestLayer()),(R=document.querySelector("#reduction"))==null||R.addEventListener("click",()=>r.resetToBestFit()),(T=document.querySelector("#hint"))==null||T.addEventListener("click",()=>te(c,r)),(L=document.querySelector("#goback"))==null||L.addEventListener("click",()=>D(r,v,c)),(M=document.querySelector("#setting"))==null||M.addEventListener("click",()=>re()),(O=document.querySelector("#save"))==null||O.addEventListener("click",()=>J(o,f)),(G=document.querySelector("#finish-share"))==null||G.addEventListener("click",()=>ie(o,f)),window.addEventListener("beforeunload",g=>J(o,f)),document.addEventListener("click",g=>K(g)),document.addEventListener("touchstart",g=>K(g));let h=document.getElementById("action-sheet");h.addEventListener("click",g=>Z(g)),h.addEventListener("touchstart",g=>Z(g));let l=document.getElementById("sound");l.checked=n.sound,l.addEventListener("click",g=>se(g,f));let d=document.getElementById("vibrate");d.checked=n.vibrate,d.addEventListener("click",g=>ae(g,f));let u=document.getElementById("autonext");u.checked=n.autoNext,u.addEventListener("click",g=>ne(g,f));let m;o=="test"?m=await Yt():m=await rt(t),i.hide();let y=[],E=localStorage.getItem(o);E&&(y=JSON.parse(E));let f=new st(new at(n),m,a,y,{onFillFailed(){console.log("填充失败")},onFillSuccess(){var g;console.log("填充成功"),f.config.settings.vibrate&&ee(),V(f.data.coloredPercent),qt(f.currentGroupIndex,f.currentGroup.progressPercent),(g=f.currentGroup)!=null&&g.isAllColored&&(f.config.settings.sound&&c.playAudio(B.ColorDone),Qt(f)),U=!0},onSwitchGroup(){let g=f.currentGroupIndex;console.log(`切换到下一个group ${g}`),Q(g),Kt(f)},onFinish(){D(r,v,c)}});r.fillerData=f,console.log("resource",m),r.setContentPadding(new nt(50,50,50,220));let p=f.width,x=f.height;r.setContentSize(p,x),m.bg&&r.addLayer(new ct(r,m.bg,r.width,r.height,lt.Repeat)),r.addLayer(new ht(r,0,0,p,x)),r.addLayer(new _t(r,f)),r.addLayer(new yt(r,m.numberImage,f,1));let v=new dt(r,f);r.addLayer(v),r.addLayer(new ut(r,m.page,p,x)),r.addLayer(new mt(r,0,0,f.width,f.height,4280427042)),Vt(f),V(f.data.coloredPercent),v.initTask(),f.data.coloredPercent>=100&&D(r,v,null)}async function Yt(){let o="/assets/unzipped/friend",t=[fetch(`${o}/config.json`).then(n=>n.json()),I(`${o}/page.png`),I(`${o}/map.png`),I("/assets/fonts/numbers_roboto_500.png"),I("/assets/bg/seamless2.png")],[i,e,a,s,r,c]=await Promise.all(t);return new ft(i,e,a,s,[],c,r)}function Vt(o){let t=o.data.areaGroups,i=[],e=[],a=[],s,r;for(var c=0;c<t.length;c++)s=t[c],r=new b(s.color),s.isAllColored?(e.push(`<div id="color-btn-container-${c}" class="color-btn-container" onclick="selectColor(this, event, ${c})">`),e.push(`<svg id="color-btn-progress-ring-${c}" class="color-btn-progress-ring" viewBox="0 0 48 48"><circle class="color-btn-progress-ring-track" cx="50%" cy="50%" r="45%" fill="transparent" stroke="#fff" stroke-width="5%" /> <circle id="color-btn-progress-ring-value-${c}" class="color-btn-progress-ring-value" cx="50%" cy="50%" r="45%" fill="transparent" stroke="#2ecc71" stroke-width="5%" stroke-linecap="round" /></svg>`),e.push(`<div id="color-btn-${c}" class="color-btn" style="background-color:${r.css()}; color: ${r.gray<192?"white":"black"}">`),e.push("✓"),e.push("</div>"),e.push("</div>")):(s===o.currentGroup||s.progressPercent>0,i.push(`<div id="color-btn-container-${c}" class="color-btn-container" onclick="selectColor(this, event, ${c})">`),i.push(`<svg id="color-btn-progress-ring-${c}" class="color-btn-progress-ring" viewBox="0 0 48 48"><circle class="color-btn-progress-ring-track" cx="50%" cy="50%" r="45%" fill="transparent" stroke="#fff" stroke-width="5%" /> <circle id="color-btn-progress-ring-value-${c}" class="color-btn-progress-ring-value" cx="50%" cy="50%" r="45%" fill="transparent" stroke="#2ecc71" stroke-width="5%" stroke-linecap="round" /></svg>`),i.push(`<div id="color-btn-${c}" class="color-btn" style="background-color:${r.css()}; color: ${r.gray<192?"white":"black"}">`),i.push(`${c+1}`),i.push("</div>"),i.push("</div>"));a=i.concat(e);let n=document.querySelector("#color-btns");n!=null&&(n.innerHTML=a.join("")),Q(o.currentGroupIndex);for(var c=0;c<t.length;c++){let d=t[c].progressPercent;Jt(c,d)}window.selectColor=function(h,l,d){console.log("select",h,l,d),o.setCurrentGroup(d),document.querySelectorAll(".color-btn-container").forEach(u=>{u.classList.remove("color-btn-container-selected")}),h.classList.add("color-btn-container-selected")}}function V(o){let t=document.getElementById("progress"),i=document.getElementById("percent");i.innerText=`${o}%`,t.style.width=`${o}%`}function Q(o){document.querySelectorAll(".color-btn-container").forEach(i=>{i.classList.remove("color-btn-container-selected")});let t=document.getElementById(`color-btn-container-${o}`);t==null||t.classList.add("color-btn-container-selected")}function qt(o,t){const i=document.getElementById(`color-btn-container-${o}`),e=document.getElementById(`color-btn-progress-ring-value-${o}`),s=i.clientWidth*.45,r=2*Math.PI*s,c=r-t*r/100;if(e.style.strokeDashoffset=c.toString(),t>=100){const n=document.getElementById(`color-btn-${o}`);n.innerText="✓"}}function Jt(o,t){const i=document.getElementById(`color-btn-container-${o}`),e=document.getElementById(`color-btn-progress-ring-value-${o}`),s=i.clientWidth*.45,r=2*Math.PI*s,c=r-t*r/100;e.style.strokeDasharray=`${r} ${r}`,e.style.strokeDashoffset=c.toString()}function Kt(o){let t=document.getElementById("color-btns"),i=document.body.clientWidth/(t.scrollWidth/o.data.areaGroups.length),e=document.body.clientWidth/i,a=t.scrollWidth/o.data.areaGroups.length*(o.currentGroupIndex-o.doneBeforeCount)-i*e/2+e/2;a=a<0?0:a;try{t.scroll({left:a,top:0,behavior:"smooth"})}catch(s){console.log(s),t.scrollLeft=a}}function Zt(o,t,i){let e=document.createElement("canvas");e.className="finish-ani-canvas";let a=o.getBoundingClientRect();e.style.left=`${a.left-50}px`,e.style.top=`${a.top-50}px`,e.style.width=`${a.width+100}px`,e.style.height=`${a.height+100}px`,document.body.append(e),new xt(e,t,50,()=>{i(),e.remove()}).explode()}function Qt(o){let t=o.currentGroupIndex,i=new b(o.currentGroup.color).css(),e=document.getElementById("color-btns"),a=document.getElementById(`color-btn-container-${t}`);setTimeout(()=>{a.style.visibility="hidden",Zt(a,i,()=>{e.lastElementChild.after(a),a.style.visibility="visible"})},300)}function D(o,t,i){const e=document.getElementById("toolbar-bottom"),a=document.getElementById("save"),s=document.getElementById("setting"),r=document.getElementById("reduction"),c=document.getElementById("hint");setTimeout(()=>{o.fillerData.config.settings.sound&&(i==null||i.playAudio(B.AllDone)),o.resetToResult(),e.classList.add("hidden-toolbar-bottom"),a.classList.add("hidden-toolbar-right"),s.classList.add("hidden-toolbar-right"),r.classList.add("hidden-toolbar-right"),c.classList.add("hidden-toolbar-right"),setTimeout(()=>{a.style.display="none",s.style.display="none",r.style.display="none",c.style.display="none",o.addLayer(new gt(o,-10,-10,o.fillerData.width+20,o.fillerData.height+20,4288401133,40)),t.replay()},1e3)},300);let n=document.getElementById("finish-btn");n.addEventListener("touchmove",d=>d.preventDefault()),n.style.display="flex",document.getElementById("finish-playback").addEventListener("click",()=>t.replay());let l=document.getElementById("finish-continue");l.addEventListener("mouseenter",()=>l.style.backgroundImage="linear-gradient(-180deg, #f6b061, #fe5a2c)"),l.addEventListener("mouseleave",()=>l.style.backgroundImage="linear-gradient(-180deg, #FFC787 12%, #FF9274 90%)"),l.addEventListener("click",()=>q()),l.addEventListener("touchstart",()=>l.style.backgroundImage="linear-gradient(-180deg, #f6b061, #fe5a2c)"),l.addEventListener("touchend",d=>{d.preventDefault(),l.style.backgroundImage="linear-gradient(-180deg, #FFC787 12%, #FF9274 90%)",q()}),setTimeout(()=>{oe(),n.style.opacity="1"},1e3)}function te(o,t){var i;(i=t.fillerData)!=null&&i.config.settings.sound&&o.playAudio(B.Hint),t.hint()}function q(){document.referrer.includes(window.location.hostname)?window.history.back():window.location.href="/"}function ee(){var o="vibrate"in navigator;console.log("supportVibrate: "+o),o&&navigator.vibrate(30)}function P(o){const t=document.getElementById("toast");t&&(t.textContent=o,t.classList.remove("toast-hidden"),setTimeout(()=>t.classList.add("toast-hidden"),2500))}var U=!1;function J(o,t){const i="__storage_metadata__",e=r=>{const c=localStorage.getItem(i),n=c?JSON.parse(c):{};n[r]={progress:t.data.coloredPercent,timestamp:Date.now()},localStorage.setItem(i,JSON.stringify(n))},a=()=>{const r=localStorage.getItem(i);if(!r)return;const c=JSON.parse(r);let n;for(let h of Object.entries(c)){if(!n){n=h;continue}h[1].timestamp<n[1].timestamp&&(n=h)}return n?n[0]:void 0},s=r=>{localStorage.removeItem(r);const c=localStorage.getItem(i);if(!c)return;const n=JSON.parse(c);delete n[r],localStorage.setItem(i,JSON.stringify(n))};if(U)for(localStorage.setItem(o,JSON.stringify(t.taskList)),U=!1;;)try{return localStorage.setItem(o,JSON.stringify(t.taskList)),e(o),P("save success"),!0}catch(r){if(r.name==="QuotaExceededError"){const n=a();if(!n||n===o)return console.error("Storage full and cannot free space"),P("Storage full and cannot free space"),!1;s(n)}else throw r}t.data.coloredPercent<100&&P("nothing to save")}async function ie(o,t){let i=window.location.href;console.log("current url:",i),i.substring(0,i.indexOf("/play"));const e="artNumberColoringUserUUID";let a=localStorage.getItem(e);a?console.log("已获取现有 UUID:",a):(window.crypto&&window.crypto.randomUUID?a=window.crypto.randomUUID():a="xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(r){const c=Math.random()*16|0;return(r==="x"?c:c&3|8).toString(16)}),localStorage.setItem(e,a),console.log("新 UUID 生成并存储:",a));const s="/api/tasks";try{const r={uuid:a,art:o,tasks:t.taskList};(await fetch(s,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(r)})).ok?console.log("tasklist 保存成功！"):console.error("tasklist 保存失败")}catch(r){console.error("网络请求或服务器错误:",r)}}function oe(){new Wt().addConfetti()}function K(o){let t=o.target,i=document.getElementById("setting");if(i==t||i.contains(t))return;let e=document.getElementById("action-sheet");e.style.bottom=="0px"&&(e.style.bottom="-1000px")}function Z(o){o.stopPropagation()}function re(){let o=document.getElementById("action-sheet");o.style.bottom="0px"}function se(o,t){if(o.target.id=="sound"){t.config.settings.sound=o.target.checked;let i=localStorage.getItem("settings")||"{}",e=JSON.parse(i);e.sound=t.config.settings.sound,localStorage.setItem("settings",JSON.stringify(e))}}function ae(o,t){if(o.target.id=="vibrate"){t.config.settings.vibrate=o.target.checked;let i=localStorage.getItem("settings")||"{}",e=JSON.parse(i);e.vibrate=t.config.settings.vibrate,localStorage.setItem("settings",JSON.stringify(e))}}function ne(o,t){if(o.target.id=="autonext"){t.config.settings.autoNext=o.target.checked;let i=localStorage.getItem("settings")||"{}",e=JSON.parse(i);e.autoNext=t.config.settings.autoNext,localStorage.setItem("settings",JSON.stringify(e))}}