<html>
<body>
  <script>
  let nfo = {"p":"gen-brc-721","op":"mint","s":"ordibots",
  "t_ins":["fee71f3b8d958fb4b98142c3af8475a7d4a77e145289ab46a21642abafc4c2c9i0"],
  "id":"676",
  "a":[[0,"blue"],[0,"rainbow"],[0,"gold-triangular"],[0,"square"],[0,"neutral"]]};
  </script>

  <canvas id="canvas" width="500" height="500" style="image-rendering: pixelated;"></canvas>

  <script type="module">
    Promise.all(nfo.t_ins.map(url => fetch(`https://ordinals.com/content/${url}`).then(response => response.json())))
      .then(async deploys => {
        console.log(deploys)
        let renderUrl = deploys[0].r
          ? `/content/${deploys[0].r}`
          : '/content/2b126792c4a5d736dc071cea3a2439fd957f47b5cc7bf5c6fed5304ba5bd7f32i0';

        import(renderUrl).then(module => {
          let GBRC721RenderImage = module.GBRC721RenderImage;
          GBRC721RenderImage({
            "a": nfo.a.map((item, index) => [item[0], deploys[item[0]].traits[deploys[item[0]].trait_types[index]][item[1]].base64])
          });
        });
      })
      .catch(err => console.log(err));
  </script>
</body>
</html>