text/javascript

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

// EDIT
const collectionJsonUrl =
  "/content/46c6cb40bf0518c891ccd6228f8236c5e48250b6e7d73e30be88ad26c3ad413ai0"; //'/content/<deploy inscription id>';
const imageRendering = "auto"; // or pixelated
const renderSize = { width: 800, height: 800 }; // 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, order) {
  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));
  order.forEach((i) =>
    ctx.drawImage(images[i], 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;
  } 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 at = document.querySelector("script[t]");
    const ao = document.querySelector("script[o]");
    const au = document.querySelector("script[u]");
    if (at) {
      const selectedTraitIndexes = at.getAttribute("t").split(",");
      if (ao) {
        selectedTraitOrders = ao.getAttribute("o").split(",");
      } else {
        selectedTraitOrders = [0, 1, 2, 3, 4, 5, 6];
      }
      while (selectedTraitIndexes.length < 7) {
        selectedTraitIndexes.push(-1);
      }
      const traits = selectedTraitIndexes.map((v, i) =>
        v > -1
          ? "/content/" + allTraits[i].traits[v][1]
          : "/content/0f8d63f81ec087eabaf3e5e98a4a3a3c25981836b843c3e0c23d223cd6070af1i0"
      );

      // Render traits
      await renderImage(imageEl, traits, selectedTraitOrders);
    } else if (au) {
      const u = au.getAttribute("u");
      await renderImage(
        imageEl,
        ["/content/" + allTraits[7].traits[u][1]],
        [0]
      );
    }
  } catch (e) {
    console.error(e);
  } finally {
    // Append the <img> tag to the <body>
    document.body.appendChild(imageEl);
  }
}

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

Share this inscription:

Inscription #72,500,381

Parent inscription

#67,225,554

WEBP

Inscription info

bc1p9raw...escppzrd
3.94 kB
655,366,458,922,821
Jul 13, 2024, 5:34 PM(10 months ago)
256f1870...0e39b79d
852,005

Recursive modules

#71,104,673

WEBP

BRC69

#72,493,433

JSON

Activity

TypeFromToTxDate
Inscribed
bc1p9raw...escppzrd256f1870...0e39b79dJul 13, 2024, 5:34 PM