text/javascript


/*
{
  "p": "brc69",
  "op": "compile",
  "s": "billycats",
}
*/

// EDIT
const collectionJsonUrl =
  "/content/63edf338067abf332f8cf759181e1040d4ef6fa441a2cb113c4114b0e47f6069i0";
const previewUrl = `/content/7b30ab20c5fd528b8c4b3a5a8e09a93140be99573a71e1343259254981f6f758i0`; // if preview available
const imageRendering = "auto"; // or pixelated
const renderSize = { width: 1000, height: 1000 }; // select image render size

async function loadImage(url) {
  return new Promise((resolve, reject) => {
    const image = document.createElement("img");
    image.src = url;
    image.crossOrigin = "anonymous";
    image.onload = () => {
      resolve(image);
    };
    image.onerror = () => {
      // Some display fallbacks for when the image fails to load
      if (!image.src.startsWith("https://")) {
        image.src = "https://ordinals.com" + url;
      } else if (image.src.startsWith("https://ordinals.com")) {
        image.src = "https://ord-mirror.magiceden.dev" + url;
      }
    };
  });
}

async function renderImage(imageEl, urls) {
  const canvas = document.createElement("canvas");
  canvas.width = renderSize.width;
  canvas.height = renderSize.height;

  const ctx = canvas.getContext("2d");
  ctx.imageSmoothingEnabled = false;

  const images = await Promise.all(urls.map(loadImage));
  images.forEach((_) => ctx.drawImage(_, 0, 0, canvas.width, canvas.height));
  imageEl.src = canvas.toDataURL("image/png");
}

async function getAllTraits(traitsUrl, retry = false) {
  try {
    const collectionMetadataRes = await fetch(traitsUrl);
    const collectionMetadata = await collectionMetadataRes.json();
    return collectionMetadata.attributes.map((_) => `/content/${_}`);
  } catch (e) {
    if (!retry) {
      const timestamp = Math.floor(Date.now() / (60000 * 10)); // 10 minutes
      const newTraitsUrl = `${traitsUrl}?timestamp=${timestamp}`;
      return getAllTraits(newTraitsUrl, true);
    }
    throw e;
  }
}

function createInitialImage() {
  // Manipulate the <body> tag
  document.body.style.margin = "0px";
  document.body.style.padding = "0px";

  // Create and set properties of the <img> tag
  const img = document.createElement("img");
  img.id = "img";
  img.style.height = "100%";
  img.style.width = "100%";
  img.style.objectFit = "contain";
  img.style.imageRendering = imageRendering;

  return img;
}

async function createInscriptionHtml() {
  const imageEl = createInitialImage();

  try {
    // Get traits
    const allTraits = await getAllTraits(collectionJsonUrl);

    // Process traits
    const selectedTraitIndexes = document
      .querySelector("script[t]")
      .getAttribute("t")
      .split(",");
    const traits = selectedTraitIndexes.map((_) => allTraits[+_]);

    // Render traits
    await renderImage(imageEl, traits);
  } catch (e) {
    console.error(e);

    // Render previewUrl image
    if (previewUrl) {
      imageEl.src = previewUrl;
    }
  } finally {
    // Append the <img> tag to the <body>
    document.body.appendChild(imageEl);
  }
}

window.onload = function () {
  createInscriptionHtml();
};