https://www.spritesheets.ai/_next/static/chunks/9023.7872fc6c49bf83e9.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9023],{68230:function(e,a,r){r.r(a),r.d(a,{default:function(){return s}});var t=r(57437),n=r(2265);function s(e){let{animations:a,defaultKey:s,bgColor:l,onAnimChange:i,onDefaultChange:c}=e,u=(0,n.useRef)(null),o=(0,n.useRef)(null),d=(0,n.useRef)(null),[m,f]=(0,n.useState)(0),[h,p]=(0,n.useState)(!0),[g,_]=(0,n.useState)(null),v=(0,n.useMemo)(()=>a.map(e=>"".concat(e.key,"::").concat(e.gifUrl)).sort().join("|"),[a]);return((0,n.useEffect)(()=>{if(!u.current||0===a.length)return;let e=!1;return(async()=>{try{let t=(await r.e(2764).then(r.t.bind(r,35170,23))).default,{default:n}=await Promise.all([r.e(2764),r.e(5832)]).then(r.bind(r,35832));if(e)return;let c=u.current,m=Math.max(c.clientWidth,320),h=Math.max(c.clientHeight,500),g=new n({animations:a,defaultAnimationKey:s},e=>i(e),e=>f(e),()=>{e||p(!1)});d.current=g;let _=new t.Game({type:t.CANVAS,parent:c,width:m,height:h,backgroundColor:l,pixelArt:!0,scene:g,scale:{mode:t.Scale.FIT,autoCenter:t.Scale.CENTER_BOTH},input:{keyboard:!0}});o.current=_}catch(a){if(!e){var t;_(null!==(t=a.message)&&void 0!==t?t:"Failed to initialize Phaser"),p(!1)}}})(),()=>{e=!0,o.current&&(o.current.destroy(!0),o.current=null,d.current=null)}},[v]),(0,n.useEffect)(()=>{d.current&&d.current.setDefaultAnimation&&d.current.setDefaultAnimation(s)},[s]),(0,n.useEffect)(()=>{let e=o.current;if(!e)return;let a=parseInt(l.replace("#",""),16);if(!isNaN(a)){var r;e.renderer.config.backgroundColor.setFromRGB({r:a>>16&255,g:a>>8&255,b:255&a});let t=d.current;(null==t?void 0:null===(r=t.cameras)||void 0===r?void 0:r.main)&&t.cameras.main.setBackgroundColor(l)}},[l]),g)?(0,t.jsxs)("div",{className:"phaser-game__error",children:[(0,t.jsx)("p",{children:"Failed to load playground"}),(0,t.jsx)("span",{children:g})]}):(0,t.jsxs)("div",{className:"phaser-game",children:[h&&(0,t.jsxs)("div",{className:"phaser-game__loading",children:[(0,t.jsxs)("span",{children:["Loading animations… ",m,"%"]}),(0,t.jsx)("div",{className:"phaser-game__progress",children:(0,t.jsx)("div",{className:"phaser-game__progress-fill",style:{width:"".concat(m,"%")}})})]}),(0,t.jsx)("div",{ref:u,className:"phaser-game__canvas",style:{opacity:h?0:1,minHeight:500}})]})}}}]);