dok/public/js/buildings/wohnhaus.js

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

  ui.innerHTML = `

<div id="character-ui">

<div class="slot helmet" data-slot="helmet">
<div class="slot-label">Helm</div>
</div>

<div class="slot shoulder" data-slot="shoulder">
<div class="slot-label">Schulter</div>
</div>

<div class="slot amulet" data-slot="amulet">
<div class="slot-label">Amulett</div>
</div>

<div class="slot gloves" data-slot="gloves">
<div class="slot-label">Handschuhe</div>
</div>

<div class="slot weapon" data-slot="weapon">
<div class="slot-label">Waffe</div>
</div>

<div class="character">
<img src="/images/avatar.png">
</div>

<div class="slot belt" data-slot="belt">
<div class="slot-label">Gürtel</div>
</div>

<div class="slot shield" data-slot="shield">
<div class="slot-label">Schild</div>
</div>

<div class="slot ring1" data-slot="ring">
<div class="slot-label">Ring</div>
</div>

<div class="slot ring2" data-slot="ring">
<div class="slot-label">Ring</div>
</div>

<div class="slot boots" data-slot="boots">
<div class="slot-label">Stiefel</div>
</div>

</div>

<h3>Inventar</h3>

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

`;

  loadInventory();
  loadEquipment();
}

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

  equipment.forEach((item) => {
    const slot = document.querySelector('.slot[data-slot="' + item.slot + '"]');

    if (!slot) return;

    const label = slot.querySelector(".slot-label");

    slot.innerHTML = `<img src="${item.icon}" draggable="true">`;

    initSlotDrag();

    if (label) {
      slot.appendChild(label);
    }

    slot.classList.add("has-item");
  });
}

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

  const grid = document.getElementById("inventory-grid");

  let html = "";

  items.forEach((item) => {
    const icon = item.icon || "/images/items/default.png";

    html += `
    <div class="inventory-slot"
    data-slot="${item.equip_slot || ""}"
    data-id="${item.id}"
    data-level="${item.level}"
    draggable="true">

    <img src="${icon}">

    </div>
    `;
  });

  grid.innerHTML = html;

  initInventoryDrop();
  initDrag();
  initDrop();
}

function initDrag() {
  document.querySelectorAll(".inventory-slot").forEach((item) => {
    item.addEventListener("dragstart", (e) => {
      e.dataTransfer.setData("itemId", item.dataset.id);
      e.dataTransfer.setData("itemLevel", item.dataset.level);
      e.dataTransfer.setData("slot", item.dataset.slot);
    });
  });
}

async function saveEquipment(slot, itemId, itemLevelId) {
  await fetch("/api/equip", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      slot: slot,
      itemId: itemId,
      itemLevelId: itemLevelId,
    }),
  });
}

function initDrop() {
  document.querySelectorAll(".slot").forEach((slot) => {
    slot.addEventListener("dragover", (e) => {
      e.preventDefault();
    });

    slot.addEventListener("drop", (e) => {
      e.preventDefault();

      const itemId = e.dataTransfer.getData("itemId");
      const itemLevel = e.dataTransfer.getData("itemLevel");
      const itemSlot = e.dataTransfer.getData("slot");

      const targetSlot = slot.dataset.slot;

      if (!itemSlot || itemSlot !== targetSlot) return;

      const item = document.querySelector(
        '.inventory-slot[data-id="' + itemId + '"]',
      );

      const icon = item.querySelector("img").src;

      item.remove();

      /* Wenn Slot schon Item hat */

      const existingItem = slot.querySelector("img");

      if (existingItem) {
        const inventory = document.getElementById("inventory-grid");

        const newSlot = document.createElement("div");

        newSlot.classList.add("inventory-slot");

        newSlot.innerHTML = `<img src="${existingItem.src}">`;
        newSlot.setAttribute("draggable", "true");

        inventory.appendChild(newSlot);

        initDrag();
      }

      /* Neues Item setzen */

      const label = slot.querySelector(".slot-label");

      slot.innerHTML = `
        <img src="${icon}"
        draggable="true"
        data-id="${itemId}"
        data-level="${itemLevel}">
        `;

      initSlotDrag();

      if (label) slot.appendChild(label);

      slot.classList.add("has-item");

      saveEquipment(targetSlot, itemId, itemLevel);
    });
  });
}

function initSlotDrag() {
  document.querySelectorAll(".slot img").forEach((img) => {
    img.addEventListener("dragstart", (e) => {
      const slot = img.closest(".slot");

      e.dataTransfer.setData("itemId", img.dataset.id);
      e.dataTransfer.setData("itemLevel", img.dataset.level);
      e.dataTransfer.setData("slot", slot.dataset.slot);
    });
  });
}

function initInventoryDrop() {
  const grid = document.getElementById("inventory-grid");

  grid.addEventListener("dragover", (e) => {
    e.preventDefault();
  });

  grid.addEventListener("drop", (e) => {
    e.preventDefault();

    const itemId = e.dataTransfer.getData("itemId");
    const itemLevel = e.dataTransfer.getData("itemLevel");
    const slot = e.dataTransfer.getData("slot");

    if (!itemId) return;

    const icon = document.querySelector(
      '.slot[data-slot="' + slot + '"] img',
    ).src;

    const newItem = document.createElement("div");

    newItem.classList.add("inventory-slot");
    newItem.setAttribute("draggable", "true");

    newItem.dataset.id = itemId;
    newItem.dataset.level = itemLevel;

    newItem.innerHTML = `<img src="${icon}">`;

    grid.appendChild(newItem);

    /* Slot leeren */

    const equipSlot = document.querySelector('.slot[data-slot="' + slot + '"]');

    const label = equipSlot.querySelector(".slot-label");

    equipSlot.innerHTML = "";

    if (label) {
      equipSlot.appendChild(label);
    }

    equipSlot.classList.remove("has-item");

    initDrag();
  });
}