vrid/lib/index.js

let uid = null;
let subscribed = false;
let credits = 0;
Promise.all([
  vrid.getUser(),
  vrid.getSubscribed(),
])
  .then(([
    newUser,
    newSubscribed,
  ]) => {
    const _getCredits = () => {
      if (newUser) {
        return vrid.getRaw('credits/' + newUser.uid)
          .then(credits => credits || 0);
      } else {
        return Promise.resolve(0);
      }
    };

    _getCredits()
      .then(newCredits => {
        if (newUser) {
          uid = newUser.uid;
          subscribed = newSubscribed;
          credits = newCredits;

          const accountTypeEl = document.getElementById('account-type');
          const accountTypeStoreEl = document.getElementById('account-type-store');
          if (subscribed) {
            accountTypeEl.innerText = 'Gold';
            accountTypeStoreEl.innerText = 'Gold';

            const goldInputEl = document.getElementById('gold-input');
            goldInputEl.checked = true;
            goldInputEl.dispatchEvent(new Event('change'));
          } else {
            accountTypeEl.innerText = 'Basic';
            accountTypeStoreEl.innerText = 'Basic';
          }

          _renderCredits(credits);

          document.body.classList.add('logged-in');
        }

        window.addEventListener('popstate', () => {
          _loadUrl(window.location.pathname);
        });
        _loadUrl(window.location.pathname);

        document.body.classList.add('loaded');
      });
  })
  .catch(err => {
    console.warn(err);
  });

const CONTROLLER_DEFAULT_OFFSETS = [0.2, -0.1, -0.2];

function $$(s) {
  const el = document.createElement('div');
  if (s) {
    el.innerHTML = s;
    return el.children[0];
  } else {
    return el;
  }
}
function _findParentNode(node, selector) {
  while (node) {
    const el = node.querySelector(selector);
    if (el) {
      return el;
    } else {
      node = node.parentNode;
    }
  }
  return null;
}
function _arrayify(array, numElements) {
  array = array || [];

  const result = Array(numElements);
  for (let i = 0; i < numElements; i++) {
    result[i] = array[i] || null;
  }
  return result;
}
function _capitalize(s) {
  return s[0].toUpperCase() + s.slice(1);
}
function _getAssetType(asset) {
  const match = asset.match(/^(ITEM|MOD|SKIN|FILE)\.(.+)$/);
  return {
    type: match[1].toLowerCase(),
    name: match[2].toLowerCase(),
  };
}
function _resJson(res) {
  if (res.status >= 200 && res.status < 300) {
    return res.json();
  } else {
    return Promise.reject({
      status: res.status,
      stack: 'API returned invalid status code: ' + res.status,
    });
  }
}
function _resBlob(res) {
  if (res.status >= 200 && res.status < 300) {
    return res.blog();
  } else {
    return Promise.reject({
      status: res.status,
      stack: 'API returned invalid status code: ' + res.status,
    });
  }
}
function _jsonParse(s) {
  try {
    return JSON.parse(s);
  } catch(err) {
    return undefined;
  }
}
const base64 = {
  encode: buffer => {
    var bytes = new Uint8Array(buffer);
    var base64    = ''
    var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'

    var byteLength    = bytes.byteLength
    var byteRemainder = byteLength % 3
    var mainLength    = byteLength - byteRemainder

    var a, b, c, d
    var chunk

    // Main loop deals with bytes in chunks of 3
    for (var i = 0; i < mainLength; i = i + 3) {
      // Combine the three bytes into a single integer
      chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2]

      // Use bitmasks to extract 6-bit segments from the triplet
      a = (chunk & 16515072) >> 18 // 16515072 = (2^6 - 1) << 18
      b = (chunk & 258048)   >> 12 // 258048   = (2^6 - 1) << 12
      c = (chunk & 4032)     >>  6 // 4032     = (2^6 - 1) << 6
      d = chunk & 63               // 63       = 2^6 - 1

      // Convert the raw binary segments to the appropriate ASCII encoding
      base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d]
    }

    // Deal with the remaining bytes and padding
    if (byteRemainder == 1) {
      chunk = bytes[mainLength]

      a = (chunk & 252) >> 2 // 252 = (2^6 - 1) << 2

      // Set the 4 least significant bits to zero
      b = (chunk & 3)   << 4 // 3   = 2^2 - 1

      base64 += encodings[a] + encodings[b] + '=='
    } else if (byteRemainder == 2) {
      chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1]

      a = (chunk & 64512) >> 10 // 64512 = (2^6 - 1) << 10
      b = (chunk & 1008)  >>  4 // 1008  = (2^6 - 1) << 4

      // Set the 2 least significant bits to zero
      c = (chunk & 15)    <<  2 // 15    = 2^4 - 1

      base64 += encodings[a] + encodings[b] + encodings[c] + '='
    }

    return base64
  },
};
const _makeId = () => {
  const arrayBuffer = new ArrayBuffer(32);
  const array = new Uint8Array(arrayBuffer);
  crypto.getRandomValues(array);
  return hex.encode(arrayBuffer);
};

function _requestPkid(publicKey) {
  return crypto.subtle.digest('SHA-256', new TextEncoder().encode(JSON.stringify(publicKey)))
    .then(digest => {
      let pkid = 0;
      for (let i = 0; i < digest.byteLength; i += 4) {
        pkid ^= new Uint32Array(digest, i, 1)[0];
      }
      return pkid;
    });
}
function _importPublicKey(publicKey) {
  return crypto.subtle.importKey('jwk', publicKey, {
    name: 'ECDSA',
    namedCurve: 'P-256',
  }, true, ['verify']);
}
function _importPrivateKey(privateKey) {
  return crypto.subtle.importKey('jwk', privateKey, {
    name: 'ECDSA',
    namedCurve: 'P-256',
  }, true, ['sign']);
}
function _importKey(key) {
  return Promise.all([
    _importPublicKey(key.publicKey),
    _importPrivateKey(key.privateKey),
  ])
    .then(([
      publicKey,
      privateKey,
    ]) => ({
      publicKey,
      privateKey,
    }));
}
function _requestVerifyAsset(assetSpec) {
  const {asset} = assetSpec;

  const {type, name} = _getAssetType(asset);
  if (type === 'item' || type === 'skin' || type === 'file') {
    const item = items[type === 'item' ? name : type];
    const {authority} = item;

    if (authority) {
      const {certificate} = assetSpec;

      if (certificate && Array.isArray(certificate) && certificate.length > 0) {
        const firstCertificate = certificate[0];

        if (firstCertificate && typeof firstCertificate.pkid === 'number' && typeof firstCertificate.publicKey === 'object' && typeof firstCertificate.timestamp === 'number' && typeof firstCertificate.signature === 'string') {
          const {publicKey, timestamp, signature} = firstCertificate;

          return Promise.all([
            _requestPkid(publicKey),
            _importPublicKey(publicKey),
          ])
            .then(([
              pkid,
              cryptoPublicKey,
            ]) => {
              if (pkid === authority) {
                const newAssetSpec = {
                  asset: assetSpec.asset,
                  quantity: assetSpec.quantity,
                  owner: assetSpec.owner,
                  timestamp: assetSpec.timestamp,
                };
                return crypto.subtle.verify({
                  name: 'ECDSA',
                  hash: {
                    name: 'SHA-256',
                  },
                }, cryptoPublicKey, hex.decode(signature), new TextEncoder().encode(JSON.stringify(newAssetSpec)))
                  .catch(err => {
                    console.warn(err);
                  });
              } else {
                return Promise.resolve(false);
              }
            });
        } else {
          return Promise.resolve(false);
        }
      } else {
        return Promise.resolve(false);
      }
    } else {
      return Promise.resolve(true);
    }
  } else if (type === 'mod') {
    const mod = mods.find(modSpec => modSpec.name === name);
    if (mod) {
      // XXX actually verify mod ownership

      return Promise.resolve(true);
    } else {
      console.warn('unknown asset: ', asset);

      return Promise.resolve(true);
    }
  } else {
    throw new Error('unknown asset type: ' + asset);
  }
}
function _requestFilterVerifiedAssets(assets) {
  const result = [];
  return Promise.all(assets.map(asset =>
    _requestVerifyAsset(asset).then(ok => {
      if (ok) {
        result.push(asset);
      }
    })
  ))
    .then(() => result);
}
const hex = {
  encode: buffer => {
    const bytes = new Uint8Array(buffer);
    let s = '';
    for (let i = 0; i < bytes.length; i++) {
      s += ('0' + (bytes[i]).toString(16)).slice(-2);
    }
    return s;
  },
  decode: hex => {
    const numBytes = hex.length / 2;
    const buffer = new ArrayBuffer(numBytes);
    const view = new Uint8Array(buffer);
    for (let i = 0; i < numBytes; i++) {
      const baseIndex = i * 2;
      view[i] = parseInt(hex.substring(baseIndex, baseIndex + 2), 16);
    }
    return buffer;
  },
};

const modalEl = document.getElementById('modal');
modalEl.addEventListener('click', e => {
  if (e.target === modalEl) {
    modalEl.innerHTML = '';

    e.preventDefault();
    e.stopPropagation();
  }
});

let items = null;
let mods = null;
let sales = null;
const _loadAllAssets = () => vrid.getRaw('items')
  .then(j => {
    items = j;
  });
const _loadAllMods = () => fetch(`https://my-site.zeovr.io/mods`)
  .then(_resJson)
  .then(j => {
    mods = j;
  });
const _loadAllSales = () => vrid.getRaw('sales')
  .then(sales => {
    sales = sales || {};
    return Promise.all(Object.keys(sales).map(k => {
      const sale = sales[k];
      return vrid.getRaw('users/' + sale.seller + '/name')
        .then(name => {
          sale.sellerName = name;
          return sale;
        });
    }));
  })
  .then(newSales => {
    sales = newSales;
  });
const _loadAssets = (filterType, assetsEl, getHtml) => Promise.all([
  _loadAllAssets(),
  _loadAllMods(),
  vrid.get('assets'),
])
  .then(([
    allAssetsResult,
    allModsResult,
    assets,
  ]) => {
    assets = assets || [];
    assets = assets.map(assetSpec => {
      const {type, name} = _getAssetType(assetSpec.asset);

      if (filterType ? type === filterType : type !== 'skin') {
        const item = (() => {
          switch (type) {
            case 'item': return _normalizeItem(items[name])
            case 'skin':
            case 'file': return _normalizeItem(items[type]);
            case 'mod': return _normalizeMod(mods.find(modSpec => modSpec.name === name));
            default: return null;
          }
        })();
        item.id = assetSpec.id;
        item.asset = assetSpec.asset;
        item.json = assetSpec.json;
        item.certificate = assetSpec.certificate;
        return _onlyDefined(item);
      } else {
        return null;
      }
    }).filter(item => item !== null);
    assets = _quantizeAssets(assets);

    _renderAssets(assets, assetsEl, getHtml);
  });
const _loadAvatars = () => Promise.all([
  vrid.getRaw('users'),
  vrid.getRaw('subscriptions'),
])
  .then(([
    users,
    subscriptions,
  ]) => users ? Object.keys(users).map(k => {
    const user = users[k];
    user.subscribed = Boolean(subscriptions[k]);
    return users[k];
  }) : []);

