AI4
This commit is contained in:
parent
9d65de821e
commit
ac4606bc6c
@ -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)
|
||||
========================= */
|
||||
|
||||
@ -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 = `
|
||||
|
||||
<!-- Charakter UI -->
|
||||
<div id="character-ui">
|
||||
|
||||
<div class="slot helmet" data-slot="helmet">
|
||||
<div class="slot-label">Helm</div>
|
||||
</div>
|
||||
<!-- Linke Spalte -->
|
||||
<div class="equip-col">
|
||||
<div class="slot" data-slot="shoulder"><div class="slot-label">Schulter</div></div>
|
||||
<div class="slot" data-slot="gloves"><div class="slot-label">Handschuhe</div></div>
|
||||
<div class="slot" data-slot="ring"><div class="slot-label">Ring</div></div>
|
||||
</div>
|
||||
|
||||
<div class="slot shoulder" data-slot="shoulder">
|
||||
<div class="slot-label">Schulter</div>
|
||||
</div>
|
||||
<!-- Avatar Mitte -->
|
||||
<div class="character-center">
|
||||
<div class="equip-top">
|
||||
<div class="slot" data-slot="helmet"><div class="slot-label">Helm</div></div>
|
||||
<div class="slot" data-slot="amulet"><div class="slot-label">Amulett</div></div>
|
||||
</div>
|
||||
<img src="/images/avatar.png" alt="Avatar">
|
||||
<div class="equip-bottom">
|
||||
<div class="slot" data-slot="belt"><div class="slot-label">Guertel</div></div>
|
||||
<div class="slot" data-slot="boots"><div class="slot-label">Stiefel</div></div>
|
||||
</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>
|
||||
<!-- Rechte Spalte -->
|
||||
<div class="equip-col">
|
||||
<div class="slot" data-slot="weapon"><div class="slot-label">Waffe</div></div>
|
||||
<div class="slot" data-slot="shield"><div class="slot-label">Schild</div></div>
|
||||
<div class="slot" data-slot="ring"><div class="slot-label">Ring</div></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h3>Inventar</h3>
|
||||
<!-- Inventar -->
|
||||
<div class="inventory-section-title">Inventar</div>
|
||||
|
||||
<div id="inventory-wrapper">
|
||||
|
||||
<div id="inventory-grid"></div>
|
||||
|
||||
<div id="inventory-grid"></div>
|
||||
</div>
|
||||
|
||||
<div id="inventory-nav">
|
||||
|
||||
<button id="inv-left">◀</button>
|
||||
|
||||
<div id="inventory-page"></div>
|
||||
|
||||
<button id="inv-right">▶</button>
|
||||
|
||||
</div>
|
||||
|
||||
`;
|
||||
<button id="inv-left">◀</button>
|
||||
<div id="inventory-page"></div>
|
||||
<button id="inv-right">▶</button>
|
||||
</div>`;
|
||||
|
||||
await loadInventory();
|
||||
await loadEquipment();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user