cay/dok
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pop48

Browse Source
This commit is contained in:
Cay 2026-03-14 13:29:54 +00:00
parent b2d857dcc3
commit 4489d435e3
2 changed files with 133 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
public/css/building.css
View File

@ -396,11 +396,33 @@ body {
}
#inventory-wrapper {
width: 640px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
margin: 0 auto;
#inventory-page {
text-align: center;
margin-top: 6px;
font-size: 16px;
font-weight: bold;
}
max-height: 340px;
#inv-left,
#inv-right {
width: 40px;
height: 40px;
font-size: 22px;
cursor: pointer;
background: #6b4b2a;
color: white;
border: none;
border-radius: 4px;
}
.inventory-slot {

229
public/js/buildings/wohnhaus.js
View File

@ -1,3 +1,7 @@
let inventoryPage = 0;
const slotsPerPage = 32;
let inventoryItems = [];
export async function loadWohnhaus() {
const ui = document.querySelector(".building-ui");
@ -54,14 +58,24 @@ export async function loadWohnhaus() {
<h3>Inventar</h3>
<div id="inventory-wrapper">
<button id="inv-left">◀</button>
<div id="inventory-grid"></div>
<button id="inv-right">▶</button>
</div>
<div id="inventory-page"></div>
`;
await loadInventory();
await loadEquipment();
initInventoryButtons();
initDrag();
initSlotDrag();
initDrop();
@ -69,66 +83,45 @@ export async function loadWohnhaus() {
}
/* ================================
Equipment laden
================================ */
async function loadEquipment() {
const res = await fetch("/api/equipment");
const equipment = await res.json();
equipment.forEach((item) => {
if (!item.item_id) return; // ← WICHTIG
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"
data-id="${item.item_id}"
data-level="${item.item_level_id}">
`;
if (label) slot.appendChild(label);
slot.classList.add("has-item");
});
}
/* ================================
Inventar laden
INVENTAR LADEN
================================ */
async function loadInventory() {
const res = await fetch("/api/inventory");
const items = await res.json();
inventoryItems = await res.json();
renderInventory();
}
/* ================================
INVENTAR RENDERN
================================ */
function renderInventory() {
const grid = document.getElementById("inventory-grid");
let html = "";
/* feste 32 slots erzeugen */
const start = inventoryPage * slotsPerPage;
const end = start + slotsPerPage;
const totalSlots = Math.max(32, items.length);
for (let i = 0; i < totalSlots; i++) {
const item = items[i];
for (let i = start; i < end; i++) {
const item = inventoryItems[i];
if (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">
<div class="inventory-slot"
data-slot="${item.equip_slot || ""}"
data-id="${item.id}"
data-level="${item.level}"
draggable="true">
<img src="${icon}">
<img src="${icon}">
</div>
`;
</div>
`;
} else {
html += `
<div class="inventory-slot empty"></div>
@ -137,10 +130,67 @@ async function loadInventory() {
}
grid.innerHTML = html;
const totalPages = Math.max(
1,
Math.ceil(inventoryItems.length / slotsPerPage),
);
document.getElementById("inventory-page").innerText =
"Seite " + (inventoryPage + 1) + " / " + totalPages;
initDrag();
}
/* ================================
Drag Inventar
INVENTAR BUTTONS
================================ */
function initInventoryButtons() {
document.getElementById("inv-left").onclick = () => {
if (inventoryPage > 0) {
inventoryPage--;
renderInventory();
}
};
document.getElementById("inv-right").onclick = () => {
inventoryPage++;
renderInventory();
};
}
/* ================================
EQUIPMENT LADEN
================================ */
async function loadEquipment() {
const res = await fetch("/api/equipment");
const equipment = await res.json();
equipment.forEach((item) => {
if (!item.item_id) return;
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"
data-id="${item.item_id}"
data-level="${item.item_level_id}">
`;
if (label) slot.appendChild(label);
slot.classList.add("has-item");
});
}
/* ================================
DRAG INVENTAR
================================ */
function initDrag() {
@ -155,7 +205,7 @@ function initDrag() {
}
/* ================================
Drag Slot
SLOT DRAG
================================ */
function initSlotDrag() {
@ -174,7 +224,7 @@ function initSlotDrag() {
}
/* ================================
Slot Drop
SLOT DROP
================================ */
function initDrop() {
@ -193,8 +243,6 @@ function initDrop() {
if (!itemSlot || itemSlot !== targetSlot) return;
/* Icon bestimmen */
let icon;
if (source === "inventory") {
@ -206,48 +254,17 @@ function initDrop() {
icon = inventoryItem.querySelector("img").src;
/* Slot leeren statt löschen */
inventoryItem.classList.add("empty");
inventoryItem.removeAttribute("data-id");
inventoryItem.removeAttribute("data-level");
inventoryItem.removeAttribute("data-slot");
inventoryItem.innerHTML = "";
} else {
const slotItem = document.querySelector(
'.slot[data-slot="' + itemSlot + '"] img',
);
if (!slotItem) return;
icon = slotItem.src;
}
/* vorhandenes Item zurück ins Inventar */
const existing = slot.querySelector("img");
if (existing) {
const grid = document.getElementById("inventory-grid");
const emptySlot = grid.querySelector(".inventory-slot.empty");
if (emptySlot) {
emptySlot.classList.remove("empty");
emptySlot.dataset.id = existing.dataset.id;
emptySlot.dataset.level = existing.dataset.level;
emptySlot.dataset.slot = existing.dataset.slot;
emptySlot.setAttribute("draggable", "true");
emptySlot.innerHTML = `<img src="${existing.src}">`;
}
}
/* neues Item setzen */
const label = slot.querySelector(".slot-label");
slot.innerHTML = `
@ -270,15 +287,13 @@ data-level="${itemLevel}">
}
/* ================================
Drop ins Inventar
INVENTAR DROP
================================ */
function initInventoryDrop() {
const grid = document.getElementById("inventory-grid");
grid.addEventListener("dragover", (e) => {
e.preventDefault();
});
grid.addEventListener("dragover", (e) => e.preventDefault());
grid.addEventListener("drop", (e) => {
e.preventDefault();
@ -299,65 +314,37 @@ function initInventoryDrop() {
if (!img) return;
/* neues Inventar Item */
inventoryItems.push({
id: itemId,
level: itemLevel,
equip_slot: slotName,
icon: 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.dataset.slot = slotName;
newItem.innerHTML = `<img src="${img.src}">`;
const emptySlot = grid.querySelector(".inventory-slot.empty");
if (emptySlot) {
emptySlot.classList.remove("empty");
emptySlot.dataset.id = itemId;
emptySlot.dataset.level = itemLevel;
emptySlot.dataset.slot = slotName;
emptySlot.setAttribute("draggable", "true");
emptySlot.innerHTML = `<img src="${img.src}">`;
}
initDrag();
/* Slot leeren */
renderInventory();
const label = slot.querySelector(".slot-label");
slot.innerHTML = "";
if (label) {
slot.appendChild(label);
}
if (label) slot.appendChild(label);
slot.classList.remove("has-item");
saveEquipment(slotName, null, null);
/* Drag wieder aktivieren */
initDrag();
initSlotDrag();
});
}
/* ================================
DB speichern
DB SPEICHERN
================================ */
async function saveEquipment(slot, itemId, itemLevelId) {
await fetch("/api/equip", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
slot: slot,
itemId: itemId,