smitch88/1.html

## 1.html
<!-- Inscription html file. "src" is an already inscribed `assembler.js` at https://ordinals.com/content/10215b3d07fd53c5a97fe701d7681e9b9049d9b369b85c19a206cee3747bdf19i0. data-height & data-width are the trait layer sizes. data-ids are trait inscription ids. -->
<script id="config"
        src="/content/10215b3d07fd53c5a97fe701d7681e9b9049d9b369b85c19a206cee3747bdf19i0"
        data-token-id="69420"
        data-height="1460"
        data-width="1000"
        data-ids="756ef03122e4bc39cd867b2d8d06845bbd9ebae6a48e23e951593c0cf2f7a1bbi0,55c0aa11543bcd2c07932bf825f9cf4d46eeb4eae0633983b33919d33f10dda2i4,cd2cabfc0779d3ffd6fc91c0b3296dddf2ba24d1a720e844d9e094d44c11f5f1i3,ba29de2e0a5bcad7248d4ff0452fa868df237b1bdf79fb4f810427edbb7b8bf1i2,5a3c7e26305548a4c616b61d899ecc139ce64f68bfe41b085d94a97ca37d8df3i2,1785a69e69eb0a44c98a04293a066eaebdb9b884089d73d6efb01c7d1e101feci7,0200a772d01023e124d7bbd4c92585361e52443f25f22cd28ede0715efce2c2ci8,e549a342b57781b649cc99c9b77a65f319833b73106705829ea6378b9e088f48i3">
</script>

## assembler.js
function initialize() {
  const tokenId = document.getElementById('config').getAttribute(
    'data-token-id');
  const ids = document.getElementById('config').getAttribute('data-ids').split(
    ',');
  const width = document.getElementById('config').getAttribute('data-height');
  const height = document.getElementById('config').getAttribute('data-width');

  const html = `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>#${tokenId}</title>
        <style>
        body, html {
          margin: 0;
          padding: 0;
          height: 100%;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      </style>
      </head>
      <body>
        <canvas id="canvas"></canvas>
      </body>
    </html>`;

  document.documentElement.innerHTML = html;

  const c = document.getElementById('canvas'),
    t = c.getContext('2d');
  const aspectRatio = Number(width) / Number(height);

  function resizeCanvas() {
    const windowAspect = window.innerWidth / window.innerHeight;
    if (windowAspect > aspectRatio) {
      c.height = window.innerHeight;
      c.width = c.height * aspectRatio;
    } else {
      c.width = window.innerWidth;
      c.height = c.width / aspectRatio;
    }

    async function load(url) {
      return new Promise((r, j) => {
        const i = new Image();
        i.onload = () => r(i);
        i.onerror = j;
        i.src = url;
      });
    }

    async function render() {
      (await Promise.all(ids.map(id => load('/content/' + id)))).forEach(i =>
        t.drawImage(i, 0, 0, c.width, c.height));
    }

    render();
  }

  window.addEventListener('resize', resizeCanvas);

  resizeCanvas();
}

window.onload = function() {
  initialize();
}
	<!-- Inscription html file. "src" is an already inscribed `assembler.js` at https://ordinals.com/content/10215b3d07fd53c5a97fe701d7681e9b9049d9b369b85c19a206cee3747bdf19i0. data-height & data-width are the trait layer sizes. data-ids are trait inscription ids. -->
	<script id="config"
	src="/content/10215b3d07fd53c5a97fe701d7681e9b9049d9b369b85c19a206cee3747bdf19i0"
	data-token-id="69420"
	data-height="1460"
	data-width="1000"
	data-ids="756ef03122e4bc39cd867b2d8d06845bbd9ebae6a48e23e951593c0cf2f7a1bbi0,55c0aa11543bcd2c07932bf825f9cf4d46eeb4eae0633983b33919d33f10dda2i4,cd2cabfc0779d3ffd6fc91c0b3296dddf2ba24d1a720e844d9e094d44c11f5f1i3,ba29de2e0a5bcad7248d4ff0452fa868df237b1bdf79fb4f810427edbb7b8bf1i2,5a3c7e26305548a4c616b61d899ecc139ce64f68bfe41b085d94a97ca37d8df3i2,1785a69e69eb0a44c98a04293a066eaebdb9b884089d73d6efb01c7d1e101feci7,0200a772d01023e124d7bbd4c92585361e52443f25f22cd28ede0715efce2c2ci8,e549a342b57781b649cc99c9b77a65f319833b73106705829ea6378b9e088f48i3">
	</script>
	function initialize() {
	const tokenId = document.getElementById('config').getAttribute(
	'data-token-id');
	const ids = document.getElementById('config').getAttribute('data-ids').split(
	',');
	const width = document.getElementById('config').getAttribute('data-height');
	const height = document.getElementById('config').getAttribute('data-width');

	const html = `
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>#${tokenId}</title>
	<style>
	body, html {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	}
	</style>
	</head>
	<body>
	<canvas id="canvas"></canvas>
	</body>
	</html>`;

	document.documentElement.innerHTML = html;

	const c = document.getElementById('canvas'),
	t = c.getContext('2d');
	const aspectRatio = Number(width) / Number(height);

	function resizeCanvas() {
	const windowAspect = window.innerWidth / window.innerHeight;
	if (windowAspect > aspectRatio) {
	c.height = window.innerHeight;
	c.width = c.height * aspectRatio;
	} else {
	c.width = window.innerWidth;
	c.height = c.width / aspectRatio;
	}

	async function load(url) {
	return new Promise((r, j) => {
	const i = new Image();
	i.onload = () => r(i);
	i.onerror = j;
	i.src = url;
	});
	}

	async function render() {
	(await Promise.all(ids.map(id => load('/content/' + id)))).forEach(i =>
	t.drawImage(i, 0, 0, c.width, c.height));
	}

	render();
	}

	window.addEventListener('resize', resizeCanvas);

	resizeCanvas();
	}

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