1.2.3: Added row and column components and customizable blanks

docs/custom-tab-layouts.md

@@ -5,7 +5,7 @@ Custom tab layouts can be used to do basically anything in a tab window, especia
 ```js
     tabFormat: ["main-display",
             ["prestige-button", function(){return "Melt your points into "}],
-            ["raw-html", function() {return "<button onclick='console.log(`yeet`)'>'HI'</button>"}],
+            "blank",
             ["display-text",
                 function() {return 'I have ' + format(player.points) + ' pointy points!'},
                 {"color": "red", "font-size": "32px", "font-family": "Comic Sans MS"}],
@@ -24,7 +24,9 @@ These are the existing components, but you can create more in v.js:
 - raw-html: Displays some HTML. The argument is the HTML as a string, or a function that returns updating HTML.
             It doesn't work with many vue things.
 
-- blank: An empty newline
+- blank: Adds empty space. The default dimensions are 8px x 17px. The argument changes the dimensions.
+         If it's a single value (e.g. "20px"), that determines the height.
+         If you have a pair of arguments, the first is width and the second is height.
 
 - main-display: The text that displays the main currency for the layer and its effects.
 
@@ -38,6 +40,7 @@ These are the existing components, but you can create more in v.js:
 
 - toggle: A toggle button that toggles a bool value. The data is a pair that identifies what bool to toggle, [layer, id]
 
+- row: Display a list of components horizontally. The argument is an array of components in the tab layout format.
 
-Tip: use readData on things you're displaying! If the data is a function, it will return the result of calling it.
+- column: Display a list of components vertically. The argument is an array of components in the tab layout format.
-    Otherwise, it will return the data itself. This lets you use dynamic values, while keeping constant values convenient.
+          This is useful to display columns within a row.

index.html

@@ -45,7 +45,12 @@
 		</div>
 		<div v-if="player.tab=='changelog'" class="col right">
 			<button class="back" onclick="showTab('tree')">←</button><br>
-
+			<h3>v1.2.3</h3>
+			<ul>
+				<li>Added a row component, which displays a list of objects in a row.</li>
+				<li>Added a column component, which displays a list of objects in a column (useful within a row).</li>
+				<li>Changed blanks to have a customizable width and height.</li>
+			</ul><br>
 			<h3>v1.2: This Changes Everything!</h3>
 			<ul>
 				<li>Many layer features can now be static values or functions. (This made some notations change, which will break things)</li>
@@ -54,6 +59,10 @@
 				<li>Added a configurable offline time limit in modinfo at the top of index.html. (default 1 hour)</li>
 				<li>Added a few minor features, and updated the docs with new information.</li>
 			</ul><br>
+			<div class="link" onclick="showTab('old-stuff')">Alpha / Beta</div><br>
+		</div>
+		<div v-if="player.tab=='old-stuff'" class="col right">
+			<button class="back" onclick="showTab('changelog')">←</button><br>
 			<h3>v1.1.1</h3>
 			<ul>
 				<li>You can define hotkeys in layer config.</li>
@@ -64,12 +73,7 @@
 				<li>Custom CSS can now be used on any component! Make the third argument an object with the CSS parameters.</li>
 				<li>Lots of minor good things.</li>
 			</ul><br>
-		
+			<h3>v1.0: Technically Something</h3>
-			<div class="link" onclick="showTab('Old Stuff')">Alpha / Beta</div><br>
-		</div>
-		<div v-if="player.tab=='changelog_beta'" class="col right">
-			<button class="back" onclick="showTab('changelog')">←</button><br>
-			<h3>v1.0 Something</h3>
 			<ul>
 				<li>The first numbered version.</li>
 			</ul><br>
@@ -168,7 +172,8 @@
 					<div v-for="data in layers[layer].tabFormat">
 						<div v-if="!Array.isArray(data)" v-bind:is="data" :layer= "layer"></div>
 						<div v-else-if="data.length==3" v-bind:style="(data[2] ? data[2] : {})" v-bind:is="data[0]" :layer= "layer" :data= "data[1]"></div>
-					<div v-else-if="data.length==2" v-bind:is="data[0]" :layer= "layer" :data= "data[1]"></div>
+						<div v-else-if="data.length==2" v-bind:is="data[0]" :layer= "layer" :data= "data[1]">	
+					</div>
 				</divs>
 			</div>
 		</div>

js/game.js

@@ -5,7 +5,7 @@ var NaNalert = false;
 var gameEnded = false;
 
 let VERSION = {
-	num: "1.2.2",
+	num: "1.2.3",
 	name: "This changes everything!"
 }
 

js/layers.js

@@ -174,13 +174,21 @@ addLayer("c", {
         // Optional, lets you format the tab yourself by listing components. You can create your own components in v.js.
         tabFormat: ["main-display",
                     ["prestige-button", function() {return "Melt your points into "}],
+                    ["blank", "5px"], // Height
                     ["raw-html", function() {return "<button onclick='console.log(`yeet`)'>'HI'</button>"}],
                     ["display-text",
                         function() {return 'I have ' + format(player.points) + ' pointy points!'},
                         {"color": "red", "font-size": "32px", "font-family": "Comic Sans MS"}],
                     ["buyables", "150px"],
-                    ["toggle", ["c", "beep"]],
+                    ["row", [
-                    "milestones", "upgrades", "challs"],
+                        ["toggle", ["c", "beep"]], ["blank", ["30px", "10px"]], // Width, height
+                        ["display-text", function() {return "Beep"}], "blank",
+                        ["column", [
+                            ["prestige-button", function() {return "Be redundant for "}, {'width': '150px', 'height': '30px'}],
+                            ["prestige-button", function() {return "Be redundant for "}, {'width': '150px', 'height': '30px'}],
+                        ]],
+                    ]],
+                    "milestones", "blank", "upgrades", "challs"],
         style() {return {
             'background-color': '#3325CC'
         }},

js/v.js

@@ -28,6 +28,66 @@ function loadVue() {
 		`
 	})
 
