0xe4f517a4…f7b9sent to0x96a83b48…d253·#22,568,072·view on Etherscan
class Loader{constructor(t,e={}){this.options={color:"#fff",width:"30%",...e},this.steps=7,this.step=1/this.steps,this.progress=0,this.progressRender=.001,this.progressRenderLocal=.001,this._isVisible=!1,this.element=document.createElement("div"),this.element.className="ryokan-loader",this.element.style.width="30%",this.element.style.zIndex="9999",this.element.style.position="absolute",this.element.style.bottom=0,this.element.style.left="50%",this.element.style.transform="translate(-50%, -50%)",this.element.style.backgroundColor="#17140B",this.element.style.padding="20px",this.element.style.border="1px solid #fff",this.barContainer=document.createElement("div"),this.barContainer.className="ryokan-loader-bar-container",this.barContainer.style.height="4px",this.barContainer.style.backgroundColor="#000",this.barContainer.style.opacity=.8,this.barContainer.style.overflow="hidden",this.barContainer.style.position="relative",this.bar=document.createElement("div"),this.bar.className="ryokan-loader-bar",this.bar.style.height="100%",this.bar.style.width="0%",this.bar.style.backgroundColor="#fff",this.bar.style.transition="width 0.3s ease-in-out",this.bar.style.position="absolute",this.bar.style.left="0",this.bar.style.top="0",this.barContainer.appendChild(this.bar),this.element.appendChild(this.barContainer),t&&("string"==typeof t?document.querySelector(t).appendChild(this.element):t.appendChild(this.element)),this.setProgress(0)}update(t){return this.progress+=this.step,this.setProgress(this.progress),this}setProgress(t){const e=Math.max(0,Math.min(1,t));return this.bar.style.width=`${e*100>>0}%`,this}setProgressRender(t){this.progressRender=t}setProgressRenderLocal(t){this.progressRenderLocal=t}getElement(){return this.element}show(){this._isVisible=!0,this.setProgress(0),this.element.style.display="block"}hide(){this._isVisible&&(this._isVisible=!1,this.element.style.display="none")}}let loader;const urlParams=new URLSearchParams(window.location.search),isRender=urlParams.has("render")&&"true"===urlParams.get("render");document.body.style.backgroundColor="#17140b";const canvas=document.querySelector("canvas")||document.createElement("canvas");canvas.id="defaultCanvas0",canvas.parentNode||document.body.appendChild(canvas);const cid=tokenData.externalAssetDependencies[0].cid,preferredGateway=tokenData.preferredIPFSGateway,tokenId=tokenData.tokenId.slice(-1);function createUrl(t,e,r){return`${t}${e}/moments-${r}.jpg`}async function loadImage(){const t=canvas.getContext("2d");loader=new Loader(document.body),loader.show(),loader.setProgress(.1);const e=createUrl(preferredGateway,cid,tokenId);console.log("Trying URL:",e),loader.update();try{const r=await loadImageFromUrl(e);loader.update(),displayImage(r,canvas,t),loader.hide()}catch(r){console.log("Failed to load from preferred gateway, trying fallback..."),loader.update();const a=createUrl("https://ipfs.io/ipfs/",cid,tokenId);console.log("Trying fallback URL:",a);try{const e=await loadImageFromUrl(a);loader.update(),displayImage(e,canvas,t),loader.hide()}catch(e){console.log("Failed to load from ipfs.io, trying florianzumbrunn.com fallback..."),loader.update();const r=`https://florianzumbrunn.com/fallbacks/moments/moments-${tokenId}.jpg`;console.log("Trying final fallback URL:",r);try{const e=await loadImageFromUrl(r);loader.update(),displayImage(e,canvas,t),loader.hide()}catch(e){console.error("Failed to load image from all sources",e),loader.setProgress(1),setTimeout(()=>loader.hide(),1500),t.fillStyle="red",t.font="20px Arial",t.fillText("Error loading image",50,100)}}}}function loadImageFromUrl(t){return new Promise((e,r)=>{const a=new Image;a.crossOrigin="Anonymous",a.onload=()=>{loader.setProgress(.9),e(a)},a.onerror=t=>r(t),a.src=t,loader.setProgress(.5)})}function displayImage(t,e,r){const a=isRender?.25:1;console.log("displaying image",t.width,t.height,isRender),e.width=t.width*a,e.height=t.height*a,e.style.width=e.width+"px",e.style.height=e.height+"px",r.drawImage(t,0,0,t.width*a,t.height*a),applyResponsiveStyling(e,t.width,t.height),loader&&(loader.setProgress(1),setTimeout(()=>loader.hide(),500))}function applyResponsiveStyling(t,e,r){t.style.maxWidth="100%",t.style.maxHeight="100vh",t.style.width="auto",t.style.height="auto";const a=t.parentElement||document.body;a.style.display="flex",a.style.justifyContent="center",a.style.alignItems="center",a.style.height="100vh",a.style.margin="0",a.style.padding="0"}window.addEventListener("resize",()=>{canvas.width>0&&canvas.height>0&&applyResponsiveStyling(canvas,canvas.width,canvas.height)}),document.addEventListener("DOMContentLoaded",()=>{document.body.style.margin="0",document.body.style.padding="0",document.body.style.overflow="hidden",loadImage()});