änderung der namensgebung

This commit is contained in:
cay 2026-03-29 10:45:47 +01:00
parent 0e423f834d
commit 778aef8b0a
28 changed files with 889 additions and 977 deletions

6
app.js
View File

@ -1,4 +1,4 @@
require("dotenv").config();
require("dotenv").config();
const express = require("express");
const path = require("path");
@ -21,8 +21,8 @@ const avatar = require("./routes/avatar");
const equip = require("./routes/equip");
const equipment = require("./routes/equipment");
const blackmarket = require("./routes/blackmarket");
const mineRoute = require("./routes/mine_route");
const arenaRoutes = require("./routes/routes_arena");
const mineRoute = require("./routes/mine");
const arenaRoutes = require("./routes/arena");
const { registerArenaHandlers } = require("./sockets/arena");
const { registerChatHandlers } = require("./sockets/chat");

View File

@ -1,3 +1,9 @@
/* ================================================
building.css Charakter, Equipment, Inventar
Dynasty of Knights
Popup/Tooltip/Notification popup.css
================================================ */
/* =========================
Base
========================= */
@ -27,195 +33,6 @@ body {
box-shadow: 0 0 6px #3cff3c;
}
/* =========================
Popup Fenster
========================= */
.building-popup {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 900px;
max-width: 90vw;
max-height: 1000px;
background: url("/images/parchment.png") center / cover no-repeat;
border: 4px solid #6b4b2a;
border-radius: 10px;
box-shadow:
0 0 40px rgba(0, 0, 0, 0.9),
inset 0 0 25px rgba(0, 0, 0, 0.5);
display: none;
flex-direction: column;
z-index: 1000;
animation: popupFade 0.25s ease;
}
.building-popup.active {
display: flex;
}
/* =========================
Popup Header
========================= */
.popup-header {
padding: 14px;
font-family: "Tangerine", serif;
font-size: 36px;
background: linear-gradient(#6b4b2a, #3c2414);
border-bottom: 2px solid #8b6a3c;
display: flex;
justify-content: space-between;
color: #f0d9a6;
text-shadow: 0 2px 4px black;
}
.popup-header span {
cursor: pointer;
}
/* =========================
Tabs
========================= */
.popup-tabs {
display: flex;
border-bottom: 2px solid #8b6a3c;
}
.popup-tabs button {
flex: 1;
padding: 10px;
font-family: "Cinzel", serif;
font-weight: bold;
background: linear-gradient(#5c3b20, #3a2513);
border: 1px solid #8b6a3c;
color: #e7d9b4;
cursor: pointer;
transition: 0.2s;
}
.popup-tabs button:hover {
background: linear-gradient(#8b6a3c, #5c3b20);
}
.popup-tabs button.active {
background: linear-gradient(#d4b97a, #9c7a3a);
color: #2b1b0f;
}
/* =========================
Popup Inhalt
========================= */
.popup-content {
padding: 16px 60px 16px 60px;
font-size: 15px;
line-height: 1.6;
letter-spacing: 0.5px;
background: rgba(255, 255, 255, 0.08);
border-radius: 6px;
color: #2b1b0f;
overflow-y: auto;
flex: 1;
}
.popup-content h3 {
font-family: "Tangerine", serif;
font-size: 32px;
color: #3b2412;
margin-top: 0;
}
.popup-content p {
color: #3a2413;
}
/* =========================
Tab Inhalte
========================= */
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
/* =========================
Buttons
========================= */
.popup-content button {
margin-top: 10px;
background: linear-gradient(#7a5a2a, #caa24b);
border: 1px solid #e0c67b;
padding: 10px 18px;
color: #1a1206;
font-weight: bold;
cursor: pointer;
transition: 0.2s;
}
.popup-content button:hover {
transform: scale(1.05);
box-shadow:
0 0 10px #ffd66b,
0 0 25px #caa24b;
}
/* =========================
Tooltip
========================= */
#map-tooltip {
position: fixed;
pointer-events: none;
background: rgba(0, 0, 0, 0.85);
color: #fff;
padding: 8px 12px;
border-radius: 6px;
font-size: 14px;
display: none;
z-index: 9999;
max-width: 200px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
#map-tooltip strong {
color: #ffd700;
}
/* =========================
Character Window
========================= */
@ -601,127 +418,6 @@ body {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
/* =========================
Game Notification
========================= */
#game-notification {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.85);
z-index: 9999;
width: 360px;
max-width: 90vw;
background: url("/images/parchment.png") center / cover no-repeat;
border: 3px solid #6b4b2a;
border-radius: 10px;
box-shadow:
0 0 40px rgba(0, 0, 0, 0.9),
inset 0 0 20px rgba(0, 0, 0, 0.4);
display: none;
opacity: 0;
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
#game-notification.show {
display: block;
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.notification-header {
padding: 12px 16px;
background: linear-gradient(#6b4b2a, #3c2414);
border-bottom: 2px solid #8b6a3c;
border-radius: 7px 7px 0 0;
font-family: "Tangerine", serif;
font-size: 28px;
color: #f0d9a6;
text-shadow: 0 2px 4px black;
display: flex;
align-items: center;
gap: 8px;
}
.notification-body {
padding: 20px 20px 10px 20px;
font-family: "Cinzel", serif;
font-size: 15px;
color: #2b1b0f;
line-height: 1.8;
text-align: center;
white-space: pre-line;
}
.notification-footer {
padding: 10px 20px 16px 20px;
display: flex;
justify-content: center;
}
.notification-btn {
padding: 8px 28px !important;
font-size: 14px !important;
font-family: "Cinzel", serif !important;
font-weight: bold !important;
background: linear-gradient(#7a5a2a, #caa24b) !important;
border: 1px solid #e0c67b !important;
border-radius: 4px;
color: #1a1206 !important;
cursor: pointer;
transition: 0.2s;
margin-top: 0 !important;
}
.notification-btn:hover {
transform: scale(1.05);
box-shadow:
0 0 10px #ffd66b,
0 0 20px #caa24b;
}
#game-notification-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 9998;
display: none;
}
#game-notification-overlay.show {
display: block;
}
/* =========================
Animation
========================= */
@keyframes popupFade {
from {
opacity: 0;
transform: translate(-50%, -40%);
}
to {
opacity: 1;
transform: translate(-50%, -50%);
}
}
/* =========================
Schwarzmarkt Tabs
========================= */

View File

@ -206,108 +206,24 @@
}
.hud-res-icon {
font-size: 0; /* Emoji unsichtbar */
font-size: 0; /* Emoji unsichtbar */
color: transparent;
display: inline-block;
width: 20px;
height: 20px;
flex-shrink: 0;
background: url("/images/items/blauer%20cristal.png") center / contain no-repeat;
background: url("/images/items/blauer%20cristal.png") center / contain
no-repeat;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
vertical-align: middle;
}
/* Blauer Kristall / Gems Bild aus der Datenbank */
.hud-res-icon-gem {
width: 28px;
height: 28px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.hud-res-icon-gem img {
width: 28px;
height: 28px;
object-fit: contain;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
display: block;
}
/* Silbermünze Bild aus der Datenbank */
.hud-res-icon-silver {
width: 28px;
height: 28px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.hud-res-icon-silver img {
width: 28px;
height: 28px;
object-fit: contain;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
display: block;
}
/* Holz Bild aus der Datenbank */
.hud-res-icon-wood {
width: 28px;
height: 28px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.hud-res-icon-wood img {
width: 28px;
height: 28px;
object-fit: contain;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
display: block;
}
/* Stein Bild aus der Datenbank */
.hud-res-icon-stone {
width: 28px;
height: 28px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.hud-res-icon-stone img {
width: 28px;
height: 28px;
object-fit: contain;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
display: block;
}
/* Goldmünze Bild aus der Datenbank */
.hud-res-icon-gold {
width: 28px;
height: 28px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.hud-res-icon-gold img {
width: 28px;
height: 28px;
object-fit: contain;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
display: block;
}
/* Eisen Bild aus der Datenbank */
/* Ressource Icons (gem, silver, wood, stone, gold, iron) einheitliche Größe */
.hud-res-icon-gem,
.hud-res-icon-silver,
.hud-res-icon-wood,
.hud-res-icon-stone,
.hud-res-icon-gold,
.hud-res-icon-iron {
width: 28px;
height: 28px;
@ -317,6 +233,11 @@
justify-content: center;
}
.hud-res-icon-gem img,
.hud-res-icon-silver img,
.hud-res-icon-wood img,
.hud-res-icon-stone img,
.hud-res-icon-gold img,
.hud-res-icon-iron img {
width: 28px;
height: 28px;
@ -376,6 +297,6 @@
height: 18px;
object-fit: contain;
vertical-align: middle;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
display: inline-block;
}

View File

@ -0,0 +1,31 @@
/* ================================================
launcher-dev.css Map Developer Tool
Dynasty of Knights
================================================ */
body {
margin: 0;
background: #000;
display: flex;
justify-content: center;
}
.wrapper {
position: relative;
}
img {
display: block;
}
svg {
position: absolute;
top: 0;
left: 0;
}
polygon {
fill: rgba(255, 0, 0, 0.35);
stroke: red;
stroke-width: 2;
}

View File

@ -171,3 +171,54 @@
margin-right: 6px;
box-shadow: 0 0 6px #3cff3c;
}
/* ── Music Control ─────────────────────────────── */
#music-control {
position: fixed;
bottom: 16px;
right: 16px;
z-index: 9999;
display: flex;
align-items: center;
gap: 8px;
background: rgba(10, 5, 0, 0.85);
border: 1px solid #c8960c;
border-radius: 8px;
padding: 6px 10px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
#music-mute-btn {
background: none;
border: none;
cursor: pointer;
font-size: 20px;
line-height: 1;
padding: 0;
color: #f0d080;
transition: transform 0.15s;
}
#music-mute-btn:hover {
transform: scale(1.2);
}
#music-volume {
-webkit-appearance: none;
appearance: none;
width: 80px;
height: 4px;
background: #3a2000;
border-radius: 2px;
outline: none;
cursor: pointer;
}
#music-volume::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: #c8960c;
cursor: pointer;
}

165
public/css/login.css Normal file
View File

@ -0,0 +1,165 @@
/* ================================================
login.css Login-Seite & Register-Seite
Dynasty of Knights
================================================ */
/* ── Base ──────────────────────────────────────── */
* {
box-sizing: border-box;
font-family: "Tangerine", serif;
}
body {
margin: 0;
min-height: 100vh;
background: url("/images/background_login.png") center / cover no-repeat fixed;
display: flex;
justify-content: center;
align-items: center;
}
/* ── Nebel ─────────────────────────────────────── */
.fog {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40%;
z-index: 0;
pointer-events: none;
}
@keyframes fogmove {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ── Login Panel ───────────────────────────────── */
.launcher {
width: 380px;
padding: 30px;
position: relative;
z-index: 2;
font-family: "Tangerine", serif;
font-size: 16px;
background: rgba(10, 15, 20, 0.75);
backdrop-filter: blur(10px);
border-radius: 10px;
border: 1px solid rgba(100, 170, 255, 0.4);
box-shadow:
0 0 40px rgba(0, 0, 0, 0.8),
0 0 20px rgba(70, 120, 255, 0.5);
}
/* ── Register Box ──────────────────────────────── */
.register-box {
width: 380px;
padding: 30px;
background: rgba(10, 15, 20, 0.8);
border-radius: 10px;
border: 1px solid rgba(100, 170, 255, 0.4);
box-shadow:
0 0 40px rgba(0, 0, 0, 0.8),
0 0 20px rgba(70, 120, 255, 0.5);
}
/* ── Charakter Box ─────────────────────────────── */
.box {
background: rgba(0, 0, 0, 0.7);
padding: 40px;
border-radius: 10px;
text-align: center;
width: 400px;
}
/* ── Inputs / Selects / Buttons ────────────────── */
input,
select,
button,
.register,
.server-status {
width: 100%;
padding: 13px;
font-size: 24px;
margin-bottom: 15px;
font-family: "Tangerine", serif;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 6px;
color: white;
}
/* ── Login Button ──────────────────────────────── */
.login {
width: 100%;
padding: 14px;
font-size: 32px;
background: linear-gradient(45deg, #3da2ff, #7dd3ff);
border: none;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: 0.25s;
}
.login:hover {
transform: scale(1.05);
box-shadow:
0 0 20px #4aa3ff,
0 0 40px #4aa3ff;
}
/* ── Register Link ─────────────────────────────── */
.register {
display: block;
text-align: center;
margin-top: 10px;
color: #ccc;
text-decoration: none;
}
.register:hover {
color: white;
}
/* ── Zurück Link ───────────────────────────────── */
.back {
display: block;
text-align: center;
color: #ccc;
margin-top: 10px;
text-decoration: none;
}
.back:hover {
color: white;
}
/* ── Server Status Box ─────────────────────────── */
.server-status {
margin-top: 18px;
font-size: 24px;
padding: 10px;
background: rgba(0, 0, 0, 0.45);
border-radius: 6px;
}
.online { color: #3cff5a; }
.offline { color: #ff4b4b; }
/* ── Fehler-Meldung ────────────────────────────── */
.error {
color: red;
margin-bottom: 15px;
}
/* ── Charakter-Seite: Input/Button ─────────────── */
.box input,
.box button {
width: 100%;
padding: 14px;
margin-top: 10px;
border-radius: 6px;
border: none;
box-sizing: border-box;
}

View File

@ -68,7 +68,9 @@
border: 1px solid rgba(122, 90, 26, 0.3);
border-radius: 6px;
padding: 7px 12px;
transition: border-color 0.2s, background 0.2s;
transition:
border-color 0.2s,
background 0.2s;
}
.mine-resource-row.mine-resource-ready {
@ -85,97 +87,12 @@
justify-content: center;
}
/* Blauer Kristall / Gems Bild aus der Datenbank */
.mine-resource-icon-gem {
width: 100px;
height: 100px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.mine-resource-icon-gem img {
width: 100px;
height: 100px;
object-fit: contain;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
display: block;
}
/* Silbermünze Bild aus der Datenbank */
.mine-resource-icon-silver {
width: 100px;
height: 100px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.mine-resource-icon-silver img {
width: 100px;
height: 100px;
object-fit: contain;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
display: block;
}
/* Holz Bild aus der Datenbank */
.mine-resource-icon-wood {
width: 100px;
height: 100px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.mine-resource-icon-wood img {
width: 100px;
height: 100px;
object-fit: contain;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
display: block;
}
/* Stein Bild aus der Datenbank */
.mine-resource-icon-stone {
width: 100px;
height: 100px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.mine-resource-icon-stone img {
width: 100px;
height: 100px;
object-fit: contain;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
display: block;
}
/* Goldmünze Bild aus der Datenbank */
.mine-resource-icon-gold {
width: 100px;
height: 100px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.mine-resource-icon-gold img {
width: 100px;
height: 100px;
object-fit: contain;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
display: block;
}
/* Eisen Bild aus der Datenbank */
/* Ressource Icons (gem, silver, wood, stone, gold, iron) einheitliche Größe */
.mine-resource-icon-gem,
.mine-resource-icon-silver,
.mine-resource-icon-wood,
.mine-resource-icon-stone,
.mine-resource-icon-gold,
.mine-resource-icon-iron {
width: 100px;
height: 100px;
@ -185,6 +102,11 @@
justify-content: center;
}
.mine-resource-icon-gem img,
.mine-resource-icon-silver img,
.mine-resource-icon-wood img,
.mine-resource-icon-stone img,
.mine-resource-icon-gold img,
.mine-resource-icon-iron img {
width: 100px;
height: 100px;
@ -253,7 +175,9 @@
font-weight: bold;
cursor: pointer;
letter-spacing: 0.04em;
transition: filter 0.15s, transform 0.1s;
transition:
filter 0.15s,
transform 0.1s;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
width: 100%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
@ -291,8 +215,13 @@
}
@keyframes minePulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.45;
}
}
.mine-error {

View File

@ -1,6 +1,6 @@
import { showNotification } from "../notification.js";
import { showNotification } from "../notification.js";
export async function loadSchwarzmarkt() {
export async function loadBlackmarket() {
const ui = document.querySelector(".building-ui");
ui.innerHTML = `

View File

@ -3,7 +3,7 @@ const slotsPerPage = 32;
let inventoryItems = [];
let totalInventoryPages = 1;
export async function loadWohnhaus() {
export async function loadCharacterHouse() {
const ui = document.querySelector(".building-ui");
ui.innerHTML = `

View File

@ -1,5 +1,5 @@
import { loadWohnhaus } from "./buildings/wohnhaus.js";
import { loadSchwarzmarkt } from "./buildings/schwarzmarkt.js";
import { loadCharacterHouse } from "./buildings/character-house.js";
import { loadBlackmarket } from "./buildings/blackmarket.js";
import { loadMine } from "./buildings/mine.js";
const popup = document.getElementById("building-popup");
const title = document.getElementById("popup-title");
@ -8,8 +8,8 @@ const tooltip = document.getElementById("map-tooltip");
const tooltipCache = {};
const buildingModules = {
11: loadWohnhaus, // Tabs ausblenden, eigenes UI
12: loadSchwarzmarkt, // Tabs ausblenden, eigenes UI
11: loadCharacterHouse, // Tabs ausblenden, eigenes UI
12: loadBlackmarket, // Tabs ausblenden, eigenes UI
10: loadMine, // Tabs bleiben sichtbar, nur Aktionen-Tab befüllen
};
@ -70,7 +70,7 @@ document.querySelectorAll(".building").forEach((building) => {
<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>
<p class="popup-desc">${data.description}</p>
<p class="popup-desc" style="color:#cccccc !important;font-size:13px;line-height:1.8;">${data.description}</p>
<div class="popup-xp-wrap">
<div class="popup-xp-label">Fortschritt zum nächsten Level</div>
<div class="popup-xp-track">

View File

@ -1,26 +1,26 @@
import { loadGlucksbox } from "./quickmenu/glucksbox.js";
import { loadLuckyBox } from "./quickmenu/lucky-box.js";
import { loadEvents } from "./quickmenu/events.js";
import { loadHeldenbonus } from "./quickmenu/heldenbonus.js";
import { loadSealedliga } from "./quickmenu/sealedliga.js";
import { loadBeschwoerer } from "./quickmenu/beschwoerer.js";
import { loadHeroBonus } from "./quickmenu/hero-bonus.js";
import { loadSealedLeague } from "./quickmenu/sealed-league.js";
import { loadSummoner } from "./quickmenu/summoner.js";
import { loadOnlinebonus } from "./quickmenu/onlinebonus.js";
import { loadAktionen } from "./quickmenu/aktionen.js";
import { loadBasar } from "./quickmenu/basar.js";
import { loadBoosteraktion } from "./quickmenu/boosteraktion.js";
import { loadBoosterjagd } from "./quickmenu/boosterjagd.js";
import { loadActions } from "./quickmenu/actions.js";
import { loadBazaar } from "./quickmenu/bazaar.js";
import { loadBoosterAction } from "./quickmenu/booster-action.js";
import { loadBoosterHunt } from "./quickmenu/booster-hunt.js";
/* Popup-ID → Loader Funktion */
const popupLoaders = {
"qm-popup-glucksbox": loadGlucksbox,
"qm-popup-glucksbox": loadLuckyBox,
"qm-popup-events": loadEvents,
"qm-popup-heldenbonus": loadHeldenbonus,
"qm-popup-sealedliga": loadSealedliga,
"qm-popup-beschwoerer": loadBeschwoerer,
"qm-popup-heldenbonus": loadHeroBonus,
"qm-popup-sealedliga": loadSealedLeague,
"qm-popup-beschwoerer": loadSummoner,
"qm-popup-onlinebonus": loadOnlinebonus,
"qm-popup-aktionen": loadAktionen,
"qm-popup-basar": loadBasar,
"qm-popup-boosteraktion": loadBoosteraktion,
"qm-popup-boosterjagd": loadBoosterjagd,
"qm-popup-aktionen": loadActions,
"qm-popup-basar": loadBazaar,
"qm-popup-boosteraktion": loadBoosterAction,
"qm-popup-boosterjagd": loadBoosterHunt,
};
/* ================================

View File

@ -1,4 +1,4 @@
export async function loadAktionen() {
export async function loadActions() {
const body = document.getElementById("qm-body-aktionen");
if (!body) return;

View File

@ -1,4 +1,4 @@
export async function loadBasar() {
export async function loadBazaar() {
const body = document.getElementById("qm-body-basar");
if (!body) return;

View File

@ -1,4 +1,4 @@
export async function loadBoosteraktion() {
export async function loadBoosterAction() {
const body = document.getElementById("qm-body-boosteraktion");
if (!body) return;

View File

@ -1,4 +1,4 @@
export async function loadBoosterjagd() {
export async function loadBoosterHunt() {
const body = document.getElementById("qm-body-boosterjagd");
if (!body) return;

View File

@ -1,4 +1,4 @@
export async function loadHeldenbonus() {
export async function loadHeroBonus() {
const body = document.getElementById("qm-body-heldenbonus");
if (!body) return;

View File

@ -1,4 +1,4 @@
export async function loadGlucksbox() {
export async function loadLuckyBox() {
const body = document.getElementById("qm-body-glucksbox");
if (!body) return;

View File

@ -1,4 +1,4 @@
export async function loadSealedliga() {
export async function loadSealedLeague() {
const body = document.getElementById("qm-body-sealedliga");
if (!body) return;

View File

@ -1,4 +1,4 @@
export async function loadBeschwoerer() {
export async function loadSummoner() {
const body = document.getElementById("qm-body-beschwoerer");
if (!body) return;

215
rename-all.ps1 Normal file
View File

@ -0,0 +1,215 @@
# ============================================================
# Dynasty of Knights — Datei-Umbenennung (Windows PowerShell)
# Ausfuehren im ROOT-Verzeichnis des Projekts: .\rename-all.ps1
# ============================================================
Write-Host "Starte Umbenennung..." -ForegroundColor Cyan
# ============================================================
# 1. BACKEND ROUTES
# ============================================================
Rename-Item "routes\mine_route.js" "mine.js"
Rename-Item "routes\routes_arena.js" "arena.js"
Write-Host "Backend-Routes umbenannt" -ForegroundColor Green
# ============================================================
# 2. FRONTEND — BUILDING-MODULE
# ============================================================
Rename-Item "public\js\buildings\schwarzmarkt.js" "blackmarket.js"
Rename-Item "public\js\buildings\wohnhaus.js" "character-house.js"
Write-Host "Building-Module umbenannt" -ForegroundColor Green
# ============================================================
# 3. FRONTEND — QUICKMENU-MODULE
# ============================================================
Rename-Item "public\js\quickmenu\glucksbox.js" "lucky-box.js"
Rename-Item "public\js\quickmenu\heldenbonus.js" "hero-bonus.js"
Rename-Item "public\js\quickmenu\sealedliga.js" "sealed-league.js"
Rename-Item "public\js\quickmenu\beschwoerer.js" "summoner.js"
Rename-Item "public\js\quickmenu\aktionen.js" "actions.js"
Rename-Item "public\js\quickmenu\basar.js" "bazaar.js"
Rename-Item "public\js\quickmenu\boosteraktion.js" "booster-action.js"
Rename-Item "public\js\quickmenu\boosterjagd.js" "booster-hunt.js"
Write-Host "Quickmenu-Module umbenannt" -ForegroundColor Green
# ============================================================
# 4. VIEW-TEMPLATE
# ============================================================
Rename-Item "views\1v1_spielfeld.ejs" "1v1-battlefield.ejs"
Write-Host "EJS-Template umbenannt" -ForegroundColor Green
Write-Host ""
Write-Host "Starte Code-Aenderungen..." -ForegroundColor Cyan
# ============================================================
# HILFSFUNKTION: Text in Datei ersetzen
# ============================================================
function Replace-InFile($path, $oldText, $newText) {
$content = Get-Content $path -Raw -Encoding UTF8
$updated = $content -replace [regex]::Escape($oldText), $newText
Set-Content $path $updated -Encoding UTF8 -NoNewline
}
# ============================================================
# app.js
# ============================================================
Replace-InFile "app.js" `
'require("./routes/mine_route")' `
'require("./routes/mine")'
Replace-InFile "app.js" `
'require("./routes/routes_arena")' `
'require("./routes/arena")'
Write-Host "app.js aktualisiert" -ForegroundColor Green
# ============================================================
# routes\arena.js (ehem. routes_arena.js)
# ============================================================
Replace-InFile "routes\arena.js" `
'res.render("1v1_spielfeld"' `
'res.render("1v1-battlefield"'
Write-Host "routes\arena.js aktualisiert" -ForegroundColor Green
# ============================================================
# public\js\buildings\character-house.js
# ============================================================
Replace-InFile "public\js\buildings\character-house.js" `
'export async function loadWohnhaus' `
'export async function loadCharacterHouse'
Write-Host "character-house.js aktualisiert" -ForegroundColor Green
# ============================================================
# public\js\buildings\blackmarket.js
# ============================================================
Replace-InFile "public\js\buildings\blackmarket.js" `
'export async function loadSchwarzmarkt' `
'export async function loadBlackmarket'
Write-Host "blackmarket.js aktualisiert" -ForegroundColor Green
# ============================================================
# public\js\map-ui.js
# ============================================================
Replace-InFile "public\js\map-ui.js" `
'import { loadWohnhaus } from "./buildings/wohnhaus.js"' `
'import { loadCharacterHouse } from "./buildings/character-house.js"'
Replace-InFile "public\js\map-ui.js" `
'import { loadSchwarzmarkt } from "./buildings/schwarzmarkt.js"' `
'import { loadBlackmarket } from "./buildings/blackmarket.js"'
Replace-InFile "public\js\map-ui.js" `
'loadWohnhaus' `
'loadCharacterHouse'
Replace-InFile "public\js\map-ui.js" `
'loadSchwarzmarkt' `
'loadBlackmarket'
Write-Host "map-ui.js aktualisiert" -ForegroundColor Green
# ============================================================
# Quickmenu-Dateien — Funktionsnamen
# ============================================================
Replace-InFile "public\js\quickmenu\lucky-box.js" 'export async function loadGlucksbox' 'export async function loadLuckyBox'
Replace-InFile "public\js\quickmenu\hero-bonus.js" 'export async function loadHeldenbonus' 'export async function loadHeroBonus'
Replace-InFile "public\js\quickmenu\sealed-league.js" 'export async function loadSealedliga' 'export async function loadSealedLeague'
Replace-InFile "public\js\quickmenu\summoner.js" 'export async function loadBeschwoerer' 'export async function loadSummoner'
Replace-InFile "public\js\quickmenu\actions.js" 'export async function loadAktionen' 'export async function loadActions'
Replace-InFile "public\js\quickmenu\bazaar.js" 'export async function loadBasar' 'export async function loadBazaar'
Replace-InFile "public\js\quickmenu\booster-action.js" 'export async function loadBoosteraktion' 'export async function loadBoosterAction'
Replace-InFile "public\js\quickmenu\booster-hunt.js" 'export async function loadBoosterjagd' 'export async function loadBoosterHunt'
Write-Host "Quickmenu-Funktionsnamen aktualisiert" -ForegroundColor Green
# ============================================================
# public\js\quickmenu.js — Imports + Funktionsreferenzen
# ============================================================
Replace-InFile "public\js\quickmenu.js" `
'import { loadGlucksbox } from "./quickmenu/glucksbox.js"' `
'import { loadLuckyBox } from "./quickmenu/lucky-box.js"'
Replace-InFile "public\js\quickmenu.js" `
'import { loadHeldenbonus } from "./quickmenu/heldenbonus.js"' `
'import { loadHeroBonus } from "./quickmenu/hero-bonus.js"'
Replace-InFile "public\js\quickmenu.js" `
'import { loadSealedliga } from "./quickmenu/sealedliga.js"' `
'import { loadSealedLeague } from "./quickmenu/sealed-league.js"'
Replace-InFile "public\js\quickmenu.js" `
'import { loadBeschwoerer } from "./quickmenu/beschwoerer.js"' `
'import { loadSummoner } from "./quickmenu/summoner.js"'
Replace-InFile "public\js\quickmenu.js" `
'import { loadAktionen } from "./quickmenu/aktionen.js"' `
'import { loadActions } from "./quickmenu/actions.js"'
Replace-InFile "public\js\quickmenu.js" `
'import { loadBasar } from "./quickmenu/basar.js"' `
'import { loadBazaar } from "./quickmenu/bazaar.js"'
Replace-InFile "public\js\quickmenu.js" `
'import { loadBoosteraktion } from "./quickmenu/boosteraktion.js"' `
'import { loadBoosterAction } from "./quickmenu/booster-action.js"'
Replace-InFile "public\js\quickmenu.js" `
'import { loadBoosterjagd } from "./quickmenu/boosterjagd.js"' `
'import { loadBoosterHunt } from "./quickmenu/booster-hunt.js"'
Replace-InFile "public\js\quickmenu.js" 'loadGlucksbox' 'loadLuckyBox'
Replace-InFile "public\js\quickmenu.js" 'loadHeldenbonus' 'loadHeroBonus'
Replace-InFile "public\js\quickmenu.js" 'loadSealedliga' 'loadSealedLeague'
Replace-InFile "public\js\quickmenu.js" 'loadBeschwoerer' 'loadSummoner'
Replace-InFile "public\js\quickmenu.js" 'loadAktionen' 'loadActions'
Replace-InFile "public\js\quickmenu.js" 'loadBasar' 'loadBazaar'
Replace-InFile "public\js\quickmenu.js" 'loadBoosteraktion' 'loadBoosterAction'
Replace-InFile "public\js\quickmenu.js" 'loadBoosterjagd' 'loadBoosterHunt'
Write-Host "quickmenu.js aktualisiert" -ForegroundColor Green
# ============================================================
# ZUSAMMENFASSUNG
# ============================================================
Write-Host ""
Write-Host "============================================================" -ForegroundColor Cyan
Write-Host " FERTIG! 12 Dateien umbenannt + alle Referenzen angepasst." -ForegroundColor Cyan
Write-Host "============================================================" -ForegroundColor Cyan
Write-Host ""
Write-Host "Geaenderte Dateien:" -ForegroundColor Yellow
Write-Host " app.js"
Write-Host " routes\arena.js (war: routes_arena.js)"
Write-Host " routes\mine.js (war: mine_route.js)"
Write-Host " views\1v1-battlefield.ejs (war: 1v1_spielfeld.ejs)"
Write-Host " public\js\map-ui.js"
Write-Host " public\js\quickmenu.js"
Write-Host " public\js\buildings\character-house.js (war: wohnhaus.js)"
Write-Host " public\js\buildings\blackmarket.js (war: schwarzmarkt.js)"
Write-Host " public\js\quickmenu\lucky-box.js (war: glucksbox.js)"
Write-Host " public\js\quickmenu\hero-bonus.js (war: heldenbonus.js)"
Write-Host " public\js\quickmenu\sealed-league.js (war: sealedliga.js)"
Write-Host " public\js\quickmenu\summoner.js (war: beschwoerer.js)"
Write-Host " public\js\quickmenu\actions.js (war: aktionen.js)"
Write-Host " public\js\quickmenu\bazaar.js (war: basar.js)"
Write-Host " public\js\quickmenu\booster-action.js (war: boosteraktion.js)"
Write-Host " public\js\quickmenu\booster-hunt.js (war: boosterjagd.js)"

View File

@ -1,4 +1,4 @@
const express = require("express");
const express = require("express");
const router = express.Router();
const db = require("../database/database");
@ -63,7 +63,7 @@ router.get("/1v1", requireLogin, async (req, res) => {
// Kein matchId → direkte Vorschau ohne Matchmaking (z.B. für Tests)
if (!matchId) {
return res.render("1v1_spielfeld", {
return res.render("1v1-battlefield", {
title: "1v1 Kampf",
matchId: null,
mySlot: "player1",
@ -102,7 +102,7 @@ router.get("/1v1", requireLogin, async (req, res) => {
const isPlayer1 = slot === "player1";
res.render("1v1_spielfeld", {
res.render("1v1-battlefield", {
title: "⚔️ 1v1 Kampf",
matchId,
mySlot: slot || "player1",
@ -125,7 +125,7 @@ router.get("/1v1", requireLogin, async (req, res) => {
================================ */
router.get("/2v2", (req, res) => {
res.render("1v1_spielfeld", {
res.render("1v1-battlefield", {
title: "2v2 Kampf",
matchId: null,
mySlot: "player1",
@ -144,7 +144,7 @@ router.get("/2v2", (req, res) => {
================================ */
router.get("/4v4", (req, res) => {
res.render("1v1_spielfeld", {
res.render("1v1-battlefield", {
title: "4v4 Kampf",
matchId: null,
mySlot: "player1",

View File

@ -1,57 +1,11 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Charakter erstellen</title>
<style>
body{
margin:0;
height:100vh;
background:url("/images/background_login.png") center / cover no-repeat;
display:flex;
justify-content:center;
align-items:center;
font-family:sans-serif;
color:white;
}
.box{
background:rgba(0,0,0,0.7);
padding:40px;
border-radius:10px;
text-align:center;
width:400px;
}
input,
button{
width: 100%;
padding: 14px;
margin-top: 10px;
border-radius: 6px;
border: none;
box-sizing: border-box;
}
.error{
color:red;
margin-bottom:10px;
}
</style>
<link rel="stylesheet" href="/css/global.css" />
<link rel="stylesheet" href="/css/login.css" />
</head>

View File

@ -8,144 +8,8 @@
href="/images/favicon/dok_favicon_32px.ico"
type="image/x-icon"
/>
<link rel="stylesheet" href="/css/global.css">
<style>
* {
box-sizing: border-box;
font-family: "Tangerine", serif;
}
body {
margin: 0;
min-height: 100vh;
background: url("/images/background_login.png") center / cover no-repeat fixed;
display: flex;
justify-content: center;
align-items: center;
}
/* Nebel über Tal */
.fog {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40%;
z-index: 0;
pointer-events: none;
}
@keyframes fogmove {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Login Panel */
.launcher {
width: 380px;
padding: 30px;
position: relative;
z-index: 2;
font-family: "Tangerine", serif;
font-size: 16px;
background: rgba(10, 15, 20, 0.75);
backdrop-filter: blur(10px);
border-radius: 10px;
border: 1px solid rgba(100, 170, 255, 0.4);
box-shadow:
0 0 40px rgba(0, 0, 0, 0.8),
0 0 20px rgba(70, 120, 255, 0.5);
}
/* Inputs */
input,
select,
button,
.register,
.server-status {
width: 100%;
padding: 13px;
font-size: 24px;
margin-bottom: 15px;
font-family: "Tangerine", serif;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 6px;
color: white;
}
/* Login Button */
.login {
width: 100%;
padding: 14px;
font-size: 32px;
background: linear-gradient(45deg, #3da2ff, #7dd3ff);
border: none;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: 0.25s;
}
.login:hover {
transform: scale(1.05);
box-shadow:
0 0 20px #4aa3ff,
0 0 40px #4aa3ff;
}
/* Register */
.register {
display: block;
text-align: center;
margin-top: 10px;
color: #ccc;
text-decoration: none;
}
.register:hover {
color: white;
}
/* Server Status */
.server-status {
margin-top: 18px;
font-size: 24px;
padding: 10px;
background: rgba(0, 0, 0, 0.45);
border-radius: 6px;
}
.online {
color: #3cff5a;
}
.offline {
color: #ff4b4b;
}
</style>
<link rel="stylesheet" href="/css/global.css" />
<link rel="stylesheet" href="/css/login.css" />
</head>
<body>

View File

@ -5,35 +5,7 @@
<title>Map Developer</title>
<link rel="stylesheet" href="/css/global.css" />
<style>
body {
margin: 0;
background: #000;
display: flex;
justify-content: center;
}
.wrapper {
position: relative;
}
img {
display: block;
}
svg {
position: absolute;
top: 0;
left: 0;
}
polygon {
fill: rgba(255, 0, 0, 0.35);
stroke: red;
stroke-width: 2;
}
</style>
<link rel="stylesheet" href="/css/launcher-dev.css" />
</head>
<body>

View File

@ -10,7 +10,10 @@
/>
<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
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" />
@ -18,76 +21,6 @@
<link rel="stylesheet" href="/css/quickmenu.css" />
<link rel="stylesheet" href="/css/hud.css" />
<link rel="stylesheet" href="/css/mine.css" />
<style>
body {
margin: 0;
height: 100vh;
background: #000;
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
color: white;
}
.panel {
background: rgba(0, 0, 0, 0.6);
padding: 40px;
border-radius: 10px;
text-align: center;
width: 400px;
}
/* ── Music Control ── */
#music-control {
position: fixed;
bottom: 16px;
right: 16px;
z-index: 9999;
display: flex;
align-items: center;
gap: 8px;
background: rgba(10, 5, 0, 0.85);
border: 1px solid #c8960c;
border-radius: 8px;
padding: 6px 10px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
#music-mute-btn {
background: none;
border: none;
cursor: pointer;
font-size: 20px;
line-height: 1;
padding: 0;
color: #f0d080;
transition: transform 0.15s;
}
#music-mute-btn:hover {
transform: scale(1.2);
}
#music-volume {
-webkit-appearance: none;
appearance: none;
width: 80px;
height: 4px;
background: #3a2000;
border-radius: 2px;
outline: none;
cursor: pointer;
}
#music-volume::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: #c8960c;
cursor: pointer;
}
</style>
</head>
<body>
@ -222,34 +155,33 @@
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"/>
<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"/>
<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"/>
<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"/>
<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>
@ -265,74 +197,327 @@
<!-- 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
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
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
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
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
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
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 -->
@ -341,7 +526,6 @@
<div class="tab-content" id="tab-actions"></div>
<div class="tab-content" id="tab-upgrade"></div>
</div>
</div>
</div>
@ -676,7 +860,12 @@
audio.src = shuffled[i];
audio.muted = muted;
if (!muted) {
audio.play().then(() => { started = true; }).catch(() => {});
audio
.play()
.then(() => {
started = true;
})
.catch(() => {});
}
}
@ -691,7 +880,12 @@
localStorage.setItem("dok_muted", muted);
if (!muted) {
if (!audio.src) playTrack(index);
audio.play().then(() => { started = true; }).catch(() => {});
audio
.play()
.then(() => {
started = true;
})
.catch(() => {});
}
}
@ -715,7 +909,12 @@
function tryResume() {
if (!muted && (audio.paused || !started)) {
audio.play().then(() => { started = true; }).catch(() => {});
audio
.play()
.then(() => {
started = true;
})
.catch(() => {});
}
}
document.addEventListener("click", tryResume);

View File

@ -3,93 +3,8 @@
<head>
<meta charset="UTF-8">
<title>Registrieren - Dynasty of Knights</title>
<link rel="stylesheet" href="/css/global.css">
<style>
body {
margin:0;
min-height:100vh;
background:url("/images/background_login.png") center / cover no-repeat;
display:flex;
justify-content:center;
align-items:center;
font-family:sans-serif;
}
.register-box {
width:380px;
padding:30px;
background:rgba(10,15,20,0.8);
border-radius:10px;
border:1px solid rgba(100,170,255,0.4);
box-shadow:
0 0 40px rgba(0,0,0,0.8),
0 0 20px rgba(70,120,255,0.5);
}
input, select, button {
width:100%;
padding:12px;
margin-bottom:15px;
border-radius:6px;
border:1px solid rgba(255,255,255,0.2);
background:rgba(255,255,255,0.1);
color:white;
}
button {
background:linear-gradient(45deg,#3da2ff,#7dd3ff);
border:none;
cursor:pointer;
}
button:hover {
box-shadow:
0 0 20px #4aa3ff,
0 0 40px #4aa3ff;
}
.error {
color:red;
margin-bottom:15px;
}
.back {
display:block;
text-align:center;
color:#ccc;
margin-top:10px;
}
.back:hover {
color:white;
}
</style>
<link rel="stylesheet" href="/css/global.css" />
<link rel="stylesheet" href="/css/login.css" />
</head>