diff --git a/public/css/building.css b/public/css/building.css
index a6cb110..0ad1ba3 100644
--- a/public/css/building.css
+++ b/public/css/building.css
@@ -211,227 +211,192 @@ body {
Character Window
========================= */
-.character {
- position: absolute;
- top: 100px;
- left: 50%;
- transform: translateX(-50%);
-}
-
#character-ui {
- position: relative;
- width: 600px;
- height: 550px;
- margin: auto;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 16px;
+ padding: 16px 0 8px 0;
}
-.equip-left,
-.equip-right {
+/* Linke & Rechte Slot-Spalte */
+
+.equip-col {
display: flex;
flex-direction: column;
- gap: 12px;
+ gap: 10px;
+ align-items: center;
}
-.character img {
- height: 340px;
- object-fit: contain;
- filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.6));
+/* Avatar in der Mitte */
+
+.character-center {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ position: relative;
+}
+
+.character-center img {
+ width: 180px;
+ height: 320px;
+ object-fit: cover;
+ object-position: top;
+ border-radius: 8px;
+ border: 2px solid #8b6a3c;
+ box-shadow:
+ 0 0 20px rgba(0, 0, 0, 0.7),
+ inset 0 0 10px rgba(0, 0, 0, 0.3);
+ filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.8));
+}
+
+/* Top-Slots (Helm + Amulett) über dem Avatar */
+
+.equip-top {
+ display: flex;
+ gap: 10px;
+ justify-content: center;
+}
+
+/* Bottom-Slots (Gürtel + Stiefel) unter dem Avatar */
+
+.equip-bottom {
+ display: flex;
+ gap: 10px;
+ justify-content: center;
}
/* =========================
Equipment Slots
========================= */
-.equip-slot {
- width: 70px;
- height: 70px;
+.slot {
+ width: 76px;
+ height: 76px;
position: relative;
+
background-image: url("/images/items/slot_mittel.png");
background-size: cover;
background-position: center;
- transition: 0.2s;
+
display: flex;
align-items: center;
justify-content: center;
+
+ border-radius: 4px;
+ transition: 0.2s;
+ cursor: pointer;
+}
+
+.slot:hover {
+ filter: brightness(1.3);
+ box-shadow: 0 0 8px rgba(200, 160, 60, 0.5);
+}
+
+.slot.drag-over {
+ outline: 3px solid gold;
+ box-shadow: 0 0 14px gold;
+}
+
+.slot.has-item {
+ box-shadow: 0 0 8px rgba(255, 200, 60, 0.4);
}
.slot-label {
position: absolute;
- top: 50%;
+ bottom: 4px;
left: 50%;
- transform: translate(-50%, -50%);
+ transform: translateX(-50%);
+ white-space: nowrap;
color: #ffffff;
- font-size: 12px;
+ font-family: "Cinzel", serif;
+ font-size: 9px;
font-weight: bold;
text-shadow:
0 0 3px #000,
- 0 0 6px #000,
- 0 0 10px rgba(0, 0, 0, 0.8);
+ 0 0 6px #000;
pointer-events: none;
+ background: rgba(0, 0, 0, 0.45);
+ padding: 1px 4px;
+ border-radius: 3px;
}
-/* Slot Basis */
-
.slot.has-item .slot-label {
display: none;
}
-.slot.drag-over {
- outline: 3px solid gold;
- box-shadow: 0 0 10px gold;
-}
-
-.slot:hover {
- filter: brightness(1.3);
-}
-
-.slot {
- position: absolute;
- width: 90px;
- height: 90px;
-
- background-image: url("/images/items/slot_mittel.png");
- background-size: cover;
-
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-/* HELM */
-
-.helmet {
- top: 10px;
- left: 40%;
- transform: translateX(-50%);
-}
-
-/* AMULET */
-
-.amulet {
- top: 10px;
- left: 60%;
- transform: translateX(-50%);
-}
-
-/* SCHULTER */
-
-.shoulder {
- top: 110px;
- left: 80px;
-}
-
-/* WAFFE */
-
-.weapon {
- top: 110px;
- right: 70px;
- cursor: grab;
-}
-
-/* HANDSCHUHE */
-
-.gloves {
- top: 220px;
- left: 80px;
-}
-
-/* SCHILD */
-
-.shield {
- top: 220px;
- right: 70px;
-}
-
-/* GÜRTEL */
-
-.belt {
- top: 270px;
- left: 50%;
- transform: translateX(-50%);
-}
-
-/* RINGE */
-
-.ring1 {
- top: 330px;
- left: 80px;
-}
-
-.ring2 {
- top: 330px;
- right: 70px;
-}
-
-/* STIEFEL */
-
-.boots {
- bottom: 0;
- left: 50%;
- transform: translateX(-50%);
+.slot img {
+ width: 80%;
+ height: 80%;
+ object-fit: contain;
}
/* =========================
Inventory
========================= */
+.inventory-section-title {
+ font-family: "Tangerine", serif;
+ font-size: 30px;
+ color: #3b2412;
+ text-align: center;
+ margin: 8px 0 4px 0;
+ border-top: 1px solid #8b6a3c;
+ padding-top: 10px;
+ letter-spacing: 1px;
+}
+
#inventory-grid {
display: grid;
-
- grid-template-columns: repeat(8, 70px);
- grid-auto-rows: 70px;
-
- gap: 8px;
-
+ grid-template-columns: repeat(8, 62px);
+ grid-auto-rows: 62px;
+ gap: 6px;
width: max-content;
-
margin: 0 auto;
-
- padding: 10px;
-
- max-height: 340px;
+ padding: 8px;
}
#inventory-wrapper {
display: flex;
align-items: center;
justify-content: center;
- gap: 10px;
}
#inventory-page {
- font-size: 18px;
+ font-family: "Cinzel", serif;
+ font-size: 14px;
font-weight: bold;
-
+ color: #3b2412;
display: flex;
align-items: center;
+ min-width: 100px;
+ justify-content: center;
}
#inv-left,
#inv-right {
background: none;
border: none;
-
- font-size: 24px;
-
+ font-size: 22px;
cursor: pointer;
-
- padding: 0;
+ padding: 4px 8px;
margin: 0;
-
display: flex;
align-items: center;
justify-content: center;
-
color: #5c3b20;
+ transition: 0.2s;
+ border-radius: 4px;
}
#inv-left:hover,
#inv-right:hover {
- color: #8b6a3c;
+ color: #f0d9a6;
+ background: rgba(90, 60, 20, 0.4);
transform: scale(1.1);
}
@@ -439,68 +404,56 @@ body {
display: flex;
align-items: center;
justify-content: center;
-
- gap: 15px;
-
- margin-top: 10px;
+ gap: 10px;
+ margin-top: 8px;
+ padding: 6px;
+ background: rgba(0, 0, 0, 0.1);
+ border-top: 1px solid #8b6a3c;
+ border-radius: 0 0 6px 6px;
}
.inventory-slot {
- width: 70px;
- height: 70px;
-
+ width: 62px;
+ height: 62px;
background-image: url("/images/items/slot_mittel.png");
background-size: cover;
background-position: center;
-
display: flex;
align-items: center;
justify-content: center;
-
cursor: grab;
+ border-radius: 3px;
+ transition: 0.2s;
}
.inventory-slot:active {
cursor: grabbing;
}
-.inventory-slot:hover,
-.equip-slot:hover {
- filter: brightness(1.2);
+.inventory-slot:hover {
+ filter: brightness(1.25);
+ box-shadow: 0 0 6px rgba(200, 160, 60, 0.4);
}
-.equip-slot.drag-over {
- outline: 2px solid gold;
- filter: brightness(1.3);
-}
-
-.equip-slot:not(:has(img)) {
- opacity: 0.7;
-}
-
-.item-common {
- border: 2px solid #9d9d9d;
-}
-
-.item-rare {
- border: 2px solid #0070dd;
-}
-
-.item-epic {
- border: 2px solid #a335ee;
-}
-
-.item-legendary {
- border: 2px solid #ff8000;
-}
-
-.inventory-slot img,
-.slot img {
+.inventory-slot img {
width: 80%;
height: 80%;
object-fit: contain;
}
+.item-common {
+ box-shadow: 0 0 0 2px #9d9d9d inset;
+}
+.item-rare {
+ box-shadow: 0 0 0 2px #0070dd inset;
+}
+.item-epic {
+ box-shadow: 0 0 0 2px #a335ee inset;
+}
+.item-legendary {
+ box-shadow: 0 0 0 2px #ff8000 inset;
+}
+
/* =========================
Tooltip (Items)
========================= */
diff --git a/public/js/buildings/wohnhaus.js b/public/js/buildings/wohnhaus.js
index 23f42f1..e38c61d 100644
--- a/public/js/buildings/wohnhaus.js
+++ b/public/js/buildings/wohnhaus.js
@@ -1,4 +1,4 @@
-let inventoryPage = 0;
+let inventoryPage = 0;
const slotsPerPage = 32;
let inventoryItems = [];
@@ -6,74 +6,50 @@ export async function loadWohnhaus() {
const ui = document.querySelector(".building-ui");
ui.innerHTML = `
-
+
-
+
+
-
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
Inventar
+
+Inventar
-
-`;
+
+
+
+`;
await loadInventory();
await loadEquipment();