rethser

public/css/hud.css

@@ -253,6 +253,24 @@
   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 */
 .hud-res-icon-iron {
   width: 28px;
@@ -315,3 +333,13 @@
   box-shadow: 0 0 8px rgba(240, 160, 30, 0.5);
   transform: scale(1.04);
 }
+
+/* Inline Gold Icon (z.B. Schwarzmarkt Preise) */
+.inline-gold-icon {
+  width: 18px;
+  height: 18px;
+  object-fit: contain;
+  vertical-align: middle;
+  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
+  display: inline-block;
+}

public/css/mine.css

@@ -121,6 +121,24 @@
   display: block;
 }
 
+/* Goldmünze – Bild aus der Datenbank */
+.mine-resource-icon-gold {
+  width: 48px;
+  height: 48px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mine-resource-icon-gold img {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
+  display: block;
+}
+
 /* Eisen – Bild aus der Datenbank */
 .mine-resource-icon-iron {
   width: 48px;

public/js/buildings/mine.js

@@ -174,12 +174,18 @@ function resourceIcon(resource) {
   if (resource === "iron") {
     return (
       "<span class='mine-resource-icon-iron'>" +
-      "<img src='/images/items/eisen.png' alt='Eisen'>" +
+      "<img src='/images/items/eisen.png' alt=''>" +
+      "</span>"
+    );
+  }
+  if (resource === "gold") {
+    return (
+      "<span class='mine-resource-icon-gold'>" +
+      "<img src='/images/items/goldmuenze.png' alt=''>" +
       "</span>"
     );
   }
   const map = {
-    gold: "🪙",
     copper: "🟤",
     silver: "⚪",
     stone: "🪨",

public/js/buildings/schwarzmarkt.js

@@ -72,7 +72,7 @@ async function loadPages() {
 <div class="market-slot buy" data-page="${i}">
   <img src="/images/items/beutel.png" class="bag-icon">
   <div class="bag-label">Beutel ${i}</div>
-  <div class="bag-price">${price.price} 🪙</div>
+  <div class="bag-price">${price.price} <img src="/images/items/goldmuenze.png" class="inline-gold-icon" alt="Gold"></div>
   <button class="buy-button">Kaufen</button>
 </div>
 `;
@@ -120,7 +120,7 @@ document.addEventListener("click", async (e) => {
     if (data.error) {
       if (data.missing) {
         showNotification(
-          `Du hast ${data.gold} 🪙 Gold.\nDu brauchst ${data.price} 🪙 Gold.\nEs fehlen dir noch ${data.missing} 🪙 Gold.`,
+          `Du hast ${data.gold} Gold.\nDu brauchst ${data.price} Gold.\nEs fehlen dir noch ${data.missing} Gold.`,
           "Nicht genug Gold",
           "🪙",
         );

views/launcher.ejs

@@ -334,7 +334,9 @@
           </div>
           <div class="hud-sep"></div>
           <div class="hud-res">
-            <span class="hud-res-icon">🪙</span>
+            <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-value" id="hud-gold">0</span>
           </div>
           <button id="hud-gold-btn">Gold</button>