Nice number rendering. RenderLines supports classes for each line

gorge.css

@@ -51,6 +51,15 @@ button {
   font-size: 36px;
 }
 
+.resource-quantity {
+  font-size: 30px;
+}
+
+.resource-rate {
+  font-size: 18px;
+  color: #bbb;
+}
+
 #buildings-area {
   position: absolute;
   width: 20%;

gorge.js

@@ -111,11 +111,11 @@ function renderResources() {
 
   for (const [key, value] of Object.entries(resources)) {
 
-    let line1 = round(value) + " " + resourceTypes[key].name;
-    let line2 = round(currentProductivity[key],1) + " " + resourceTypes[key].name + "/sec";
+    let line1 = render(value, 3) + " " + resourceTypes[key].name;
+    let line2 = render(currentProductivity[key]) + " " + resourceTypes[key].name + "/sec";
 
-    list.push({"text": line1});
-    list.push({"text": line2});
+    list.push({"text": line1, "class": "resource-quantity"});
+    list.push({"text": line2, "class": "resource-rate"});
   }
 
   return renderLines(list);
@@ -415,6 +415,12 @@ function renderLine(line) {
     }
   }
 
+  if (line.class !== undefined) {
+    for (let entry of line.class.split(",")) {
+      div.classList.add(entry);
+    }
+  }
+
   return div;
 }
 
@@ -523,7 +529,7 @@ function prodSummary(id) {
   );
 
   list.push(
-    {"text": "Your " + belongings[id].count + " " + (belongings[id].count == 1 ? buildings[id].name + " is": buildings[id].plural + " are") + " producing " + round(productivityOf(id),1) + " food/sec"}
+    {"text": "Your " + render(belongings[id].count) + " " + (belongings[id].count == 1 ? buildings[id].name + " is": buildings[id].plural + " are") + " producing " + round(productivityOf(id),1) + " food/sec"}
   );
 
   let percentage = round(100 * productivityOf(id) / currentProductivity["food"], 2);

numbers.js

@@ -1,3 +1,27 @@
-function render(val) {
-  return Math.round(val);
+function render(val, places=1) {
+  return numberText(val, places);
+}
+
+function numberText(val, places=1) {
+  let power = Math.floor(Math.log10(val));
+
+  let order = Math.floor(power / 3);
+
+  val = round(val / Math.pow(1000, order), places).toFixed(places);
+
+  return val + " " + _numberWords[order];
+}
+
+_numberWords = {
+  0: "",
+  1: "thousand",
+  2: "million",
+  3: "billion",
+  4: "trillion",
+  5: "quadrillion",
+  6: "septillion",
+  7: "sextillion",
+  8: "octillion",
+  9: "nonillion",
+  10: "decillion"
 }