let selectedTarget = null;
let dragTarget = null;
const _renderAssets = (assets, assetsEl, getHtml) => {
  while (assetsEl.firstChild) {
    assetsEl.firstChild.destroy && assetsEl.firstChild.destroy();
    assetsEl.removeChild(assetsEl.firstChild);
  }

  _requestFilterVerifiedAssets(assets)
    .then(assets => {
      for (let i = 0; i < assets.length; i++) {
        const assetSpec = assets[i];
        const {id, asset, icon, description, owner, file, json, certificate, sale} = assetSpec;
        const assetEl = $$(getHtml(assetSpec));
        const giftLinkEl = assetEl.querySelector('.gift-link');
        if (giftLinkEl) {
          giftLinkEl.addEventListener('click', e => {
            const assetSpec = assets.find(assetSpec => assetSpec.id === id);
            if (assetSpec) {
              modalEl.innerHTML = `\
                <form class=form style="background-color: #FFF; width: 400px; padding: 30px;">
                  <div style="margin-bottom: 10px; font-size: 20px; font-weight: 400;">Gift <span style="font-weight: 600;">${assetSpec.asset}</span></div>
                  <label for=quantity style="display: flex; align-items: center;">
                    <div style="width: 60px; margin-right: 10px;">Quantity</div>
                    <input type=number value=1 min=1 placeholder=1 name=quantity placeholder=0 class=quantity style="margin-bottom: 10px; padding: 10px; background-color: #EEE; border: 0; flex-grow: 1;">
                  </label>
                  <label for=vrid style="display: flex; align-items: center;">
                    <div style="width: 60px; margin-right: 10px;">VRID</div>
                    <input type=text placeholder="Enter avatar's VRID" name=vrid class=vrid style="margin-bottom: 10px; padding: 10px; background-color: #EEE; border: 0; flex-grow: 1;">
                  </label>
                  <label for=submit style="display: flex; align-items: center;">
                    <div style="width: 60px; margin-right: 10px;"></div>
                    <input type=submit value="Send gift" name=submit class=submit-button>
                  </label>
                </form>
              `;
              const formEl = modalEl.querySelector('.form');
              const quantityEl = modalEl.querySelector('.quantity');
              const vridEl = modalEl.querySelector('.vrid');
              const submitButtonEl = modalEl.querySelector('.submit-button');

              quantityEl.max = assetSpec.assets.length;

              formEl.addEventListener('submit', e => {
                const quantity = quantityEl.value;
                const giftee = vridEl.value;

                if (quantity > 0 && quantity <= assetSpec.assets.length) {
                  submitButtonEl.oldValue = submitButtonEl.value;
                  submitButtonEl.value = 'Sending...';
                  submitButtonEl.disabled = true;

                  vrid.userExists(giftee)
                    .then(exists => {
                      if (exists) {
                        const removedAssetSpecs = assetSpec.assets.slice(assetSpec.assets.length - quantity);
                        const id = _makeId();
                        const gift = {
                          id,
                          giftee,
                          assets: removedAssetSpecs,
                        }

                        vrid.setRaw('gifts/' + id, gift)
                          .then(() => vrid.onNullRaw(`gifts/${assetSpec.certificate[0].signature}`))
                          .then(() => vrid.get('assets'))
                          .then(globalAssets => {
                            globalAssets = globalAssets.filter(assetSpec => !removedAssetSpecs.find(assetSpec2 => assetSpec2.id === assetSpec.id));
                            return vrid.set('assets', globalAssets);
                          })
                          .then(() => {
                            assetSpec.assets = assetSpec.assets.filter(assetSpec => !removedAssetSpecs.find(assetSpec2 => assetSpec2.id === assetSpec.id));
                            if (assetSpec.assets.length === 0) {
                              assets = assets.slice();
                              assets.splice(assets.indexOf(assetSpec), 1);
                            }
                            _renderAssets(assets, assetsEl, getHtml);

                            modalEl.innerHTML = '';
                          })
                          .catch(err => {
                            console.warn(err);
                          });
                      } else {
                        throw new Error('Giftee VRID does not exist: ' + giftee);
                      }
                    })
                    .catch(err => {
                      console.warn(err);

                      submitButtonEl.value = submitButtonEl.oldValue;
                      submitButtonEl.disabled = false;
                    });
                } else {
                  console.warn('invalid quantity');
                }

                e.preventDefault();
              });
            }

            e.preventDefault();
            e.stopPropagation();
          });
        }
        const sellLinkEl = assetEl.querySelector('.sell-link');
        if (sellLinkEl) {
          sellLinkEl.addEventListener('click', e => {
            const assetSpec = assets.find(assetSpec => assetSpec.id === id);
            if (assetSpec) {
              modalEl.innerHTML = `\
                <form class=form style="background-color: #FFF; width: 400px; padding: 30px;">
                  <div style="margin-bottom: 10px; font-size: 20px; font-weight: 400;">Sell <span style="font-weight: 600;">${assetSpec.asset}</span></div>
                  <label for=quantity style="display: flex; align-items: center;">
                    <div style="width: 60px; margin-right: 10px;">Quantity</div>
                    <input type=number value=1 min=1 placeholder=1 name=quantity class=quantity style="margin-bottom: 10px; padding: 10px; background-color: #EEE; border: 0; flex-grow: 1;">
                  </label>
                  <label for=value style="display: flex; align-items: center;">
                    <div style="width: 60px; margin-right: 10px;">Value (each)</div>
                    <input type=number value=1 name=value placeholder=0 class=value style="margin-bottom: 10px; padding: 10px; background-color: #EEE; border: 0; flex-grow: 1;">
                  </label>
                  <label for=submit style="display: flex; align-items: center;">
                    <div style="width: 60px; margin-right: 10px;"></div>
                    <input type=submit value=Sell name=submit class=submit-button>
                  </label>
                </form>
              `;
              const formEl = modalEl.querySelector('.form');
              const quantityEl = modalEl.querySelector('.quantity');
              const valueEl = modalEl.querySelector('.value');
              const submitButtonEl = modalEl.querySelector('.submit-button');

              quantityEl.max = assetSpec.assets.length;

              formEl.addEventListener('submit', e => {
                const quantity = parseInt(quantityEl.value, 10);
                const value = parseInt(valueEl.value, 10);

                if (quantity > 0 && quantity <= assetSpec.assets.length && value > 0) {
                  submitButtonEl.oldValue = submitButtonEl.value;
                  submitButtonEl.value = 'Selling...';
                  submitButtonEl.disabled = true;

                  const removedAssetSpecs = assetSpec.assets.slice(assetSpec.assets.length - quantity);
                  const id = _makeId();
                  const sale = {
                    id,
                    seller: uid,
                    asset: assetSpec.asset,
                    value,
                    assets: removedAssetSpecs,
                  };
                  vrid.setRaw('sales/' + id, sale)
                    .then(() => vrid.get('assets'))
                    .then(globalAssets => {
                      globalAssets = globalAssets.filter(assetSpec => !removedAssetSpecs.find(assetSpec2 => assetSpec2.id === assetSpec.id));
                      return vrid.set('assets', globalAssets);
                    })
                    .then(() => {
                      assetSpec.assets = assetSpec.assets.filter(assetSpec => !removedAssetSpecs.find(assetSpec2 => assetSpec2.id === assetSpec.id));
                      if (assetSpec.assets.length === 0) {
                        assets = assets.slice();
                        assets.splice(assets.indexOf(assetSpec), 1);
                      }
                      _renderAssets(assets, assetsEl, getHtml);

                      modalEl.innerHTML = '';
                    })
                    .catch(err => {
                      console.warn(err);

                      submitButtonEl.value = submitButtonEl.oldValue;
                      submitButtonEl.disabled = false;
                    });
                } else {
                  console.warn('invalid quantity');
                }

                e.preventDefault();
              });
            }

            e.preventDefault();
            e.stopPropagation();
          });
        }
        const exportLinkEl = assetEl.querySelector('.export-link');
        if (exportLinkEl) {
          exportLinkEl.addEventListener('click', e => {
            const assetSpec = assets.find(assetSpec => assetSpec.id === id);
            if (assetSpec) {
              modalEl.innerHTML = `\
                <form class=form style="background-color: #FFF; width: 400px; padding: 30px;">
                  <div style="margin-bottom: 10px; font-size: 20px; font-weight: 400;">Export <span style="font-weight: 600;">${assetSpec.asset}</span>?</div>
                  <div style="margin-bottom: 10px; color: #F44336; font-size: 13px; font-weight: 400;">Warning: Exporting an item removes it from your inventory.</div>
                  <div style="margin-bottom: 10px; font-size: 13px; font-weight: 400;">Drag and drop the downloaded file into the inventory window to import.</div>
                  <div style="display: flex; flex-direction: column;">
                    <div style="margin: 0; margin-top: 20px; margin: 10px 0; font-size: 13px; font-weight: 700; text-transform: uppercase;">Quantity</div>
                    <input type=number value=1 min=1 placeholder=1 class=quantity style="width: 100px; margin-bottom: 20px; background-color: #EEE; border: 0; border-radius: 5px; outline: none;">
                  </div>
                  <div style="display: flex;">
                    <input type=submit value="Export item" name=submit style="margin-right: 15px;" class=submit-button>
                    <input type=button value="Cancel" name=cancel class=cancel-button>
                  </div>
                </form>
              `;
              const formEl = modalEl.querySelector('.form');
              const quantityEl = modalEl.querySelector('.quantity');
              const submitButtonEl = modalEl.querySelector('.submit-button');

              quantityEl.max = assetSpec.assets.length;

              formEl.addEventListener('submit', e => {
                const quantity = quantityEl.value;
                if (quantity > 0 && quantity <= assetSpec.assets.length) {
                  submitButtonEl.oldValue = submitButtonEl.value;
                  submitButtonEl.value = 'Exporting...';
                  submitButtonEl.disabled = true;

                  const removedAssetSpecs = assetSpec.assets.slice(assetSpec.assets.length - quantity);
                  /* const {type} = _getAssetType(assetSpec.asset);
                  if (type === 'FILE') {
                    const a = document.createElement('a');
                    a.href = `https://my-site.zeovr.io/files/${assetSpec.file.id}/${assetSpec.file.name}`;
                    a.download = assetSpec.file.name;
                    a.click();
                  } else { */
                    const json = {
                      _zeo_item: true,
                      assets: removedAssetSpecs,
                    };
                    const s = JSON.stringify(json, null, 2);
                    const blob = new Blob([s], {
                      type: 'application/json',
                    });
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = `${assetSpec.json ? assetSpec.json.name : asset}.json`;
                    a.click();
                    URL.revokeObjectURL(url);
                  // }

                  Promise.all(removedAssetSpecs.map(assetSpec =>
                    vrid.removeRaw('burn/' + assetSpec.certificate[0].signature)
                  ))
                    .then(() => vrid.get('assets'))
                    .then(globalAssets => {
                      globalAssets = globalAssets.filter(assetSpec => !removedAssetSpecs.some(assetSpec2 => assetSpec2.id === assetSpec.id));
                      return vrid.set('assets', globalAssets);
                    })
                    .then(() => {
                      assetSpec.assets = assetSpec.assets.filter(assetSpec => !removedAssetSpecs.find(assetSpec2 => assetSpec2.id === assetSpec.id));
                      if (assetSpec.assets.length === 0) {
                        assets = assets.slice();
                        assets.splice(assets.indexOf(assetSpec), 1);
                      }
                      _renderAssets(assets, assetsEl, getHtml);

                      modalEl.innerHTML = '';
                    })
                    .catch(err => {
                      console.warn(err);

                      submitButtonEl.value = submitButtonEl.oldValue;
                      submitButtonEl.disabled = false;
                    });
                } else {
                  console.warn('invalid quantity');
                }

                e.preventDefault();
              });
              const cancelButtonEl = modalEl.querySelector('.cancel-button');
              cancelButtonEl.addEventListener('click', e => {
                modalEl.innerHTML = '';
              });
            }

            e.preventDefault();
            e.stopPropagation();
          });
        }
        const removeLinkEl = assetEl.querySelector('.remove-link');
        if (removeLinkEl) {
          removeLinkEl.addEventListener('click', e => {
            vrid.get('assets')
              .then(globalAssets => {
                const globalAssetSpec = globalAssets.find(assetSpec => assetSpec.id === id);
                modalEl.innerHTML = `\
                  <form class=form style="background-color: #FFF; width: 400px; padding: 30px;">
                    <div style="margin-bottom: 10px; font-size: 20px; font-weight: 400;">Discard <span style="font-weight: 600;">${globalAssetSpec.asset}?</span></div>
                    <div style="display: flex; flex-direction: column;">
                      <div style="margin: 0; margin-top: 20px; margin: 10px 0; font-size: 13px; font-weight: 700; text-transform: uppercase;">Quantity</div>
                      <input type=number value=1 min=1 placeholder=1 class=quantity style="width: 100px; margin-bottom: 20px; background-color: #EEE; border: 0; border-radius: 5px; outline: none;">
                    </div>
                    <input type=submit value=Discard item name=submit class=submit-button>
                  </form>
                `;

                const formEl = modalEl.querySelector('.form');
                const quantityEl = modalEl.querySelector('.quantity');
                const submitButtonEl = modalEl.querySelector('.submit-button');

                quantityEl.max = assetSpec.assets.length;

                formEl.addEventListener('submit', e => {
                  const quantity = quantityEl.value;
                  if (quantity > 0 && quantity <= assetSpec.assets.length) {
                    submitButtonEl.oldValue = submitButtonEl.value;
                    submitButtonEl.value = 'Discarding...';
                    submitButtonEl.disabled = true;

                    const removedAssetSpecs = assetSpec.assets.slice(assetSpec.assets.length - quantity);

                    globalAssets = globalAssets.filter(assetSpec => !removedAssetSpecs.some(assetSpec2 => assetSpec2.id === assetSpec.id));

                    vrid.set('assets', globalAssets)
                      .then(() => {
                        assetSpec.assets = assetSpec.assets.filter(assetSpec => !removedAssetSpecs.find(assetSpec2 => assetSpec2.id === assetSpec.id));
                        if (assetSpec.assets.length === 0) {
                          assets = assets.slice();
                          assets.splice(assets.indexOf(assetSpec), 1);
                        }
                        _renderAssets(assets, assetsEl, getHtml);

                        modalEl.innerHTML = '';
                      })
                      .catch(err => {
                        console.warn(err);

                        submitButtonEl.value = submitButtonEl.oldValue;
                        submitButtonEl.disabled = false;
                      });
                  } else {
                    console.warn('invalid quantity');
                  }

                  e.preventDefault();
                });
              });

            e.preventDefault();
            e.stopPropagation();
          });
        }
        /* const buyButtonEl = assetEl.querySelector('.buy-button');
        if (buyButtonEl) {
          buyButtonEl.addEventListener('click', e => {
            modalEl.innerHTML = `\
              <form class=form style="background-color: #FFF; width: 400px; padding: 30px;">
                <div style="margin-bottom: 10px; font-size: 20px; font-weight: 400;">Buy <span style="font-weight: 600;">${quantity}</span> <span style="font-weight: 600;">${assetSpec.asset}</span> for <span style="font-weight: 600;">¤${sale.value}?</span></div>
                <input type=submit value="Confirm purchase" name=submit class=submit-button>
              </form>
            `;
            const formEl = modalEl.querySelector('.form');
            const submitButtonEl = modalEl.querySelector('.submit-button');
            formEl.addEventListener('submit', e => {
              submitButtonEl.oldValue = submitButtonEl.value;
              submitButtonEl.value = 'Purchasing...';
              submitButtonEl.disabled = true;

              vrid.setRaw(`buys/${assetSpec.certificate[0].signature}`, true)
                .then(() => vrid.onNullRaw(`buys/${assetSpec.certificate[0].signature}`))
                .then(() => vrid.get('assets'))
                .then(inventoryAssets => {
                  const newAssetSpec = JSON.parse(JSON.stringify(assetSpec));
                  delete newAssetSpec.sale;
                  inventoryAssets = inventoryAssets.concat([newAssetSpec]);

                  return vrid.set('assets', inventoryAssets)
                    .then(() => vrid.getRaw('credits/' + newUser.uid))
                    .then(newCredits => {
                      assets = assets.slice();
                      assets.splice(assets.indexOf(assetSpec), 1);
                      _renderAssets(assets, assetsEl, getHtml);

                      credits = newCredits;
                      _renderCredits(credits);

                      modalEl.innerHTML = '';
                    });
                })
                .catch(err => {
                  console.warn(err);

                  submitButtonEl.value = submitButtonEl.oldValue;
                  submitButtonEl.disabled = false;
                });

              e.preventDefault();
            });
          });
        }
        const undoSaleButtonEl = assetEl.querySelector('.undo-sale-button');
        if (undoSaleButtonEl) {
          undoSaleButtonEl.addEventListener('click', e => {
            modalEl.innerHTML = `\
              <form class=form style="background-color: #FFF; width: 400px; padding: 30px;">
                <div style="margin-bottom: 10px; font-size: 20px; font-weight: 400;">Undo sale of <span style="font-weight: 600;">${quantity}</span> <span style="font-weight: 600;">${assetSpec.asset}</span> for <span style="font-weight: 600;">¤${sale.value}?</span></div>
                <input type=submit value="Confirm undo" name=submit class=submit-button>
              </form>
            `;
            const formEl = modalEl.querySelector('.form');
            const submitButtonEl = modalEl.querySelector('.submit-button');
            formEl.addEventListener('submit', e => {
              submitButtonEl.oldValue = submitButtonEl.value;
              submitButtonEl.value = 'Undoing...';
              submitButtonEl.disabled = true;

              vrid.setRaw(`unsales/${assetSpec.certificate[0].signature}`, true)
                .then(() => vrid.onNullRaw(`unsales/${assetSpec.certificate[0].signature}`))
                .then(() => vrid.get('assets'))
                .then(inventoryAssets => {
                  const newAssetSpec = JSON.parse(JSON.stringify(assetSpec));
                  delete newAssetSpec.sale;
                  inventoryAssets = inventoryAssets.concat([newAssetSpec]);

                  return vrid.set('assets', inventoryAssets)
                    .then(() => {
                      assets = assets.slice();
                      assets.splice(assets.indexOf(assetSpec), 1);

                      _renderAssets(assets, assetsEl, getHtml);

                      modalEl.innerHTML = '';
                    });
                })
                .catch(err => {
                  console.warn(err);

                  submitButtonEl.value = submitButtonEl.oldValue;
                  submitButtonEl.disabled = false;
                });

              e.preventDefault();
            });
          });
        }
        const logInToBuyButtonEl = assetEl.querySelector('.log-in-to-buy-button');
        if (logInToBuyButtonEl) {
          logInToBuyButtonEl.addEventListener('click', e => {
            _pushUrl('/');

            e.preventDefault();
          });
        } */

        if (!sale) {
          assetEl.tabIndex = -1;
          assetEl.draggable = true;
          assetEl.assetName = asset;
          assetEl.unselect = () => {
            assetEl.classList.remove('selected');

            const infoboxCanvasEl = _findParentNode(assetsEl, '.infobox-canvas');
            assetEl.removeCanvas(infoboxCanvasEl);

            // const infoboxEl = _findParentNode(assetsEl, '.infobox');
            // infoboxEl.style.display = 'none';
          };
          assetEl.addEventListener('click', e => {
            assetEl.focus();

            e.preventDefault();
          });
          assetEl.addEventListener('click', () => {
            if (selectedTarget) {
              selectedTarget.unselect();
              selectedTarget = null;
            }

            assetEl.classList.add('selected');

            const infoboxCanvasEl = _findParentNode(assetsEl, '.infobox-canvas');
            assetEl.addCanvas(infoboxCanvasEl);

            // const infoboxEl = _findParentNode(assetsEl, '.infobox');
            // infoboxEl.style.display = 'flex';

            const infoboxAssetEl = _findParentNode(assetsEl, '.infobox-asset');
            infoboxAssetEl.innerText = asset;
            const infoboxDescriptionEl = _findParentNode(assetsEl, '.infobox-description');
            infoboxDescriptionEl.innerText = description;

            selectedTarget = assetEl;
          });
          assetEl.addEventListener('dragstart', e => {
            e.dataTransfer.setData('text/plain', asset);
          });
          assetEl.addEventListener('dragend', e => {
            if (dragTarget) {
              if (dragTarget.tagName === 'EQUIPMENT') {
                dragTarget.setAssetSpec(assetSpec);
              }
            }

            dragTarget = null;
          });
          assetEl.addEventListener('dragover', e => {
            e.preventDefault();
          });
          assetEl.addEventListener('dragenter', e => {
            requestAnimationFrame(() => {
              dragTarget = assetEl;
            });
          });
          assetEl.addEventListener('dragleave', e => {
            if (dragTarget === assetEl) {
              dragTarget = null;
            }
          });
        }

        let live = true;
        assetEl.destroy = () => {
          live = false;
        };
        const _requestIconImg = () => {
          if (icon) {
            return new Promise((accept, reject) => {
              const img = new Image();
              img.onload = () => {
                accept(img);
              };
              img.onerror = err => {
                reject(err);
              };
              img.crossOrigin = 'Anonymous';
              img.src = 'data:application/octet-stream;base64,' + icon;
            });
          } else {
            const {type} = _getAssetType(asset);
            return type === 'mod' ? _getModImage() : _getQuestionMarkImage();
          }
        };
        _requestIconImg()
          .then(img => {
            if (live) {
              const spriteRenderer = new SpriteRenderer(img, assetEl.querySelector('canvas'));

              assetEl.destroy = () => {
                spriteRenderer.destroy();

                if (selectedTarget === assetEl) {
                  selectedTarget.unselect();
                  selectedTarget = null;
                }
              };
              assetEl.addCanvas = canvas => {
                spriteRenderer.addCanvas(canvas);
              };
              assetEl.removeCanvas = canvas => {
                spriteRenderer.removeCanvas(canvas);
              };
            }
          })
          .catch(err => {
            if (live) {
              console.warn(err);
            }
          });

        assetsEl.appendChild(assetEl);
      }

      const emptyEl = $$(getHtml(null));
      assetsEl.appendChild(emptyEl);
    });
};

