"/*\n{\n \"p\": \"brc69\",\n \"op\": \"compile\",\n \"s\": \"test\"\n}\n*/\n\n// EDIT\nconst collectionJsonUrl = '/content/';\nconst previewUrl = `/content/` // if preview available\nconst imageRendering = 'auto' // or pixelated\nconst renderSize = { width: 500, height: 500 }; // select image render size\n\nasync function loadImage (url) {\n return new Promise((resolve, reject) => {\n const image = document.createElement('img')\n image.src = url\n image.crossOrigin = 'anonymous'\n image.onload = () => {\n resolve(image)\n }\n image.onerror = () => {\n // Some display fallbacks for when the image fails to load\n if (!image.src.startsWith('https://')) {\n image.src = 'https://ordinals.com' + url\n } else if (image.src.startsWith('https://ordinals.com')) {\n image.src = 'https://ord-mirror.magiceden.dev' + url\n }\n }\n })\n}\n\nasync function renderImage(imageEl, urls) {\n const canvas = document.createElement('canvas');\n canvas.width = renderSize.width;\n canvas.height = renderSize.height;\n\n const ctx = canvas.getContext(\"2d\");\n ctx.imageSmoothingEnabled = false;\n\n const images = await Promise.all((urls).map(loadImage))\n images.forEach(_ => ctx.drawImage(_, 0, 0, canvas.width, canvas.height))\n imageEl.src = canvas.toDataURL(\"image/png\")\n}\n\nasync function getAllTraits(traitsUrl, retry = false) {\n try {\n const collectionMetadataRes = await fetch(traitsUrl)\n const collectionMetadata = await collectionMetadataRes.json()\n return collectionMetadata.attributes.map(_ => `/content/${_}`)\n } catch (e) {\n if (!retry) {\n const timestamp = Math.floor(Date.now() / (60000 * 10)) // 10 minutes\n const newTraitsUrl = `${traitsUrl}?timestamp=${timestamp}`\n return getAllTraits(newTraitsUrl, true)\n }\n throw e\n }\n}\n\nfunction createInitialImage () {\n // Manipulate the tag\n document.body.style.margin = '0px';\n document.body.style.padding = '0px';\n\n // Create and set properties of the tag\n const img = document.createElement('img');\n img.id = 'img';\n img.style.height = '100%';\n img.style.width = '100%';\n img.style.objectFit = 'contain';\n img.style.imageRendering = imageRendering;\n\n return img\n}\n\nasync function createInscriptionHtml() {\n const imageEl = createInitialImage()\n\n try {\n // Get traits\n const allTraits = await getAllTraits(collectionJsonUrl)\n\n // Process traits\n const selectedTraitIndexes = document.querySelector('script[t]').getAttribute('t').split(',');\n const traits = selectedTraitIndexes.map(_ => allTraits[+_])\n\n // Render traits\n await renderImage(imageEl, traits);\n } catch (e) {\n console.error(e)\n\n // Render previewUrl image\n if (previewUrl) {\n imageEl.src = previewUrl\n }\n } finally {\n // Append the tag to the \n document.body.appendChild(imageEl);\n }\n}\n\nwindow.onload = function() {\n createInscriptionHtml();\n}\n"