+		// data = a function returning the content
+		Vue.component('display-text', {
+			props: ['layer', 'data'],
+			template: `
+			<span>{{readData(data)}}</span>
+			`
+		})
+	
+		// data = a function returning html content, with some limited functionality
+			Vue.component('raw-html', {
+				props: ['layer', 'data'],
+				template: `
+				<span v-html="readData(data)"></span>
+				`
+			})
+	
+		// Blank lines, data = optional height in px or pair with width and height in px
+		Vue.component('blank', {
+			props: ['layer', 'data'],
+			template: `
+				<div>
+				<div v-if="!data" v-bind:style="{'width': '8px', 'height': '17px'}"></div>
+				<div v-else-if="Array.isArray(data)" v-bind:style="{'width': data[0], 'height': data[1]}"></div>
+				<div v-else v-bind:style="{'width': '8px', 'height': 'data'}"><br></div>
+				</div>
+			`
+		})
+
+	// data = an array of Components to be displayed in a row
+	Vue.component('row', {
+		props: ['layer', 'data'],
+		template: `
+		<div class="upgTable">
+			<div class="upgRow">
+				<div v-for="item in data">
+				<div v-if="!Array.isArray(item)" v-bind:is="item" :layer= "layer"></div>
+				<div v-else-if="item.length==3" v-bind:style="(item[2] ? item[2] : {})" v-bind:is="item[0]" :layer= "layer" :data= "item[1]"></div>
+				<div v-else-if="item.length==2" v-bind:is="item[0]" :layer= "layer" :data= "item[1]"></div>
+				</div>
+			</div>
+		</div>
+		`
+	})
+
+		// data = an array of Components to be displayed in a column
+		Vue.component('column', {
+			props: ['layer', 'data'],
+			template: `
+			<div class="upgTable">
+				<div class="upgCol">
+					<div v-for="item in data">
+					<div v-if="!Array.isArray(item)" v-bind:is="item" :layer= "layer"></div>
+					<div v-else-if="item.length==3" v-bind:style="(item[2] ? item[2] : {})" v-bind:is="item[0]" :layer= "layer" :data= "item[1]"></div>
+					<div v-else-if="item.length==2" v-bind:is="item[0]" :layer= "layer" :data= "item[1]"></div>
+					</div>
+				</div>
+			</div>
+			`
+		})
+
 	Vue.component('challs', {
 		props: ['layer'],
 		template: `
@@ -140,30 +200,6 @@ function loadVue() {
 		`
 	})
 
-	// data = a function returning the content
-	Vue.component('display-text', {
-		props: ['layer', 'data'],
-		template: `
-		<span>{{readData(data)}}</span>
-		`
-	})
-
-	// data = a function returning html content, with some limited functionality
-		Vue.component('raw-html', {
-			props: ['layer', 'data'],
-			template: `
-			<span v-html="readData(data)"></span>
-			`
-		})
-
-	// Blank lines
-	Vue.component('blank', {
-		props: ['layer', 'data'],
-		template: `
-		<br>
-		`
-	})
-
 	app = new Vue({
 		el: "#app",
 		data: {