const _loadBuyables = (storeMode, storeLink, storeIndexType) => {
  let el;
  let getHtml;
  let buyables;
  if (storeMode === 1) {
    el = document.getElementById('store-buyables')
    getHtml = _getBuyableStoreHtml;

    if (storeLink === 1) {
      buyables = sales
        // .map(_normalizeItem)
        .map(itemSpec => {
          const {type, name} = _getAssetType(itemSpec.asset);
          if (type === 'item') {
            itemSpec.icon = items[name].icon;
          } else if (type === 'mod') {
            const mod = mods.find(modSpec => modSpec.name === name) || null;
            equipmentSpec.icon = mod ? mod.icon : null;
          } else if (type === 'skin' || type === 'file') {
            itemSpec.icon = items[type].icon;
          }
          return itemSpec;
        });
    } else if (storeLink === 2) {
      buyables = sales
        .filter(itemSpec => _getAssetType(itemSpec.asset).type === 'item')
        // .map(_normalizeItem)
        .map(itemSpec => {
          const {type, name} = _getAssetType(itemSpec.asset);
          if (type === 'item') {
            itemSpec.icon = items[name].icon;
          } else if (type === 'mod') {
            const mod = mods.find(modSpec => modSpec.name === name) || null;
            equipmentSpec.icon = mod ? mod.icon : null;
          } else if (type === 'skin' || type === 'file') {
            itemSpec.icon = items[type].icon;
          }
          return itemSpec;
        });
    } else if (storeLink === 3) {
      buyables = sales
        .filter(itemSpec => _getAssetType(itemSpec.asset).type === 'mod')
        // .map(_normalizeItem)
        .map(itemSpec => {
          const {type, name} = _getAssetType(itemSpec.asset);
          if (type === 'item') {
            itemSpec.icon = items[name].icon;
          } else if (type === 'mod') {
            const mod = mods.find(modSpec => modSpec.name === name) || null;
            equipmentSpec.icon = mod ? mod.icon : null;
          } else if (type === 'skin' || type === 'file') {
            itemSpec.icon = items[type].icon;
          }
          return itemSpec;
        });
    } else if (storeLink === 4) {
      buyables = sales
        .filter(itemSpec => _getAssetType(itemSpec.asset).type === 'skin')
        // .map(_normalizeItem)
        .map(itemSpec => {
          const {type, name} = _getAssetType(itemSpec.asset);
          if (type === 'item') {
            itemSpec.icon = items[name].icon;
          } else if (type === 'mod') {
            const mod = mods.find(modSpec => modSpec.name === name) || null;
            equipmentSpec.icon = mod ? mod.icon : null;
          } else if (type === 'skin' || type === 'file') {
            itemSpec.icon = items[type].icon;
          }
          return itemSpec;
        });
    } else if (storeLink === 5) {
      buyables = sales
        .filter(itemSpec => _getAssetType(itemSpec.asset).type === 'file')
        // .map(_normalizeItem)
        .map(itemSpec => {
          const {type, name} = _getAssetType(itemSpec.asset);
          if (type === 'item') {
            itemSpec.icon = items[name].icon;
          } else if (type === 'mod') {
            const mod = mods.find(modSpec => modSpec.name === name) || null;
            equipmentSpec.icon = mod ? mod.icon : null;
          } else if (type === 'skin' || type === 'file') {
            itemSpec.icon = items[type].icon;
          }
          return itemSpec;
        });
    }
  } else if (storeMode === 2) {
    el = document.getElementById('index-buyables')
    getHtml = _getBuyableIndexHtml;

    if (storeLink === 1) {
      buyables = mods
        .map(_normalizeMod)
        .concat(
          Object.keys(items)
            .map(k => items[k])
            .map(_normalizeItem)
            .map(itemSpec => {
              const {type} = _getAssetType(itemSpec.asset);
              if (type === 'skin' || type === 'file') {
                itemSpec.icon = items[type].icon;
              }
              return itemSpec;
            })
        );
    } else if (storeLink === 2) {
      buyables = Object.keys(items)
        .map(k => items[k])
        .filter(itemSpec => _getAssetType(itemSpec.asset).type === 'item')
        .map(_normalizeItem)
        .map(itemSpec => {
          const {type} = _getAssetType(itemSpec.asset);
          if (type === 'skin' || type === 'file') {
            itemSpec.icon = items[type].icon;
          }
          return itemSpec;
        });
    } else if (storeLink === 3) {
      buyables = mods
        .map(_normalizeMod)
        .map(itemSpec => {
          const {type} = _getAssetType(itemSpec.asset);
          if (type === 'skin' || type === 'file') {
            itemSpec.icon = items[type].icon;
          }
          return itemSpec;
        });
    } else if (storeLink === 4) {
      buyables = Object.keys(items)
        .map(k => items[k])
        .filter(itemSpec => _getAssetType(itemSpec.asset).type === 'skin')
        .map(_normalizeItem)
        .map(itemSpec => {
          const {type} = _getAssetType(itemSpec.asset);
          if (type === 'skin' || type === 'file') {
            itemSpec.icon = items[type].icon;
          }
          return itemSpec;
        });
    } else if (storeLink === 5) {
      buyables = Object.keys(items)
        .map(k => items[k])
        .filter(itemSpec => _getAssetType(itemSpec.asset).type === 'file')
        .map(_normalizeItem)
        .map(itemSpec => {
          const {type} = _getAssetType(itemSpec.asset);
          if (type === 'skin' || type === 'file') {
            itemSpec.icon = items[type].icon;
          }
          return itemSpec;
        });
    }
  }

  if (storeIndexType === 2) {
    buyables = buyables
      .filter(item => item.owner === uid);
  }

  _renderBuyables(buyables, el, getHtml);
};
const _getBuyableStoreHtml = saleSpec => {
  const {id, asset, seller, value, sellerName} = saleSpec;
  const {type, name} = _getAssetType(asset);
  return `\
    <buyable class="${type}" style="display: flex; width: 200px; margin: 20px; background-color: #FFF; border-radius: 5px; flex-direction: column; overflow: hidden;">
      <div style="position: relative; display: flex; height: 40px; padding: 10px; box-shadow: 0 1px 5px rgba(0,0,0,0.1); font-size: 11px; align-items: center; text-transform: uppercase;">
        <div class=pill style="display: inline-flex; margin-right: 10px; padding: 2px 5px; color: #FFF; align-items: center;">${_capitalize(type)}</div>
        <div style="display: flex; flex-grow: 1; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
          Posted by ${sellerName}
        </div>
      </div>
      <div style="position: relative; display: flex; width: 200px; height: 130px; border-radius: 5px; box-shadow: 0 1px 5px rgba(0,0,0,0.1); flex-direction: column; justify-content: center; align-items: center;">
        <canvas width=80 height=80></canvas>
        <div style="display: flex; height: 50px; font-size: 16px; justify-content: center; align-items: center;">${name}</div>
      </div>
      <div style="display: flex; height: 60px; padding: 10px 0; justify-content: space-evenly; align-items: center; text-transform: uppercase;">
        <div style="display: flex; flex-direction: column;">
          <div style="display: flex; color: #909090; font-size: 11px; justify-content: center; align-items: center;">Price</div>
          <div style="display: flex; flex-grow: 1; font-size: 15px; justify-content: center; align-items: center;">${value}&nbsp;☄</div>
        </div>
        <div style="display: flex; flex-direction: column;">
          <div style="display: flex; color: #909090; font-size: 11px; justify-content: center; align-items: center;">Qty</div>
          <div style="display: flex; flex-grow: 1; font-size: 15px; justify-content: center; align-items: center;">
            <nav class=decrease-quantity  style="cursor: pointer; user-select: none;">
              <svg fill="#000000" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/><path d="M0-.5h24v24H0z" fill="none"/></svg>
            </nav>
            <div style="padding: 0 5px;"><span class=quantity>1</span>/${saleSpec.assets.length}</div>
            <nav class=increase-quantity style="cursor: pointer; user-select: none;">
              <svg fill="#000000" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
            </nav>
          </div>
        </div>
        <div style="display: flex; flex-direction: column;">
          <div style="display: flex; color: #909090; font-size: 11px; justify-content: center; align-items: center;">Total</div>
          <div style="display: flex; flex-grow: 1; font-size: 15px; justify-content: center; align-items: center;"><span class=total>${value}</span>&nbsp;☄</div>
        </div>
      </div>
      <div class=buy-button style="display: flex; height: 40px; padding: 10px; color: #FFF; font-size: 14px; justify-content: center; align-items: center; text-transform: uppercase;">Buy</div>
    </buyable>
  `;
};
const _getBuyableIndexHtml = assetSpec => {
  const {id, asset, quantity, icon, description, owner, file, json, certificate, sale} = assetSpec;
  const {type, name} = _getAssetType(asset);
  return `\
    <buyable class="${type}" style="display: flex; width: 100%; height: 50px; border-radius: 3px; align-items: center; white-space: nowrap; cursor: pointer;">
      <canvas width=40 height=40 style="margin: 0 10px;"></canvas>
      <div style="padding: 0 10px; flex: 1; overflow: hidden; text-overflow: ellipsis;">${name}</div>
      <div style="padding: 0 10px; flex: 2; overflow: hidden; text-overflow: ellipsis;">${description}</div>
      <div style="padding: 0 10px; flex: 1; overflow: hidden; text-overflow: ellipsis;">${owner}</div>
      <!-- <div style="padding: 0 10px; flex: 1; overflow: hidden; text-overflow: ellipsis;">${formatRelative(Date.now() - 100000000, new Date())}</div> -->
      <div style="padding: 0 10px; flex: 1; overflow: hidden; text-overflow: ellipsis;">$${10}</div>
      ${owner === uid ? `\
        <nav class=materialize-button style="padding: 0 10px; flex: 1; overflow: hidden; text-overflow: ellipsis; cursor: pointer;">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24" fill="#4CAF50"><path d="M16,13V11H21V13H16M14.83,7.76L17.66,4.93L19.07,6.34L16.24,9.17L14.83,7.76M11,16H13V21H11V16M11,3H13V8H11V3M4.93,17.66L7.76,14.83L9.17,16.24L6.34,19.07L4.93,17.66M4.93,6.34L6.34,4.93L9.17,7.76L7.76,9.17L4.93,6.34M8,13H3V11H8V13M19.07,17.66L17.66,19.07L14.83,16.24L16.24,14.83L19.07,17.66Z" /></svg>
        </nav>
        <nav class=unpublish-button style="padding: 0 10px; flex: 1; overflow: hidden; text-overflow: ellipsis; cursor: pointer;">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24" fill="#fe4242"><path d="M21.03,3L18,20.31C17.83,21.27 17,22 16,22H8C7,22 6.17,21.27 6,20.31L2.97,3H21.03M5.36,5L8,20H16L18.64,5H5.36M9,18V14H13V18H9M13,13.18L9.82,10L13,6.82L16.18,10L13,13.18Z" /></svg>
        </nav>
      ` : `\
        <nav style="padding: 0 10px; flex: 1; overflow: hidden; text-overflow: ellipsis; cursor: pointer;"></nav>
        <nav style="padding: 0 10px; flex: 1; overflow: hidden; text-overflow: ellipsis; cursor: pointer;"></nav>
      `}
    </buyable>
  `;
};
const infoboxTypes = [
  'item',
  'mod',
  'skin',
  'file',
];
const _renderBuyables = (assets, assetsEl, getHtml) => {
  while (assetsEl.firstChild) {
    assetsEl.firstChild.destroy && assetsEl.firstChild.destroy();
    assetsEl.removeChild(assetsEl.firstChild);
  }

  if (assets.length > 0) {
    _requestFilterVerifiedAssets(assets)
      .then(assets => {
        for (let i = 0; i < assets.length; i++) {
          const assetSpec = assets[i];
          const {id, asset, icon, description, owner, file, json, certificate} = assetSpec;
          const {type, name} = _getAssetType(asset);
          const assetEl = $$(getHtml(assetSpec));

          assetEl.tabIndex = -1;
          assetEl.assetName = asset;
          assetEl.unselect = () => {
            assetEl.classList.remove('selected');

            const infoboxCanvasEl = _findParentNode(assetsEl, '.infobox-canvas');
            assetEl.removeCanvas(infoboxCanvasEl);
            const infoboxTypeWrapEl = _findParentNode(assetsEl, '.infobox-type-wrap');
            for (let i = 0; i < infoboxTypes.length; i++) {
              infoboxTypeWrapEl.classList.remove(infoboxTypes[i]);
            }
            const infoboxAssetEl = _findParentNode(assetsEl, '.infobox-asset');
            infoboxAssetEl.innerText = '';
            const infoboxDescriptionEl = _findParentNode(assetsEl, '.infobox-description');
            infoboxDescriptionEl.innerText = '';

            // const infoboxEl = _findParentNode(assetsEl, '.infobox');
            // infoboxEl.style.display = 'none';
          };
          assetEl.addEventListener('click', e => {
            assetEl.focus();

            e.preventDefault();
          });
          assetEl.addEventListener('click', () => {
            if (selectedTarget) {
              selectedTarget.unselect();
              selectedTarget = null;
            }

            assetEl.classList.add('selected');

            const infoboxTypeEl = _findParentNode(assetsEl, '.infobox-type');
            infoboxTypeEl.innerText = type;
            const infoboxTypeWrapEl = _findParentNode(assetsEl, '.infobox-type-wrap');
            for (let i = 0; i < infoboxTypes.length; i++) {
              infoboxTypeWrapEl.classList.remove(infoboxTypes[i]);
            }
            infoboxTypeWrapEl.classList.add(type);

            const infoboxCanvasEl = _findParentNode(assetsEl, '.infobox-canvas');
            assetEl.addCanvas(infoboxCanvasEl);

            // const infoboxEl = _findParentNode(assetsEl, '.infobox');
            // infoboxEl.style.display = 'flex';

            const infoboxAssetEl = _findParentNode(assetsEl, '.infobox-asset');
            infoboxAssetEl.innerText = asset;
            const infoboxDescriptionEl = _findParentNode(assetsEl, '.infobox-description');
            infoboxDescriptionEl.innerText = description;

            selectedTarget = assetEl;
          });

          let live = true;
          assetEl.destroy = () => {
            live = false;
          };
          const _requestIconImg = () => {
            if (icon) {
              return new Promise((accept, reject) => {
                const img = new Image();
                img.onload = () => {
                  accept(img);
                };
                img.onerror = err => {
                  reject(err);
                };
                img.crossOrigin = 'Anonymous';
                img.src = 'data:application/octet-stream;base64,' + icon;
              });
            } else {
              const {type} = _getAssetType(asset);
              return type === 'mod' ? _getModImage() : _getQuestionMarkImage();
            }
          };
          _requestIconImg()
            .then(img => {
              if (live) {
                const spriteRenderer = new SpriteRenderer(img, assetEl.querySelector('canvas'));

                assetEl.destroy = () => {
                  spriteRenderer.destroy();

                  if (selectedTarget === assetEl) {
                    selectedTarget.unselect();
                    selectedTarget = null;
                  }
                };
                assetEl.addCanvas = canvas => {
                  spriteRenderer.addCanvas(canvas);
                };
                assetEl.removeCanvas = canvas => {
                  spriteRenderer.removeCanvas(canvas);
                };
              }
            })
            .catch(err => {
              if (live) {
                console.warn(err);
              }
            });

          const materializeButtonEl = assetEl.querySelector('.materialize-button');
          if (materializeButtonEl) {
            materializeButtonEl.addEventListener('click', e => {
              modalEl.innerHTML = `\
                <form class="form materialize-item-form" style="display: flex; background-color: #FFF; width: 400px; padding: 30px; flex-direction: column;" id=materialize-item-form>
                  <div style="margin-bottom: 10px; font-size: 20px; font-weight: 400;">Materialize <span style="font-weight: 600;">${asset}</span></div>
                  <div style="display: flex; flex-direction: column;">
                    <div style="margin: 0; margin-top: 20px; margin: 10px 0; font-size: 13px; font-weight: 700; text-transform: uppercase;">Quantity</div>
                    <input type=number value=1 placeholder=0 style="width: 100px; margin-bottom: 20px; background-color: #EEE; border: 0; border-radius: 5px; outline: none;" id=materialize-item-quantity>
                    <input type=submit value="Create" class=materialize-item-create-button style="margin-right: auto;">
                    <input type=button value="Creating..." class=materialize-item-creating-button style="margin-right: auto;">
                  </div>
                </form>
              `;

              const materializeItemFormEl = document.getElementById('materialize-item-form');
              const materializeItemQuantityEl = document.getElementById('materialize-item-quantity');
              materializeItemFormEl.addEventListener('submit', e => {
                document.body.classList.add('materializing-item');

                const asset = selectedTarget.assetName;
                const quantity = parseInt(materializeItemQuantityEl.value, 10);
                const _requestNewAssets = () => {
                  const promises = Array(quantity);
                  for (let i = 0; i < quantity; i++) {
                    const assetSpec = {
                      id: _makeId(),
                      asset,
                      timestamp: Date.now(),
                    };
                    promises[i] = _signAsset(assetSpec);
                  }
                  return Promise.all(promises);
                };

                Promise.all([
                  vrid.get('assets'),
                  _requestNewAssets(),
                ])
                .then(([
                  assets,
                  newAssets,
                ]) => {
                  assets = assets || [];
                  assets = assets.concat(newAssets);

                  return vrid.set('assets', assets)
                    .then(() => {
                      document.getElementById('inventory-link-2').click();

                      _pushUrl('/');

                      document.body.classList.remove('materializing-item');
                      modalEl.innerHTML = '';
                    });
                })
                .catch(err => {
                  console.warn(err);

                  document.body.classList.remove('materializing-item');
                  modalEl.innerHTML = '';
                });

                e.preventDefault();
              });
            });
          }
          const unpublishButtonEl = assetEl.querySelector('.unpublish-button');
          if (unpublishButtonEl) {
            unpublishButtonEl.addEventListener('click', e => {
              modalEl.innerHTML = `\
                <form class="form unpublish-item-form" style="display: flex; background-color: #FFF; width: 400px; padding: 30px; flex-direction: column;" id=unpublish-item-form>
                  <div style="margin-bottom: 10px; font-size: 20px; font-weight: 400;">Unpublish <span style="font-weight: 600;">${asset}</span>?</div>
                  <div style="display: flex; flex-direction: column;">
                    <input type=submit value="Unpublish" class=unpublish-item-publish-button style="margin-right: auto;">
                    <input type=button value="Unpublishing..." class=unpublish-item-publishing-button style="margin-right: auto;">
                  </div>
                </form>
              `;

              const unpublishItemFormEl = document.getElementById('unpublish-item-form');
              unpublishItemFormEl.addEventListener('submit', e => {
                document.body.classList.add('unpublishing-item');

                vrid.removeRaw('items/' + id)
                  .then(() => {
                    assets = assets.slice();
                    assets.splice(assets.indexOf(assetSpec), 1);
                    delete items[id];
                    _renderBuyables(assets, assetsEl, getHtml);

                    document.body.classList.remove('unpublishing-item');
                    modalEl.innerHTML = '';
                  })
                  .catch(err => {
                    console.warn(err);

                    document.body.classList.remove('unpublishing-item');
                    modalEl.innerHTML = '';
                  });

                e.preventDefault();
              });
            });
          }
          const quantityEl = assetEl.querySelector('.quantity');
          const totalEl = assetEl.querySelector('.total');
          const increaseQuantityEl = assetEl.querySelector('.increase-quantity');
          if (increaseQuantityEl) {
            increaseQuantityEl.addEventListener('click', () => {
              let quantity = parseInt(quantityEl.innerText, 10);
              quantity = Math.min(quantity + 1, assetSpec.assets.length);
              quantityEl.innerText = String(quantity);
              totalEl.innerText = String(quantity * assetSpec.value);
            });
          }
          const decreaseQuantityEl = assetEl.querySelector('.decrease-quantity');
          if (decreaseQuantityEl) {
            decreaseQuantityEl.addEventListener('click', () => {
              let quantity = parseInt(quantityEl.innerText, 10);
              quantity = Math.max(quantity - 1, 1);
              quantityEl.innerText = String(quantity);
              totalEl.innerText = String(quantity * assetSpec.value);
            });
          }
          const buyButtonEl = assetEl.querySelector('.buy-button');
          if (buyButtonEl) {
            buyButtonEl.addEventListener('click', e => {
              const quantity = parseInt(quantityEl.innerText, 10);

              modalEl.innerHTML = `\
                <form class="form buy-item-form" style="display: flex; background-color: #FFF; width: 400px; padding: 30px; flex-direction: column;" id=buy-item-form>
                  <div style="margin-bottom: 10px; font-size: 20px; font-weight: 400;">Buy <span style="font-weight: 600;">${quantity}</span> <span style="font-weight: 600;">${asset}</span> for <span style="font-weight: 600;">${quantity * assetSpec.value}☄</span>?</div>
                  <div style="display: flex; flex-direction: column;">
                    <input type=submit value="Buy" class=submit-button style="margin-right: auto;">
                  </div>
                </form>
              `;

              const buyItemFormEl = document.getElementById('buy-item-form');
              const submitButtonEl = modalEl.querySelector('.submit-button');
              buyItemFormEl.addEventListener('submit', e => {
                submitButtonEl.oldValue = submitButtonEl.value;
                submitButtonEl.value = 'Buying...';
                submitButtonEl.disabled = true;

                const removedAssetSpecs = assetSpec.assets.slice(assetSpec.assets.length - quantity);
                const buyId = _makeId();
                const buy = {
                  id: buyId,
                  sale: id,
                  buyer: uid,
                  assets: removedAssetSpecs.map(assetSpec => assetSpec.id),
                };
                vrid.setRaw('buys/' + buyId, buy)
                  .then(() => vrid.onNullRaw('buys/' + buyId))
                  .then(() => vrid.get('assets'))
                  .then(globalAssets => {
                    globalAssets = globalAssets.concat(removedAssetSpecs);
                    return vrid.set('assets', globalAssets);
                  })
                  .then(() => vrid.getRaw('credits/' + uid))
                  .then(newCredits => {
                    assetSpec.assets = assetSpec.assets.filter(assetSpec => !removedAssetSpecs.find(assetSpec2 => assetSpec2.id === assetSpec.id));
                    if (assetSpec.assets.length === 0) {
                      assets = assets.slice();
                      assets.splice(assets.indexOf(assetSpec), 1);
                    }
                    _renderBuyables(assets, assetsEl, getHtml);

                    credits = newCredits;
                    _renderCredits(credits);

                    document.body.classList.remove('buying-item');
                    modalEl.innerHTML = '';
                  })
                  .catch(err => {
                    console.warn(err);

                    submitButtonEl.value = submitButtonEl.oldValue;
                    submitButtonEl.disabled = false;
                  });

                e.preventDefault();
              });
            });
          }

          assetsEl.appendChild(assetEl);
        }
      });
  } else {
    const emptyEl = $$(`\
      <div style="display: flex; width: 100%; padding: 100px; font-size: 23px; font-weight: 400; justify-content: center; align-items: center;">Nothing here</div>
    `);
    assetsEl.appendChild(emptyEl);
  }
};

