Switch to fontawesome icons

constants.js

@@ -11,133 +11,152 @@ const buildings = {
     "plural": "Micros",
     "desc": "A tasty, squirmy treat.",
     "cost": 1e1,
-    "prod": 1e-1/1
+    "prod": 1e-1/1,
+    "icon": "fa-universal-access"
   },
   "anthro": {
     "name": "Anthro",
     "plural": "Anthros",
     "desc": "Something more substantial to sate your hunger.",
     "cost": 1e2,
-    "prod": 1e0/1.1
+    "prod": 1e0/1.1,
+    "icon": "fa-male"
   },
   "car": {
     "name": "Car",
     "plural": "Cars",
     "desc": "Crunchy shell, tasty center.",
     "cost": 1.2e3,
-    "prod": 1e1/1.2
+    "prod": 1e1/1.2,
+    "icon": "fa-car"
   },
   "bus": {
     "name": "Bus",
     "plural": "Buses",
     "desc": "Probably the worst place to be when a macro is aroud.",
     "cost": 1.4e4,
-    "prod": 1e2/1.3
+    "prod": 1e2/1.3,
+    "icon": "fa-bus"
   },
   "house": {
     "name": "House",
     "plural": "Houses",
     "desc": "Home sweet home - but it doesn't taste sweet?",
     "cost": 1.6e5,
-    "prod": 1e3/1.4
+    "prod": 1e3/1.4,
+    "icon": "fa-home"
   },
   "apartment": {
     "name": "Apartment",
     "plural": "Apartments",
     "desc": "More snacks, less packaging.",
     "cost": 1.8e6,
-    "prod": 1e4/1.5
+    "prod": 1e4/1.5,
+    "icon": "fa-building"
   },
   "block": {
     "name": "Block",
     "plural": "Blocks",
     "desc": "A whole pile of buildings.",
     "cost": 2e7,
-    "prod": 1e5/1.6
+    "prod": 1e5/1.6,
+    "icon": "fa-warehouse"
   },
   "town": {
     "name": "Town",
     "plural": "Towns",
     "desc": "'Tourist trap' has never been this literal.",
     "cost": 2.2e8,
-    "prod": 1e6/1.7
+    "prod": 1e6/1.7,
+    "icon": "fa-building"
   },
   "city": {
     "name": "City",
     "plural": "Cities",
     "desc": "Please no sitty on our city.",
     "cost": 2.4e9,
-    "prod": 1e7/1.8
+    "prod": 1e7/1.8,
+    "icon": "fa-city"
   },
   "metro": {
     "name": "Metropolis",
     "plural": "Metropolises",
     "desc": "A big ol' city. Tasty, too.",
     "cost": 2.6e10,
-    "prod": 1e8/1.9
+    "prod": 1e8/1.9,
+    "icon": "fa-landmark"
   },
   "county": {
     "name": "County",
     "plural": "Counties",
     "desc": "Why salt the land when you can slurp it?",
     "cost": 2.8e11,
-    "prod": 1e9/2
+    "prod": 1e9/2,
+    "icon": "fa-map"
   },
   "state": {
     "name": "State",
     "plural": "States",
     "desc": "The United States is made up of...43 states - no, 42...",
     "cost": 3e12,
-    "prod": 1e10/2.1
+    "prod": 1e10/2.1,
+    "icon": "fa-map-signs"
   },
   "country": {
     "name": "Country",
     "plural": "Countries",
     "desc": "One nation, under paw.",
     "cost": 3.2e13,
-    "prod": 1e11/2.2
+    "prod": 1e11/2.2,
+    "icon": "fa-flag"
   },
   "continent": {
     "name": "Continent",
     "plural": "Continents",
     "desc": "Earth-shattering appetite!",
     "cost": 3.4e14,
-    "prod": 1e12/2.3
+    "prod": 1e12/2.3,
+    "icon": "fa-mountain"
   },
   "planet": {
     "name": "Planet",
     "plural": "Planets",
     "desc": "Earth appetite!",
     "cost": 3.6e15,
-    "prod": 1e13/2.4
+    "prod": 1e13/2.4,
+    "icon": "fa-globe-europe"
   },
   "solar-system": {
     "name": "Solar System",
     "plural": "Solar Systems",
     "desc": "Earths appetite!",
     "cost": 3.8e16,
-    "prod": 1e14/2.5
+    "prod": 1e14/2.5,
+    "icon": "fa-meteor"
   },
   "galaxy": {
     "name": "Galaxy",
     "plural": "Galaxy",
     "desc": "In a galaxy far, far down your gullet...",
     "cost": 4.0e17,
-    "prod": 1e15/2.6
+    "prod": 1e15/2.6,
+    "icon": "fa-sun"
   },
   "universe": {
     "name": "Universe",
     "plural": "Universes",
     "desc": "Into the you-verse.",
     "cost": 4.2e18,
-    "prod": 1e16/2.7
+    "prod": 1e16/2.7,
+    "icon": "fa-asterisk"
   },
   "multiverse": {
     "name": "Multiverse",
     "plural": "Multiverses",
     "desc": "This is getting very silly.",
     "cost": 4.4e19,
-    "prod": 1e17/2.8
+    "prod": 1e17/2.8,
+    "icon": "fa-infinity"
   }
 }
 
