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

pop19

Browse Source
This commit is contained in:
Cay 2026-03-13 16:24:14 +00:00
parent 9883d10904
commit 84e43cfe2e
2 changed files with 100 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
public/css/building.css
View File

@ -212,18 +212,17 @@ body {
========================= */
.character {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 90px;
left: 50%;
transform: translateX(-50%);
}
#character-ui {
display: flex;
justify-content: center;
gap: 60px;
margin-bottom: 40px;
margin-top: -20px;
position: relative;
width: 500px;
height: 420px;
margin: auto;
}
.equip-left,
@ -246,7 +245,7 @@ body {
.equip-slot {
width: 70px;
height: 70px;
position: relative;
background-image: url("/images/items/slot_mittel.png");
background-size: cover;
background-position: center;
@ -256,6 +255,86 @@ body {
justify-content: center;
}
.slot-label {
position: absolute;
bottom: -18px;
width: 100%;
text-align: center;
font-size: 12px;
color: #3a2413;
font-weight: bold;
}
/* Slot Basis */
.slot {
position: absolute;
width: 70px;
height: 70px;
background-image: url("/images/items/slot_mittel.png");
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
/* Slot Positionen */
.helmet {
top: 0;
left: 50%;
transform: translateX(-50%);
}
.shoulder {
top: 60px;
left: 0;
}
.amulet {
top: 60px;
right: 0;
}
.gloves {
top: 150px;
left: 0;
}
.weapon {
top: 150px;
right: 0;
}
.belt {
top: 230px;
left: 0;
}
.shield {
top: 230px;
right: 0;
}
.ring1 {
top: 310px;
left: 0;
}
.ring2 {
top: 310px;
right: 0;
}
.boots {
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
/* =========================
Inventory
========================= */

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

@ -5,55 +5,25 @@ export async function loadWohnhaus() {
<div id="character-ui">
<div class="equip-left">
<div class="slot helmet" data-slot="helmet"></div>
<div class="equip-slot" data-slot="helmet" title="Helm">
<img src="/images/items/slot_helmet.png">
</div>
<div class="equip-slot" data-slot="shoulder" title="Schulter">
<img src="/images/items/slot_shoulder.png">
</div>
<div class="equip-slot" data-slot="gloves" title="Handschuhe">
<img src="/images/items/slot_gloves.png">
</div>
<div class="equip-slot" data-slot="belt" title="Gürtel">
<img src="/images/items/slot_belt.png">
</div>
<div class="equip-slot" data-slot="boots" title="Stiefel">
<img src="/images/items/slot_boots.png">
</div>
</div>
<div class="slot shoulder" data-slot="shoulder"></div>
<div class="slot amulet" data-slot="amulet"></div>
<div class="slot gloves" data-slot="gloves"></div>
<div class="slot weapon" data-slot="weapon"></div>
<div class="character">
<img src="/images/avatar.png">
</div>
<div class="slot belt" data-slot="belt"></div>
<div class="slot shield" data-slot="shield"></div>
<div class="equip-right">
<div class="slot ring1" data-slot="ring"></div>
<div class="slot ring2" data-slot="ring"></div>
<div class="equip-slot" data-slot="amulet" title="Amulett">
<img src="/images/items/slot_amulet.png">
</div>
<div class="equip-slot" data-slot="weapon" title="Waffe">
<img src="/images/items/slot_weapon.png">
</div>
<div class="equip-slot" data-slot="shield" title="Schild">
<img src="/images/items/slot_shield.png">
</div>
<div class="equip-slot" data-slot="ring" title="Ring">
<img src="/images/items/slot_ring.png">
</div>
</div>
<div class="slot boots" data-slot="boots"></div>
</div>
@ -120,7 +90,7 @@ function initEquip() {
const slotType = item.dataset.slot;
const target = document.querySelector(
'.equip-slot[data-slot="' + slotType + '"]',
'.slot[data-slot="' + slotType + '"]',
);
if (!target) return;