Popuip geändert
This commit is contained in:
parent
58bfe25e39
commit
d347fbfd54
505
public/css/popup.css
Normal file
505
public/css/popup.css
Normal file
@ -0,0 +1,505 @@
|
||||
/* ================================================================
|
||||
POPUP.CSS — Dynasty of Knights — Gebäude Popup Styles
|
||||
================================================================ */
|
||||
|
||||
/* ================================
|
||||
POPUP WRAPPER
|
||||
================================ */
|
||||
|
||||
.building-popup {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 580px;
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
rgba(255,255,255,0.012) 2px,
|
||||
rgba(255,255,255,0.012) 4px
|
||||
),
|
||||
linear-gradient(160deg, #2e1c07 0%, #1a0e04 40%, #221508 100%);
|
||||
border: 2px solid #9a7a28;
|
||||
border-radius: 6px;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
z-index: 1000;
|
||||
overflow: visible;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(200,168,64,0.3),
|
||||
0 0 40px rgba(200,150,12,0.1),
|
||||
0 30px 80px rgba(0,0,0,0.6),
|
||||
inset 0 0 60px rgba(0,0,0,0.27);
|
||||
}
|
||||
|
||||
.building-popup.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
ECKORNAMENTE
|
||||
================================ */
|
||||
|
||||
.popup-corner {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.popup-corner.c-tl { top: -4px; left: -4px; }
|
||||
.popup-corner.c-tr { top: -4px; right: -4px; transform: scaleX(-1); }
|
||||
.popup-corner.c-bl { bottom: -4px; left: -4px; transform: scaleY(-1); }
|
||||
.popup-corner.c-br { bottom: -4px; right: -4px; transform: scale(-1); }
|
||||
|
||||
/* ================================
|
||||
HEADER
|
||||
================================ */
|
||||
|
||||
.popup-header {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#0a0602 0%,
|
||||
#3d2510 20%,
|
||||
#4a2e12 50%,
|
||||
#3d2510 80%,
|
||||
#0a0602 100%
|
||||
);
|
||||
border-bottom: 2px solid #9a7a28;
|
||||
padding: 0 20px;
|
||||
height: 46px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.popup-header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 5%;
|
||||
right: 5%;
|
||||
height: 3px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(200,150,12,0.67),
|
||||
rgba(240,208,96,0.6),
|
||||
rgba(200,150,12,0.67),
|
||||
transparent
|
||||
);
|
||||
filter: blur(1px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.popup-title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.popup-title-gem {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 35% 35%, #f0d080, #c8960c, #7a4a00);
|
||||
box-shadow: 0 0 8px rgba(200,150,12,0.53);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#popup-title {
|
||||
font-family: 'Cinzel Decorative', 'Palatino Linotype', serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #f5e090;
|
||||
letter-spacing: 3px;
|
||||
text-shadow: 0 0 20px rgba(200,150,12,0.53), 0 1px 3px rgba(0,0,0,0.6);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.popup-close {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 40% 35%, #5a1808, #2a0a04);
|
||||
border: 1px solid #8a3010;
|
||||
color: #e06040;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.094);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.popup-close:hover {
|
||||
background: radial-gradient(circle at 40% 35%, #8a2010, #4a1008);
|
||||
border-color: #e04020;
|
||||
color: #ff9080;
|
||||
box-shadow: 0 0 10px rgba(200,64,32,0.27);
|
||||
}
|
||||
|
||||
/* ================================
|
||||
BODY: SIDEBAR + CONTENT
|
||||
================================ */
|
||||
|
||||
.popup-body {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 380px;
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
VERTIKALE TAB-SIDEBAR
|
||||
================================ */
|
||||
|
||||
.popup-tabs {
|
||||
width: 62px;
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
transparent 1px,
|
||||
rgba(255,255,255,0.008) 1px,
|
||||
rgba(255,255,255,0.008) 2px
|
||||
),
|
||||
linear-gradient(180deg, #1a0e04 0%, #120a03 100%);
|
||||
border-right: 2px solid #7a5a18;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 14px 0;
|
||||
gap: 8px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.popup-tabs::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -4px;
|
||||
top: 8%;
|
||||
bottom: 8%;
|
||||
width: 3px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
transparent,
|
||||
rgba(200,150,12,0.33),
|
||||
rgba(240,208,96,0.2),
|
||||
rgba(200,150,12,0.33),
|
||||
transparent
|
||||
);
|
||||
filter: blur(1px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
TAB BUTTONS
|
||||
================================ */
|
||||
|
||||
.popup-tabs .tab {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #4a3408;
|
||||
background: linear-gradient(145deg, #2e1c08 0%, #1a0e04 100%);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
transition: all 0.2s;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255,255,255,0.031),
|
||||
inset 0 -1px 0 rgba(0,0,0,0.2);
|
||||
padding: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.popup-tabs .tab:hover {
|
||||
border-color: #c8960c;
|
||||
background: linear-gradient(145deg, #3e2c10 0%, #2a1a08 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(200,150,12,0.125),
|
||||
0 0 14px rgba(200,150,12,0.133),
|
||||
0 0 0 1px rgba(200,150,12,0.267);
|
||||
}
|
||||
|
||||
.popup-tabs .tab.active {
|
||||
border-color: #c8960c;
|
||||
background: linear-gradient(145deg, #5a3a14 0%, #3a2208 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(200,150,12,0.25),
|
||||
0 0 18px rgba(200,150,12,0.2),
|
||||
0 0 0 1px rgba(200,150,12,0.4);
|
||||
}
|
||||
|
||||
/* Aktiver Tab: goldener Balken rechts */
|
||||
.popup-tabs .tab.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -3px;
|
||||
top: 20%;
|
||||
height: 60%;
|
||||
width: 4px;
|
||||
background: linear-gradient(180deg, #f0d060, #c8960c);
|
||||
border-radius: 2px 0 0 2px;
|
||||
box-shadow: 0 0 8px #c8960c;
|
||||
}
|
||||
|
||||
/* Tab SVG Icons */
|
||||
.tab-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-icon-default { display: block; }
|
||||
.tab-icon-active { display: none; }
|
||||
|
||||
.tab.active .tab-icon-default { display: none; }
|
||||
.tab.active .tab-icon-active { display: block; }
|
||||
|
||||
/* Tooltip */
|
||||
.tab-tip {
|
||||
position: absolute;
|
||||
left: 54px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: linear-gradient(135deg, #2e1c08, #1a0e04);
|
||||
border: 1px solid #9a7a28;
|
||||
color: #f0d080;
|
||||
font-size: 11px;
|
||||
font-family: 'Cinzel', 'Palatino Linotype', serif;
|
||||
letter-spacing: 1px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s;
|
||||
z-index: 20;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 1px rgba(200,150,12,0.2);
|
||||
}
|
||||
|
||||
.tab-tip::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -5px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
border-right: 5px solid #9a7a28;
|
||||
}
|
||||
|
||||
.popup-tabs .tab:hover .tab-tip {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
POPUP CONTENT AREA
|
||||
================================ */
|
||||
|
||||
.popup-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px 22px;
|
||||
}
|
||||
|
||||
.popup-content::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
.popup-content::-webkit-scrollbar-track {
|
||||
background: #0f0803;
|
||||
}
|
||||
.popup-content::-webkit-scrollbar-thumb {
|
||||
background: #5a3a10;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.popup-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #c8960c;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
animation: popupFadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes popupFadeIn {
|
||||
from { opacity: 0; transform: translateY(4px); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
|
||||
/* ================================
|
||||
INFO TAB INHALT
|
||||
================================ */
|
||||
|
||||
.popup-info-title {
|
||||
font-family: 'Cinzel', 'Palatino Linotype', serif;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #f0d060;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0 0 12px rgba(200,150,12,0.33);
|
||||
margin-bottom: 14px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid rgba(122,90,24,0.3);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.popup-info-title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
width: 40%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, #c8960c, transparent);
|
||||
}
|
||||
|
||||
.popup-stat-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 7px 10px;
|
||||
margin-bottom: 4px;
|
||||
border-radius: 3px;
|
||||
background: linear-gradient(90deg, #1e1206 0%, #120a03 100%);
|
||||
border: 1px solid #3a2808;
|
||||
font-size: 13px;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.popup-stat-row:hover {
|
||||
border-color: #6a4a14;
|
||||
}
|
||||
|
||||
.popup-stat-key {
|
||||
color: #806040;
|
||||
}
|
||||
|
||||
.popup-stat-val {
|
||||
color: #e0c060;
|
||||
font-weight: 600;
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.popup-desc {
|
||||
font-size: 12px;
|
||||
color: #806040;
|
||||
line-height: 1.8;
|
||||
font-style: italic;
|
||||
padding: 10px 12px;
|
||||
border-left: 2px solid rgba(200,150,12,0.267);
|
||||
background: #0f0803;
|
||||
border-radius: 0 4px 4px 0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* Fortschrittsbalken */
|
||||
.popup-xp-wrap {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.popup-xp-label {
|
||||
font-size: 11px;
|
||||
color: #705030;
|
||||
margin-bottom: 5px;
|
||||
font-family: 'Cinzel', serif;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.popup-xp-track {
|
||||
height: 10px;
|
||||
background: #0a0602;
|
||||
border: 1px solid #4a3208;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.popup-xp-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #6a3a08 0%, #c8960c 60%, #f0d060 100%);
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
transition: width 0.6s ease;
|
||||
}
|
||||
|
||||
.popup-xp-fill::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 4px;
|
||||
right: 8px;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.188));
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.popup-xp-shimmer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 20px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25));
|
||||
animation: popupShimmer 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes popupShimmer {
|
||||
0%, 100% { opacity: 0.3; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
.popup-divider {
|
||||
text-align: center;
|
||||
color: #4a3010;
|
||||
font-size: 13px;
|
||||
letter-spacing: 8px;
|
||||
margin: 14px 0 4px;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
UPGRADE TAB INHALT
|
||||
================================ */
|
||||
|
||||
.popup-upgrade-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
padding: 12px;
|
||||
background: linear-gradient(160deg, #6a4018 0%, #3e2408 50%, #6a4018 100%);
|
||||
border: 1px solid #c8960c;
|
||||
border-radius: 4px;
|
||||
color: #f5e090;
|
||||
font-family: 'Cinzel Decorative', 'Palatino Linotype', serif;
|
||||
font-size: 11px;
|
||||
letter-spacing: 3px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
box-shadow: inset 0 1px 0 rgba(200,150,12,0.25), 0 0 20px rgba(200,150,12,0.11);
|
||||
}
|
||||
|
||||
.popup-upgrade-btn:hover {
|
||||
background: linear-gradient(160deg, #8a5824 0%, #5a3410 50%, #8a5824 100%);
|
||||
box-shadow: inset 0 1px 0 rgba(200,150,12,0.375), 0 0 30px rgba(200,150,12,0.2);
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
@ -1,7 +1,6 @@
|
||||
import { loadWohnhaus } from "./buildings/wohnhaus.js";
|
||||
import { loadSchwarzmarkt } from "./buildings/schwarzmarkt.js";
|
||||
import { loadMine } from "./buildings/mine.js";
|
||||
import { loadArena } from "./buildings/arena.js";
|
||||
const popup = document.getElementById("building-popup");
|
||||
const title = document.getElementById("popup-title");
|
||||
const tooltip = document.getElementById("map-tooltip");
|
||||
@ -9,65 +8,14 @@ const tooltip = document.getElementById("map-tooltip");
|
||||
const tooltipCache = {};
|
||||
|
||||
const buildingModules = {
|
||||
11: loadWohnhaus,
|
||||
12: loadSchwarzmarkt,
|
||||
10: loadMine,
|
||||
1: loadArena,
|
||||
11: loadWohnhaus, // Tabs ausblenden, eigenes UI
|
||||
12: loadSchwarzmarkt, // Tabs ausblenden, eigenes UI
|
||||
10: loadMine, // Tabs bleiben sichtbar, nur Aktionen-Tab befüllen
|
||||
};
|
||||
|
||||
// Gebäude die ihre eigenen Tabs behalten sollen
|
||||
const keepTabsVisible = new Set([10]);
|
||||
|
||||
/* ================================
|
||||
Popup verschiebbar machen
|
||||
================================ */
|
||||
|
||||
(function makeDraggable() {
|
||||
const header = document.querySelector(".popup-header");
|
||||
if (!header) return;
|
||||
|
||||
let isDragging = false;
|
||||
let startX, startY, startLeft, startTop;
|
||||
|
||||
header.style.cursor = "grab";
|
||||
|
||||
header.addEventListener("mousedown", (e) => {
|
||||
// Schließen-Button nicht draggable
|
||||
if (e.target.classList.contains("popup-close")) return;
|
||||
|
||||
isDragging = true;
|
||||
header.style.cursor = "grabbing";
|
||||
|
||||
const rect = popup.getBoundingClientRect();
|
||||
startX = e.clientX;
|
||||
startY = e.clientY;
|
||||
startLeft = rect.left;
|
||||
startTop = rect.top;
|
||||
|
||||
// transform zurücksetzen, auf konkrete px-Werte umstellen
|
||||
popup.style.transform = "none";
|
||||
popup.style.left = startLeft + "px";
|
||||
popup.style.top = startTop + "px";
|
||||
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
document.addEventListener("mousemove", (e) => {
|
||||
if (!isDragging) return;
|
||||
|
||||
const dx = e.clientX - startX;
|
||||
const dy = e.clientY - startY;
|
||||
|
||||
popup.style.left = (startLeft + dx) + "px";
|
||||
popup.style.top = (startTop + dy) + "px";
|
||||
});
|
||||
|
||||
document.addEventListener("mouseup", () => {
|
||||
if (!isDragging) return;
|
||||
isDragging = false;
|
||||
header.style.cursor = "grab";
|
||||
});
|
||||
})();
|
||||
|
||||
/* ================================
|
||||
Tabs zurücksetzen
|
||||
================================ */
|
||||
@ -102,7 +50,6 @@ document.querySelectorAll(".building").forEach((building) => {
|
||||
|
||||
popup.style.left = "50%";
|
||||
popup.style.top = "50%";
|
||||
popup.style.transform = "translate(-50%, -50%)";
|
||||
popup.classList.add("active");
|
||||
|
||||
resetTabs();
|
||||
@ -116,20 +63,24 @@ document.querySelectorAll(".building").forEach((building) => {
|
||||
title.innerText = data.name;
|
||||
|
||||
const infoTab = document.getElementById("tab-info");
|
||||
const actionsTab = document.getElementById("tab-actions");
|
||||
const tabs = document.querySelector(".popup-tabs");
|
||||
|
||||
// Standard: Info anzeigen
|
||||
infoTab.innerHTML = `
|
||||
<h3>${data.name}</h3>
|
||||
<p>Level: ${data.level}</p>
|
||||
<p>Punkte: ${data.points} / ${data.nextLevelPoints}</p>
|
||||
<p>${data.description}</p>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill"
|
||||
style="width:${(data.points / data.nextLevelPoints) * 100}%">
|
||||
<div class="popup-info-title">${data.name}</div>
|
||||
<div class="popup-stat-row"><span class="popup-stat-key">Level</span><span class="popup-stat-val">${data.level}</span></div>
|
||||
<div class="popup-stat-row"><span class="popup-stat-key">Punkte</span><span class="popup-stat-val">${data.points} / ${data.nextLevelPoints}</span></div>
|
||||
<div class="popup-stat-row"><span class="popup-stat-key">Beschreibung</span></div>
|
||||
<p class="popup-desc">${data.description}</p>
|
||||
<div class="popup-xp-wrap">
|
||||
<div class="popup-xp-label">Fortschritt zum nächsten Level</div>
|
||||
<div class="popup-xp-track">
|
||||
<div class="popup-xp-fill" style="width:${Math.min((data.points / data.nextLevelPoints) * 100, 100)}%">
|
||||
<div class="popup-xp-shimmer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="popup-divider">✦ · ✦ · ✦</div>
|
||||
`;
|
||||
|
||||
// Standard Tabs anzeigen
|
||||
@ -162,13 +113,11 @@ document.querySelectorAll(".building").forEach((building) => {
|
||||
}
|
||||
|
||||
document.getElementById("tab-upgrade").innerHTML = `
|
||||
<p>Kosten: ${data.upgradeCost}</p>
|
||||
<button>Upgrade</button>
|
||||
`;
|
||||
|
||||
document.getElementById("tab-history").innerHTML = `
|
||||
<p>${data.history}</p>
|
||||
<div class="popup-info-title">Upgrade</div>
|
||||
<div class="popup-stat-row"><span class="popup-stat-key">Kosten</span><span class="popup-stat-val">${data.upgradeCost}</span></div>
|
||||
<button class="popup-upgrade-btn">⚒ UPGRADE STARTEN ⚒</button>
|
||||
`;
|
||||
|
||||
} catch (error) {
|
||||
console.error("Gebäude konnte nicht geladen werden:", error);
|
||||
}
|
||||
|
||||
@ -8,13 +8,16 @@
|
||||
href="/images/favicon/dok_favicon_32px.ico"
|
||||
type="image/x-icon"
|
||||
/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Cinzel:wght@400;600&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="/css/launcher.css" />
|
||||
<link rel="stylesheet" href="/css/global.css" />
|
||||
<link rel="stylesheet" href="/css/building.css" />
|
||||
<link rel="stylesheet" href="/css/popup.css" />
|
||||
<link rel="stylesheet" href="/css/quickmenu.css" />
|
||||
<link rel="stylesheet" href="/css/hud.css" />
|
||||
<link rel="stylesheet" href="/css/mine.css" />
|
||||
<link rel="stylesheet" href="/css/arena.css" />
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
@ -84,36 +87,6 @@
|
||||
background: #c8960c;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ── Quick Menu: immer sichtbar, unten, horizontal ── */
|
||||
#quickmenu-toggle {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#quickmenu-panel {
|
||||
position: fixed !important;
|
||||
bottom: 0 !important;
|
||||
left: 50% !important;
|
||||
transform: translateX(-50%) !important;
|
||||
top: auto !important;
|
||||
right: auto !important;
|
||||
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: nowrap !important;
|
||||
align-items: flex-end !important;
|
||||
gap: 6px !important;
|
||||
|
||||
padding: 8px 12px !important;
|
||||
|
||||
transition: none !important;
|
||||
transform: translateX(-50%) !important;
|
||||
}
|
||||
|
||||
#quickmenu-panel.hidden,
|
||||
#quickmenu-panel[style*="display: none"] {
|
||||
display: flex !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@ -245,24 +218,130 @@
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- ================================
|
||||
BUILDING POPUP
|
||||
================================ -->
|
||||
<div id="building-popup" class="building-popup">
|
||||
|
||||
<!-- Eckornamente -->
|
||||
<div class="popup-corner c-tl">
|
||||
<svg viewBox="0 0 30 30" width="30" height="30">
|
||||
<path d="M2,2 L14,2 L8,8 L2,8 Z" fill="#c8960c"/>
|
||||
<path d="M2,2 L2,14 L8,8 L8,2 Z" fill="#9a7a28"/>
|
||||
<circle cx="4" cy="4" r="2.5" fill="#f0d060"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="popup-corner c-tr">
|
||||
<svg viewBox="0 0 30 30" width="30" height="30">
|
||||
<path d="M2,2 L14,2 L8,8 L2,8 Z" fill="#c8960c"/>
|
||||
<path d="M2,2 L2,14 L8,8 L8,2 Z" fill="#9a7a28"/>
|
||||
<circle cx="4" cy="4" r="2.5" fill="#f0d060"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="popup-corner c-bl">
|
||||
<svg viewBox="0 0 30 30" width="30" height="30">
|
||||
<path d="M2,2 L14,2 L8,8 L2,8 Z" fill="#c8960c"/>
|
||||
<path d="M2,2 L2,14 L8,8 L8,2 Z" fill="#9a7a28"/>
|
||||
<circle cx="4" cy="4" r="2.5" fill="#f0d060"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="popup-corner c-br">
|
||||
<svg viewBox="0 0 30 30" width="30" height="30">
|
||||
<path d="M2,2 L14,2 L8,8 L2,8 Z" fill="#c8960c"/>
|
||||
<path d="M2,2 L2,14 L8,8 L8,2 Z" fill="#9a7a28"/>
|
||||
<circle cx="4" cy="4" r="2.5" fill="#f0d060"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="popup-header">
|
||||
<span id="popup-title">Gebäude</span>
|
||||
<div class="popup-title-wrap">
|
||||
<div class="popup-title-gem"></div>
|
||||
<span id="popup-title">Gebäude</span>
|
||||
<div class="popup-title-gem"></div>
|
||||
</div>
|
||||
<span class="popup-close">✕</span>
|
||||
</div>
|
||||
|
||||
<div class="popup-tabs">
|
||||
<button class="tab active" data-tab="info">Info</button>
|
||||
<button class="tab" data-tab="actions">Aktionen</button>
|
||||
<button class="tab" data-tab="upgrade">Upgrade</button>
|
||||
<button class="tab" data-tab="history">Geschichte</button>
|
||||
</div>
|
||||
<!-- Body: Sidebar + Content -->
|
||||
<div class="popup-body">
|
||||
|
||||
<!-- Vertikale Tab-Sidebar -->
|
||||
<div class="popup-tabs">
|
||||
|
||||
<!-- Info Tab -->
|
||||
<button class="tab active" data-tab="info">
|
||||
<svg class="tab-icon tab-icon-default" viewBox="0 0 26 26" fill="none">
|
||||
<path d="M13 3 L22 7 L22 14 C22 18.5 17.5 22 13 23 C8.5 22 4 18.5 4 14 L4 7 Z" stroke="#6a4820" stroke-width="1.5" fill="#1a0e04"/>
|
||||
<path d="M13 6 L19.5 9 L19.5 14 C19.5 17.5 16.5 20.2 13 21 C9.5 20.2 6.5 17.5 6.5 14 L6.5 9 Z" stroke="#7a5828" stroke-width="1" fill="#221408"/>
|
||||
<circle cx="13" cy="13" r="2" fill="#6a4820"/>
|
||||
<line x1="13" y1="9" x2="13" y2="11" stroke="#6a4820" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="13" y1="15" x2="13" y2="17" stroke="#6a4820" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<svg class="tab-icon tab-icon-active" viewBox="0 0 26 26" fill="none">
|
||||
<path d="M13 3 L22 7 L22 14 C22 18.5 17.5 22 13 23 C8.5 22 4 18.5 4 14 L4 7 Z" stroke="#c8960c" stroke-width="1.5" fill="#3a2208"/>
|
||||
<path d="M13 6 L19.5 9 L19.5 14 C19.5 17.5 16.5 20.2 13 21 C9.5 20.2 6.5 17.5 6.5 14 L6.5 9 Z" stroke="#e0b040" stroke-width="1" fill="#4a3010"/>
|
||||
<circle cx="13" cy="13" r="2" fill="#f0d060"/>
|
||||
<line x1="13" y1="9" x2="13" y2="11" stroke="#f0d060" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="13" y1="15" x2="13" y2="17" stroke="#f0d060" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<div class="tab-tip">Info</div>
|
||||
</button>
|
||||
|
||||
<!-- Aktionen Tab -->
|
||||
<button class="tab" data-tab="actions">
|
||||
<svg class="tab-icon tab-icon-default" viewBox="0 0 26 26" fill="none">
|
||||
<line x1="5" y1="5" x2="21" y2="21" stroke="#6a4820" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="21" y1="5" x2="5" y2="21" stroke="#6a4820" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="2" y1="10" x2="8" y2="6" stroke="#6a4820" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="24" y1="10" x2="18" y2="6" stroke="#6a4820" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="3" y1="7" x2="7" y2="3" stroke="#5a3810" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="23" y1="7" x2="19" y2="3" stroke="#5a3810" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<circle cx="13" cy="13" r="2" fill="#1a0e04" stroke="#5a3810" stroke-width="1"/>
|
||||
</svg>
|
||||
<svg class="tab-icon tab-icon-active" viewBox="0 0 26 26" fill="none">
|
||||
<line x1="5" y1="5" x2="21" y2="21" stroke="#d4a030" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="21" y1="5" x2="5" y2="21" stroke="#d4a030" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="2" y1="10" x2="8" y2="6" stroke="#f0d060" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="24" y1="10" x2="18" y2="6" stroke="#f0d060" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="3" y1="7" x2="7" y2="3" stroke="#c8960c" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="23" y1="7" x2="19" y2="3" stroke="#c8960c" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<circle cx="13" cy="13" r="2.5" fill="#3a2208" stroke="#f0d060" stroke-width="1"/>
|
||||
</svg>
|
||||
<div class="tab-tip">Aktionen</div>
|
||||
</button>
|
||||
|
||||
<!-- Upgrade Tab -->
|
||||
<button class="tab" data-tab="upgrade">
|
||||
<svg class="tab-icon tab-icon-default" viewBox="0 0 26 26" fill="none">
|
||||
<rect x="5" y="18" width="16" height="3" rx="1" fill="#3a2808" stroke="#5a3810" stroke-width="1"/>
|
||||
<rect x="7" y="14" width="12" height="5" rx="1" fill="#2a1c08" stroke="#5a3810" stroke-width="1"/>
|
||||
<rect x="14" y="5" width="7" height="5" rx="1" fill="#2a1c08" stroke="#6a4820" stroke-width="1.2"/>
|
||||
<line x1="16" y1="10" x2="9" y2="17" stroke="#6a4820" stroke-width="2" stroke-linecap="round"/>
|
||||
<circle cx="8" cy="13" r="0.8" fill="#6a4820"/>
|
||||
<circle cx="6" cy="11" r="0.5" fill="#5a3810"/>
|
||||
</svg>
|
||||
<svg class="tab-icon tab-icon-active" viewBox="0 0 26 26" fill="none">
|
||||
<rect x="5" y="18" width="16" height="3" rx="1" fill="#4a3010" stroke="#c8960c" stroke-width="1"/>
|
||||
<rect x="7" y="14" width="12" height="5" rx="1" fill="#3a2208" stroke="#c8960c" stroke-width="1"/>
|
||||
<rect x="14" y="5" width="7" height="5" rx="1" fill="#4a3010" stroke="#f0d060" stroke-width="1.2"/>
|
||||
<line x1="16" y1="10" x2="9" y2="17" stroke="#d4a030" stroke-width="2" stroke-linecap="round"/>
|
||||
<circle cx="8" cy="13" r="1" fill="#f0d060"/>
|
||||
<circle cx="6" cy="11" r="0.7" fill="#c8960c"/>
|
||||
<circle cx="10" cy="11" r="0.6" fill="#f0d060"/>
|
||||
</svg>
|
||||
<div class="tab-tip">Upgrade</div>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Tab-Inhalte -->
|
||||
<div class="popup-content">
|
||||
<div class="tab-content active" id="tab-info"></div>
|
||||
<div class="tab-content" id="tab-actions"></div>
|
||||
<div class="tab-content" id="tab-upgrade"></div>
|
||||
</div>
|
||||
|
||||
<div class="popup-content">
|
||||
<div class="tab-content active" id="tab-info"></div>
|
||||
<div class="tab-content" id="tab-actions"></div>
|
||||
<div class="tab-content" id="tab-upgrade"></div>
|
||||
<div class="tab-content" id="tab-history"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -320,44 +399,17 @@
|
||||
<div id="hud-currency">
|
||||
<div class="hud-res-row">
|
||||
<div class="hud-res">
|
||||
<div class="hud-res-icon-silver">
|
||||
<img
|
||||
src="/images/items/silbermuenze.png"
|
||||
alt=""
|
||||
onerror="
|
||||
this.style.display = 'none';
|
||||
this.parentElement.insertAdjacentText('beforeend', '⚪');
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<span class="hud-res-icon">⚪</span>
|
||||
<span class="hud-res-value" id="hud-silver">0</span>
|
||||
</div>
|
||||
<div class="hud-sep"></div>
|
||||
<div class="hud-res">
|
||||
<div class="hud-res-icon-gem">
|
||||
<img
|
||||
src="/images/items/blauer_cristal.png"
|
||||
alt=""
|
||||
onerror="
|
||||
this.style.display = 'none';
|
||||
this.parentElement.insertAdjacentText('beforeend', '💠');
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<span class="hud-res-icon">💠</span>
|
||||
<span class="hud-res-value" id="hud-gems">0</span>
|
||||
</div>
|
||||
<div class="hud-sep"></div>
|
||||
<div class="hud-res">
|
||||
<div class="hud-res-icon-gold">
|
||||
<img
|
||||
src="/images/items/goldmuenze.png"
|
||||
alt=""
|
||||
onerror="
|
||||
this.style.display = 'none';
|
||||
this.parentElement.insertAdjacentText('beforeend', '🪙');
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<span class="hud-res-icon">🪙</span>
|
||||
<span class="hud-res-value" id="hud-gold">0</span>
|
||||
</div>
|
||||
<button id="hud-gold-btn">Gold</button>
|
||||
@ -365,46 +417,14 @@
|
||||
|
||||
<div class="hud-res-row">
|
||||
<div class="hud-res">
|
||||
<div class="hud-res-icon-wood">
|
||||
<img
|
||||
src="/images/items/holz.png"
|
||||
alt=""
|
||||
onerror="
|
||||
this.style.display = 'none';
|
||||
this.parentElement.insertAdjacentText('beforeend', '🪵');
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<span class="hud-res-icon">🪵</span>
|
||||
<span class="hud-res-value" id="hud-wood">0</span>
|
||||
</div>
|
||||
<div class="hud-sep"></div>
|
||||
<div class="hud-res">
|
||||
<div class="hud-res-icon-stone">
|
||||
<img
|
||||
src="/images/items/stein.png"
|
||||
alt=""
|
||||
onerror="
|
||||
this.style.display = 'none';
|
||||
this.parentElement.insertAdjacentText('beforeend', '🪨');
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<span class="hud-res-icon">🪨</span>
|
||||
<span class="hud-res-value" id="hud-stone">0</span>
|
||||
</div>
|
||||
<div class="hud-sep"></div>
|
||||
<div class="hud-res">
|
||||
<div class="hud-res-icon-iron">
|
||||
<img
|
||||
src="/images/items/eisen.png"
|
||||
alt=""
|
||||
onerror="
|
||||
this.style.display = 'none';
|
||||
this.parentElement.insertAdjacentText('beforeend', '⚙️');
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<span class="hud-res-value" id="hud-iron">0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -420,11 +440,11 @@
|
||||
<div id="quickmenu-panel">
|
||||
<div class="qm-slot" data-popup="qm-popup-glucksbox">
|
||||
<img
|
||||
src="/images/menueleiste/kartendeck.png"
|
||||
src="/images/quickmenu/glucksbox.png"
|
||||
alt=""
|
||||
onerror="this.style.display = 'none'"
|
||||
/>
|
||||
<span class="qm-slot-label">Kartendeck</span>
|
||||
<span class="qm-slot-label">Glücksbox</span>
|
||||
</div>
|
||||
|
||||
<div class="qm-slot" data-popup="qm-popup-events">
|
||||
@ -520,7 +540,7 @@
|
||||
|
||||
<div id="qm-popup-glucksbox" class="qm-popup">
|
||||
<div class="qm-popup-header">
|
||||
<span class="qm-popup-title">Kartendeck</span>
|
||||
<span class="qm-popup-title">Glücksbox</span>
|
||||
<span class="qm-popup-close">✕</span>
|
||||
</div>
|
||||
<div class="qm-popup-body" id="qm-body-glucksbox"></div>
|
||||
@ -643,7 +663,7 @@
|
||||
const vol = document.getElementById("music-volume");
|
||||
|
||||
let muted = localStorage.getItem("dok_muted") === "true";
|
||||
let started = false; // ← merkt sich, ob Wiedergabe schon lief
|
||||
let started = false;
|
||||
|
||||
if (localStorage.getItem("dok_vol") !== null)
|
||||
vol.value = localStorage.getItem("dok_vol");
|
||||
@ -656,12 +676,7 @@
|
||||
audio.src = shuffled[i];
|
||||
audio.muted = muted;
|
||||
if (!muted) {
|
||||
audio
|
||||
.play()
|
||||
.then(() => {
|
||||
started = true;
|
||||
})
|
||||
.catch(() => {});
|
||||
audio.play().then(() => { started = true; }).catch(() => {});
|
||||
}
|
||||
}
|
||||
|
||||
@ -674,16 +689,9 @@
|
||||
audio.muted = muted;
|
||||
muteBtn.textContent = muted ? "🔇" : "🔊";
|
||||
localStorage.setItem("dok_muted", muted);
|
||||
|
||||
// Wenn gerade nicht stumm, aber Audio pausiert → starten/fortsetzen
|
||||
if (!muted) {
|
||||
if (!audio.src) playTrack(index);
|
||||
audio
|
||||
.play()
|
||||
.then(() => {
|
||||
started = true;
|
||||
})
|
||||
.catch(() => {});
|
||||
audio.play().then(() => { started = true; }).catch(() => {});
|
||||
}
|
||||
}
|
||||
|
||||
@ -702,20 +710,12 @@
|
||||
muteBtn.textContent = parseFloat(vol.value) === 0 ? "🔇" : "🔊";
|
||||
});
|
||||
|
||||
// Track laden (noch kein play() – Browser erlaubt das vor Interaktion nicht)
|
||||
playTrack(0);
|
||||
applyMute();
|
||||
|
||||
// Bei JEDER Interaktion prüfen, ob Audio noch nicht läuft → nachholen
|
||||
// (kein { once: true } mehr, schadet aber kaum da der Check schnell ist)
|
||||
function tryResume() {
|
||||
if (!muted && (audio.paused || !started)) {
|
||||
audio
|
||||
.play()
|
||||
.then(() => {
|
||||
started = true;
|
||||
})
|
||||
.catch(() => {});
|
||||
audio.play().then(() => { started = true; }).catch(() => {});
|
||||
}
|
||||
}
|
||||
document.addEventListener("click", tryResume);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user