~thewhodidthis/dirtfoulandbooty

07aa4206894c35f93f7015bd2367e9ff5737f3c1 — thewhodidthis 2 months ago 83f08d4
js: link animation start to flash ready event
2 files changed, 8 insertions(+), 6 deletions(-)

M bundle.js
M client.js
M bundle.js => bundle.js +1 -1
@@ 18,4 18,4 @@
        }
      </style>
      <slot></slot>
    `);this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t)}static get observedAttributes(){return["flash","ready"]}get flash(){return this.getAttribute("flash")}set flash(t){this.setAttribute("flash",t)}get ready(){return this.getAttribute("ready")}set ready(t){this.setAttribute("ready",t)}get timeout(){let t=this.hasAttribute("timeout")?this.getAttribute("timeout"):1500;return parseInt(t,10)}set timeout(t){Number.isNaN(t)||this.setAttribute("timeout",t)}attributeChangedCallback(t,e,n){switch(t){case"ready":{if(n!=="null"){let o=new Event("ready");this.innerText="",this.dispatchEvent(o)}break}case"flash":{let o=setTimeout(()=>{clearTimeout(o),this.ready=!0},this.timeout);this.innerText=n,this.ready=null;break}}}},q=(s,t,e,n,o,c)=>{let r=s.canvas||s,b=t.canvas||t,x=e||0,y=n||0,E=o||0,w=c||0,[l,u]=[r.width-x,r.height-y],v=b.context||b.getContext("2d");v.clearRect(E,w,l,u),v.drawImage(r,x,y,l,u,E,w,l,u)},h=s=>({get context(){return this.canvas.getContext("2d")},canvas:s,source(t,e,n){return q(t,this.context,e,n),this},target(t,e,n){return q(this.context,t,0,0,e,n),this}}),L=(s,t=s)=>{let e=document.createElement("canvas"),n=Object.assign(e,{width:s,height:t});return h(n)};"customElements"in window&&(customElements.define("just-scream",A),customElements.define("just-flash",I));var j=document.querySelector("just-flash"),M=document.getElementById("figure"),m=document.getElementById("canvas"),g=document.createElement("img"),R=h(m),i=h(m.cloneNode());M.appendChild(i.canvas);R.context.rotate(Math.PI/180);i.context.rotate(Math.PI/-90);var{width:f,height:S}=m,z=L(f,S),N=s=>{let t=s.getImageData(0,0,f,S),e=t.data;for(let n=0,o=e.length;n<o;n+=4){let c=e[n+2],r=e[n+3];e[n+2]=c>25?c:255,e[n+3]=e[n+2]===255?0:r}s.putImageData(t,0,0)},p=0,{start:P}=T((s,t)=>{if(t%15==0){let e=f*p;z.source(g,e,0).target(R).target(i),N(i.context),p+=1,p%=119}});g.addEventListener("load",P);g.setAttribute("src","film.png");window.addEventListener("load",()=>{"serviceWorker"in navigator&&navigator.serviceWorker.register("serviceworker.js").catch(console.log),j.ready=!0});})();
    `);this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t)}static get observedAttributes(){return["flash","ready"]}get flash(){return this.getAttribute("flash")}set flash(t){this.setAttribute("flash",t)}get ready(){return this.getAttribute("ready")}set ready(t){this.setAttribute("ready",t)}get timeout(){let t=this.hasAttribute("timeout")?this.getAttribute("timeout"):1500;return parseInt(t,10)}set timeout(t){Number.isNaN(t)||this.setAttribute("timeout",t)}attributeChangedCallback(t,e,n){switch(t){case"ready":{if(n!=="null"){let o=new Event("ready");this.innerText="",this.dispatchEvent(o)}break}case"flash":{let o=setTimeout(()=>{clearTimeout(o),this.ready=!0},this.timeout);this.innerText=n,this.ready=null;break}}}},q=(s,t,e,n,o,c)=>{let r=s.canvas||s,b=t.canvas||t,y=e||0,E=n||0,x=o||0,v=c||0,[l,u]=[r.width-y,r.height-E],w=b.context||b.getContext("2d");w.clearRect(x,v,l,u),w.drawImage(r,y,E,l,u,x,v,l,u)},h=s=>({get context(){return this.canvas.getContext("2d")},canvas:s,source(t,e,n){return q(t,this.context,e,n),this},target(t,e,n){return q(this.context,t,0,0,e,n),this}}),j=(s,t=s)=>{let e=document.createElement("canvas"),n=Object.assign(e,{width:s,height:t});return h(n)};"customElements"in window&&(customElements.define("just-scream",A),customElements.define("just-flash",I));var M=document.getElementById("figure"),m=document.getElementById("canvas"),g=document.createElement("img"),R=h(m),i=h(m.cloneNode());M.appendChild(i.canvas);R.context.rotate(Math.PI/180);i.context.rotate(Math.PI/-90);var{width:f,height:L}=m,z=j(f,L),N=s=>{let t=s.getImageData(0,0,f,L),e=t.data;for(let n=0,o=e.length;n<o;n+=4){let c=e[n+2],r=e[n+3];e[n+2]=c>25?c:255,e[n+3]=e[n+2]===255?0:r}s.putImageData(t,0,0)},p=0,{start:P}=T((s,t)=>{if(t%15==0){let e=f*p;z.source(g,e,0).target(R).target(i),N(i.context),p+=1,p%=119}}),S=document.querySelector("just-flash");g.setAttribute("src","film.png");g.addEventListener("load",()=>{S.ready=!0});S.addEventListener("ready",P);window.addEventListener("load",()=>{"serviceWorker"in navigator&&navigator.serviceWorker.register("serviceworker.js").catch(console.log)});})();

M client.js => client.js +7 -5
@@ 7,8 7,6 @@ if ("customElements" in window) {
  customElements.define("just-flash", Flash)
}

const flash = document.querySelector("just-flash")

const figure = document.getElementById("figure")
const canvas = document.getElementById("canvas")
const master = document.createElement("img")


@@ 53,13 51,17 @@ const { start } = createLoop((_, frame) => {
  }
})

master.addEventListener("load", start)
const flash = document.querySelector("just-flash")

master.setAttribute("src", "film.png")
master.addEventListener("load", () => {
  flash.ready = true
})

flash.addEventListener("ready", start)

window.addEventListener("load", () => {
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("serviceworker.js").catch(console.log)
  }

  flash.ready = true
})