Met/unmet costs/requirements are indicated

gorge.css

@@ -155,6 +155,13 @@ body.dark {
   bottom: 0px;
 }
 
+.cost-met {
+  color: #0f0;
+}
+
+.cost-unmet {
+  color: #f00;
+}
 
 .upgrade-button {
   width: 75px;

gorge.js

@@ -263,45 +263,67 @@ function createDisplays() {
   }
 }
 
-function renderCost(cost) {
-  let list = [];
+function renderLine(line) {
+  let div = document.createElement("div");
+  div.innerText = line.text;
 
-  for (const [key, value] of Object.entries(cost)) {
-    list.push(value + " " + resourceTypes[key].name);
+  if (line.valid !== undefined) {
+    if (line.valid) {
+      div.classList.add("cost-met");
+    } else {
+      div.classList.add("cost-unmet");
+    }
   }
 
+  return div;
+}
+
+function renderLines(lines) {
   let divs = [];
 
-  for (let line of list) {
-    let div = document.createElement("div");
-    div.innerText = line;
-    divs.push(div);
+  for (let line of lines) {
+    divs.push(renderLine(line));
   }
 
   return divs;
 }
 
+function renderCost(cost) {
+  let list = [];
+
+  list.push({
+    "text": "Cost:"
+  });
+
+  for (const [key, value] of Object.entries(cost)) {
+    list.push({
+      "text": value + " " + resourceTypes[key].name,
+      "valid": resources[key] >= value
+    });
+  }
+
+  return renderLines(list);
+}
+
 function renderPrereqs(prereqs) {
   let list = [];
 
+  list.push({
+    "text": "Own:"
+  });
+
   for (const [key, value] of Object.entries(prereqs)) {
     if (key == "buildings") {
-      for (const [building, amount] of Object.entries(prereqs.buildings)) {
-        list.push(buildings[building].name + " x" + amount);
+      for (const [id, amount] of Object.entries(prereqs.buildings)) {
+        list.push({
+          "text": buildings[id].name + " x" + amount,
+          "valid": belongings[id].count >= amount
+        });
       }
     }
   }
 
-  let divs = [];
-
-  for (let line of list) {
-    let div = document.createElement("div");
-    div.innerText = line;
-    divs.push(div);
-  }
-
-
-  return divs;
+  return renderLines(list);
 }
 
 function upgradeTooltip(id, event) {