wip potential mii2studio integration with mii-unsecure

written BY HAND too 😤 separated the parts that aren't (minimal atp)

by arian_

HTML

<div id="error-container" style="display: none;">
  <h3>😭 JavaScript Error!! 😭</h3>
  <p id="error-message" style="color: red;"></p>
  <pre id="error-stacktrace" style="display: none;"></pre>
  <pre id="error-at">At <span></span></pre>
</div>
<!-- add error handling js before anything else is loaded
         also have somewhat tried to make it backwards compatible -->
<script>
  // handle all errors and show them at the top of the page
  window.addEventListener('error', function(event) {
    var errorContainer = document.getElementById('error-container');
    var errorMessage = document.getElementById('error-message');
    var errorStacktrace = document.getElementById('error-stacktrace');
    var errorAt = document.getElementById('error-at');
    errorMessage.textContent = event.message;
    // show stack trace if it has one
    if(event.error) {
      errorStacktrace.textContent = event.error.stack;
      errorStacktrace.style.display = '';
    } else {
      // otherwise just use error's line number
      errorAt.textContent = (event.source + ':' + event.lineno + ':' + event.colno);
      errorAt.style.display = '';
    }

    // un-hide the error container
    errorContainer.style.display = '';
  });
</script>

    <form onsubmit="addToResultListFromFormSubmit(event)">
      <br>
      <div>
        <input type="text" name="data" id="form-data" placeholder="your hex/b64 mii data here" value="AwAAQKBBOMSghAAA27iHMb5gKyoqQgAAWS1KAGEAcwBtAGkAbgBlAAAAAAAAABw3EhB7ASFuQxwNZMcYAAgegg0AMEGzW4JtAABvAHMAaQBnAG8AbgBhAGwAAAAAAJA6">
      </div>
      <input type="submit">
    </form>

    <h3>Outputs</h3>

    <ul id="results" class="results">
      <li id="result-template" style="display: none;">
        <img data-src="https://mii-unsecure.ariankordi.net/miis/image.png?width=128&data=" class=" fade-in">
        <br>
        <button onclick="handleCopyButtonAndUpdateCounter(event)">
          <span class="text-copy">Copy image...

CSS

body {
  /*font-family: sans-serif;
  */
  font-family:
    nintendo_NTLG,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  line-height: 180%;
  text-align: center;
}

.results {
  list-style-type: none;
  padding: 0;
}

ul {
  list-style-position: inside;
}

.results > li {
  margin: 0 auto 5px;
  padding: 5px;
}

.results img {
  border-radius: 5px;

  max-width: 100%;
  border: 1px solid #808080;
}

/* desktop (mobile is default) */
@media (width > 40em) {
  body {
    max-width: 26em;
    margin: 0 auto;
  }
  .load-error {
    max-width: 40vw;
  }
}

pre, code {
  white-space: pre-wrap;
  word-break: break-all;
}

.left-justified-compact {
  padding: 0; text-align: left; font-size: 13px; line-height: 150%;
}

code {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
}
code.code-block {
  display: block;
}
.image-80 {
 height: 80px;
 width: 80px;
}
.image-qr {
  height: 150px;
  width: 150px;
}
.image-qr-container {
  margin-top: 8px;
  padding: 5px;
  border-style: dotted;
  border-radius: 5px;
}
.image-qr-container:hover img {
  height: 100%;
  width: 100%;
}

JavaScript

// fill results with dummies for now

const defaultResults = [{
    name: 'Jasmine Ver3StoreData',
    data: 'AwBgMIJUICvpzY4vnWYVrXy7ikd01AAAWR1KAGEAcwBtAGkAbgBlAAAAAAAAABw3EhB7ASFuQxwNZMcYAAgegg0AMEGzW4JtAAAAAAAAAAAAAAAAAAAAAAAAAAAAAML0'
  },
  {
    name: 'Mii Studio Mii Obfuscated',
    data: 'f5fa013d45545e6048516667767883959a9da4acacb3bbc1d8e6eceef6fd8d98a0a7b2b0bbafb5b2c6c9d0c7ced5d8'
  },
  {
    name: 'Bro Mole High Ver3StoreData',
    data: 'AwAAQN9uZ0eqxkc022v7dby8sBv4ogAAAARiAHIAbwAAAAAAAAAAAAAAAAAAAEBALJI5AgKJRBZmNEYQzRINSE8A4igiQolZAAAAAAAAAAAAAAAAAAAAAAAAAAAAACpP'
  },
  {
    name: 'Mii Studio Mii Deobfuscated',
    data: '0402400431040402020b030a0604060208070906020100140402080200394004010c160213040d0f03020a060d09'
  },
  {
    name: 'Matt Wii',
    data: '800230de30c330c800000000000000000000000000004040200000000000 0000f2453c48494f08e2b06e06843558408f0a8ce0cb450a000000000000 0000000000000000000000000000'
  },
  {
    name: 'Mii Studio Mii Deobfuscated',
    data: '0050575e64525d61848d8a93c4cad5dfe0f3fa0212191a220f0f131f838af8f1f7fef9f5fbeff4f4000b120910171a'
  }
];

const resultsList = document.getElementById('results');
const resultTemplate = document.getElementById('result-template');

const addToResultList = (data, name) => {
  // clone the template so that we can put the result text in it
  const resultTemplateClone = resultTemplate.cloneNode(true);
  // remove the id so that it does not conflict
  resultTemplateClone.removeAttribute('id');
  // this SHOULD be the first span in summary
  // NOTE: this line is most likely to error out
  const nameInResult = resultTemplateClone.getElementsByTagName('summary')[0].firstElementChild;
  nameInResult.textContent = name;
  const imageInResult = resultTemplateClone.getElementsByTagName('img')[0];
  const imageInResultNewURL = imageInResult.getAttribute('data-src') + data;
  imageInResult.setAttribute('src', imageInResultNewURL);

  // define data as...