const avatarCanvasSize = 250;
const _renderAvatars = (avatars, avatarsEl) => {
  while (avatarsEl.firstChild) {
    avatarsEl.firstChild.destroy && avatarsEl.firstChild.destroy();
    avatarsEl.removeChild(avatarsEl.firstChild);
  }

  if (avatars.length > 0) {
    for (let i = 0; i < avatars.length; i++) {
      const avatar = avatars[i];
      const {name, subscribed} = avatar;

      const avatarEl = $$(`\
        <avatar style="margin-right: 10px; margin-bottom: 10px;">
          <div style="display: flex; padding: 10px; background-color: #212121; color: #FFF; align-items: center;">
            <div style="margin-right: auto;">${name}</div>
            ${subscribed ? `<div style="padding: 2px 5px; background-color: #673AB7; border-radius: 100px; font-size: 10px; text-transform: uppercase;">Gold</div>` : ''}
          </div>
          <canvas width=${avatarCanvasSize} height=${avatarCanvasSize} class=avatar-canvas></canvas>
        </avatar>
      `);
      const avatarCanvasEl = avatarEl.querySelector('.avatar-canvas');
      avatarCanvasEl.width = avatarCanvasSize * window.devicePixelRatio;
      avatarCanvasEl.height = avatarCanvasSize * window.devicePixelRatio;
      avatarCanvasEl.style.width = `${avatarCanvasSize}px`;
      avatarCanvasEl.style.height = `${avatarCanvasSize}px`;

      const equipment = _arrayify(avatar.equipment, 4);
      const skinEquipment = equipment.find(assetSpec => {
        if (assetSpec) {
          const {type} = _getAssetType(assetSpec.asset);
          return type === 'skin';
        } else {
          return false;
        }
      });
      if (skinEquipment) {
        const img = new Image();
        img.onload = () => {
          _drawSkin(img, avatarCanvasEl);
        };
        img.onerror = err => {
          console.warn(err);
        };
        img.src = 'data:application/octet-stream;base64,' + skinEquipment.json.data;
      } else {
        _drawSkin(null, avatarCanvasEl);
      }
      avatarEl.destroy = () => {
        avatarCanvasEl.destroy();
      };

      avatarsEl.appendChild(avatarEl);
    }
  } else {
    const emptyEl = $$(`\
      <div style="display: flex; width: 100%; padding: 100px; font-size: 23px; font-weight: 400; justify-content: center; align-items: center;">Nothing here</div>
    `);
    avatarsEl.appendChild(emptyEl);
  }
};

