Branches can use no color id, or custom hex codes

changelog.md

@@ -3,6 +3,8 @@
 
 ##v1.3.5?
 - Completely automated convertToDecimal, now you never have to worry about it again.
+- Branches can be defined without a color id. But they can also use hex values for color ids!
+
 
 ##v1.3.4: 10/8/20
 - Added "midsection" feature to add things to a tab's layout while still keeping the standard layout.

docs/layer-features.md

@@ -113,10 +113,9 @@ Key:
 
 # Tree/node features
 
-- branches: **optional**, determines what lines should appear on the tree when this layer is visible.
-            An array of pairs consisting of a layer name and a number from 1 to 3.
-            A branch will appear connecting this layer to the correspodnding layer, with the color based on the number.
-            You should add the branch value to the layer that is unlocked second.
+- branches: **optional**, an array of layer ids. On a tree, a line will appear from this layer to all of the layers
+            in the list. Alternatively, an entry in the array can be a pair consisting of the layer id and a color
+            value. The color value can either be a string with a hex color code, or a number from 1-3 (theme-affected colors)
 
 - nodeStyle(): **optional**, a function returning a CSS object, styles this layer's node on the tree
 

index.html

@@ -52,6 +52,7 @@
 			<h3>v1.3.5</h3>
 			<ul>
 				<li>The system now handles convertToDecimal for everything automatically!</li>
+				<li>Branches can be defined without a color id. But they can also use hex values for color ids!</li>
 			</ul>
 			<h3>v1.3.4</h3>
 			<ul>

js/canvas.js

@@ -50,8 +50,16 @@ function drawTree() {
 }
 
 function drawTreeBranch(num1, data) { // taken from Antimatter Dimensions & adjusted slightly
-	let num2 = data[0]
-	let color_id = data[1]
+	let num2 = data
+	let color_id = 1
+
+	if (Array.isArray(data)){
+		num2 = data[0]
+		color_id = data[1]
+	}
+
+	if(typeof(color_id) == "number")
+		color_id = colors_theme[color_id]
 
 	if (document.getElementById(num1) == null || document.getElementById(num2) == null)
 		return
@@ -64,7 +72,7 @@ function drawTreeBranch(num1, data) { // taken from Antimatter Dimensions & adju
     let y2 = end.top + (end.height / 2) + (document.getElementById("treeTab").scrollTop || document.body.scrollTop);
     ctx.lineWidth = 15;
     ctx.beginPath();
-    ctx.strokeStyle = colors_theme[color_id]
+    ctx.strokeStyle = color_id
     ctx.moveTo(x1, y1);
     ctx.lineTo(x2, y2);
     ctx.stroke();

js/layers.js

@@ -289,7 +289,7 @@ addLayer("f", {
         },
         row: 1,
         layerShown() {return true}, 
-        branches: [["c", 1]], // Each pair corresponds to a line added to the tree when this node is unlocked. The letter is the other end of the line, and the number affects the color, 1 is default
+        branches: ["c"], // When this layer appears, a branch will appear from this layer to any layers here. Each entry can be a pair consisting of a layer id and a color.
 
         tooltipLocked() { // Optional, tooltip displays when the layer is locked
             return ("This weird farmer dinosaur will only see you if you have at least " + this.requires() + " candies. You only have " + formatWhole(player.points))