(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["third_vendors_005han~app"],{a1f5:function(t,e,i){"use strict";(function(t){var i;const r="undefined"===typeof window?t:window,s=r.performance&&(()=>r.performance.now())||(()=>Date.now()),o=r.requestAnimationFrame||(t=>setTimeout(()=>t(s()),1e3/60)),n=r.cancelAnimationFrame||clearTimeout;function a(t){return t[t.length-1]}function h(t,e){const i={...t};for(const r in e){const s=t[r],o=e[r];s!==o&&(s&&o&&"object"===typeof s&&"object"===typeof o&&!Array.isArray(o)?i[r]=h(s,o):i[r]=o)}return i}function l(t,e){const i=t.split("."),r={};let s=r;for(let o=0;o<i.length;o++){const t=o===i.length-1?e:{};s[i[o]]=t,s=t}return r}let c=0;function d(){return c++,c}function u(t){const e=t.reduce((t,e)=>e+t,0);return e/t.length}function _(t){const e=t.toUpperCase().trim();if(/^#([A-F0-9]{3}){1,2}$/.test(e)){let t=e.substring(1).split("");3===t.length&&(t=[t[0],t[0],t[1],t[1],t[2],t[2]]);const i=""+t.join("");return{r:parseInt(i.slice(0,2),16),g:parseInt(i.slice(2,4),16),b:parseInt(i.slice(4,6),16),a:1}}const i=e.match(/^RGBA?\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*(\d*\.?\d+))?\)$/);if(i)return{r:parseInt(i[1],10),g:parseInt(i[2],10),b:parseInt(i[3],10),a:parseFloat(i[4]||1,10)};throw new Error("Invalid color: "+t)}const p=t=>t.replace(/^\s+/,"").replace(/\s+$/,"");function g(t,e){const i={};for(let r=0;r<e;r++)i[r]=t;return i}const k=(null===(i=r.navigator)||void 0===i?void 0:i.userAgent)||"",m=k.indexOf("MSIE ")>0||k.indexOf("Trident/")>0||k.indexOf("Edge/")>0,f=()=>{};class v{constructor(t,e,i=f){this._mutationChains=[],this._onStateChange=i,this.state={options:{drawingFadeDuration:e.drawingFadeDuration,drawingWidth:e.drawingWidth,drawingColor:_(e.drawingColor),strokeColor:_(e.strokeColor),outlineColor:_(e.outlineColor),radicalColor:_(e.radicalColor||e.strokeColor),highlightColor:_(e.highlightColor)},character:{main:{opacity:e.showCharacter?1:0,strokes:{}},outline:{opacity:e.showOutline?1:0,strokes:{}},highlight:{opacity:1,strokes:{}}},userStrokes:null};for(let r=0;r<t.strokes.length;r++)this.state.character.main.strokes[r]={opacity:1,displayPortion:1},this.state.character.outline.strokes[r]={opacity:1,displayPortion:1},this.state.character.highlight.strokes[r]={opacity:0,displayPortion:1}}overwriteOnStateChange(t){this._onStateChange=t}updateState(t){const e=h(this.state,t);this._onStateChange(e,this.state),this.state=e}run(t,e={}){const i=t.map(t=>t.scope);return this.cancelMutations(i),new Promise(r=>{const s={_isActive:!0,_index:0,_resolve:r,_mutations:t,_loop:e.loop,_scopes:i};this._mutationChains.push(s),this._run(s)})}_run(t){if(!t._isActive)return;const e=t._mutations;if(t._index>=e.length){if(!t._loop)return t._isActive=!1,this._mutationChains=this._mutationChains.filter(e=>e!==t),void t._resolve({canceled:!1});t._index=0}const i=t._mutations[t._index];i.run(this).then(()=>{t._isActive&&(t._index++,this._run(t))})}_getActiveMutations(){return this._mutationChains.map(t=>t._mutations[t._index])}pauseAll(){this._getActiveMutations().forEach(t=>t.pause())}resumeAll(){this._getActiveMutations().forEach(t=>t.resume())}cancelMutations(t){for(const e of this._mutationChains)for(const i of e._scopes)for(const r of t)(i.startsWith(r)||r.startsWith(i))&&this._cancelMutationChain(e)}cancelAll(){this.cancelMutations([""])}_cancelMutationChain(t){var e;t._isActive=!1;for(let i=t._index;i<t._mutations.length;i++)t._mutations[i].cancel(this);null===(e=t._resolve)||void 0===e||e.call(t,{canceled:!0}),this._mutationChains=this._mutationChains.filter(e=>e!==t)}}const y=(t,e)=>({x:t.x-e.x,y:t.y-e.y}),w=t=>Math.sqrt(Math.pow(t.x,2)+Math.pow(t.y,2)),C=(t,e)=>w(y(t,e)),S=(t,e)=>t.x===e.x&&t.y===e.y,P=(t,e=1)=>{const i=10*e;return{x:Math.round(i*t.x)/i,y:Math.round(i*t.y)/i}},D=t=>{let e=t[0];const i=t.slice(1);return i.reduce((t,i)=>{const r=C(i,e);return e=i,t+r},0)},x=(t,e)=>{const i=t.x*e.x+t.y*e.y;return i/w(t)/w(e)},M=(t,e,i)=>{const r=y(e,t),s=i/w(r);return{x:e.x+s*r.x,y:e.y+s*r.y}},R=(t,e)=>{const i=t.length>=e.length?t:e,r=t.length>=e.length?e:t,s=(t,e,s,o)=>{if(0===t&&0===e)return C(i[0],r[0]);if(t>0&&0===e)return Math.max(s[0],C(i[t],r[0]));const n=o[o.length-1];return 0===t&&e>0?Math.max(n,C(i[0],r[e])):Math.max(Math.min(s[e],s[e-1],n),C(i[t],r[e]))};let o=[];for(let n=0;n<i.length;n++){const t=[];for(let e=0;e<r.length;e++)t.push(s(n,e,o,t));o=t}return o[r.length-1]},T=(t,e=.05)=>{const i=t.slice(0,1);for(const r of t.slice(1)){const t=i[i.length-1],s=C(r,t);if(s>e){const o=Math.ceil(s/e),n=s/o;for(let e=0;e<o;e++)i.push(M(r,t,-1*n*(e+1)))}else i.push(r)}return i},A=(t,e=30)=>{const i=D(t),r=i/(e-1),s=[t[0]],o=a(t),n=t.slice(1);for(let h=0;h<e-2;h++){let t=a(s),e=r,i=!1;while(!i){const r=C(t,n[0]);if(r<e)e-=r,t=n.shift();else{const o=M(t,n[0],e-r);s.push(o),i=!0}}}return s.push(o),s},O=t=>{const e=A(t),i=u(e.map(t=>t.x)),r=u(e.map(t=>t.y)),s={x:i,y:r},o=e.map(t=>y(t,s)),n=Math.sqrt(u([Math.pow(o[0].x,2)+Math.pow(o[0].y,2),Math.pow(a(o).x,2)+Math.pow(a(o).y,2)])),h=o.map(t=>({x:t.x/n,y:t.y/n}));return T(h)},b=(t,e)=>t.map(t=>({x:Math.cos(e)*t.x-Math.sin(e)*t.y,y:Math.sin(e)*t.x+Math.cos(e)*t.y})),$=t=>{if(t.length<3)return t;const e=[t[0],t[1]];return t.slice(2).forEach(t=>{const i=e.length,r=y(t,e[i-1]),s=y(e[i-1],e[i-2]),o=r.y*s.x-r.x*s.y===0;o&&e.pop(),e.push(t)}),e};function L(t,e=!1){const i=P(t[0]),r=t.slice(1);let s=`M ${i.x} ${i.y}`;return r.forEach(t=>{const e=P(t);s+=` L ${e.x} ${e.y}`}),e&&(s+="Z"),s}const E=(t,e)=>{const i=$(t);if(i.length<2)return i;const r=i[1],s=i[0],o=M(r,s,e),n=i.slice(1);return n.unshift(o),n};class z{constructor(t,e,i,r=!1){this.path=t,this.points=e,this.strokeNum=i,this.isInRadical=r}getStartingPoint(){return this.points[0]}getEndingPoint(){return this.points[this.points.length-1]}getLength(){return D(this.points)}getVectors(){let t=this.points[0];const e=this.points.slice(1);return e.map(e=>{const i=y(e,t);return t=e,i})}getDistance(t){const e=this.points.map(e=>C(e,t));return Math.min(...e)}getAverageDistance(t){const e=t.reduce((t,e)=>t+this.getDistance(e),0);return e/t.length}}class W{constructor(t,e){this.symbol=t,this.strokes=e}}function F({radStrokes:t,strokes:e,medians:i}){const r=e=>{var i;return(null!==(i=null===t||void 0===t?void 0:t.indexOf(e))&&void 0!==i?i:-1)>=0};return e.map((t,e)=>{const s=i[e].map(t=>{const[e,i]=t;return{x:e,y:i}});return new z(t,s,e,r(e))})}function H(t,e){const i=F(e);return new W(t,i)}const I=[{x:0,y:-124},{x:1024,y:900}],[B,q]=I,N=q.x-B.x,j=q.y-B.y;class U{constructor(t){const{padding:e,width:i,height:r}=t;this.padding=e,this.width=i,this.height=r;const s=i-2*e,o=r-2*e,n=s/N,a=o/j;this.scale=Math.min(n,a);const h=e+(s-this.scale*N)/2,l=e+(o-this.scale*j)/2;this.xOffset=-1*B.x*this.scale+h,this.yOffset=-1*B.y*this.scale+l}convertExternalPoint(t){const e=(t.x-this.xOffset)/this.scale,i=(this.height-this.yOffset-t.y)/this.scale;return{x:e,y:i}}}const V=350,Q=0,G=250,J=.4,X=.35;function K(t,e,i,r={}){const s=e.strokes,o=it(t.points);if(o.length<2)return{isMatch:!1,meta:{isStrokeBackwards:!1}};const{isMatch:n,meta:a,avgDist:h}=ot(o,s[i],r);if(!n)return{isMatch:n,meta:a};const l=s.slice(i+1);let c=h;for(let d=0;d<l.length;d++){const{isMatch:t,avgDist:e}=ot(o,l[d],{...r,checkBackwards:!1});t&&e<c&&(c=e)}if(c<h){const t=.6*(c+h)/(2*h),{isMatch:e,meta:n}=ot(o,s[i],{...r,leniency:(r.leniency||1)*t});return{isMatch:e,meta:n}}return{isMatch:n,meta:a}}const Y=(t,e,i)=>{const r=C(e.getStartingPoint(),t[0]),s=C(e.getEndingPoint(),t[t.length-1]);return r<=G*i&&s<=G*i},Z=t=>{const e=[];let i=t[0];return t.slice(1).forEach(t=>{e.push(y(t,i)),i=t}),e},tt=(t,e)=>{const i=Z(t),r=e.getVectors(),s=i.map(t=>{const e=r.map(e=>x(e,t));return Math.max(...e)}),o=u(s);return o>Q},et=(t,e,i)=>i*(D(t)+25)/(e.getLength()+25)>=X,it=t=>{if(t.length<2)return t;const[e,...i]=t,r=[e];for(const s of i)S(s,r[r.length-1])||r.push(s);return r},rt=[Math.PI/16,Math.PI/32,0,-1*Math.PI/32,-1*Math.PI/16],st=(t,e,i)=>{const r=O(t),s=O(e);let o=1/0;return rt.forEach(t=>{const e=R(r,b(s,t));e<o&&(o=e)}),o<=J*i},ot=(t,e,i)=>{const{leniency:r=1,isOutlineVisible:s=!1,checkBackwards:o=!0}=i,n=e.getAverageDistance(t),a=s||e.strokeNum>0?.5:1,h=n<=V*a*r;if(!h)return{isMatch:!1,avgDist:n,meta:{isStrokeBackwards:!1}};const l=Y(t,e,r),c=tt(t,e),d=st(t,e.points,r),u=et(t,e,r),_=h&&l&&c&&d&&u;if(o&&!_){const r=ot([...t].reverse(),e,{...i,checkBackwards:!1});if(r.isMatch)return{isMatch:_,avgDist:n,meta:{isStrokeBackwards:!0}}}return{isMatch:_,avgDist:n,meta:{isStrokeBackwards:!1}}};class nt{constructor(t,e,i){this.id=t,this.points=[e],this.externalPoints=[i]}appendPoint(t,e){this.points.push(t),this.externalPoints.push(e)}}class at{constructor(t){this._duration=t,this._startTime=null,this._paused=!1,this.scope="delay."+t}run(){return this._startTime=s(),this._runningPromise=new Promise(t=>{this._resolve=t,this._timeout=setTimeout(()=>this.cancel(),this._duration)}),this._runningPromise}pause(){if(this._paused)return;const t=performance.now()-(this._startTime||0);this._duration=Math.max(0,this._duration-t),clearTimeout(this._timeout),this._paused=!0}resume(){this._paused&&(this._startTime=performance.now(),this._timeout=setTimeout(()=>this.cancel(),this._duration),this._paused=!1)}cancel(){clearTimeout(this._timeout),this._resolve&&this._resolve(),this._resolve=void 0}}class ht{constructor(t,e,i={}){this._tick=t=>{if(null!==this._startPauseTime)return;const e=Math.min(1,(t-this._startTime-this._pausedDuration)/this._duration);if(1===e)this._renderState.updateState(this._values),this._frameHandle=void 0,this.cancel(this._renderState);else{const t=dt(e),i=lt(this._startState,this._values,t);this._renderState.updateState(i),this._frameHandle=o(this._tick)}},this.scope=t,this._valuesOrCallable=e,this._duration=i.duration||0,this._force=i.force,this._pausedDuration=0,this._startPauseTime=null}run(t){return this._values||this._inflateValues(t),0===this._duration&&t.updateState(this._values),0===this._duration||ct(t.state,this._values)?Promise.resolve():(this._renderState=t,this._startState=t.state,this._startTime=performance.now(),this._frameHandle=o(this._tick),new Promise(t=>{this._resolve=t}))}_inflateValues(t){let e=this._valuesOrCallable;"function"===typeof this._valuesOrCallable&&(e=this._valuesOrCallable(t.state)),this._values=l(this.scope,e)}pause(){null===this._startPauseTime&&(this._frameHandle&&n(this._frameHandle),this._startPauseTime=performance.now())}resume(){null!==this._startPauseTime&&(this._frameHandle=o(this._tick),this._pausedDuration+=performance.now()-this._startPauseTime,this._startPauseTime=null)}cancel(t){var e;null===(e=this._resolve)||void 0===e||e.call(this),this._resolve=void 0,n(this._frameHandle||-1),this._frameHandle=void 0,this._force&&(this._values||this._inflateValues(t),t.updateState(this._values))}}function lt(t,e,i){const r={};for(const s in e){const o=e[s],n=null===t||void 0===t?void 0:t[s];r[s]="number"===typeof n&&"number"===typeof o&&o>=0?i*(o-n)+n:lt(n,o,i)}return r}function ct(t,e){for(const i in e){const r=e[i],s=null===t||void 0===t?void 0:t[i];if(r>=0){if(r!==s)return!1}else if(!ct(s,r))return!1}return!0}ht.Delay=at;const dt=t=>-Math.cos(t*Math.PI)/2+.5,ut=(t,e,i)=>[new ht(`character.${t}.strokes`,g({opacity:1,displayPortion:1},e.strokes.length),{duration:i,force:!0})],_t=(t,e,i)=>[new ht("character."+t,{opacity:1,strokes:g({opacity:1,displayPortion:1},e.strokes.length)},{duration:i,force:!0})],pt=(t,e,i)=>[new ht(`character.${t}.opacity`,0,{duration:i,force:!0}),...ut(t,e,0)],gt=(t,e,i)=>[new ht("options."+t,e,{duration:i})],kt=(t,e,i)=>{const r=t.strokeNum,s=(t.getLength()+600)/(3*i);return[new ht("character.highlight.strokeColor",e),new ht("character.highlight",{opacity:1,strokes:{[r]:{displayPortion:0,opacity:0}}}),new ht("character.highlight.strokes."+r,{displayPortion:1,opacity:1},{duration:s}),new ht(`character.highlight.strokes.${r}.opacity`,0,{duration:s})]},mt=(t,e,i)=>{const r=e.strokeNum,s=(e.getLength()+600)/(3*i);return[new ht("character."+t,{opacity:1,strokes:{[r]:{displayPortion:0,opacity:1}}}),new ht(`character.${t}.strokes.${r}.displayPortion`,1,{duration:s})]},ft=(t,e,i,r)=>{const s=i=>{const r=i.character[t],s={opacity:1,strokes:{}};for(let t=0;t<e.strokes.length;t++)s.strokes[t]={opacity:r.opacity*r.strokes[t].opacity};return s},o=e.strokes[i];return[new ht("character."+t,s),...mt(t,o,r)]},vt=(t,e,i)=>[new ht(`character.${t}.strokes.${e}`,{displayPortion:1,opacity:1},{duration:i,force:!0})],yt=(t,e,i,r,s)=>{let o=pt(t,e,i);return o=o.concat(ut(t,e,0)),o.push(new ht("character."+t,{opacity:1,strokes:g({opacity:0},e.strokes.length)},{force:!0})),e.strokes.forEach((e,i)=>{i>0&&o.push(new ht.Delay(s)),o=o.concat(mt(t,e,r))}),o},wt=(t,e,i,r,s,o)=>{const n=yt(t,e,i,r,s);return n.push(new ht.Delay(o)),n},Ct=(t,e)=>[...pt("main",t,e),new ht("character.highlight",{opacity:1,strokes:g({opacity:0},t.strokes.length)},{force:!0}),new ht("character.main",{opacity:1,strokes:g({opacity:0},t.strokes.length)},{force:!0})],St=(t,e)=>[new ht("quiz.activeUserStrokeId",t,{force:!0}),new ht("userStrokes."+t,{points:[e],opacity:1},{force:!0})],Pt=(t,e)=>[new ht(`userStrokes.${t}.points`,e,{force:!0})],Dt=(t,e)=>[new ht(`userStrokes.${t}.opacity`,0,{duration:e}),new ht("userStrokes."+t,null,{force:!0})],xt=(t,e)=>[...pt("highlight",t),..._t("highlight",t,e/2),...pt("highlight",t,e/2)],Mt=t=>({pathString:L(t.externalPoints),points:t.points.map(t=>P(t))});class Rt{constructor(t,e,i){this._currentStrokeIndex=0,this._mistakesOnStroke=0,this._totalMistakes=0,this._character=t,this._renderState=e,this._isActive=!1,this._positioner=i}startQuiz(t){return this._isActive=!0,this._options=t,this._currentStrokeIndex=0,this._mistakesOnStroke=0,this._totalMistakes=0,this._renderState.run(Ct(this._character,t.strokeFadeDuration))}startUserStroke(t){if(!this._isActive)return null;if(this._userStroke)return this.endUserStroke();const e=this._positioner.convertExternalPoint(t),i=d();return this._userStroke=new nt(i,e,t),this._renderState.run(St(i,e))}continueUserStroke(t){if(!this._userStroke)return Promise.resolve();const e=this._positioner.convertExternalPoint(t);this._userStroke.appendPoint(e,t);const i=this._userStroke.points.slice(0);return this._renderState.run(Pt(this._userStroke.id,i))}setPositioner(t){this._positioner=t}endUserStroke(){var t;if(!this._userStroke)return;if(this._renderState.run(Dt(this._userStroke.id,null!==(t=this._options.drawingFadeDuration)&&void 0!==t?t:300)),1===this._userStroke.points.length)return void(this._userStroke=void 0);const{acceptBackwardsStrokes:e}=this._options,i=this._getCurrentStroke(),{isMatch:r,meta:s}=K(this._userStroke,this._character,this._currentStrokeIndex,{isOutlineVisible:this._renderState.state.character.outline.opacity>0,leniency:this._options.leniency}),o=r||s.isStrokeBackwards&&e;if(o)this._handleSuccess(s);else{this._handleFailure(s);const{showHintAfterMisses:t,highlightColor:e,strokeHighlightSpeed:r}=this._options;!1!==t&&this._mistakesOnStroke>=t&&this._renderState.run(kt(i,_(e),r))}this._userStroke=void 0}cancel(){this._isActive=!1,this._userStroke&&this._renderState.run(Dt(this._userStroke.id,this._options.drawingFadeDuration))}_getStrokeData({isCorrect:t,meta:e}){return{character:this._character.symbol,strokeNum:this._currentStrokeIndex,mistakesOnStroke:this._mistakesOnStroke,totalMistakes:this._totalMistakes,strokesRemaining:this._character.strokes.length-this._currentStrokeIndex-(t?1:0),drawnPath:Mt(this._userStroke),isBackwards:e.isStrokeBackwards}}_handleSuccess(t){if(!this._options)return;const{strokes:e,symbol:i}=this._character,{onCorrectStroke:r,onComplete:s,highlightOnComplete:o,strokeFadeDuration:n,strokeHighlightDuration:a}=this._options;null===r||void 0===r||r({...this._getStrokeData({isCorrect:!0,meta:t})});let h=vt("main",this._currentStrokeIndex,n);this._mistakesOnStroke=0,this._currentStrokeIndex+=1;const l=this._currentStrokeIndex===e.length;l&&(this._isActive=!1,null===s||void 0===s||s({character:i,totalMistakes:this._totalMistakes}),o&&(h=h.concat(xt(this._character,2*(a||0))))),this._renderState.run(h)}_handleFailure(t){var e,i;this._mistakesOnStroke+=1,this._totalMistakes+=1,null===(e=(i=this._options).onMistake)||void 0===e||e.call(i,this._getStrokeData({isCorrect:!1,meta:t}))}_getCurrentStroke(){return this._character.strokes[this._currentStrokeIndex]}}function Tt(t){return document.createElementNS("http://www.w3.org/2000/svg",t)}function At(t,e,i){t.setAttributeNS(null,e,i)}function Ot(t,e){Object.keys(e).forEach(i=>At(t,i,e[i]))}function bt(t){let e="";return window.location&&window.location.href&&(e=window.location.href.replace(/#[^#]*$/,"").replace(/"/gi,"%22")),`url("${e}#${t}")`}function $t(t){var e;null===t||void 0===t||null===(e=t.parentNode)||void 0===e||e.removeChild(t)}class Lt{constructor(t){this.stroke=t,this._pathLength=t.getLength()+Lt.STROKE_WIDTH/2}_getStrokeDashoffset(t){return.999*this._pathLength*(1-t)}_getColor({strokeColor:t,radicalColor:e}){return e&&this.stroke.isInRadical?e:t}}Lt.STROKE_WIDTH=200;const Et=200;class zt extends Lt{constructor(t){super(t),this._oldProps=void 0}mount(t){this._animationPath=Tt("path"),this._clip=Tt("clipPath"),this._strokePath=Tt("path");const e="mask-"+d();At(this._clip,"id",e),At(this._strokePath,"d",this.stroke.path),this._animationPath.style.opacity="0",At(this._animationPath,"clip-path",bt(e));const i=E(this.stroke.points,Et/2);return At(this._animationPath,"d",L(i)),Ot(this._animationPath,{stroke:"#FFFFFF","stroke-width":Et.toString(),fill:"none","stroke-linecap":"round","stroke-linejoin":"miter","stroke-dasharray":`${this._pathLength},${this._pathLength}`}),this._clip.appendChild(this._strokePath),t.defs.appendChild(this._clip),t.svg.appendChild(this._animationPath),this}render(t){var e,i;if(t===this._oldProps||!this._animationPath)return;t.displayPortion!==(null===(e=this._oldProps)||void 0===e?void 0:e.displayPortion)&&(this._animationPath.style.strokeDashoffset=this._getStrokeDashoffset(t.displayPortion).toString());const r=this._getColor(t);if(!this._oldProps||r!==this._getColor(this._oldProps)){const{r:t,g:e,b:i,a:s}=r;Ot(this._animationPath,{stroke:`rgba(${t},${e},${i},${s})`})}t.opacity!==(null===(i=this._oldProps)||void 0===i?void 0:i.opacity)&&(this._animationPath.style.opacity=t.opacity.toString()),this._oldProps=t}}class Wt{constructor(t){this._oldProps=void 0,this._strokeRenderers=t.strokes.map(t=>new zt(t))}mount(t){const e=t.createSubRenderTarget();this._group=e.svg,this._strokeRenderers.forEach(t=>{t.mount(e)})}render(t){var e,i;if(t===this._oldProps||!this._group)return;const{opacity:r,strokes:s,strokeColor:o,radicalColor:n=null}=t;var a;r!==(null===(e=this._oldProps)||void 0===e?void 0:e.opacity)&&(this._group.style.opacity=r.toString(),m||(0===r?this._group.style.display="none":0===(null===(a=this._oldProps)||void 0===a?void 0:a.opacity)&&this._group.style.removeProperty("display")));const h=!this._oldProps||o!==this._oldProps.strokeColor||n!==this._oldProps.radicalColor;if(h||s!==(null===(i=this._oldProps)||void 0===i?void 0:i.strokes))for(let c=0;c<this._strokeRenderers.length;c++){var l;!h&&null!==(l=this._oldProps)&&void 0!==l&&l.strokes&&s[c]===this._oldProps.strokes[c]||this._strokeRenderers[c].render({strokeColor:o,radicalColor:n,opacity:s[c].opacity,displayPortion:s[c].displayPortion})}this._oldProps=t}}class Ft{constructor(){this._oldProps=void 0}mount(t){this._path=Tt("path"),t.svg.appendChild(this._path)}render(t){var e,i,r,s;if(this._path&&t!==this._oldProps){if(t.strokeColor!==(null===(e=this._oldProps)||void 0===e?void 0:e.strokeColor)||t.strokeWidth!==(null===(i=this._oldProps)||void 0===i?void 0:i.strokeWidth)){const{r:e,g:i,b:r,a:s}=t.strokeColor;Ot(this._path,{fill:"none",stroke:`rgba(${e},${i},${r},${s})`,"stroke-width":t.strokeWidth.toString(),"stroke-linecap":"round","stroke-linejoin":"round"})}t.opacity!==(null===(r=this._oldProps)||void 0===r?void 0:r.opacity)&&At(this._path,"opacity",t.opacity.toString()),t.points!==(null===(s=this._oldProps)||void 0===s?void 0:s.points)&&At(this._path,"d",L(t.points)),this._oldProps=t}}destroy(){$t(this._path)}}class Ht{constructor(t,e){this._character=t,this._positioner=e,this._mainCharRenderer=new Wt(t),this._outlineCharRenderer=new Wt(t),this._highlightCharRenderer=new Wt(t),this._userStrokeRenderers={}}mount(t){const e=t.createSubRenderTarget(),i=e.svg,{xOffset:r,yOffset:s,height:o,scale:n}=this._positioner;At(i,"transform",`translate(${r}, ${o-s}) scale(${n}, ${-1*n})`),this._outlineCharRenderer.mount(e),this._mainCharRenderer.mount(e),this._highlightCharRenderer.mount(e),this._positionedTarget=e}render(t){const{main:e,outline:i,highlight:r}=t.character,{outlineColor:s,radicalColor:o,highlightColor:n,strokeColor:a,drawingWidth:h,drawingColor:l}=t.options;this._outlineCharRenderer.render({opacity:i.opacity,strokes:i.strokes,strokeColor:s}),this._mainCharRenderer.render({opacity:e.opacity,strokes:e.strokes,strokeColor:a,radicalColor:o}),this._highlightCharRenderer.render({opacity:r.opacity,strokes:r.strokes,strokeColor:n});const c=t.userStrokes||{};for(const u in this._userStrokeRenderers){var d;if(!c[u])null===(d=this._userStrokeRenderers[u])||void 0===d||d.destroy(),delete this._userStrokeRenderers[u]}for(const u in c){const t=c[u];if(!t)continue;const e={strokeWidth:h,strokeColor:l,...t},i=(()=>{if(this._userStrokeRenderers[u])return this._userStrokeRenderers[u];const t=new Ft;return t.mount(this._positionedTarget),this._userStrokeRenderers[u]=t,t})();i.render(e)}}destroy(){$t(this._positionedTarget.svg),this._positionedTarget.defs.innerHTML=""}}class It{constructor(t){this.node=t}addPointerStartListener(t){this.node.addEventListener("mousedown",e=>{t(this._eventify(e,this._getMousePoint))}),this.node.addEventListener("touchstart",e=>{t(this._eventify(e,this._getTouchPoint))})}addPointerMoveListener(t){this.node.addEventListener("mousemove",e=>{t(this._eventify(e,this._getMousePoint))}),this.node.addEventListener("touchmove",e=>{t(this._eventify(e,this._getTouchPoint))})}addPointerEndListener(t){document.addEventListener("mouseup",t),document.addEventListener("touchend",t)}getBoundingClientRect(){return this.node.getBoundingClientRect()}updateDimensions(t,e){this.node.setAttribute("width",""+t),this.node.setAttribute("height",""+e)}_eventify(t,e){return{getPoint:()=>e.call(this,t),preventDefault:()=>t.preventDefault()}}_getMousePoint(t){const{left:e,top:i}=this.getBoundingClientRect(),r=t.clientX-e,s=t.clientY-i;return{x:r,y:s}}_getTouchPoint(t){const{left:e,top:i}=this.getBoundingClientRect(),r=t.touches[0].clientX-e,s=t.touches[0].clientY-i;return{x:r,y:s}}}class Bt extends It{constructor(t,e){super(t),this.svg=t,this.defs=e,"createSVGPoint"in t&&(this._pt=t.createSVGPoint())}static init(t,e="100%",i="100%"){const r=(()=>"string"===typeof t?document.getElementById(t):t)();if(!r)throw new Error("HanziWriter target element not found: "+t);const s=r.nodeName.toUpperCase(),o=(()=>{if("SVG"===s||"G"===s)return r;{const t=Tt("svg");return r.appendChild(t),t}})();Ot(o,{width:e,height:i});const n=Tt("defs");return o.appendChild(n),new Bt(o,n)}createSubRenderTarget(){const t=Tt("g");return this.svg.appendChild(t),new Bt(t,this.defs)}_getMousePoint(t){if(this._pt&&(this._pt.x=t.clientX,this._pt.y=t.clientY,"getScreenCTM"in this.node)){var e;const t=this._pt.matrixTransform(null===(e=this.node.getScreenCTM())||void 0===e?void 0:e.inverse());return{x:t.x,y:t.y}}return super._getMousePoint.call(this,t)}_getTouchPoint(t){if(this._pt&&(this._pt.x=t.touches[0].clientX,this._pt.y=t.touches[0].clientY,"getScreenCTM"in this.node)){var e;const t=this._pt.matrixTransform(null===(e=this.node.getScreenCTM())||void 0===e?void 0:e.inverse());return{x:t.x,y:t.y}}return super._getTouchPoint(t)}}var qt={HanziWriterRenderer:Ht,createRenderTarget:Bt.init};const Nt=(t,e)=>{t.beginPath();const i=e[0],r=e.slice(1);t.moveTo(i.x,i.y);for(const s of r)t.lineTo(s.x,s.y);t.stroke()},jt=t=>{const e=t.split(/(^|\s+)(?=[A-Z])/).filter(t=>" "!==t),i=[t=>t.beginPath()];for(const r of e){const[t,...e]=r.split(/\s+/),s=e.map(t=>parseFloat(t));"M"===t?i.push(t=>t.moveTo(...s)):"L"===t?i.push(t=>t.lineTo(...s)):"C"===t?i.push(t=>t.bezierCurveTo(...s)):"Q"===t&&i.push(t=>t.quadraticCurveTo(...s))}return t=>i.forEach(e=>e(t))};class Ut extends Lt{constructor(t,e=!0){super(t),e&&Path2D?this._path2D=new Path2D(this.stroke.path):this._pathCmd=jt(this.stroke.path),this._extendedMaskPoints=E(this.stroke.points,Lt.STROKE_WIDTH/2)}render(t,e){if(e.opacity<.05)return;var i;(t.save(),this._path2D)?t.clip(this._path2D):(null===(i=this._pathCmd)||void 0===i||i.call(this,t),t.globalAlpha=0,t.stroke(),t.clip());const{r:r,g:s,b:o,a:n}=this._getColor(e),a=1===n?`rgb(${r},${s},${o})`:`rgb(${r},${s},${o},${n})`,h=this._getStrokeDashoffset(e.displayPortion);t.globalAlpha=e.opacity,t.strokeStyle=a,t.fillStyle=a,t.lineWidth=Lt.STROKE_WIDTH,t.lineCap="round",t.lineJoin="round",t.setLineDash([this._pathLength,this._pathLength],h),t.lineDashOffset=h,Nt(t,this._extendedMaskPoints),t.restore()}}class Vt{constructor(t){this._strokeRenderers=t.strokes.map(t=>new Ut(t))}render(t,e){if(e.opacity<.05)return;const{opacity:i,strokeColor:r,radicalColor:s,strokes:o}=e;for(let n=0;n<this._strokeRenderers.length;n++)this._strokeRenderers[n].render(t,{strokeColor:r,radicalColor:s,opacity:o[n].opacity*i,displayPortion:o[n].displayPortion||0})}}function Qt(t,e){if(e.opacity<.05)return;const{opacity:i,strokeWidth:r,strokeColor:s,points:o}=e,{r:n,g:a,b:h,a:l}=s;t.save(),t.globalAlpha=i,t.lineWidth=r,t.strokeStyle=`rgba(${n},${a},${h},${l})`,t.lineCap="round",t.lineJoin="round",Nt(t,o),t.restore()}class Gt{constructor(t,e){this.destroy=f,this._character=t,this._positioner=e,this._mainCharRenderer=new Vt(t),this._outlineCharRenderer=new Vt(t),this._highlightCharRenderer=new Vt(t)}mount(t){this._target=t}_animationFrame(t){const{width:e,height:i,scale:r,xOffset:s,yOffset:o}=this._positioner,n=this._target.getContext();n.clearRect(0,0,e,i),n.save(),n.translate(s,i-o),n.transform(1,0,0,-1,0,0),n.scale(r,r),t(n),n.restore(),n.draw&&n.draw()}render(t){const{outline:e,main:i,highlight:r}=t.character,{outlineColor:s,strokeColor:o,radicalColor:n,highlightColor:a,drawingColor:h,drawingWidth:l}=t.options;this._animationFrame(c=>{this._outlineCharRenderer.render(c,{opacity:e.opacity,strokes:e.strokes,strokeColor:s}),this._mainCharRenderer.render(c,{opacity:i.opacity,strokes:i.strokes,strokeColor:o,radicalColor:n}),this._highlightCharRenderer.render(c,{opacity:r.opacity,strokes:r.strokes,strokeColor:a});const d=t.userStrokes||{};for(const t in d){const e=d[t];if(e){const t={strokeWidth:l,strokeColor:h,...e};Qt(c,t)}}})}}class Jt extends It{constructor(t){super(t)}static init(t,e="100%",i="100%"){const r=(()=>"string"===typeof t?document.getElementById(t):t)();if(!r)throw new Error("HanziWriter target element not found: "+t);const s=r.nodeName.toUpperCase(),o=(()=>{if("CANVAS"===s)return r;const t=document.createElement("canvas");return r.appendChild(t),t})();return o.setAttribute("width",e),o.setAttribute("height",i),new Jt(o)}getContext(){return this.node.getContext("2d")}}var Xt={HanziWriterRenderer:Gt,createRenderTarget:Jt.init};const Kt="2.0",Yt=t=>`https://cdn.jsdelivr.net/npm/hanzi-writer-data@${Kt}/${t}.json`,Zt=(t,e,i)=>{const r=new XMLHttpRequest;r.overrideMimeType&&r.overrideMimeType("application/json"),r.open("GET",Yt(t),!0),r.onerror=t=>{i(r,t)},r.onreadystatechange=()=>{4===r.readyState&&(200===r.status?e(JSON.parse(r.responseText)):0!==r.status&&i&&i(r))},r.send(null)},te={charDataLoader:Zt,onLoadCharDataError:null,onLoadCharDataSuccess:null,showOutline:!0,showCharacter:!0,renderer:"svg",width:0,height:0,padding:20,strokeAnimationSpeed:1,strokeFadeDuration:400,strokeHighlightDuration:200,strokeHighlightSpeed:2,delayBetweenStrokes:1e3,delayBetweenLoops:2e3,strokeColor:"#555",radicalColor:null,highlightColor:"#AAF",outlineColor:"#DDD",drawingColor:"#333",leniency:1,showHintAfterMisses:3,highlightOnComplete:!0,highlightCompleteColor:null,acceptBackwardsStrokes:!1,drawingFadeDuration:300,drawingWidth:4,strokeWidth:2,outlineWidth:2,rendererOverride:{}};class ee{constructor(t){this._loadCounter=0,this._isLoading=!1,this.loadingFailed=!1,this._options=t}_debouncedLoad(t,e){const i=t=>{var i;e===this._loadCounter&&(null===(i=this._resolve)||void 0===i||i.call(this,t))},r=t=>{var i;e===this._loadCounter&&(null===(i=this._reject)||void 0===i||i.call(this,t))},s=this._options.charDataLoader(t,i,r);s&&("then"in s?s.then(i).catch(r):i(s))}_setupLoadingPromise(){return new Promise((t,e)=>{this._resolve=t,this._reject=e}).then(t=>{var e,i;return this._isLoading=!1,null===(e=(i=this._options).onLoadCharDataSuccess)||void 0===e||e.call(i,t),t}).catch(t=>{if(this._isLoading=!1,this.loadingFailed=!0,this._options.onLoadCharDataError)return void this._options.onLoadCharDataError(t);if(t instanceof Error)throw t;const e=new Error("Failed to load char data for "+this._loadingChar);throw e.reason=t,e})}loadCharData(t){this._loadingChar=t;const e=this._setupLoadingPromise();return this.loadingFailed=!1,this._isLoading=!0,this._loadCounter++,this._debouncedLoad(t,this._loadCounter),e}}class ie{constructor(t,e={}){const{HanziWriterRenderer:i,createRenderTarget:r}="canvas"===e.renderer?Xt:qt,s=e.rendererOverride||{};this._renderer={HanziWriterRenderer:s.HanziWriterRenderer||i,createRenderTarget:s.createRenderTarget||r},this.target=this._renderer.createRenderTarget(t,e.width,e.height),this._options=this._assignOptions(e),this._loadingManager=new ee(this._options),this._setupListeners()}static create(t,e,i){const r=new ie(t,i);return r.setCharacter(e),r}static loadCharacterData(t,e={}){const i=(()=>{const{_loadingManager:i,_loadingOptions:r}=ie;return(null===i||void 0===i?void 0:i._loadingChar)===t&&r===e?i:new ee({...te,...e})})();return ie._loadingManager=i,ie._loadingOptions=e,i.loadCharData(t)}static getScalingTransform(t,e,i=0){const r=new U({width:t,height:e,padding:i});return{x:r.xOffset,y:r.yOffset,scale:r.scale,transform:p(`\n        translate(${r.xOffset}, ${r.height-r.yOffset})\n        scale(${r.scale}, ${-1*r.scale})\n      `).replace(/\s+/g," ")}}showCharacter(t={}){return this._options.showCharacter=!0,this._withData(()=>{var e;return null===(e=this._renderState)||void 0===e?void 0:e.run(_t("main",this._character,"number"===typeof t.duration?t.duration:this._options.strokeFadeDuration)).then(e=>{var i;return null===(i=t.onComplete)||void 0===i||i.call(t,e),e})})}hideCharacter(t={}){return this._options.showCharacter=!1,this._withData(()=>{var e;return null===(e=this._renderState)||void 0===e?void 0:e.run(pt("main",this._character,"number"===typeof t.duration?t.duration:this._options.strokeFadeDuration)).then(e=>{var i;return null===(i=t.onComplete)||void 0===i||i.call(t,e),e})})}animateCharacter(t={}){return this.cancelQuiz(),this._withData(()=>{var e;return null===(e=this._renderState)||void 0===e?void 0:e.run(yt("main",this._character,this._options.strokeFadeDuration,this._options.strokeAnimationSpeed,this._options.delayBetweenStrokes)).then(e=>{var i;return null===(i=t.onComplete)||void 0===i||i.call(t,e),e})})}animateStroke(t,e={}){return this.cancelQuiz(),this._withData(()=>{var i;return null===(i=this._renderState)||void 0===i?void 0:i.run(ft("main",this._character,t,this._options.strokeAnimationSpeed)).then(t=>{var i;return null===(i=e.onComplete)||void 0===i||i.call(e,t),t})})}highlightStroke(t,e={}){const i=()=>{if(this._character&&this._renderState)return this._renderState.run(kt(this._character.strokes[t],_(this._options.highlightColor),this._options.strokeHighlightSpeed)).then(t=>{var i;return null===(i=e.onComplete)||void 0===i||i.call(e,t),t})};return this._withData(i)}async loopCharacterAnimation(){return this.cancelQuiz(),this._withData(()=>this._renderState.run(wt("main",this._character,this._options.strokeFadeDuration,this._options.strokeAnimationSpeed,this._options.delayBetweenStrokes,this._options.delayBetweenLoops),{loop:!0}))}pauseAnimation(){return this._withData(()=>{var t;return null===(t=this._renderState)||void 0===t?void 0:t.pauseAll()})}resumeAnimation(){return this._withData(()=>{var t;return null===(t=this._renderState)||void 0===t?void 0:t.resumeAll()})}showOutline(t={}){return this._options.showOutline=!0,this._withData(()=>{var e;return null===(e=this._renderState)||void 0===e?void 0:e.run(_t("outline",this._character,"number"===typeof t.duration?t.duration:this._options.strokeFadeDuration)).then(e=>{var i;return null===(i=t.onComplete)||void 0===i||i.call(t,e),e})})}hideOutline(t={}){return this._options.showOutline=!1,this._withData(()=>{var e;return null===(e=this._renderState)||void 0===e?void 0:e.run(pt("outline",this._character,"number"===typeof t.duration?t.duration:this._options.strokeFadeDuration)).then(e=>{var i;return null===(i=t.onComplete)||void 0===i||i.call(t,e),e})})}updateDimensions({width:t,height:e,padding:i}){if(void 0!==t&&(this._options.width=t),void 0!==e&&(this._options.height=e),void 0!==i&&(this._options.padding=i),this.target.updateDimensions(this._options.width,this._options.height),this._character&&this._renderState&&this._hanziWriterRenderer&&this._positioner){this._hanziWriterRenderer.destroy();const t=this._initAndMountHanziWriterRenderer(this._character);this._renderState.overwriteOnStateChange(e=>t.render(e)),t.render(this._renderState.state),this._quiz&&this._quiz.setPositioner(this._positioner)}}updateColor(t,e,i={}){var r;let s=[];const o=(()=>"radicalColor"!==t||e?e:this._options.strokeColor)(),n=_(o);this._options[t]=e;const a=null!==(r=i.duration)&&void 0!==r?r:this._options.strokeFadeDuration;return s=s.concat(gt(t,n,a)),"radicalColor"!==t||e||(s=s.concat(gt(t,null,0))),this._withData(()=>{var t;return null===(t=this._renderState)||void 0===t?void 0:t.run(s).then(t=>{var e;return null===(e=i.onComplete)||void 0===e||e.call(i,t),t})})}quiz(t={}){return this._withData(async()=>{this._character&&this._renderState&&this._positioner&&(this.cancelQuiz(),this._quiz=new Rt(this._character,this._renderState,this._positioner),this._options={...this._options,...t},this._quiz.startQuiz(this._options))})}cancelQuiz(){this._quiz&&(this._quiz.cancel(),this._quiz=void 0)}setCharacter(t){return this.cancelQuiz(),this._char=t,this._hanziWriterRenderer&&this._hanziWriterRenderer.destroy(),this._renderState&&this._renderState.cancelAll(),this._hanziWriterRenderer=null,this._withDataPromise=this._loadingManager.loadCharData(t).then(e=>{if(!e||this._loadingManager.loadingFailed)return;this._character=H(t,e),this._renderState=new v(this._character,this._options,t=>i.render(t));const i=this._initAndMountHanziWriterRenderer(this._character);i.render(this._renderState.state)}),this._withDataPromise}_initAndMountHanziWriterRenderer(t){const{width:e,height:i,padding:r}=this._options;this._positioner=new U({width:e,height:i,padding:r});const s=new this._renderer.HanziWriterRenderer(t,this._positioner);return s.mount(this.target),this._hanziWriterRenderer=s,s}async getCharacterData(){if(!this._char)throw new Error("setCharacter() must be called before calling getCharacterData()");const t=await this._withData(()=>this._character);return t}_assignOptions(t){const e={...te,...t};return t.strokeAnimationDuration&&!t.strokeAnimationSpeed&&(e.strokeAnimationSpeed=500/t.strokeAnimationDuration),t.strokeHighlightDuration&&!t.strokeHighlightSpeed&&(e.strokeHighlightSpeed=500/e.strokeHighlightDuration),t.highlightCompleteColor||(e.highlightCompleteColor=e.highlightColor),this._fillWidthAndHeight(e)}_fillWidthAndHeight(t){const e={...t};if(e.width&&!e.height)e.height=e.width;else if(e.height&&!e.width)e.width=e.height;else if(!e.width&&!e.height){const{width:t,height:i}=this.target.getBoundingClientRect(),r=Math.min(t,i);e.width=r,e.height=r}return e}_withData(t){if(this._loadingManager.loadingFailed)throw Error("Failed to load character data. Call setCharacter and try again.");return this._withDataPromise?this._withDataPromise.then(()=>{if(!this._loadingManager.loadingFailed)return t()}):Promise.resolve().then(t)}_setupListeners(){this.target.addPointerStartListener(t=>{this._quiz&&(t.preventDefault(),this._quiz.startUserStroke(t.getPoint()))}),this.target.addPointerMoveListener(t=>{this._quiz&&(t.preventDefault(),this._quiz.continueUserStroke(t.getPoint()))}),this.target.addPointerEndListener(()=>{var t;null===(t=this._quiz)||void 0===t||t.endUserStroke()})}}ie._loadingManager=null,ie._loadingOptions=null,e["a"]=ie}).call(this,i("c8ba"))}}]);