hud eingebaut
This commit is contained in:
parent
b942401253
commit
a65f696ed9
27
app.js
27
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;
|
||||
|
||||
|
||||
243
public/css/hud.css
Normal file
243
public/css/hud.css
Normal file
@ -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);
|
||||
}
|
||||
40
public/images/avatar_placeholder.svg
Normal file
40
public/images/avatar_placeholder.svg
Normal file
@ -0,0 +1,40 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
||||
<defs>
|
||||
<radialGradient id="bgGrad" cx="50%" cy="40%" r="60%">
|
||||
<stop offset="0%" stop-color="#4a3020"/>
|
||||
<stop offset="100%" stop-color="#1a0d05"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="skinGrad" cx="50%" cy="40%" r="60%">
|
||||
<stop offset="0%" stop-color="#d4956a"/>
|
||||
<stop offset="100%" stop-color="#a0623a"/>
|
||||
</radialGradient>
|
||||
<clipPath id="circle">
|
||||
<circle cx="50" cy="50" r="48"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<!-- Hintergrund -->
|
||||
<circle cx="50" cy="50" r="48" fill="url(#bgGrad)"/>
|
||||
<!-- Koerper/Schultern -->
|
||||
<ellipse cx="50" cy="95" rx="30" ry="18" fill="#2a1a0a" clip-path="url(#circle)"/>
|
||||
<ellipse cx="50" cy="82" rx="22" ry="14" fill="#3a2210" clip-path="url(#circle)"/>
|
||||
<!-- Hals -->
|
||||
<rect x="43" y="62" width="14" height="12" rx="4" fill="url(#skinGrad)" clip-path="url(#circle)"/>
|
||||
<!-- Kopf -->
|
||||
<ellipse cx="50" cy="48" rx="20" ry="22" fill="url(#skinGrad)" clip-path="url(#circle)"/>
|
||||
<!-- Haare -->
|
||||
<ellipse cx="50" cy="30" rx="21" ry="12" fill="#8b5a20" clip-path="url(#circle)"/>
|
||||
<ellipse cx="31" cy="42" rx="7" ry="14" fill="#8b5a20" clip-path="url(#circle)"/>
|
||||
<ellipse cx="69" cy="42" rx="7" ry="14" fill="#8b5a20" clip-path="url(#circle)"/>
|
||||
<!-- Augen -->
|
||||
<ellipse cx="42" cy="50" rx="3.5" ry="3" fill="#2a1500"/>
|
||||
<ellipse cx="58" cy="50" rx="3.5" ry="3" fill="#2a1500"/>
|
||||
<ellipse cx="41.5" cy="49.5" rx="1" ry="1" fill="#fff" opacity="0.6"/>
|
||||
<ellipse cx="57.5" cy="49.5" rx="1" ry="1" fill="#fff" opacity="0.6"/>
|
||||
<!-- Nase -->
|
||||
<ellipse cx="50" cy="57" rx="2" ry="1.5" fill="#b0724a" opacity="0.5"/>
|
||||
<!-- Mund -->
|
||||
<path d="M44,63 Q50,67 56,63" stroke="#a05030" stroke-width="1.5" fill="none" stroke-linecap="round"/>
|
||||
<!-- Gold Rand -->
|
||||
<circle cx="50" cy="50" r="48" fill="none" stroke="#c8960a" stroke-width="3"/>
|
||||
<circle cx="50" cy="50" r="44" fill="none" stroke="#f0d060" stroke-width="0.8" opacity="0.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
27
public/js/hud.js
Normal file
27
public/js/hud.js
Normal file
@ -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");
|
||||
}
|
||||
@ -12,6 +12,7 @@
|
||||
<link rel="stylesheet" href="/css/global.css" />
|
||||
<link rel="stylesheet" href="/css/building.css" />
|
||||
<link rel="stylesheet" href="/css/quickmenu.css" />
|
||||
<link rel="stylesheet" href="/css/hud.css" />
|
||||
<link rel="stylesheet" href="/css/mine.css" />
|
||||
<style>
|
||||
body {
|
||||
@ -258,6 +259,52 @@
|
||||
</div>
|
||||
<div id="map-tooltip"></div>
|
||||
|
||||
<!-- ================================
|
||||
HUD
|
||||
================================ -->
|
||||
<div id="hud">
|
||||
<!-- Charakter Panel -->
|
||||
<div id="hud-character">
|
||||
<div id="hud-avatar-wrap">
|
||||
<img
|
||||
id="hud-avatar"
|
||||
src="/images/avatar_placeholder.svg"
|
||||
alt="Avatar"
|
||||
/>
|
||||
<div id="hud-vip">VIP 0</div>
|
||||
</div>
|
||||
<div id="hud-info">
|
||||
<div id="hud-name">...</div>
|
||||
<div id="hud-energy">
|
||||
<span id="hud-energy-label">Energie</span>
|
||||
<div id="hud-energy-bar-wrap">
|
||||
<span id="hud-energy-value">40 / 40</span>
|
||||
<div id="hud-energy-plus">+</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Währungs Panel -->
|
||||
<div id="hud-currency">
|
||||
<div class="hud-res">
|
||||
<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">
|
||||
<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">
|
||||
<span class="hud-res-icon">🪙</span>
|
||||
<span class="hud-res-value" id="hud-gold">0</span>
|
||||
</div>
|
||||
<button id="hud-gold-btn">Gold</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ================================
|
||||
Quick Menu Toggle
|
||||
================================ -->
|
||||
@ -580,6 +627,10 @@
|
||||
</script>
|
||||
<script src="/js/chat.js"></script>
|
||||
<script type="module" src="/js/quickmenu.js"></script>
|
||||
<script type="module">
|
||||
import { loadHud } from "/js/hud.js";
|
||||
loadHud();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
window.showNotification = function (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user