const upVector = new THREE.Vector3(0, 1, 0);
const zeroQuaternion = new THREE.Quaternion();
const headBobRotation = new THREE.Quaternion().setFromUnitVectors(
  new THREE.Vector3(0, 0, 1),
  new THREE.Vector3(0, 0.05, 1).normalize()
);
const headRotation = new THREE.Quaternion().setFromUnitVectors(
  new THREE.Vector3(0, 0, 1),
  new THREE.Vector3(0.3, 0.1, 1).normalize()
);
const leftArmRotation = new THREE.Quaternion().setFromUnitVectors(
  new THREE.Vector3(0, 0, 1),
  new THREE.Vector3(1, 0.2, 1).normalize()
);
const rightArmRotation = new THREE.Quaternion().setFromUnitVectors(
  new THREE.Vector3(0, 0, 1),
  new THREE.Vector3(0.2, 1, -1).normalize()
);
let pauseAvatar = false;
[
  'skin-canvas',
  'skin-canvas-store',
].forEach(selector => {
  const skinCanvasEl = document.getElementById(selector);
  skinCanvasEl.width = avatarCanvasSize * window.devicePixelRatio;
  skinCanvasEl.height = avatarCanvasSize * window.devicePixelRatio;
  skinCanvasEl.style.width = `${avatarCanvasSize}px`;
  skinCanvasEl.style.height = `${avatarCanvasSize}px`;
  skinCanvasEl.addEventListener('click', () => {
    pauseAvatar = !pauseAvatar;
  });
});
const _drawSkin = (() => {
  const hmdMesh = (() => {
    const hmdModelPath = '/models/hmd/hmd.json';
    const controllerModelPath = '/models/controller/controller.json';

    const _requestJson = url => fetch(url, {
      credentials: 'include',
    })
      .then(res => res.json());
    const _requestJsonMesh = (modelJson, modelTexturePath) => new Promise((accept, reject) => {
      const loader = new THREE.ObjectLoader();
      loader.setTexturePath(modelTexturePath);
      loader.parse(modelJson, accept);
    });
    const _requestHmdMesh = () => _requestJson(hmdModelPath)
      .then(hmdModelJson => _requestJsonMesh(hmdModelJson, hmdModelPath.replace(/[^\/]+$/, '')))
      .then(mesh => {
        const object = new THREE.Object3D();

        mesh.scale.set(0.045, 0.045, 0.045);
        mesh.rotation.order = camera.rotation.order;
        mesh.rotation.y = Math.PI;

        object.add(mesh);

        return object;
      });
    const _requestControllerMesh = () => _requestJson(controllerModelPath)
      .then(controllerModelJson => _requestJsonMesh(controllerModelJson, controllerModelPath.replace(/[^\/]+$/, '')));

    Promise.all([
      _requestHmdMesh(),
      _requestControllerMesh(),
    ])
      .then(([
        hmdMesh,
        controllerMesh,
      ]) => {
        hmdMesh.position.y = 1.6;
        hmdMesh.updateMatrixWorld();
        subobject.add(hmdMesh);

        const leftController = controllerMesh.clone(true);
        leftController.position.copy(hmdMesh.position).add(new THREE.Vector3(-CONTROLLER_DEFAULT_OFFSETS[0], CONTROLLER_DEFAULT_OFFSETS[1], CONTROLLER_DEFAULT_OFFSETS[2]));
        leftController.updateMatrixWorld();
        subobject.add(leftController);

        const rightController = controllerMesh.clone(true);
        rightController.position.copy(hmdMesh.position).add(new THREE.Vector3(CONTROLLER_DEFAULT_OFFSETS[0], CONTROLLER_DEFAULT_OFFSETS[1], CONTROLLER_DEFAULT_OFFSETS[2]));
        rightController.updateMatrixWorld();
        subobject.add(rightController);
      });

    const object = new THREE.Object3D();
    object.meshType = 'hmd';
    const subobject = new THREE.Object3D();
    object.add(subobject);
    subobject.position.y = -3.7;
    subobject.scale.set(3, 3, 3);
    subobject.updateMatrixWorld();
    return object;
  })();

  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(200, 200);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setClearColor(0xFFFFFF, 1);
  const scene = new THREE.Scene();
  scene.matrixAutoUpdate = false;
  const camera = new THREE.PerspectiveCamera(45, 200 / 200, 0.1, 100);
  camera.position.set(0, 0, -2.8);
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  camera.updateMatrixWorld();
  camera.updateProjectionMatrix();
  renderer.render(scene, camera);

  const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 3);
  directionalLight.position.set(-1, 0.5, 0);
  directionalLight.lookAt(new THREE.Vector3(0, 0, 0));
  directionalLight.updateMatrixWorld();
  scene.add(directionalLight);
  const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.2);
  scene.add(ambientLight);

  return (img, skinCanvasEl) => {
    skinCanvasEl.destroy && skinCanvasEl.destroy();

    let mesh;
    if (img) {
      mesh = skin(img, {
        // limbs: true,
      });
      mesh.meshType = 'skin';
    } else {
      mesh = hmdMesh;
    }

    mesh.position.set(0, -0.75, 0);
    /* mesh.quaternion.setFromAxisAngle(
      upVector,
      Math.PI
    ); */
    mesh.updateMatrixWorld();

    const ROTATE_SPEED = 0.0004;
    let animationFrame = null;
    const _recurse = () => {
      scene.add(mesh);

      if (!pauseAvatar) {
        mesh.quaternion.setFromAxisAngle(
          upVector,
          -(Date.now() * ROTATE_SPEED * (Math.PI * 2) % (Math.PI * 2))
        );
        if (mesh.meshType === 'skin') {
          mesh.material.uniforms.theta.value = 0.5 * Math.sin((Date.now() * ROTATE_SPEED * 1.25 * (Math.PI * 2)) % (Math.PI * 2));
          mesh.material.uniforms.headRotation.value.fromArray(zeroQuaternion.clone()
            .slerp(headBobRotation, Math.sin((Date.now() * ROTATE_SPEED * 3.5 * (Math.PI * 2)) % (Math.PI * 2))).toArray());
          mesh.material.uniforms.leftArmRotation.value.fromArray(zeroQuaternion.toArray());
          mesh.material.uniforms.rightArmRotation.value.fromArray(zeroQuaternion.toArray());
        }
      } else {
        if (mesh.meshType === 'skin') {
          mesh.material.uniforms.headRotation.value.fromArray(headRotation.toArray());
          mesh.material.uniforms.leftArmRotation.value.fromArray(leftArmRotation.toArray());
          mesh.material.uniforms.rightArmRotation.value.fromArray(rightArmRotation.toArray());
          mesh.material.uniforms.theta.value = 0.4;
          mesh.quaternion.setFromAxisAngle(
            upVector,
            -0.3
          );
        } else {
          mesh.quaternion.set(0, 0, 0, 1);
        }
      }
      mesh.updateMatrixWorld();
      renderer.render(scene, camera);

      scene.remove(mesh);

      if (!skinCanvasEl.ctx) {
        skinCanvasEl.ctx = skinCanvasEl.getContext('2d');
        // skinCanvasEl.ctx.imageSmoothingEnabled = false;
      }
      skinCanvasEl.ctx.clearRect(0, 0, skinCanvasEl.width, skinCanvasEl.height);
      skinCanvasEl.ctx.drawImage(renderer.domElement, 0, 0, skinCanvasEl.width, skinCanvasEl.height);

      animationFrame = requestAnimationFrame(_recurse);
    };
    _recurse();

    skinCanvasEl.destroy = () => {
      scene.remove(mesh);

      cancelAnimationFrame(animationFrame);
    };
  };
})();

