export async function loadWohnhaus(data) {
  const container = document.querySelector(".building-ui");

  container.innerHTML = `
    <div id="wohnhaus-ui">

      <div id="avatar"></div>

      <div id="inventory"></div>

    </div>
  `;

  loadAvatar();
  loadInventory();
}

async function loadAvatar() {
  const res = await fetch("/api/avatar");
  const avatar = await res.json();

  let html = `<div class="avatar">`;

  avatar.forEach((i) => {
    html += `<img src="${i.icon}" class="${i.slot}">`;
  });

  html += "</div>";

  document.getElementById("avatar").innerHTML = html;
}

async function loadInventory() {
  const res = await fetch("/api/inventory");
  const items = await res.json();

  let html = "";

  items.forEach((item) => {
    html += `
<div class="inventory-item"
data-id="${item.id}"
data-level="${item.level}">
<img src="${item.icon}">
<p>${item.name}</p>
</div>
`;
  });

  document.getElementById("inventory").innerHTML = html;
}