From 8ae89bd0981445d6ac59d2b60c4a1f0e6560f948 Mon Sep 17 00:00:00 2001 From: Harley White Date: Mon, 7 Jun 2021 00:13:18 -0400 Subject: [PATCH] Added custom branch widths --- changelog.md | 3 ++- docs/layer-features.md | 2 +- docs/main-mod-info.md | 2 ++ docs/upgrades.md | 2 +- js/Demo/demoTree.js | 2 +- js/technical/canvas.js | 4 +++- 6 files changed, 10 insertions(+), 5 deletions(-) diff --git a/changelog.md b/changelog.md index 8e39a8a..2d5cdef 100644 --- a/changelog.md +++ b/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. diff --git a/docs/layer-features.md b/docs/layer-features.md index 1ea624c..ec24abc 100644 --- a/docs/layer-features.md +++ b/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. diff --git a/docs/main-mod-info.md b/docs/main-mod-info.md index fd67931..98932ff 100644 --- a/docs/main-mod-info.md +++ b/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. \ No newline at end of file diff --git a/docs/upgrades.md b/docs/upgrades.md index 74f48fb..465705d 100644 --- a/docs/upgrades.md +++ b/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). \ No newline at end of file +- 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. \ No newline at end of file diff --git a/js/Demo/demoTree.js b/js/Demo/demoTree.js index 55f1046..c60cfe0 100644 --- a/js/Demo/demoTree.js +++ b/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)}, diff --git a/js/technical/canvas.js b/js/technical/canvas.js index bc4e2be..67925e1 100644 --- a/js/technical/canvas.js +++ b/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);