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

AI4

Browse Source
This commit is contained in:
Cay 2026-03-15 11:10:13 +00:00
parent 9d65de821e
commit ac4606bc6c
2 changed files with 169 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

319
public/css/building.css
View File

@ -211,227 +211,192 @@ body {
Character Window Character Window
========================= */ ========================= */
.character {
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
}
#character-ui { #character-ui {
position: relative; display: flex;
width: 600px; align-items: center;
height: 550px; justify-content: center;
margin: auto; gap: 16px;
padding: 16px 0 8px 0;
} }
.equip-left, /* Linke & Rechte Slot-Spalte */
.equip-right {
.equip-col {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 10px;
align-items: center;
} }
.character img { /* Avatar in der Mitte */
height: 340px;
object-fit: contain; .character-center {
filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.6)); 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 Equipment Slots
========================= */ ========================= */
.equip-slot { .slot {
width: 70px; width: 76px;
height: 70px; height: 76px;
position: relative; position: relative;
background-image: url("/images/items/slot_mittel.png"); background-image: url("/images/items/slot_mittel.png");
background-size: cover; background-size: cover;
background-position: center; background-position: center;
transition: 0.2s;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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 { .slot-label {
position: absolute; position: absolute;
top: 50%; bottom: 4px;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translateX(-50%);
white-space: nowrap;
color: #ffffff; color: #ffffff;
font-size: 12px; font-family: "Cinzel", serif;
font-size: 9px;
font-weight: bold; font-weight: bold;
text-shadow: text-shadow:
0 0 3px #000, 0 0 3px #000,
0 0 6px #000, 0 0 6px #000;
0 0 10px rgba(0, 0, 0, 0.8);
pointer-events: none; pointer-events: none;
background: rgba(0, 0, 0, 0.45);
padding: 1px 4px;
border-radius: 3px;
} }
/* Slot Basis */
.slot.has-item .slot-label { .slot.has-item .slot-label {
display: none; display: none;
} }
.slot.drag-over { .slot img {
outline: 3px solid gold; width: 80%;
box-shadow: 0 0 10px gold; height: 80%;
} object-fit: contain;
.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%);
} }
/* ========================= /* =========================
Inventory 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 { #inventory-grid {
display: grid; display: grid;
grid-template-columns: repeat(8, 62px);
grid-template-columns: repeat(8, 70px); grid-auto-rows: 62px;
grid-auto-rows: 70px; gap: 6px;
gap: 8px;
width: max-content; width: max-content;
margin: 0 auto; margin: 0 auto;
padding: 8px;
padding: 10px;
max-height: 340px;
} }
#inventory-wrapper { #inventory-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 10px;
} }
#inventory-page { #inventory-page {
font-size: 18px; font-family: "Cinzel", serif;
font-size: 14px;
font-weight: bold; font-weight: bold;
color: #3b2412;
display: flex; display: flex;
align-items: center; align-items: center;
min-width: 100px;
justify-content: center;
} }
#inv-left, #inv-left,
#inv-right { #inv-right {
background: none; background: none;
border: none; border: none;
font-size: 22px;
font-size: 24px;
cursor: pointer; cursor: pointer;
padding: 4px 8px;
padding: 0;
margin: 0; margin: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #5c3b20; color: #5c3b20;
transition: 0.2s;
border-radius: 4px;
} }
#inv-left:hover, #inv-left:hover,
#inv-right:hover { #inv-right:hover {
color: #8b6a3c; color: #f0d9a6;
background: rgba(90, 60, 20, 0.4);
transform: scale(1.1); transform: scale(1.1);
} }
@ -439,68 +404,56 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 10px;
gap: 15px; margin-top: 8px;
padding: 6px;
margin-top: 10px; background: rgba(0, 0, 0, 0.1);
border-top: 1px solid #8b6a3c;
border-radius: 0 0 6px 6px;
} }
.inventory-slot { .inventory-slot {
width: 70px; width: 62px;
height: 70px; height: 62px;
background-image: url("/images/items/slot_mittel.png"); background-image: url("/images/items/slot_mittel.png");
background-size: cover; background-size: cover;
background-position: center; background-position: center;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: grab; cursor: grab;
border-radius: 3px;
transition: 0.2s;
} }
.inventory-slot:active { .inventory-slot:active {
cursor: grabbing; cursor: grabbing;
} }
.inventory-slot:hover, .inventory-slot:hover {
.equip-slot:hover { filter: brightness(1.25);
filter: brightness(1.2); box-shadow: 0 0 6px rgba(200, 160, 60, 0.4);
} }
.equip-slot.drag-over { .inventory-slot img {
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 {
width: 80%; width: 80%;
height: 80%; height: 80%;
object-fit: contain; 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) Tooltip (Items)
========================= */ ========================= */

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

@ -1,4 +1,4 @@
let inventoryPage = 0; let inventoryPage = 0;
const slotsPerPage = 32; const slotsPerPage = 32;
let inventoryItems = []; let inventoryItems = [];
@ -6,74 +6,50 @@ export async function loadWohnhaus() {
const ui = document.querySelector(".building-ui"); const ui = document.querySelector(".building-ui");
ui.innerHTML = ` ui.innerHTML = `
<!-- Charakter UI -->
<div id="character-ui"> <div id="character-ui">
<div class="slot helmet" data-slot="helmet"> <!-- Linke Spalte -->
<div class="slot-label">Helm</div> <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>
<div class="slot shoulder" data-slot="shoulder"> <!-- Avatar Mitte -->
<div class="slot-label">Schulter</div> <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>
<div class="slot amulet" data-slot="amulet"> <!-- Rechte Spalte -->
<div class="slot-label">Amulett</div> <div class="equip-col">
</div> <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 gloves" data-slot="gloves"> <div class="slot" data-slot="ring"><div class="slot-label">Ring</div></div>
<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>
</div> </div>
<h3>Inventar</h3> <!-- Inventar -->
<div class="inventory-section-title">Inventar</div>
<div id="inventory-wrapper"> <div id="inventory-wrapper">
<div id="inventory-grid"></div> <div id="inventory-grid"></div>
</div> </div>
<div id="inventory-nav"> <div id="inventory-nav">
<button id="inv-left">◀</button> <button id="inv-left">◀</button>
<div id="inventory-page"></div> <div id="inventory-page"></div>
<button id="inv-right">▶</button> <button id="inv-right">▶</button>
</div>`;
</div>
`;
await loadInventory(); await loadInventory();
await loadEquipment(); await loadEquipment();