Meshiest/recolored.html

## recolored.html
<!DOCTYPE html>
<script src="https://cdn.jsdelivr.net/npm/brs-js/dist/dist.js"></script>

<h3>Save Recolorer (by Owner Id)</h3>

<!-- Files uploaded will be  -->
<input id="fileInput" type="file" /> <br />

<a id="anchor" download="recolored.brs"></a>

<!-- This will be filled with the save object as JSON or the error message -->
<pre id="jsonElem"></pre>

<br />

<img src="https://i.imgur.com/BRpUsMQ.jpeg" width="400" />
<br />
<img src="https://i.imgur.com/2m7YUBi.png" width="400" />

<script>
  function hexToRgb(hex) {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function (m, r, g, b) {
      return r + r + g + g + b + b;
    });

    var result = /#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return [
      parseInt(result[1], 16),
      parseInt(result[2], 16),
      parseInt(result[3], 16),
    ];
  }

  fileInput.addEventListener('change', e => {
    const file = e.target.files[0];
    if (file) {
      anchor.setAttribute(
        'download',
        file.name.replace(/.brs$/i, ' recolored.brs')
      );
      // Read the file into a byte array
      file
        .arrayBuffer()
        .then(buff => {
          const save = BRS.read(new Uint8Array(buff));

          // Log the save object
          console.log(save);

          const colors = save.brick_owners.map(o => [...hexToRgb(o.id), 255]);
          for (const brick of save.bricks) {
            brick.color =
              colors.length > 256
                ? colors[brick.owner_index - 1]
                : brick.owner_index - 1;
          }

          save.colors = colors.length > 256 ? save.colors : colors;

          // Render the save object as formatted JSON
          jsonElem.innerText = '';

          const blob = new Blob([new Uint8Array(BRS.write(save))]);
          anchor.href = URL.createObjectURL(blob);
          anchor.innerText = 'Download Recolored Save';
        })
        .catch(err => {
          // Display the error
          jsonElem.innerText = 'Error: ' + err.message;
        });
    }
  });
</script>
	<!DOCTYPE html>
	<script src="https://cdn.jsdelivr.net/npm/brs-js/dist/dist.js"></script>

	<h3>Save Recolorer (by Owner Id)</h3>

	<!-- Files uploaded will be -->
	<input id="fileInput" type="file" /> <br />

	<a id="anchor" download="recolored.brs"></a>

	<!-- This will be filled with the save object as JSON or the error message -->
	<pre id="jsonElem"></pre>

	<br />

	<img src="https://i.imgur.com/BRpUsMQ.jpeg" width="400" />
	<br />
	<img src="https://i.imgur.com/2m7YUBi.png" width="400" />

	<script>
	function hexToRgb(hex) {
	// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
	var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
	hex = hex.replace(shorthandRegex, function (m, r, g, b) {
	return r + r + g + g + b + b;
	});

	var result = /#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
	return [
	parseInt(result[1], 16),
	parseInt(result[2], 16),
	parseInt(result[3], 16),
	];
	}

	fileInput.addEventListener('change', e => {
	const file = e.target.files[0];
	if (file) {
	anchor.setAttribute(
	'download',
	file.name.replace(/.brs$/i, ' recolored.brs')
	);
	// Read the file into a byte array
	file
	.arrayBuffer()
	.then(buff => {
	const save = BRS.read(new Uint8Array(buff));

	// Log the save object
	console.log(save);

	const colors = save.brick_owners.map(o => [...hexToRgb(o.id), 255]);
	for (const brick of save.bricks) {
	brick.color =
	colors.length > 256
	? colors[brick.owner_index - 1]
	: brick.owner_index - 1;
	}

	save.colors = colors.length > 256 ? save.colors : colors;

	// Render the save object as formatted JSON
	jsonElem.innerText = '';

	const blob = new Blob([new Uint8Array(BRS.write(save))]);
	anchor.href = URL.createObjectURL(blob);
	anchor.innerText = 'Download Recolored Save';
	})
	.catch(err => {
	// Display the error
	jsonElem.innerText = 'Error: ' + err.message;
	});
	}
	});
	</script>