Added custom branch widths

changelog.md

@@ -1,6 +1,7 @@
 # The Modding Tree changelog:
 
-- Added backgroundStyle to mod.js.
+- Added global background style to mod.js.
+- Tree branches can have custom line widths.
 - If an upgrade has both canAfford and cost, it checks both.
 - Releasing a held buyable/clickable with onHold doesn't click it again.
 - Attempt to fix buttons sometimes not updating.

docs/layer-features.md

@@ -135,7 +135,7 @@ You can make almost any value dynamic by using a function in its place, includin
 
 - position: **optional**. Determines the horizontal position of the layer in its row in a standard tree. By default, it uses the layer id, and layers are sorted in alphabetical order.
 
-- branches: **optional**. An array of layer/node 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 2-element array 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).
+- branches: **optional**. An array of layer/node 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 2-element array 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). A third element in the array optionally specifies line width.
 
 - nodeStyle: **optional**. A CSS object, where the keys are CSS attributes, which styles this layer's node on the tree.
 

docs/main-mod-info.md

@@ -54,6 +54,8 @@ function addedPlayerData() { return {
 
 Less important things beyond this point!
 
+- backgroundStyle: A CSS object containing the styling for the background of the full game. Can be a function!
+
 - maxTickLength(): Returns the maximum tick length, in milliseconds. Only really useful if you have something that reduces over time, which long ticks mess up (usually a challenge).
 
 - fixOldSave(): Can be used to modify a save file when loading into a new version of the game. Use this to undo inflation, never forcibly hard reset your players.

docs/upgrades.md

@@ -65,4 +65,4 @@ If you want to do something more complicated like upgrades that cost two currenc
 
 
 
-- branches: **optional**, This is primarially useful for upgrade trees. An array of upgrade ids. A line will appear from this upgrade to all of the upgrades in the list. Alternatively, an entry in the array can be a 2-element array consisting of the upgrade 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).
+- branches: **optional**, This is primarially useful for upgrade trees. An array of upgrade ids. A line will appear from this upgrade to all of the upgrades in the list. Alternatively, an entry in the array can be a 2 or 3-element array consisting of the upgrade 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). The third element optionally specifies line width.

js/Demo/demoTree.js

@@ -21,7 +21,7 @@ addNode("spook", {
 // A "ghost" layer which offsets f in the tree
 addNode("g", {
     symbol: "TH",
-    branches: ["c"],
+    branches: [["c", "red", 4]],
     color: '#6d3678',
     layerShown: true,
     canClick() {return player.points.gte(10)},

js/technical/canvas.js

@@ -49,9 +49,11 @@ function drawTree() {
 function drawTreeBranch(num1, data, prefix) { // taken from Antimatter Dimensions & adjusted slightly
 	let num2 = data
 	let color_id = 1
+	let width = 15
 	if (Array.isArray(data)){
 		num2 = data[0]
 		color_id = data[1]
+		width = data[2] || width
 	}
 
 	if(typeof(color_id) == "number")
@@ -69,7 +71,7 @@ function drawTreeBranch(num1, data, prefix) { // taken from Antimatter Dimension
     let y1 = start.top + (start.height / 2) + document.body.scrollTop;
     let x2 = end.left + (end.width / 2) + document.body.scrollLeft;
     let y2 = end.top + (end.height / 2) + document.body.scrollTop;
-    ctx.lineWidth = 15;
+    ctx.lineWidth = width;
     ctx.beginPath();
     ctx.strokeStyle = color_id
     ctx.moveTo(x1, y1);