Rowified buyables+clickables

changelog.md

@@ -1,7 +1,7 @@
 # The Modding Tree changelog:
 
-### v2.6 - 6/2/21
+## v2.6: Fixed Reality - 6/3/21
-- Fixed issues with NaN checking. Saves should never break now unless something really unusual happens.
+- Fixed issues with NaN checking. The game also will not save if the save is broken.
 - Added a drop-down menu component!
 - Added upgrade-tree component!
 - Options are now saved separately, and not affected by hard resetting or importing saves.
@@ -10,10 +10,10 @@
 - 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 per-row displaying for achievements, challenges, milestones, grids, buyables, and clickables. THIS WILL BREAK BUYABLES/CLICKABLES THAT PREVIOUSLY USED THEIR TABFORMAT ARGUMENT FOR SIZE.
 - Added onComplete for milestones.
 - Added addBuyables.
-- The prestige/sec display now shows decimals.
+- The prestige/sec display now shows non-whole numbers.
 - resetsNothing now works immediately on a reset that enables it.
 - Made the star on maxed challenges larger.
 
@@ -25,6 +25,7 @@
 - Fixed problems in the documentation.
 - Added more customization to the "mark" component (but not an easy way to access it)
 
+
 ### v2.5.11.1 - 5/27/21
 - Fixed issues caused when the tree tab is disabled.
 
@@ -425,7 +426,6 @@
 - Static layers now show the currency amount needed for the next one if you can buy max.
 
 
-
 ### v1.2.4 - 10/4/20
 
 - Layers are now highlighted if you can buy an upgrade, and a new feature, shouldNotify,

docs/custom-tab-layouts.md

@@ -51,11 +51,7 @@ These are the existing components, but you can create more in [components.js](/j
 - drop-down: Lets the user input a value with a dropdown menu. The argument a 2-element array: [name, options].
     The name is the name of the variable in player[layer] that the input is for, and options is an array of strings for options you can use.
 
-- upgrades: The layer's upgrades. The argument is optional, and is a the list of rows this component should include, if it doesn't have all of them.
+- upgrades, milestones, challenges, achievements, buyables, clickables: Displays the layers upgrades/challenges/etc, as appropriate. The argument is optional, and is a the list of rows this component should include, if it doesn't have all of them.
-
-- milestones, challenges, achievements: Display the upgrades, milestones, and challenges for a layer, as appropriate.
-
-- buyables, clickables: Display all of the buyables/clickables for this layer, as appropriate. The argument is optional and is the size of the boxes in pixels.
 
 - microtabs: Display a set of subtabs for an area. The argument is the name of the set of microtabs in the "microtabs" feature.
 
@@ -70,7 +66,7 @@ These are the existing components, but you can create more in [components.js](/j
 
 - 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.
+- grid: Displays the gridable grid for the layer. If you need more than one grid, use a layer proxy. The argument is optional, and is a the list of rows this component should include, if it doesn't have all of them.
 
 - layer-proxy: Lets you use components from another layer. The argument is a pair, `[layer, data]`, consisting of the id of the layer to proxy from, and the tabFormat for the components to show.
     (Note: you cannot use a microtab within a layer proxy)

js/Demo/demoLayers.js

@@ -317,7 +317,7 @@ addLayer("c", {
                 style() {return  {'background-color': '#222222'}},
                 buttonStyle() {return {'border-color': 'orange'}},
                 content:[ 
-                    ["buyables", ""], "blank",
+                    "buyables", "blank",
                     ["row", [
                         ["toggle", ["c", "beep"]], ["blank", ["30px", "10px"]], // Width, height
                         ["display-text", function() {return "Beep"}], "blank", ["v-line", "200px"],

js/Demo/demoMod.js

@@ -12,7 +12,7 @@ let modInfo = {
 // Set your version in num and name
 let VERSION = {
 	num: "2.6",
-	name: "Dreams Really Do Come True",
+	name: "Fixed Reality",
 }
 
 let changelog = `<h1>Changelog:</h1><br>

js/components.js

@@ -257,9 +257,9 @@ function loadVue() {
 		template: `
 		<div v-if="tmp[layer].buyables" class="upgTable">
 			<respec-button v-if="tmp[layer].buyables.respec && !(tmp[layer].buyables.showRespec !== undefined && tmp[layer].buyables.showRespec == false)" :layer = "layer" v-bind:style="[{'margin-bottom': '12px'}, tmp[layer].componentStyles['respec-button']]"></respec-button>
-			<div v-for="row in tmp[layer].buyables.rows" class="upgRow">
+			<div v-for="row in (data === undefined ? tmp[layer].buyables.rows : data)" class="upgRow">
 				<div v-for="col in tmp[layer].buyables.cols"><div v-if="tmp[layer].buyables[row*10+col]!== undefined && tmp[layer].buyables[row*10+col].unlocked" class="upgAlign" v-bind:style="{'margin-left': '7px', 'margin-right': '7px',  'height': (data ? data : 'inherit'),}">
-					<buyable :layer = "layer" :data = "row*10+col" :size = "data"></buyable>
+					<buyable :layer = "layer" :data = "row*10+col"></buyable>
 				</div></div>
 				<br>
 			</div>
@@ -267,7 +267,6 @@ function loadVue() {
 	`
 	})
 
-	// data = id of buyable
 	Vue.component('buyable', {
 		props: ['layer', 'data', 'size'],
 		template: `
@@ -313,15 +312,14 @@ function loadVue() {
 			`
 	})
 	
-	// data = button size, in px
 	Vue.component('clickables', {
 		props: ['layer', 'data'],
 		template: `
 		<div v-if="tmp[layer].clickables" class="upgTable">
 			<master-button v-if="tmp[layer].clickables.masterButtonPress && !(tmp[layer].clickables.showMasterButton !== undefined && tmp[layer].clickables.showMasterButton == false)" :layer = "layer" v-bind:style="[{'margin-bottom': '12px'}, tmp[layer].componentStyles['master-button']]"></master-button>
-			<div v-for="row in tmp[layer].clickables.rows" class="upgRow">
+			<div v-for="row in (data === undefined ? tmp[layer].clickables.rows : data)" class="upgRow">
 				<div v-for="col in tmp[layer].clickables.cols"><div v-if="tmp[layer].clickables[row*10+col]!== undefined && tmp[layer].clickables[row*10+col].unlocked" class="upgAlign" v-bind:style="{'margin-left': '7px', 'margin-right': '7px',  'height': (data ? data : 'inherit'),}">
-					<clickable :layer = "layer" :data = "row*10+col" :size = "data" v-bind:style="tmp[layer].componentStyles.clickable"></clickable>
+					<clickable :layer = "layer" :data = "row*10+col" v-bind:style="tmp[layer].componentStyles.clickable"></clickable>
 				</div></div>
 				<br>
 			</div>

js/utils.js

@@ -162,7 +162,7 @@ function showNavTab(name, prev) {
 	if (tmp[name] && tmp[name].previousTab !== undefined) prev = tmp[name].previousTab
 	var toTreeTab = name == "tree-tab"
 	console.log(name + prev)
-	if (!tmp[prev]?.leftTab == !tmp[name]?.leftTab) player[name].prevTab = prev
+	if (name!== "none" && prev && !tmp[prev]?.leftTab == !tmp[name]?.leftTab) player[name].prevTab = prev
 	else if (player[name])
 		player[name].prevTab = ""
 	player.navTab = name