@@ -220,7 +239,7 @@ function createProdUpgrades() {
       upgrades[prefix + counter] = {
         "name": contents.name,
         "desc": contents.desc,
-        "icon": "buildings/" + key,
+        "icon": buildings[key].icon,
         "cost": {
           "food": buildings[key].cost * 5 * Math.pow(10,counter - 1)
         },
@@ -257,6 +276,7 @@ function createProdAllUpgrades() {
     upgrades[prefix + counter] = {
       "name": contents.name,
       "desc": contents.desc,
+      "icon": "fa-cogs",
       "cost": {
         "food": 5 * Math.pow(10, counter+1)
       },
@@ -292,6 +312,7 @@ function createClickUpgrades() {
     upgrades[prefix + counter] = {
       name: contents.name,
       desc: contents.desc,
+      icon: "fa-hand-pointer",
       cost: {
         food: Math.pow(10, (counter*2)+1)
       },

gorge.css

@@ -134,13 +134,17 @@ button {
   border: 5px;
   border-color: #666;
   border-style: solid;
-  user-select: none;
+  user-select: none;;
 }
 
-.building-button > .building-icon {
+.building-button > .fas {
+  text-align: center;
+  width: 100%;
+  height: 100%;
+  left: 25%;
+  transform: translate(0, 5px);
   position: absolute;
-  right: 0%;
-  height: 75px;
+  font-size: 60px;
 }
 
 .building-button-disabled {
@@ -282,11 +286,11 @@ button {
   transition: 0.2s;
 }
 
-.upgrade-button > .upgrade-icon {
+.upgrade-button > .fas {
   width: 100px;
   height: 100px;
-  position: relative;
-  top: -50px;
+  font-size: 75px;
+  transform: translate(12.5%, -37.5%);
   opacity: 0.5;
 }
 
@@ -299,6 +303,10 @@ button {
     width: 13vw;
     height: 13vw;
   }
+
+  .upgrade-button > .fas {
+    font-size: 10vw;
+  }
 }
 
 .upgrade-button-inactive {

gorge.html

@@ -16,6 +16,7 @@
   <meta property="og:description" content="An idle game about eating people" />
   <meta property="og:image" content="https://crux.sexy/images/gorge.png" />
   <link rel="icon" href="https://crux.sexy/images/gorge.ico">
+  <script src="https://kit.fontawesome.com/10a16c6083.js" crossorigin="anonymous"></script>
 </head>
 
 <body class="dark">

gorge.js

@@ -391,9 +391,9 @@ 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";
+    let buildingIcon = document.createElement("i");
+    buildingIcon.classList.add("fas");
+    buildingIcon.classList.add(value.icon);
 
     button.appendChild(buttonName);
     button.appendChild(buttonCost);
@@ -483,9 +483,9 @@ function createUpgrades() {
     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");
+    let upgradeIcon = document.createElement("i");
+    upgradeIcon.classList.add("fas");
+    upgradeIcon.classList.add(value.icon);
   
     button.appendChild(buttonName);
     button.appendChild(upgradeIcon);

images/buildings/micro.svg

@@ -1 +0,0 @@
-<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>