From 540d84e8a459b46a009cafcff43c0d4b4ec68299 Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Fri, 6 Dec 2019 10:38:03 -0500
Subject: [PATCH] Show icons on buildings and upgrades..or, at least, on micros

---
 constants.js               |  1 +
 gorge.css                  | 14 ++++++++++++++
 gorge.js                   | 12 +++++++++++-
 images/buildings/micro.svg |  1 +
 4 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 images/buildings/micro.svg

diff --git a/constants.js b/constants.js
index cb0d8b4..c09ce19 100644
--- a/constants.js
+++ b/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)
         },
diff --git a/gorge.css b/gorge.css
index 39332c8..0d4e475 100644
--- a/gorge.css
+++ b/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);
 }
diff --git a/gorge.js b/gorge.js
index dca6718..84bdbf3 100644
--- a/gorge.js
+++ b/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(); });
diff --git a/images/buildings/micro.svg b/images/buildings/micro.svg
new file mode 100644
index 0000000..a895af9
--- /dev/null
+++ b/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>
\ No newline at end of file