derthjret

public/css/hud.css

@@ -253,6 +253,42 @@
   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;

public/css/mine.css

@@ -121,6 +121,42 @@
   display: block;
 }
 
+/* Holz – Bild aus der Datenbank */
+.mine-resource-icon-wood {
+  width: 48px;
+  height: 48px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mine-resource-icon-wood img {
+  width: 48px;
+  height: 48px;
+  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: 48px;
+  height: 48px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mine-resource-icon-stone img {
+  width: 48px;
+  height: 48px;
+  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: 48px;

public/js/buildings/mine.js

@@ -185,11 +185,23 @@ function resourceIcon(resource) {
       "</span>"
     );
   }
+  if (resource === "wood") {
+    return (
+      "<span class='mine-resource-icon-wood'>" +
+      "<img src='/images/items/holz.png' alt=''>" +
+      "</span>"
+    );
+  }
+  if (resource === "stone") {
+    return (
+      "<span class='mine-resource-icon-stone'>" +
+      "<img src='/images/items/stein.png' alt=''>" +
+      "</span>"
+    );
+  }
   const map = {
     copper: "🟤",
     silver: "⚪",
-    stone: "🪨",
-    wood: "🪵",
   };
   return map[resource] || "📦";
 }

views/launcher.ejs

@@ -344,12 +344,16 @@
 
         <div class="hud-res-row">
           <div class="hud-res">
-            <span class="hud-res-icon">🪵</span>
+            <div class="hud-res-icon-wood">
+              <img src="/images/items/holz.png" alt="" onerror="this.style.display='none';this.parentElement.insertAdjacentText('beforeend','🪵')">
+            </div>
             <span class="hud-res-value" id="hud-wood">0</span>
           </div>
           <div class="hud-sep"></div>
           <div class="hud-res">
-            <span class="hud-res-icon">🪨</span>
+            <div class="hud-res-icon-stone">
+              <img src="/images/items/stein.png" alt="" onerror="this.style.display='none';this.parentElement.insertAdjacentText('beforeend','🪨')">
+            </div>
             <span class="hud-res-value" id="hud-stone">0</span>
           </div>
           <div class="hud-sep"></div>