Switch to using chroma.js for colors. Add colors to more upgrades.

constants.js

@@ -1,5 +1,11 @@
 "use strict";
 
+const start_color = "#882222";
+const end_color = "#228888";
+
+//const range = chroma.scale([start_color, end_color]).mode("lab");
+const range = chroma.cubehelix().scale();
+
 const resourceTypes = {
   "food": {
     name: "food",
@@ -315,7 +321,7 @@ function createTemplateUpgrades() {
 }
 
 const prodUpgradeCounts = [1, 25, 50, 75, 100];
-const prodUpgradeColors = ['#00429d', '#73a2c6', '#ffffe0', '#f4777f', '#93003a'];
+const prodUpgradeColors = range.colors(5);
 
 function createProdUpgrades() {
   for (const [key, value] of Object.entries(prodUpgradeText)) {
@@ -355,7 +361,8 @@ function createProdUpgrades() {
   }
 }
 
-const prodAllUpgradeColors = ['#00429d', '#3e67ae', '#618fbf', '#85b7ce', '#b1dfdb', '#ffcab9', '#fd9291', '#e75d6f', '#c52a52', '#93003a'];
+const prodAllUpgradeColors = range.colors(10)
+
 
 function createProdAllUpgrades() {
   let prefix = "prod-all-"
@@ -395,7 +402,7 @@ function createProdAllUpgrades() {
   }
 }
 
-const clickUpgradeColors = ['#00429d', '#3e67ae', '#618fbf', '#85b7ce', '#b1dfdb', '#ffcab9', '#fd9291', '#e75d6f', '#c52a52', '#93003a'];
+const clickUpgradeColors = range.colors(10);
 
 function createClickUpgrades() {
   let prefix = "prod-click-";
@@ -485,6 +492,8 @@ function createHelperUpgrades() {
   });
 }
 
+const clickVictimUpgradeColors = range.colors(Object.keys(buildings).length - 1);
+
 function createClickVictimUpgrades() {
   const prefix = "click-";
   let counter = 1;
@@ -495,7 +504,7 @@ function createClickVictimUpgrades() {
       "desc": text.desc,
       "icon": [
         { icon: buildings[key].icon, color: "#eee" },
-        { icon: "fa-hand-pointer", color: "red" }
+        { icon: "fa-hand-pointer", color: clickVictimUpgradeColors[counter - 1] }
       ],
       "cost": {
         "food": 1000 * Math.pow(10, counter)

gorge.html

@@ -6,6 +6,7 @@
   <title>Gorge</title>
   <link rel="stylesheet" type="text/css" href="https://csshake.surge.sh/csshake.min.css">
   <link rel="stylesheet" href="gorge.css">
+  <script src="chroma.min.js"></script>
   <script src="polyfill.js"></script>
   <script src="util.js"></script>
   <script src="constants.js"></script>