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) => {
|
app.get("/api/buildings", requireLogin, async (req, res) => {
|
||||||
const userId = req.session.user.id;
|
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/global.css" />
|
||||||
<link rel="stylesheet" href="/css/building.css" />
|
<link rel="stylesheet" href="/css/building.css" />
|
||||||
<link rel="stylesheet" href="/css/quickmenu.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/mine.css" />
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
@ -258,6 +259,52 @@
|
|||||||
</div>
|
</div>
|
||||||
<div id="map-tooltip"></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
|
Quick Menu Toggle
|
||||||
================================ -->
|
================================ -->
|
||||||
@ -580,6 +627,10 @@
|
|||||||
</script>
|
</script>
|
||||||
<script src="/js/chat.js"></script>
|
<script src="/js/chat.js"></script>
|
||||||
<script type="module" src="/js/quickmenu.js"></script>
|
<script type="module" src="/js/quickmenu.js"></script>
|
||||||
|
<script type="module">
|
||||||
|
import { loadHud } from "/js/hud.js";
|
||||||
|
loadHud();
|
||||||
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
window.showNotification = function (
|
window.showNotification = function (
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user