Show an icon for each resource.

src/hud/Resources.svelte

@@ -1,16 +1,33 @@
 <script lang="ts">
-    import { getStorage } from "../utils";
+    import { getProduction, getStorage } from "../utils";
     import village from "../village";
 
 
     $: capacity = getStorage($village);
+    $: production = getProduction($village);
 </script>
 
 <div class="resources">
-    <div>Wood: { Math.floor($village.resources.wood) } / { capacity.wood }</div>
-    <div>Stone: { Math.floor($village.resources.stone) } / { capacity.stone }</div>
-    <div>Iron: { Math.floor($village.resources.iron) } / { capacity.iron }</div>
-    <div>Food: { Math.floor($village.resources.food) } / { capacity.food }</div>
+    <div>
+        <img src="/img/icons/wood.png" alt="Wood" />
+        { Math.floor($village.resources.wood) } / { capacity.wood }
+        ({ production.wood >= 0 ? '+' : '' }{ production.wood })
+    </div>
+    <div>
+        <img src="/img/icons/stone.png" alt="Stone" />
+        { Math.floor($village.resources.stone) } / { capacity.stone }
+        ({ production.stone >= 0 ? '+' : '' }{ production.stone })
+    </div>
+    <div>
+        <img src="/img/icons/iron.png" alt="Iron" />
+        { Math.floor($village.resources.iron) } / { capacity.iron }
+        ({ production.iron >= 0 ? '+' : '' }{ production.iron })
+    </div>
+    <div>
+        <img src="/img/icons/food.png" alt="Food" />
+        { Math.floor($village.resources.food) } / { capacity.food }
+        ({ production.food >= 0 ? '+' : '' }{ production.food })
+    </div>
 </div>
 
 <style>
@@ -18,4 +35,13 @@
         display: flex;
         justify-content: space-around;
     }
+
+    .resources div {
+        display: flex;
+        gap: 0.5em;
+    }
+
+    .resources img {
+        height: 1.5em;
+    }
 </style>