diff --git a/public/css/mine.css b/public/css/mine.css index 81fbd9d..a63f4e6 100644 --- a/public/css/mine.css +++ b/public/css/mine.css @@ -121,6 +121,24 @@ display: block; } +/* Eisen – Bild aus der Datenbank */ +.mine-resource-icon-iron { + width: 24px; + height: 24px; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; +} + +.mine-resource-icon-iron img { + width: 24px; + height: 24px; + object-fit: contain; + filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7)); + display: block; +} + .mine-resource-label { flex: 1; font-size: 13px; diff --git a/public/images/items/eisen.png b/public/images/items/eisen.png new file mode 100644 index 0000000..5fb083f Binary files /dev/null and b/public/images/items/eisen.png differ diff --git a/public/js/buildings/mine.js b/public/js/buildings/mine.js index a37429a..dc721ef 100644 --- a/public/js/buildings/mine.js +++ b/public/js/buildings/mine.js @@ -126,8 +126,6 @@ document.addEventListener("click", async (e) => { const lines = data.collected .map( (c) => - resourceIcon(c.resource) + - " " + resourceLabel(c.resource) + ": +" + c.amount, @@ -173,11 +171,17 @@ function startCountdown(buildingId) { } function resourceIcon(resource) { + if (resource === "iron") { + return ( + "" + + "Eisen" + + "" + ); + } const map = { gold: "🪙", copper: "🟤", silver: "⚪", - iron: "⚙️", stone: "🪨", wood: "🪵", };