More components can display per-row

changelog.md

@@ -3,12 +3,14 @@
 ### v2.6 - 6/2/21
 - Fixed issues with NaN checking. Saves should never break now unless something really unusual happens.
 - Added a drop-down menu component!
+- Added upgrade-tree component!
 - Options are now saved separately, and not affected by hard resetting or importing saves.
 - Fixed demo.html
 - Fixed branches not working on the right tab.
 - Fixed background color not working on the left tab.
 - Fixed branches not updating when tree tab is not shown.
 - You can now use "this" in tabFormat!
+- Added per-row displaying for achievements, challenges, milestones, grids
 - Added onComplete for milestones.
 - Added addBuyables.
 - The prestige/sec display now shows decimals.

docs/custom-tab-layouts.md

@@ -66,6 +66,8 @@ These are the existing components, but you can create more in [components.js](/j
 - tree: Displays a tree. The argument is an array of arrays containing the names of the nodes in the tree (first by row, then by column)
     [See here for more information on tree layouts and nodes!](trees-and-tree-customization.md)
 
+- upgrade-tree: Displays a of upgrades from this layer. The argument is an array of arrays containing the ids of the upgrades in the tree (first by row, then by column)
+
 - toggle: A toggle button that toggles a bool value. The argument is a pair that identifies the location in player of the bool to toggle, e.g. `[layer, id]`. 'layer' also affects the color of the toggle.
 
 - grid: Displays the gridable grid for the layer. If you need more than one grid, use a layer proxy.

docs/upgrades.md

@@ -61,4 +61,6 @@ If you want to do something more complicated like upgrades that cost two currenc
 
 - canAfford(): **OVERRIDE**, a function determining if you are able to buy the upgrade
 
-- pay(): **OVERRIDE**, a function that reduces your currencies when you buy the upgrade
+- pay(): **OVERRIDE**, a function that reduces your currencies when you buy the upgrade
+
+- 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).

js/components.js

@@ -121,11 +121,11 @@ function loadVue() {
 	})
 
 	Vue.component('challenges', {
-		props: ['layer'],
+		props: ['layer', 'data'],
 		template: `
 		<div v-if="tmp[layer].challenges" class="upgTable">
-			<div v-for="row in tmp[layer].challenges.rows" class="upgRow">
-				<div v-for="col in tmp[layer].challenges.cols">
+		<div v-for="row in (data === undefined ? tmp[layer].challenges.rows : data)" class="upgRow">
+		<div v-for="col in tmp[layer].challenges.cols">
 					<challenge v-if="tmp[layer].challenges[row*10+col]!== undefined && tmp[layer].challenges[row*10+col].unlocked" :layer = "layer" :data = "row*10+col" v-bind:style="tmp[layer].componentStyles.challenge"></challenge>
 				</div>
 			</div>
@@ -186,11 +186,11 @@ function loadVue() {
 	})
 
 	Vue.component('milestones', {
-		props: ['layer'],
+		props: ['layer', 'data'],
 		template: `
 		<div v-if="tmp[layer].milestones">
 			<table>
-				<tr v-for="id in Object.keys(tmp[layer].milestones)" v-if="tmp[layer].milestones[id]!== undefined && tmp[layer].milestones[id].unlocked && milestoneShown(layer, id)">
+				<tr v-for="id in (data === undefined ? Object.keys(tmp[layer].milestones) : data)" v-if="tmp[layer].milestones[id]!== undefined && tmp[layer].milestones[id].unlocked && milestoneShown(layer, id)">
 					<milestone :layer = "layer" :data = "id" v-bind:style="tmp[layer].componentStyles.milestone"></milestone>
 				</tr>
 			</table>
@@ -377,7 +377,7 @@ function loadVue() {
 		props: ['layer', 'data'],
 		template: `
 		<div v-if="tmp[layer].grid" class="upgTable">
-			<div v-for="row in tmp[layer].grid.rows" class="upgRow">
+			<div v-for="row in (data === undefined ? tmp[layer].grid.rows : data)" class="upgRow">
 				<div v-for="col in tmp[layer].grid.cols"><div v-if="run(layers[layer].grid.getUnlocked, layers[layer].grid, row*100+col)"
 					class="upgAlign" v-bind:style="{'margin': '1px',  'height': 'inherit',}">
 					<gridable :layer = "layer" :data = "row*100+col" v-bind:style="tmp[layer].componentStyles.gridable"></gridable>
@@ -461,10 +461,10 @@ function loadVue() {
 
 
 	Vue.component('achievements', {
-		props: ['layer'],
+		props: ['layer', 'data'],
 		template: `
 		<div v-if="tmp[layer].achievements" class="upgTable">
-			<div v-for="row in tmp[layer].achievements.rows" class="upgRow">
+			<div v-for="row in (data === undefined ? tmp[layer].achievements.rows : data)" class="upgRow">
 				<div v-for="col in tmp[layer].achievements.cols"><div v-if="tmp[layer].achievements[row*10+col]!== undefined && tmp[layer].achievements[row*10+col].unlocked" class="upgAlign">
 					<achievement :layer = "layer" :data = "row*10+col" v-bind:style="tmp[layer].componentStyles.achievement"></achievement>
 				</div></div>