const _loadEquipment = () => {
  vrid.get('equipment')
    .then(equipmentSpec => {
      equipmentSpec = equipmentSpec || [];

      const equipment = _arrayify(equipmentSpec, 4)
        .map(equipmentSpec => {
          if (equipmentSpec) {
            const {type, name} = _getAssetType(equipmentSpec.asset);
            if (type === 'item') {
              const item = items[name];
              equipmentSpec.icon = item ? item.icon : null;
            } else if (type === 'skin' || type === 'file') {
              const item = items[type];
              equipmentSpec.icon = item ? item.icon : null;
            } else if (type === 'mod') {
              const mod = mods.find(modSpec => modSpec.name === name) || null;
              equipmentSpec.icon = mod ? mod.icon : null;
            }
          }
          return equipmentSpec;
        });
      _renderEquipment(equipment);
      _renderSkin(equipment, document.getElementById('skin-canvas'));
    })
    .catch(err => {
      console.warn(err);
    });
};
const _renderEquipment = equipment => {
  const equipmentsEl = document.getElementById('equipments');
  while (equipmentsEl.firstChild) {
    equipmentsEl.firstChild.destroy && equipmentsEl.firstChild.destroy();
    equipmentsEl.removeChild(equipmentsEl.firstChild);
  }

  for (let i = 0; i < equipment.length; i++) {
    let equipmentSpec = equipment[i];
    const {asset, icon, file, json} = equipmentSpec || {};
    const equipmentEl = $$(`\
      <equipment style="display: flex; margin: 10px 30px;">
        ${asset ? `\
          <div style="position: relative; top: 27px; display: flex; margin-left: -27px; margin-right: -17px; margin-bottom: auto; padding: 1px; background-color: #FFF; border-radius: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); justify-content: center; align-items: center; text-transform: uppercase; transform: rotateZ(-90deg);">
            <div style="display: flex; width: 80px; padding: 5px 10px; background-color: #61c03c; border-radius: 5px; color: #FFF; font-size: 10px; font-weight: 700; justify-content: center; align-items: center;">
              Equipped
            </div>
          </div>
          <div style="display: flex; background-color: #FFF; border-radius: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); flex-grow: 1; align-items: center;">
            <canvas width=80 height=80></canvas>
            <div style="display: flex; height: 36px; max-width: 100px; margin-right: auto; padding: 10px;">
              <div style="margin-right: auto; text-overflow: ellipsis; overflow: hidden;">${!(file || json) ? (asset || ' ') : (file || json).name}</div>
            </div>
            <div class=unequip-button style="padding: 15px; cursor: pointer;">
              <svg fill="#000000" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
            </div>
          </div>
        ` : `\
          <div style="position: relative; top: 27px; display: flex; margin-left: -27px; margin-right: -17px; margin-bottom: auto; padding: 1px; border: 1px solid #DDD; border-radius: 5px; justify-content: center; align-items: center; text-transform: uppercase; transform: rotateZ(-90deg);">
            <div style="display: flex; width: 80px; padding: 5px 10px; font-size: 10px; font-weight: 700; justify-content: center; align-items: center;">
              Equip
            </div>
          </div>
          <div style="display: flex; height: 80px; border: 1px solid #DDD; border-radius: 5px; flex-grow: 1; font-size: 24px; color: #CCC; justify-content: center; align-items: center;">＋</div>
        `}
      </equipment>
    `);
    equipmentEl.getAssetSpec = () => equipmentSpec;
    equipmentEl.setAssetSpec = assetSpec => {
      equipmentSpec = assetSpec;
      equipment[i] = assetSpec;

      vrid.set('equipment', equipment)
        .catch(err => {
          console.warn(err);
        });

      _renderEquipment(equipment);
      _renderSkin(equipment, document.getElementById('skin-canvas'));
      _renderSkin(equipment, document.getElementById('skin-canvas-store'));
    };
    equipmentEl.setEquipment = otherEquipmentEl => {
      equipmentEl.setAssetSpec(otherEquipmentEl.getAssetSpec());
      otherEquipmentEl.setAssetSpec(null);

      _renderEquipment(equipment);
    };
    equipmentEl.setAttribute('draggable', true);
    equipmentEl.addEventListener('dragstart', e => {
      if (asset) {
        e.dataTransfer.setData('text/plain', equipmentEl.assetSpec);
      } else {
        e.preventDefault();
      }
    });
    equipmentEl.addEventListener('dragend', e => {
      if (dragTarget !== equipmentEl) {
        if (dragTarget && dragTarget.tagName === 'EQUIPMENT') {
          dragTarget.setEquipment(equipmentEl);
        } else {
          equipmentEl.setAssetSpec(null);
        }
      }

      dragTarget = null;
    });
    equipmentEl.addEventListener('dragover', e => {
      e.preventDefault();
    });
    equipmentEl.addEventListener('dragenter', e => {
      requestAnimationFrame(() => {
        dragTarget = equipmentEl;
      });
    });
    equipmentEl.addEventListener('dragleave', e => {
      if (dragTarget === equipmentEl) {
        dragTarget = null;
      }
    });

    if (asset) {
      const unequipButtonEl = equipmentEl.querySelector('.unequip-button');
      unequipButtonEl.addEventListener('click', e => {
        equipmentEl.setAssetSpec(null);
      });

      let live = true;
      equipmentEl.destroy = () => {
        live = false;
      };
      const _requestIconImg = () => {
        if (icon) {
          return new Promise((accept, reject) => {
            const img = new Image();
            img.onload = () => {
              accept(img);
            };
            img.onerror = err => {
              reject(err);
            };
            img.crossOrigin = 'Anonymous';
            img.src = 'data:application/octet-stream;base64,' + icon;
          });
        } else {
          return _getQuestionMarkImage();
        }
      };
      _requestIconImg()
        .then(img => {
          if (live) {
            const spriteRenderer = new SpriteRenderer(img, equipmentEl.querySelector('canvas'));

            equipmentEl.destroy = () => {
              spriteRenderer.destroy();
            };
          }
        })
        .catch(err => {
          if (live) {
            console.warn(err);
          }
        });
    } else {
      equipmentEl.destroy = () => {};
    }

    equipmentsEl.appendChild(equipmentEl);
  }
};

const _loadStoreSkin = () => {
  vrid.get('equipment')
    .then(equipmentSpec => {
      equipmentSpec = equipmentSpec || [];

      const equipment = _arrayify(equipmentSpec, 4)
        .map(equipmentSpec => {
          if (equipmentSpec) {
            const {name} = _getAssetType(equipmentSpec.asset);
            const item = items[name];
            equipmentSpec.icon = item ? item.icon : null;
          }
          return equipmentSpec;
        });
      _renderSkin(equipment, document.getElementById('skin-canvas-store'));
    })
    .catch(err => {
      console.warn(err);
    });
};
const _renderSkin = (equipment, skinCanvasEl) => {
  const skinEquipment = equipment.find(equipmentSpec => {
    if (equipmentSpec) {
      const {type} = _getAssetType(equipmentSpec.asset);
      return type === 'skin';
    } else {
      return false;
    }
  });
  if (skinEquipment) {
    const img = new Image();
    img.onload = () => {
      _drawSkin(img, skinCanvasEl);
    };
    img.onerror = err => {
      console.warn(err);
    };
    img.src = 'data:application/octet-stream;base64,' + skinEquipment.json.data;
  } else {
    _drawSkin(null, skinCanvasEl);
  }
};

const stripeConnectDisconnectButtonEl = document.getElementById('stripe-connect-disconnect-button');
stripeConnectDisconnectButtonEl.addEventListener('click', () => {
  fetch('https://my-site.zeovr.io/stripe/disconnect', {
    method: 'POST',
    headers: (() => {
      const headers = new Headers();
      headers.append('Content-Type', 'application/json');
      headers.append('Authorization', 'Basic ' + base64.encode(new TextEncoder().encode(`${uid}:`)));
      return headers;
    })(),
  })
    .then(_resBlob)
    .then(() => {
      stripeConnectUser = null;

      _renderAccount(username, stripeConnectUser);
    })
    .catch(err => {
      console.warn(err);
    });
});

let username = null;
let stripeConnectUser = null;
const _loadAccount = () => {
  Promise.all([
    vrid.get('name'),
    vrid.getRaw('stripe-connect-users/' + uid),
  ])
    .then(([
      newUsername,
      newStripeConnectUser,
    ]) => {
      username = newUsername;
      stripeConnectUser = newStripeConnectUser;

      _renderAccount(username, stripeConnectUser);
    });
};
const _renderAccount = (username, stripeConnectUser) => {
  [
    'username',
    'username-store',
  ].forEach(selector => {
    const usernameEl = document.getElementById(selector);
    usernameEl.innerText = username;
  });
  usernameInputEl.value = username;

  document.body.classList.toggle('stripe-connect-connected', Boolean(stripeConnectUser));
};

const _signAsset = assetSpec => vrid.getRaw('keys/' + uid)
  .then(key => Promise.all([
    Promise.resolve(key),
    _importKey(key),
  ]))
    .then(([
      key,
      cryptoKey,
    ]) => crypto.subtle.sign({
      name: 'ECDSA',
      hash: {
        name: 'SHA-256',
      },
    }, cryptoKey.privateKey, new TextEncoder().encode(JSON.stringify(assetSpec)))
      .then(signature => {
        assetSpec.certificate = [
          {
            publicKey: key.publicKey,
            signature: hex.encode(signature),
          },
        ];
        return assetSpec;
      })
    );
const _uploadFileItem = file => {
  const fileId = _makeId();

  const _makeNotificationText = n => {
    let s = 'Uploading ' + (n * 100).toFixed(1) + '% [';
    let i;
    const roundN = Math.round(n * 20);
    for (i = 0; i < roundN; i++) {
      s += '|';
    }
    for (; i < 20; i++) {
      s += '.';
    }
    s += ']';
    return s;
  };
  const notification = _addNotification(_makeNotificationText(0));

  return vrid.upload(fileId, file, progress => {
    notification.set(_makeNotificationText(progress));
  })
    .then(() => {
      const assetSpec = {
        id: _makeId(),
        asset: 'FILE.' + file.name,
        quantity: 1,
        file: {
          name: file.name,
          id: fileId,
        },
        timestamp: Date.now(),
      };

      return Promise.all([
        vrid.get('assets'),
        _signAsset(assetSpec),
      ])
        .then(([
          assets,
          assetSpec,
        ]) => {
          assets = assets || [];
          assets.push(assetSpec);

          return vrid.set('assets', assets)
            .then(() => {
              document.getElementById('inventory-link-4').click();
            });
        });
    })
    .then(() => {
      _removeNotification(notification);
    })
    .catch(err => {
      _removeNotification(notification);

      return Promise.reject(err);
    });
};
const _uploadFile = file => {
  if (/\.json/.test(file.name)) {
    const reader = new FileReader();
    reader.readAsText(file);
    reader.onload = () => {
      const s = reader.result;
      const json = JSON.parse(s);
      if (json._zeo_item === true) {
        const {assets: newAssets} = json;

        vrid.get('assets')
          .then(assets => {
            assets = assets || [];
            assets = assets.concat(newAssets);

            return vrid.set('assets', assets)
              .then(() => {
                document.getElementById('inventory-link-2').click();
              });
          })
          .catch(err => {
            console.warn(err);
          });
      } else {
        _uploadFileItem(file)
          .catch(err => {
            console.warn(err);
          });
      }
    };
    reader.onerror = err => {
      console.warn(err);
    };
  } else {
    _uploadFileItem(file)
      .catch(err => {
        console.warn(err);
      });
  }
};
const _uploadSkin = file => {
  const img = new Image();
  const url = URL.createObjectURL(file);
  img.onload = () => {
    if (img.width === 64 && img.height === 64) {
      const reader = new FileReader();
      reader.readAsArrayBuffer(file);
      reader.onload = () => {
        const assetSpec = {
          id: _makeId(),
          asset: 'SKIN.' + file.name,
          quantity: 1,
          timestamp: Date.now(),
          json: {
            name: file.name,
            data: base64.encode(reader.result),
          },
        };

        Promise.all([
          vrid.get('assets'),
          _signAsset(assetSpec),
        ])
          .then(([
            assets,
            assetSpec,
          ]) => {
            assets = assets || [];
            assets.push(assetSpec);

            return vrid.set('assets', assets)
              .then(() => {
                _loadAssets('skin', document.getElementById('assets'), _getAssetsHtml);
              });
          })
          .catch(err => {
            console.warn(err);
          });
      };
      reader.onerror = err => {
        console.warn(err);
      };
    } else {
      console.warn('invalid skin image size');
    }

    URL.revokeObjectURL(url);
  };
  img.onerror = err => {
    console.warn(err);

    URL.revokeObjectURL(url);
  };
  img.src = url;
};

const inventoryLinks = [];
let inventoryType = null;
for (let i = 1; i <= 4; i++) {
  const inventoryLinkEl = document.getElementById('inventory-link-' + i);
  inventoryLinkEl.addEventListener('click', e => {
    for (let i = 0; i < inventoryLinks.length; i++) {
      const inventoryLinkEl = inventoryLinks[i];
       inventoryLinkEl.classList.remove('selected');
    }
    inventoryLinkEl.classList.add('selected');

    const equippablesEl = document.getElementById('equippables');

    if (i === 1) {
      inventoryType = null;
    } else if (i === 2) {
      inventoryType = 'item';
    } else if (i === 3) {
      inventoryType = 'mod';
    } else if (i === 4) {
      inventoryType = 'file';
    }
    _loadAssets(inventoryType, equippablesEl, _getEquippablesHtml);
  });
  inventoryLinks.push(inventoryLinkEl);
}

const _initFile = () => {
  document.addEventListener('dragover', e => {
    e.preventDefault();
  });
  document.addEventListener('drop', e => {
    e.preventDefault();

    if (uid) {
      const file = e.dataTransfer.files[0];
      if (file) {
        _uploadFile(file);
      }
    }
  });
};
_initFile();

const headerButtonsEl = document.getElementById('header-buttons');
headerButtonsEl.querySelector(`.inventory-button`).addEventListener('click', e => {
  _pushUrl(`/`);
  e.preventDefault();
});
[
  'store',
  'avatars',
  'account',
  'sign-in',
].forEach(tab => {
  headerButtonsEl.querySelector(`.${tab}-button`).addEventListener('click', e => {
    _pushUrl(`/${tab}.html`);
    e.preventDefault();
  });
});
headerButtonsEl.querySelector('.sign-out-button').addEventListener('click', e => {
  vrid.signOut()
    .then(() => {
      document.location.href = '/sign-in.html';
    })
    .catch(err => {
      console.warn(err);
    });

  e.preventDefault();
});

let uploadSkinEl = document.getElementById('upload-skin');
const _uploadSkinChange = e => {
  if (e.target.files.length > 0) {
    _uploadSkin(e.target.files[0]);
  }

  const newUploadSkinEl = uploadSkinEl.cloneNode(true);
  newUploadSkinEl.addEventListener('change', _uploadSkinChange);
  uploadSkinEl.parentNode.insertBefore(newUploadSkinEl, uploadSkinEl);
  uploadSkinEl.parentNode.removeChild(uploadSkinEl);
  uploadSkinEl = newUploadSkinEl;
};
uploadSkinEl.addEventListener('change', _uploadSkinChange);

let uploadFileEl = document.getElementById('upload-file');
const _uploadFileChange = e => {
  if (e.target.files.length > 0) {
    _uploadFile(e.target.files[0]);
  }

  const newUploadFileEl = uploadFileEl.cloneNode(true);
  newUploadFileEl.addEventListener('change', _uploadFileChange);
  uploadFileEl.parentNode.insertBefore(newUploadFileEl, uploadFileEl);
  uploadFileEl.parentNode.removeChild(uploadFileEl);
  uploadFileEl = newUploadFileEl;
};
uploadFileEl.addEventListener('change', _uploadFileChange);

