Show icons on buildings and upgrades..or, at least, on micros

constants.js

@@ -220,6 +220,7 @@ function createProdUpgrades() {
       upgrades[prefix + counter] = {
         "name": contents.name,
         "desc": contents.desc,
+        "icon": "buildings/" + key,
         "cost": {
           "food": buildings[key].cost * 5 * Math.pow(10,counter - 1)
         },

gorge.css

@@ -137,6 +137,12 @@ button {
   user-select: none;
 }
 
+.building-button > .building-icon {
+  position: absolute;
+  right: 0%;
+  height: 75px;
+}
+
 .building-button-disabled {
   background-color: #111;
   color: #999;
@@ -276,6 +282,14 @@ button {
   transition: 0.2s;
 }
 
+.upgrade-button > .upgrade-icon {
+  width: 100px;
+  height: 100px;
+  position: relative;
+  top: -50px;
+  opacity: 0.5;
+}
+
 .upgrade-button:hover {
   transform: scale(1.25, 1.25);
 }

gorge.js

@@ -391,9 +391,13 @@ function createBuildings() {
     let buttonCost = document.createElement("div");
     buttonCost.classList.add("building-button-cost");
 
+    let buildingIcon = document.createElement("img");
+    buildingIcon.classList.add("building-icon");
+    buildingIcon.src = "images/buildings/" + key + ".svg";
+
     button.appendChild(buttonName);
     button.appendChild(buttonCost);
-
+    button.appendChild(buildingIcon);
     button.addEventListener("mousemove", function(e) { buildingTooltip(key, e); });
     button.addEventListener("mouseleave", function() { buildingTooltipRemove(); });
     button.addEventListener("click", function() { buyBuilding(key); });
@@ -478,7 +482,13 @@ function createUpgrades() {
     let buttonName = document.createElement("div");
     buttonName.classList.add("upgrade-button-name");
     buttonName.innerText = value.name;
+
+    let upgradeIcon = document.createElement("img");
+    upgradeIcon.src = "images/" + value.icon + ".svg";
+    upgradeIcon.classList.add("upgrade-icon");
+  
     button.appendChild(buttonName);
+    button.appendChild(upgradeIcon);
 
     button.addEventListener("mousemove", function(e) { upgradeTooltip(key, e); });
     button.addEventListener("mouseleave", function() { upgradeTooltipRemove(); });

images/buildings/micro.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><style>.cls-1{fill:#bdccd4;}</style></defs><title>micro</title><polygon class="cls-1" points="114.69 475.44 256 37.69 397.31 475.44 114.69 475.44"/><path d="M256,39.32,396.63,474.94H115.37L256,39.32m0-3.26L114,475.94H398L256,36.06Z"/></svg>