diff --git a/app.js b/app.js
index bdf8275..9a2e611 100644
--- a/app.js
+++ b/app.js
@@ -153,6 +153,33 @@ app.get("/api/building/:id", requireLogin, async (req, res) => {
}
});
+/* ========================
+ HUD API
+======================== */
+
+app.get("/api/hud", requireLogin, async (req, res) => {
+ const userId = req.session.user.id;
+ try {
+ const [[account]] = await db.query(
+ "SELECT ingame_name FROM accounts WHERE id = ?",
+ [userId],
+ );
+ const [[currency]] = await db.query(
+ "SELECT silver, gold, gems FROM account_currency WHERE account_id = ?",
+ [userId],
+ );
+ res.json({
+ name: account?.ingame_name || "Held",
+ silver: currency?.silver || 0,
+ gold: currency?.gold || 0,
+ gems: currency?.gems || 0,
+ });
+ } catch (err) {
+ console.error(err);
+ res.status(500).json({ error: "DB Fehler" });
+ }
+});
+
app.get("/api/buildings", requireLogin, async (req, res) => {
const userId = req.session.user.id;
diff --git a/public/css/hud.css b/public/css/hud.css
new file mode 100644
index 0000000..4a69b44
--- /dev/null
+++ b/public/css/hud.css
@@ -0,0 +1,243 @@
+/* =========================
+ HUD Container
+========================= */
+
+#hud {
+ position: fixed;
+ top: 10px;
+ left: 60px;
+ z-index: 1500;
+
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+
+ pointer-events: none;
+}
+
+/* =========================
+ Charakter Panel (oben)
+========================= */
+
+#hud-character {
+ display: flex;
+ align-items: center;
+ gap: 0;
+
+ background: linear-gradient(135deg,
+ rgba(10, 6, 2, 0.92) 0%,
+ rgba(30, 18, 6, 0.92) 100%
+ );
+
+ border: 2px solid #8b6a2a;
+ border-radius: 8px 8px 0 0;
+ border-bottom: 1px solid #5a3e15;
+
+ padding: 6px 14px 6px 6px;
+ pointer-events: all;
+
+ min-width: 280px;
+
+ box-shadow:
+ 0 2px 12px rgba(0,0,0,0.7),
+ inset 0 1px 0 rgba(255,220,80,0.08);
+}
+
+/* Avatar */
+
+#hud-avatar-wrap {
+ position: relative;
+ width: 62px;
+ height: 62px;
+ flex-shrink: 0;
+}
+
+#hud-avatar {
+ width: 62px;
+ height: 62px;
+ border-radius: 50%;
+ object-fit: cover;
+ display: block;
+ border: 2px solid #c8960a;
+ box-shadow: 0 0 10px rgba(200,150,10,0.5);
+}
+
+#hud-vip {
+ position: absolute;
+ bottom: -4px;
+ left: 50%;
+ transform: translateX(-50%);
+
+ background: linear-gradient(#b8720a, #7a4a05);
+ border: 1px solid #f0b030;
+ border-radius: 4px;
+
+ font-family: "Cinzel", serif;
+ font-size: 8px;
+ font-weight: bold;
+ color: #ffe080;
+ white-space: nowrap;
+
+ padding: 1px 5px;
+ letter-spacing: 0.5px;
+}
+
+/* Name + Klasse */
+
+#hud-info {
+ display: flex;
+ flex-direction: column;
+ margin-left: 10px;
+ flex: 1;
+ gap: 4px;
+}
+
+#hud-name {
+ font-family: "Cinzel", serif;
+ font-size: 14px;
+ font-weight: bold;
+ color: #f0d9a6;
+ text-shadow: 0 1px 4px rgba(0,0,0,0.8);
+ letter-spacing: 0.5px;
+}
+
+/* Energie */
+
+#hud-energy {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+#hud-energy-label {
+ font-family: "Cinzel", serif;
+ font-size: 10px;
+ color: #a08060;
+}
+
+#hud-energy-bar-wrap {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+}
+
+#hud-energy-value {
+ font-family: "Cinzel", serif;
+ font-size: 11px;
+ font-weight: bold;
+ color: #f0d9a6;
+
+ background: rgba(0,0,0,0.4);
+ border: 1px solid #5a3e15;
+ border-radius: 4px;
+ padding: 1px 7px;
+}
+
+#hud-energy-plus {
+ width: 18px;
+ height: 18px;
+
+ background: linear-gradient(#4a8a20, #2a5a10);
+ border: 1px solid #6acc30;
+ border-radius: 4px;
+
+ color: #fff;
+ font-size: 13px;
+ font-weight: bold;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ cursor: pointer;
+ pointer-events: all;
+ transition: 0.15s;
+ line-height: 1;
+}
+
+#hud-energy-plus:hover {
+ background: linear-gradient(#5aaa28, #3a7015);
+ box-shadow: 0 0 6px rgba(100,200,40,0.4);
+}
+
+/* =========================
+ Währungs Panel (unten)
+========================= */
+
+#hud-currency {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ background: linear-gradient(135deg,
+ rgba(8, 5, 1, 0.92) 0%,
+ rgba(22, 13, 4, 0.92) 100%
+ );
+
+ border: 2px solid #8b6a2a;
+ border-top: none;
+ border-radius: 0 0 8px 8px;
+
+ padding: 5px 10px;
+ pointer-events: all;
+
+ box-shadow: 0 4px 12px rgba(0,0,0,0.7);
+}
+
+/* Einzelne Währung */
+
+.hud-res {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.hud-res-icon {
+ font-size: 15px;
+ line-height: 1;
+}
+
+.hud-res-value {
+ font-family: "Cinzel", serif;
+ font-size: 11px;
+ font-weight: bold;
+ color: #f0d9a6;
+ text-shadow: 0 1px 3px rgba(0,0,0,0.8);
+ min-width: 40px;
+}
+
+/* Trennlinie */
+
+.hud-sep {
+ width: 1px;
+ height: 18px;
+ background: rgba(139,106,42,0.4);
+ margin: 0 2px;
+}
+
+/* Gold Button */
+
+#hud-gold-btn {
+ margin-left: 4px;
+ padding: 3px 12px;
+
+ background: linear-gradient(#d4830a, #f0a020);
+ border: 1px solid #f8c040;
+ border-radius: 5px;
+
+ font-family: "Cinzel", serif;
+ font-size: 11px;
+ font-weight: bold;
+ color: #3a1a00;
+
+ cursor: pointer;
+ pointer-events: all;
+ transition: 0.15s;
+ white-space: nowrap;
+}
+
+#hud-gold-btn:hover {
+ background: linear-gradient(#e4930a, #ffc030);
+ box-shadow: 0 0 8px rgba(240,160,30,0.5);
+ transform: scale(1.04);
+}
diff --git a/public/images/avatar_placeholder.svg b/public/images/avatar_placeholder.svg
new file mode 100644
index 0000000..eb92c47
--- /dev/null
+++ b/public/images/avatar_placeholder.svg
@@ -0,0 +1,40 @@
+
diff --git a/public/js/hud.js b/public/js/hud.js
new file mode 100644
index 0000000..a85b013
--- /dev/null
+++ b/public/js/hud.js
@@ -0,0 +1,27 @@
+/* ================================
+ HUD – Charakter & Währungsanzeige
+================================ */
+
+export async function loadHud() {
+ try {
+ const res = await fetch("/api/hud");
+ if (!res.ok) throw new Error("HUD API Fehler");
+ const data = await res.json();
+
+ // Name
+ document.getElementById("hud-name").textContent = data.name;
+
+ // Währungen
+ document.getElementById("hud-silver").textContent = formatNumber(data.silver);
+ document.getElementById("hud-gold").textContent = formatNumber(data.gold);
+ document.getElementById("hud-gems").textContent = formatNumber(data.gems);
+
+ } catch (err) {
+ console.error("HUD Fehler:", err);
+ }
+}
+
+function formatNumber(n) {
+ if (n === undefined || n === null) return "0";
+ return Number(n).toLocaleString("de-DE");
+}
diff --git a/views/launcher.ejs b/views/launcher.ejs
index 9bbfc1c..4019f35 100644
--- a/views/launcher.ejs
+++ b/views/launcher.ejs
@@ -12,6 +12,7 @@
+