const _registerSkin = file => {
  const img = new Image();
  const url = URL.createObjectURL(file);
  img.onload = () => {
    if (img.width === 64 && img.height === 64) {
      const reader = new FileReader();
      reader.readAsArrayBuffer(file);
      reader.onload = () => {
        const asset = 'SKIN.' + file.name;
        const id = asset.replace(/\./g, '-') + '-' + _makeId();
        const itemSpec = {
          id,
          asset,
          json: {
            name: file.name,
            data: base64.encode(reader.result),
          },
          owner: uid,
        };
        return vrid.setRaw('items/' + id, itemSpec)
          .then(() => {
            items[id] = itemSpec;
            _loadBuyables(storeMode, storeLink, storeIndexType);
          });
      };
      reader.onerror = err => {
        console.warn(err);
      };
    } else {
      console.warn('invalid skin image size');
    }

    URL.revokeObjectURL(url);
  };
  img.onerror = err => {
    console.warn(err);

    URL.revokeObjectURL(url);
  };
  img.src = url;
};
let registerSkinEl = document.getElementById('register-skin');
const _registerSkinChange = e => {
  if (e.target.files.length > 0) {
    _registerSkin(e.target.files[0]);
  }

  const newRegisterSkinEl = registerSkinEl.cloneNode(true);
  newRegisterSkinEl.addEventListener('change', _registerSkinChange);
  registerSkinEl.parentNode.insertBefore(newRegisterSkinEl, registerSkinEl);
  registerSkinEl.parentNode.removeChild(registerSkinEl);
  registerSkinEl = newRegisterSkinEl;
};
registerSkinEl.addEventListener('change', _registerSkinChange);

const _registerFile = file => {
  const fileId = _makeId();

  const _makeNotificationText = n => {
    let s = 'Uploading ' + (n * 100).toFixed(1) + '% [';
    let i;
    const roundN = Math.round(n * 20);
    for (i = 0; i < roundN; i++) {
      s += '|';
    }
    for (; i < 20; i++) {
      s += '.';
    }
    s += ']';
    return s;
  };
  const notification = _addNotification(_makeNotificationText(0));

  return vrid.upload(fileId, file, progress => {
    notification.set(_makeNotificationText(progress));
  })
    .then(() => {
      const asset = 'FILE.' + file.name;
      const id = asset.replace(/\./g, '-') + '-' + _makeId();
      const itemSpec = {
        id,
        asset,
        file: {
          name: file.name,
          id: fileId,
        },
        owner: uid,
      };
      return vrid.setRaw('items/' + id, itemSpec)
        .then(() => {
          items[id] = itemSpec;
          _loadBuyables(storeMode, storeLink, storeIndexType);
        });
    })
    .then(() => {
      _removeNotification(notification);
    })
    .catch(err => {
      _removeNotification(notification);

      return Promise.reject(err);
    });
};
let registerFileEl = document.getElementById('register-file');
const _registerFileChange = e => {
  if (e.target.files.length > 0) {
    _registerFile(e.target.files[0]);
  }

  const newRegisterFileEl = registerFileEl.cloneNode(true);
  newRegisterFileEl.addEventListener('change', _registerFileChange);
  registerFileEl.parentNode.insertBefore(newRegisterFileEl, registerFileEl);
  registerFileEl.parentNode.removeChild(registerFileEl);
  registerFileEl = newRegisterFileEl;
};
registerFileEl.addEventListener('change', _registerFileChange);

const storeIndexTypes = [];
let storeIndexType = 1;
for (let i = 1; i <= 2; i++) {
  const storeIndexTypeEl = document.getElementById('store-index-type-' + i);
  storeIndexTypeEl.addEventListener('click', e => {
    for (let i = 0; i < storeIndexTypes.length; i++) {
      const storeIndexTypeEl = storeIndexTypes[i];
      storeIndexTypeEl.classList.remove('selected');
    }
    storeIndexTypeEl.classList.add('selected');

    storeIndexType = i;

    _loadBuyables(storeMode, storeLink, storeIndexType);
  });
  storeIndexTypes.push(storeIndexTypeEl);
}

const _requestImage = src => new Promise((accept, reject) => {
  const img = new Image();
  img.src = src;
  img.onload = () => {
    accept(img);
  };
  img.onerror = err => {
    reject(err);
  };
  return img;
});
const _getQuestionMarkImage = () => _requestImage('/img/question.png');
const _getModImage = () => _requestImage('/img/mod.png');

const storeStoreEl = document.getElementById('store-store');
const storeIndexEl = document.getElementById('store-index');
const storeModeLinks = [];
let storeMode = 1;
for (let i = 1; i <= 2; i++) {
  const storeModeLinkEl = document.getElementById('store-mode-link-' + i);
  storeModeLinkEl.addEventListener('click', e => {
    for (let i = 0; i < storeModeLinks.length; i++) {
      storeModeLinks[i].classList.remove('selected');
    }
    storeModeLinkEl.classList.add('selected');

    if (i === 1) {
      storeStoreEl.style.display = 'flex';
      storeIndexEl.style.display = 'none';
    } else if (i === 2) {
      storeStoreEl.style.display = 'none';
      storeIndexEl.style.display = 'flex';
    }
    storeMode = i;

    _loadBuyables(storeMode, storeLink, storeIndexType);
  });
  storeModeLinks.push(storeModeLinkEl);
}

const storeLinks = [];
let storeLink = 1;
for (let i = 1; i <= 5; i++) {
  const storeLinkEl = document.getElementById('store-link-' + i);
  storeLinkEl.addEventListener('click', e => {
    for (let i = 0; i < storeLinks.length; i++) {
      storeLinks[i].classList.remove('selected');
    }
    storeLinkEl.classList.add('selected');

    storeLink = i;

    _loadBuyables(storeMode, storeLink, storeIndexType);
  });
  storeLinks.push(storeLinkEl);
}

const registerItemButtonEl = document.getElementById('register-item-button');
registerItemButtonEl.addEventListener('click', () => {
  modalEl.innerHTML = `\
    <form class="form register-item" style="background-color: #FFF; padding: 30px;" id="register-item-form">
      <div style="position: relative; display: flex; margin-bottom: 15px; font-size: 20px;">
        Register item
      </div>
      <div style="margin-bottom: 10px; font-size: 13px; font-weight: 700;">Item name</div>
      <input type=text placeholder="Enter item name" required style="display: block; margin-bottom: 15px; background-color: #EEE; width: 400px; padding: 10px; border: 0; border-radius: 5px; font-size: 13px; font-weight: 400; outline: none;" id=register-item-name>
      <div style="margin-bottom: 10px; font-size: 13px; font-weight: 700;">Item icon</div>
      <div style="display: flex; margin-bottom: 15px;">
        <canvas width=100 height=100 style="margin-right: 10px; padding: 5px; border: 1px solid #000; border-radius: 5px;" id=register-item-icon-preview></canvas>
        <div class=button style="position: relative; margin-right: auto; margin-bottom: auto; overflow: hidden;">
          <input type=file style="position: absolute; top: 0; bottom: 0; left: -100px; width: 100vw; opacity: 0; cursor: pointer;" id=upload-item-icon>
          Choose file
        </div>
      </div>
      <div style="margin-bottom: 10px; font-size: 13px; font-weight: 700;">Item description</div>
      <textarea style="display: block; margin-bottom: 15px; background-color: #EEE; width: 400px; height: 100px; padding: 10px; border: 0; border-radius: 5px; font-family: inherit; font-size: 13px; font-weight: 400; outline: none;" placeholder="Enter item description" id=register-item-description></textarea>
      <div style="display: flex;">
        <input type=submit value="Create item" style="position: relative; margin-right: auto; overflow: hidden;">
      </div>
    </form>
  `;

  const registerItemNameEl = document.getElementById('register-item-name');
  const registerItemDescriptionEl = document.getElementById('register-item-description');
  let registerItemIconPreviewSpriteRender = null;
  let uploadItemIconFile = null;
  const registerItemIconPreviewEl = document.getElementById('register-item-icon-preview');
  _getQuestionMarkImage()
    .then(img => {
      registerItemIconPreviewSpriteRender = new SpriteRenderer(img, registerItemIconPreviewEl);
      uploadItemIconFile = null;
    })
    .catch(err => {
      console.warn(err);
    });

  let uploadItemIconEl = document.getElementById('upload-item-icon');
  const _uploadItemIconChange = e => {
    if (registerItemIconPreviewSpriteRender) {
      registerItemIconPreviewSpriteRender.destroy();
      registerItemIconPreviewSpriteRender = null;
    }

    if (e.target.files.length > 0) {
      const file = e.target.files[0];

      const img = new Image();
      const url = URL.createObjectURL(file);
      img.onload = () => {
        if (img.width === 16 && img.height === 16) {
          registerItemIconPreviewSpriteRender = new SpriteRenderer(img, registerItemIconPreviewEl);
          uploadItemIconFile = file;
        } else {
          console.warn('invalid item icon size');

          _getQuestionMarkImage()
            .then(img => {
              registerItemIconPreviewSpriteRender = new SpriteRenderer(img, registerItemIconPreviewEl);
              uploadItemIconFile = null;
            })
            .catch(err => {
              console.warn(err);
            });
        }

        URL.revokeObjectURL(url);
      };
      img.onerror = err => {
        console.warn(err);

        URL.revokeObjectURL(url);
      };
      img.src = url;
    } else {
      _getQuestionMarkImage()
        .then(img => {
          registerItemIconPreviewSpriteRender = new SpriteRenderer(img, registerItemIconPreviewEl);
          uploadItemIconFile = null;
        })
        .catch(err => {
          console.warn(err);
        });
    }

    const newUploadItemIconEl = uploadItemIconEl.cloneNode(true);
    newUploadItemIconEl.addEventListener('change', _uploadItemIconChange);
    uploadItemIconEl.parentNode.insertBefore(newUploadItemIconEl, uploadItemIconEl);
    uploadItemIconEl.parentNode.removeChild(uploadItemIconEl);
    uploadItemIconEl = newUploadItemIconEl;
  };
  uploadItemIconEl.addEventListener('change', _uploadItemIconChange);
  const registerItemFormEl = document.getElementById('register-item-form');
  registerItemFormEl.addEventListener('submit', e => {
    const _readIconFile = () => new Promise((accept, reject) => {
      if (uploadItemIconFile) {
        const reader = new FileReader();
        reader.readAsArrayBuffer(uploadItemIconFile);
        reader.onload = () => {
          accept(base64.encode(reader.result));
        };
        reader.onerror = err => {
          console.warn(err);
        };
      } else {
        accept(null);
      }
    });

    _readIconFile()
      .then(iconData => {
        const localName = registerItemNameEl.value.toLowerCase();
        registerItemNameEl.value = localName;
        const localDescription = registerItemDescriptionEl.value;
        vrid.existsRaw('items/' + localName)
          .then(exists => {
            if (!exists) {
              const itemSpec = {
                asset: 'ITEM.' + localName,
                description: localDescription,
                icon: iconData,
                owner: uid,
              };
              return vrid.setRaw('items/' + localName, itemSpec)
                .then(() => {
                  document.getElementById('inventory-link-2').click();
                });
            } else {
              console.warn('item already registered', localName);
            }
          })
          .catch(err => {
            console.warn(err);

            modalEl.innerHTML = '';
          });
      });

    e.preventDefault();
  });

  if (selectedTarget) {
    selectedTarget.unselect();
    selectedTarget = null;
  }

  registerItemNameEl.value = '';
  registerItemDescriptionEl.value = '';
  if (registerItemIconPreviewSpriteRender) {
    registerItemIconPreviewSpriteRender.destroy();
    registerItemIconPreviewSpriteRender = null;

    _getQuestionMarkImage()
      .then(img => {
        registerItemIconPreviewSpriteRender = new SpriteRenderer(img, registerItemIconPreviewEl);
        uploadItemIconFile = null;
      })
      .catch(err => {
        console.warn(err);
      });
  }
});

const usernameFormEl = document.getElementById('username-form');
const usernameInputEl = document.getElementById('username-input');
const saveUsernameButtonEl = document.getElementById('save-username-button');
usernameInputEl.addEventListener('keydown', e => {
  requestAnimationFrame(() => {
    saveUsernameButtonEl.style.display = username === usernameInputEl.value ? 'none' : null;
  });
});
usernameFormEl.addEventListener('submit', e => {
  const localUsername = usernameInputEl.value;

  vrid.set('name', localUsername)
    .then(() => {
      username = localUsername;

      _renderAccount(localUsername);

      saveUsernameButtonEl.style.display = localUsername === usernameInputEl.value ? 'none' : null;
    })
    .catch(err => {
      console.warn(err);
    });

  e.preventDefault();
});

let subscribe = false;
const subscriptionSaveButtonEl = document.getElementById('subscription-save-button');
const basicInputEl = document.getElementById('basic-input');
basicInputEl.addEventListener('change', () => {
  subscribe = false;

  document.body.classList.remove('paid-plan');
  card.unmount();
  subscriptionSaveButtonEl.style.display = (subscribe !== subscribed) ? null : 'none';
});
const goldInputEl = document.getElementById('gold-input');
goldInputEl.addEventListener('change', () => {
  subscribe = true;

  document.body.classList.add('paid-plan');

  const mutated = subscribe !== subscribed;
  if (mutated) {
    card.mount('#card-element');
  } else {
    card.unmount();
  }
  subscriptionSaveButtonEl.style.display = mutated ? null : 'none';
});
const stripe = Stripe('pk_test_KjmGZ7ooNVFvzrrp9LbeWdRj');
const stripeElements = stripe.elements();
const card = stripeElements.create('card', {
  style: {
    base: {
      fontSize: '16px',
      lineHeight: '24px',
    },
  },
});
card.addEventListener('change', event => {
  const displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

const subscribeFormEl = document.getElementById('subscribe-form');
subscribeFormEl.addEventListener('submit', e => {
  const localSubscribe = subscribe;

  document.body.classList.add('subscription-saving');
  basicInputEl.disabled = true;
  goldInputEl.disabled = true;

  const _subscribe = card => stripe.createToken(card)
    .then(result => {
      if (!result.error) {
        return Promise.resolve(result.token.id);
      } else {
        return Promise.reject(result.error);
      }
    });
  if (localSubscribe) {
    _subscribe(card)
      .then(token => fetch('https://my-site.zeovr.io/subscription', {
        method: 'POST',
        headers: (() => {
          const headers = new Headers();
          headers.append('Content-Type', 'application/json');
          headers.append('Authorization', 'Basic ' + base64.encode(new TextEncoder().encode(`${uid}:`)));
          return headers;
        })(),
        body: JSON.stringify({
          token,
        }),
      }))
      .then(_resJson)
      .then(() => {
        subscribed = localSubscribe;

        goldInputEl.dispatchEvent(new Event('change'));
        card.clear();
        subscriptionSaveButtonEl.style.display = 'none';
        document.body.classList.remove('subscription-saving');
        basicInputEl.disabled = false;
        goldInputEl.disabled = false;
      })
      .catch(err => {
        console.warn(err);

        document.body.classList.remove('subscription-saving');
        basicInputEl.disabled = false;
        goldInputEl.disabled = false;
      });
  } else {
    fetch('https://my-site.zeovr.io/subscription', {
      method: 'DELETE',
      headers: (() => {
        const headers = new Headers();
        headers.append('Authorization', 'Basic ' + base64.encode(new TextEncoder().encode(`${uid}:`)));
        return headers;
      })(),
    })
      .then(_resJson)
      .then(() => {
        subscribed = localSubscribe;

        basicInputEl.dispatchEvent(new Event('change'));
        card.clear();
        subscriptionSaveButtonEl.style.display = 'none';
        document.body.classList.remove('subscription-saving');
        basicInputEl.disabled = false;
        goldInputEl.disabled = false;
      })
      .catch(err => {
        console.warn(err);

        document.body.classList.remove('subscription-saving');
        basicInputEl.disabled = false;
        goldInputEl.disabled = false;
      });
  }

  e.preventDefault();
});

const downloadKeysButtonEl = document.getElementById('download-keys-button');
downloadKeysButtonEl.addEventListener('click', () => {
  vrid.getRaw('keys/' + uid)
    .then(keys => {
      const s = JSON.stringify(keys, null, 2);
      const blob = new Blob([s], {
        type: 'application/json',
      });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'keys.json';
      a.click();
      URL.revokeObjectURL(url);
    })
    .catch(err => {
      console.warn(err);
    });
});

const notifications = [];
class Notification {
  constructor(text) {
    this.text = text;
  }
  set(text) {
    this.text = text;

    _renderNotifications();
  }
}
const _addNotification = text => {
  const notification = new Notification(text);
  notifications.push(notification);

  _renderNotifications();

  return notification;
};
const _removeNotification = notification => {
  notifications.splice(notifications.indexOf(notification), 1);

  _renderNotifications();
};
const _renderNotifications = () => {
  document.getElementById('notifications').innerText = notifications.map(({text}) => text).join('\n');
};

const _onlyDefined = o => {
  const result = {};
  for (const k in o) {
    const v = o[k];
    if (v !== undefined) {
      result[k] = v;
    }
  }
  return result;
};
const _normalizeItem = item => _onlyDefined({
  id: item.id,
  asset: item.asset || ('ITEM.' + item.name),
  quantity: item.quantity,
  icon: item.icon,
  description: item.description,
  owner: item.owner,
  file: item.file,
  json: item.json,
  certificate: item.certificate,
  sale: item.sale,
});
const _normalizeMod = mod => _onlyDefined({
  asset: 'MOD.' + mod.name,
  icon: mod.metadata && mod.metadata.icon,
  description: mod.description,
  owner: mod.metadata && mod.metadata.owner,
});
const _quantizeAssets = assets => {
  const assetIndex = {};
  for (let i = 0; i < assets.length; i++) {
    const assetSpec = assets[i];
    const {asset} = assetSpec;
    let entry = assetIndex[asset];
    if (!entry) {
      entry = _normalizeItem(assetSpec);
      entry.assets = [];
      assetIndex[asset] = entry;
    }
    entry.assets.push(assetSpec);
  }
  return Object.keys(assetIndex).map(k => assetIndex[k]);
};
const _getAssetsHtml = assetSpec => {
  if (assetSpec) {
    const {id, asset, icon, description, owner, file, json, certificate, sale} = assetSpec;
    return `\
      <asset class="asset ${(file || json) ? 'file' : ''} ${(certificate && !sale) ? 'certificate' : ''} ${sale ? 'sale' : ''}">
        <div class=asset-wrap>
          ${sale ? `<div style="display: flex; font-size: 11px;">
            ${uid ? `\
               ${sale.seller !== uid ? `<a class=buy-button style="margin: 5px; margin-left: auto; margin-bottom: 0; padding: 2px 5px; border-radius: 3px; color: #FFF;">BUY ¤${sale.value}</a>` : ''}
               ${sale.seller === uid ? `<a class=undo-sale-button style="margin: 5px; margin-left: auto; margin-bottom: 0; padding: 2px 5px; border-radius: 3px; color: #FFF;">UNDO SALE</a>` : ''}
            ` : `\
               ${sale.seller !== uid ? `<a class=log-in-to-buy-button style="margin: 5px; margin-left: auto; margin-bottom: 0; padding: 2px 5px; border-radius: 3px; color: #FFF;">LOGIN TO BUY (¤${sale.value})</a>` : ''}
            `}
          </div>` : ''}
          <canvas width=80 height=80></canvas>
          <div style="display: flex; padding: 0 10px; flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
            <div style="margin-right: auto; text-overflow: ellipsis; overflow: hidden;">${!(file || json) ? asset : (file || json).name}</div>
          </div>
          ${(id && !sale) ? `<div class=asset-header>
            <a class="asset-header-link gift-link blue">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="16" height="16" viewBox="0 0 24 24"><path d="M22,12V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V12A1,1 0 0,1 1,11V8A2,2 0 0,1 3,6H6.17C6.06,5.69 6,5.35 6,5A3,3 0 0,1 9,2C10,2 10.88,2.5 11.43,3.24V3.23L12,4L12.57,3.23V3.24C13.12,2.5 14,2 15,2A3,3 0 0,1 18,5C18,5.35 17.94,5.69 17.83,6H21A2,2 0 0,1 23,8V11A1,1 0 0,1 22,12M4,20H11V12H4V20M20,20V12H13V20H20M9,4A1,1 0 0,0 8,5A1,1 0 0,0 9,6A1,1 0 0,0 10,5A1,1 0 0,0 9,4M15,4A1,1 0 0,0 14,5A1,1 0 0,0 15,6A1,1 0 0,0 16,5A1,1 0 0,0 15,4M3,8V10H11V8H3M13,8V10H21V8H13Z" /></svg>
            </a>
            <a class="asset-header-link sell-link blue">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="16" height="16" viewBox="0 0 24 24"><path d="M20,18H4V6H20M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4M11,17H13V16H14A1,1 0 0,0 15,15V12A1,1 0 0,0 14,11H11V10H15V8H13V7H11V8H10A1,1 0 0,0 9,9V12A1,1 0 0,0 10,13H13V14H9V16H11V17Z" /></svg>
            </a>
            <a class="asset-header-link export-link blue">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="16" height="16" viewBox="0 0 24 24"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" /></svg>
            </a>
            <a class="asset-header-link remove-link blue">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="16" height="16" viewBox="0 0 24 24"><path d="M21.03,3L18,20.31C17.83,21.27 17,22 16,22H8C7,22 6.17,21.27 6,20.31L2.97,3H21.03M5.36,5L8,20H16L18.64,5H5.36M9,18V14H13V18H9M13,13.18L9.82,10L13,6.82L16.18,10L13,13.18Z" /></svg>
            </a>
          </div>` : ''}
        </div>
      </asset>
    `;
  } else {
    return '';
  }
};
const _getEquippablesHtml = assetSpec => {
  if (assetSpec) {
    const {id, asset, icon, description, owner, file, json, certificate, sale} = assetSpec;
    return `\
      <equippable>
        <div style="display: flex; height: 30px; padding: 0 10px; background-color: #333; color: #FFF; justify-content: space-evenly; align-items: center;">
          <a class="asset-header-link gift-link blue">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="16" height="16" viewBox="0 0 24 24"><path d="M22,12V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V12A1,1 0 0,1 1,11V8A2,2 0 0,1 3,6H6.17C6.06,5.69 6,5.35 6,5A3,3 0 0,1 9,2C10,2 10.88,2.5 11.43,3.24V3.23L12,4L12.57,3.23V3.24C13.12,2.5 14,2 15,2A3,3 0 0,1 18,5C18,5.35 17.94,5.69 17.83,6H21A2,2 0 0,1 23,8V11A1,1 0 0,1 22,12M4,20H11V12H4V20M20,20V12H13V20H20M9,4A1,1 0 0,0 8,5A1,1 0 0,0 9,6A1,1 0 0,0 10,5A1,1 0 0,0 9,4M15,4A1,1 0 0,0 14,5A1,1 0 0,0 15,6A1,1 0 0,0 16,5A1,1 0 0,0 15,4M3,8V10H11V8H3M13,8V10H21V8H13Z" /></svg>
          </a>
          <a class="asset-header-link sell-link blue">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="16" height="16" viewBox="0 0 24 24"><path d="M20,18H4V6H20M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4M11,17H13V16H14A1,1 0 0,0 15,15V12A1,1 0 0,0 14,11H11V10H15V8H13V7H11V8H10A1,1 0 0,0 9,9V12A1,1 0 0,0 10,13H13V14H9V16H11V17Z" /></svg>
          </a>
          <a class="asset-header-link export-link blue">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="16" height="16" viewBox="0 0 24 24"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" /></svg>
          </a>
          <a class="asset-header-link remove-link blue">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="16" height="16" viewBox="0 0 24 24"><path d="M21.03,3L18,20.31C17.83,21.27 17,22 16,22H8C7,22 6.17,21.27 6,20.31L2.97,3H21.03M5.36,5L8,20H16L18.64,5H5.36M9,18V14H13V18H9M13,13.18L9.82,10L13,6.82L16.18,10L13,13.18Z" /></svg>
          </a>
        </div>
        <div style="display: flex; width: 150px; height: 130px; background-color: #FFF; flex-direction: column; justify-content: center; align-items: center;">
          <canvas width=80 height=80></canvas>
          <div style="display: flex;">
            <div>${assetSpec.asset}</div>&nbsp;<div style="font-weight: 700;">${assetSpec.assets.length > 1 ? `(${assetSpec.assets.length})` : ''}</div>
          </div>
        </div>
      </equippable>
    `;
  } else {
    return `<div style="display: flex; width: 150px; height: 160px; margin: 20px; border: 1px solid #E8E8E8; border-radius: 5px; color: #DDD; font-size: 50px; justify-content: center; align-items: center;">＋</div>`;
  }
};
const creditsEl = document.getElementById('credits');
const creditsStoreEl = document.getElementById('credits-store');
const _renderCredits = credits => {
  creditsEl.innerText = credits;
  creditsStoreEl.innerText = credits;
};

const _loadUrl = url => {
  headerButtonsEl.querySelectorAll('a').forEach(e => {
    e.classList.remove('selected');
  });
  document.body.classList.remove(
    'managing-inventory',
    'browsing-mods',
    'browsing-items',
    'browsing-avatars',
    'managing-account'
  );

  if (url === '/store.html') {
    document.body.classList.add('browsing-items');
    document.body.classList.remove('registering-item');
    headerButtonsEl.querySelector('.store-button').classList.add('selected');

    Promise.all([
      _loadAllAssets(),
      _loadAllMods(),
      _loadAllSales(),
    ])
      .then(([
        allAssetsResult,
        allModsResult,
        allSalesResult,
      ]) => {
        _loadBuyables(storeMode, storeLink, storeIndexType);
      });

    _loadStoreSkin(),
    _loadAccount();
  } else if (url === '/avatars.html') {
    document.body.classList.add('browsing-avatars');
    headerButtonsEl.querySelector('.avatars-button').classList.add('selected');

    Promise.all([
      _loadAvatars(),
      _loadAllAssets(),
    ])
      .then(([
        avatars,
        allAssetsResult,
      ]) => {
        _renderAvatars(avatars, document.getElementById('avatars'));
      });
  } else if (url === '/account.html') {
    if (uid) {
      document.body.classList.add('managing-account');
      headerButtonsEl.querySelector('.account-button').classList.add('selected');

      const stripeConnectExpressLinkEl = document.getElementById('stripe-connect-express-link');
      stripeConnectExpressLinkEl.href = `https://connect.stripe.com/express/oauth/authorize?client_id=ca_Bj6O5x5CFVCOELBhyjbiJxwUfW6l8ozd&state=${uid}`;
      const stripeConnectLinkEl = document.getElementById('stripe-connect-link');
      stripeConnectLinkEl.href = `https://connect.stripe.com/oauth/authorize?response_type=code&client_id=ca_Bj6O5x5CFVCOELBhyjbiJxwUfW6l8ozd&scope=read_write&state=${uid}`;

      _loadAccount();
    } else {
      document.location.href = '/sign-in.html';
    }
  } else {
    if (uid) {
      document.body.classList.add('managing-inventory');
      headerButtonsEl.querySelector('.inventory-button').classList.add('selected');

      _loadAssets('skin', document.getElementById('assets'), _getAssetsHtml);
      _loadAssets(null, document.getElementById('equippables'), _getEquippablesHtml);
      _loadEquipment();
      _loadAccount();
    } else {
      document.location.href = '/sign-in.html';
    }
  }
};
const _pushUrl = url => {
  window.history.pushState({}, '', url);
  _loadUrl(url);
};